Submit Search
Upload
Polymerで先取り☆Web Components
•
12 likes
•
3,220 views
Mayu Kimura
Follow
社内勉強会でWeb ComponentsとPolymerについて発表した時の資料です
Read less
Read more
Technology
Report
Share
Report
Share
1 of 20
Download now
Download to read offline
Recommended
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
Atsushi Tadokoro
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
Excel 方眼紙にさよならを。
Excel 方眼紙にさよならを。
Atsuko MATSUOKA
Html講習会資料
Html講習会資料
竹島 泉
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
Recommended
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
情報編集 (web) 第2回:HTML入門
情報編集 (web) 第2回:HTML入門
Atsushi Tadokoro
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
Excel 方眼紙にさよならを。
Excel 方眼紙にさよならを。
Atsuko MATSUOKA
Html講習会資料
Html講習会資料
竹島 泉
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
C# でブラウザ操作
C# でブラウザ操作
ytanno
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML
HTML
Jun Chiba
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
真乙 九龍
201605 fa勉強会スライド
201605 fa勉強会スライド
秀平 高橋
201605 FA勉強会 seleniumスライド
201605 FA勉強会 seleniumスライド
秀平 高橋
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
Less
Less
kuma2515
John lenon
John lenon
John Michael
Lenon
Lenon
Nihao
Maori Art And Architecture
Maori Art And Architecture
missdaff
Text Message Experiments 2008
Text Message Experiments 2008
Chris Kennedy
bassem youssef
bassem youssef
Bassem Youssef
Pago Ayles Linkedin
Pago Ayles Linkedin
FELIX MORENO
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
Web Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
schoowebcampus
WebComponentsとPolymer
WebComponentsとPolymer
Takahiro Maki
More Related Content
What's hot
C# でブラウザ操作
C# でブラウザ操作
ytanno
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML
HTML
Jun Chiba
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
真乙 九龍
201605 fa勉強会スライド
201605 fa勉強会スライド
秀平 高橋
201605 FA勉強会 seleniumスライド
201605 FA勉強会 seleniumスライド
秀平 高橋
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
Less
Less
kuma2515
What's hot
(12)
C# でブラウザ操作
C# でブラウザ操作
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
HTML
HTML
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
201605 fa勉強会スライド
201605 fa勉強会スライド
201605 FA勉強会 seleniumスライド
201605 FA勉強会 seleniumスライド
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Less
Less
Viewers also liked
John lenon
John lenon
John Michael
Lenon
Lenon
Nihao
Maori Art And Architecture
Maori Art And Architecture
missdaff
Text Message Experiments 2008
Text Message Experiments 2008
Chris Kennedy
bassem youssef
bassem youssef
Bassem Youssef
Pago Ayles Linkedin
Pago Ayles Linkedin
FELIX MORENO
Viewers also liked
(6)
John lenon
John lenon
Lenon
Lenon
Maori Art And Architecture
Maori Art And Architecture
Text Message Experiments 2008
Text Message Experiments 2008
bassem youssef
bassem youssef
Pago Ayles Linkedin
Pago Ayles Linkedin
Similar to Polymerで先取り☆Web Components
_HTML5で組んでみた_
_HTML5で組んでみた_
Kelly Holonic
Web Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
schoowebcampus
WebComponentsとPolymer
WebComponentsとPolymer
Takahiro Maki
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
満徳 関
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
bitpart
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Yuki Ito
Similar to Polymerで先取り☆Web Components
(7)
_HTML5で組んでみた_
_HTML5で組んでみた_
Web Site Optimization for Beginners
Web Site Optimization for Beginners
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
WebComponentsとPolymer
WebComponentsとPolymer
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
MTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Recently uploaded
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
Recently uploaded
(9)
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
Polymerで先取り☆Web Components
1.
Polymerで 先取り☆Web Components 株式会社オープンストリーム 木村茉由
2.
アジェンダ 1. HTML/CSS/JavaScriptの問題 2. Web
Componentsとは 3. Polymerの紹介 4. デモ 5. まとめ 1
3.
HTML/CSS/JAVASCRIPTの問題 涙で前が見えません…。 2
4.
HTML/CSS/JavaScriptの問題 • HTML/CSS/JavaScriptは、常に同一空間>< – 1つの空間の中で、同じHTMLに対して、装飾 や操作を行なっている –
影響範囲はページ全体におよぶ • そして起こるあれやこれや… – CSSを修正したら、想定外にレイアウトが崩れ た – 新しくHTMLを追加したら、変なレイアウトに なった – 他のページにコピペしても、なぜか同じレイ アウトにならない 3
5.
おかしい…こんなことに 時間を割いている状況はおかしい… 4 http://www.flickr.com/photos/50046488@N05/6206566758
6.
そこでWeb Components! 5
7.
WEB COMPONENTSとは コンポーネント化万歳! 6
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
11.
えっ…じゃあまだ使えないん じゃ… 10 http://www.flickr.com/photos/26667277@N00/9108416093
12.
使えます!そう、Polymerなら ね! 11
13.
POLYMERの紹介 未来を未来のままにしない 12
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=”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
17.
まとめ 時間おさまってるかな… 16
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
20.
ご清聴ありがとうございまし た! 19 http://www.flickr.com/photos/94727112@N05/8905240167
Download now