OSC Tokyo で使用したスライド(当日使用しなかったページも少し追加)

1. HTML5 + Firefox OS
Slides @ OSC Tokyo 2012 on 2012/09/07
by Tomoya Asai (dynamis)
Last Update: 2012/09/07

2. about:

3. about:dynamis
Mozilla Japan
http://dynamis.jp
@dynamitter
facebook.com/ dynamis
レッサーパンダが好き。
mailto: Tomoya ASAI <dynamis@mozilla-japan.org>

5. Foxkeh

7. フォクすけの誕生日は 2006/09/01

8. "HTML5"

9. フォクすけに教えて！

10. The term "HTML5" is widely
used as a buzzword to refer
to modern Web technologies...
WHATWG HTML 仕様書の解説
http://whatwg.org/html - Introduction

11. "HTML5" という用語は最新
Web 技術を指すバズワード
として広く使われています
WHATWG HTML 仕様書の解説
http://whatwg.org/html - Introduction

12. "HTML5" という用語は最新
Web 技術を指すバズワード
として広く使われています
HTML5 の生い立ちは...

13. HTML の誕生: 1989年に Tim Berners-Lee が提案

14. http://foxkeh.jp/downloads/

15. http://foxkeh.jp/downloads/

16. HTML4 に至るまで
1989: HTML の起源を提案
1990: 初の Web ブラウザ公開
ブラウザ乱立・独自拡張乱立
1994: W3C を発足し標準化へ
1995: HTML 2.0 が RFC に
1997: HTML 3.2 が W3C 勧告に
HTML 4.0 が W3C 勧告に

17. W3C は XHTML で再出発へ
1998: XML 1.0 勧告
HTML4 の拡張は困難と判断し
XML で作り直すと決定
2000: XHTML 1.0 勧告
HTML4 を XML にしただけ
2001: XHTML 1.1 勧告
HTML4 と後方互換性がなくなる

18. 標準化の分裂
W3C は XHTML 2.0 仕様策定へ
2001: IE6 リリース
XHTML サポートなし！ (＞＜)
2004: WHATWG 設立
Mozilla & Opera が W3C で後方互換
の提案をするが否決された
仕方なく別組織で HTML4 に後方互
換な後継仕様策定へ
Mozilla & Opera に Apple も
参加する形で WHATWG 設立

19. W3C と WHATWG の和解
2006: IE7 リリース
相変わらず XHTML 非サポート
XHTML 2.0 は仕様策定も遅いし
ブラウザには実装されない状況
W3C 互換性の重要性を認める
2007: 新しい HTML WG 設立
WHATWG の仕様を HTML5 に
Firefox は XHTML 1.1 や XForms
などには対応していたが IE が...

20. W3C での標準化
2008: W3C 最初の HTML5 草案
中身は WHATWG のもの
2009: W3C XHTML 2.0 WG 終了
Web ではブラウザに実装された仕様
が残ることが明らかに
2011: W3C HTML5 最終草案
例によって草案に差し戻されてます
2014: HTML5 勧告へ (予定)
最終草案と草案を行き来する
のは W3C ではよくあることです

21. It is necessary to evolve HTML
incrementally. The attempt to
get the world to switch to XML
... all at once didn't work.
"Reinventing HTML" by
Tim Berners-Lee

22. HTML は段階的に発展させ
る必要がある。... すべてを
一度に切り替えようという
試みは成功しなかった。
"Reinventing HTML" by
Tim Berners-Lee

23. The drag-and-drop API is
horrible,
but it has one thing going
for it: IE6 implements it, as
do Safari and Firefox.
Ian Hickson http://twitter.com/
Hixie/status/4075253361

24. Drag & Drop API は酷いが、
採用する理由がひとつある。
つまり、IE6 だけでなく
Safari や Firefox でも
実装されているからだ。
Ian Hickson http://twitter.com/
Hixie/status/4075253361

25. HTML5 = HTML4++
再出発ではなく段階的発展
HTML4 の次だから HTML5
理想的転換でなく現実的発展
次世代 Web への第一歩
HTML5 は既存技術の整理が主
アプリ環境への進化も前提に
草案と最終草案を繰り返し
行き来するのはよくあること

26. "HTML5" という用語は最新
Web 技術を指すバズワード
として広く使われています

28. Multi
Media Mouse,
HTML5 Key ev.
Forms
W3C
Offline
HTML5 HTML5 Support
Parser
WAI-
XHTML5 ARIA
Semantic
Elements

29. 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

30. 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

31. 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

32. 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

33. "HTML5" が進化する方向
Web のネイティブ化
Web 技術でできないことはない
マルチデバイス対応
携帯、タブレット、TV、車載...
組版技術の統合
HTML ではなく CSS の話です

34. "HTML5" という用語は最新
Web 技術を指すバズワード
として広く使われています
Web 2.0 やクラウド等と
同じ「バズワード」です

35. HTML5 < HTML << "HTML5"
HTML5 = W3C 仕様書
安定化を進めるスナップショット
HTML = WHATWG 仕様書
常に進化を続ける最新仕様
"HTML5" = Web 技術全部
てきとーに呼んでるだけ

36. バズワードを使う時は
HTML5 でなく "HTML5"
と区別しましょう (・・)/
あるいはバズワード用
のロゴ を使う

37. フォクすけに教えて！

38. Semantic Multimedia HTML5 Geo-
CSS
Elements Elements Forms location
Offline User HTML5
DOM MathML
Support Interaction Parser
Web
Canvas Microdata SVG XHR
Messaging
Web Web
WebRTC WebGL ECMA5th
Workers Sockets
(主な)仕様策定の場: WHATWG W3C Other

39. HTML Living Standard - WHATWG
W3C 仕様書名に "HTML" を含む
Semantic Multimedia HTML5 CSS
HTML - W3C
Elements Elements Forms
Offline User HTML5 DOM
Support Interaction Parser
Web SVG
Canvas Microdata Messagin
g
Web Web
more... WebRTC WebGL
Workers Sockets

40. HTML Living Standard - WHATWG
Semantic HTML5 HTML5
Multimedia
Elements Elements Forms
HTML
Offline User HTML5 Canvas 2D
Support Interaction Parser Context
Web HTML5
Canvas Microdata
Messaging Microdata
Web Web
more... HTML5 Web
Workers Sockets
Messaging
The
Web Workers WebSocket API W3C では機能毎に仕様を
モジュール化するスタイル

41. フォクすけに教えて！

42. "HTML5" って美味しいの？
何処でも動作する
マルチデバイス対応に便利
HTML ならプラットフォーム毎に
別言語でアプリを書かずに済む
スピードも機能も大幅進化
できないことの方が少なく

43. フォクすけに教えて！

44. ブラウザの互換性問題
新しい機能はブラウザ依存
標準化が進めば互換に
実装と標準はダンスの様に
仕様策定中の非互換は当然
「仕様策定後に実装」ではない

45. No "Mobile WebKit"
WebKit 間の差が激しい
PC とモバイルは完全に別物
iOS と Android も全然違う
Android 内でも端末依存あり
Firefox は PC とほぼ同じ
違いを見つける方が難しい
ハードの違いは当然あるけど

46. フォクすけに教えて！

47. 誤解 - 拡張子は .html5？
んなわけあるか！

48. 誤解 - HTML5 標準化が決裂？
驚くことは何も起きてない
飛ばし記事を鵜呑みにしちゃダメ
進化を続ける HTML のス
ナップショットが HTML5
標準化は時間のかかる作業
進化を止めるのはナンセンス
HTML5 と HTML の関係については
W3C, WHATWG 双方の記事を参照

49. 誤解 - ベンチマークで…
HTML5test.com
JS チェックだからウソも多い
非 WebKit 先行で標準化が進む技
術は殆どテストに含まれてない
実質的には WebKit の比較用

50. 誤解 - WebKit2 じゃないと…
WebKit Core は共通
WebKit API 部分だけの話
従来の WebKit API も継続メンテ
ブラウザ毎に独自 API あるだけ
Chromium や WebOS も独自 API

51. Web Platform

52. Web is the Platform

53. 既存の独自プラットフォーム
現在はプラットフォーム毎に異なる言語で別々のアプリを作る必要がある

54. Web プラットフォーム
vs 独自プラットフォーム
「ブラウザ戦争」の時代じゃないですよ

55. 今後は Web プラットフォーム
プラットフォーム
としての Web
Web がプラットフォームなら業界標準技術でアプリ環境が統一される

56. フォクすけに教えて！

57. Web ではできなかったこと
システムステータス
WiFi 情報, モバイル通信...
各種センサー
光センサー, 近接センサー...
低レベルハードウェア制御
USB, BlueTooth, NFC...

58. ＊＊＊ がやらないなら
Mozilla がやるんだって

59. Web API

60. http://arewemobileyet.com/

61. Web API
Web の限界を押し進める
従来の基本的な API 以外
Mozilla が勝手に呼んでる API の
総称であって明確な定義はない
https://wiki.mozilla.org/WebAPI

62. 以前からある Web API
Geolocation (位置情報)
Orientation (加速度)
Audio Data API
WebGL (3D グラフィック)
Camera API (Media Capture)
これらはもちろん Android 版 Firefox でも実装済み

63. 実装済みの Web API
SMS, Telephony, Alarm
Mobile Connection, WiFi Info,
Network Info (通信速度等),
Contacts, Settings, Time/Clock
Idle, Battery Status
Resource Lock (スリープ禁止)
まだ不完全な実装の API も一部含む

64. 実装済みの Web API
Vibration, Pointer Lock
Ambient Light (環境光),
Proximity (近接),
Mouse Lock (移動量取得)
Device Storage, Browser
Open Web Apps, DOM Crypt
まだ不完全な実装の API も一部含む

65. 現在実装中の Web API
WebRTC (Camera, P2P 含む)
Web Activities (Intent)
Push Notification
Power Management
TCP Socket, Bluetooth
FM Radio, Permission
https://wiki.mozilla.org/WebAPI

66. 実装見込みの Web API
UDB Datagram Socket
HTTP-cache, Log
USB, NFC, USB file-reading
Background Service
...and more...
https://wiki.mozilla.org/WebAPI

67. 検討中の WebAPI
Magnetic Field
Time/Clock (時刻設定)
Calendar
Spellcheck
...and more...

70. Web API も Web 標準
W3C DAP (Device API) WG
W3C System Apps WG
IETF/W3C WebRTC WG
マルチメディア系や P2P など
その他それぞれの WG で

71. 仕様を公開してるけど
実際の実装と違うのも×

72. 実装されるまで仕様が
適切かどうかも判断不能

73. 昨年末辺りから一気に
実装してきてるらしい

74. New Firefox

75. フォクすけに教えて！

76. Firefox for Android を再設計
Android に最適化
最高のパフォーマンス
Flash もサポート
片手で使いやすい UI
プライバシーを確保

77. フィードバックの半分
以上が「速くなった！」

78. スクロールパフォーマンス
Firefox10 10.2
Firefox14 20.5
Dolphin 14.2
Default 13.9
Chrome 11.9
Opera 9.6
0fps 11fps 22fps
Eideticker - cnn.com on Galaxy Nexus, Android 4.0.4

79. スクロールパフォーマンス
Firefox10 10.2
Firefox14 20.5
Dolphin 14.2
Default 13.9 1.5倍高速
Chrome 11.9
Opera 9.6
0fps 11fps 22fps
Eideticker - cnn.com on Galaxy Nexus, Android 4.0.4

80. HTML5 Canvas パフォーマンス
Firefox10 13.2
Firefox14 39.3
Opera 21.6
Chrome 19.6
Dolphin 14.1
Default 12
0fps 10fps 20fps 30fps 40fps
Eideticker - Canvas on Galaxy Nexus, Android 4.0.4

81. HTML5 Canvas パフォーマンス
Firefox10 13.2
Firefox14 39.3
Opera 21.6
Chrome 19.6
Dolphin 14.1 3倍以上高速
Default 12
0fps 10fps 20fps 30fps 40fps
Eideticker - Canvas on Galaxy Nexus, Android 4.0.4

82. これまでの Firefox
メインスレッド
再描画 対象要素の メモリの 変更をGPU GPUによる
イベント 再描画 データ更新 に送信 画面描画
メインスレッドの話です UI の応答性はプロセス
無論他のスレッドもあり 分離で実現していた

83. 生まれ変わった Firefox
メインスレッド フロントエンドUI
や要素の描画を
再描画 対象要素の メモリの 別スレッドに分離
イベント 再描画 データ更新 して応答性向上
UI 周りの処理 画面の更新
タッチ etc 変更をGPU GPUによる
ゼロからJava
イベント で書き直し に送信 画面描画
従来のプロセス分離は
不要になったので廃止

84. Flash もサポート
Flash にも対応しています
API ドキュメントなく苦労…
Flash の開発は終了したけどね…

85. バックグラウンド同期
常に最新のデータを同期
同期用のサービスを実装
Firefox 起動せずに同期可能に

86. 片手でも使いやすい UI
親指１つで快適ブラウズ
メニュー、タブ、バー、ページ...
見たいページに即アクセス
スマートスクリーン
よく見るページのリスト
ブックマークやタブも同期

87. 片手でも使いやすい UI
親指１つで快適ブラウズ
メニュー、タブ、バー、ページ...
見たいページに即アクセス
スマートスクリーン
よく見るページのリスト
ブックマークやタブも同期

88. スマートスクリーン
文字入力する毎に絞り込み
URL やタイトルで素早く検索
Google などで Web 検索も

92. パソコンと簡単同期
パソコン側で 12 桁を入力
オプション→Sync→デバイスと連携

93. アドオンでカスタマイズ
Adblock Plus
お馴染みの広告ブロック
Tap Tap Wrap
ダブルタップでズームした部分の
文字を更に大きく
Delete Cookies on Exit
終了時に Cookie 削除

94. アドオンでカスタマイズ
Adblock Plus
お馴染みの広告ブロック
Tap Tap Wrap
ダブルタップでズームした部分の
文字を更に大きく
Delete Cookies on Exit
終了時に Cookie 削除

95. トラッキング拒否に対応
Do Not Track に対応
Yahoo!, Twitter, 広告業界
などは既に対応を開始

96. パスワードの暗号化保存
マスターパスワード機能
パスワードを暗号化して保存
端末を紛失しても大丈夫
マスターパスワードを知らないと
なりすましてログインできない

97. フォクすけもお気に入り

98. Marketplace

100. Boot to Gecko

101. Firefox OS

102. フォクすけに教えて！

105. Firefox OS (Boot to Gecko)
Web 技術が「ネイティブ」
HTML5, JavaScript, Web API...
ホーム画面もすべて Web 技術で
Gecko エンジンだけ起動
Linux Kernel 上に Gecko を
Java VM などの中間レイヤなし
Gecko = Firefox 描画エンジン
プロジェクト名は今も Boot to Gecko

108. ステータスバーも
(電波強度、電池残量...)
カメラやラジオも
電話や SMS の送受信も
もちろん Firefox も
音楽やビデオの再生も
マーケットプレイスも
３Dアプリも
その他なんでも...

109. ステータスバーも
(電波強度、電池残量...)
カメラやラジオも
電話や SMS の送受信も
もちろん Firefox も
音楽やビデオの再生も
マーケットプレイスも
３Dアプリも
その他なんでも...
すべて Web 技術で！

110. Web API の標準化
不足機能は実装＆標準化
Web ＝ Native とする
主に W3C の WG で標準化
実装と平行して標準化を進める
Device API, System Apps...
そのほか IETF などでも
https://wiki.mozilla.org/WebAPI

111. 開発パートナーと製品化
Telefónica: 来年始め製品化
最初はブラジルで発売予定
TCL (Alcatel) や ZTE が製造
掲載ロゴはパートナー企業の一部です: http://mozilla.jp/blog/entry/9603/

112. パートナー企業 (一部)
配置・順序に意味はなし
これ以外については非公開

113. 乞うご期待

115. See Also...

116. CSS 最新機能紹介
CSS の新機能紹介
新機能や昨年から変わった点
http://r.dynamis.jp/css2012

117. JavaScript.Next
JavaScript の最新仕様
ECMAScript 5th のポイント
JavaScript 次世代仕様
ECMAScript 6th や Harmony
http://r.dynamis.jp/jsnext

118. 開発者ツール紹介
一通りの機能と使い方
Firefox 標準の開発者ツール
隠し設定やビルトイン関数のリ
ファレンスなども含めています
Firebug とその拡張機能
アイコンや背景画像を変更する
カスタマイズにも言及してます
http://r.dynamis.jp/devtools