0
Polymerで
先取り☆Web Components
株式会社オープンストリーム
木村茉由
アジェンダ
1. HTML/CSS/JavaScriptの問題
2. Web Componentsとは
3. Polymerの紹介
4. デモ
5. まとめ
1
HTML/CSS/JAVASCRIPTの問題
涙で前が見えません…。
2
HTML/CSS/JavaScriptの問題
• HTML/CSS/JavaScriptは、常に同一空間><
– 1つの空間の中で、同じHTMLに対して、装飾
や操作を行なっている
– 影響範囲はページ全体におよぶ
• そして起こるあれやこれや...
おかしい…こんなことに
時間を割いている状況はおかしい…
4
http://www.flickr.com/photos/50046488@N05/6206566758
そこでWeb Components!
5
WEB COMPONENTSとは
コンポーネント化万歳!
6
Web Componentsとは
1. W3Cで新しく提案された、Webブラウザ
向けの仕様の総称。
– Introduction to Web Components(W3C)
2. WebアプリのUIのコンポーネント化を実
現するもの
7
Web Componentsとは
• 『WebアプリのUIのコンポーネント化』が
解決すること
1. 影響範囲が限定的になる
1. HTML/CSS/JavaScriptの1セットをコンポーネント
に閉じ込めることができる
2. 完全に名前空間...
Web Componentsとは
• Web Componentsは現在、W3Cの草案と
なっている(2013年6月時点)
– W3Cの勧告プロセス
1. 草案(Working Draft) ← イマココ
2. 最終草案(Last Call W...
えっ…じゃあまだ使えないん
じゃ…
10
http://www.flickr.com/photos/26667277@N00/9108416093
使えます!そう、Polymerなら
ね!
11
POLYMERの紹介
未来を未来のままにしない
12
Polymerの紹介
• Polymerとは
– http://www.polymer-project.org/
– Web ComponentsのPolyfill(再実装)ライブラ
リ(platform.js)と、その上で動くUIフレーム
ワ...
Polymerの紹介
<!-- 1. カスタムタグの定義 -->
<element name=“my-cmp"
attributes="owner color">
<!-- 2. コンポーネントの定義 -->
<template>
<style...
デモ
百聞は一見にしかず
15
まとめ
時間おさまってるかな…
16
まとめ
• Web Componentsは昨今のWebアプリケー
ション開発に対する、とても素敵なアプ
ローチ
– Web Components周りの仕様は、Googleだけで
なく、Mozilla、Microsoft、Adobe等も関わって
...
参考リンク
• Web Components普及の夜明け!?Polymer.jsを試し
てみた。 | OpenWeb
– http://openweb.co.jp/2013/05/17/web-
components%E6%99%AE%E5%8...
ご清聴ありがとうございまし
た!
19
http://www.flickr.com/photos/94727112@N05/8905240167
Upcoming SlideShare
Loading in...5
×

Polymerで先取り☆Web Components

2,290

Published on

社内勉強会でWeb ComponentsとPolymerについて発表した時の資料です

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

No Downloads
Views
Total Views
2,290
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "Polymerで先取り☆Web Components"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×