２章：拡張機能開発で使う技術

株式会社クリアコード／下田 洋志 SHIMODA Hiroshi
http://www.clear-code.com/

本格的な解説に入る前に，Firefoxの拡張機能を開発するのに利用する技術について概説します．また，開発を行う上で，最低限必要な知識についても紹介します．

拡張機能開発に利用する技術

Firefoxや拡張機能は，Web上で広く利用されている技術に基づいて開発されています．その構造はDynamic HTMLで構築されたWebページや，WindowsのHTML Applicationsなどによく似ていると言えます．Dynamic HTMLを用いた開発などを行った経験がある人なら，Firefoxの拡張機能の開発に必要な知識を比較的容易に習得することができるでしょう．

それぞれの技術の役割

Firefoxでは主に，XUL，CSS，JavaScript，XPCOMの4つの技術を使って作られています．拡張機能もこの4つの技術を使って開発します．図1は，それぞれの技術がFirefox および拡張機能のどの部分を構成するものかを簡単に表したものです．

図１：各技術の役割

拡張機能の開発ではこれらの技術に加えて，自分で作成したコードにセキュリティの制限を解除するための特権を与える方法や，FirefoxのUIに自作のコードを組み込むための方法なども学ぶ必要があります．詳細は，集5章で解説します．

最低限必要な知識

本稿では誌面の都合上，一般的に知られている技術についての説明は省略し，Firefoxの開発において新たに必要になる知識を中心に紹介していきたいと思います．具体的には，Dynamic HTMLを使った開発に携わった経験のある人を想定して，次の知識についてはすでに習得済みという前提で解説を行っています．これらの技術の詳細は，別途書籍などを参考にしてください．

• XMLの記法
• CSSの記法
• JavaScriptの基本的な構文
• オブジェクト指向プログラミングの概念

XML：テキストベースの構造化言語

XML（Extensible Markup Language）は様々なデータを表現するためのメタ言語で，Web関連技術の標準化団体であるW3Cによって1998年に仕様化されました（▽注1）．汎用性・拡張性が高 く，妥当性の確認が容易である，などの特徴があります．

XMLに基づいたマークアップ言語としては，HTMLをXMLベースで再定義したXHTML，ベクトル画像を表現するSVG，数式を表現するMathMLなどがあります．Firefoxで使われているXULもXMLに基づいて作られています．

XMLでは図2のように，開始タグ，終了タグ，内容の3つをまとめたものを「要素」と呼び（▽注2），要素の内容として他の要素（▽注3）やテキストを置いて，すべての情報をツリー構造で表します．また，開始タグには属性を指定して追加の情報を示すこともできます．

図２：XMLの要素

XMLではさらに，「Extensible」の名のとおり，XHTMLやSVGといった各言語の要素を混在させて拡張することもできます．すべての要素名は各言語に固有の「名前空間URI」という識別子に結び付けられており，例えXHTMLとSVGでそれぞれ同じ名前の要素があったとしても，それぞれを区別することができます．例えば，XHTMLの名前空間URIは「http://www.w3.org/1999/xhtml/」，SVGは「http://www.w3.org/2000/svg」となっています．

CSS：XML文書の表示を変えるスタイル言語

CSS（Cascading Style Sheets）は，XMLと同じくW3Cによって標準化されている技術仕様の1つ（▽注4）で，主にHTMLやXMLなどで記述されたデータの表示形式を定義するスタイル記述言語です．リスト1の例のように，非常にシンプルな記法が特徴です．データの構造をXMLやHTMLで表現し，表示スタイルに関する指定はCSSに分離することで，HTMLの中にデータ構造とスタイル指定の両方を埋め込むようなやり方に比べて，データの再利用性を高めることができます．

CSSには機能によってLevel 1からLevel 3までの仕様が存在し，GeckoエンジンはCSS Level 2のほとんどの仕様と，CSSLevel 3の一部を実装しています．

body {
    color: black;
    background-color: white;
}

p {
    margin-bottom: 1em;
    text-indent: 1em;
}

JavaScript：史上最も誤解されてきた言語

JavaScriptは1990年代に開発されたスクリプト言語で，Webページに動的な機能を加えるための技術として誕生しました．ポップアップウィンドウを開くためや，ステータスバーに表示する文字列を変えるためなど，ユーザにとってのWebページの利便性を低下させるような使い方が蔓延したことから，実用性が低く低機能な言語という印象をお持ちの方も多いのではないでしょうか．

また，JavaScriptやその互換技術であるJScriptに関係するセキュリティホールが相次いで発見されたことから，一時期，JavaScriptを使用すること自体が忌避されるという風潮があったのも事実です．

しかしながら，GoogleマップのようにJavaScriptと非同期通信を活用したサービスが登場して「Ajax」という言葉が生まれたり，Webブラウザ間の実装の差異を吸収するライブラリが多数整備されてきたりしたことなどもあって，近年はJavaScriptのプログラミング言語としての優秀さが再評価され始めています．

JavaScriptはプロトタイプベースのオブジェクト指向言語で，リスト2のような記法によって独自のクラスを定義することも可能です．Java のような厳格な型付けはないものの，その分柔軟性が非常に高く，ある意味ではLisp に近いような特性を持っているとも言われています．

function MyClass() {
}

MyClass.prototype = {
    property1 : true,
    property2 : 'string',
    method : function() {
        alert('Hello, world!');
    }
};

var obj = new MyClass();
obj.method();

Firefox 2では，ECMAScript 3rd Editionとして標準化された仕様にいくつかの機能拡張を行った，JavaScript 1.7を利用できます．

DOM：XML文書を操作するためのAPI

DOM（Document Object Model）（▽注5）はW3Cによって策定されている技術仕様の1つで，XML文書の内容をオブジェクト的に操作するためのAPIです．旧来のDynamic HTMLではHTML要素ノードのinnerHTMLプロパティを使って文字列操作で動的にHTML文書の内容を変更する手法が一般的でしたが，DOMを使うと，JavaScriptのオブジェクト指向的な特性にマッチした形でXML文書を操作することができます（▽注6）．

なお，DOMには機能によっていくつかのレベルがあり，GeckoエンジンはDOM Level 2までのほとんどすべての機能と，DOMLevel 3の一部の機能を実装しています．

DOMでは，XML文書の内容を要素ノードやその他のノードの集合である「DOMツリー」として扱います．たとえば「idがtoolbarである要素の2番目の子要素を削除し，代わりに新しいbutton要素を子として追加して，label属性を設定する」という処理は，DOMを使うとリスト3のように書けます．

なお，本稿ではDOMの各種のAPIに関する詳細な解説は行いません．詳しくDOMを学びたいという方は，MDC（MozillaDeveloper Center）内のドキュメント（▽注7）や，W3Cの仕様書などを参照してください．

var bar = document.getElementById('toolbar');
bar.removeChild(bar.childNodes[1]);
bar.appendChild(document.createElement('button'));
bar.lastChild.setAttribute('label', 'Hello!');

[原典] Firefox拡張機能開発チュートリアル　XULの基礎からXPCOMの利用方法まで徹底解説！（©2008 Mozilla Japan）
[ライセンス] 文書全体:Creative Commons 表示-継承 2.1 日本 | サンプルコード:MITライセンス

©2008 kittttttan, some rights reserved.