Add-on Builder

Add-on Builder とは

Add-on Builder（コードネーム FlightDeck）は、 オンラインの Jetpack 開発環境である。 Skywriter（コードネーム Bespin）によるソースコードの編集と版管理、 開発したコードのデバッグ実行、XPI のパッケージングなどの機能が提供される。 ローカル環境で Jetpack 開発をするには Python の実行環境を用意してコマンドラインで cfx コマンドを実行する必要があるが、 Add-on Builder を使えばより手軽にアドオン開発を始められる。

Add-on Builder Preview Release

Add-on Builder は http://builder.addons.mozilla.org/ で公開されている。

「Create Add-on」ボタンを押すと新規アドオンが作成される。 アドオンの作成には addons.mozilla.org のアカウントが必要。 作成済みのアドオンを更新する場合は、画面右上の「Sign In」からサインインする。 トップページ一番下には「Create Library」ボタンもあり、他のアドオンから参照されるライブラリを開発できる。

こちらがログイン後の開発画面。 ソースコードエディタを中心に、左側にファイルの一覧、上側にツールバーという構成。 ソースコードエディタは JavaScript のキーワードや文字列リテラルが色付けされている。

左側のリストは「Modules」「Attachments」「Libraries」からなり、それぞれ JavaScript のコード、 self.data で参照されるリソースファイル、外部のライブラリへの参照となっている。 また、アドオン名部分をクリックするとアドオン名・説明文・バージョン番号を更新できる。 これらの情報を使って XPI がパッケージングされるため、 package.json を手書きで作成する必要はない。

2010/09/23 以降では、Libraries の中から Jetpack SDK のバージョンを選択できるようになった。 2010/12/01 時点では SDK 0.8、0.9 が利用できる。

ツールバーには「Test」「Download」「Save」「Revisions」の 4 つのボタンが並んでいる。 「Test」ボタンにより、開発中のアドオンをテスト実行できる。 下のスクリーンショットのようなメッセージが出てくるので、ヘルパアドオンをインストールする。 このヘルパアドオンにより、Firefox 4 だけでなく Firefox 3.6 でも、 再起動なしで開発中のアドオンを適用したり元に戻したりできる。

「Download」をクリックすると XPI 形式にパッケージされたアドオンがダウンロードできる。 「Save」をクリックすると編集したコードが保存される。 このとき、自動的に rev. 1、rev. 2、rev. 3、... とリビジョン番号が付けられる。 「Revisions」ボタンを押すとリビジョン番号の一覧が表示され、過去のコードを参照できる。

感想

Add-on Builder を使うことで、開発環境のセットアップの必要がなくなり、 どこでもアドオンを開発できるようになる。 コマンドラインの cfx コマンドはとっつきにくいので、このような統合開発環境の整備は重要だと思う。 一方で、コードエディタの操作性やレスポンスはいまひとつのように感じられる。 エディタは各開発者の好きなものを使って、 パッケージングやテストだけ簡単に試せるような環境も必要かもしれない。

コードエディタは API のオートコンプリートとか マウスオーバーでのヘルプ表示とかできたらうれしいけど。 動的型付け言語だと難しそうだよなぁ。

関連リンク

• https://wiki.mozilla.org/AMO:Projects/FlightDeck
• http://builder.addons.mozilla.org/

更新履歴

• 2010/12/01: URL が builder.addons.mozilla.org に変更された。
• 2010/11/21: 「Add-ons Builder」ではなく「Add-on Builder」に修正。
• 2010/10/07: Wiki ページが AMO 配下に移動したので関連リンクを更新。
• 2010/09/25: Add-ons Builder 1.0a5 のリリースにあわせ、情報を更新。
• 2010/06/29: URL は builder.mozillalabs.com だった。
• 2010/06/28: 初版作成。