Mozilla Thunderbird アドオンの作り方 ~ UI動作の追加

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

 Mozilla Thunderbird にアドオンからユーザ インターフェース要素を追加できたので、次はこの要素が押されたり選択されたときに、何等かのアクションをするようにします。この部分は JavaScript で書けば良く、実質はダイナミック HTML のようなものなので、それほど難しいものではありません。ひとまずこの段階まで来れば、雷鳥に何等かの動作を追加するアドオンを一通り作成できるようになります。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

スクラップ帳 » 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

動作の追加

 前回作成したステータスバーにボタンを追加する my.xulをベースに、ボタンが押されると、ボタンのラベルが変化するようにしてみます。

<overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <statusbar id="status-bar">
        <button label="Press Me" oncommand="MyCommand(this)"/>
    </statusbar>

    <script type="application/x-javascript"><![CDATA[
function MyCommand( me ) {
    me.label = 'Hello, Thunderbird addon.';
}
    ]]></script>
</overlay>
4 行目
 button 要素に oncommand プロパティを指定して、選択されたときの動作を追加します。
7~11 行目
 XUL ファイルの中に JavaScript を記述しています。
9 行目
 オブジェクトの label プロパティを書き換えています。利用可能なメソッドやプロパティは XUL Reference で調べられます。

JavaScript を別ファイルにする

 ここでは、JavaScript コードをオーバーレイする同じ XUL ファイル内に書きましたが、別ファイルとして管理した方が何かと便利です*1。この場合、script 要素の src プロパティでファイル名を指定するだけです。

\{DEV_DIR}
+- index.rdf
+- chrome.manifest
+- \chrome
   +- \content
      +- my.xul
      +- my.js
<overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <statusbar id="status-bar">
        <button label="Press Me" oncommand="MyCommand(this)"/>
    </statusbar>

    <script type="application/x-javascript" src="my.js" />
</overlay>
function MyCommand( me ) {
    me.label = 'Hello, Thunderbird addon.';
}

デバッグ メッセージの出力

 XUL や JavaScript の構文エラーなどは起動時にエラーコンソールに表示されます。また、JavaScript の動的エラーについては、その動作時にエラーコンソールに表示されます。また、デバッグ用に任意のタイミングでメッセージを表示するには幾つか方法があります。

エラーコンソールの"エラー"タブに出力する

function MyCommand( me ) {
    Components.utils.reportError( 'Some messages' );
}

エラーコンソールの"メッセージ"タブに出力する

function MyCommand( me ) {
    var consoleService = Components.
            classes["@mozilla.org/consoleservice;1"].
            getService( Components.interfaces.nsIConsoleService );
    consoleService.logStringMessage( 'Some messages' );
}

コンソールに出力する(Windows 環境のみ)

 最初に開発環境を準備する際に、browser.dom.window.dump.enabled 環境変数を設定しましたが、JavaScript 内で dump() してみても、何か出力されている気配もありません。
 dump() メソッドによる出力を確認するには、雷鳥の起動オプションに -console パラメータを付けて起動し、コンソール ウィンドゥを表示する必要があります。dump() メソッドによる出力は、エラーコンソールではなく、こちらのコンソール ウィンドゥに出力されるので注意が必要です。

function MyCommand( me ) {
    // 明示的に改行する必要があります
    dump( "Some messages\n" );
    // タブ文字も使えます
    window.dump( "\tSome messages" );
}

デバッグに便利な起動オプション

 コンソール ウィンドゥの表示方法を調べている際に、開発用雷鳥の起動ショートカットに指定しておくと便利と思われる起動オプションを幾つか見つけました。

  • -console ... 起動と同時にコンソール ウィンドゥを開きます。雷鳥を再起動する時は、コンソール ウィンドゥを閉じれば、エラー コンソールや DOM Inspector なども一括で閉じるので便利です*2
  • -jsconsole ... 起動と同時にエラー コンソールを開きます。
  • -inspector ... DOM Inspector アドオンがインストールされている場合、起動と同時に DOM Inspector を開きます。
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

  1. *1 XML と JavaScript を分離できるので、エディタの構文ハイライトを活用できるなど
  2. *2 通常は、エラー コンソール、DOM Inspector を開いていた場合、メインウィンドゥとは別にそれぞれのウィンドゥを別途閉じる必要がある

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

カバー画像:Mozilla Thunderbird アドオンの作り方 ~ 独自UIの追加

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

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

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

コメントを投稿する

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