Firefox, jQuery, javascript, jetpack2009年5月26日とのさま
jQueryを使って簡単にfirefoxを拡張できるという、Jetpackがリリースされました。
もともと、firefoxのアドオン自体はjavascriptを使って作成できるので、いまいち利点がわからないのですが、とりあえず挑戦してみました。
Jetpack本体は、以下のページにあります。
Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web
アドオンが作れる！といっても、本当にアドオンが作れるわけではないようです。
実際はJetpackアドオンをインストールすると使えるようになる、Featureと呼ばれるスクリプトを簡単に作れるようになるみたいです。
Featureはjavascriptで記述し、jQueryと専用のAPIを使用することができます。
この辺の開発の手軽さが、Jetpackの魅力のようです。
使い方も簡単で、Featureの本体（jsファイル）と、公開（ダウンロード）用のHTMLを用意し、Jetpackインストール済のFirefoxからアクセスすると、画面上部にインストール用の領域が出てきて、そこからインストールできます。
と、いうわけで、昔作成したfirefox用のアドオンを移植してみました！
erina59snap :: Firefox Add-ons
ボタンを押すと表示されているページをjpgにして保存するアドオンです。
これを、Jetpack用のFeatureとして移植してみたいと思います。
まずは、スクリプトを作成します。
ステータスバーにアイコンを表示し、クリックされた時に処理を行うことにします。
ステータスバーへのアイコン表示は、APIを使って簡単に実装できます。
jetpack.statusBar.append({
html:'<img src="http://www.tonosamart.com/erina59jet/erina59jet_icon.png">',
width:19,
onReady:function(doc){
//click時の処理
}
});
あとはclick時の処理の場所に、昔作成したjavascriptをほぼそのまんまコピーしました。
これで、スクリプト部分は完成です！
次に、公開用のHTMLを作成します。
<link rel="jetpack" href="erina59jet.js">
こんな感じで、linkタグでスクリプトを指定すると、ページの上部にインストール用の領域が表示されるようになります。
それ以外は普通のホームページと同じ要領でページを作成します。
と、いうわけで完成したのが以下になります！
erina59jet
作り始めるときは若干不安でしたが、移植ということもあり、15分くらいで完成しました。
Jetpackをインストールした状態で、上記リンクを開くと、ページの上部にインストール用の領域が表示されます。
あとは、ページの説明に従って、Featureをインストールしてみてください。
インストールすると、ステータスバーにアイコンが追加されます。
アイコンをクリックすると、開いているページがjpg画像としてデスクトップに保存されます。
ただ、APIの仕様だと思うのですが、アイコンの表示位置が若干（2px）上に表示されるので気持ち悪いですね・・・。
まあ、そのうち直ると思ったのであえて工夫せずにそのままにしておきました。
最初は正直微妙な感じでしたが、実際作ってみるとアドオンを作る場合にくらべ、いちいちxpiにパッケージングしなくてもいいので、非常に簡単でした。
また、今回は使いませんでしたがjQueryの命令が使えるのも楽でいいです。
ただ、セキュリティ的には若干怖さも残ります。クライアントにファイルが作れるのは便利な反面やっぱり怖いです。信用できるスクリプト以外はうかつに実行できないですね・・・。
とはいえこれは、覚えておいて損はないと思います！
あと、この記事を書いている途中に気がついたのですが、firefoxの実験的なアドオンがAMOのユーザ登録をしなくても使えるようになっていますね。
この記事のもとになったアドオンがerina59snap :: Firefox Add-onsにあるので、よかったらこちらも試してみてください！
（レビューがたくさんたまったら、実験的なアドオンじゃなくなるらしいので、よろしくお願いします。）
