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

Polymerで先取り☆Web Components

Technology

Transcript of Polymerで先取り☆Web Components