Polymerで先取り☆Web Components
?
12 likes?3,225 views
社内勉強会でWeb ComponentsとPolymerについて発表した時の資料です
Polymerで先取り☆Web Components
- 2. アジェンダ 1. HTML/CSS/JavaScriptの問題 2. Web Componentsとは 3. Polymerの紹介 4. デモ 5. まとめ 1
- 4. HTML/CSS/JavaScriptの問題 ? HTML/CSS/JavaScriptは、常に同一空間＞＜ – 1つの空間の中で、同じHTMLに対して、装飾 や操作を行なっている – 影響範囲はページ全体におよぶ ? そして起こるあれやこれや… – CSSを修正したら、想定外にレイアウトが崩れ た – 新しくHTMLを追加したら、変なレイアウトに なった – 他のページにコピペしても、なぜか同じレイ アウトにならない 3
- 8. Web Componentsとは 1. W3Cで新しく提案された、Webブラウザ 向けの仕様の総称。 – Introduction to Web Components（W3C） 2. WebアプリのUIのコンポーネント化を実 現するもの 7
- 9. Web Componentsとは ? 『WebアプリのUIのコンポーネント化』が 解決すること 1. 影響範囲が限定的になる 1. HTML/CSS/JavaScriptの1セットをコンポーネント に閉じ込めることができる 2. 完全に名前空間が切り離され、ページ内の他の スタイルに影響しない?されない 2. 再利用が簡単になる 1. 使いたいページにimportして、カスタムタグとし て利用する 8
- 10. Web Componentsとは ? Web Componentsは現在、W3Cの草案と なっている（2013年6月時点） – W3Cの勧告プロセス 1. 草案（Working Draft） ← イマココ 2. 最終草案（Last Call Working Draft） 3. 勧告候補（Candidate Recommendation） 4. 勧告案（Proposed Recommendation） 5. W3C勧告（Recommendation） 9
- 14. Polymerの紹介 ? Polymerとは – http://www.polymer-project.org/ – Web ComponentsのPolyfill（再実装）ライブラ リ（platform.js）と、その上で動くUIフレーム ワーク（polymer.js） – Web Componentsの仕様を先行実装しつつ、そ こで得たナレッジをWeb Componentsの仕様と 実装（Chrome）にフィードバックしている – 仕様と実装を育てるライブラリ 13
- 15. Polymerの紹介 <!-- 1. カスタムタグの定義 --> <element name=“my-cmp" attributes="owner color"> <!-- 2. コンポーネントの定義 --> <template> <style> b { font-size: 3em; } </style> {{owner}}の好きな色は<b>{{color}}</b>で す。 </template> <script> Polymer.register(this, { color: "red", owner: "Daniel" }); </script> </element> 14 <!DOCTYPE html> <html> <head> <!-- 1. polymer.jsを読み込む --> <script src=/slideshow/polymerweb-components/23946231/”js/polymer.js"></script> <!-- 2. コンポーネントを読み込む- -> <link rel="import" href=”myComponent.html”> </head> <body> <!-- 3. カスタムタグを使用する --> <my-cmp owner="Scott" color="blue”></my-cmp><br /> <b>ここはスタイル適用されない </b> </body> </html> コンポーネントを読み込む側のHTML コンポーネントを定義する側のHTML
- 16. デモ 百聞は一見にしかず 15
- 18. まとめ ? Web Componentsは昨今のWebアプリケー ション開発に対する、とても素敵なアプ ローチ – Web Components周りの仕様は、Googleだけで なく、Mozilla、Microsoft、Adobe等も関わって いる – まだまだ道のりは長そうだけど、志は皆同じ ? Polymerを通じて、仕様策定に協力できる かも…！ 17
- 19. 参考リンク ? Web Components普及の夜明け！？Polymer.jsを試し てみた。 | OpenWeb – http://openweb.co.jp/2013/05/17/web- components%E6%99%AE%E5%8F%8A%E3%81%A E%E5%A4%9C%E6%98%8E%E3%81%91%EF%BC %81%EF%BC%9Fpolymer- js%E3%82%92%E8%A9%A6%E3%81%97%E3%81 %A6%E3%81%BF%E3%81%9F%E3%80%82/ ? Polymer と Web Components - steps to phantasien – http://steps.dodgson.org/b/2013/05/19/polymer-and- web-components/ 18