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

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

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

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

スキンの概要

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

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

注1)
ここでの「テーマ」とは,Firefoxのデザインを変更するための「テーマ」のことを意味します。

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

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

図1 ソースファイルのフォルダ構成(全OS共通スキン)

図1 ソースファイルのフォルダ構成(全OS共通スキン)

表1 新たに作成するソースファイルの概要(全OS共通スキン)

フォルダ/ファイル名概要
skinフォルダ skinパッケージのソースファイルを格納するフォルダ。
classicフォルダ Firefoxデフォルトテーマ用のスキンのソースファイルを格納するフォルダ。
overlay.css overlay.xulから参照されるスタイルシート。
tag-green.png スタイルシートから参照されるアイコン画像。

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

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

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

リスト1 クロムマニフェストへの記述内容(全OS共通スキンの追加)

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)。

注2)
今回は簡便のためskinパッケージのフォルダパスを「skin/classic/」のようにしていますが,一般的にはフォルダパスを「skin/classic/taghelper/」のようにします。

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

注3)
Kempelton icon set by Arvid

著者プロフィール

Gomita

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

URLhttp://www.xuldev.org/

コメント

コメントの記入