３章：XUL入門～直感的なUI作成を体験！～

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

拡張機能の開発の仕方を学ぶ前に，まずは拡張機能を作るための基盤となる技術の「XUL（XML-based User-interfaceLanguage）」について学びましょう．

はじめに

XULで利用できるウィジェット

その他のXUL の機能

オーバーレイ

XULの独特の機能の1つに，オーバーレイがあります．これは，複数のXUL文書を合成して1つのXUL文書として処理する機能です．Firefoxにおいては，機能のモジュール化や拡張機能の実現のために利用されています．

XML 宣言とルート要素の開始タグとの間にxuloverlay処理命令を記述しておくと，そのXUL文書を読み込む際にxul-overlay で指定されたXUL文書も同時に読み込まれます．実際に表示されるXUL文書は，読み込み元のXUL文書に対してxul-overlayで指定されたXUL文書の内容が合成された物となります．

リスト23の内容を入力し，「base.xul」として保存してください．このXUL 文書を使ってオーバーレイの例を見てみましょう．

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xul-overlay href="overlayDocument.xul"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <hbox id="box1">
        <label id="label1" value="テキストラベル"/>
    </hbox>
    <hbox id="box2">
        <label id="label2" value="テキストラベル"/>
    </hbox>
</window>

要素の追加

オーバーレイで読み込まれるXUL文書を定義するときは，ルート要素にはoverlay要素を使います．リスト24の内容を， base.xul と同じフォルダに「overlayDocument.xul」として保存してください．

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <button label="ボタン1"/>
    <button label="ボタン2"/>
    <button label="ボタン3"/>
</overlay>

ここで，base.xulをFirefoxのウィンドウに読み込ませてみましょう．base.xulと同時にoverlayDocument.xul が読み込まれ，図19のように，base.xulの内容の最後にoverlayDocument.xulの内容が加わって表示されます．

図19： base.xulの表示結果

要素の合成と挿入

オーバーレイで読み込まれるXUL文書で，追加する要素にidを指定しておくと，オーバーレイ元のXUL文書で同じidを持った要素にその要素の属性や内容が合成されます．

「overlayDocument.xul」の内容をリスト25のように書き換えて，上書き保存してください．

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <hbox id="box1" align="center" style="border: 1px solid; margin: 1em;">
        <button label="ボタン1"/>
        <button label="ボタン2" insertbefore="label1"/>
    </hbox>
    <button label="ボタン3"/>
</overlay>

ここで，base.xulをFirefoxのウィンドウに読み込ませてみましょう．図20の表示結果を見るとわかるとおり，idが「box1」である水平ボックスにstyle属性によるスタイル指定が合成され，内容として記述しておいたボタンが元のボックスの中に挿入されています．

図20：overlayDocument.xulを更新した後の表示結果

また，このとき「ボタン2」のボタンは，「insertbefore="label1"」という指定に従って，idがlabel1である要素の前に挿入されています．逆に，指定の要素の直後に要素を挿入したいときはinsertafter属性を使います．任意の位置を数値で指定する方法としては，position属性も利用できます．例えば「position="4"」と指定すれば，4番目の子としてその要素が挿入されます．

外部エンティティ

XUL はXML の一種なので，リスト26のようにDTD（Document Type Definition）を使ったエンティティ参照も利用できます．ただし，利用できる外部のDTD ファイルは，5章で紹介するChrome URLで示されたものだけ（▽注14）に限られます．Web上や通常のローカルフォルダに置かれたDTDファイルは読み込めませんので，注意してください．

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<!DOCTYPE window SYSTEM "chrome://testapp/locale/testapp.dtd">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <button label="&button.1.label;"/>
    <button label="&button.2.label;"/>
</window>

testapp.dtd:
<!ENTITY button.1.label "ファイアーフォックス">
<!ENTITY button.2.label "サンダーバード">

コラム

Firefox 3での新機能

スピンボタン

Firefox 2では利用できませんが，現在開発中のFirefox 3では，textbox要素に「type="number"」を指定することで，図Aのように，スピンボタン（小さな上下向きのボタン）を伴った数値入力専用のテキストボックスを使えるようになります．

図A：数値入力用のテキストボックス

この時には，min属性で最小値を，max属性で最大値を指定することができます．また，increment属性を使うことで，スピンボタンのクリック1回あたりの値の増減量も指定できます

スライダー

scale要素という新しい入力コントロールも利用できるようになります．こちらはWindowsの音量調節のUIなどで利用されているような，つまみを上下または左右にドラッグして値を変動させる要素です（リストA，図B）（※）．

リストA：sliderの例

<hbox>
    <scale orient="horizontal" min="-100" max="100" value="0"/>
    <scale orient="vertical" min="0" max="100" value="50"/>
</hbox>

図B：リストAの表示結果

※このようなコントロールは「スライダー」と呼ばれますが，XULではスクロールバーの一部としてすでにsliderという要素が使われているため，scaleという要素名になっています．

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

©2008 kittttttan, some rights reserved.