Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WebComponentsとPolymer

807 views

Published on

8/22に行われたGrand-Frontend-Osaka 2015 Summerでの資料です

Published in: Engineering
  • Be the first to comment

WebComponentsとPolymer

  1. 1. WebComponentsとPolymer 8/22(土) Grand-Frontend-Osaka 2015 Summer ✕
  2. 2. • 牧 昂拡 @tk_0225 • 株式会社グラッドキューブに勤務 • Webサイト解析ASP「SiTest」の開発エンジニア 自己紹介
  3. 3. WebComponentsとは? • HTML+JS+CSSをComponent化する仕組み • 共通部品を切り出すことで再利用生を向上 • 外部に干渉しないスコープが作れる
  → カプセル化することが出来る
  4. 4. WebComponentsを構成する 4つの要素
  5. 5. template要素 • テンプレート(雛形)を定義できる • <template>要素を使用 • コンテンツはアクティベートされるまで
 テンプレート内のコードは一切評価されない • document.importNode() →
 document.body.appendChild()でアクティベート • 既にHTML5の仕様として一部ブラウザで実装されている
  6. 6. <html> <body> <template id=“mytemplate”> <img src=“”> </template> <script> var t = document.querySelector(“#mytemplate”); t.content.querySelector(“img”).src = “logo.png”; var clone = document.importNode(t.content, true); document.body.appendChild(clone); </script> </body> </html>
  7. 7. HTML Imports • 外部のHTMLファイルをインポートすることが出来る • <link rel=“import” href=“{{ImportFilePath}}”> • importの呼び出しは一度きり
  → 依存性管理が楽 • import内のスクリプトは順次実行するが
 メインコンテンツの描画はブロックしない
  8. 8. #index.html <html> <body> <link rel=“import” href=“./import.html”> </body> <script> var link = document.querySelector(“link[rel=‘import’]”); var template = link.import.querySelector(“template”); var clone = document.importNode(template.content, true); document.body.appendChild(clone); </script> </html> #import.html <template> <h1>Sample!</h1> </template>
  9. 9. Shadow DOM • DOMツリーをカプセル化することが出来る • ShadowDOMを使用すると、
 中の要素はShadowRootに関連付けされる • 要素の中身(ShadowHost)は見えなくなり、
 代わりにShadowRootの中が見えるようになる
  10. 10. <section id=“section”> <h3>ShadowDOM</h3> </section> <script> var root = document .querySelector(“#section”) .createShadowRoot();
 root.innerHTML = “<style>h3 { color: red; } </style><h3>ShadowDOM</h3>”; </script>
  11. 11. Custom Elements • 任意の名前の要素を作成することが出来る • 要素名の命名規則として必ず「-」を含める必要がある • ネイティブ要素を拡張(継承)することが出来る
 (拡張CustomElements)
  12. 12. <template> <style> p { color: red; } </style> <p>I am Shadow DOM!</p> </template> <script> var proto = Object.create(HTMLElement.prototype, { createdCallback: function(){ var t = document.querySelector(“template”); var clone = document.importNode(t.content, true); this.createShadowRoot().appendChild(clone); } }); document.registerElement(“sample-template”, { prototype: proto }); </script>
  13. 13. Polymerとは? • Google I/Oでv1.0が発表(最近v1.1出ました) • WebComponentsのラッパーライブラリ • https://github.com/Polymer/polymer • WebComponentsの簡略化と機能の強化
  14. 14. webcomponents.js, webcomponents-lite.js Polymer template要素 HTMLImports ShadowDOM CustomElements 各
 ブ
 ラ
 ウ ザ
  15. 15. Polymer Catalog https://elements.polymer-project.org/
  16. 16. Fe - IronElements • Polymerの中核を担うコアコンポーネント • 多くのコンポーネントがIronElementsに依存している • データの通信や入力などを担っている
  17. 17. Md - PaperElements • UIコンポーネント • Material DesignがUIに適用されている • ボタンやタブ、スライダーなど色々 っている
  18. 18. Go - GoogleWebComponents • その名の通り、GoogleのWebComponents • GoogleAnalyticsからChartやCalendar、
 Sign inまでなんでもござれ • Googleのサービスはだいたいこれでなんとかなる
  19. 19. Au - GoldElements • Eコマースのコンポーネント • email, phone, zip, cvc(credit)などの
 inputコンポーネント • 簡易的なバリデーションも付いている
  20. 20. Ne - NeonElements • WebAnimationを提供するコンポーネント • 現在はneon-animationのみ提供している
  21. 21. Pt - PlatinumElements • プッシュ通知やリソースキャッシュのコンポーネント • 現在はplatinum-push-messagingと
 platinum-swの2つが提供されている
  22. 22. Mo - Molecules • サードパーティ製ライブラリのラッパー • 現在はmarked-elementのみが提供されている • marked-element
 https://github.com/chjj/marked のラッパー
 Markdownのパーサ・コンパイラ
  23. 23. 仮想DOMはどうなる? • WebComponentsは仮想DOMを想定して
 開発されていません • ちなみにReactもWebComponentsを想定して
 開発されていません
  24. 24. ご静聴ありがとうございました

×