プラットフォームとしての
HTML5
N. Shimizu <nshimizu@mozilla-japan.org>
Mozilla Japan, 2013/07/04
about: me
清水智公(しみずのりただ)
• Mozilla Japan マーケティング部所属
• Web 開発
• テクニカルマーケティング
• 2013/04 から現職
HTML5 で作られたアプリ
HTML5 で作られたアプリ
Web こそがプラットフォーム
http://info.cern.ch/
http://www.evolutionoftheweb.com/?hl=ja#/evolution/day
HTML5 で何ができるのか
表現
表現
• 新しい入力フォーム
• メディアクエリ
• Web フォント、流し込み
• 角丸、ドロップシャドウ、グラデーション
• アニメーション、トランジション
新しい入力フォーム
http://beta.theexpressiveweb.com/#!/html5-forms
メディアクエリ
http://www.mozilla.org/en-US/firefox/os/
http://www.google.com/fonts/
Web フォント
http://html.adobe.com/webplatform/layout/shapes/
文字の流し込み
文字の流し込み
http://html.adobe.com/webplatform/layout/regions/
ドロップシャドウ
http://beta.theexpressiveweb.com/#!/css3-animations
CSSアニメーション
http://beta.theexpressiveweb.com/#!/css3-animations
CSSトランスフォーム
http://beta.theexpressiveweb.com/#!/css3-transforms
CSSトランジション
http://beta.theexpressiveweb.com/#!/css3-transitions
グラフィックス
• 2D グラフィックス
• SVG (Scalable Vector Graphics)
• Canvas
• 3D グラフィックス:Web-GL
2D グラフィックス
https://github.com/mbostock/d3/wiki/Gallery
Canvas
https://developer.mozilla.org/ja/demos/detail/zen-photon-garden
SVG (Scalable Vector Graphics)
http://upload.wikimedia.org/wikipedia/commons/2/2c/Moscow_metro_map_en_sb.svg
SVGアニメーション
http://parapara.mozlabs.jp/wall/good_wall
WebGL
https://developer.mozilla.org/ja/demos/detail/snappytree/launch
マルチメディア
• ビデオ
• Web オーディオ
• ファイルの再生
• 波形の合成
ビデオの再生
http://beta.theexpressiveweb.com/#!/html5-video
波形の編集
http://bitterspring.net/ms/morningstar/
Webフォント×ドロップシャドウ
https://developer.mozilla.org/ja/demos/detail/the-letter-heads/
WebGL × Web オーディオ
http://www.chromeexperiments.com/detail/100000-stars/
ビデオ×Canvas
http://www.akirafukuoka.com/blog/2011/05/fivj.html
Web がネイティブ
ハードウェア
• タッチデバイス
• GPS
• 光センサー
• カメラ
• 近接センサー
• 加速度センサー
• FMラジオ
• バッテリー
• 電源管理
• バイブ
データ管理
• ファイル
• Indexed DB
• デバイスストレージ
• コンタクトリスト
コミュニケーション
• Bluetooth
• TCP ソケット
• 通話管理
• SMS
• ネットワークへの接続状況
Battery API
http://robnyman.github.io/battery/
光センサー
http://www.freshtilledsoil.com/device-api-ambient-light-demo-on-nexus-7/
Web RTC
http://www.webrtc.org/demo
Web RTC を利用したオンライン対戦
https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/
スピード
Microbenchmarks
http://kripken.github.io/mloc_emscripten_talk/#/27
Realistic/large benchmarks
http://kripken.github.io/mloc_emscripten_talk/#/28
Epic Citadel HTML5
http://www.unrealengine.com/html5/
まとめ
Webこそがプラットフォーム
• アプリケーション作成に必要な機能を提供
• 十分な表現力
• Webがネイティブ
• 実行スピードの向上
• インストールしなくても使えるアプリ
Firefox Marketplace
https://marketplace.firefox.com/
ご清聴ありがとうございました
HTML5のデモサイト
https://developer.mozilla.org/ja/demos/
http://www.chromeexperiments.com/
http://beta.theexpressiveweb.com/#!/welcome
プラットフォームとしてのHTML5
プラットフォームとしてのHTML5
プラットフォームとしてのHTML5
プラットフォームとしてのHTML5
プラットフォームとしてのHTML5
プラットフォームとしてのHTML5
プラットフォームとしてのHTML5
Upcoming SlideShare
Loading in …5
×

プラットフォームとしてのHTML5

1,360 views

Published on

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,360
On SlideShare
0
From Embeds
0
Number of Embeds
494
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

プラットフォームとしてのHTML5

  1. 1. プラットフォームとしての HTML5 N. Shimizu <nshimizu@mozilla-japan.org> Mozilla Japan, 2013/07/04
  2. 2. about: me
  3. 3. 清水智公(しみずのりただ) • Mozilla Japan マーケティング部所属 • Web 開発 • テクニカルマーケティング • 2013/04 から現職
  4. 4. HTML5 で作られたアプリ
  5. 5. HTML5 で作られたアプリ
  6. 6. Web こそがプラットフォーム
  7. 7. http://info.cern.ch/
  8. 8. http://www.evolutionoftheweb.com/?hl=ja#/evolution/day
  9. 9. HTML5 で何ができるのか
  10. 10. 表現
  11. 11. 表現 • 新しい入力フォーム • メディアクエリ • Web フォント、流し込み • 角丸、ドロップシャドウ、グラデーション • アニメーション、トランジション
  12. 12. 新しい入力フォーム http://beta.theexpressiveweb.com/#!/html5-forms
  13. 13. メディアクエリ http://www.mozilla.org/en-US/firefox/os/
  14. 14. http://www.google.com/fonts/ Web フォント
  15. 15. http://html.adobe.com/webplatform/layout/shapes/ 文字の流し込み
  16. 16. 文字の流し込み http://html.adobe.com/webplatform/layout/regions/
  17. 17. ドロップシャドウ http://beta.theexpressiveweb.com/#!/css3-animations
  18. 18. CSSアニメーション http://beta.theexpressiveweb.com/#!/css3-animations
  19. 19. CSSトランスフォーム http://beta.theexpressiveweb.com/#!/css3-transforms
  20. 20. CSSトランジション http://beta.theexpressiveweb.com/#!/css3-transitions
  21. 21. グラフィックス • 2D グラフィックス • SVG (Scalable Vector Graphics) • Canvas • 3D グラフィックス:Web-GL
  22. 22. 2D グラフィックス https://github.com/mbostock/d3/wiki/Gallery
  23. 23. Canvas https://developer.mozilla.org/ja/demos/detail/zen-photon-garden
  24. 24. SVG (Scalable Vector Graphics) http://upload.wikimedia.org/wikipedia/commons/2/2c/Moscow_metro_map_en_sb.svg
  25. 25. SVGアニメーション http://parapara.mozlabs.jp/wall/good_wall
  26. 26. WebGL https://developer.mozilla.org/ja/demos/detail/snappytree/launch
  27. 27. マルチメディア • ビデオ • Web オーディオ • ファイルの再生 • 波形の合成
  28. 28. ビデオの再生 http://beta.theexpressiveweb.com/#!/html5-video
  29. 29. 波形の編集 http://bitterspring.net/ms/morningstar/
  30. 30. Webフォント×ドロップシャドウ https://developer.mozilla.org/ja/demos/detail/the-letter-heads/
  31. 31. WebGL × Web オーディオ http://www.chromeexperiments.com/detail/100000-stars/
  32. 32. ビデオ×Canvas http://www.akirafukuoka.com/blog/2011/05/fivj.html
  33. 33. Web がネイティブ
  34. 34. ハードウェア • タッチデバイス • GPS • 光センサー • カメラ • 近接センサー • 加速度センサー • FMラジオ • バッテリー • 電源管理 • バイブ
  35. 35. データ管理 • ファイル • Indexed DB • デバイスストレージ • コンタクトリスト
  36. 36. コミュニケーション • Bluetooth • TCP ソケット • 通話管理 • SMS • ネットワークへの接続状況
  37. 37. Battery API http://robnyman.github.io/battery/
  38. 38. 光センサー http://www.freshtilledsoil.com/device-api-ambient-light-demo-on-nexus-7/
  39. 39. Web RTC http://www.webrtc.org/demo
  40. 40. Web RTC を利用したオンライン対戦 https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/
  41. 41. スピード
  42. 42. Microbenchmarks http://kripken.github.io/mloc_emscripten_talk/#/27
  43. 43. Realistic/large benchmarks http://kripken.github.io/mloc_emscripten_talk/#/28
  44. 44. Epic Citadel HTML5 http://www.unrealengine.com/html5/
  45. 45. まとめ
  46. 46. Webこそがプラットフォーム • アプリケーション作成に必要な機能を提供 • 十分な表現力 • Webがネイティブ • 実行スピードの向上 • インストールしなくても使えるアプリ
  47. 47. Firefox Marketplace https://marketplace.firefox.com/
  48. 48. ご清聴ありがとうございました
  49. 49. HTML5のデモサイト
  50. 50. https://developer.mozilla.org/ja/demos/
  51. 51. http://www.chromeexperiments.com/
  52. 52. http://beta.theexpressiveweb.com/#!/welcome

×