Web Component概要

Web Components 概要2012/10/20株式会社シーエー・モバイル Web 先端技術フェロー白石俊平（ @Shumpei ）

自己紹介

白石俊平と申します。コミュニティ html5.org 管理人（会員数 5000 名超）HTML5 とか勉強会主催（毎月一回、 100 名を動員）Google API Expert (HTML5)Microsoft Most Valuable Professional (IE9)Twitter: @Shumpei

今日のアジェンダWeb Components とは何か？

Web Components の構成要素テンプレートデコレータカスタム要素Shadow DOM

Web Components は Web をどう変えるか？

Web Components とは何か？

→Web の UI を「コンポーネント化」するための仕様群である。

Web には、コンポーネント

化が必要だ。

Web には、コンポーネント

化が必要だ。

メンテナンス性

再利用性

開発効率

Web Components 概要Google によって仕様提案

2012/10 現在、 Google Chrome が一部を実装済み

一部の仕様が公式のドラフトとして公開→ 一般的に使えるようになるにはまだ時間がかかりそう

Web Components の構成要素

Web Components を構成する 4 つの要素

テンプレートデコレータ

カスタム要素 Shadow DOM

HTML テンプレート

HTML テンプレート現在、 JavaScript で UI をいじくる方法は２つある。

文字列テンプレートDOM 操作


文字列テンプレートDOM を考慮しない非標準

DOM 操作

<script id="tmpl1" type="text/x-handlebars-template"> <div>...</div></script>


文字列テンプレートDOM 操作

コードが書きにくい結果が予想しづらい

var div = document.getElementById('...');div.setAttribute('key', 'value');var p = document.createElement('p');p.innerHTML = '...';div.appendChild(p);


文字列テンプレートXSS の危険性

DOM 操作コードが書きにくい結果が予想しづらい

HTML テンプレートで解決！

HTML テンプレートの定義方法

<template> 要素を使用する。<template> 内に、通常通り HTML を記述する<template> はレンダリングされない<body>, <head> に定義

<html><head> <template id="t"> <div id="message"></div> </template></head><body></body></html>

HTML テンプレートを使用する

content プロパティから、内部の DOM を取得する。

<template id="t"> <div id="message"></div></template>

var tmplElem = document.getElementById('t');var tmpl = tmplElem.content.cloneNode();

…

elem.appendChild(tmpl);

HTML テンプレートぶっちゃけ、これだけじゃ全然便利じゃない。

デコレータ、カスタム要素で使用される汎用要素と理解すべき。

「テンプレートである」というセマンティックを与えることができるのは良い。

今までの <script> 要素よりは見通しが良い。<script type="text/x-handlbars-template"></script>

デコレータ

CSS の限界を超える

CSS の限界とは？

DOM を操作することはできない

<ul> <li> <i> アイコン </i> <span> 自由人会議 </span> <span>5</span> </li> …</ul>

くらいで済みそうなものだけれど・・

デコレータ要素を「デコレーション」するための仕組み

HTML 内で定義し、 CSS 内で使用する

デコレータの定義<decorator> 要素と <template> 要素を使用して定義する。

<decorator id="labelDecorator"> <template> ラベル： </template></decorator>

デコレータの使用CSS 内で、 decorator プロパティを使って要素に指定する。

/* 全ての label 要素が「ラベル：」となる */label { decorator: url(#labelDecorator); }

<label for="name"> お名前</label><input id="name">

デコレータの使用テンプレート内で <content> 要素を使用して、要素内容を挿入する箇所を指定できる。

<decorator id="labelDecorator"> <template>  <content></content> ： </template></decorator>

<label for="name"> お名前</label><input id="name">

複数の <content> 要素を指定する

<content> は複数指定できる。

select 属性を用いて、要素内容の一部を抜きだして挿入できる。<decorator id="fieldRowDecorator"> <template> <div>  <content select="label"></content> ： </div>  <div id="field"><content></content></div> </template></decorator>

複数の <content> 要素を指定する

/* ラベルとフィールドの組み合わせ */.fieldRow { decorator: url(#fieldDecorator); }

<div class="fieldRow"><label for="name"> お名前</label><input id="name"></div>

Advanced:デコレータのスタイリング

スコープ付きの style 要素を使用する。

<decorator id="fieldRowDecorator"> <template> <style scoped>...</style> … </template></decorator>

Advanced:デコレータ内のイベント処理

デコレータは、 listen() というメソッドを使用してイベントハンドラを登録する

デコレータのコードが実行されるのは、ロード時に一度きり

<decorator id="decorator-event-demo"> <script> function h(event) { alert(event.target); } this.listen( {selector: "#b", type: "click", handler: h}); </script> <template> <content></content> <button id="b">Bar</button> </template></decorator>

デコレータあくまで表示目的の機能である。

Shadow DOM （後述）は持たないデコレータで定義された DOM には、アクセスする手段がない

スタイリング目的の余計なマークアップを劇的に減らすことができるため、非常に強力

カスタム要素

カスタム要素とは？

要素を自作できる！！！！

カスタム要素の定義<element> 要素を使用する

name 属性に要素名を指定する自作要素には「 x- 」という接頭辞をつけなくてはならない

extends 属性に、継承元の要素を指定する

<element name="x-fancybutton" extends="button"> <template>  … </template></element>

カスタム要素の使用要素に is 属性を指定して、カスタム要素の名称を指定する。

対象となる要素は、カスタム要素の extends と一致している必要がある

<button is="x-fancybutton"> <span>ボタン </span></button>

Advanced:カスタム要素のインスタンス化

カスタム要素は通常の要素と同じく、 document.createElement() でインスタンス化できる

constructor 属性で、コンストラクタを生成させることも可能

var e = document.createElement('x-fancybutton');

<element name="x-fancybutton" extends="button" constructor="FancyButton">...</element>

var fancyButton = new FancyButton();

Advanced:カスタム要素のクラス定義

コンストラクタのプロトタイプを変更して、要素独自の振る舞いを追加する。<element ... constructor="FancyButton"> <script> FancyButton.prototype.razzle = ... // constructor 属性を使用しない場合は // 以下のコードでコンストラクタにアクセス // var FancyButton = this.generatedConstructor; </script> ...</element>

Advanced:カスタム要素のライフサイクル

カスタム要素は、以下の様なライフサイクルイベントを捕捉して処理を行える。

created

attributeChanged

inserted

removed

<element extends="time" name="x-clock"><script>this.lifecycle({ inserted: function(){ this.startUpdatingClock(); }, removed: function() { this.stopUpdatingClock(); }});</script></element>

Shadow DOM

Shadow DOM とは？開発者の目から隠された DOMツリー

複雑な内部構造を隠蔽し、シンプルな DOM に見せかけることができる（＝カプセル化）。

Shadow DOM の実装状況Google Chrome には Shadow DOM が実装されている。

標準的な要素の多くが、 Shadow DOM で実装されている。

video/audio/textarea/details/input...

Shadow DOM を「見る」chrome://flags にて、以下のフラグをオンにする。

Shadow DOM を有効にする<style scoped> を有効にする

Shadow DOM を自分で使うためには必要デベロッパーツールのテストを有効にする

Shadow DOM の内容を開発者ツールで見るために必要

Shadow DOM を見る標準的な要素が、 Shadow DOM によって構築されていることを確認する。

Advanced:Shadow DOM の動作を理解する

Shadow DOM を使用した要素（ Shadow Host ）の「内側」には、 2つのDOMツリーがある。<element name="x-fancybutton" extends="button"> <template> <content></content> <div>...</div> </template></element>

<button is="x-fancybutton"> <span>ボタン </span></button>

カスタム要素の定義に含まれる DOMツリー。こちらのツリーは開発者の目に見えない。（ Shadow DOM ）

カスタム要素内に入れ子にした DOMツリー。こちらのツリーは、Shadow DOM に取って代わられる

Advanced:Shadow DOM の動作を理解する二種類の DOMツリー


Shadow DOM に差し替えられる


元の DOMツリーは、 <content> 要素の位置に挿入される

<element name="x-fancybutton" extends="button"> <template> <content></content> <div>...</div> </template></element><button is="x-fancybutton"> <span>ボタン </span></button>

<button is="x-fancybutton"> <span>ボタン </span> <div>...</div></button>

Advanced:Shadow DOM を使う

Chrome上では既に、 Shadow DOM の API が利用可能となっている。

WebKitShadowRoot を用いて、任意の要素をShadow Host にすることができる。

Advanced:Shadow DOM を使う以下のコードを、 Shadow DOM API を使用して整形する。

<!DOCTYPE html><div id="shadowHost"> もともとあった DOMツリー</div><div id="shadowSubtree"> <style scoped> #origTree { color: red; } </style> <h1>Shadow DOM Subtree</h1> <div id="origTree"> <content></content> </div></div>

Advanced:Shadow DOM を使う

// Shadow Host となる要素を取得var shadowHost = document.getElementById('shadowHost');// Shadow Host に変換// この時点で、元の DOMツリーは一旦非表示にvar shadowRoot = new WebKitShadowRoot(shadowHost);// Shadow DOM サブツリーになる要素var shadowSubtree = document.getElementById('shadowSubtree');// Shadow DOM サブツリーとして指定// 表示されるのはこちらの要素になる。// <content> 要素の部分に、もとの DOMツリーが表示されるshadowRoot.appendChild(shadowSubtree);

Web Components はWeb をどう変えるか？

UI フレームワークの利用方法が統一

$('#list').somelist();

<ul data-role="listview"></ul>

<ul dojoType="x.y.SomeList"></ul>

<ul is="x-somelist"></ul>

外部コンポーネントの読み込み

link 要素を用いて、外部コンポーネントを読み込むことができる。

<link rel="components" href="URL">

CDN によるコンポーネント配信などが期待できる！

Web UI 開発の分業が可能に

コンポーネント開発者（ハイスキル）

HTML/CSS/JS を駆使したコンポーネント開発開発標準策定

サードパーティコンポーネントの選定など

コンポーネント利用者（ロースキル）

HTML マークアップCSS スタイリング

よりセマンティックなマークアップに

複雑なマークアップをカプセル化することで、よりシンプルでセマンティックなマークアップに。

<textarea is="x-tweetbox" placeholder="ツイートする"></textarea>

WebComponents には注目！

数年後の HTML マークアップは、今とは全く違うものになっているかも？

いつまでも泥臭かった HTML フロントエンド開発を、洗練されたものに。

ご清聴ありがとうございました。

Follow me @Shumpei

Technology

Web Component概要