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