Internet Week 2013 「プラットフォームとしてのHTML5」

447 views
351 views

Published on

2013年11月17日に Internet Week で講演した際に利用したスライドです。HTML5 でできることを表現、デバイスコントロール、スピードの3点からまとめました。デバイスコントロールの節でWebRTCについて少し厚めに書きました。

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

  • Be the first to like this

No Downloads
Views
Total views
447
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Internet Week 2013 「プラットフォームとしてのHTML5」

  1. 1. プラットフォームとしての HTML5 清水智公 (nshimizu@mozilla-japan.org) 2013/11/27
  2. 2. 2
  3. 3. 表現 6
  4. 4. 表現 • 新しい入力フォーム • メディアクエリ • Web フォント、流し込み • 角丸、ドロップシャドウ、グラデーション • アニメーション、トランジション 7
  5. 5. メディアクエリ 8
  6. 6. Web フォント www.google.com/fonts/ 9
  7. 7. 文字の流し込み http://html.adobe.com/webplatform/layout/shapes/ 10
  8. 8. Web フォント×ドロップシャドウ https://developer.mozilla.org/ja/demos/detail/the-letter-heads/ 11
  9. 9. Canvas 上でのレイトレーサー https://developer.mozilla.org/ja/demos/detail/zen-photon-garden 12
  10. 10. Scalable Vector Graphics http://upload.wikimedia.org/wikipedia/commons/2/2c/Moscow_metro_map_en_sb.svg 13
  11. 11. WebGL https://developer.mozilla.org/ja/demos/detail/snappytree/launch 14
  12. 12. ビデオの再生 http://beta.theexpressiveweb.com/#!/html5-video 15
  13. 13. 3D 立体音響 http://www.html5rocks.com/ja/tutorials/webaudio/games/ 16
  14. 14. Web GL × WebオーディオAPI http://www.chromeexperiments.com/detail/100000-stars/ http://www.chromeexperiments.c 17
  15. 15. Web がネイティブ 18
  16. 16. ハードウェア • • • • • タッチデバイス GPS 光センサー カメラ 近接センサー • • • • • 加速度センサー FMラジオ バッテリー 電源管理 バイブ
  17. 17. データ管理 • ファイル • Indexed DB • デバイスストレージ • コンタクトリスト 21
  18. 18. Battery API http://robnyman.github.io/battery/ 22
  19. 19. 光センサー http://www.freshtilledsoil.com/device-api-ambient-light-demo-on-nexus-7/ 23
  20. 20. コミュニケーション • Bluetooth • TCP ソケット • 通話管理 • SMS • ネットワークへの接続状況 24
  21. 21. HTTP AJAX WebSocket WebRTC
  22. 22. Web RTC www.webrtc.org/demo 26
  23. 23. Web RTC を利用したオンライン対戦 https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/ 27
  24. 24. WebRTC を構成する3API • MediaStream • メディアストリームのハンドリング • Web カメラなど • RTCPeerConnection:音声、動画の双方向通信 • RTCDataChannel:一般の双方向通信 28
  25. 25. TOGETHERJS https://togetherjs.com/ 29
  26. 26. PEERJS http://cdn.peerjs.com/demo/chat.html 30
  27. 27. WebRTCのアーキテクチャ http://www.webrtc.org/reference/architecture 31
  28. 28. 32
  29. 29. スピード 33
  30. 30. Micro-benchmarks http://kripken.github.io/mloc_emscripten_talk/#/27 34
  31. 31. Realistic / large benchmarks http://kripken.github.io/mloc_emscripten_talk/#/28 35
  32. 32. Epic Citadel HTML5 http://www.unrealengine.com/html5/ 36
  33. 33. まとめ 37
  34. 34. Webこそがプラットフォーム • アプリケーション作成に必要な機能を提供 • • Webがネイティブ • • 十分な表現力 実行スピードの向上 インストールしなくても使えるアプリ 38
  35. 35. HTML5のデモサイト 39
  36. 36. Mozilla DemoStudio https://developer.mozilla.org/demo 40
  37. 37. Chrome Experiments http://www.chromeexperiments.com/ 41
  38. 38. the Expressive Web http://beta.theexpressiveweb.com/#!/welcome 42

×