HTML Web Platform
- 1. HTML Web Platform
Slides @ HTML5 Conf. 2012 on 2012/09/08
by Tomoya Asai (dynamis)
Last Update: 2012/09/08
- 3. about:dynamis
Mozilla Japan
http://dynamis.jp
@dynamitter
facebook.com/ dynamis
レッサーパンダが好き。
mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
- 4. きょうのおはなし
ぷらっとふぉーむ
うぇぶおーえす
うぇぶえーぴーあい
キツネさんのおーえす
- 11. "HTML5" への期待
次世代プラットフォーム
マルチデバイス対応
アプリ開発を簡単に
組版技術を Web に
などなど…
- 14. Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Offline
HTML5 HTML5 Support
Parser
WAI-
XHTML5 ARIA
Semantic
Elements
- 15. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 HTML5 Support
Sent ev.
Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web
Workers
Micro-
HTML Data
- 16. Canvas
Web
WHATWG Messag-
ing
Multi Web
Media Mouse, Sockets
HTML5 Key ev.
Forms
W3C Server-
Offline
HTML5 HTML5 Support
Sent ev.
Parser
Web
WAI-
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Layout Queries
Micro-
HTML Data
Trans
CSS3~ Flex
Box
form
Anim
Regions
ation
- 17. Khronos SMIL Vibra-
tion
WebGL Geo-
SVG
other location
Orien-
tation
Canvas
WHATWG Web IETF
Messag-
ing Web
Multi SPDY
Web Sockets DNT
Media Mouse, Sockets
HTML5 Key ev. XHR2
FileAPI CSP
Forms
W3C Server-
Offline ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script
Parser
Indexed
Web
WAI- DB
XHTML5 Storage
ARIA
Semantic
Elements Web Media
Workers Layout Queries
Micro-
HTML Data
Trans
CSS3~ Flex
Box
OGP XPath form
RSS Anim
Math Regions
ation
ML WOFF
DOM4
- 18. Khronos SMIL Vibra- MP3
WebCL Webm Opus
tion
WebGL Geo-
SVG
H.264
other location
Orien-
Web
Audio Notifi-
tation Web
Canvas cation
WHATWG Web IETF RTC
Messag-
ing Web TCP Tel
Multi SPDY
Web Sockets DNT Socket
Media Mouse, Sockets
HTML5 Key ev. XHR2 Radio
FileAPI CSP
Forms Net
W3C Server- Info
Offline ECMA
HTML5 HTML5 Support
Sent ev. ECMA
Script ECMA
NFC
Parser 6th
Indexed
Web Device
WAI- DB
Storage Storage
XHTML5 ARIA
Semantic Web
Elements Web SQL
Media
USB
Workers Layout Queries
File
Micro- Sys
HTML Data
Trans
CSS3~ Flex Battery
Status
Box
OGP XPath form Proxi-
Anim mity
Schema RSS Math Regions
.org ation
ML WOFF
RDF DOM4
- 19. HTML5 なんてもう古い
HTML5 = 安定ブランチ
2014 W3C 勧告に向けて標準化中
HTML = 最新の HTML
日々進化を続ける最新 HTML
最新 Web != HTML5
遙かに多くの技術が進化してる
- 27. "HTML5" プラットフォーム
Windows 8, RT, Phone
BlackBerry 10 - WebWorks
Tizen (MeeGo+LiMo+Bada)
Firefox OS (Boot to Gecko)
2013 年には出 う感じ
- 28. Windows 8, RT, Phone
HTML でモダン?アプリ
かつてメトロと呼ばれていたもの
HTML は形式的に使うだけ
独自属性付 div 要素を乱発
JS API も完全に独自
2012/10/26 リリース
- 29. (旧)Metro アプリの HTML
<!-- data-win-* 属性の嵐になります
JavaScript では WinJS.* の嵐 -->
<div class="itemtemplate"
data-win-control="WinJS.Binding.Template">
<div class="item">
<h4 class="item-title"
data-win-bind="textContent: title"></h4>
<div class="item-overlay">
<h6 class="item-subtitle win-type-ellipsis"
data-win-bind="textContent: updated"></h6>
</div>
</div>
</div>
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh974582.aspx
- 30. (旧)Metro は Web と非互換
IE10 スーパーセット?
MS の人はそう説明しますが…
実は非互換の挙動あり
API が追加されるだけじゃない
innerHTML とかフィルタされる
alert, open, moveTo とか使えない
- 31. Windows Store について
UI ガイド守らないと不可
ex: 設定はチャームで
→ Web アプリは全滅
Web 読み込むだけは不可
それはアプリじゃないとのこと
Web アプリはブラウザで。
MS の人に聞いた話
- 36. BlackBerry 10 - WebWorks
HTML でもアプリ開発可能
メインはネイティブっぽい
W3C 仕様があるものは実装
無いものは実装を追加、標準化
正直あまり標準化目立たない…
2013Q1 にリリース?
- 37. Tizen
HTML でもアプリ開発可能
メインは EFL のネイティブ?
参加企業の連携状況が
W3C 仕様があるものは実装
無いものは実装を追加、標準化
2013Q1 にリリース?
- 38. Firefox OS (Boot to Gecko)
Web がネイティブ
アプリ開発は HTML のみ
OS の UI も全部 HTML
実装と平行して標準化
それが Web 標準化のルール!
- 39. Firefox OS は Web と互換
Web アプリがそのまま動く
ブラウザと同じ動作
セキュリティモデルも同じ
PC やスマホにも同じアプリ
Firefox OS のアプリは Firefox OS
専用ではありません
ハードの違いとかで API の追加はあるが恣意的制約や非互換はない
- 40. "HTML5" プラットフォーム
HTML は形式上だけ
Windows
HTML でも開発可能
BlackBerry, Tizen
HTML がネイティブ
Firefox OS
2013 年には出 う感じ
- 43. iOS (iPhone, iPad)
ネイティブアプリ限定
Objective-C
ブラウザエンジン掲載不可
WebView で読み込むのは可
機能制限版の WebKit
JIT 無効の低速 JS エンジン
- 44. Android
ネイティブアプリ限定
Java (+ NDK)
独自ブラウザエンジンも可
Firefox 入れれば Web アプリ
配信&実行環境にもなります
WebView で読み込むのも可
- 46. Web ではできなかったこと
システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...
- 49. モバイルが WWeebb に
向�かわないなら
WWeebb をモバイルに
ってもじらが言ってる
*** がやらないなら
Mozilla がやるんだって
- 50. Web API
Web の限界を押し進める
従来の基本的な API 以外
Mozilla が勝手に呼んでる API の
総称であって明確な定義はない
https://wiki.mozilla.org/WebAPI
- 51. 以前からある Web API
Geolocation (位置情報)
Orientation (加速度)
Audio Data API
WebGL (3D グラフィック)
Camera API (Media Capture)
これらはもちろん Android 版 Firefox でも実装済み
- 52. 実装済みの Web API
SMS, Telephony, Alarm
Mobile Connection, WiFi Info,
Network Info (通信速度等),
Contacts, Settings, Time/Clock
Idle, Battery Status
Resource Lock (スリープ禁止)
まだ不完全な実装の API も一部含む
- 53. 実装済みの Web API
Vibration, Pointer Lock
Ambient Light (環境光),
Proximity (近接),
Mouse Lock (移動量取得)
Device Storage, Browser
Open Web Apps, DOM Crypt
まだ不完全な実装の API も一部含む
- 54. 現在実装中の Web API
WebRTC (Camera, P2P 含む)
Web Activities (Intent)
Push Notification
Power Management
TCP Socket, Bluetooth
FM Radio, Permission
https://wiki.mozilla.org/WebAPI
- 55. 実装見込みの Web API
UDB Datagram Socket
HTTP-cache, Log
USB, NFC, USB file-reading
Background Service
...and more...
https://wiki.mozilla.org/WebAPI
- 56. 検討中の WebAPI
Magnetic Field
Time/Clock (時刻設定)
Calendar
Spellcheck
...and more...
- 57. Web API も Web 標準
W3C DAP (Device API) WG
W3C System Apps WG
IETF/W3C WebRTC WG
マルチメディア系や P2P など
その他それぞれの WG で
- 66. Firefox OS (Boot to Gecko)
Web 技術が「ネイティブ」
HTML5, JavaScript, Web API...
ホーム画面もすべて Web 技術で
Gecko エンジンだけ起動
Linux Kernel 上に Gecko を
Java VM などの中間レイヤなし
Gecko = Firefox 描画エンジン
プロジェクト名は今も Boot to Gecko
- 70. ステータスバーも
(電波強度、電池残量...)
カメラやラジオも
電話や SMS の送受信も
もちろん Firefox も
音楽やビデオの再生も
マーケットプレイスも
3Dアプリも
その他なんでも...
すべて Web 技術で!
- 71. Web API の標準化
不足機能は実装&標準化
Web = Native とする
主に W3C の WG で標準化
実装と平行して標準化を進める
Device API, System Apps...
そのほか IETF などでも
https://wiki.mozilla.org/WebAPI
- 72. 開発パートナーと製品化
Telefónica: 来年始め製品化
最初はブラジルで発売予定
TCL (Alcatel) や ZTE
掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/
- 77. Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定とかじゃない
今年中に正式リリース予定
現在コミュニティメンバー限定、
Firefox 開発版ユーザ向け
http://marketplace.mozilla.org/
- 84. マルチデバイス対応
マルチデバイスマーケット
PC, Android, Firefox OS...
Web App = Native App に
ホームスクリーンに追加や
ブラウザと独立して起動など
ネイティブ同様の利用体験
ISW11F での画面サンプル
- 88. CSS 最新機能紹介
CSS の新機能紹介
新機能や昨年から変わった点
http://r.dynamis.jp/css2012
- 89. JavaScript.Next
JavaScript の最新仕様
ECMAScript 5th のポイント
JavaScript 次世代仕様
ECMAScript 6th や Harmony
http://r.dynamis.jp/jsnext
- 90. 開発者ツール紹介
一通りの機能と使い方
Firefox 標準の開発者ツール
隠し設定やビルトイン関数のリ
ファレンスなども含めています
Firebug とその拡張機能
アイコンや背景画像を変更する
カスタマイズにも言及してます
http://r.dynamis.jp/devtools