Web Components概要 2013/4/20 エフスタ!版

9,066 views

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,066
On SlideShare
0
From Embeds
0
Number of Embeds
7,364
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Web Components概要 2013/4/20 エフスタ!版

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

×