セットアップ
最新バージョンの Firefox をダウンロードし、インストールしてください。同様に、DOM Inspector 拡張も必ずインストールしてください。
テーマの抽出
すでに Firefox のためにデザインされたテーマなら、どれからでも始めることができますが、ここでは皆が Winstripe(Firefox の既定のテーマ) を編集しているように話します。このテーマは Firefox をインストールしたディレクトリの <tt>classic.jar</tt> 内にあります。.jar ファイルは名前を変更しただけの zip 形式で圧縮されたファイルです。.jar ファイルをあなたの使用しているアーカイブマネージャで開くと、自動的に zip 形式のファイルとして認識されるはずです。しかしながら、もしあなたのアプリケーションが <tt>classic.jar</tt> を標準の zip 形式のファイルとして認識しない場合は、ファイル名を <tt>classic.zip</tt> に変更してから抽出してください。
Classic.jar のある場所
Linux: /usr/lib/MozillaFirefox/chrome/classic.jar
Windows: \Program Files\Mozilla Firefox\chrome\classic.jar
Mac OS X では:
- アプリケーションフォルダに移動します。
- Control キーを押下しながらアプリケーションアイコン(Firefox アイコン) をクリックし、パッケージの内容を表示 を選択します。
- contents/MacOS/Chrome/classic.jar に移動してください。
<tt>classic.jar</tt> を他の使いやすいフォルダ(<tt>Classic</tt> を推奨) にコピーし、そのフォルダに内容を抽出します。ディレクトリ構造を維持するように気をつけてください。
ディレクトリ構造
<tt>classic.jar</tt> 内には一つのディレクトリ、<tt>skin</tt> 内には <tt>preview.png</tt> と <tt>icon.png</tt> の二つのファイルがあります。
- <tt>skin</tt>
- <tt>skin</tt> は単にもう一つのディレクトリを含み、<tt>classic</tt> にすべての必要な素材を保持しています。
- <tt>classic</tt>
- <tt>classic</tt> は以下のディレクトリを含みます。
- <tt>browser</tt>
- <tt>browser</tt> はすべてのツールバーアイコンと、ブックマークマネージャおよびオプションウィンドウのアイコンを含みます。
- <tt>global</tt>
- <tt>global</tt> はブラウザの外観を定義する重要な、ほぼすべての CSS ファイルを含みます。これはテーマの中で最も重要なディレクトリです。
- <tt>mozapps</tt>
- <tt>mozapps</tt> はブラウザ周辺の、拡張機能マネージャや更新ウィザードなどのすべてのスタイルとアイコンを含みます。
- <tt>help</tt>
- <tt>help</tt> はヘルプダイアログウィンドウのための、すべてのテーマファイルを含みます。
- <tt>communicator</tt>
- 何もしません。このディレクトリのことはすぐに忘れてください。
新しいテーマをインストールする
Firefox のテーマを変更する前に、(そのまま編集するには構成が制限的で難しいため) テーマをインストールできるようにします。まず classic テーマを再梱包する方法を学ばなければなりません。ここではあなたのテーマを "My_Theme" と呼ぶことにします。適当な名前に置き換えても結構です。
必要なファイルをコピーする
まずはじめに、すべてのファイルを正しいディレクトリ構造に移動します。<tt>My_Theme</tt> という名前で新しいディレクトリを作成してください。このディレクトリ上には、<tt>browser</tt> および <tt>global</tt>, <tt>communicator</tt>, <tt>help</tt>, <tt>mozapps</tt> ディレクトリを置き、同様に <tt>icon.png</tt> と <tt>preview.png</tt> も置きます。(ご覧の通り、これはあなたの新しいディレクトリと <tt>classic.jar</tt> の構造がわずかに異なることを意味します。)
インストールファイルを作成する
Contents.rdf
contents.rdf を <tt>\My_Theme</tt> にコピーし、テキストエディタで開いてください。このファイルはテーマの記述に使用される小さな XML データベースです。
ファイル内のコードは "My_Theme" のすべてのインスタンスを検索し、それらをあなたのテーマの名前で置き換えます。
package セクションは、あなたが変更するブラウザのコンポーネント一覧です。もし Chatzilla のテーマも含む場合は、他の行に似た行を追加し、Chatzilla をポイントするように変更する必要があります。この一覧には先に変更したすべてが含まれているので、青い文のみを、前のセクションで使用した名前とバージョンが合うように変更します。
<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/> <RDF:li resource="urn:mozilla:skin:My_Theme:editor"/> <RDF:li resource="urn:mozilla:skin:My_Theme:global"/> <RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/> <RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>
ファイルを保存してテキストエディタを終了してください。【訳注: 日本語を含む場合は UTF-8N で保存します。】
install.rdf
install.rdf を <tt>My_Theme</tt> ディレクトリにコピーし、テキストエディタで開いてください。このファイルはテーマについて書かれた小さな XML データベースです。
<Description about="urn:mozilla:install-manifest">
<em:id>{テーマの UUID}</em:id>
<em:version>テーマのバージョン</em:version>
最初のセクションでは、テーマの UUID とバージョン番号を決定する必要があります。これらを決定したら上記のように必要な情報を挿入し、下にスクロールしてください。
次のセクションでは、ターゲットアプリケーション(Firefox) の、互換性のある最小バージョンおよび最大バージョンを更新します:
<em:targetApplication>
<Description>
<!-- Firefox's UUID -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>Firefox の最小バージョン</em:minVersion>
<em:maxVersion>Firefox の最大バージョン</em:maxVersion>
</Description>
</em:targetApplication>
互換性のある最小バージョンと最大バージョンは、その Firefox 向けにデザインされていないバージョンや、テストしていないバージョンとの衝突を避けてください。
CSS ファイル
これらのディレクトリ内の CSS ファイルは、ボタンやその他のコントロールをどのように表示するか、画像をどこに置くか、またそれらの周りに境界線や余白をどう置くべきかなどをブラウザに教えます。
例として、標準のボタンを変更してみましょう。
全体的なものを含む <tt>global</tt> ディレクトリに移動し、<tt>button.css</tt> を適当なテキストエディタで開いてください。button { のところまで下にスクロールしてください。このセクションでは基本状態(マウスカーソルがボタン上に無く、無効化されておらず、また選択されていない状態) の通常のボタンを定義しています。
background-color: を DarkBlue にし、color: を White に変更して、ファイルを保存してください。
more after I get done with some tests 【訳注: このセクションは未完成です。】
JAR を再梱包する
最後に必要なことは、あなたが zip アーカイブの作成に使用しているアーカイブマネージャで、JAR ファイルを以下のディレクトリ構造で再梱包することです:
/browser/* /communicator/* /global/* /help/* /mozapps/* /contents.rdf /install.rdf /icon.png /preview.png
親ディレクトリの <tt>My_Theme</tt> から圧縮しないように注意してください。次のセクションで、ドラッグアンドドロップによるインストールがエラーメッセージ無しで失敗する原因になります。
Web からのインストールに対応する
テーマの JAR ファイルディレクトリを Web からインストールするには、いくつかの JavaScript を実行する必要があります。
<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, "myskin.jar", "My Skin Theme")'>マイ テーマをインストール</a>
ハードディスク上にある JAR ファイルをインストールしたい場合は、こちらのフォーム を使用(またはダウンロード) してください。
またはテーマウィンドウを開いて、.jar ファイルをそこにドラッグアンドドロップしてインストールすることもできます。
それでは元に戻り、あなたのフォルダを .jar ファイルにしましょう。 簡単ですね! あなたのフォルダを .zip ファイルに圧縮し、.zip から .jar に名前を変更するだけです。