OSC Kyoto で使用したスライド

1. Firefox OS
Slides @ OSC Kyoto 2012 on 2012/08/04
by Tomoya Asai (dynamis)
Last Update: 2012/08/05

2. about:

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

4. きょうのおはなし
うぇぶぷらっとふぉーむ
すまほでキツネさん
まーけっとぷれいす
キツネさんのおーえす

5. Web Platform

6. みんな ""HHTTMMLL55"" に
何を期待してるの？
フォクすけに教えて！

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

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

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

10. "HTML5" の現状
"HTML5" > HTML > HTML5
実装や仕様策定に伴い "HTML5"
の領域は広がり続けている
Web がプラットフォーム
本格的アプリ開発が可能に
OS に代わるプラットフォーム

11. これで十分？
フォクすけに教えて！

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

13. やりましょう！
ってもじらが言ってる
＊＊＊ がやらないなら
Mozilla がやるんだって

14. 次世代 Web =

15. CSS3
次世代 Web =

16. CSS3 DOM4
次世代 Web =

17. CSS3 DOM4
次世代 Web = HTML5

18. CSS3 DOM4
次世代 Web = HTML5
ECMAScript 6th

19. CSS3 DOM4
次世代 Web = HTML5
ECMAScript 6th

20. HTML5 = 安定ブランチ
HTML = 最新の HTML

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

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

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

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

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

27. Web API
Web の限界を押し進める
HTML5 など基本以外の API
API の総称であって定義はない
https://wiki.mozilla.org/WebAPI

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

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

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

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

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

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

34. WWeebb がプラット
フォーム！

35. WWeebb が おーえす！

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

37. 仕様無き実装は不幸の種
実装無き仕様は机上理論

38. もうかなりできてる！
って MMoozziillllaa が言ってる
昨年末辺りから一気に
実装してきてるらしい

39. Firefox for
Android

40. すまほでもキツネ？
フォクすけに教えて！

41. モバイル Web の問題
WebKit 寡占で OK？
機能限定版で OK？
モバイルにも選択と競争を

42. フル機能の Web を！
モバイルにも競争を！

43. やりましょう！
って MMoozziillllaa が言ってる
Mozilla は最近モバイル
頑張ってるみたいです

44. Firefox for Mobile 当初の目標
モバイル Web フル機能に
モバイルを機能限定版としない
モバイルにも "Firefox"
プライバシー＆セキュリティ
同期やアドオンにも対応

45. Firefox for Mobile の評価
同期機能が便利！
フル機能のブラウザ！
アドオンでカスタマイズ！

46. Firefox for Mobile への要望
起動時間を短く
Flash をサポート
もっとサクサクに
もっとヌルヌルに
・・・
もっともっともっと...

47. すばらしく高速で
使いやすくなった！
ってもじらが言ってる
フィードバックの半分
以上が「速くなった！」

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

49. 大幅短縮した起動時間
４割短縮
(UI の表示はもっと速い)
Firefox 10 Firefox 14
ホーム画面の表示までに
かかる時間を比較

50. ホームと Gecko を同時ロード
以前の
Gecko エンジン XUL UI ホーム
Firefox
新しい Gecko エンジン
Firefox
Java UI ホーム
即座に操作開始可能

51. ホームと Gecko を同時ロード
以前の
Gecko エンジン XUL UI ホーム
Firefox
新しい Gecko エンジン
大幅な
Firefox
Java UI ホーム 起動時間短縮
即座に操作開始可能

52. ホームと Gecko を同時ロード
以前の
Gecko エンジン XUL UI ホーム
Firefox
新しい Gecko エンジン
大幅な
Firefox
Java UI ホーム 起動時間短縮
即座に操作開始可能

53. スクロールパフォーマンス
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

54. スクロールパフォーマンス
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

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

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

57. これまでの Firefox
メインスレッド
再描画 対象要素の メモリの 変更をGPU GPUによる
イベント 再描画 データ更新 に送信 画面描画
UI はプロセス分離
していたが重かった

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

59. Flash もサポート
今回から Flash にも対応
API のドキュメントなく苦労…
使ってる側のソース読みまくり…

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

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

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

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

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

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

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

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

68. いいね！
フォクすけもお気に入り

70. Android ブラウザの
あらたな定番に！

71. Marketplace

72. まーけっとぷれいす？
フォクすけに教えて！

73. Mozilla Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定とかじゃない
今年中に正式リリース予定
現在コミュニティメンバー限定、
Firefox 開発版ユーザ向け
http://marketplace.mozilla.org/

74. オープンなアプリストア
全てを Web 技術で実装
安定・平等な環境を提供
ベンダー非依存
アプリストア、認証、課金 ...
ブラウザ非依存
後方互換ダッシュボード
https://persona.org/

75. どんなかんじ？
フォクすけに教えて！

76. http://marketplace.mozilla.org/

77. http://marketplace.mozilla.org/

78. http://marketplace.mozilla.org/

82. ですくとっぷアプリも
これからは WWeebb 技術で！
ブラウザの枠にはもう
縛られない時代ですね

83. すまほではどうなの？
フォクすけに教えて！

84. Android でも実装済み
開発版で実装済み

85. Java アプリ同様インストール
ホームスクリーンに追加
ネイティブアプリと同じ
ブラウザと独立して起動
省メモリのためプロセスは共有

86. ほんとに WWeebb が
まるちプラットフォーム
PC もスマホも1つの
アプリを配信できる！

87. Boot to Gecko

88. Firefox OS

89. キツネがおーえす？
フォクすけに教えて！

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

93. スクリーンショットは初期の画面です

94. ステータスバーも
(電波強度、電池残量...)
電話や SMS の送受信も
もちろん Firefox も
カメラを使うのも
写真やビデオを見るのも
その他いろんなアプリも
マーケットプレイスも
スクリーンショットは初期の画面です

95. ステータスバーも
(電波強度、電池残量...)
電話や SMS の送受信も
もちろん Firefox も
カメラを使うのも
写真やビデオを見るのも
その他いろんなアプリも
マーケットプレイスも
すべて Web 技術で！
スクリーンショットは初期の画面です

96. 開発パートナーと製品化
Telefónica が来年初め発売
世界 3∼4 位のキャリア
最初はブラジルで発売予定
Qualcomm のチップを使用
端末製造は ZTE や TCL
and more...

97. パートナー企業 (一部)
一部です。配置に意味はありません。念のため。

98. 乞うご期待。