Latest topics > Split Browser開発のよもやま話（2）：小型ブラウザの制作

Split Browser開発のよもやま話（2）：小型ブラウザの制作 - Jan 13, 2007

前のエントリの続き。

「ブラウザを分割する」という機能を考えた時、構成要素として、一通りの機能を持ったブラウザのサブセット的なパーツは絶対に必要になる。

幸い、XULにはbrowser要素というインラインフレームの一種があって、このタグをいっこ書くだけで「戻る」「進む」などの機能を含めたWebブラウザの基本的な機能を持ったブラウザを簡単に作れるようになっている。

var browser = document.createElement('browser');
document.documentElement.appendChild(browser);

browser.goBack();
browser.loadURI('http://piro.sakura.ne.jp/');

ただ、実際に使うにあたっては、そういった機能を呼び出すためのツールバーボタンやメニューなどは自前でちまちま用意しないといけない。

コンテントホルダーでは、メインのブラウズ領域とコンテントホルダーの提供するブラウザとの間の仕切り（splitter要素）そのものをツールバー代わりにして、そこにボタンを配置してみた。ただ、このやり方にはいくつか問題がある。

• ボタンの高さ（幅）の分だけスプリッタが太くなってしまうため、コンテントホルダーを使っていない時に邪魔になる
• かといってボタンを小さくすると、操作が難しくなる
• かといってボタン無しにしてしまうと、操作性が悪くなる

今回はその解決策として、スプリッタはスプリッタとしての機能のみに特化し、ツールバーの機能はブラウザの方に持たせる事にした。

といっても、ブラウザを追加する度に（今回の目標にはブラウザを何度も追加できるようにするという事も含まれているので）毎回browser要素とtoolbar要素とその中身を生成していると面倒でたまらない。

var container = document.createElement('vbox');

var toolbar = document.createElement('toolbar');
container.appendChild(toolbar);
var browser = document.createElement('browser');
container.appendChild(browser);

toolbar.appendChild(document.createElement('toolbarbutton'));
//以下略

いやまあスクリプト書くのはもちろん一度で済むけど、上の例のようにJavaScriptでこれをやろうとすると面倒なことこの上ない。ましてや、今回の拡張機能のための独自のプロパティやメソッドまで定義しようと思ったら……

っていうかXULの特徴は「タグを書くだけで、human-readableなコードでアプリケーションのGUIを作れる」という事なのに、これじゃ本末転倒だ。

こういう時に便利なのが、XBLによるバインディングだ。XBLというのは、XMLの要素ノードに対して、メソッドやプロパティ、デフォルトの内容（子要素）なんかをまとめて定義するための仕組み。実際のXBLのファイルを見ると分かる通り、XMLとJavaScript（仕様的には他の言語も使えるんか？　よく知らない）で記述するようになっている。XULもXMLなので、名前空間を使ってXBLの中に埋め込むことができる。やろうと思えばSVGやMathMLなんかも使える。はず。

#appcontent {
  -moz-binding: url("./splitbrowser.xml#toplevel-container") !important;
}

subbrowser {
  -moz-binding: url("./splitbrowser.xml#sub-browser") !important;
}

こんな風にCSSの独自プロパティを使ってバインドすれば、その要素をDOMツリーの中に埋め込んだ瞬間にバインディング内容が読み込まれ、XBLで定義したメソッドやプロパティが利用できるようになる。

また、XBLで定義したデフォルトの内容は「匿名内容（Anonymous Content）」と呼ばれる特殊なノードになっている。匿名内容は通常のDOM操作、例えばchildNodesなどのプロパティではアクセスできない（DOMインスペクタでDOMツリーを辿った時に赤い字で表示されるのが匿名内容）ので、表面的には、バインディングで定義した内容は外部からは隠蔽され、XULやSVGの要素が元から持っている機能との違いが分からなくなる。

XBLはFirefoxでもフル活用されていて、XULの機能の多くもXBLで実装されている。タブの切り替えやメニューの自動スクロールなども、既存のボックスやボタン、あるいはXBLで定義されたXUL要素の組み合わせだけで実現されていたりする（C++などのソースコードをいじらなくても、上のCSSのコード片を見れば分かる通り、こうして簡単に新しい要素型を定義できる）。

というわけで、XBLを使って「subbrowser」という要素型を定義し、まずはその中にツールバーや基本的な機能を押し込んだわけです。

このような方法で実装を行った場合、副次的なメリットとして、カプセル化により機能のスケーラビリティを高くできるという効果も得られる。subbrowser要素の内容は外部からは基本的には見えないので、メソッドやプロパティなどのインターフェースさえ変えなければ、小型ブラウザの中にツールバーを足そうがボタンを足そうが、それ以外の部分は全く変更せずに機能を追加できる。subbrowser要素の機能を作り込むのはぶっちゃけそう目新しいことは無いんであんまり面白くないから、ブラウザの縦横自由な追加の処理という面白そうな機能を先に実装して、subbrowserの作り込みは後回しにする、なんてことができるという寸法だ。いやまあXBL使わなくてもやりようによっては可能だけどね……

まだまだ続く。