1. HTML5HTML5 とデバイスの連携とデバイスの連携 ::
良いところ良いところ
悪いところ悪いところ
未来のこと未来のこと
デイビス ダニエルデイビス ダニエル
@ourmaninjapan@ourmaninjapan

2. まずは、昔話まずは、昔話
18991899 年の未来の予測年の未来の予測

3. 2000 年の街の風景

4. 2000 年の Drive Thru

5. 2000 年の警察

6. 2000 年の消防士

7. 2000 年の建設

8. 2000 年の散髪屋さん

9. 2000 年のお風呂

10. 2000 年の学校

11. 2000 年の Skype ビデオチャット

12. 最新の最新の Web APIWeb API

13. Geolocation APIGeolocation API
位置情報位置情報
caniuse.com/#feat=geolocationcaniuse.com/#feat=geolocation

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

15. Device Orientation APIDevice Orientation API
デバイスオリエンテーションデバイスオリエンテーション
caniuse.com/#feat=deviceorientationcaniuse.com/#feat=deviceorientation
●
加速度センサー加速度センサー
●
方向センサー方向センサー

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

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

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

19. WebSocket API, Server Sent EventsWebSocket API, Server Sent Events
ウェブソケット、サーバセントイベントウェブソケット、サーバセントイベント
caniuse.com/#feat=websocketscaniuse.com/#feat=websockets

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

21. Offline StorageOffline Storage
オフラインストレージオフラインストレージ
caniuse.com/#feat=offline-appscaniuse.com/#feat=offline-apps
caniuse.com/#feat=namevalue-storagecaniuse.com/#feat=namevalue-storage
●
Application CacheApplication Cache （ファイル）（ファイル）
●
localStoragelocalStorage （文字列）（文字列）
●
IndexedDBIndexedDB （データベース）（データベース）

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

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

24. デバイスでは何の問題が出るかデバイスでは何の問題が出るか

25. •文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない

26. Logitech MX Air / Hillcrest Labs Loop Pointer

27. Sony / Google TV

28. Opera / Pioneer 社内ブラウザ

29. さぁ、これからは何が必要でしょうかさぁ、これからは何が必要でしょうか

30. Web によるデバイス認識方法

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

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

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

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

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

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

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

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

39. HTML5HTML5 とデバイスの連携とデバイスの連携 ::
良いところ良いところ
悪いところ悪いところ
未来のこと未来のこと
デイビス ダニエルデイビス ダニエル
@ourmaninjapan@ourmaninjapan