1. HTML5:
API の活用事例
と
今後の広がり
デイビス ダニエル
@ourmaninjapan

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

3. 2000 年の街の風景

4. 2000 年の Drive Thru

5. 2000 年の警察

6. 2000 年の消防士

7. 2000 年の建設

8. 2000 年の散髪屋さん

9. 2000 年のお風呂

10. 2000 年の学校

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

12. そして
The Web
↓
HTML5
↓
Web of Things

13. ●
●
●
より簡単
より早い
よりフレキシブル

14. HTML5: 既存 HTML の進化
HTML4
XHTML
HTML5

15. ウェブページの構成
HTML
(W3C)
コンテンツ
CSS
(W3C)
デザイン
JavaScript
(Ecma)
プログラム
SVG
(W3C)
WebGL
(Khronos)
画像
グラフィックス

16. 最近の Web API

17. Geolocation API
位置情報
caniuse.com/#feat=geolocation

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

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

20. Device Orientation API
デバイスオリエンテーション
window.ondevicemotion =
function(event) {
●
●
// event.acceleration オブジェクト :
// {x: 0, y: 0, z: -9.81}
// event.rotationRate オブジェクト :
// {alpha: 0, beta: 0, gamma:
-v/r*180/pi}
}

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

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

23. GetUserMedia
●
カメラとマイクのデータ取得

24. GetUserMedia
// コールバック関数を使います
if (navigator.getUserMedia) {
navigator.getUserMedia({video:
true},
successCallback, errorCallback);
} else {
}
// エラーが出ました
console.log('Not supported.');

25. WebSocket API, WebRTC
ウェブソケット、リアルタイムコミュニケ
ーション
caniuse.com/#feat=websockets

26. // ウェブソケットの作成
var socket =
new
WebSocket('ws://example.com/update');
socket.onopen = function () {
// 接続する時に実効するコード
setInterval(function() {
if (socket.bufferedAmount == 0)
socket.send(getUpdateData());
}, 50);
};
WebSocket API, WebRTC
ウェブソケット、リアルタイムコミュニケ
ーション

27. Offline Storage
オフラインストレージ
caniuse.com/#feat=offline-apps
caniuse.com/#feat=namevalue-storage
Application Cache （ファイル）
● localStorage （文字列）
● IndexedDB （データベース）
●

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

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

30. でも未だ未だですよ…

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

32. Logitech MX Air / Hillcrest Labs Loop Pointer

33. Sony / Google TV

34. Opera / Pioneer 社内ブラウザ

35. さぁ、これからは ?

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

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

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

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

40. 2014 年の未来の予測

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

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

43. 複数のデバイス、一つの UI

44. 本当のどこでも Web

45. One more thing...

46. 宿題
•
JS 派なら： Promises
•
HTML 派なら： Web Components
•
CSS 派なら： Shapes, Masking,
Blending

47. HTML5:
API の活用事例
と
今後の広がり
デイビス ダニエル
@ourmaninjapan