Creating a Skin for Firefox:Getting Started

テーマの抽出

すでに Firefox のためにデザインされたテーマなら、どれからでも始めることができますが、ここでは皆が Winstripe(Firefox の既定のテーマ) を編集しているように話します。このテーマは Firefox をインストールしたディレクトリの classic.jar 内にあります。.jar ファイルは名前を変更しただけの zip 形式で圧縮されたファイルです。.jar ファイルをあなたの使用しているアーカイブマネージャで開くと、自動的に zip 形式のファイルとして認識されるはずです。しかしながら、もしあなたのアプリケーションが classic.jar を標準の zip 形式のファイルとして認識しない場合は、ファイル名を classic.zip に変更してから抽出してください。

ディレクトリ構造

classic.jar 内には一つのディレクトリ、skin 内には preview.png と icon.png の二つのファイルがあります。

skin

skin は単にもう一つのディレクトリを含み、classic にすべての必要な素材を保持しています。

classic

classic は以下のディレクトリを含みます。

browser

browser はすべてのツールバーアイコンと、ブックマークマネージャおよびオプションウィンドウのアイコンを含みます。

global

global はブラウザの外観を定義する重要な、ほぼすべての CSS ファイルを含みます。これはテーマの中で最も重要なディレクトリです。

mozapps

mozapps はブラウザ周辺の、拡張機能マネージャや更新ウィザードなどのすべてのスタイルとアイコンを含みます。

help

help はヘルプダイアログウィンドウのための、すべてのテーマファイルを含みます。

communicator

何もしません。このディレクトリのことはすぐに忘れてください。

新しいテーマをインストールする

Firefox のテーマを変更する前に、(そのまま編集するには構成が制限的で難しいため) テーマをインストールできるようにします。まず classic テーマを再梱包する方法を学ばなければなりません。ここではあなたのテーマを "My_Theme" と呼ぶことにします。適当な名前に置き換えても結構です。

<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"/>

  <Description about="urn:mozilla:install-manifest">
  <em:id>{テーマの UUID}</em:id>
  <em:version>テーマのバージョン</em:version>

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

CSS ファイル

これらのディレクトリ内の CSS ファイルは、ボタンやその他のコントロールをどのように表示するか、画像をどこに置くか、またそれらの周りに境界線や余白をどう置くべきかなどをブラウザに教えます。

例として、標準のボタンを変更してみましょう。

全体的なものを含む global ディレクトリに移動し、button.css を適当なテキストエディタで開いてください。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
  

親ディレクトリの My_Theme から圧縮しないように注意してください。次のセクションで、ドラッグアンドドロップによるインストールがエラーメッセージ無しで失敗する原因になります。

Web からのインストールに対応する

テーマの JAR ファイルディレクトリを Web からインストールするには、いくつかの JavaScript を実行する必要があります。

<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN, 
 "myskin.jar", "My Skin Theme")'>マイ テーマをインストール</a>

ハードディスク上にある JAR ファイルをインストールしたい場合は、こちらのフォーム を使用(またはダウンロード) してください。

またはテーマウィンドウを開いて、.jar ファイルをそこにドラッグアンドドロップしてインストールすることもできます。

それでは元に戻り、あなたのフォルダを .jar ファイルにしましょう。 簡単ですね! あなたのフォルダを .zip ファイルに圧縮し、.zip から .jar に名前を変更するだけです。