html5とデバイスの連携: 良いところ、悪いところ、未来のこと
Post on 20-Dec-2014
914 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML5HTML5 とデバイスの連携とデバイスの連携 ::良いところ良いところ悪いところ悪いところ未来のこと未来のこと
デイビス ダニエルデイビス ダニエル@ourmaninjapan@ourmaninjapan
まずは、昔話まずは、昔話
18991899 年の未来の予測年の未来の予測
2000年の街の風景
2000年の Drive Thru
2000年の警察
2000年の消防士
2000年の建設
2000年の散髪屋さん
2000年のお風呂
2000年の学校
2000年の Skypeビデオチャット
最新の最新の Web APIWeb API
Geolocation APIGeolocation API位置情報位置情報caniuse.com/#feat=geolocationcaniuse.com/#feat=geolocation
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position) {
// position オブジェクト : // (position.coords.latitude, // position.coords.longitude)
}
Geolocation APIGeolocation API位置情報位置情報
Device Orientation APIDevice Orientation APIデバイスオリエンテーションデバイスオリエンテーション
caniuse.com/#feat=deviceorientationcaniuse.com/#feat=deviceorientation
● 加速度センサー加速度センサー● 方向センサー方向センサー
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, Server Sent EventsWebSocket API, Server Sent Eventsウェブソケット、サーバセントイベントウェブソケット、サーバセントイベント
caniuse.com/#feat=websocketscaniuse.com/#feat=websockets
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オフラインストレージオフラインストレージcaniuse.com/#feat=offline-appscaniuse.com/#feat=offline-appscaniuse.com/#feat=namevalue-storagecaniuse.com/#feat=namevalue-storage
● Application CacheApplication Cache (ファイル) (ファイル) ● localStoragelocalStorage (文字列)(文字列)● IndexedDBIndexedDB (データベース)(データベース)
Offline StorageOffline Storageオフラインストレージオフラインストレージ
// オンラインの場合は「 true」 :var online = navigator.onLine;
// localStorage オブジェクトでの保存 :window.localStorage["status"] = "移動中 ";
ウェブソケット
オフラインストレージ
位置情報、デバイスオリエンテーション、システム情報
デバイスでは何の問題が出るかデバイスでは何の問題が出るか
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
Logitech MX Air / Hillcrest Labs Loop Pointer
Sony / Google TV
Opera / Pioneer 社内ブラウザ
さぁ、これからは何が必要でしょうかさぁ、これからは何が必要でしょうか
Webによるデバイス認識方法
ブラウザによる支払い方法
パフォーマンスのレベルアップパフォーマンスのレベルアップ
開発やテスティングツール開発やテスティングツール
2013年の未来の予測2013年の未来の予測
Nike+の車版、ジェットパック版…
マルチスクリーンのゲームやアプリマルチスクリーンのゲームやアプリ
複数のデバイス、一つの複数のデバイス、一つの UIUI
本当のどこでも本当のどこでも WebWeb
HTML5HTML5 とデバイスの連携とデバイスの連携 ::良いところ良いところ悪いところ悪いところ未来のこと未来のこと
デイビス ダニエルデイビス ダニエル@ourmaninjapan@ourmaninjapan
top related