Mozilla Thunderbird アドオンの作り方 ~ 開発環境の準備

Posted by
ぴろり
Posted at
2014/03/16 16:44
Trackbacks
関連記事 (0)
Comments
コメント (2)
Post Comment
コメントできます
Category
開発メモ カテゴリ
カバーイメージ

 先日、初めて Mozilla Thunderbird アドオンを開発・公開してみましたが、そこそこ簡単なアドオンだったので、アドオン開発を始める取っ掛かりとしては好感触でした。開発環境を準備するところから完成に至るまでのステップを、自分のためにもメモしておきます。

このエントリーをはてなブックマークに追加  

スクラップ帳 » Mozilla Thunderbird アドオンの作り方

 Mozilla Thunderbird 用アドオン開発を始めるための開発環境の準備から、公式サイトで配布するために、少なくとも英語で多言語化するまでの手順を解説しています。

  1. Mozilla Thunderbird アドオンの作り方 ~ 開発環境の準備 2014/03/16 今ココ
  2. Mozilla Thunderbird アドオンの作り方 ~ アドオンのひな形 2014/03/21
  3. Mozilla Thunderbird アドオンの作り方 ~ 独自UIの追加 2014/04/05
  4. Mozilla Thunderbird アドオンの作り方 ~ UI動作の追加 2014/04/12
  5. Mozilla Thunderbird アドオンの作り方 ~ 多言語化 2014/04/20

必要な知識

 Mozilla Thunderbird(以下、雷鳥という) アドオンを開発する場合、以下の知識が必要になります。

 雷鳥や Mozilla Firefox のユーザ インタフェース(UI)は XUL (XML User Interface Language) というもので記述されています。まぁ、ぶっちゃけ『HTML の親戚みたいなもの』で、HTML のように UI 要素を記述します。本格的なデザインの UI でも、最初に要素をガシガシっと設置してから後で CSS で微調整する感じのようですし、改めてタグを覚えなくても、困ったらリファレンスを見ながら使えば十分でした。
 また、実際の動作や処理の記述も、凝ったものでなければ JavaScript の DOM 操作だけで良いようです。実際、TagSequenceArranger アドオンでも;

  1. ボタンが押されたら → onclick="function(){...}"
  2. タグ一覧のリストボックスから → var mTagListBox = document.getElementById('tagList')
  3. 選択中のアイテムを取得して → mTagListBox.removeItemAt(index);
  4. 並び替える先と入れ替える → mTagListBox.insertItemAt(...)

 ...という処理を JavaScript で記述しています。メモリやスレッドを使いたい場合には、更に進んで XPCOM という仕組みを使うようですが、ここまで触る必要はありませんでした。

開発環境の構築

 ここで言う"開発環境"とは、開発用の専用アプリケーションのことではなく、"アドオンを開発するために使う雷鳥 profile"のことを指します。ツールとしては、雷鳥本体と使い慣れたテキスト エディタがあれば良いです。普段使っている profile で開発することも不可能ではありませんが、アドオン開発には関係のないアドオンが大量にインストールされていたり、開発中の事故でメールや設定が壊れてしまう可能性があるため、別途、開発用の profile を用意した方がよいでしょう。開発用の profile は、雷鳥の Profile Manager を起動して作成します。

  1. [スタート]メニュー→[ファイル名を指定して実行]
  2. thunderbird -ProfileManager⏎
  3. [新しいプロファイルを作成]→新しいプロファイルの名前
  4. "開発用⏎"

 次に、作成した開発用 profile で雷鳥を起動するためのショートカットを準備します。

  1. 雷鳥の既存のショートカットをコピー&ペースト
  2. 複製したショートカットを右クリック→[プロパティ]
  3. リンク先を編集
    "C:\Program Files (x86)\Mozilla Thunderbird\thunderbird.exe" -no-remote -P 開発用
    

 このショートカットから起動すると、先ほど作成した開発用の profile で真っ新な雷鳥が起動します。アドオン開発に便利なように、幾つか環境設定を変更します

  • nglayout.debug.disable_xul_cache = true ... 通常は XUL をキャッシュして動作するところをキャッシュしないようにします。アドオンを修正した際に、雷鳥を再起動しなくても変更が反映されるようになります。
  • browser.dom.window.dump.enabled = true ... dump() コマンド
  • javascript.options.showInConsole = true ... JavaScript エラーをコンソールに出力します。
  • javascript.options.strict = true ... JavaScript の解釈を厳密にします。

 また、開発を支援するためのアドオンも幾つか導入しておきます。

  • DOM Inspector :: Add-ons for Thunderbird ... ユーザ インタフェース要素のIDなどを調べることができます。多くのケースとして、機能を追加したい場合、UI を追加する先の要素を探せます。
  • InspectorWidget :: Add-ons for Thunderbird ... DOM Inspector だけで XUL オブジェクト ツリーから目的の要素を探し出すのはかなり難しいのですが、このアドオンを利用すれば、目当ての UI 要素をクリックするだけで済みます。
  • Version in Add-on bar :: Add-ons for Firefox … アドオン ツールバーに起動中の Thunderbird のバージョン番号を表示してくれます。動作確認やテストのために、異なるバージョンの Thunderbird を併用している場合の混乱を防げます。

 以上です。次回からアドオン本体の開発に進みます。

このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:Mozilla Thunderbird アドオンの作り方 ~ アドオンのひな形

関連記事/トラックバック

関連記事/トラックバックはまだありません

この記事にトラックバックを送るには?

寄せられたコメント (全 2 件中、最新 5 件まで表示しています)

Posted by
ぴろり ◆OLEEi.VOX.ぴろり ◆OLEEi.VOX.
at
2015/03/05 12:47
ID
lNHaButg
以前にTbと書いていたら金管楽器のトロンボーンと混乱すると言われたことがあるので難しいお願いです。
Posted by
ゆうきゆうき
at
2015/03/05 08:22
ID
V/xFsp3s
雷鳥というとまるでそういうソフトウェアがあるみたいで混乱するのでせめてTbと記載して欲しいです

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。