Upcoming SlideShare
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 DOMWeb 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
Login to see the comments