Polymerで先取り☆Web Components
Upcoming SlideShare
Loading in...5
×
 

Polymerで先取り☆Web Components

on

  • 2,577 views

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

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

Statistics

Views

Total Views
2,577
Views on SlideShare
2,558
Embed Views
19

Actions

Likes
9
Downloads
9
Comments
0

2 Embeds 19

https://twitter.com 14
http://tweetedtimes.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Polymerで先取り☆Web Components Polymerで先取り☆Web Components Presentation Transcript

  • 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に対して、装飾 や操作を行なっている – 影響範囲はページ全体におよぶ • そして起こるあれやこれや… – CSSを修正したら、想定外にレイアウトが崩れ た – 新しくHTMLを追加したら、変なレイアウトに なった – 他のページにコピペしても、なぜか同じレイ アウトにならない 3
  • おかしい…こんなことに 時間を割いている状況はおかしい… 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. 完全に名前空間が切り離され、ページ内の他の スタイルに影響しない・されない 2. 再利用が簡単になる 1. 使いたいページにimportして、カスタムタグとし て利用する 8
  • 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
  • えっ…じゃあまだ使えないん じゃ… 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.js) – Web Componentsの仕様を先行実装しつつ、そ こで得たナレッジをWeb Componentsの仕様と 実装(Chrome)にフィードバックしている – 仕様と実装を育てるライブラリ 13
  • 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
  • デモ 百聞は一見にしかず 15
  • まとめ 時間おさまってるかな… 16
  • まとめ • Web Componentsは昨今のWebアプリケー ション開発に対する、とても素敵なアプ ローチ – Web Components周りの仕様は、Googleだけで なく、Mozilla、Microsoft、Adobe等も関わって いる – まだまだ道のりは長そうだけど、志は皆同じ • Polymerを通じて、仕様策定に協力できる かも…! 17
  • 参考リンク • 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
  • ご清聴ありがとうございまし た! 19 http://www.flickr.com/photos/94727112@N05/8905240167