Firefox 3ではじめる拡張機能開発

第6回 skinパッケージによる装飾

この記事を読むのに必要な時間:およそ 4 分

スタイルシートの作成

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

リスト2 ⁠overlay.xul」への記述内容

<?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」を表示するようにします。

リスト3 ⁠overlay.css」への記述内容(全OS共通スキン)

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

動作確認

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

図2 全OS共通スキンで装飾されたタグヘルパーのメニュー項目

図2 全OS共通スキンで装飾されたタグヘルパーのメニュー項目

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

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

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

図3 ソースファイルのフォルダ構成(OS別スキン)

図3 ソースファイルのフォルダ構成(OS別スキン)

表2 新たに作成するソースファイルの概要(OS別スキン)

フォルダ・ファイル名概要
winxp/ skinパッケージのフォルダ(Windows XP/2000/NT用)
winvista/ skinパッケージのフォルダ(Windows Vista用)
linux/ skinパッケージのフォルダ(Linux用)
mac/ skinパッケージのフォルダ(MacOS X用)
winxp/overlay.css overlay.xulから参照するスタイルシート(Windows XP/2000/NT用)
winvista/overlay.css overlay.xulから参照するスタイルシート(Windows Vista用)
linux/overlay.cssoverlay.xulから参照するスタイルシート(Linux用)
mac/overlay.cssoverlay.xulから参照するスタイルシート(MacOS X用)
winxp/tag-green.pngタグのアイコン画像(Windows XP/2000/NT用)
winvista/tag-blue.pngタグのアイコン画像(Windows Vista用)
linux/tag-orange.pngタグのアイコン画像(Linux用)
mac/tag-gray.pngタグのアイコン画像(MacOS X用)

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

著者プロフィール

Gomita

拡張機能開発者。
現在までにScrapBook,FoxAge2ch,Tab Scope,FireGesturesの4つをリリースしている。

URLhttp://www.xuldev.org/