Web Component概要

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

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

3. 今日のアジェンダ Web Componentsとは何か？ Web Componentsの構成要素テンプレートデコレータカスタム要素 Shadow DOM Web ComponentsはWebをどう変えるか？

4. Web Componentsとは何か？ →WebのUIを「コンポーネント化」するための仕様群である。

5. Webには、コンポーネント化が必要だ。

6. メンテナンス性 Webには、コンポーネント再利用性化が必要だ。開発効率

7. Web Components概要 Googleによって仕様提案 2012/10現在、Google Chromeが一部を実装済み一部の仕様が公式のドラフトとして公開 →一般的に使えるようになるにはまだ時間がかかりそう

8. Web Componentsの構成要素 Web Componentsを構成する4つの要素テンプレートデコレータカスタム要素 Shadow DOM

9. HTMLテンプレート

10. HTMLテンプレート現在、JavaScriptでUIをいじくる方法は２つある。文字列テンプレート DOM操作

11. HTMLテンプレート現在、JavaScriptでUIをいじくる方法は２つある。文字列テンプレート DOMを考慮しない非標準 DOM操作 <script id="tmpl1" type="text/x-handlebars-template"> <div>...</div> </script>

12. HTMLテンプレート現在、JavaScriptでUIをいじくる方法は２つある。文字列テンプレート DOM操作コードが書きにくい結果が予想しづらい var div = document.getElementById('...'); div.setAttribute('key', 'value'); var p = document.createElement('p'); p.innerHTML = '...'; div.appendChild(p);

13. HTMLテンプレート現在、JavaScriptでUIをいじくる方法は２つある。文字列テンプレート XSSの危険性 HTMLテンプレートで DOM操作解決！コードが書きにくい結果が予想しづらい

14. HTMLテンプレートの定義方法 <template>要素を使用する。 <template>内に、通常通りHTMLを記述する <template>はレンダリングされない <body>, <head>に定義 <html> <head> <template id="t"> <div id="message"></div> </template> </head> <body></body> </html>

15. HTMLテンプレートを使用する contentプロパティから、内部のDOMを取得する。 <template id="t"> <div id="message"></div> </template> var tmplElem = document.getElementById('t'); var tmpl = tmplElem.content.cloneNode(); … elem.appendChild(tmpl);

16. HTMLテンプレートぶっちゃけ、これだけじゃ全然便利じゃない。デコレータ、カスタム要素で使用される汎用要素と理解すべき。「テンプレートである」というセマンティックを与えることができるのは良い。今までの<script>要素よりは見通しが良い。 <script type="text/x-handlbars-template"> </script>

17. デコレータ

18. CSSの限界を超える CSSの限界とは？ DOMを操作することはできない

19. <ul> <li> <i>アイコン</i> <span>自由人会議</span> <span>5</span> </li> … </ul> くらいで済みそうなものだけれど・・

20. デコレータ要素を「デコレーション」するための仕組み HTML内で定義し、CSS内で使用する

21. デコレータの定義 <decorator>要素と<template>要素を使用して定義する。 <decorator id="labelDecorator"> <template> ラベル： </template> </decorator>

22. デコレータの使用 CSS内で、decoratorプロパティを使って要素に指定する。 /* 全てのlabel要素が「ラベル：」となる */ label { decorator: url(#labelDecorator); } <label for="name"> お名前 </label> <input id="name">

23. デコレータの使用テンプレート内で<content>要素を使用して、要素内容を挿入する箇所を指定できる。 <decorator id="labelDecorator"> <template>  <content></content>： </template> </decorator> <label for="name"> お名前 </label> <input id="name">

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

25. 複数の<content>要素を指定する /* ラベルとフィールドの組み合わせ */ .fieldRow { decorator: url(#fieldDecorator); } <div class="fieldRow"> <label for="name"> お名前 </label> <input id="name"> </div>

26. Advanced: デコレータのスタイリングスコープ付きのstyle要素を使用する。 <decorator id="fieldRowDecorator"> <template> <style scoped>...</style> … </template> </decorator>

27. 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>

28. デコレータあくまで表示目的の機能である。 Shadow DOM（後述）は持たないデコレータで定義されたDOMには、アクセスする手段がないスタイリング目的の余計なマークアップを劇的に減らすことができるため、非常に強力

29. カスタム要素

30. カスタム要素とは？要素を自作できる！！！！

31. カスタム要素の定義 <element>要素を使用する name属性に要素名を指定する自作要素には「x-」という接頭辞をつけなくてはならない extends属性に、継承元の要素を指定する <element name="x-fancybutton" extends="button"> <template>  … </template> </element>

32. カスタム要素の使用要素にis属性を指定して、カスタム要素の名称を指定する。対象となる要素は、カスタム要素のextendsと一致している必要がある <button is="x-fancybutton"> <span>ボタン</span> </button>

33. Advanced: カスタム要素のインスタンス化カスタム要素は通常の要素と同じく、 document.createElement()でインスタンス化できる var e = document.createElement('x-fancybutton'); constructor属性で、コンストラクタを生成させることも可能 <element name="x-fancybutton" extends="button" constructor="FancyButton">...</element> var fancyButton = new FancyButton();

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

35. Advanced: カスタム要素のライフサイクルカスタム要素は、以下の様なライフサイクルイベントを捕捉して処理を行える。 created attributeChanged inserted removed <element extends="time" name="x-clock"> <script> this.lifecycle({ inserted: function(){ this.startUpdatingClock(); }, removed: function() { this.stopUpdatingClock(); } }); </script> </element>

36. Shadow DOM

37. Shadow DOMとは？開発者の目から隠されたDOMツリー複雑な内部構造を隠蔽し、シンプルなDOMに見せかけることができる（＝カプセル化）。

38. Shadow DOMの実装状況 Google ChromeにはShadow DOMが実装されている。標準的な要素の多くが、Shadow DOMで実装されている。 video/audio/textarea/details/input...

39. Shadow DOMを「見る」 chrome://flagsにて、以下のフラグをオンにする。 Shadow DOMを有効にする <style scoped>を有効にする Shadow DOMを自分で使うためには必要デベロッパーツールのテストを有効にする Shadow DOMの内容を開発者ツールで見るために必要

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

41. Advanced: Shadow DOMの動作を理解する Shadow DOMを使用した要素（Shadow Host）の「内側」には、2つのDOMツリーがある。カスタム要素の定義 <element name="x-fancybutton" に含まれるDOMツ extends="button"> リー。 <template> こちらのツリーは開 <content></content> 発者の目に見えない。 <div>...</div> （Shadow DOM） </template> </element> カスタム要素内に入れ子にしたDOMツ <button is="x-fancybutton"> リー。 <span>ボタン</span> こちらのツリーは、 </button> Shadow DOMに取って代わられる

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

43. Advanced: Shadow DOMの動作を理解する Shadow DOMに差し替えられる

44. Advanced: Shadow DOMの動作を理解する元のDOMツリーは、<content>要素の位置に挿入される <element name="x-fancybutton" extends="button"> <template> <content></content> <button is="x-fancybutton"> <div>...</div> <span>ボタン</span> </template> <div>...</div> </element> </button> <button is="x-fancybutton"> <span>ボタン</span> </button>

45. Advanced: Shadow DOMを使う Chrome上では既に、Shadow DOMのAPIが利用可能となっている。 WebKitShadowRootを用いて、任意の要素を Shadow Hostにすることができる。

46. 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>

47. 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);

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

49. UIフレームワークの利用方法が統一 $('#list').somelist(); <ul data-role="listview"> <ul is="x-somelist"> </ul> </ul> <ul dojoType="x.y.SomeList"> </ul>

50. 外部コンポーネントの読み込み link要素を用いて、外部コンポーネントを読み込むことができる。 <link rel="components" href="URL"> CDNによるコンポーネント配信などが期待できる！

51. Web UI開発の分業が可能にコンポーネント利用者（ロースキル） HTMLマークアップ CSSスタイリングコンポーネント開発者（ハイスキル） HTML/CSS/JSを駆使したコンポーネント開発開発標準策定サードパーティコンポーネントの選定など

52. よりセマンティックなマークアップに複雑なマークアップをカプセル化することで、よりシンプルでセマンティックなマークアップに。 <textarea is="x-tweetbox" placeholder="ツイートする"> </textarea>

53. WebComponentsには注目！数年後のHTMLマークアップは、今とは全く違うものになっているかも？いつまでも泥臭かったHTMLフロントエンド開発を、洗練されたものに。

54. ご清聴ありがとうございました。 Follow me @Shumpei

Web Component概要

Web Component概要

Recommended

More Related Content

What's hot

What's hot(18)

Viewers also liked

Viewers also liked(20)

Similar to Web Component概要

Similar to Web Component概要(20)

More from Shumpei Shiraishi

More from Shumpei Shiraishi(20)

Recently uploaded

Recently uploaded(10)

Web Component概要