Born Neet

どうも、引き続きJetpackに興味津々なtnantokaです。

突然ですが、JavaScriptにはデータの保存（永続化）ができないという弱点があります。
なので、ちょっとでもユーザ情報を持ったりするプログラムを書こうとすると、
サーバサイドスクリプトの力を借りるはめになります。

PerlもPythonもPHPもRubyも書けない僕にとって、
これは非常に困る問題です。

なので、HTML5のlocalStorageにはとても期待しています。
といっても使用策定も実装の追いつきもまだまだ先のこと。

そんな中調べてみたら、Jetpackには"storage.simple"なる
永続化機能があることを知りました。

早速試しにFeatureを作ってみました。

Jetpack Memo

説明

ちょっとしたメモを保存するJetpack Featureです。

使い方は、以下の通りです。

まずはメモの保存。
右下の鉛筆アイコンをクリックするとプロンプトが表示されます。
そしたら、「key,メモ」と入力してOKを押せば保存できます。
※ keyはなんでもいいですが、忘れたらそのメモとはお別れです。
　（/Users/xxx/Library/Application Support/Firefox/Profiles/yyy.default/jetpack/zzz/に残ってると思いますが・・・）

お次はメモの取り出しです。
左端に表示されているメモ帳アイコンをクリックすると、
またまたプロンプトが表示されます。
先ほどのキーを入力すると、メモ帳アイコンのすぐ右に保存した内容が表示されます。

と、まぁこれだけのしょぼいものです。
勉強中なのでご了承下さい。

参考

• Jetpack APIリファレンス | Screw-Axis
  storage,slidebarの説明がわかりやすいです。
• Jetpack・JEPのSlidebarに仕様変更 - まめ畑
  slideBarの新しい仕様について。（知らなかったのでハマりました・・・）
• jetpackのstorage.simpleで保存したデータを消す方法 - まめ畑
  今回は使いませんでしたが、stragemのデータを消す方法です。
• [JavaScript] dataスキームURI生成（画像データのBase64変換）
  お手軽dataURI作成。
• Vicuna - アイコン
  毎度のことですが、wuさんのアイコンを使わせてもらいました。

[0回]

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

こんな感じになります。

[0回]

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

ダメージ

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

[0回]

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

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

Apache

$ which httpd
/usr/sbin/httpd

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使いへの道のりは遠いなぁ！

[0回]

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

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

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

攻撃

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

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

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

[0回]