このチュートリアルでは、クロスプラットフォームなアプリケーションのユーザーインターフェイスを記述するための言語である、XUL (XML User-interface Language) の学習を手引きします。
このチュートリアルでは、簡易なファイル検索ユーザーインターフェイスの作成に挑戦します。 これは Macintosh の Sherlock や Windows の ファイル検索ダイアログとよく似たものですが、ここでは機能がいくらか限定されたユーザーインターフェイスを作成するだけで、実際のファイル検索機能までは実装しません。 本文中では、ファイル検索ダイアログの変更を行う段落には、左端に青い線が表示してありますので、 それを目安に読んでいくことも可能です。
XUL とは何であり、その目的は？
XUL (発音は zool:ズール で、リズムは cool:クール) は Mozilla ブラウザの開発をより簡単に、より早く行えるようにするために作られました。 XUL は、XML 言語 【訳注: 厳密には XML 応用言語】 であるので、XML で可能なことは全て XUL でも可能です。
ほとんどのアプリケーションは、プラットフォーム固有の機能を用いて開発する必要があるため、クロスプラットフォームなソフトフェアの構築は、時間がかかりコスト高になってしまいます。 このため、過去にも多くのクロスプラットフォームソリューションが生み出されてきました。 例えば、Java は主なセールスポイントとして可搬性をうたっています。 XUL もそのような言語のひとつで、特に可搬性のあるユーザインターフェイスを構築する為に設計されています。 また、アプリケーションの作成は、たった 1 つのプラットフォームのためだけでも長い時間がかかります。 コンパイルやデバッグに時間がかかるからです。 XUL を利用することで、素早く簡単にインターフェイスを実装し変更することができるようになります。
XUL には他の XML 言語の利点をすべて備えています。例えば XHTML や MathML あるいは SVG といった他の XML 言語を中に含めることができます。 また、XUL で表示されるテキストは簡単にローカライズ (地域化) することが可能です。 これによって、わずかな労力で他言語への翻訳版を作成できます。
どのようなユーザインターフェイスを XUL で作れるのでしょうか？
XUL には、現代のグラフィカルインターフェイスにあるほぼあらゆる要素を作る能力があります。作ることのできる要素としては次のようなものがあります：
- テキスト入力欄やチェックボックスといった入力コントロール
- ボタンや他のものを含むツールバー
- メニューバーのメニューやポップアップメニュー
- タブ式のダイアログ
- 階層木構造や表による情報
- キーボードショートカット
表示コンテント (内容) は XUL ファイルのコンテンツからでも、データソースのデータからでも生成することが可能です。 Mozilla の場合、データソースとして、利用者のメールボックスやブックマーク、検索結果などが利用できます。 つまり、メニューやツリーなどの要素のコンテントは、Mozilla が提供するデータや、あるいは RDF ファイルを利用して供給する独自のデータから生成することが可能なわけです。
また、XUL は、様々な方法で利用することが可能です。
- Firefox 拡張機能 (Extension) -- 拡張機能はブラウザそのものに機能を追加します。多くの場合、追加のツールバー、コンテキストメニュー、あるいはブラウザのユーザーインターフェイスのカスタマイズという形になります。これは、オーバーレイという XUL の機能を使用しており、単一ソース、この場合は Firefox ブラウザのユーザーインターフェイスに拡張機能のものを統合します。拡張機能はまた、Thunderbird といった他の Mozilla ベースの製品にも応用できます。
- スタンドアローンな XULRunner アプリケーション -- XULRunner は、スタンドアローンな XUL アプリケーションを作成できる Mozilla プラットフォームのパッケージ版です。こうしたアプリケーションは、実行ファイルであるため、実行するにあたってブラウザは必要ありません。
- XUL パッケージ -- その 2 つの中間にあるのは、拡張機能と同じように作成され、しかし別のウィンドウで別のアプリケーションのように動作するアプリケーションです。完全な XULRunner アプリケーションという大きなサイズは欲しくない、しかし、アプリケーションの実行に Mozilla ブラウザを要求してもかまわないという場合に採用されます。
- リモートな XUL アプリケーション -- ちょうど Web ページ同じように、XUL コードを Web サーバに置いてブラウザ内で開くこともできます。 ただし、セキュリティ面での懸念から、「他のウィンドウを開く」といったようなことが制限されるため、この手法でできることには制限があります。
はじめの 3 タイプではすべて、利用者のマシンへのインストールが必要です。 しかしながら、こうしたタイプのアプリケーションにはセキュリティ上の制限がないため、 例えば、ローカルファイルへのアクセスや、設定の読み込み・書き込みなどが可能になります。 拡張機能にするには、アプリケーションが使用する XUL ファイルや関連するスクリプトおよび画像を 1 つのファイルにパッケージ化して、利用者がダウンロードとインストールができるようにします。 Firefox のような Mozilla アプリケーションでは、拡張機能マネージャーを提供しているため、多量の複雑なコードを作成しなくともパッケージのインストールができるようになっています。
XUL ファイルは、ファイルシステムから直接でも、リモートの Web サイトからでも開くことが可能です。 しかしながら、リモートの場合は可能な操作の種類が制限されるため、XUL の一部は機能しません。 また、リモートなサイトから XUL コンテントをロードしたい場合には、必ず Web サーバ側で XUL ファイルを「application/vnd.mozilla.xul+xml」というコンテントタイプとして送信できるように設定しておく必要があります。 XUL は通常、.xul という拡張子がついたファイルとして保存されています。 このため、XUL ファイルは他の形式と同じように、「ファイル」メニューから「開く」コマンドを使ったり、アドレスバーに URL を入力したりして開くことが可能です。
このチュートリアルを読むために知っておくべき事は？
少なくとも、 HTML の理解と XML および CSS の基本的な理解をしていることが求められます。覚えておくべき指針を示します：
- XML は (HTML とは異なり) 大文字小文字を区別するため XUL の要素および属性は全て小文字で入力されなければなりません。
- XUL の属性値は引用符で括らなければなりません。それが数値であってもです。
- XUL 関連のファイルは通常 4 種類のファイルに分けられます。 それらは、レイアウトと要素のため、スタイル宣言のため、実体宣言 (ローカライゼーションに利用されます) そしてスクリプトのためのものです。加えて、画像やプラットフォーム固有データのための追加ファイルも使用できます。
XUL は Mozilla および Netscape 6 以降や Mozilla Firefox などの Gecko エンジンベースのブラウザでサポートされています。XUL の文法は時につれて色々と変化してきたため、例を正しく動作させるには最新バージョンを利用することをお薦めします。例のほとんどは Mozilla 1.0 以降で動作します。カスタマイズ可能なツールバーのサポートといった特有の差異はありますが、 XUL は Firefox その他のブラウザでもほぼ同様です。
このチュートリアルでは XUL の機能・関係のおおよそをカバーしようと試みましたが、全ての機能については言及出来ていません。一度 XUL に馴染んだら、各要素で提供している他の機能は XUL リファレンスを参照してください。