Embed Size (px)
DESCRIPTION
2013年11月17日に Internet Week で講演した際に利用したスライドです。HTML5 でできることを表現、デバイスコントロール、スピードの3点からまとめました。デバイスコントロールの節でWebRTCについて少し厚めに書きました。
Citation preview
2
表現
6
表現
• 新しい入力フォーム • メディアクエリ • Web フォント、流し込み • 角丸、ドロップシャドウ、グラデーション • アニメーション、トランジション
7
メディアクエリ
8
文字の流し込みhttp://html.adobe.com/webplatform/layout/shapes/
10
Web フォント×ドロップシャドウhttps://developer.mozilla.org/ja/demos/detail/the-letter-heads/
11
Canvas 上でのレイトレーサーhttps://developer.mozilla.org/ja/demos/detail/zen-photon-garden
12
Scalable Vector Graphicshttp://upload.wikimedia.org/wikipedia/commons/2/2c/Moscow_metro_map_en_sb.svg
13
WebGLhttps://developer.mozilla.org/ja/demos/detail/snappytree/launch
14
ビデオの再生http://beta.theexpressiveweb.com/#!/html5-video
15
3D 立体音響http://www.html5rocks.com/ja/tutorials/webaudio/games/
16
Web GL × WebオーディオAPIhttp://www.chromeexperiments.com/detail/100000-stars/
17
http://www.chromeexperiments.com/detail/100000-stars/
Web がネイティブ
18
ハードウェア
• タッチデバイス • GPS • 光センサー • カメラ • 近接センサー
• 加速度センサー • FMラジオ • バッテリー • 電源管理 • バイブ
データ管理
• ファイル • Indexed DB • デバイスストレージ • コンタクトリスト
21
光センサーhttp://www.freshtilledsoil.com/device-api-ambient-light-demo-on-nexus-7/
23
コミュニケーション
• Bluetooth • TCP ソケット • 通話管理 • SMS • ネットワークへの接続状況
24
HTTP
AJAX
WebSocket
WebRTC
Web RTC を利用したオンライン対戦 https://hacks.mozilla.org/2013/03/webrtc-data-channels-for-great-multiplayer/
27
WebRTC を構成する3API
• MediaStream • メディアストリームのハンドリング • Web カメラなど • RTCPeerConnection：音声、動画の双方向通信 • RTCDataChannel：一般の双方向通信
28
WebRTCのアーキテクチャhttp://www.webrtc.org/reference/architecture
31
32
スピード
33
Micro-benchmarkshttp://kripken.github.io/mloc_emscripten_talk/#/27
34
Realistic / large benchmarkshttp://kripken.github.io/mloc_emscripten_talk/#/28
35
まとめ
37
Webこそがプラットフォーム
• アプリケーション作成に必要な機能を提供 • 十分な表現力 • Webがネイティブ • 実行スピードの向上 • インストールしなくても使えるアプリ
38
HTML5のデモサイト
39
the Expressive Webhttp://beta.theexpressiveweb.com/#!/welcome
42
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.pdfslide.tips/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
