Shiki’s Weblog

ESウェブブラウザ通信 - フォーム コントロールとXBL 2.0

2012/04/20 #ESウェブブラウザ通信

このブログは前回からすこし間隔があいてしまいましたが、4/19日にWeb IDLがW3CのCandidate Recommendation(勧告候補)になったようです。最近はHTML Living Standardのように仕様書の編集者たちが日々更新している版の重要性が高くなっていて、W3Cの勧告プロセスの考え方には誰もが賛同しているという状況ではなくなりつつあるように思います(CSS 2.1も勧告になったのはまだ去年の6月のことですが、話題の中心はかなり前からCSS 3に移っていましたよね)。それでもWeb IDLがCRまで進んだことは大きな前進だと思います。さて、今回はESウェブブラウザの新しいユーザーインターフェイスや、ボタンやテキストボックスといったフォーム コントロールの実装の進め方の報告です。

新しいユーザー インターフェイス

ESウェブブラウザ本体(ナビゲーターと呼ぶことにしておきます)はHTMLで作成します、ということはESウェブブラウザをオープンソース化したときからアナウンスしているとおりですが、r2605で新しいUIを公開しました(アイコンにはVisualPharmのこちらを使わせていただいています)。

r2605

r2605でのナビゲーターはたった178行のHTMLファイルです。ここからさらに開発を進めて、r2611ではエスリルのページなどを新しいUI経由でURLを入力して表示できるようになりました。

r2611

ちょっとクラッシックな、でもブラウザらしい雰囲気になってきた感じがします。この段階でもナビゲーターは169行のHTMLファイルでした。大事な点はナビゲーターはただのHTMLファイルなので、より近代的なデザインにしたかったり、あるいは全然違うUIを試したい、という場合でも、CSSとJavaScriptの知識があれば誰でも自由に変更できる、という点です。そういうわけなので、この新しいUIも当面動作チェックとしてこんな感じにしておきます、というのが正確な位置づけです。

フォーム コントロールとXBL

ESウェブブラウザでは、ウェブブラウザとして最低限必要な機能のうち未実装のものがまだたくさんあります。その1つがボタンやテキストボックスといったフォーム コントロールです。ウェブブラウザ本体のUIの開発にHTMLが使えるような時代ですので、フォーム コントロールの実装にもHTML(そしてCSSとJavaScript)を使いたい、と考える人が出てくるのは自然な流れです。HTML 5の仕様書のエディターでもあるHixieも2010年にHTML版のXBL2を提案しています。ここではこのHTMLベースのXBL2を"Simplified XBL2"と呼ぶことにしておきます。Simplified XBL2にはいろいろな機能がありますが、その一つとして、

XBL could be used to implement the form controls in XForms or HTML.

とフォーム コントロールの(CSSとJavaScriptを使った)実装が念頭に置かれています。Simplified XBL2の元になったXMLベースのXBL2は2007年に勧告候補になったものの、5年以上経過した今でもどのウェブ ブラウザもいまだに実装していません。そういう経緯があって"Since XBL2 wasn't getting much traction"とはじまるHixieの提案があったようです。(こういうことを書くとWeb IDLが勧告候補になったからといっても喜べない気がしてしまいそうですが、幸いWeb IDLはMicrosoft社もInternet Explorer 9の開発に使っているのでXBL2ほどひどい状況ではなさそうです。) XBL2というのだからXBL1もあるのでは、 というのはその通りでMozillaで実装されています。より詳しい説明がこちらにもあるように、XBL1はW3Cの標準ではなくて、Mozillaで使われている独自の技術仕様です。そういう意味では、Internet Explorerで使われているHTML Components(HTC)も似たような独自の技術仕様のひとつです。XBL1とHTCの資産が既にたくさんあるという状況も標準化を加速させない理由のひとつかもしれません。Simplified XBL2もその後2年近くが経過してやはりどのブラウザ ベンダーも動かない、という状況が続いています。さらにその間グーグルのDimitri GlazkovさんはSimplified XBL2とよく似た"Web Components"を新たに提案されています。こちらはWebKit用の実装がはじまっているようですが残念ながら仕様書がまだ揃っていません。W3C WebAppsワーキンググループの議長でもある Arthur Barstowさんからの問い合わせに対する各ベンダーからの反応を見てもこの領域の難しさを感じたりします。 で、ESウェブブラウザではどうしよう?というお話です。選択肢は、

• XBL 2 (XML based)
• Simplified XBL 2 (HTML based)
• Web Components (HTML based?)

の3つになりますが、現状ではHTMLベースで仕様書が完結しているという意味でSimplified XBL 2だけしか現実的な候補になりません。ただしSimplified XBL 2はそのままメジャーなウェブブラウザに導入される可能性は現状では非常に低そう、という点は考慮しておかないといけません。そこで当面はESウェブブラウザのナビゲーター本体の実装に必要な必要最小限のサブセットに限って実装を進めていきます。そして標準化の動向がより具体的になってきたらそちらに合わせて軌道修正していくという進め方をしていきます。いずれにしても一番根底にある、よりCSSやJavaScript側に実装を、という考え方はどの仕様も同じだと思います。

ESウェブブラウザでのSimplified XBL2の簡単な解説

現状で最新のr2644では、Simplified XBL2の実装が少し進んで、下図のようにナビゲーターのテキスト ボックスやtextfield.html中のinput要素がXBL2で制御できるようになっています。

r2644

ESウェブブラウザでひとまず対応しているのはSimplified XBL2の次の要素技術です。

• CSSのbindingプロパティー
• HTMLのbinding要素
• HTMLのtemplete要素
• HTMLのimplementation要素

まだ完全なラジオボタンの実装にはなっていませんが、r2652でのラジオボタンの実現を例にこれらの新しい要素の説明をしていきます。まず、デフォルトのスタイルシートでは、CSSのbindingプロパティーを使って、

input[type=radio] {
    binding: url(navigator.html#input-radio);
    display: inline-block;
    border-style: none;
    padding: 2px;
}

と、ラジオボタンの表示にはナビゲーター本体のidがinput-radioで指定された要素を使う、ということをbindingプロパティーで指定しています。またHTMLページの作成者のスタイルシートからカスタマイズできるように、bindingを使う要素の外側のスタイルもここで設定しておきます。そしてその要素がSimplified XBL2で記述されたbinding要素になります:

<binding id="input-radio">
<template><span></span></template>
<implementation>
  ({
    xblEnteredDocument: function() {
        this.boundElement.tabIndex = 0;
        var button = document.createTextNode(this.boundElement.checked ? '◉' : '○');
        this.shadowTree.firstChild.appendChild(button);
        this.addEventListener('click', function(event) {
            event.currentTarget.checked = !event.currentTarget.checked;
            button.data = event.currentTarget.checked ? '◉' : '○';
        }, false);
    }
  })
</implementation></binding>

template要素は元のドキュメント中のinput要素をどのように表示するか、その雛形を定義しています。この例では、typeがradioのinput要素は画面中ではその子要素にひとつだけspan要素を持っている状態で作りなさい、ということを指示しています。なお、このような元のドキュメントには現れない、画面表示のためだけに使われるノードのツリーのことを「 シャドー ツリー 」と呼んでいます。そしてimplementation要素は、このinput要素に対応するJavaScriptのオブジェクトのプロトタイプ オブジェクトを記述します。input要素が実際にドキュメント内に展開されると、この中のxblEnteredDocumentメソッドが呼び出されます。xblEnteredDocumentメソッド内からは、元のinput要素はboundElementとして、シャドー ツリーはshadowTreeとして、それぞれ参照できます。この例では、もとのinput要素の状態に応じてspan要素の中にチェック済みを示す◉印か、未チェックを示す○をテキスト ノードとして追加しています。またマウスでクリックされたときには、ひとまずinput要素のcheckedの値を反転させるようにイベント ハンドラを登録しています。

4/24追記 : このラジオボタンの例は初出時はr2644を使っていましたが、r2652の例に差し替えています。 boundElementのスタイルはimplementationからJavaScriptを使って設定するよりも、スタイルシート中にCSSで記載しておいた方がうまくいきます。Simplified XBL2の仕様書にはもっと多くの機能が定義されていますが、ナビゲーターの実装にはおよそこれくらいでも足りそうな気がします。もっともSimplified XBL2で難しいのはセキュリティー関連の事項で、binding要素を提供している側のドキュメント(この例ではnavigator.html)と、利用している側のドキュメント(この例ではtextfield.html)との間で不正な処理を行えてはいけない、という原則があります。実際に、textfield.html中のinput要素に対するxblEnterdDocumentメソッドは、navigator.htmlから作られた別のウィンドウ オブジェクト内で実行されます。navigator.htmlは特別な権限で実行することを想定しているので大丈夫なようにしますが、原則的にはcross-originのバインディングは使えないように既定されています。

まとめ

今回はすこし急ぎ足でESウェブブラウザの新しいUIとXBL2の紹介をしました。これからしばらくは、ESウェブブラウザの最初のリリースに向けて必要最小限の機能の作り込みを優先して進めていきます。そのためトピックがあちこち行ったりきたりするかもしれませんが、次回も今回のような感じで報告していく予定です。

5/11 追記 XBL2 について補足 :  W3C WebApps WGで2012/5/1にXBL 2の仕様策定に関する作業の中止について案内(CfC)が出されました。Opera,Microsoftも賛同を表明していますし、今後はWeb Componentsに議論が集中していくことになりそうです。XBL 2の仕様書にも、

No browser vendor has plans to implement this specification at this time. Unless you are interested in the history of the Web's component model, this document is likely not of any use to you.

という注意が追記されました。