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

1,595 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,595
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5HTML5 とデバイスの連携とデバイスの連携 :: 良いところ良いところ 悪いところ悪いところ 未来のこと未来のこと デイビス ダニエルデイビス ダニエル @ourmaninjapan@ourmaninjapan
  2. 2. まずは、昔話まずは、昔話 18991899 年の未来の予測年の未来の予測
  3. 3. 2000 年の街の風景
  4. 4. 2000 年の Drive Thru
  5. 5. 2000 年の警察
  6. 6. 2000 年の消防士
  7. 7. 2000 年の建設
  8. 8. 2000 年の散髪屋さん
  9. 9. 2000 年のお風呂
  10. 10. 2000 年の学校
  11. 11. 2000 年の Skype ビデオチャット
  12. 12. 最新の最新の Web APIWeb API
  13. 13. Geolocation APIGeolocation API 位置情報位置情報 caniuse.com/#feat=geolocationcaniuse.com/#feat=geolocation
  14. 14. navigator.geolocation.getCurrentPosition(showMap); function showMap(position) { // position オブジェクト : // (position.coords.latitude, // position.coords.longitude) } Geolocation APIGeolocation API 位置情報位置情報
  15. 15. Device Orientation APIDevice Orientation API デバイスオリエンテーションデバイスオリエンテーション caniuse.com/#feat=deviceorientationcaniuse.com/#feat=deviceorientation ● 加速度センサー加速度センサー ● 方向センサー方向センサー
  16. 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. 17. System Information APISystem Information API システム情報システム情報 ● 気温気温 ● 気圧気圧 ● 湿度湿度 ● 騒音騒音 ● 距離間距離間
  18. 18. System Information APISystem Information API システム情報システム情報 navigator.system.monitor("Thermal", success); function success(thermal) { // thermal オブジェクト : // thermal.state = 気温 }
  19. 19. WebSocket API, Server Sent EventsWebSocket API, Server Sent Events ウェブソケット、サーバセントイベントウェブソケット、サーバセントイベント caniuse.com/#feat=websocketscaniuse.com/#feat=websockets
  20. 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. 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. 22. Offline StorageOffline Storage オフラインストレージオフラインストレージ // オンラインの場合は「 true 」 : var online = navigator.onLine; // localStorage オブジェクトでの保存 : window.localStorage["status"] = " 移動中 ";
  23. 23. ウェブソケット オフライン ストレージ 位置情報、デバイスオリエンテーション、システム情報
  24. 24. デバイスでは何の問題が出るかデバイスでは何の問題が出るか
  25. 25. •文字入力が楽ではない •ナビゲーションが楽ではない •テキストを読むのが楽ではない •ページロードが楽ではない •文字入力、本当に楽ではない
  26. 26. Logitech MX Air / Hillcrest Labs Loop Pointer
  27. 27. Sony / Google TV
  28. 28. Opera / Pioneer 社内ブラウザ
  29. 29. さぁ、これからは何が必要でしょうかさぁ、これからは何が必要でしょうか
  30. 30. Web によるデバイス認識方法
  31. 31. ブラウザによる 支払い方法
  32. 32. パフォーマンスのレベルアップパフォーマンスのレベルアップ
  33. 33. 開発やテスティングツール開発やテスティングツール
  34. 34. 2013年の未来の予測2013年の未来の予測
  35. 35. Nike+ の車版、ジェットパック版…
  36. 36. マルチスクリーンのゲームやアプリマルチスクリーンのゲームやアプリ
  37. 37. 複数のデバイス、一つの複数のデバイス、一つの UIUI
  38. 38. 本当のどこでも本当のどこでも WebWeb
  39. 39. HTML5HTML5 とデバイスの連携とデバイスの連携 :: 良いところ良いところ 悪いところ悪いところ 未来のこと未来のこと デイビス ダニエルデイビス ダニエル @ourmaninjapan@ourmaninjapan

×