Kanasan.JS Jetpackワークショップに向けたJetpack入門
12/06(日)に京都で Kanasan.JS Jetpackワークショップが開かれる(告知ページ)。
僕は Jetpack ちょっとさわったことがあるし、前回の Kanasan.JS ではJetpack について発表した。でもそのままほったらかしにしていて、いろいろ忘れてしまった。
せっかくの機会なので、ここで Jetpack 入門をやってみる。
Jetpack とは
Jetpack とは、Firefox の簡単なアドオンを作成するためのアドオン。雰囲気としては Greasemonkey と似てる(けど違う)。
その「Jetpack 用の簡単なアドオン」のことを Feature と呼ぶ。Feature は Javascript、 特に jQuery と Jetpack API で書いていく。Firefox 内部のことは知らなくても書ける(ことを目指している)。
準備
まずはインストールから。公式サイトかMozilla Add-onsからインストールしよう。現時点での最新版は version 0.6.2。
あと、Firebug もほぼ必須なので、持ってない人はインストールしておこう。
Firefox のロケーションバーに about:jetpack
と入力、または「ツール」->「about:jetpack」と選んで Welcome っぽいページが出てきたら OK。
Hello World
何はともあれ Hello World から。こんな感じで2つファイルを作ろう。
hello.js
jetpack.tabs.onReady(function() { console.log("Hello Jetpack!"); });
install-hello.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <!-- link の href は実際の hello.js の置き場所に合わせる --> <link rel="jetpack" href="hello.js" name="Hello Jetpack" /> <title>Hello Jetpack install page</title> </head> <body> <h1>Hello Jetpack install page</h1> </body> </html>
で、Firefox から install-hello.html を開く。適当にOKっぽいボタンを押せばインストール完了。ページをリロードすると Firebug のコンソールにメッセージが出る。... はずなんだけど、僕の場合出てこなかった。
about:jetpack の Develop を読むと、「Firebug をこのページで有効にして再読み込みしたらログメッセージが出てくるようになるよ」って書いてある。でも、そうやっても出てこなかった。というか、再読み込みしたら Firebug のコンソールが閉じて無効化された。
エラーコンソールにはちゃんと出てる。むう、おかしい(Firebug のバージョンは 1.4.5)。まあ、とりあえずほっとこう。
コードの修正
今度はコードを修正して再インストールしてみる。
about:jetpack
ページの Installed Features を開くと、インストール済みの Feature 一覧が出てくるだろう。そこの「refresh」というやつで再インストールできる。
適当に hello.js を書き換えて refresh すると修正が反映されたはずだ。いちいちアンインストールしなくてもいいのがうれしい。
リンク
最後に、参考になるページのリンクを紹介しておく。
- Jetpack 公式サイト
- Jetpack API リファレンスマニュアル(微妙にあてにならない)
- jetpackgallery(Jetpack Feature ホスティングサイト)
- Labs/Jetpack/JEPs(新しい機能についてのドキュメント)
以下は日本語ページ。
- Jetpack Tutorial 日本語版
- Jetpack APIリファレンス 日本語版(古いページなのであんまりあてにならない)
Hello World だけで結構長くなった。次回に続く、かもしれない。
2009/12/04 追記
続きを書いた。