HTML5最新動向

HTML5最新動向
白石俊平 @Shumpei

• 株式会社オープンウェブ・テクノロジー代表
• シーエー・モバイル株式会社 Web先端技術フェ
ロー
• HTML5とか勉強会主催、html5j.org管理人
• Google API Expert (HTML5)
• Microsoft Most Valuable Professional 2011 (IE)

自己紹介

HTML5、盛り過ぎじゃない
ですか？

昨年はちょっと勉強サボ
リ気味だったので、正直
追えてませんでし
た・・・

昨年末暇だったので、総
復習してみたのでその成
果を共有します！

• 現在の要素数は108
• 30種類の新要素
• 14種類の既存要素が変化
• time要素、hgroup要素、data要素
（WHATWG HTMLのみ）などが争
点。

HTML5マークアップ

• リッチな入力フォーム、新たなフォーム要素、宣
言的なバリデーションなど。

date datetime datetime-local
month week time
number range email
url search tel
color

HTML5 Forms

• HTMLにマシンリーダブルなデータを埋
め込むための仕様

<div itemscope>
<p>お名前: <span itemprop="name">白石</span></p>
<p> :
<time itemprop="birthDate">1978/03/24</time>
</p>
</div>

HTML Microdata

• HTMLにマシンリーダブルなデータを埋
め込むための仕様
• RDFはXMLで、RDFaは属性で定義。
RDFa Liteは、RDFaの初心者用サブ
セット
<div vocab="http://schema.org/" typeof="Person">
<p>お名前: <span property="name">白石</span></p>
<p> :
<time property="birthDate">1978/03/24</time>
</p>
</div>

RDF/RDFa/RDFa Lite

• MicrodataやRDFaで利用する、共通ボ
キャブラリ
• MS/Google/Yahooが協力して策定

<div itemscope itemtype="http://schema.org/Person">
<p>お名前: <span itemprop="name">白石</span></p>
<p> :
<time itemprop="birthDate">1978/03/24</time>
</p>
</div>

Schema.org

• HTML5、DOM3 Core、Element
Traversal、DOM3 Events、DOM2
Traversal and Rangeなど、複数に散
らかっている仕様を統合するのが主
目的。
• 例えば、以下のようなAPIが含まれ
る。
• Document#getElementsByClassName()
• Element#classList

DOM4

• DOMをカプセル化し、DOMツリーのコンポーネ
ント化を実現する仕組み

var dialog = document.getElementById("dialog");
var root = new ShadowRoot(dialog);
root.appendChild(…);

Shadow DOM

• async属性・・・スクリプトファイルの非同期読
み込みが可能に
• defer属性・・・スクリプトファイルのダウン
ロードは非同期で行われ、実行はページの読み込
み後

<script async defer src="ad.js"></script>

script要素の新属性

• style要素にscopedを指定すると、スタイリング
の効果が親要素の子孫ノードに限定される
<body>
<h1>ページの見出し</h1>
<section>
<style scoped>
h1 { color: red; }
</style>
<h1>セクション見出し</h1>
</section>

style要素のスコープ
化

• srcdoc属性・・・iframeの内容を文字列で指定可能
な属性
• sandbox属性・・・指定すると、iframe内のコンテン
ツに様々な禁止事項が。属性値として以下の値を指
定し、制限を緩めることが出来る。
• allow-same-origin/allow-top-navigation/allow-forms/allow-
scripts
• seamless属性・・・指定すると、親ドキュメントと
同様のコンテキストでCSSが適用される。

iframeの新しい3属性

• img/video/audio要素の新しい属性
• 指定すると、CORS (Cross Origin Resource Sharing)
を用いたリクエストを行ってリソースをフェッチす
る
• 指定可能な値は"anonymous" (認証不要)、"use-
credentials" (認証が必要)のいずれか

crossorigin属性

• a/area要素に指定可能になった、新たな属性。
• リンク先をダウンロードし、その際のファイル名を
属性値とする。

download属性

• ドラッグ＆ドロップを実現するためのAPI
• draggable属性を付与するとドラッグ可能に
• dragstart/dragenter/dragover/dropと言ったイベン
トを処理する
• ファイルのドラッグ＆ドロップも可能
// ドロップイベントを処理するハンドラ
target.ondrop = function(event) {
// ドロップされたファイルを取得
var files = event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
alert("名前:" + file.name + " サイズ:" + file.size);
}
};

Drag & Drop API

• ブラウザの履歴（「戻る」「進む」）に任意の状
態をひもづけられる。
• popstateイベントを捕捉して、自前の「戻る」
「進む」処理を記述可能

history.pushState(data, document.title);

onpopstate = function(event) {
// 状態を復元
};

履歴管理API

• Webページ上でWYSIWYGエディタを作成するた
めに必要なAPI
• execCommandメソッドやwindow.getSelection()
など

HTML5 Editing APIs

• アンドゥ・リドゥを行うための標準API
• undoscope属性、UndoManagerインターフェース
が中心的
• まだまだドラフト

UndoManager and DOM
Transaction

• Base64用ユーティリティ関数。
• 仕様も実装も（実は）揃っている

btoa(“a”); //”YQ==”
atob(“YQ”); // “a”

window.atob()/btoa()

• JavaScriptで暗号化処理を行うためのAPI
• 「Web Cryptography API」として、2012年4月こ
ろに最初のドラフトを予定

window.crypto.pk.generateKeypair("DSA",
function(pubKey) {
…
}, false);

DOMCryptAPI

• CSSセレクタで要素を絞り込むためのAPI
• document.querySelector(selector)
• document.querySelectorAll(selector)
• Level2から、find()/findAll()が増え、jQuery風に
チェーンで絞込みが可能に

var elements = document.querySelectorAll(".section");

Selectors API

• AndroidのIntentをWebアプリ間で実現するための
API。
• <intent>要素を検知したブラウザは、サービスを
自身に登録する
var intent = new Intent();
intent.action = Intent.EDIT;
intent.type = 'image/png';
intent.data = getImageDataURI('image');
window.navigator.startActivity(intent, loadEditedImag
e);

Web Intents

• MIMEタイプやプロトコルにWebアプリを関連づ
けることのできるAPI
// trans-en-jaプロトコルにGoogle翻訳を関連付ける
navigator.registerProtocolHandler(
"trans-en-ja",
"http://translate.google.co.jp/translate?" +
"hl=ja&sl=en&tl=ja&u=%s", "Google英日翻訳");
// trans-en-jaプロトコルを使う
<a href="trans-en-ja://www.whatwg.org/">WHATWG</a>

registerProtocolHandler
registerContentHandler

• ユーザへの通知を行うためのAPI
• 単純なテキストしか通知に使えない
• Chromeに実装されているAPIよりもかなり単純

var notification =
new Notification("mail.png", "メール到着！");
notification.onshow = function() {
setTimeout(function() {
notification.cancel();
}, 15000); }
notification.show();

Web Notifications

• Webページ内の要素をフルスクリーン化して表示
できるAPI
• 動画をフルスクリーン再生する、とか
• フルスクリーン時、:fullscreen擬似クラス
と:fullscreen-ancestor擬似クラスが有効に
var exitButton = document.getElementById("exit");
var video = document.getElementById("v");
// フルスクリーン化
video.requestFullscreen();
exitButton.onclick = function() {
// フルスクリーン解除
document.exitFullScreen();
};

Fullscreen API

オフラインWebアプリ
ケーションと関連API

• HTML/CSS/JavaScript/画像など、Webアプリが
必要とするリソースをキャッシュし、オフライン
でも利用可能にする仕組み。
• text/cache-manifestでの配信が不要に。

CACHE MANIFEST

hello.html
hello.js
<html manifest="hello.appcache">
…
</html>

Application Cache

• navigator.online・・・自身がオフライン状態かど
うか
• online/offlineイベント・・・オンライン状態の変
化を検知することができる。
window.addEventListener("online", function() {
}, false);
window.addEventListener("offline", function() {
}, false);

navigator.online
online/offlineイベント

• シンプルなローカルストレージ
• Candidate Recommendation（勧告候補）に！
• 文字列値しか受け付けない仕様になってちょっと
残念。

localStorage.person = JSON.stringify({…});

…

var person = JSON.parse(localStorage.person);

Web Storage

• JavaScriptオブジェクトをそのまま読み書きでき
るローカルストレージ
• ベンダプレフィックス付きでChrome/Firefoxがサ
ポート済み。IE10でもサポートされる。

var openReq = indexedDB.open("sampleDB")
openReq.onsuccess = function() {
var db = openReq.result;
var tx = db.transaction("Person");
tx.objectStore("Person").put({…});
});

Indexed Database API

• ローカルファイルの読み取りをサポートする
API。
• 以下のようなインターフェースを定義している重
要仕様。
• Blob
• File
• FileReader/FileReaderSync
• URL
var file = fileElem.files[0];
var reader = new FileReader();
reader.onload = function(buf) { … };
reader.readAsArrayBuffer(file);

File API

• Webアプリが自由に読み書きできるファイルシス
テムの仕様
• オリジンごとにファイルシステムは分離されてい
る

requestFileSystem(TEMPORARY, 1024*1024,
function(fs) {
fs.root.getFile("test.txt", function(file) {…});
});

File API:Directories and
System

• ローカルファイルの書き出しに特化したAPI。
• File API:Directories and Systemと深い関連を持つ

var bb = new BlobBuilder();bb.append("TEST");
var data = bb.getBlob();
fs.root.getFile("test.txt", function(file) {
file.createWriter(function(writer) {
writer.onwrite = function() {…};
writer.write(data);
});
});

File API:Writer

• Blob/FileReader/BlobBuilderなどを抽象化し、
「バイナリストリームを扱うAPI」として再定義
したもの。
• 以下のインターフェースが定義されている
• Stream・・・Blob/Fileの親インターフェースとして
• StreamReader・・・FileReaderの親インター
フェースとして
• StreamBuilder・・・BlobBuilderを置き換えるもの
として

Streams API

• クォータをリクエストしたり、使用状況を取得し
たりできるAPI
• Chromeで実装済み
// 50MBのクォータを要求
webkitStorageInfo.requestQuota(
webkitStorageInfo.PERSISTENT
1024*1024*50,
function onsuccess() {
…
},
function onerror() {
…
});

Quota Management API

• バイト型を持たないJavaScriptにおいて、バイト配列
を扱うためのAPI。
• Khronos（WebGLを標準化している団体）で仕様が策
定されている。
• バイナリデータのコンテナであるArrayBufferと、
様々なサイズを要素の単位とするビューからなる
• (U)Int8Array,(U)Int16Array,(U)Int32Array,(
U)Float32Array,(U)Float64Array

var buf = new Uint32Array([1,2,3]);
console.log(buf.length); // 3
console.log(buf.byteLength); // 12

Typed Array

• JavaScriptで並列処理を行うための仕組み。
• 各スレッド（ワーカ）は、直接変数を共有するこ
とは出来ず、メッセージのやり取りでデータを共
有する。
• ステータス：ラストコール

var worker = new Worker("worker.js");
worker.postMessage("Hello");
worker.onmessage = function(event) {
alert(event.data);
};

Web Workers

• アドレス帳からのデータ読み出しを可能にする
API
• 簡単なフィルタリングなども可能
• ラストコール済み（でも、Web Intentsに取って
代わられるかも？）

navigator.contacts.find(['name', 'emails'],
function(contacts) {
…
}, null, {filter: '白石'});

Contacts API

• バッテリーの使用状況にアクセスできるAPI
• 各種ステータスへのアクセス、イベントリスナの
設定も可能
• ラストコール済み
navigator.battery.onlevelchange = function() {
alert('現在のバッテリーレベル:' +
navigator.battery.level);
};
if (navigator.battery.charging) {
alert("チャージ中");
}

Battery Status API

• <input type="file">を拡張し、カメラやマイクから
の取り込みを可能に
• 以下の値を指定可能なcapture属性を追加する
• camera
• camcorder
• microphone
• filesystem（デフォルト）

<input type="file" capture="camera">

HTML Media Capture

• WebアプリからE-mail/SMS/MMSを送信するため
のAPI

var picture =
document.getElementById("file").files[0];
navigator.device.sendMessage(
"mms:+460000000001?body=Welcome%20%to%Atlantis",
[picture], function() {
// 成功時の処理
});

The Messaging API

• 現在接続しているネットワークの種類を検知でき
るAPI
• unknown, ethernet, wifi, 2g, 3g, 4g, noneといった
文字列が返ります。

alert(navigator.connection.type);

The Network Information API

• デバイスの各種センサーにアクセスするための
API
• 指定できるセンサーの種類は以下。
• Temperature（温度）, AmbientLight
（光）, AmbientNoise（音）, MagneticField（磁
気）, Proximity（近接）, AtmPressure（気
圧）, RelHumidity（相対湿度）, Accelerometer（加
速度）, Gyroscope（ジャイロ）, Orientation（デバ
イスの向き）
var con = new SensorConnection("Temperature");
con.onsensordata = function(event) {
alert("現在の温度は" + event.data);
};
con.read();

Sensor API

• Webアプリからバイブレーションを行うための
API
• navigator.vibrate()のみの簡単なAPI

// 1秒振動させる
navigator.vibrate(1000);
// パターンを指定して振動させる
navigator.vibrate([500, 500, 500]);

Vibration API

• 現在地情報を取得するためのAPI
• Level2からは、住所の情報にもアクセスできるよ
うに（Firefoxで実装済み）

navigator.geolocation.watchPosition(function(position
) {
…
});

Geolocation API

• Webアプリにおける音声入力や音声合成を可能に
するAPI
• Chromeで実装済みのx-webkit-speechとは別物
• <reco><tts>要素とAPI、そしてリモートサーバと
のやり取りを行うSpeech Protocolからなる。
• Speech ProtocolはWebSocketのサブプロトコルと
して策定されている！

<reco for="greeting">
<input type="text" id="greeting">

HTML Speech

• デバイスの向きや傾きを加速度センサーから得る
ためのAPI。
• 対応しているブラウザでは、windowに対して以
下のイベントを監視できる。
• deviceorientation・・・デバイスの向き・傾き
• divicemotion・・・デバイスの動き
• compassneedscalibration・・・キャリブレーショ
ンが必要
window.addEventListener("deviceorientation",
function(event) {
// process event.alpha, event.beta and event.gamma
}, true);

DeviceOrientation Events

• マルチタッチを検知するための仕組み。
• touchstart, touchend, touchmove, touchenter, touc
hleave, touchcancelと言ったイベントを捕捉する

window.ontouchstart = function(event) {
var touches = event.touches;
if (touches.length > 1)
alert("マルチタッチ！");
};

Touch Events

ネットワーク／
コミュニケーション

• WebSocket ProtocolはRFCに、WebSocket APIは
勧告候補に。
• 主要ブラウザのほとんどが実装済み／実装着手済
み
• バイナリの送受信やプロトコルの拡張も可能に

var ws = new WebSocket("ws://example.com/chat");
ws.send("Hello");

WebSocket

• Cometを標準化したようなAPI。HTTPの枠組みの
ままに、サーバからのデータプッシュを実現す
る。
• サーバは、決まった形式に則ってtext/event-
streamというコンテントタイプでデータを配信
• クライアントは、EventSourceオブジェクトのイ
ベントを監視。
var es = new EventSource("http://example.com/stock");
es.onmessage = function(event) {
alert(event.data);
};

Server-Sent Events

• ウィンドウ/iframe間（異なるwindowの間）で
メッセージングを行うためのAPI
• postMessage() <-> onmessageでデータを受け渡
し
• 主要なブラウザでほぼ実装済み（IEはフレーム間
通信のみ）
//sender
window.postMessage("Hello");
//receiver
window.onmessage = function(event) {
alert(event.data);
};

Cross Document Messaging

• オリジンの異なるサーバとの通信を可能にする
API。
• XHRやSSEに、外部のURLを指定するだけ。
• サーバ側での対応は必要

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://external.com");
xhr.send("");

Cross Origin Resource
Sharing

• パワーアップしまくり！
• ドキュメントやバイナリ、フォームデータの送信が
可能に
• ドキュメントやバイナリ、JSONの送信が可能に
• 送受信の進捗状況を取得可能に
• 他のオリジンとも通信可能に
var file = document.getElementById("file").files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.send(file); // ファイルの送信
xhr.upload.onprogress = function(event) {
// アップロードの進捗状況を表示
};

XMLHttpRequest Level2

• <video>で動画再生、<audio>で音声再生
• 再生のみ可能。動画や音声の生成／編集は別の仕
様で。

<video controls src=http://example.org/movie.ogg>
</video>

video/audio要素

• Googleが作ったWeb Audio APIと、Mozillaが作っ
たMediaStream Processing APIを併記した仕様。
比較用？

Audio Processing API

• メディアデータのメタデータを取得するための
API
• タイトル/言語/日時/（撮影）場所/説明/ジャンル/コ
ピーライト/幅・高さ/動画の再生時間/フレームレー
ト…など
• ステータス：勧告候補

var res = new MediaResource();
var mr = res.createMediaResource("test.jpg", [], 1);
mr.getMediaProperty(["title"], function(props) {
var result = props.Title;
var label = result.titleLabel;
}, function(prop) { … });

API for MediaResource1.0

• video要素と共に使用するtrack要素に指定できる
ファイルフォーマット
• CSSも使用可能だが、i/b/u/ruby/rt/v（音声を表
す）/c（頭出し用のテキスト）など、使えるタグ
が限られている

WEBVTT

00:11.000 --> 00:13.000
<v 白石><b>こんにちは！</b>

Web VTT

• ローカル／リモートを問わない、メディアデータ
の送受信を可能にするAPI。
• デバイスが持つカメラやマイク、ファイル、リモー
トブラウザ／デバイスなどと、メディアデータをや
り取りできる

var video = document.getElementById("video");
navigator.getUserMedia("video", function(stream) {
var url = URL.createObjectURL(stream);
video.src = url;
});

Web RTC

• 説明不要！のグラフィックAPI
• <canvas>要素で指定した領域に、JavaScriptを用
いてビットマップグラフィックを書き出せる
• 3D版のAPIはWebGL

<canvas id="canvas"></canvas>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
…

Canvas

• Scalable Vector Graphicsの頭文字を取ったもの。
• Webページ内でベクターグラフィックを生成でき
る
• HTML5に対応したブラウザなら、HTML内に
<svg>要素を用いて直接SVGを埋め込める

<!DOCTYPE html>
<html>
<svg>
…
</svg>
</html>

SVG

パフォーマンス最適
化

• JavaScriptアニメーションを最適化するため、ブ
ラウザにコールバック関数を登録する仕組み
• setTimeout()/setInterval()を使った場合よりもス
ムーズでエコなアニメーションを期待できる。

function render() {
…
requestAnimationFrame(render);
}
requestAnimationFrame(render);

requestAnimationFrame

• setTimeout(fn, 0)としたい状況で、代わりに使う
と便利。
• 長時間かかるタスクを細切れに処理したい場合
• UI処理の途中経過をユーザに表示したい場合

// 処理をイベントキューに追加
var id = setImmediate(function() { … });

// 途中でキャンセルしたい場合
clearImmediate(id);

setImmediate()

• ページの表示状態を取得することのできるAPI
• バックグラウンドにいるときは処理を停止する、な
どの制御が可能になる。
• Documentオブジェクトのvisibilitychangeイベン
トを監視して、状態変更を検知できる

document.addEventListener("visibilitychange",
function() {
if (document.hidden) {
// ページがバックグラウンドの場合の処理
}
}, false);

Page Visibility

• DNSルックアップ、接続開始／、ページの読み込
み開始／完了など、様々なタイミングを取得でき
るAPI
• navigationStart,domainLookupStart, connectStart, f
etchStart, …
• ステータス：勧告候補

onload = function() {
var now = new Date().getTime();
var t = now – performance.timing.navigationStart;
alert("ページ読み込みまでにかかった時間:" + t);
};

Navigation Timing

• プログラム内で時間を測定するための、便利で正
確なAPI
• 基本はマーク＆メジャー
• ステータス：ラストコール
performance.mark("mark1");
performance.measure("measure1", "mark1");

var times = performance.getMeasures("measure1");
times.forEach(function(t) {
console.log(t);
});

User Timing

• 画像、CSS、スクリプトなど、Webページを構成
するリソースの読み込み時間を取得するメソッド

var resourceList = performance
.getEntriesByType(performance.PERF_RESOURCE);
for (var i = 0; i < resourceList.length; i++) {
console.log(
resourceList[i].responseEnd –
resourceList[i].startTime);
}

Resource Timing

• User Timing, Resource Timingを一貫したイン
ターフェースで扱うようにするための仕様

Performance Timeline

HTML5は進化が本当に
著しいですね！

2012年も、
HTML5とか勉強会
並びに
html5j.org
をよろしくお願いしま
す！
@Shumpei

HTML5最新動向

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to HTML5最新動向 (20)

More from Shumpei Shiraishi (20)

HTML5最新動向