HTML5概要、コードサンプル

HTML5HTML5 概要、概要、
コードサンプルコードサンプル
デイビス　ダニエルデイビス　ダニエル
W3C/KeioW3C/Keio
ddavis@w3.orgddavis@w3.org

WebWeb とはとは
HTML
(W3C)
コンテンツ
CSS
(W3C)
デザイン
JavaScript
(Ecma)
プログラム

HTML5HTML5 とはとは
HTML5HTML5
HTML4HTML4
XHTMLXHTML

WebWeb ページの構成ページの構成 : HTML4 → HTML5: HTML4 → HTML5

HTML5概要、コードサンプル

良い標準良い標準 == グローバルグローバル

良い標準良い標準 == インターオペラビリティ（相互動作インターオペラビリティ（相互動作
性）性）

今までの今までの WebWeb との違いとの違い

●
より簡単より簡単
●
より早いより早い
●
よりフレキシブルよりフレキシブル

getUserMediagetUserMedia
カメラとマイクのデータ取得カメラとマイクのデータ取得

getUserMediagetUserMedia
カメラとマイクのデータ取得カメラとマイクのデータ取得
navigator.getUserMedia({video: true},
successCallback, errorCallback);
function successCallback(stream) {
video.src = (window.URL &&
window.URL.createObjectURL(stream)) ||
stream;
video.play();
}

Geolocation APIGeolocation API
位置情報位置情報

navigator.geolocation.getCurrentPosition(
showMap);
function showMap(position) {
// position オブジェクト :
// (position.coords.latitude,
// position.coords.longitude)
}
Geolocation APIGeolocation API
位置情報位置情報

Device Orientation APIDevice Orientation API
デバイスオリエンテーションデバイスオリエンテーション
●
加速度センサー加速度センサー
●
方向センサー方向センサー

window.ondevicemotion =
function(event) {
// event.acceleration オブジェクト :
// {x: 0, y: 0, z: -9.81}
// event.rotationRate オブジェクト :
// {alpha: 0, beta: 0, gamma:
-v/r*180/pi}
}
Device Orientation APIDevice Orientation API
デバイスオリエンテーションデバイスオリエンテーション
●
●

System Information APISystem Information API
システム情報システム情報
●
気温気温
●
気圧気圧
●
湿度湿度
●
騒音騒音
●
距離間距離間

System Information APISystem Information API
システム情報システム情報
navigator.system.monitor("Thermal",
success);
function success(thermal) {
// thermal オブジェクト :
// thermal.state = 気温
}

WebSocket API, WebRTCWebSocket API, WebRTC
ウェブソケット、ウェブウェブソケット、ウェブ RTCRTC

WebSocket API, Server Sent EventsWebSocket API, Server Sent Events
ウェブソケット、サーバセントイベントウェブソケット、サーバセントイベント
// ウェブソケットの作成
var socket =
new
WebSocket('ws://example.com/update');
socket.onopen = function () {
// 接続する時に実効するコード
setInterval(function() {
if (socket.bufferedAmount == 0)
socket.send(getUpdateData());
}, 50);
};

Offline StorageOffline Storage
オフラインストレージオフラインストレージ
●
ServiceWorkerServiceWorker （ファイル、コード）（ファイル、コード）
●
localStoragelocalStorage （文字列）（文字列）
●
IndexedDBIndexedDB （データベース）（データベース）

Offline StorageOffline Storage
オフラインストレージオフラインストレージ
// オンラインの場合は「 true 」 :
var online = navigator.onLine;
// localStorage オブジェクトでの保存 :
window.localStorage["status"] = " 移動
中 ";

Responsive ImagesResponsive Images
レスポンシブイメージレスポンシブイメージ
●
<picture><picture> 要素要素
●
srcsetsrcset 属性属性

Responsive ImagesResponsive Images
レスポンシブイメージレスポンシブイメージ
<picture>
<source media="(min-width:
45em)" srcset="large.jpg">
<source media="(min-width:
18em)" srcset="med.jpg">
<img src="small.jpg" alt="Cute
dog.">
</picture>

スマートカースマートカー

ウェブソケット
オフライン
ストレージ
位置情報、デバイスオリエンテーション、システム情報

Nike+Nike+ の車版が可能になるの車版が可能になる

スマート家電スマート家電

youtu.be/rP-L4OqO07Uyoutu.be/rP-L4OqO07U

Thank you!Thank you!
デイビス　ダニエルデイビス　ダニエル
W3C/KeioW3C/Keio
ddavis@w3.orgddavis@w3.org

HTML5概要、コードサンプル

More Related Content

Similar to HTML5概要、コードサンプル (20)

More from ourmaninjapan (17)

HTML5概要、コードサンプル

Editor's Notes