1. プラットフォームとしての
HTML5
N. Shimizu <nshimizu@mozilla-japan.org>
Mozilla Japan, 2013/07/04

2. about: me

3. 清水智公（しみずのりただ）
• Mozilla Japan マーケティング部所属
• Web 開発
• テクニカルマーケティング
• 2013/04 から現職

8. HTML5 で作られたアプリ

9. HTML5 で作られたアプリ

11. Web こそがプラットフォーム

12. http://info.cern.ch/

13. http://www.evolutionoftheweb.com/?hl=ja#/evolution/day

14. HTML5 で何ができるのか

16. 表現

17. 表現
• 新しい入力フォーム
• メディアクエリ
• Web フォント、流し込み
• 角丸、ドロップシャドウ、グラデーション
• アニメーション、トランジション

18. 新しい入力フォーム
http://beta.theexpressiveweb.com/#!/html5-forms

19. メディアクエリ
http://www.mozilla.org/en-US/firefox/os/

20. http://www.google.com/fonts/
Web フォント

21. http://html.adobe.com/webplatform/layout/shapes/
文字の流し込み

22. 文字の流し込み
http://html.adobe.com/webplatform/layout/regions/

23. ドロップシャドウ
http://beta.theexpressiveweb.com/#!/css3-animations

24. CSSアニメーション
http://beta.theexpressiveweb.com/#!/css3-animations

25. CSSトランスフォーム
http://beta.theexpressiveweb.com/#!/css3-transforms

26. CSSトランジション
http://beta.theexpressiveweb.com/#!/css3-transitions

27. グラフィックス
• 2D グラフィックス
• SVG (Scalable Vector Graphics)
• Canvas
• 3D グラフィックス：Web-GL

28. 2D グラフィックス
https://github.com/mbostock/d3/wiki/Gallery

29. Canvas
https://developer.mozilla.org/ja/demos/detail/zen-photon-garden

30. SVG (Scalable Vector Graphics)
http://upload.wikimedia.org/wikipedia/commons/2/2c/Moscow_metro_map_en_sb.svg

31. SVGアニメーション
http://parapara.mozlabs.jp/wall/good_wall

32. WebGL
https://developer.mozilla.org/ja/demos/detail/snappytree/launch

33. マルチメディア
• ビデオ
• Web オーディオ
• ファイルの再生
• 波形の合成

34. ビデオの再生
http://beta.theexpressiveweb.com/#!/html5-video

35. 波形の編集
http://bitterspring.net/ms/morningstar/

36. Webフォント×ドロップシャドウ
https://developer.mozilla.org/ja/demos/detail/the-letter-heads/

37. WebGL × Web オーディオ
http://www.chromeexperiments.com/detail/100000-stars/

38. ビデオ×Canvas
http://www.akirafukuoka.com/blog/2011/05/fivj.html

39. Web がネイティブ

41. ハードウェア
• タッチデバイス
• GPS
• 光センサー
• カメラ
• 近接センサー
• 加速度センサー
• FMラジオ
• バッテリー
• 電源管理
• バイブ

42. データ管理
• ファイル
• Indexed DB
• デバイスストレージ
• コンタクトリスト

43. コミュニケーション
• Bluetooth
• TCP ソケット
• 通話管理
• SMS
• ネットワークへの接続状況

44. Battery API
http://robnyman.github.io/battery/

45. 光センサー
http://www.freshtilledsoil.com/device-api-ambient-light-demo-on-nexus-7/

46. Web RTC
http://www.webrtc.org/demo

47. Web RTC を利用したオンライン対戦
https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/

48. スピード

49. Microbenchmarks
http://kripken.github.io/mloc_emscripten_talk/#/27

50. Realistic/large benchmarks
http://kripken.github.io/mloc_emscripten_talk/#/28

51. Epic Citadel HTML5
http://www.unrealengine.com/html5/

52. まとめ

53. Webこそがプラットフォーム
• アプリケーション作成に必要な機能を提供
• 十分な表現力
• Webがネイティブ
• 実行スピードの向上
• インストールしなくても使えるアプリ

54. Firefox Marketplace
https://marketplace.firefox.com/

55. ご清聴ありがとうございました

56. HTML5のデモサイト

57. https://developer.mozilla.org/ja/demos/

58. http://www.chromeexperiments.com/

59. http://beta.theexpressiveweb.com/#!/welcome