HTML5入門 for 頭がヤバい人

HTML5 Night 2014/6/14

about me

AngularJS Japan User Group 管理人 html5j Web先端技術味見部 部長

金井 健一 フリーランス フロントエンド方面のお仕事

can_i_do_web facebook/can.i.do.web

HTML5入門 for 頭がヤバい人

if( HTML5入門 && 頭がヤバい人 ){ // success

return awesomeThings; } else {

// error case. return null;

}

if( HTML5入門 && 頭がヤバい人 ){ // ここ通る気がしない

return awesomeThings; } else {

// 全部こっちでしょ？ return null;

}

ありませんっ！

一旦ちょっと落ち着く

残り3分位でわかった気になる Web Components

HTML5 Night 2014/6/14

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

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>

　+ Your CSS & JavaScript

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

Web Components contains ...

• Templates • Decorator • Custom Elements • Shadow DOM •  Imports

Templates

<template> <input type=“text”> <button>ボタン</button> </template>

Templates テンプレートをhtml上に書いておける。

<template>タグ内の...

• DOMはレンダリングされない • <img>タグなどからはリクエストを送信しない

WhatWG HTML Templates 仕様

必要なタイミングでインスタンス化して利用する

Custom Elements

• <x-calendar></x-calendar>

• <x-tweet-button></x-tweet-button>

• <x-awesome-button></x-awesome-button>

Custom Elements

• 独自でタグを定義できる

• 既存のhtml要素を拡張できる •  ex) button や input 要素

Shadow DOM

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

Shadow DOM

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

Imports

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

Imports

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

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

しっかり知りたい人は •  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

ご一読くださいませ

Thank you.