HTML5とデバイスの連携: 良いところ、悪いところ、未来のこと

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によるデバイス認識方法

ブラウザによる支払い方法

パフォーマンスのレベルアップパフォーマンスのレベルアップ

開発やテスティングツール開発やテスティングツール

２０１３年の未来の予測２０１３年の未来の予測

Nike+の車版、ジェットパック版…

マルチスクリーンのゲームやアプリマルチスクリーンのゲームやアプリ

複数のデバイス、一つの複数のデバイス、一つの UIUI

本当のどこでも本当のどこでも WebWeb

HTML5HTML5 とデバイスの連携とデバイスの連携 ::良いところ良いところ悪いところ悪いところ未来のこと未来のこと

デイビス　ダニエルデイビス　ダニエル@ourmaninjapan@ourmaninjapan