- 2008-11-17 (月) 21:56
- ツールバー
今回は見た目を指定する方法について．XULというXML系の言語がでてきます．あまり身構えずに読むとすんなり読めるはずです．今回は24*24のロゴをクリックするとHello world!をアラートで表示するというのを目標にします．
オーバーレイを作成する
今回は一気に5つほどファイルを増やします．全て表示に必要な物たちです．
+- install.rdf
+- chrome.manifest
+- chrome/
+- content/
+- overlay.xul
+- overlay.js
+- locale/
+- ja-JP/
+- locale.dtd
+- skin/
+- main.css
+- logo16.png — 16*16のロゴファイルを作成してください
+- logo24.png — 24*24のロゴファイルを作成してください
overlay.xulの設定
まずはoverlay.xulを作りましょう．ボタンは一つですので，以下のようなXULファイルとなります．
<?xml-stylesheet href="chrome://attoolbar/skin/main.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://attoolbar/locale/locale.dtd">
<overlay id="attoolbar-overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://attoolbar/content/overlay.js" />
<toolbox id="navigator-toolbox">
<toolbarpalette id="BrowserToolbarPalette">
<toolbaritem id="attoolbar"
tooltiptext="&attoolbar_tooltip;" title="&attoolbar_title;">
<toolbarbutton id="attoolbar-menu" type="button" tooltiptext="&attoolbar_menu;"
oncommand="attoolbar.onClick(); event.preventBubble();" />
</toolbaritem>
</toolbarpalette>
</toolbox>
</overlay>
どこにボタンを出せと書いているのかわからないかもしれませんが，toolbarbuttonで定義しています．利用が可能なコントロールについてはXUL controls - MDCを参照してください．ちなみにtoolbarpaletteが戻るや更新と同じ位置のボタンであることを指定しており，対して独立したツールバーにする場合はここをtoolbarにします．今回は場所を取る気はないのでtoolbarpaletteを採用します．idには基本的にコード名を頭につけるのがマナー(他のアドオンと衝突すると良くない)のようですので面倒でもつけましょう．
locale.dtdの設定
次はlocale.dtdを作ります．このファイルは言語の差異を埋めるためのもので，もちろんのことながら言語毎に作る必要があります．とは言え全世界の人に使ってもらう予定がなければ日本語だけで良いかもしれません．実はこれは前のoverlay.xulの中にあった謎のアンパサンドで始まる部分の実体です．
という形式で書きます．これでidにbodyという内容を関連づけることができ，DOCTYPEで読み込みさえすればその内容を&id;の代わりに表示することができます．実はoverlayに直接書くこともできたのですが，他言語化するときに言語毎にXULファイルを作り変える手間を省くため分割しているのです．ここでoverlay.xulで不足していた部分を補いましょう．
<!ENTITY attoolbar_tooltip "@toolbar">
<!ENTITY attoolbar_menu "@toolbarメニュー">
main.css
次はmain.cssを作ります．このファイルは画像の配置やその他諸々の見た目を指定します．
-moz-box-align: center;
list-style-image:
url("chrome://attoolbar/skin/logo24.png");
}
toolbar[iconsize="small"] #attoolbar-menu {
-moz-box-align: center;
list-style-image:
url("chrome://attoolbar/skin/logo16.png");
}
toolbar[iconsize="small"]の設定はブックマークツールバーなど細いツールバーの時に適用されます．
overlay.js
最後にoverlay.jsを作ります．overlay.xulのボタンはクリックした時にoncommandというイベントが発生します．この時にalertを出すことが目標なのでこの中身について完成させましょう．（もちろんのことながらoncommand内にalertを書いても良いのですが，今後のことを考えて外部ファイルに書きます．）
onClick: function() {
alert("Hello world!");
}
};
仕上げ
ここまで来て目標のものはできました．しかしどのように実行すれば良いの？ときっと思うでしょう．では今からその方法についてお教えします．まずzip圧縮ソフトウェアを用意しcontentとlocaleとskinを圧縮し，その圧縮ファイルの名前をコード名.jarというファイル名に変えてchromeの下に置いてください．次にchromeとchrome.manifestとinstall.rdfを圧縮しコード名.xpiというファイル名に変えてください．そうすれば出来上がりです．あとはそのxpiファイルをFirefoxに投げインストールしてみてください．（もし見つからなければメニューの表示＞ツールバー＞カスタマイズから見つけることができます．）
今回の時点でできあがってるものは以下から手に入れられます．内容を見る場合はxpiの拡張子をzipに変えて解凍してください．
toolbar02
今回で見えるものができました．次回はツールバーからブラウザの操作をします．
- Newer: TopCoder SRM 427
- Older: ツールバー作成奮闘記 第一話
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://imoz.jp/2008/11/toolbar02/trackback/
- Listed below are links to weblogs that reference
- ツールバー作成奮闘記 第二話 from 超現実いもす(imos)の日記