XMLでGUIを作ろう：XULの紹介
Firefox や Thunderbird で利用されている、XML を元にしたユーザーインターフェイス記述言語を紹介します。サンプルをFirefoxで試してください。
本コラムではXULという技術を紹介します。
はじめに
XUL(発音はズール) とは XML User Interface Language の略で、XML を元にしたユーザーインターフェイス記述言語です。主に Firefox や Thunderbird などの製品のグラフィカルユーザインターフェイス(以下GUI)を記述するために利用されています。これらの製品はクラスプラットフォームで動作をする事が前提に作られていますが、それを支えている技術の一つとしてXULが挙げられます。
XULの例
XMLでGUIを記述すると言ってもピンと来ない方がほとんどかと思いますので、実際にFirefoxの実装を見てみましょう。以下は本稿執筆時点での開発版の Firefox の"停止ボタン"についての記述です。
class="toolbarbutton-1 chromeclass-toolbar-additional"
label="&stopCmd.label;"
command="Browser:Stop"
tooltiptext="stopButton.tooltip;"/>
この例ではcommand="Browser:Stop" が停止にコマンドを発行するものだと推測ができます。実際には別の場所にコマンドへの定義がありますが、ここでは深く説明はいたしません。とりあえず、XMLで定義されているものというのを掴んでいただければよいです。
XULの利点
さて、XMLでユーザインターフェイスを記述するまではわかりましたが、それの一体何が利点なのでしょうか？それを紐とく鍵はDHTML(Dynamic HTML)の手法にあります。
DHTMLでのプログラミングでは、(X)HTMLとJavascriptを利用します。HTMLで記述されたファイルはブラウザ上で読み込まれるとDOM構造としてブラウザ内に格納されます。そしてJavascriptを利用してDOMを制御する事で、ブラウザ内にある文書の内容を書き変えたりします。
XULを用いたプログラミングでは、HTMLがXULに置き変わったものと考えてください。つまり、XULで記述されたGUIの定義はDOM構造としてメモリ上に格納され、Javascriptを利用して動作をするのです。
また、Web上ではレイアウトに関してはCSSを使って記述されますが、XULでも同様にレイアウトはCSSを用いています。
これらから、DHTMLの開発の経験があれば用意にGUIプログラミングが可能であるという利点が導きだされます。
さらに重要な点ですが、XUL開発で用いるもの、つまりXML、Javascript、CSSは全てテキストファイルである点です。通常GUIプログラミングでは特別なツールを利用するケースが多々あります(Delphi, Visual Basicなど)。その場合は、クロスプラットフォームで動作するプログラムを作成する事は困難になりますが、XULではそのような事はありません。
クロスプラットフォームで動作する例としては他にもJavaのSwingが挙げられますが、これらはソースコードに直接GUIの定義を記述していきます。XULではXMLファイルとしてGUIの定義を分離しているため、GUIの定義とプログラムのロジックが明確に分離され、さらにXMLファイルのため可読性という点でも有利になります。
XULの悪い点
さて、XULの利点を紹介したので、悪い点も紹介をします。
まず、前述にあるように特別なツールが必要ない点から、逆に言えばGUIエディタのようなツールが(原稿執筆時点では)まだ整備されておらず、手軽ではないという事があげられます。そのため、Windows に特化したプログラムを作成するのであれば、Delphiなどを利用した方が早く作りあげられます。
次に、実行効率でも不利な点があります。最近はかなり改善はされていますが、元々 OS ごとのGUIライブラリにバインディングするような形で実装されており(注：詳細については C Magazine 2005年10月号 に解説があります。なお、該当部分の執筆は筆者が担当しました)、さらにDOMの制御が入ってしまうため、GUIのライブラリを直接叩くよりは動作が遅くなってしまいます。
なお、GUIの記述をXMLで行なうというアプローチを取っているものとしてMicrosoftの XAML が挙げられますが、実際のコーディングではDOMは利用せず、普通のWindowsプログラミングとなんら変わらないようなものとなっています。
XULの実行環境
実際にXULを動かすためにはおおまかに次の三つのパターンがあります。
- Firefox 上のブラウザから読みこませる方法
- Firefox などのaddonの仕組みを使う方法(拡張機能)
- XULRunner というXULの実行環境を用いた方法
本コラムでは、最初の方法について紹介します。拡張機能については Software Design 4月号に特集として掲載される予定です(筆者も一部執筆を担当しています)。なお、ブラウザ上からではかなり制限がかかったモードでプログラムが動作します。これはJava Appletと同様に危険なプログラムの実行を抑えるためです。
サンプルプログラムを動かしてみる
今回は簡単なRPN電卓プログラムを用意しました。RPN電卓とは後置記法を用いた電卓で、例えば 1 + 3 を 1 3 + と表現します。
まずは実行環境を用意します。 Firefox をインストールしてください。それだけで準備は完了です。
次にサンプルプログラムをダウンロードして適当なフォルダに展開してください。そして中にある sample.html を Firefox から開き、Viewというリンクをクリックしてください(IEでは実行できません)。以下のような電卓の画面が表示されたら成功です。
XULによるGUI作成
では、実際にどのようにGUIが記述されているかを見ていきましょう。以下はXULファイルに行番号を付加したものです。
2 <xml-stylesheet href="chrome://global/skin/" type="text/css">
3 <xml-stylesheet href="./xulrpn.css" type="text/css">
4
5 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
6 onload="CalcUi.init();"
7 title="XULRPN"
8 id="xulrpn_window">
9 <script type="application/x-javascript"
10 src="./ui.js" />
11 <script type="application/x-javascript"
12 src="./calculator.js" />
13
14 <!-- COMMAND SET -->
15 <commandset>
16 <command id="new" label="New" oncommand="CalcUi.init();" />
17 <command id="quit" label="Quit" oncommand="window.close();" />
18 </commandset>
19
20 <!-- MENU -->
21 <toolbox>
22 <menubar>
23 <menu id="file-menu" label="File">
24 <menupopup>
25 <menuitem command="new" />
26 <menuseparator />
27 <menuitem command="quit" />
28 </menupopup>
29 </menu>
30 </menubar>
31 </toolbox>
32
33 <grid>
34 <rows>
35 <!-- Stack (1) -->
36 <textbox id="stack1" disabled="true" class="disabledtext" />
37 <!-- Stack (0) -->
38 <textbox id="stack0" disabled="true" class="disabledtext" />
39 <!-- new value -->
40 <textbox id="newvalue" />
41 <!-- CE, C, BK, En -->
42 <row>
43 <button label="CE" onclick="CalcUi.init();" />
44 <button label="C" onclick="CalcUi.clear();" />
45 <button label="BK" onclick="CalcUi.backspace();" />
46 <button label="En" onclick="CalcUi.enter();" />
47 </row>
48 <!-- 7, 8, 9, div -->
49 <row>
50 <button label="7" onclick="CalcUi.push(7);" />
51 <button label="8" onclick="CalcUi.push(8);" />
52 <button label="9" onclick="CalcUi.push(9);" />
53 <button label="/" onclick="CalcUi.div();" />
54 </row>
55
56 <!-- 4, 5, 6, sub -->
57 <row>
58 <button label="4" onclick="CalcUi.push(4);" />
59 <button label="5" onclick="CalcUi.push(5);" />
60 <button label="6" onclick="CalcUi.push(6);" />
61 <button label="*" onclick="CalcUi.sub();" />
62 </row>
63
64 <!-- 1, 2, 3, minus -->
65 <row>
66 <button label="1" onclick="CalcUi.push(1);" />
67 <button label="2" onclick="CalcUi.push(2);" />
68 <button label="3" onclick="CalcUi.push(3);" />
69 <button label="-" onclick="CalcUi.minus();" />
70 </row>
71
72 <!-- 0, +-, . + -->
73 <row>
74 <button label="0" onclick="CalcUi.push(0);" />
75 <button label="+-" onclick="CalcUi.irekae();" />
76 <button label="." onclick="CalcUi.dot();" />
77 <button label="+" onclick="CalcUi.plus();" />
78 </row>
79
80
81 </rows>
82 </grid>
83 </window>
まず、2行目、3行目ではCSSを指定しています。chromeとはXUL環境で使われる特別なURLで、Firefoxなどの内部の情報を参照しています。
5行目のwindow要素から、実際のGUIの記述となります。onload属性でまず最初に呼びだすJavascriptの関数を指定しています。
9行目から12行目までがJavascriptの指定となります。ここはHTMLでの指定と同じです。
15行目から18行目までのcommandset要素はプログラムと画面の表示を連動させるために利用します。25行目のmenuitem要素のcommand属性でnewというidのcommand要素を呼びだしてる事がわかります。
21行目から31行目がメニューバーの記述となります。今回はFileというメニューの中に nNew と Quit という二つのアイテムがあり、それぞれがcommand要素と連動しています。
33行目から82行目までが電卓のインターフェイスを記述している部分となります。grid要素は表組みのレイアウトを実現するもので、rows要素の中の一要素ずつ一つの行と表現されます。今回はtextbox要素を3行分、1行に4つのbutton要素を配置したものを5行分用意しています。また、スタックを表示するtextboxは編集されてしまうとまずいため、disable属性にtrueを設定して編集不可にしています。
今回、電卓の例を取ったのは他のGUI作成ツールと比較をするためです。今回のプログラムを実行すると、ボタンが綺麗に整列しているのがわかります。これを他のGUI作成ツールで実現する場合は、一つ一つボタンの大きさを合わせたり、列を揃えたりと面倒な手順を踏む必要があります。gridという概念は他のGUI環境にも当然ありますが、それに比べると個人的には直感的な作りになっていると思います。
終わりに
いささか急ぎ足で紹介しましたがいかがでしょうか？XULには今回紹介した要素以外にも多くの要素を持っています。元々ブラウザの実装から産まれたため、browser要素を使って自分なりのブラウザまで作る事までできてしまいます。興味を持ったら是非、XUL チュートリアルなどのドキュメントを読んで勉強してみてください。
ダウンロード
| 添付ファイル | サイズ |
|---|---|
| xulrpn_sample.zip | 2.69 KB |
