SlideShare a Scribd company logo
Submit Search
Upload
Login
Signup
Web Component概要
Report
Shumpei Shiraishi
Follow
代表取締役 at 株式会社オープンウェブ・テクノロジー
Oct. 23, 2012
•
0 likes
•
14,361 views
1
of
54
Web Component概要
Oct. 23, 2012
•
0 likes
•
14,361 views
Download Now
Download to read offline
Report
Technology
Web Componentに関する概要スライドです。
Shumpei Shiraishi
Follow
代表取締役 at 株式会社オープンウェブ・テクノロジー
Recommended
jQuery Mobile 最新情報 & Tips
yoshikawa_t
4.9K views
•
71 slides
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
51.1K views
•
63 slides
jQuery Mobile 1.3 最新情報
yoshikawa_t
14.4K views
•
44 slides
DOM Scripting & jQuery
smallworkshop
855 views
•
29 slides
Vue Router + Vuex
Kei Yagi
2.5K views
•
49 slides
Magento meet up Tokyo#1 for Design
Miho Nakano
4.1K views
•
33 slides
More Related Content
What's hot
はじめてのVue.js
Kei Yagi
2.4K views
•
48 slides
jQuery Mobileの基礎
Takashi Okamoto
3.1K views
•
35 slides
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
12.1K views
•
53 slides
SocialWeb Conference vol.5 OpenSocial Night #2
Nobuhiro Nakajima
1.4K views
•
41 slides
0406web creators night_DeNA
DeNA_open_events
1.1K views
•
21 slides
Google App Engine for Java
Takuya Tsuchida
5.5K views
•
67 slides
What's hot
(18)
はじめてのVue.js
Kei Yagi
•
2.4K views
jQuery Mobileの基礎
Takashi Okamoto
•
3.1K views
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
Kei Yagi
•
12.1K views
SocialWeb Conference vol.5 OpenSocial Night #2
Nobuhiro Nakajima
•
1.4K views
0406web creators night_DeNA
DeNA_open_events
•
1.1K views
Google App Engine for Java
Takuya Tsuchida
•
5.5K views
WordPressとjQuery
Seto Takahiro
•
3.3K views
Twitter連携chrome extension作り方
Hiroshi Oyamada
•
2.9K views
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
•
3.4K views
20120118 titanium
Hiroshi Oyamada
•
1.9K views
TumblrTouch
Koji Ishimoto
•
2K views
Nuxt なしで Vue App 作る時に乗り越えるべき5つの壁
Yutaro Miyazaki
•
66.2K views
EWD 3トレーニングコース#14 ewd-xpressメッセージ用にAjaxを用いる
Kiyoshi Sawada
•
697 views
リアルFacebookガジェットを作った(ロングバージョン)
Mariko Goda
•
1.7K views
EWD 3トレーニングコース#14 ewd-xpressメッセージ用にAjaxを用いる
Kiyoshi Sawada
•
411 views
Jetpack Library 事始め
Tomohiro Kaizu
•
1.6K views
Jqm20120210
cmtomoda
•
1.2K views
ADRという考えを取り入れてみて
infinite_loop
•
2.8K views
Viewers also liked
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
374K views
•
194 slides
スマホデザインパターン なう
Android UI勉強会
24.5K views
•
45 slides
Webコンポーネントの話
Yusuke Hirao
3.6K views
•
21 slides
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
4.2K views
•
73 slides
Fork/Join Framework
Appresso Engineering Team
1.8K views
•
14 slides
PyPy 紹介
shoma h
8.3K views
•
82 slides
Viewers also liked
(20)
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
•
374K views
スマホデザインパターン なう
Android UI勉強会
•
24.5K views
Webコンポーネントの話
Yusuke Hirao
•
3.6K views
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
•
4.2K views
Fork/Join Framework
Appresso Engineering Team
•
1.8K views
PyPy 紹介
shoma h
•
8.3K views
EC-CUBEプラグイン講義
ria1201
•
16.9K views
Node-v0.12のTLSを256倍使いこなす方法
shigeki_ohtsu
•
25.3K views
Node-v0.12の新機能について
shigeki_ohtsu
•
26.5K views
ECMAScript没proposal追悼式
京大 マイコンクラブ
•
17.2K views
C++の話(本当にあった怖い話)
Yuki Tamura
•
27.5K views
バグハンターの哀しみ
Masato Kinugawa
•
47.9K views
Introduction to JShell: the Java REPL Tool #jjug_ccc #ccc_ab4
bitter_fox
•
23.4K views
FINAL FANTASY 零式HDにみる 新しいHDリマスター
HEXADRIVE Inc.
•
128.9K views
Bitcoinを技術的に理解する
Kenji Urushima
•
131.5K views
ES6 in Practice
Teppei Sato
•
27.3K views
You Don't Know ES Modules
Teppei Sato
•
11.2K views
CODE BLUE 2014 : バグハンターの愉しみ by キヌガワマサト Masato Kinugawa
CODE BLUE
•
25.2K views
SSL/TLSの基礎と最新動向
shigeki_ohtsu
•
56.7K views
自転車のVRシステムがあったら欲しいですか?
Chikara Tomioka
•
2.4K views
Similar to Web Component概要
Client Side Cache
Toru Yamaguchi
1.2K views
•
29 slides
Firefox DevTools
dynamis
2.6K views
•
52 slides
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Jumpei Ogawa
2.4K views
•
28 slides
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
11.3K views
•
48 slides
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
1.4K views
•
61 slides
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
6K views
•
60 slides
Similar to Web Component概要
(20)
Client Side Cache
Toru Yamaguchi
•
1.2K views
Firefox DevTools
dynamis
•
2.6K views
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Jumpei Ogawa
•
2.4K views
node+socket.io+enchant.jsでチャットゲーを作る
Kiyoshi SATOH
•
11.3K views
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
•
1.4K views
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
•
6K views
S2s websrv201011-presen
Kouhei Maeda
•
749 views
Flight入門
Toshihiro Yagi
•
2K views
ASP.NET MVC 2 ~新機能の紹介~
Yoshitaka Seo
•
36K views
Seasarプロジェクト徹底攻略
takezoe
•
5.2K views
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
•
1.2K views
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
•
5.4K views
Inside mobage platform
Toru Yamaguchi
•
3K views
OSC京都2011
haganemetal
•
2.5K views
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
•
1.9K views
HTML5
smallworkshop
•
410 views
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
•
1.5K views
Chrome拡張機能の作りかた
aozou99
•
394 views
2005 07 30_xwj_customizinig
Tom Hayakawa
•
442 views
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
•
2.3K views
More from Shumpei Shiraishi
俺的GEB概論(前半)
Shumpei Shiraishi
2K views
•
27 slides
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
16.2K views
•
58 slides
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
4.2K views
•
80 slides
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
39.9K views
•
58 slides
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
5.5K views
•
40 slides
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
1.7K views
•
9 slides
More from Shumpei Shiraishi
(20)
俺的GEB概論(前半)
Shumpei Shiraishi
•
2K views
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
•
16.2K views
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
•
4.2K views
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
•
39.9K views
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
•
5.5K views
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
•
1.7K views
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
•
1.4K views
Angular2実践入門
Shumpei Shiraishi
•
37.8K views
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
•
2.8K views
変身×フランツ・カフカ
Shumpei Shiraishi
•
1.6K views
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
•
1.6K views
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
•
3.1K views
漫☆画太郎論
Shumpei Shiraishi
•
85.1K views
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
•
3K views
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
•
9.3K views
はじめにことばありき
Shumpei Shiraishi
•
2K views
秒速一億円
Shumpei Shiraishi
•
2.7K views
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
•
3.2K views
この人と結婚していいの?を読んで
Shumpei Shiraishi
•
2.1K views
20130921レジュメ2
Shumpei Shiraishi
•
1.8K views
Recently uploaded
20230921_IoTLT_vol103_kitazaki_v1.pdf
Ayachika Kitazaki
140 views
•
16 slides
CatBoost on GPU のひみつ
Takuji Tahara
421 views
•
30 slides
松下研究室紹介_関西大学高槻キャンパスオープンキャンパス
Matsushita Laboratory
26 views
•
23 slides
GraphQLはどんな時に使うか
Yutaka Tachibana
6 views
•
37 slides
2023情報処理学会関西支部大会-G12.pdf
KoseiShimoda1
6 views
•
11 slides
CCoE実践者コミュニティ#1_CCoEが進めるセキュリティカイゼンの旅.pptx
Tomoaki Tada
26 views
•
20 slides
Recently uploaded
(10)
20230921_IoTLT_vol103_kitazaki_v1.pdf
Ayachika Kitazaki
•
140 views
CatBoost on GPU のひみつ
Takuji Tahara
•
421 views
松下研究室紹介_関西大学高槻キャンパスオープンキャンパス
Matsushita Laboratory
•
26 views
GraphQLはどんな時に使うか
Yutaka Tachibana
•
6 views
2023情報処理学会関西支部大会-G12.pdf
KoseiShimoda1
•
6 views
CCoE実践者コミュニティ#1_CCoEが進めるセキュリティカイゼンの旅.pptx
Tomoaki Tada
•
26 views
gtk4_gem_usage.pdf
ssuser0ef4681
•
14 views
遠隔お酌IoTLT2309.pptx
Yoshiaki Ito
•
121 views
IGDA Japan SIG Audio #20-1 室内・野外でのマイク収録と整音.pdf
IGDA Japan SIG-Audio
•
103 views
テスト自動化.pdf
ssuserf8ea02
•
23 views
Web Component概要
1.
Web Components概要 2012/10/20 株式会社シーエー・モバイル Web先端技術フェロー 白石俊平(@Shumpei)
2.
自己紹介 白石俊平と申します。 コミュニティhtml5.org管理人(会員数5000名超) HTML5とか勉強会主催(毎月一回、100名を動員) Google API Expert
(HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei
3.
今日のアジェンダ Web Componentsとは何か? Web Componentsの構成要素
テンプレート デコレータ カスタム要素 Shadow DOM Web ComponentsはWebをどう変えるか?
4.
Web Componentsとは何か? →WebのUIを「コンポーネント 化」するための仕様群である。
5.
Webには、 コンポーネント 化が必要だ。
6.
メンテナンス性 Webには、 コンポーネント
再利用性 化が必要だ。 開発効率
7.
Web Components概要 Googleによって仕様提案 2012/10現在、Google Chromeが一部を実装済み 一部の仕様が公式のドラフトとして公開
→一般的に使えるようになるにはまだ時間がかか りそう
8.
Web Componentsの構成要素 Web Componentsを構成する4つの要素
テンプレート デコレータ カスタム要素 Shadow DOM
9.
HTMLテンプレート
10.
HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート DOM操作
11.
HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート
DOMを考慮しない 非標準 DOM操作 <script id="tmpl1" type="text/x-handlebars-template"> <div>...</div> </script>
12.
HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート
DOM操作 コードが書きにくい 結果が予想しづらい var div = document.getElementById('...'); div.setAttribute('key', 'value'); var p = document.createElement('p'); p.innerHTML = '...'; div.appendChild(p);
13.
HTMLテンプレート 現在、JavaScriptでUIをいじくる方法は2つある。 文字列テンプレート
XSSの危険性 HTMLテンプレートで DOM操作 解決! コードが書きにくい 結果が予想しづらい
14.
HTMLテンプレートの定義方法 <template>要素を使用する。
<template>内に、通常通りHTMLを記述する <template>はレンダリングされない <body>, <head>に定義 <html> <head> <template id="t"> <div id="message"></div> </template> </head> <body></body> </html>
15.
HTMLテンプレートを使用する contentプロパティから、内部のDOMを取得する。 <template id="t">
<div id="message"></div> </template> var tmplElem = document.getElementById('t'); var tmpl = tmplElem.content.cloneNode(); … elem.appendChild(tmpl);
16.
HTMLテンプレート ぶっちゃけ、これだけじゃ全然便利じゃない。 デコレータ、カスタム要素で使用される汎用要 素と理解すべき。 「テンプレートである」というセマンティック を与えることができるのは良い。 今までの<script>要素よりは見通しが良い。 <script
type="text/x-handlbars-template"> </script>
17.
デコレータ
18.
CSSの限界を超える CSSの限界とは? DOMを操作することは
できない
19.
<ul> <li>
<i>アイコン</i> <span>自由人会議</span> <span>5</span> </li> … </ul> くらいで済みそうなものだけれ ど・・
20.
デコレータ 要素を「デコレーション」するための仕組み HTML内で定義し、CSS内で使用する
21.
デコレータの定義 <decorator>要素と<template>要素を使用して定 義する。 <decorator id="labelDecorator">
<template> ラベル: </template> </decorator>
22.
デコレータの使用
CSS内で、decoratorプロパティを使って要素に 指定する。 /* 全てのlabel要素が「ラベル:」となる */ label { decorator: url(#labelDecorator); } <label for="name"> お名前 </label> <input id="name">
23.
デコレータの使用
テンプレート内で<content>要素を使用して、要 素内容を挿入する箇所を指定できる。 <decorator id="labelDecorator"> <template> <!-- ここに、要素内容が挿入される --> <content></content>: </template> </decorator> <label for="name"> お名前 </label> <input id="name">
24.
複数の<content>要素を指定する <content>は複数指定できる。 select属性を用いて、要素内容の一部を抜きだし て挿入できる。 <decorator id="fieldRowDecorator">
<template> <div> <!-- ここに、要素内容が挿入される --> <content select="label"></content>: </div> <!-- 残りの要素はここに挿入される --> <div id="field"><content></content></div> </template> </decorator>
25.
複数の<content>要素を指定する
/* ラベルとフィールドの組み合わせ */ .fieldRow { decorator: url(#fieldDecorator); } <div class="fieldRow"> <label for="name"> お名前 </label> <input id="name"> </div>
26.
Advanced: デコレータのスタイリング スコープ付きのstyle要素を使用する。 <decorator id="fieldRowDecorator">
<template> <style scoped>...</style> … </template> </decorator>
27.
Advanced: デコレータ内のイベント処理
デコレータは、listen()というメソッドを使用してイベント ハンドラを登録する デコレータのコードが実行されるのは、ロード時に一度き り <decorator id="decorator-event-demo"> <script> function h(event) { alert(event.target); } this.listen( {selector: "#b", type: "click", handler: h}); </script> <template> <content></content> <button id="b">Bar</button> </template> </decorator>
28.
デコレータ あくまで表示目的の機能である。 Shadow DOM(後述)は持たない
デコレータで定義されたDOMには、アクセスす る手段がない スタイリング目的の余計なマークアップを劇的 に減らすことができるため、非常に強力
29.
カスタム要素
30.
カスタム要素とは? 要素を自作できる!!!!
31.
カスタム要素の定義 <element>要素を使用する name属性に要素名を指定する 自作要素には「x-」という接頭辞をつけなくては
ならない extends属性に、継承元の要素を指定する <element name="x-fancybutton" extends="button"> <template> <!-- デコレータと同様 --> … </template> </element>
32.
カスタム要素の使用 要素にis属性を指定して、カスタム要素の名称を 指定する。 対象となる要素は、カスタム要素のextendsと一 致している必要がある <button is="x-fancybutton">
<span>ボタン</span> </button>
33.
Advanced: カスタム要素のインスタンス化 カスタム要素は通常の要素と同じく、 document.createElement()でインスタンス化でき る var e
= document.createElement('x-fancybutton'); constructor属性で、コンストラクタを生成させ ることも可能 <element name="x-fancybutton" extends="button" constructor="FancyButton">...</element> var fancyButton = new FancyButton();
34.
Advanced: カスタム要素のクラス定義 コンストラクタのプロトタイプを変更して、要 素独自の振る舞いを追加する。 <element ...
constructor="FancyButton"> <script> FancyButton.prototype.razzle = ... // constructor属性を使用しない場合は // 以下のコードでコンストラクタにアクセス // var FancyButton = this.generatedConstructor; </script> ... </element>
35.
Advanced: カスタム要素のライフサイクル カスタム要素は、以下の様なライフサイクルイベントを捕 捉して処理を行える。 created
attributeChanged inserted removed <element extends="time" name="x-clock"> <script> this.lifecycle({ inserted: function(){ this.startUpdatingClock(); }, removed: function() { this.stopUpdatingClock(); } }); </script> </element>
36.
Shadow DOM
37.
Shadow DOMとは? 開発者の目から隠されたDOMツリー 複雑な内部構造を隠蔽し、シンプルなDOMに見 せかけることができる(=カプセル化)。
38.
Shadow DOMの実装状況 Google ChromeにはShadow
DOMが実装されて いる。 標準的な要素の多くが、Shadow DOMで実装さ れている。 video/audio/textarea/details/input...
39.
Shadow DOMを「見る」 chrome://flagsにて、以下のフラグをオンにする。 Shadow
DOMを有効にする <style scoped>を有効にする Shadow DOMを自分で使うためには必要 デベロッパーツールのテストを有効にする Shadow DOMの内容を開発者ツールで見るために 必要
40.
Shadow DOMを見る 標準的な要素が、Shadow DOMによって構築さ れていることを確認する。
41.
Advanced: Shadow DOMの動作を理解する Shadow DOMを使用した要素(Shadow
Host) の「内側」には、2つのDOMツリーがある。 カスタム要素の定義 <element name="x-fancybutton" に含まれるDOMツ extends="button"> リー。 <template> こちらのツリーは開 <content></content> 発者の目に見えない。 <div>...</div> (Shadow DOM) </template> </element> カスタム要素内に入 れ子にしたDOMツ <button is="x-fancybutton"> リー。 <span>ボタン</span> こちらのツリーは、 </button> Shadow DOMに取っ て代わられる
42.
Advanced: Shadow DOMの動作を理解する 二種類のDOMツリー
43.
Advanced: Shadow DOMの動作を理解する Shadow DOMに差し替えられる
44.
Advanced:
Shadow DOMの動作を理解する 元のDOMツリーは、<content>要素の位置に挿入 される <element name="x-fancybutton" extends="button"> <template> <content></content> <button is="x-fancybutton"> <div>...</div> <span>ボタン</span> </template> <div>...</div> </element> </button> <button is="x-fancybutton"> <span>ボタン</span> </button>
45.
Advanced: Shadow DOMを使う Chrome上では既に、Shadow
DOMのAPIが利用 可能となっている。 WebKitShadowRootを用いて、任意の要素を Shadow Hostにすることができる。
46.
Advanced:
Shadow DOMを使う 以下のコードを、Shadow DOM APIを使用して 整形する。 <!DOCTYPE html> <div id="shadowHost"> もともとあったDOMツリー </div> <div id="shadowSubtree"> <style scoped> #origTree { color: red; } </style> <h1>Shadow DOM Subtree</h1> <div id="origTree"> <content></content> </div> </div>
47.
Advanced:
Shadow DOMを使う // Shadow Hostとなる要素を取得 var shadowHost = document.getElementById('shadowHost'); // Shadow Hostに変換 // この時点で、元のDOMツリーは一旦非表示に var shadowRoot = new WebKitShadowRoot(shadowHost); // Shadow DOM サブツリーになる要素 var shadowSubtree = document.getElementById('shadowSubtree'); // Shadow DOM サブツリーとして指定 // 表示されるのはこちらの要素になる。 // <content>要素の部分に、もとのDOMツリーが表示される shadowRoot.appendChild(shadowSubtree);
48.
Web Componentsは Webをどう変えるか?
49.
UIフレームワークの
利用方法が統一 $('#list').somelist(); <ul data-role="listview"> <ul is="x-somelist"> </ul> </ul> <ul dojoType="x.y.SomeList"> </ul>
50.
外部コンポーネントの
読み込み link要素を用いて、外部コンポーネントを読み込 むことができる。 <link rel="components" href="URL"> CDNによるコンポーネント配信な どが期待できる!
51.
Web UI開発の分業が可能に
コンポーネント利用者 (ロースキル) HTMLマークアップ CSSスタイリング コンポーネント開発者 (ハイスキル) HTML/CSS/JSを駆使したコンポーネント開発 開発標準策定 サードパーティコンポーネントの選定など
52.
よりセマンティックな マークアップに 複雑なマークアップをカプセル化することで、 よりシンプルでセマンティックなマークアップ に。
<textarea is="x-tweetbox" placeholder="ツイートする"> </textarea>
53.
WebComponentsには注目! 数年後のHTMLマークアップは、今とは全く違う ものになっているかも? いつまでも泥臭かったHTMLフロントエンド開発 を、洗練されたものに。
54.
ご清聴ありがとうございました。
Follow me @Shumpei