Home > ツールバー > ツールバー作成奮闘記 第一話

ツールバー作成奮闘記 第一話 このエントリーを含むはてなブックマーク

ツールバー作成奮闘記第一話です.今回はディレクトリの作成,アドオンとして必要な宣言をするファイルの作成です.作りながら書いているので何が起こるかわかりませんがそこは楽観的に.とはいえさすがに何も資料がない訳ではなくBorn Geek::Firefox Toolbar Tutorialを参考に書かせて頂いています.

必要な物

まず必要な物はXML, JavaScript, CSSの基本的な理解,とzipの圧縮ソフト.これだけ揃えば次はワークスペースの作成です.ここで作るのは@toolbarという名称のソフトウェアでコード名はattoolbarとします.(ただし,コード名は必ず英数字小文字のみにしてください.)そうするとワークスペースの階層構造は以下のような感じになります.

+- attoolbar/
  +- chrome/
    +- content/
    +- skin/
    +- locale/

インストーラマニフェスト

構造を作れば次はインストーラマニフェスト(直訳するとインストールの宣言書)の作成です.作成位置はrootディレクトリでファイル名はinstall.rdf.このファイルはFirefoxにインストールする時に作成者の明記やバージョンアップの確認,署名等の役割をしたりするようです.

+- attoolbar/
  +- install.rdf
  +- chrome/
    +- content/
    +- skin/
    +- locale/

install.rdfの中身の設定

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

    <Description about="urn:mozilla:install-manifest">

        <!-- Required Items -->
        <em:id>ツールバーのコード@Webサイトのドメイン</em:id>
        <em:name>ツールバーの名称</em:name>
        <em:version>バージョン</em:version>

        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>3.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>

        <!-- Optional Items -->
        <em:creator>製作者の名前</em:creator>
        <em:description>ツールバーの名前</em:description>
        <em:homepageURL>WebサイトのURL</em:homepageURL>

    </Description>
</RDF>

これらの中身を入力します.em:idには本来GUIDという物を入れるようですが,わざわざ作るのも大変ですし上記のような形式でも問題がないのでそれを採用します.ここではtoolbar@imoz.jpとします.em:nameはツールバーの名称です.表示される方の名前ですので@toolbarとします.em:versionはその名の通りバージョン番号です.ここは形式はx.x.xかx.xを使うのが一般的です.ここではまだ開発中ですので,0.1.0とでもしておきましょう.

次はtargetApplicationの中身に関して.em:idに入っている得体の知れないコード{ec8030f7-c20a-464f-9b0e-13a3a9e97384}はFirefoxのGUIDです.このプログラムがFirefoxに向けて作られているということを主張しています.em:minVersionとem:maxVersionはFirefoxのバージョンのどの範囲に対応しているかを示します.下限はツールバーに対応し始めた1.5,上限は2008年11月16日現在,Firefoxのstableなバージョンは3.0.4(3.1も出始めてはいるけど動作確認する予定は今のところないので)ですので3.0.*としてします.

その次はOptional Itemsに関して.Optionalではありますが最低限あって欲しいのはem:creator,em:description,em:homepageURLです.これ以外にもem:updateURL,em:iconURL等がありますが,それらに関してはリファレンスを参照してください.ここではそれぞれimos,Toolbar for @freaks family,http://imoz.jp/とでもしておきます.日本語が使えるかは定かではない(というよりか日本語に対応していないPCで使う可能性を考えると良くない)のでできる限り避けましょう.

以上を設定し終わればinstall.rdfとして保存しましょう.例では以下のようになりました.

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

    <Description about="urn:mozilla:install-manifest">

        <!-- Required Items -->
        <em:id>attoolbar@imoz.jp</em:id>
        <em:name>@toolbar</em:name>
        <em:version>0.1.0</em:version>

        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>3.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>

        <!-- Optional Items -->
        <em:creator>imos</em:creator>
        <em:description>Toolbar for @freaks family</em:description>
        <em:homepageURL>http://imoz.jp/</em:homepageURL>

    </Description>
</RDF>

クロームマニフェスト

次もまた宣言です.こちらはすごくシンプルです.パッケージやオーバーレイをどこで提供しているのかをFirefoxに伝える役割をします.作成位置はルートディレクトリでファイル名はchrome.manifestです.

+- attoolbar/
  +- install.rdf
  +- chrome.manifest
  +- chrome/
    +- content/
    +- skin/
    +- locale/

chrome.manifestの中身の設定

overlay chrome://browser/content/browser.xul chrome://コード名/content/overlay.xul
content コード名 jar:chrome/コード名.jar!/content/

locale コード名 ja-JP jar:chrome/コード名.jar!/locale/ja-JP/

skin コード名 classic/1.0 jar:chrome/コード名.jar!/skin/
style chrome://global/content/customizeToolbar.xul chrome://コード名/skin/main.css

overlayはFirefoxのメインウィンドウにどのようなUIで表示するかを示します.ここで指定されたXULによってどのような表示になるかが決まります.ここでもコード名のみを編集します.(overlay.xulというファイル名は変更しても特に問題はありませんが,特に編集する理由もないので編集しません.)

contentはコンテンツのパッケージの位置を示すため,localeは言語の切り替えを円滑にする言語ファイルを置くため,skinはスタイルシートを置くため,styleは基本となるデザインの設定を示すために存在します.それぞれコード名のみを編集します.

以上を設定し終わればchrome.manifestとして保存しましょう.例では以下のようになりました.

overlay chrome://browser/content/browser.xul chrome://attoolbar/content/overlay.xul
content attoolbar jar:chrome/attoolbar.jar!/content/

locale attoolbar ja-JP jar:chrome/attoolbar.jar!/locale/ja-JP/

skin attoolbar classic/1.0 jar:chrome/attoolbar.jar!/skin/
style chrome://global/content/customizeToolbar.xul chrome://attoolbar/skin/main.css

今回はここまでです.次回はツールバーのUIの設定です.

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://imoz.jp/2008/11/toolbar01/trackback/
Listed below are links to weblogs that reference
ツールバー作成奮闘記 第一話 from 超現実いもす(imos)の日記

Home > ツールバー > ツールバー作成奮闘記 第一話

Search
Feeds
Meta

Return to page top