Your SlideShare is downloading. ×
  • Like
HTML5とデバイスの連携: 良いところ、悪いところ、未来のこと
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 917 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
917
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 2013年の未来の予測2013年の未来の予測
  • 35. Nike+ の車版、ジェットパック版…
  • 36. マルチスクリーンのゲームやアプリマルチスクリーンのゲームやアプリ
  • 37. 複数のデバイス、一つの複数のデバイス、一つの UIUI
  • 38. 本当のどこでも本当のどこでも WebWeb
  • 39. HTML5HTML5 とデバイスの連携とデバイスの連携 :: 良いところ良いところ 悪いところ悪いところ 未来のこと未来のこと デイビス ダニエルデイビス ダニエル @ourmaninjapan@ourmaninjapan