SlideShare a Scribd company logo
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

More Related Content

What's hot

C# でブラウザ操作
C# でブラウザ操作C# でブラウザ操作
C# でブラウザ操作
ytanno
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
SwapSkills
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩Atsushi Tadokoro
 
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 真乙 九龍
 
201605 fa勉強会スライド
201605 fa勉強会スライド201605 fa勉強会スライド
201605 fa勉強会スライド
秀平 高橋
 
201605 FA勉強会 seleniumスライド
201605 FA勉強会 seleniumスライド201605 FA勉強会 seleniumスライド
201605 FA勉強会 seleniumスライド
秀平 高橋
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
 
LESS楽しいれす(^q^)
LESS楽しいれす(^q^) LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
taiju higashi
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
Hideki MACHIDA
 

What's hot (12)

C# でブラウザ操作
C# でブラウザ操作C# でブラウザ操作
C# でブラウザ操作
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
 
HTML
HTMLHTML
HTML
 
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
 
201605 fa勉強会スライド
201605 fa勉強会スライド201605 fa勉強会スライド
201605 fa勉強会スライド
 
201605 FA勉強会 seleniumスライド
201605 FA勉強会 seleniumスライド201605 FA勉強会 seleniumスライド
201605 FA勉強会 seleniumスライド
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
LESS楽しいれす(^q^)
LESS楽しいれす(^q^) LESS楽しいれす(^q^)
LESS楽しいれす(^q^)
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
 
Less
LessLess
Less
 

Viewers also liked

John lenon
John lenonJohn lenon
John lenon
John Michael
 
Lenon
LenonLenon
Lenon
Nihao
 
Maori Art And Architecture
Maori Art And ArchitectureMaori Art And Architecture
Maori Art And Architecture
missdaff
 
Text Message Experiments 2008
Text Message Experiments 2008Text Message Experiments 2008
Text Message Experiments 2008
Chris Kennedy
 
bassem youssef
bassem youssefbassem youssef
bassem youssef
Bassem Youssef
 
Pago Ayles Linkedin
Pago Ayles   LinkedinPago Ayles   Linkedin
Pago Ayles Linkedin
FELIX MORENO
 

Viewers also liked (6)

John lenon
John lenonJohn lenon
John lenon
 
Lenon
LenonLenon
Lenon
 
Maori Art And Architecture
Maori Art And ArchitectureMaori Art And Architecture
Maori Art And Architecture
 
Text Message Experiments 2008
Text Message Experiments 2008Text Message Experiments 2008
Text Message Experiments 2008
 
bassem youssef
bassem youssefbassem youssef
bassem youssef
 
Pago Ayles Linkedin
Pago Ayles   LinkedinPago Ayles   Linkedin
Pago Ayles Linkedin
 

Similar to Polymerで先取り☆Web Components

_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_Kelly Holonic
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
 
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回 【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
schoowebcampus
 
WebComponentsとPolymer
WebComponentsとPolymerWebComponentsとPolymer
WebComponentsとPolymer
Takahiro Maki
 
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~はじめよう!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-partMTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
bitpart
 
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
Yuki Ito
 

Similar to Polymerで先取り☆Web Components (7)

_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginners
 
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回 【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
【再放送】HTMLとCSSを使って、150分で簡単なWEBサイト制作全6回
 
WebComponentsとPolymer
WebComponentsとPolymerWebComponentsとPolymer
WebComponentsとPolymer
 
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~はじめよう!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-partMTDDC Meetup TOKYO 2015 bit-part
MTDDC Meetup TOKYO 2015 bit-part
 
みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発みんなのコンポーネント志向 Web開発
みんなのコンポーネント志向 Web開発
 

Recently uploaded

ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 

Recently uploaded (9)

ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 

Polymerで先取り☆Web Components