![Offline StorageOffline Storage
オフラインストレージオフラインストレージ
// オンラインの場合は「 true 」 :
var online = navigator.onLine;
// localStorage オブジェクトでの保存 :
window.localStorage["status"] = " 移動
中 ";](https://image.slidesharecdn.com/html5-overview-140821051412-phpapp01/85/HTML5-21-320.jpg)
贬罢惭尝5概要、コードサンプル
- 4. WebWeb ページの構成ページの構成 : HTML4 → HTML5: HTML4 → HTML5
- 11. getUserMediagetUserMedia カメラとマイクのデータ取得カメラとマイクのデータ取得 navigator.getUserMedia({video: true}, successCallback, errorCallback); function successCallback(stream) { video.src = /slideshow/html5-38208822/38208822/(window.URL && window.URL.createObjectURL(stream)) || stream; video.play(); }
- 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=/slideshow/html5-38208822/38208822/"small.jpg" alt="Cute dog."> </picture>
- 24. スマートカースマートカー
- 28. スマート家电スマート家电