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

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

 Mozilla Thunderbird にアドオンから小指が掛かったので、更に作業を進めましょう。とりあえずの方針として、見た目も判りやすいユーザ インタフェースを拡張するアドオンを開発することにして、このエントリでは、Mozilla Thunderbird のウィンドゥにアドオンで独自のユーザ インタフェース要素を追加するところまでを説明します。

この記事を 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

オーバーレイ(overlay)

 既存のユーザ インタフェースなどに被せる(overlay する)カタチで、独自の UI などを追加する仕組みを使います。他に "override" というのがあるんですが、こちらはおそらく全て置き換えてしまう(override する)感じだと思います(使ったことがないので)
 ここでは、「○○を my.xul で overlay しますよ」と宣言するための chrome.manifest と、被せる内容を書いた my.xul の 2 つのファイルを作成します。これらのファイルの配置は次のとおりです。

\{DEV_DIR}
+- index.rdf
+- chrome.manifest
+- \chrome
   +- \content
      +- my.xul
content hoge chrome/content/
overlay chrome://messenger/content/messenger.xul chrome://hoge/content/my.xul
1 行目
 アドオンのリソースの名前空間を宣言しています。hoge の部分が宣言された名前空間で、他のアドオンと被らないようにします。
2 行目
 chrome://messenger/content/messenger.xul は、雷鳥のメイン ウィンドゥの XUL で、それに chrome://hoge/content/my.xul の内容を overlay する、ということ。hoge は 1 行目で宣言したこのアドオンの名前空間で、content にある my.xul という意味。

例1. ステータスバーに追加してみる

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

 DOM Inspector を利用して、雷鳥のメイン ウィンドゥを覗いてみると、ステータスバーの ID が status-bar であることが判ります。そこで、ステータスバーに overlay して、独自のプッシュ ボタンを追加する例です(Fig.1 )。


Fig.1 ステータスバーに追加されたプッシュ ボタン

例2. メニューを追加してみる

<overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <menubar id="mail-menubar">
        <menu label="MyMenu">
            <menupopup id="file-popup2">
                <menuitem label="New"/>
                <menuitem label="Open"/>
                <menuitem label="Save"/>
                <menuseparator/>
                <menuitem label="Exit"/>
            </menupopup>
        </menu>
    </menubar>
</overlay>

 DOM Inspector を利用して、雷鳥のメイン ウィンドゥを覗いてみると、ウィンドゥ メニューの ID が であることが判ります。そこで、既存のウィンドゥ メニューに overlay して、独自のメニュー項目を追加する例です(Fig.2 )。


Fig.2 追加されたメニュー項目

例3. メニューにプッシュボタンを追加してみる

<overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <menubar id="mail-menubar">
        <button label="Press Me" position="3" />
    </menubar>
</overlay>

 例2.と殆ど同じですが、メニュー項目ではなく、ウィンドゥ メニューにプッシュボタンを追加してみます。しかも、position 属性を指定して、変な位置にプッシュボタンが追加されるようになっています(Fig.3 )。


Fig.3 メニューに追加されたプッシュ ボタン

 DOM Inspector を使って任意の要素の ID が判れば、そこを狙って独自要素を追加できるようになりました。しかし、まだ動作に関するコードを書いていないので、クリックしても何も起きません。それでも、ユーザ インタフェース要素を追加するところまでできたので、後は察しのとおり、要素ごとに AddEventListener などでクリックされた際に希望の動作をするようにすれば、ほぼ完成です。ね、簡単でしょう?

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


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

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

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

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

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

コメントを投稿する

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