Kanasan.JS Jetpackワークショップに向けたJetpack入門

12/06(日)に京都で Kanasan.JS Jetpackワークショップが開かれる(告知ページ)。

僕は Jetpack ちょっとさわったことがあるし、前回の Kanasan.JS ではJetpack について発表した。でもそのままほったらかしにしていて、いろいろ忘れてしまった。

せっかくの機会なので、ここで Jetpack 入門をやってみる。

Jetpack とは

Jetpack とは、Firefox の簡単なアドオンを作成するためのアドオン。雰囲気としては Greasemonkey と似てる(けど違う)。

その「Jetpack 用の簡単なアドオン」のことを Feature と呼ぶ。Feature は Javascript、 特に jQueryJetpack 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 すると修正が反映されたはずだ。いちいちアンインストールしなくてもいいのがうれしい。

リンク

最後に、参考になるページのリンクを紹介しておく。

以下は日本語ページ。

Hello World だけで結構長くなった。次回に続く、かもしれない。

2009/12/04 追記

続きを書いた。