#htmlday でのLT資料です

1. HTML5入門
for 頭がヤバい人
HTML5 Night
2014/6/14

2. about me
AngularJS Japan User Group 管理人
html5j Web先端技術味見部 部長
金井 健一
フリーランス
フロントエンド方面のお仕事
can_i_do_web
facebook/can.i.do.web

4. HTML5入門 for 頭がヤバい人

5. if( HTML5入門 && 頭がヤバい人 ){
// success
return awesomeThings;
} else {
// error case.
return null;
}

6. if( HTML5入門 && 頭がヤバい人 ){
// ここ通る気がしない
return awesomeThings;
} else {
// 全部こっちでしょ？
return null;
}

7. ありませんっ！

8. 一旦ちょっと落ち着く

10. 残り3分位でわかった気になる
Web Components
HTML5 Night
2014/6/14

11. Caution
わかった気になるだけです
• 「∼っぽい」
• 「∼風」
• 「∼的な」
あたりを無駄に乱用していくっぽいです！

12. Web Components is ...
ネイティブの機能でUIコンポーネントを作る
<x-tab>
<x-tab-contents></x-tab-contents>
<x-tab-contents></x-tab-contents>
<x-tab-contents></x-tab-contents>
</x-tab>

15. + Your CSS & JavaScript

16. それぞれが干渉することを
意識しないといけない

17. Web Components contains ...
• Templates
• Decorator
• Custom Elements
• Shadow DOM
• Imports

18. Templates
<template>
<input type= text >
<button>ボタン</button>
</template>

19. Templates
テンプレートをhtml上に書いておける。
<template>タグ内の...
• DOMはレンダリングされない
• <img>タグなどからはリクエストを送信しない
WhatWG HTML Templates 仕様
必要なタイミングでインスタンス化して利用する

20. Custom Elements
• <x-calendar></x-calendar>
• <x-tweet-button></x-tweet-button>
• <x-awesome-button></x-awesome-button>

21. Custom Elements
• 独自でタグを定義できる
• 既存のhtml要素を拡張できる
• ex) button や input 要素

22. Shadow DOM
• DOMツリーのカプセル化が目的
• コンポーネントを利用する側のCSSの影響を受け
ない

23. Shadow DOM
これ以上はとりあえず知らなくていいと思う

24. Imports
<link rel="import
href="http://example.com/elements.html">

25. Imports
• 誰かが作ったコンポーネントを利用できる
• （作りにもよるけど）CSSは基本干渉しない
• すでに配布しているサイトもある
• customelements.io

26. わかった気になったでしょ？

27. しっかり知りたい人は
• http://blog.agektmr.com/2014/05/web-components.html
• https://github.com/w3c/webcomponents
• http://www.whatwg.org/specs/web-apps/current-work/multipage/
scripting-1.html#the-template-element
• http://www.w3.org/TR/components-intro/
• http://www.w3.org/standards/techs/components#w3c_all
ご一読くださいませ

28. Thank you.