Web ComponentsベースのUIライブラリ「Brick」をMozillaが公開

Web開発のあり方を大きく変えると期待されている、Web Components仕様に準拠した新たなUIコンポーネントライブラリをMozillaが開発していることが明らかになりました（今回のネタ元になった記事はこちら）。 その名もBrickです。

Brickは、Brickは、X-Tagというフレームワークの上で構築されています。 X-Tagは、Web Components仕様に準拠したカスタムコンポーネントを容易に作ることができるようにするフレームワークです。 また、X-TagはPolymerというライブラリが提供するPolyfillを使用しており、IE9を含むモダンブラウザ上でWeb Componentsを利用可能にします。

そもそもWeb Componentsってなに？

Web Components仕様は様々な機能を提供しますが、その最も大きなものは、「カスタム要素を作れる」というものです。 例えば、Web Componentsを使用すると、以下の様なタグを記述するだけでその場にカレンダーを貼り付けることができるようになるというわけです。

:html:
<x-calendar></x-calendar>

これだけでも、Web制作/開発に大きな影響を及ぼすということを感じていただけるのではないでしょうか。 その他、コンポーネントの内部をカプセル化する仕組み（Shadow DOM）や、外部のコンポーネントをlink要素で参照する仕組み（HTMLインポート）などもWeb Componentsは規定しており、HTMLそのものをUIコンポーネント基盤として再構築しようとする、大胆な試みだと言っても過言ではないでしょう。

Brickを試す

繰り返しになりますが、BrickはX-Tag上で構築されたUIコンポーネントライブラリです。 それらのコンポーネントは、お使いのブラウザ上（IE9含む）で簡単に試すことができます。

・・・と言いたいところなのですが、現在のBrickにはバグがあるようで、うまく動かないコンポーネントもいくつかありました。 とりあえず、現在Brickが提供している14のコンポーネントのうち、一部を以下に紹介します。 以下の解説は、Brickのドキュメント上のサンプルを、Google Chrome 29上で動作させたものになります。

アプリケーションバー

スマホアプリの上部に表示されるナビゲーションバーを簡単に作ることができます。

    :html:
<x-appbar>
    <div>=</div>
    <header>Title</header>
    <div>+</div>
    <div>?</div>
</x-appbar>

カレンダー

カレンダーを貼り付けることができます。うまく動作しなかったので、画像はこちらのページに貼り付けてあったものを拝借しました。

    :html:
<x-calendar></x-calendar>

アイコンボタン

アイコン付きのボタンを簡単に作ることができます。src属性に、アイコン画像のURLを指定します。しかし、現在のバージョンではアイコンがうまく描画されませんでした。

    :html:
<x-iconbutton src="firefox.png">
  アイコンボタンには＜code＞どんなマークアップでも＜/code＞書けます
</x-iconbutton>

レイアウト

ヘッダー・ボディ・フッターというレイアウトを簡単に構築できます。ボディ部分は、コンテンツの高さに応じて自動的にスクロール領域となります。

:html:
<x-layout>
    <header>
        I'm the header!
    </header>
    <section>
        I'm the main body! <p>(I will automatically overflow if necessary.)</p><p>Filler text</p><p>Filler text</p><p>Filler text</p><p>Filler text</p><p>Filler text</p><p>Filler text</p><p>Filler text</p><p>Filler text</p><p>Filler text</p><p>Filler text</p>
    </section>
    <footer>
        I'm the footer!
    </footer>
</x-layout>

カスタムコンポーネントを自作する

こうしたコンポーネントを自作することもできます。 X-Tagフレームワークを用いると、コンポーネントを簡単に作ることができます。 例えば以下に、前述したアプリケーションバーのソースコードに、日本語でコメントを付与したものを示します。コンポーネントを容易に自作できるという雰囲気を感じ取って頂ければと思います。

:javascript:
(function(){
  // カスタムタグの定義
  xtag.register('x-appbar', {
    // タグのライフサイクルメソッド
    lifecycle: {
      // タグが生成された時に呼び出されるコールバック
      created: function(){
        // 入れ子になったheader要素を取得する
        var header = xtag.queryChildren(this, 'header')[0];
        if (!header){
          header = document.createElement('header');
          this.appendChild(header);
        }
        this.xtag.data.header = header;
        this.subheading = this.subheading;
      }
    },
    // 要素の属性にアクセスする手段を提供する
    accessors: {
      heading: {
        // 属性の設定
        attribute: {},
        // 属性に値をセット
        get: function(){
          return this.xtag.data.header.innerHTML;
        },
        // 属性に値をセット
        set: function(value){
          this.xtag.data.header.innerHTML = value;
        }
      },
      subheading: {
        attribute: {},
        get: function(){
          return this.getAttribute('subheading') || "";
        },
        set: function(value){
          this.xtag.data.header.setAttribute('subheading', value);
        }
      }
    }
  });
})();

まとめ

Brickはまだ正式公開前ということもあり、バグも多く、デザインも洗練されていないのは仕方のないところです。今後に期待といったところでしょうか。

しかし、Web Componentsに関するライブラリをMozillaが公開したというところに、筆者は大きな意義を感じます。 Google主導で進められていると思われていたWeb Componentsに、Mozillaも強くコミットしていくということの現れとも言えるからです（実際Firefoxは、カスタム要素を作るためのdocument.register APIを実装しています）。

エキスパートNo32のえーじさんに昔教えていただいた情報によれば、Web Components仕様にはMicrosoftも強く関心を示しているとのこと。 そうなると、Microsoft, Mozilla, GoogleがWeb Componentsに前向きということになりますし、ChromiumをベースとしているOperaはもちろん、以前はGoogleが大きくコミットしていたWebKitにもWeb Componentsの一部は実装されているはずですので、SafariでもそのうちWeb Componentsを使えるようになる可能性があります。

Web Componentsによるマークアップ作業の大変革が起こるのは、意外とそう遠くない未来なのかもしれませんね。