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

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

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

skinパッケージの追加(OS別スキン)

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

リスト4 クロムマニフェストへの記述内容(OS別skinパッケージの追加)

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を参照してください。

スタイルシートの作成

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

リスト5 ⁠overlay.css」への記述内容(Windows XP/2000/NT用)

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

リスト6 ⁠overlay.css」への記述内容(Windows Vista用)

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

リスト7 ⁠overlay.css」への記述内容(Linux用)

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

リスト8 ⁠overlay.css」への記述内容(MacOS X用)

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

動作確認

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

図4 Windows XPでの表示例

図4 Windows XPでの表示例

図5 Windows Vistaでの表示例

図5 Windows Vistaでの表示例

図6 Linux (Ubuntu) での表示例

図6 Linux (Ubuntu) での表示例

まとめと次回の予告

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

著者プロフィール

Gomita

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

URLhttp://www.xuldev.org/

コメント

コメントの記入