Toward Firefox OS

Slides @ OSC Kyoto 2012 on 2012/08/04by Tomoya Asai (dynamis)

Firefox OS

Last Update: 2012/08/05

about:

about:dynamisMozilla Japan

http://dynamis.jp@dynamitter

facebook.com/dynamisレッサーパンダが好き。

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

きょうのおはなし

うぇぶぷらっとふぉーむ

すまほでキツネさん

まーけっとぷれいす

キツネさんのおーえす

Web Platform

みんな ""HHTTMMLL55"" に何を期待してるの？

フォクすけに教えて！

既存の独自プラットフォーム

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

Web プラットフォームvs 独自プラットフォーム

「ブラウザ戦争」の時代じゃないですよ

今後は Web プラットフォーム

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

Web がプラットフォームなら業界標準技術でアプリ環境が統一される

"HTML5" の現状

"HTML5" > HTML > HTML5実装や仕様策定に伴い "HTML5" の領域は広がり続けている

Web がプラットフォーム本格的アプリ開発が可能にOS に代わるプラットフォーム

これで十分？

フォクすけに教えて！

Web ではできなかったこと

システムステータスWiFi 情報, モバイル通信...

各種センサー光センサー, 近接センサー...

低レベルハードウェア制御USB, BlueTooth, NFC...

やりましょう！

ってもじらが言ってる

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

次世代 Web =

次世代 Web =

CSS3

次世代 Web =

CSS3 DOM4

次世代 Web =

CSS3 DOM4

HTML5

次世代 Web =

CSS3

ECMAScript 6th

DOM4

HTML5

次世代 Web =

CSS3

ECMAScript 6th

DOM4

HTML5

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

SemanticElements

MultiMedia

HTML5Forms

OfflineSupportHTML5HTML5

Parser

Mouse,Key ev.

XHTML5WAI-ARIA

W3C

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

Server-Sent ev.

WebSockets

WebStorage

HTML5HTML5Parser

Mouse,Key ev.

XHTML5

WebWorkers

WebMessag-

ing

WAI-ARIA

W3C

WHATWG

HTML

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

Server-Sent ev.

WebSockets

WebStorage

LayoutMedia

Queries

HTML5

CSS3~Transform

Animation Regions

FlexBox

HTML5Parser

Mouse,Key ev.

XHTML5

WebWorkers

WebMessag-

ing

WAI-ARIA

W3C

WHATWG

HTML

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Micro-Data

WebGL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

LayoutMedia

Queries

HTML5

CSS3~Transform

Animation Regions

FlexBox

HTML5Parser

Mouse,Key ev.

ECMAScript

CSP

SPDY

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

XPathRSS

OGP

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

HTML

DNT

SemanticElements

MultiMedia

Canvas

HTML5Forms

OfflineSupport

Webm

H.264

Micro-Data

WebGL

WebSQL

IndexedDB

SVG

Server-Sent ev.

WebSockets

WebSockets

Geo-location

FileAPI

WebStorage

XHR2

MathML

WebAudio

LayoutMedia

Queries

HTML5

CSS3~Transform

Animation Regions

FlexBox

HTML5Parser

Mouse,Key ev.

Opus

ECMAScript ECMA

6th

USB

CSP

SPDY

WebCL

WebRTC

NetInfo

MP3

DeviceStorage

TCPSocket

NFC

File Sys

Notifi-cation

XHTML5

Orien-tation

WebWorkers

WebMessag-

ing

DOM4

SMIL Vibra-tion

Proxi-mity

XPathRSS

RDF

OGPSchema

.org

WAI-ARIA

W3C

WHATWG

other

Khronos

ECMA

IETF

WOFF

BatteryStatus

Radio

Tel

HTML

DNT

Web API

Web の限界を押し進めるHTML5 など基本以外の APIAPI の総称であって定義はない

https://wiki.mozilla.org/WebAPI

以前からある Web API

Geolocation (位置情報)Orientation (加速度) Audio Data APIWebGL (3D グラフィック)Camera API (Media Capture)

これらはもちろん Android 版 Firefox でも実装済み

実装済みの Web API

SMS, Telephony, AlarmMobile Connection, WiFi Info,Network Info (通信速度等),Contacts, Settings, Time/ClockIdle, Battery StatusResource Lock (スリープ禁止)

まだ不完全な実装の API も一部含む

実装済みの Web API

Vibration, Pointer LockAmbient Light (環境光),Proximity (近接),Mouse Lock (移動量取得)Device Storage, BrowserOpen Web Apps, DOM Crypt

まだ不完全な実装の API も一部含む

現在実装中の Web API

WebRTC (Camera, P2P 含む)Web Activities (Intent)Push NotificationPower ManagementTCP Socket, BluetoothFM Radio, Permission

https://wiki.mozilla.org/WebAPI

実装見込みの Web API

UDB Datagram SocketHTTP-cache, LogUSB, NFC, USB file-readingBackground Service...and more...

https://wiki.mozilla.org/WebAPI

検討中の WebAPI

Magnetic FieldTime/Clock (時刻設定)CalendarSpellcheck...and more...

WWeebb がプラットフォーム！

WWeebb が おーえす！

Web API も Web 標準

W3C DAP (Device API) WGW3C System Apps WGIETF/W3C WebRTC WGマルチメディア系や P2P など

その他それぞれの WG で

仕様無き実装は不幸の種

実装無き仕様は机上理論

もうかなりできてる！

って MMoozziillllaa が言ってる

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

Firefox for Android

すまほでもキツネ？

フォクすけに教えて！

モバイル Web の問題

WebKit 寡占で OK？機能限定版で OK？

モバイルにも選択と競争を

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

やりましょう！

って MMoozziillllaa が言ってる

Mozilla は最近モバイル頑張ってるみたいです

Firefox for Mobile 当初の目標

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

Firefox for Mobile の評価

同期機能が便利！フル機能のブラウザ！アドオンでカスタマイズ！

Firefox for Mobile への要望

起動時間を短くFlash をサポートもっとサクサクにもっとヌルヌルに・・・もっともっともっと...

すばらしく高速で使いやすくなった！

ってもじらが言ってる

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

Firefox for Android を再設計

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

大幅短縮した起動時間

ホーム画面の表示までにかかる時間を比較

Firefox 10 Firefox 14

４割短縮

(UI の表示はもっと速い)

ホームと Gecko を同時ロード

ホームGecko エンジン以前のFirefox

新しいFirefox

XUL UI

即座に操作開始可能

ホームJava UI

Gecko エンジン

ホームと Gecko を同時ロード

ホームGecko エンジン以前のFirefox

新しいFirefox

XUL UI

即座に操作開始可能

大幅な起動時間短縮ホームJava UI

Gecko エンジン

ホームと Gecko を同時ロード

ホームGecko エンジン以前のFirefox

新しいFirefox

XUL UI

即座に操作開始可能

大幅な起動時間短縮ホームJava UI

Gecko エンジン

スクロールパフォーマンス

0fps 11fps 22fps

9.6

11.9

13.9

14.2

20.5

10.2

Eideticker - cnn.com on Galaxy Nexus, Android 4.0.4

Firefox10

Firefox14

Opera

Chrome

Dolphin

Default

スクロールパフォーマンス

0fps 11fps 22fps

9.6

11.9

13.9

14.2

20.5

10.2

Eideticker - cnn.com on Galaxy Nexus, Android 4.0.4

Firefox10

Firefox14

Opera

Chrome

Dolphin

Default 1.5倍高速

HTML5 Canvas パフォーマンス

0fps 10fps 20fps 30fps 40fps

12

14.1

19.6

21.6

39.3

13.2Firefox10

Firefox14

Opera

Chrome

Dolphin

Default

Eideticker - Canvas on Galaxy Nexus, Android 4.0.4

HTML5 Canvas パフォーマンス

0fps 10fps 20fps 30fps 40fps

12

14.1

19.6

21.6

39.3

13.2Firefox10

Firefox14

Opera

Chrome

Dolphin

Default

Eideticker - Canvas on Galaxy Nexus, Android 4.0.4

3倍以上高速

これまでの Firefox

UI はプロセス分離していたが重かった

再描画イベント

対象要素の再描画

GPUによる画面描画

変更をGPUに送信

メモリのデータ更新

メインスレッド

生まれ変わった Firefox

再描画イベント

対象要素の再描画

メモリのデータ更新

メインスレッド

GPUによる画面描画

変更をGPUに送信

タッチ etcイベント

UI 周りの処理 画面の更新ゼロからJavaで書き直し

フロントエンドUIや要素の描画を別スレッドに分離して応答性向上

従来のプロスセス分離は重いので取り止めた

Flash もサポート

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

バックグラウンド同期

常に最新のデータを同期同期用のサービスを実装Firefox 起動せずに同期可能に

片手でも使いやすい UI

親指１つで快適ブラウズメニュー、タブ、バー、ページ...

見たいページに即アクセススマートスクリーンよく見るページのリストブックマークやタブも同期

片手でも使いやすい UI

親指１つで快適ブラウズメニュー、タブ、バー、ページ...

見たいページに即アクセススマートスクリーンよく見るページのリストブックマークやタブも同期

パソコンと簡単同期

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

アドオンでカスタマイズ

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

アドオンでカスタマイズ

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

トラッキング拒否に対応

Do Not Track に対応Yahoo!, Twitter, 広告業界などは既に対応を開始

パスワードの暗号化保存

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

いいね！

フォクすけもお気に入り

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

Marketplace

まーけっとぷれいす？

フォクすけに教えて！

Mozilla Marketplace

Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定とかじゃない

今年中に正式リリース予定現在コミュニティメンバー限定、Firefox 開発版ユーザ向け

http://marketplace.mozilla.org/

オープンなアプリストア

全てを Web 技術で実装安定・平等な環境を提供

ベンダー非依存アプリストア、認証、課金 ...

ブラウザ非依存後方互換ダッシュボード

https://persona.org/

どんなかんじ？

フォクすけに教えて！

http://marketplace.mozilla.org/

http://marketplace.mozilla.org/

http://marketplace.mozilla.org/

ですくとっぷアプリもこれからは WWeebb 技術で！

ブラウザの枠にはもう縛られない時代ですね

すまほではどうなの？

フォクすけに教えて！

Android でも実装済み

開発版で実装済み

Java アプリ同様インストール

ホームスクリーンに追加ネイティブアプリと同じ

ブラウザと独立して起動省メモリのためプロセスは共有

ほんとに WWeebb がまるちプラットフォーム

PC もスマホも1つのアプリを配信できる！

Boot to Gecko

Firefox OS

キツネがおーえす？

フォクすけに教えて！

Firefox OS (Boot to Gecko)

Gecko WebRT を起動Linux Kernel 上に Gecko をJava VM などの中間レイヤなし

Web 技術が「ネイティブ」HTML5, JavaScript, Web API...ホーム画面もすべて Web 技術で

Gecko は Firefox の描画エンジン、WebRT = Web Runtime

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

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

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

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

すべて Web 技術で！スクリーンショットは初期の画面です

開発パートナーと製品化

Telefónica が来年初め発売世界 3～4 位のキャリア最初はブラジルで発売予定Qualcomm のチップを使用端末製造は ZTE や TCL

and more...

パートナー企業 (一部)

一部です。配置に意味はありません。念のため。

乞うご期待。