- 2008-12-31 (水)
- Firefox
Firefox拡張機能（Extention）の簡単な作り方メモではたくさんのブクマありがとうございますっ！
おかげでモチベーションが上がりましたので、この第2弾を書いてみたいと思います。
前回はFirefoxの拡張を作る上でベースとなる部分をご紹介しました。
ステータスバーにラベルを追加して、クリックすると設定画面で選択したラジオボタンの値が表示されるというものでした。
では、今回はと言いますと
- ローカライズ - XULから日本語を排除
- ポップアップウィンドウの表示
- スタイルでデコレーション
- -moz-bindingによるbindingで動的要素を分離
などなどです。
簡単に説明しますと、ローカライズはFirefoxが英語版でインストールされた場合は英語を、日本語版でインストールされた場合は日本語で表示するというものです。
ポップアップウィンドウは、例えば前回作成したステータスバーのラベルをクリックしたらピヨッとポップアップするウィンドウを表示させる感じです。
そのポップアップにスタイルを適用して、大きさや色を指定できたりもします。
最後のBindingは、XULファイルで外側の要素を指定しておきXBL（XMLファイル）のほうでその中身を作り上げるという考え方です。
例えるならカスタムコントールや、IEで古い表現をするならビヘイビアのようなものです。
（ちょっと違うかな･･･ｗ）
例えば
XUL屋さん：
「こうゆう機能がほしいからXBL屋さん作ってちょ」
XBL屋さん：
「もう出来てるよ。hogeってゆうidでbindingしてくれればすぐに使えるよ」
みたいに分担して作成するときにその効力を発揮します。
この辺はちょっと分かりにくいので作りながら一緒に考えて見ましょう！
また前回はソースを提供できなかったのですが、今回からソースを提供していこうと思います。
■ソース一式ダウンロード
Firefox Extention Hello
ローカライズ
まずは前回作成したhello.xulを思い出してください。
ステータスバーに「Hello, Firefox extension!!」という文字を表示するように記述したと思います。
せっかくなので、ここはローカライズして日本語で表示するようにしてみましょう。
またボクの環境で恐縮ですが、
「C:\_\firefox\hello」ディレクトリの直下に「locale」フォルダを作成します。
その中に「ja-JP」フォルダを作成します。これは日本語バージョンという意味ですね。
まぁ今回は英語版はよしとして、とりあえず日本語版だけで進めてみます。
そして「ja-JP」フォルダの中に「hello.dtd」ファイルを作成してください。
dtdと言っているので、いっけんXMLの定義ファイルかと思うのですが、実は中には以下のように
hello.status.iconは「こんにちは」という文字だよというマッピングをしているファイルになります。
とりあえず以下の感じで記述してください。
前にもお話しましたが、日本語を扱う場合は必ずBOMなしのUTF-8（UTF-8N）で保存してくださいね。じゃなと文字化けしちゃいます。
chrome.manifestのローカライズ
前回作成したchrome.manifestファイルにlocaleパッケージを追加します。
content hello content/
locale hello ja-JP locale/ja-JP/
overlay chrome://browser/content/browser.xul chrome://hello/content/hello.xul
これで日本語版のFirefoxではja-JPフォルダの下にあるhello.dtdが読み込まれるようになります。
hello.xulファイルのローカライズ
↑のほうでも載せましたが、
現状はこのようになっていると思います。
これにDOCTYPE宣言を追加して、ステータスバーのlabelの部分を修正していきます。
のようにid="my-panel"のlabelを先ほどhello.dtdに記述したものに置き換えます。
「&」と「;」を忘れるとエラーになってしまうので、気をつけてくださいね。
Firefoxを起動してみる
今回はchrome.manifestファイルを修正しましたので、Firefoxを起動している場合は再起動してから確認してみてください。
どうでしょう？ステータスバーに「こんにちは」が表示されましたか？
この辺までは以外と簡単にいけちゃいますね。
もし他の言語にも対応させたい場合には、「ja-JP」フォルダ以外に各国のフォルダを配置すればOKです。
例えばこんな感じ、
content hello content/
locale hello ca-AD locale/ca-AD/
locale hello cs-CZ locale/cs-CZ/
locale hello de-DE locale/de-DE/
locale hello el-GR locale/el-GR/
locale hello en-US locale/en-US/
locale hello es-CL locale/es-CL/
locale hello es-ES locale/es-ES/
locale hello fa-IR locale/fa-IR/
locale hello fi-FI locale/fi-FI/
locale hello fr-FR locale/fr-FR/
locale hello gl-ES locale/gl-ES/
locale hello it-IT locale/it-IT/
locale hello nb-NO locale/nb-NO/
locale hello nl-NL locale/nl-NL/
locale hello pl-PL locale/pl-PL/
locale hello pt-BR locale/pt-BR/
locale hello ru-RU locale/ru-RU/
locale hello sr-RS locale/sr-RS/
locale hello sr-YU locale/sr-YU/
locale hello tr-TR locale/tr-TR/
locale hello zh-CN locale/zh-CN
locale hello zh-TW locale/zh-TW/
overlay chrome://browser/content/browser.xul chrome://hello/content/hello.xul
う～ん、一ヶ月経っても翻訳が終わらない気がしますねｗ
しかも、もうどこの言葉なのか全然分からないし。
ポップアップウィンドウの表示
ここでは外側のポップアップウィンドウを作成していきます。
ステータスバーの「こんにちは」をクリックしたら高さと幅が100pxのポップアップを表示します。
またもう一度クリックすることで非表示にするように調整してみましょう。
hello.xulの編集
まずはポップアップさせたいPanelの作成からです。
拡張がロードされたタイミングで作るので、以下のようにHelloクラスに関数を追加してください。
内容は、panelタグを作成し、その中にvboxという枠を作成しています。
vbox - MDC
このpanelタグがのちのちポップアップ表示をさせるときに必要になるタグなので、とっても大切です。
panel - MDC
（日本語のドキュメントもっとほしい･･･）
そしてonloadを待つので、以下のコードをjsファイルの一番下とかに記述してください。
ここまで来たら後は簡単です、↑で作ったpanelをポップアップさせればよいのです。
ステータスバーの「こんにちは」をクリックするときの関数に手を加えます。
まずはhello.xulファイルのstatusbarpanelタグのonmousedownイベントにHello.onClickStatusbarIcon();と記述します。
そしてその関数をhello.jsに追加してみましょう。
じゃじゃ～～～ん！
this._panelには先ほど作ったpanelが入っているので、そのpanelが持つopenPopupメソッドやhidePopupメソッドを呼び出しています。
this.isOpenプロパティは開いていれば閉じる、閉じていれば開くという排他の状態を提供しています。
openPopup - MDC
ではCtrl + Nで新しいウィンドウを開いて、「こんにちは」をクリック！
・・・
ん？何も表示されませんか？ｗ
いや、右下のほうに超小さいポップアップウィンドウがありませんか？
そうです。これがポップアップウィンドウなのです！！！！
小さいのには理由がありまして、単にスタイルが何も掛かっていないのでその大きさなのです。
では次に高さと幅を100pxのスタイルを適用してみましょう。
hello.cssの作成
contentディレクトリの直下に「hello.css」を作成してください。
中には
-moz-border-radiusという見慣れないプロパティがありますが、これは角丸を演出してくれるプロパティです。
100pxのブロックだとあんまり分からないかもしれないので、300pxとか大きい数値にしてみると面白いかもしれません。
ここで指定したhello-popupセレクタのとおり、実際にはvboxにスタイルを指定しています。
なので、panel自体はその中に包括している要素によって大きくなったり小さくなったりしているということですね。
ではまた「こんにちは」をクリックしてください！
今度はOKでしょうか？
なんかこれだけでもすごい達成感がありますね。
Bindingを使ってPanelの中に何か表示させてみる
ではまずbindings.xmlを作成していきます。
これも今までと同様にcontentディレクトリの直下に配置してください。
このファイルはのちのpanelの中身に表示する要素を持っているファイルになります。
本来でしたらxulファイルのほうに記述しとけばよさそうなのですが、panel要素やその中に表示しているvbox要素はJavaScript側でappendしています。
こうゆうときにvbox要素の中に表示したい内容を事前に用意（カスタムコントロール）しておいて、パチッとはめ込めるようにしておくと簡単じゃないでしょうか。
bindings.xmlの内容は以下のとおり。
bindingタグ→contentタグの中にはhboxがあり、その中にdescriptionタグを用意しています。
bindingタグはバインドしたい単位で用意することが可能で、その中のcontentタグは実際にバインドするときの内容になります。
こちらもdescriptionタグのvalue属性の値をローカライズしています。
ではJavaScriptで追加したポップアップ（vbox）にこのbindings.xmlで定義した内容をどうやってbindするかという部分ですが、JavaScriptとCSSで実装します。
まずはJavaScript側。
ステータスバーの「こんにちは」をクリックしたときの処理に少し手を加えます。
表示するときに呼ばれるcreateHelloLabelメソッドでは、まずvboxを作成しなぜかclassNameを指定しています。
このclassName指定がbindingを扱う場合の鍵となります。
removeElementsメソッドでは、ポップアップを消したときに一緒にポップアップの中身を消しています。
これをしないと毎回ポップアップするたびに「こんにちは」がappendされてしまうので、何個も連なってしまってちょっとかっこ悪いですもんね。
では次にhello.cssファイルを修正していきます。
この内容を追加してください。
hello-popup-labelセレクタはどこかで見たことがありますね。そうです、↑のJavaScript部分で指定したclassNameと一致しています。
つまりbindingのメカニズムは
JavaScriptから要素をappend
↓
classNameを指定
↓
CSSファイルのセレクタに該当する-moz-bindingが呼び出される
↓
bindings.xmlのbinding要素が紐付けられる
という仕組みになっているのです！
う～ん、ちょいややこしいですねｗ
「ただ1回覚えてしまえばどおってことはないので、みなさんbindingを使って要素を追加してみましょう！」
では最後にCtrl + Nで新規ウィンドウを表示。
こんな風なポップアップが表示されれば完成です。
■ソース一式ダウンロード
Firefox Extention Hello
まとめ
ほんのちょびっと機能を実装したいだけなのに、以外と面倒なことを覚えないといけないのが大変ですが、
これもオリジナルな拡張を作るための階段だと思えば楽なもんですっ！
また最後のbindingはちょいややこしいところはありましたが、使っていくと便利なので覚えておいて損はないと思います。
ただ、今回紹介した内容だといまいちその便利さが伝わらないと思いますので、次回Part3でもう少し掘り下げて説明してみたいとおもいます。
（説明できるか分かりませんが…ｗ）
次回：bindings.xmlの中の要素にJavaScriptからアクセスする方法などなど…
来年こそはJavaScriptまわりの記事をどんどん書いていこうと思いますので、是非よろしくお願いします。
それでは良いお年を〜！
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1145
- Listed below are links to weblogs that reference
- Firefox拡張機能（Extention）の簡単な作り方メモ Part2 from HouseTect, JavaScript Blog
