HTML5入門 for 頭がヤバい人向け

5,038 views

Published on

#htmlday でのLT資料です

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,038
On SlideShare
0
From Embeds
0
Number of Embeds
1,716
Actions
Shares
0
Downloads
6
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

HTML5入門 for 頭がヤバい人向け

  1. 1. HTML5入門 for 頭がヤバい人 HTML5 Night 2014/6/14
  2. 2. about me AngularJS Japan User Group 管理人 html5j Web先端技術味見部 部長 金井 健一 フリーランス フロントエンド方面のお仕事 can_i_do_web facebook/can.i.do.web
  3. 3. HTML5入門 for 頭がヤバい人
  4. 4. if( HTML5入門 && 頭がヤバい人 ){ // success return awesomeThings; } else { // error case. return null; }
  5. 5. if( HTML5入門 && 頭がヤバい人 ){ // ここ通る気がしない return awesomeThings; } else { // 全部こっちでしょ? return null; }
  6. 6. ありませんっ!
  7. 7. 一旦ちょっと落ち着く
  8. 8. 残り3分位でわかった気になる Web Components HTML5 Night 2014/6/14
  9. 9. Caution わかった気になるだけです • 「∼っぽい」 • 「∼風」 • 「∼的な」 あたりを無駄に乱用していくっぽいです!
  10. 10. 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>
  11. 11.  + Your CSS & JavaScript
  12. 12. それぞれが干渉することを 意識しないといけない
  13. 13. Web Components contains ... • Templates • Decorator • Custom Elements • Shadow DOM • Imports
  14. 14. Templates <template> <input type= text > <button>ボタン</button> </template>
  15. 15. Templates テンプレートをhtml上に書いておける。 <template>タグ内の... • DOMはレンダリングされない • <img>タグなどからはリクエストを送信しない WhatWG HTML Templates 仕様 必要なタイミングでインスタンス化して利用する
  16. 16. Custom Elements • <x-calendar></x-calendar> • <x-tweet-button></x-tweet-button> • <x-awesome-button></x-awesome-button>
  17. 17. Custom Elements • 独自でタグを定義できる • 既存のhtml要素を拡張できる •  ex) button や input 要素
  18. 18. Shadow DOM • DOMツリーのカプセル化が目的 • コンポーネントを利用する側のCSSの影響を受け ない
  19. 19. Shadow DOM これ以上はとりあえず知らなくていいと思う
  20. 20. Imports <link rel="import href="http://example.com/elements.html">
  21. 21. Imports • 誰かが作ったコンポーネントを利用できる • (作りにもよるけど)CSSは基本干渉しない • すでに配布しているサイトもある •  customelements.io
  22. 22. わかった気になったでしょ?
  23. 23. しっかり知りたい人は •  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 ご一読くださいませ
  24. 24. Thank you.

×