XUL

XULに関する世界観です。

XUL

XULとは何か

XULは、Mozillaを作るために作られた、XMLによるGUI記述言語。XULでは、XMLの技術とJavaScriptを使うことで、クロスプラットフォームなアプリケーションを開発することができる。また、Mozillaのための拡張機能もXULで記述される。

既に最近のMozilla.orgではXULは廃止への方向へ向かっているが、最近WindowsやFLASHやJavaなどでもXMLによるインターフェースの記述が流行している以前の、XMLによるGUI記述の「先駆者」であったと言える。まさにMozillaはインターネットで、オリジナルの技術であるXULを持っている。XULとHTMLレンダリングエンジンのGeckoは、Mozillaのブラウザアプリケーションを執り行う中で、基盤となる技術である。

ちなみに、最近のMozillaはRustという大人気のシステム用プログラミング言語を作っているほか、ServoというRustによる並列ブラウザエンジンを作っている。XUL亡きあとも、MozillaはRustを中心に独自の、どの企業にも中立な、日進月歩のオープンソースWebブラウザを作り続ける。最近はGoogle Chromeなど、WebKitやBlinkなどの新しいオープンソースHTMLレンダリング技術が流行っているが、今でも、オープンソースはLinux KernelとMozilla.orgを中心に回っている。多くのLinuxディストリビューションでMozilla Firefoxは標準であり、WindowsでもMozilla Firefoxは人気である。

ブラウザのインターフェースをWebコンテンツと同様に扱う

XULの本質とは、「WebブラウザのインターフェースをWebコンテンツと同様に扱う」というところにあると思います。

Mozillaは、ブラウザが表示するHTMLだけではなく、ブラウザのUIすら、Webコンテンツと同様に、さまざまな機能をネットから入手して操作できるようにしたかったのです。

たとえば、XULにはJavaScript/CSS/RDFのようなWebの標準技術が使われています。ブラウザのボタンをクリックする、ということは、Webページのボタンやリンクをクリックすることと全く変わりません。JavaScriptとXMLベースのUI記述言語であるXULを使います。

Mozillaでは、XULによって開発された拡張機能を導入することで、Emacs Lispのように際限なくブラウザの機能を「強化」することができます。自分の使いたい機能だけを搭載することができます。

また、昔のSeaMonkey時代のMozillaはそのメタリックな外観で有名でしたが、XULの技術を使うことで、テーマを導入し、どこまでもブラウザの見た目をゴージャスにすることができます。

こうした技術は、最近ではMSがXAMLを作ったほかに、GitHubによるElectronがあります。Electronでは、Web技術を使うことでGUIアプリケーションを開発できます。GitHubのテキストエディタであるAtomや、GitHubを買収したMicrosoftによるテキストエディタのVisual Studio Code（VS-Code）がElectronによるアプリケーションとして有名です。

Mozillaにはいろいろと先見の明があったと僕は思っていて、スマホにおけるアプリストアや、HTML5によるWebアプリケーションは、Mozillaのやりたかったことをそのままやっている。FLASHなどについても同じで、まさにMozillaは「Webページが単なるページではなく、インターフェースも含めた上でのアプリケーションサービスとして扱われる」ようにしたかった。僕はMozillaのやりたいことが本当に良く分かる。Mozillaは正しかった。

XULがもし成功すれば、Webページで複雑なAjaxを使わなければいけなかったことも、ReactのようなWebパーツのJavaScriptフレームワークも存在しなかったかもしれない。また、WebアプリケーションがGUIになる、すなわち、「URLへアクセスするだけでそのアプリケーションがすぐに使える」ようになっていたかもしれない。最近はWeb上で動く画像加工サービスのようなものもあるが、そうしたWebサービスがもっと身近だったかもしれない。スマホのアプリなどそもそも必要がない。

XULによる拡張の開発

XULによる拡張は、XMLとJavaScriptによって行う。個人的な主観としては、コンテキストメニューにXMLとJavaScriptでアイテムを追加したりして、「既にあるXULの仕組みを上手く利用して、ブラウザと拡張のXML定義をドッキングして拡張する」ということが面白かった。まさに「Web技術のGUIにおける応用」という感じがして、Webというエコシステムそのものを作ったNetscapeのセンスが感じられた。

XULサンプルコード

以下にサンプルコードがあります。

拡張の作成 - Firefoxまとめサイト (Webarchive)

後日注記：上のページのXULとJavaScriptによるFirefoxの拡張機能の作成入門は、昔僕が多くの部分を翻訳しました（ほかの人が翻訳した部分もある）。英語のことを何も分かっていない少年時代の僕が訳した文章であるため、稚拙なところがあるかもしれません。ですが、「XULで作るとこんなに拡張性が高いのだ」ということが分かって、とても勉強になりました。またこのページの方法は昔のやり方であり、今のFirefoxではやり方が変わっていることに注意してください。

AIによるサンプル

以下はGoogleのAIが書いた、XULによる拡張機能のサンプル。現在のFirefoxではWebExtensions APIが使われているため、Firefoxのバージョン56まででしか動作しない。

install.rdf (拡張機能のメタデータ)

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org"
     xmlns:em="http://www.mozilla.org">
  <Description about="urn:mozilla:install-manifest">
    <em:id>hello-xul@example.net</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type> <!-- 2 = Extension -->
    <em:name>Hello XUL Button</em:name>
    <em:description>ツールバーにボタンを追加します</em:description>
    <em:creator>Example Author</em:creator>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-138a3cf7304f}</em:id> <!-- Firefox -->
        <em:minVersion>3.0</em:minVersion>
        <em:maxVersion>56.*</em:maxVersion> <!-- 古いバージョンのみ -->
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

chrome.manifest (ファイルの登録)

content hello-xul chrome/content/
overlay chrome://browser/content/browser.xul chrome://hello-xul/content/browser.xul
skin hello-xul classic/1.0 chrome/skin/

chrome/content/browser.xul (画面レイアウト・UI)

<?xml version="1.0"?>
<overlay id="hello-xul-overlay"
         xmlns="http://www.mozilla.org">

  <script src="overlay.js" type="application/x-javascript" />

  <!-- ツールバーにボタンを挿入 -->
  <toolbarpalette id="BrowserToolbarPalette">
    <toolbarbutton id="hello-xul-button"
                   label="Hello"
                   class="toolbarbutton-1"
                   oncommand="HelloXUL.sayHello();" />
  </toolbarpalette>

</overlay>

chrome/content/overlay.js (機能・ロジック)

var HelloXUL = {
  sayHello: function() {
    // コンポーネントマネージャを使ってアラートを表示
    var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
                            .getService(Components.interfaces.nsIPromptService);
    prompts.alert(null, "Hello XUL", "Hello, World!");
  }
};

以下はフォルダ構成。

hello-xul-addon/
├── install.rdf
├── chrome.manifest
└── chrome/
    ├── content/
    │   ├── browser.xul
    │   └── overlay.js
    └── skin/
        └── button.png

以下のフォルダ構成でZIP圧縮し、拡張子を.xpiにし、Firefox 56以前あるいはPale Moonのウィンドウにドラッグ＆ドロップし、ツールバーの右クリックから「カスタマイズ」を選んで「Hello」を配置する。

2026.02.19

XUL

関連ページ

XUL