Download - Polymerで先取り☆Web Components
Polymerで 先取り☆Web Components 株式会社オープンストリーム 木村茉由
アジェンダ 1. HTML/CSS/JavaScriptの問題 2. Web Componentsとは 3. Polymerの紹介 4. デモ 5. まとめ
2
HTML/CSS/JAVASCRIPTの問題 涙で前が見えません…。
3
HTML/CSS/JavaScriptの問題 • HTML/CSS/JavaScriptは常に同一空間>< – 1つの空間の中で、同じHTMLに対して、装飾や操作を行なっている
– 影響範囲はページ全体におよぶ • そして起こるあれやこれや… – CSSを修正したら、想定外にレイアウトが崩れた – 新しくHTMLを追加したら、変なレイアウトになった
– 他のページにコピペしても、なぜか同じレイアウトにならない
4
おかしい…こんなことに 時間を割いている状況はおかしい…
5 h#p://www.flickr.com/photos/50046488@N05/6206566758
そこでWeb Components!
6
WEB COMPONENTSとは コンポーネント化万歳!
7
Web Componentsとは 1. W3Cで新しく提案された、Webブラウザ向けの仕様の総称。 – Introduction to Web Components(W3C) 2. WebアプリのUIのコンポーネント化を実現するもの
8
Web Componentsとは • 『WebアプリのUIのコンポーネント化』が解決すること 1. 影響範囲が限定的になる 1. HTML/CSS/JavaScriptの1セットをコンポーネントに閉じ込めることができる
2. 完全に名前空間が切り離され、ページ内の他のスタイルに影響しない・されない
2. 再利用が簡単になる 1. 使いたいページにimportして、カスタムタグとして利用する
9
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)
10
えっ…じゃあまだ使えないんじゃ…
11
http://www.flickr.com/photos/26667277@N00/9108416093
使えます!そう、Polymerならね!
12
POLYMERの紹介 未来を未来のままにしない
13
Polymerの紹介 • Polymerとは – http://www.polymer-project.org/ – Web ComponentsのPolyfill(再実装)ライブラリ(platform.js)と、その上で動くUIフレームワーク(polymer.js)
– Web Componentsの仕様を先行実装しつつ、そこで得たナレッジをWeb Componentsの仕様と実装(Chrome)にフィードバックしている
– 仕様と実装を育てるライブラリ – 実戦投入は厳しいけども…。
14
Polymerの紹介
<!-‐-‐ 1. カスタムタグの定義 -‐-‐> <element name=“my-‐cmp" a#ributes="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> 15
<!DOCTYPE html> <html> <head> <!-‐-‐ 1. polymer.jsを読み込む -‐-‐> <script src=”js/polymer.js"></script> <!-‐-‐ 2. コンポーネントを読み込む-‐-‐> <link rel="import" href=”myComponent.html”> </head> <body> <!-‐-‐ 3. カスタムタグを使用する -‐-‐> <my-‐cmp owner="Sco#" color="blue”></my-‐cmp><br /> <b>ここはスタイル適用されない</b> </body> </html>
読み込む側のHTML コンポーネントを定義する側のHTML
デモ 百聞は一見にしかず
16
まとめ 時間おさまってるかな…
17
まとめ • Web Componentsは昨今のWebアプリケーション開発に対する、とても素敵なアプローチ – Web Components周りの仕様は、Googleだけでなく、Mozilla、Microsoft、Adobe等も関わっている
– まだまだ道のりは長そうだけど、志は皆同じ • Polymerを通じて、仕様策定に協力できるかも…!
18
参考リンク • Web Components普及の夜明け!?Polymer.jsを試してみた。 | OpenWeb – http://openweb.co.jp/2013/05/17/web-components%E6%99%AE%E5%8F%8A%E3%81%AE%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/
19
ご清聴ありがとうございました!
20
http://www.flickr.com/photos/94727112@N05/8905240167