Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.l...
Device Orientation APIDevice Orientation API
デバイスオリエンテーションデバイスオリエンテーション
caniuse.com/#feat=deviceorientationcaniuse.com/#fe...
window.ondevicemotion = function(event) {
// event.acceleration オブジェクト :
// {x: 0, y: 0, z: -9.81}
// event.rotationRate オ...
System Information APISystem Information API
システム情報システム情報
●
気温気温
●
気圧気圧
●
湿度湿度
●
騒音騒音
●
距離間距離間
System Information APISystem Information API
システム情報システム情報
navigator.system.monitor("Thermal", success);
function success(t...
WebSocket API, Server Sent EventsWebSocket API, Server Sent Events
ウェブソケット、サーバセントイベントウェブソケット、サーバセントイベント
caniuse.com/#feat=...
WebSocket API, Server Sent EventsWebSocket API, Server Sent Events
ウェブソケット、サーバセントイベントウェブソケット、サーバセントイベント
// ウェブソケットの作成
var ...
Offline StorageOffline Storage
オフラインストレージオフラインストレージ
caniuse.com/#feat=offline-appscaniuse.com/#feat=offline-apps
caniuse.c...
Offline StorageOffline Storage
オフラインストレージオフラインストレージ
// オンラインの場合は「 true 」 :
var online = navigator.onLine;
// localStorage ...
ウェブソケット
オフライン
ストレージ
位置情報、デバイスオリエンテーション、システム情報
デバイスでは何の問題が出るかデバイスでは何の問題が出るか
•文字入力が楽ではない
•ナビゲーションが楽ではない
•テキストを読むのが楽ではない
•ページロードが楽ではない
•文字入力、本当に楽ではない
Logitech MX Air / Hillcrest Labs Loop Pointer
Sony / Google TV
Opera / Pioneer 社内ブラウザ
さぁ、これからは何が必要でしょうかさぁ、これからは何が必要でしょうか
Web によるデバイス認識方法
ブラウザによる
支払い方法
パフォーマンスのレベルアップパフォーマンスのレベルアップ
開発やテスティングツール開発やテスティングツール
2013年の未来の予測2013年の未来の予測
Nike+ の車版、ジェットパック版…
マルチスクリーンのゲームやアプリマルチスクリーンのゲームやアプリ
複数のデバイス、一つの複数のデバイス、一つの UIUI
本当のどこでも本当のどこでも WebWeb
HTML5HTML5 とデバイスの連携とデバイスの連携 ::
良いところ良いところ
悪いところ悪いところ
未来のこと未来のこと
デイビス ダニエルデイビス ダニエル
@ourmaninjapan@ourmaninjapan
Upcoming SlideShare
Loading in …5
×

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

1,759 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×