HTML5:
API の活用事例
と
今後の広がり
デイビス ダニエル
@ourmaninjapan
まずは、昔話
1899 年の未来の予測
2000 年の街の風景
2000 年の Drive Thru
2000 年の警察
2000 年の消防士
2000 年の建設
2000 年の散髪屋さん
2000 年のお風呂
2000 年の学校
2000 年の Skype ビデオチャット
そして
The Web
↓
HTML5
↓
Web of Things
●

●

●

より簡単
より早い

よりフレキシブル
HTML5: 既存 HTML の進化

HTML4
XHTML
HTML5
ウェブページの構成
HTML
(W3C)
コンテンツ

CSS
(W3C)
デザイン

JavaScript
(Ecma)
プログラム

SVG
(W3C)

WebGL
(Khronos)

画像

グラフィックス
最近の Web API
Geolocation API
位置情報

caniuse.com/#feat=geolocation
Geolocation API
位置情報
navigator.geolocation.getCurrentPosition(
showMap);
function showMap(position) {
// position オブジェクト :...
Device Orientation API

デバイスオリエンテーション

caniuse.com/#feat=deviceorientation
●

加速度センサー
● 方向センサー
Device Orientation API

デバイスオリエンテーション

window.ondevicemotion =
function(event) {

●
●

// event.acceleration オブジェクト :
// {...
System Information API
システム情報
●
●
●
●
●

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

navigator.system.monitor("Thermal",
success);
function success(thermal) {
// thermal オブジェクト...
GetUserMedia
●

カメラとマイクのデータ取得
GetUserMedia
// コールバック関数を使います
if (navigator.getUserMedia) {
navigator.getUserMedia({video:
true},
successCallback, errorCa...
WebSocket API, WebRTC
ウェブソケット、リアルタイムコミュニケ
ーション
caniuse.com/#feat=websockets
// ウェブソケットの作成
var socket =
new
WebSocket('ws://example.com/update');
socket.onopen = function () {
// 接続する時に実効するコード
setInt...
Offline Storage
オフラインストレージ

caniuse.com/#feat=offline-apps
caniuse.com/#feat=namevalue-storage
Application Cache (ファイル)
● ...
Offline Storage
オフラインストレージ
// オンラインの場合は「 true 」 :
var online = navigator.onLine;
// localStorage オブジェクトでの保存 :
window.local...
オフライン
ストレージ
ウェブソケット

位置情報、デバイスオリエンテーション、システム情報
でも未だ未だですよ…
•

文字入力が楽ではない

•

ナビゲーションが楽ではない

•

テキストを読むのが楽ではない

•

ページロードが楽ではない

•

文字入力、本当に楽ではない
Logitech MX Air / Hillcrest Labs Loop Pointer
Sony / Google TV
Opera / Pioneer 社内ブラウザ
さぁ、これからは ?
Web によるデバイス認識方法
ブラウザによる
支払い方法
パフォーマンスのレベルアップ
開発やテスティングツール
2014 年の未来の予測
Nike+ の車版、ジェットパック版…
マルチスクリーンのゲームやアプリ
複数のデバイス、一つの UI
本当のどこでも Web
One more thing...
宿題

•

JS 派なら: Promises

•

HTML 派なら: Web Components

•

CSS 派なら: Shapes, Masking,

Blending
HTML5:
API の活用事例
と
今後の広がり
デイビス ダニエル
@ourmaninjapan
Upcoming SlideShare
Loading in...5
×

HTML5: APIの活用事例 と 今後の広がり

501

Published on

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

No Downloads
Views
Total Views
501
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5: APIの活用事例 と 今後の広がり

  1. 1. HTML5: API の活用事例 と 今後の広がり デイビス ダニエル @ourmaninjapan
  2. 2. まずは、昔話 1899 年の未来の予測
  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. そして The Web ↓ HTML5 ↓ Web of Things
  13. 13. ● ● ● より簡単 より早い よりフレキシブル
  14. 14. HTML5: 既存 HTML の進化 HTML4 XHTML HTML5
  15. 15. ウェブページの構成 HTML (W3C) コンテンツ CSS (W3C) デザイン JavaScript (Ecma) プログラム SVG (W3C) WebGL (Khronos) 画像 グラフィックス
  16. 16. 最近の Web API
  17. 17. Geolocation API 位置情報 caniuse.com/#feat=geolocation
  18. 18. Geolocation API 位置情報 navigator.geolocation.getCurrentPosition( showMap); function showMap(position) { // position オブジェクト : // (position.coords.latitude, // position.coords.longitude) }
  19. 19. Device Orientation API デバイスオリエンテーション caniuse.com/#feat=deviceorientation ● 加速度センサー ● 方向センサー
  20. 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. 21. System Information API システム情報 ● ● ● ● ● 気温 気圧 湿度 騒音 距離間
  22. 22. System Information API システム情報 navigator.system.monitor("Thermal", success); function success(thermal) { // thermal オブジェクト : // thermal.state = 気温 }
  23. 23. GetUserMedia ● カメラとマイクのデータ取得
  24. 24. GetUserMedia // コールバック関数を使います if (navigator.getUserMedia) { navigator.getUserMedia({video: true}, successCallback, errorCallback); } else { } // エラーが出ました console.log('Not supported.');
  25. 25. WebSocket API, WebRTC ウェブソケット、リアルタイムコミュニケ ーション caniuse.com/#feat=websockets
  26. 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. 27. Offline Storage オフラインストレージ caniuse.com/#feat=offline-apps caniuse.com/#feat=namevalue-storage Application Cache (ファイル) ● localStorage (文字列) ● IndexedDB (データベース) ●
  28. 28. Offline Storage オフラインストレージ // オンラインの場合は「 true 」 : var online = navigator.onLine; // localStorage オブジェクトでの保存 : window.localStorage["status"] = " 移動 中 ";
  29. 29. オフライン ストレージ ウェブソケット 位置情報、デバイスオリエンテーション、システム情報
  30. 30. でも未だ未だですよ…
  31. 31. • 文字入力が楽ではない • ナビゲーションが楽ではない • テキストを読むのが楽ではない • ページロードが楽ではない • 文字入力、本当に楽ではない
  32. 32. Logitech MX Air / Hillcrest Labs Loop Pointer
  33. 33. Sony / Google TV
  34. 34. Opera / Pioneer 社内ブラウザ
  35. 35. さぁ、これからは ?
  36. 36. Web によるデバイス認識方法
  37. 37. ブラウザによる 支払い方法
  38. 38. パフォーマンスのレベルアップ
  39. 39. 開発やテスティングツール
  40. 40. 2014 年の未来の予測
  41. 41. Nike+ の車版、ジェットパック版…
  42. 42. マルチスクリーンのゲームやアプリ
  43. 43. 複数のデバイス、一つの UI
  44. 44. 本当のどこでも Web
  45. 45. One more thing...
  46. 46. 宿題 • JS 派なら: Promises • HTML 派なら: Web Components • CSS 派なら: Shapes, Masking, Blending
  47. 47. HTML5: API の活用事例 と 今後の広がり デイビス ダニエル @ourmaninjapan
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×