HTML5機能の紹介といくつかのコードサンプル。

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

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

3. HTML5HTML5 とはとは
HTML5HTML5
HTML4HTML4
XHTMLXHTML

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

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

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

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

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

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

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

12. Geolocation APIGeolocation API
位置情報位置情報

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

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

15. 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
デバイスオリエンテーションデバイスオリエンテーション
●
●

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

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

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

19. 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);
};

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

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

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

23. 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>

24. スマートカースマートカー

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

26. SHARESHARE
USE STOREUSE STORE

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

28. スマート家電スマート家電

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

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