2014/09/09に開催した「エンタープライヤーのためのWeb Componentsハンズオン〜Web ComponentsでWeb名刺を作ろう！〜」の資料です。 イベントサイト https://atnd.org/events/55761 ハンズオン資料 https://github.com/html5bizj/x-business-card

1. エンタープライヤーのための
Web Componentsハンズオン
2014/09/09
html5jエンタープライズ部
小川充(@mitsuruog)
～Web ComponentsでWeb名刺を作ろう！～

2. ハンズオンの流れ
時間内容
19:30～19:45 会場説明とWeb Componentsの話
19:45～20:00 1.準備
20:00～20:30 2. Web ComponentsでHello World
20:30～20:45 3. Web名刺を作成
20:45～21:00 4. Web名刺をデコレーション
21:00～21:20 5.配布&名刺交換タイム
21:20～21:30 クロージング&片付け

3. Web Componentsとは
UI部品の「コンテナ」化。
コンテナ化したUI部品がWeb開発に「流通革命」を起こす。

4. Web Componentsとは
UI部品の「コンテナ」化。
コンテナ化したUI部品がWeb開発に「流通革命」を起こす。
コンテナ化
省力化・高速化・コスト減・統一規格
http://en.wikipedia.org/wiki/Stevedore
http://en.wikipedia.org/wiki/Double-stack_rail_transport

5. Web Componentsとは
UI部品の「コンテナ」化。
コンテナ化したUI部品がWeb開発に「流通革命」を起こす。
コンテナ化
省力化・高速化・コスト減・統一規格
http://en.wikipedia.org/wiki/Stevedore
http://en.wikipedia.org/wiki/Double-stack_rail_transport
スクラッチ開発
コンテナ化されたUI部品を
組み合わせて開発
コンテナ化

6. Web Componentsを構成する要素
Web Componentsは大きく4つのテクノロジー(仕様)で構成されている。

7. Web Componentsを構成する要素
Web Componentsは大きく4つのテクノロジー(仕様)で構成されている。
1. Custom Elements
• 独自タグを作る
2. Template
• Componentsのマークアップの塊をつくる
3. Shadow DOM
• 独自タグの内部構造をカプセル化する
4. HTML Imports
• 独自タグを使いたいページで使う

8. Web Components各ブラウザサポート
ChromeとFirefoxが先行。
http://jonrimmer.github.io/are-we-componentized-yet/

9. Web Components polyfillライブラリ
http://webcomponents.org/

10. Web Componentsを「花の種」で理解する
Web Componentsは未来のWeb開発を華々しくする花

11. Web Componentsを「花の種」で理解する
Web Componentsは未来のWeb開発を華々しくする花
設計図
(Template)
種の外皮
(Custom Elements)

12. Web Componentsを「花の種」で理解する
Web Componentsは未来のWeb開発を華々しくする花
設計図
(Template)
種の外皮
(Custom Elements)
種をまく
(HTML import)

13. Web Componentsを「花の種」で理解する
Web Componentsは未来のWeb開発を華々しくする花
設計図
(Template)
種の外皮
(Custom Elements)
種をまく
(HTML import)
インスタンス化

14. Web Componentsを「花の種」で理解する
Web Componentsは未来のWeb開発を華々しくする花
根を張る
(Shadow DOM)
設計図
(Template)
種の外皮
(Custom Elements)
種をまく
(HTML import)
インスタンス化

15. Web Componentsを「花の種」で理解する
Web Componentsは未来のWeb開発を華々しくする花
根を張る
(Shadow DOM)
設計図
(Template)
種の外皮
(Custom Elements)
種をまく
(HTML import)
インスタンス化

16. さぁ、Web Componentsの流通革命に備えよう！
種をつくる側になるか・・・
種問屋になるか・・・
種をうまく使う側になるか・・・
それとも・・・
この流れを無視して鎖国するか・・・

17. ハンズオンの流れ
時間内容
19:30～19:45 会場説明とWeb Componentsの話
19:45～20:00 1.準備
20:00～20:30 2. Web ComponentsでHello World
20:30～20:45 3. Web名刺を作成
20:45～21:00 4. Web名刺をデコレーション
21:00～21:20 5.配布&名刺交換タイム
21:20～21:30 クロージング&片付け

18. 名刺交換
「#html5biz」のハッシュタグを付けてTweetしてください。
#html5biz 名刺交換してください！ <あなたのURL>