Successfully reported this slideshow.

Web Component概要

74

Share

Loading in …3
×
1 of 54
1 of 54

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Web Component概要

  1. 1. Web Components概要 2012/10/20 株式会社シーエー・モバイル Web先端技術フェロー 白石俊平(@Shumpei)
  2. 2. 自己紹介 白石俊平と申します。 コミュニティhtml5.org管理人(会員数5000名超) HTML5とか勉強会主催(毎月一回、100名を動員) Google API Expert (HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei
  3. 3. 今日のアジェンダ Web Componentsとは何か? Web Componentsの構成要素 テンプレート デコレータ カスタム要素 Shadow DOM Web ComponentsはWebをどう変えるか?
  4. 4. Web Componentsとは何か? →WebのUIを「コンポーネント 化」するための仕様群である。
  5. 5. Webには、 コンポーネント 化が必要だ。
  6. 6. メンテナンス性 Webには、 コンポーネント 再利用性 化が必要だ。 開発効率
  7. 7. Web Components概要 Googleによって仕様提案 2012/10現在、Google Chromeが一部を実装済み 一部の仕様が公式のドラフトとして公開 →一般的に使えるようになるにはまだ時間がかか りそう
  8. 8. Web Componentsの構成要素 Web Componentsを構成する4つの要素 テンプレート デコレータ カスタム要素 Shadow DOM
  9. 9. HTMLテンプレート
  10. 10. HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート DOM操作
  11. 11. HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート DOMを考慮しない 非標準 DOM操作 <script id="tmpl1" type="text/x-handlebars-template"> <div>...</div> </script>
  12. 12. HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート DOM操作 コードが書きにくい 結果が予想しづらい var div = document.getElementById('...'); div.setAttribute('key', 'value'); var p = document.createElement('p'); p.innerHTML = '...'; div.appendChild(p);
  13. 13. HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート XSSの危険性 HTMLテンプレートで DOM操作 解決! コードが書きにくい 結果が予想しづらい
  14. 14. HTMLテンプレートの定義方法 <template>要素を使用する。 <template>内に、通常通りHTMLを記述する <template>はレンダリングされない <body>, <head>に定義 <html> <head> <template id="t"> <div id="message"></div> </template> </head> <body></body> </html>
  15. 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. 16. HTMLテンプレート ぶっちゃけ、これだけじゃ全然便利じゃない。 デコレータ、カスタム要素で使用される汎用要 素と理解すべき。 「テンプレートである」というセマンティック を与えることができるのは良い。 今までの<script>要素よりは見通しが良い。 <script type="text/x-handlbars-template"> </script>
  17. 17. デコレータ
  18. 18. CSSの限界を超える CSSの限界とは? DOMを操作することは できない
  19. 19. <ul> <li> <i>アイコン</i> <span>自由人会議</span> <span>5</span> </li> … </ul> くらいで済みそうなものだけれ ど・・
  20. 20. デコレータ 要素を「デコレーション」するための仕組み HTML内で定義し、CSS内で使用する
  21. 21. デコレータの定義 <decorator>要素と<template>要素を使用して定 義する。 <decorator id="labelDecorator"> <template> ラベル: </template> </decorator>
  22. 22. デコレータの使用 CSS内で、decoratorプロパティを使って要素に 指定する。 /* 全てのlabel要素が「ラベル:」となる */ label { decorator: url(#labelDecorator); } <label for="name"> お名前 </label> <input id="name">
  23. 23. デコレータの使用 テンプレート内で<content>要素を使用して、要 素内容を挿入する箇所を指定できる。 <decorator id="labelDecorator"> <template> <!-- ここに、要素内容が挿入される --> <content></content>: </template> </decorator> <label for="name"> お名前 </label> <input id="name">
  24. 24. 複数の<content>要素を指定する <content>は複数指定できる。 select属性を用いて、要素内容の一部を抜きだし て挿入できる。 <decorator id="fieldRowDecorator"> <template> <div> <!-- ここに、要素内容が挿入される --> <content select="label"></content>: </div> <!-- 残りの要素はここに挿入される --> <div id="field"><content></content></div> </template> </decorator>
  25. 25. 複数の<content>要素を指定する /* ラベルとフィールドの組み合わせ */ .fieldRow { decorator: url(#fieldDecorator); } <div class="fieldRow"> <label for="name"> お名前 </label> <input id="name"> </div>
  26. 26. Advanced: デコレータのスタイリング スコープ付きのstyle要素を使用する。 <decorator id="fieldRowDecorator"> <template> <style scoped>...</style> … </template> </decorator>
  27. 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. 28. デコレータ あくまで表示目的の機能である。 Shadow DOM(後述)は持たない デコレータで定義されたDOMには、アクセスす る手段がない スタイリング目的の余計なマークアップを劇的 に減らすことができるため、非常に強力
  29. 29. カスタム要素
  30. 30. カスタム要素とは? 要素を自作できる!!!!
  31. 31. カスタム要素の定義 <element>要素を使用する name属性に要素名を指定する 自作要素には「x-」という接頭辞をつけなくては ならない extends属性に、継承元の要素を指定する <element name="x-fancybutton" extends="button"> <template> <!-- デコレータと同様 --> … </template> </element>
  32. 32. カスタム要素の使用 要素にis属性を指定して、カスタム要素の名称を 指定する。 対象となる要素は、カスタム要素のextendsと一 致している必要がある <button is="x-fancybutton"> <span>ボタン</span> </button>
  33. 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. 34. Advanced: カスタム要素のクラス定義 コンストラクタのプロトタイプを変更して、要 素独自の振る舞いを追加する。 <element ... constructor="FancyButton"> <script> FancyButton.prototype.razzle = ... // constructor属性を使用しない場合は // 以下のコードでコンストラクタにアクセス // var FancyButton = this.generatedConstructor; </script> ... </element>
  35. 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. 36. Shadow DOM
  37. 37. Shadow DOMとは? 開発者の目から隠されたDOMツリー 複雑な内部構造を隠蔽し、シンプルなDOMに見 せかけることができる(=カプセル化)。
  38. 38. Shadow DOMの実装状況 Google ChromeにはShadow DOMが実装されて いる。 標準的な要素の多くが、Shadow DOMで実装さ れている。 video/audio/textarea/details/input...
  39. 39. Shadow DOMを「見る」 chrome://flagsにて、以下のフラグをオンにする。 Shadow DOMを有効にする <style scoped>を有効にする Shadow DOMを自分で使うためには必要 デベロッパーツールのテストを有効にする Shadow DOMの内容を開発者ツールで見るために 必要
  40. 40. Shadow DOMを見る 標準的な要素が、Shadow DOMによって構築さ れていることを確認する。
  41. 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. 42. Advanced: Shadow DOMの動作を理解する 二種類のDOMツリー
  43. 43. Advanced: Shadow DOMの動作を理解する Shadow DOMに差し替えられる
  44. 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. 45. Advanced: Shadow DOMを使う Chrome上では既に、Shadow DOMのAPIが利用 可能となっている。 WebKitShadowRootを用いて、任意の要素を Shadow Hostにすることができる。
  46. 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. 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. 48. Web Componentsは Webをどう変えるか?
  49. 49. UIフレームワークの 利用方法が統一 $('#list').somelist(); <ul data-role="listview"> <ul is="x-somelist"> </ul> </ul> <ul dojoType="x.y.SomeList"> </ul>
  50. 50. 外部コンポーネントの 読み込み link要素を用いて、外部コンポーネントを読み込 むことができる。 <link rel="components" href="URL"> CDNによるコンポーネント配信な どが期待できる!
  51. 51. Web UI開発の分業が可能に コンポーネント利用者 (ロースキル) HTMLマークアップ CSSスタイリング コンポーネント開発者 (ハイスキル) HTML/CSS/JSを駆使したコンポーネント開発 開発標準策定 サードパーティコンポーネントの選定など
  52. 52. よりセマンティックな マークアップに 複雑なマークアップをカプセル化することで、 よりシンプルでセマンティックなマークアップ に。 <textarea is="x-tweetbox" placeholder="ツイートする"> </textarea>
  53. 53. WebComponentsには注目! 数年後のHTMLマークアップは、今とは全く違う ものになっているかも? いつまでも泥臭かったHTMLフロントエンド開発 を、洗練されたものに。
  54. 54. ご清聴ありがとうございました。 Follow me @Shumpei

×