Born Neet

Firefox Developers Conference 2009 - アドオンで Web の未来を切り開く！（#fxdevcon2009）
に行ってきました。

セミナーの内容は資料とかどっかにあがるだろうし、誰かが書いてくれると思うので、
そちらを参考にしてもらうとして、ここでは仕入れた情報を生かしてプログラミングしてみます。

というわけでJetpackingです。

パラレルでやってたはてなの方を聞いてたんで、「3分Jetpacking」は聞けませんでしたが、
せっかくきっかけをもらったのでやります。

作るのはMake Linkの簡易版みたいなやつ。
bornneet.comやtnantoka.netかどうかを判断して、
内部/外部リンク用のaタグをクリップボートにコピペするだけです。

はい、僕専用です。

それでは、はじまりはじまり。

準備する

参考サイトの通りです。

・・・じゃあんまりなので、軽く説明を。

Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web
から、アドオンをインストールすれば終了です。
以降、再起動不要のアドオン開発が始まります。

※ Firebug最新版だとなんかうまく動きません。
　上記サイトに従ってfirebug-1.4X.0a27を入れたら大丈夫でした。
　b3でもいけました。（2009/11/10）

作る

さて、作っていきます。

といっても「about:jetpack」にアクセスして、
Developのところにあるテキストエディタで試しながら作ればいいだけです。

んで、できたのがこれ↓
（Firefoxでクリップボードが簡単に操れて便利！！bookmarkletだとFlash使わないとできないもんなぁ。）

// これやらんとmenu/clipboardが使えない
jetpack.future.import('menu'); 
jetpack.future.import('clipboard'); 

jetpack.menu.context.page.add({
	label: 'External Link',
	command: function() {
	
		var url = jetpack.tabs.focused.contentDocument.location.href;
		var external = '" class="external" target="_blank" title="新しいウィンドウで開きます"';
		
		if(url.search('bornneet.com') != -1 
			|| url.search('tnantoka.net') != -1
			|| url.search('tagget.org') != -1 
			|| url.search('bornneet.blog.shinobi.jp') != -1) {
		
			external = '"';	
			
		}
	
		jetpack.clipboard.set('>a href="' + url + external + '<' + 	
			jetpack.tabs.focused.contentDocument.title + '>/a<');
	}
});

たったこれだけで、コンテキストメニューからリンクコピペ機能が使えます。
（menuやclipboardの機能はimportを書かないと動かないので注意です。）

僕以外には全く役に立ちませんが、
External Link
からインストールできます。

以上です。
いやぁ、噂通りお手軽にいろいろできそうですねぇ。
これからもちょっとした困り事があったら作ってみようと思います。
（bookmarkletでできないことでも諦めなくてよくなる！）

参考サイト

Jetpackチュートリアル | Screw-Axis
about:jetpackのtutorialの日本語訳＋α。わかりやすいです。

Image Editor Jetpack
コードを見ればJetpack 0.6の使い方が一目で分かるAza Raskinさんの作品。
今日の講演でもこれを使ったデモ（live coding）をしてくれました。
ちなみに、男前です。

Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
公開用htmlとかのわかりやすい説明。

追記 2009/11/08 23:30

こんな感じになります。

さて、そろそろいつもの飽き癖が出てきましたが・・・。
とりあえずキリのいいところまでは、ということで、
HP表示と、勝ち負け判定をつけました。

ダメージ

モチベーションも下がってきたので、戦闘シーン作りはこれで一旦終わり。
次は何をしようかなぁ？

Canvasでゲームの戦闘シーンを作るのに飽きたので（！）
気分転換に久々にPerlをやってみる。

といってもmacにperlの環境を構築してなかったので、そこから。
SQLiteを叩けるところまでが目標。

Apache

$ which httpd
/usr/sbin/httpd

入ってた。
起動はGUIでやるらしい。せっかくUnixなのに何かやだ。
かといって毎回「sudo apachectl start」してパスワード入力も勘弁。

じゃ、ソースから入れ直そう。

curl -O http://ftp.riken.jp/net/apache/httpd/httpd-2.2.14.tar.gz
tar xf httpd-2.2.14.tar.gz
cd httpd-2.2.14

./configure --prefix=/Users/t/apache --enable-ssl
make
make install

cd
vi apache/conf/httpd.conf
Listen 8080

vi .profile 
export PATH=/Users/t/apache/bin:/opt/local/bin:/opt/local/sbin:$PATH
source .profile
apachectl start

http://localhost:8080/

よしOK。
（SSLはめんどかったので省略）

Perl

which perl
/usr/bin/perl
which cpan
/user/bin/perl
あった

cpan
ごちゃごちゃ設定・・・はなく自動で終わった。

vi apache/cgi-bin/index.cgi
#!/usr/bin/perl

use strict;
use warnings;

use CGI;

my $q = CGI->new;

print $q->header;

print 'Hello, Perl on Apache on Snow Leopard!!';

chmod a+x apache/cgi-bin/index.cgi

http://localhost:8080/cgi-bin/index.cgi

SQLite

最後。
参考→Mac(Leopard) に DBD::SQLite をいれる時には注意 | Supernova
yohsuke.net ++: DBD::SQLiteのお勉強
Perl　と　SQLite　についてお尋ねします。 PerlとSQLiteを使ったソースを多く見てみたいのですが、 初心者向けのソースがあるHPを紹介していただけないでしょうか？ いろ.. - 人力検索はてな

which sqlite3
/usr/bin/sqlite3
あった

sudo cpan
cpan[1]> o conf makepl_arg USE_LOCAL_SQLITE=true
cpan[2]> install DBD::SQLite

mkdir apache/data

vi apache/cgi-bin/sqlite.cgi
#!/usr/bin/perl

use strict;
use warnings;

use CGI;
use DBI;

my $q = CGI->new;

my $db = '../data/test.db';

my $dbh = DBI->connect("dbi:SQLite:dbname=$db");
$dbh->do('CREATE TABLE foo (id integer primary key, name)');

my $insert = $dbh->prepare("INSERT INTO foo VALUES(?, ?)");
$insert->execute(undef,'t');

my $select = $dbh->prepare("SELECT * FROM foo WHERE id=?");
$select->execute('1');
my @row = $select->fetchrow_array;

print $q->header;

print '<pre>';
print "id\tname\n";
print join("\t", @row);
print '</pre>';


chmod a+x sqlite.cgi

http://localhost:8080/cgi-bin/sqlite.cgi

なんか最後のスクリプトがとてつもなく怪しいけど、
一応できた。

うーん、Perl使いへの道のりは遠いなぁ！

好評（？）のCanvasで粛々とゲームを作る連載企画（？）。

前回は敵（クロネコ）を登場させました。
しかし、一方的にこちらがいじめられるだけでした。

というわけで、反撃できるようにしました。

攻撃

ダメージを受けたときの挙動が、
「向いている方向の逆に飛ぶ」
なので、端っこで外側を向いている敵に攻撃すると自爆します。

まぁファミコンのゲームとかって、こういう理不尽な仕様あったよね・・・ってことで。

さて、このままだとエンドレスで戦闘が続いちゃうので、
次はダメージ計算でもやってみますか。
（あと、スーパークラス作って、主人公、敵、剣を継承させるようにしなとメンテが大変^^）

さて、珍しくまだ飽きずにCanvasプログラミングを続けています。

いつも通り、行き当たりばったりでコードを書いてたら汚くなってきたので、
ここらでリファクタリングしました。
（速度的にはあまりよくないけど、オブジェクト毎にファイルを分けました。
個々のソースは汚いまんまです^^）

ついでに背景と影をつけて、敵を登場させました。
※ 攻撃が効かないので、ひたすらやられるのみですが・・・

敵

次は反撃できるようにします。