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