前回まで、タグヘルパー拡張機能の実装とUIのローカライズを行いました。今回はskinパッケージを追加し、メニュー項目へアイコンを追加する装飾を行います。さらに、Firefox 3の新機能を使ってOS別に異なるアイコンを追加する装飾を行います。なお、第6回完成時点でのソースファイルは、下記URLから入手可能です。

• http://www.xuldev.org/misc/sd.php

スキンの概要

XULで作成した拡張機能のUIを装飾するには、スタイルシートを使います。ちょうど、WebページのHTMLをスタイルシートで装飾するのと同じイメージです。スタイルシートおよびスタイルシートから読み込む画像ファイルなどは、XULやJavaScriptのソースファイルと同じくcontentパッケージ内に格納しても問題ありません。しかし、一般的にはこれらのソースファイルをskinパッケージ内に格納します。装飾に関するソースファイルをskinパッケージとして切り離すことで、Firefoxのテーマ別にスキンを作成したり、逆にテーマ側が拡張機能専用のスキンを作成したりすることが可能になります。なお、skinパッケージで提供されるUIの装飾を「スキン」と呼びます。

skinパッケージのソースファイルは、「⁠skin」フォルダ内に作成したFirefoxテーマ別のサブフォルダ内に格納します[1]⁠。通常はFirefoxのデフォルトテーマ用スキンのみ作成し、そのソースファイルを「classic」サブフォルダ内に格納します。デフォルトテーマ以外のテーマ用のスキンも作成する場合、別のサブフォルダを作成してソースファイルを格納し、後述するクロムマニフェストにて別のskinパッケージを追加します。なお、デフォルトテーマ用のスキンのみ作成した場合、どんなテーマを使用しているかによらず、デフォルトテーマ用のスキンが適用されます。

全OS共通スキンを作成する

第6回の前半では、一般的な拡張機能開発のマナーにしたがって、全OS共通のスキンを作成する手順を解説します。まず、第6回（前半）完成時点での各種ソースファイルのフォルダ構成を図1に示します。また、第6回（前半）で新たに作成するフォルダやファイルの概要を表1に示します。

なお、アイコン画像は下記URLからダウンロードして使用してください。

• http://www.xuldev.org/misc/sd.php

skinパッケージの追加（全OS共通スキン）

skinパッケージを追加するために、クロムマニフェストへリスト1の内容を追加してください。

content  taghelper  content/
locale  taghelper  en-US  locale/en-US/
locale  taghelper  ja-JP  locale/ja-JP/
skin  taghelper  classic/1.0  skin/classic/
overlay  chrome://browser/content/browser.xul  chrome://taghelper/content/overlay.xul 

リスト1の4行目がskinパッケージを登録するための宣言です。パッケージ名が「taghelper⁠」⁠、このskinパッケージを適用するテーマ識別子が「classic/1.0⁠」⁠、ソースファイルを格納したフォルダへの相対パスが「skin/classic/」となります[2]⁠。

今回は前述の通りデフォルトテーマ用のスキンしか作成しませんが、例えばもし「Kempelton」テーマ[3]用のスキンを作成する場合、「⁠skin taghelper kempelton skin/kempelton/」のような宣言を追加します。なお、現在使用しているテーマのテーマ識別子を知るには、「⁠about:config」から設定値「general.skins.selectedSkin」の値を調べてください。

スタイルシートの作成

リスト2のように「overlay.xul」へ「xml-stylesheet」処理命令を追加し、スタイルシート「overlay.css」を読み込むようにします。また、タグヘルパーのメニュー項目であるmenuitem要素へ、「⁠menuitem-iconic」クラスを追加します。このクラスはFirefox本体側で定義された特殊なクラスで、これを追加することでメニュー項目の左側にアイコン画像を表示させることが可能になります。

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://taghelper/skin/overlay.css" type="text/css"?>

<!DOCTYPE overlay SYSTEM "chrome://taghelper/locale/overlay.dtd">

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="chrome://taghelper/content/overlay.js" />
  <stringbundleset id="stringbundleset">
    <stringbundle id="taghelper-bundle" src="chrome://taghelper/locale/overlay.properties" />
  </stringbundleset>
  <popup id="contentAreaContextMenu">
    <menuitem id="taghelper-menu"
              class="menuitem-iconic"
              label="&taghelperMenu.label;"
              oncommand="TagHelper.generateTags();" />
  </popup>
</overlay>

続いて、スタイルシート「overlay.css」を作成します。リスト3のように、idが「taghelper-menu」のmenuitem要素へ、リスト項目のマーカー画像として「tag-green.png」を表示するようにします。

menuitem#taghelper-menu {
  list-style-image: url('chrome://taghelper/skin/tag-green.png'); 
}

動作確認

前半についての動作確認を行います。今回は新たにskinパッケージを追加したので、一度Firefoxを再起動します。Firefox再起動後、適当なWebページ上で範囲を選択し、右クリックメニューを表示すると、図2のようにタグヘルパーのメニュー項目にアイコン画像が表示されることを確認してください。

OS別に異なるスキンを作成する

前半で作成したスキンは、OS（Windows、Linux、MacOS X）の違いによらず同一の見た目となります。後半では、Firefox 3で追加された新しいマニフェストフラグを使って、OS別に異なるスキンを作成する手順を解説します。あまり一般的ではないですが、拡張機能の見た目を各OSのルック＆フィールにマッチさせたい場合には、このような方式を使うと良いでしょう。

第6回（後半）完成時点での各種ソースファイルのフォルダ構成は図3のようになります。また、第6回（後半）で新たに作成するフォルダやファイルの概要を表2に示します。

なお、アイコン画像は下記URLからダウンロードして使用してください。

• http://www.xuldev.org/misc/sd.php

skinパッケージの追加（OS別スキン）

OS別のskinパッケージを追加するために、クロムマニフェストへリスト4の内容を追加してください。また、リスト1で追加した行は、先頭に「#」を付けてコメントアウトするか、削除してください。

content  taghelper  content/
locale  taghelper  en-US  locale/en-US/
locale  taghelper  ja-JP  locale/ja-JP/
skin  taghelper  classic/1.0  skin/classic/winxp/  os=WINNT  osversion<6
skin  taghelper  classic/1.0  skin/classic/winvista/  os=WINNT  osversion>=6
skin  taghelper  classic/1.0  skin/classic/linux/  os=Linux
skin  taghelper  classic/1.0  skin/classic/mac/  os=Darwin
overlay  chrome://browser/content/browser.xul  chrome://taghelper/content/overlay.xul 

リスト4で追加したskinパッケージの宣言では、Firefox 3で新しく追加された「os」と「osversion」の2つのマニフェストフラグを使用しています。例えば、リスト4の4行目は、相対パス「skin/classic/winxp/」のskinパッケージを、OS識別子が「WINNT」でなおかつOSバージョンが6以下、つまりWindows XPやWindows 2000などの場合のみ登録するという宣言になります。同様に、リスト4の5行目はWindows Vista、6行目はLinux、7行目はMacOS Xである場合のみ登録されるskinパッケージの宣言になります。

マニフェストフラグについての詳細は、下記URLを参照してください。

• Chrome Registration - Mozilla Developer Center

スタイルシートの作成

「overlay.xul」への追加内容はリスト2のままで構いませんが、各OS用のスタイルシート「overlay.css」は、リスト5、リスト6、リスト7、リスト8のように異なる内容で作成します。

menuitem#taghelper-menu {
  list-style-image: url('chrome://taghelper/skin/tag-green.png'); 
}

menuitem#taghelper-menu {
  list-style-image: url('chrome://taghelper/skin/tag-blue.png'); 
}

menuitem#taghelper-menu {
  list-style-image: url('chrome://taghelper/skin/tag-orange.png'); 
}

menuitem#taghelper-menu {
  list-style-image: url('chrome://taghelper/skin/tag-gray.png'); 
}

動作確認

ここまでできたら、色々なOSのFirefoxへタグヘルパー拡張機能をテストインストールし、図4、図5、図6のように、タグヘルパー拡張機能のメニュー項目に異なるアイコン画像が表示されることを確認してください。なお、ポインタファイルを使用したテストインストールのやり方を忘れてしまった場合は、第1回を参照してください。テストインストールが面倒であれば、次回解説予定のXPIインストーラの作成を済ませてから動作確認しても構いません。

まとめと次回の予告

今回はskinパッケージを追加し、前半では全OS共通のスキンを作成する手順を、後半ではOS別に異なるスキンを作成する手順を解説しました。今回でタグヘルパー拡張機能の実質的な作成は終了となります。次回は、拡張機能を配布するためのインストーラを作成する手順を解説します。