Web=OS − Firefox OSefsta12 × html5j

by Tomoya ASAI (dynamis)

Last Update: 2013/02/22

about:me

Tomoya ASAI

Mozilla JapanTechnical Marketing (Evangelist)

dynamis @ communitydynamis.jp

@dynamitter

facebook.com/dynamis

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

about:mozilla

about:foxkeh

いつか僕も Firefox みたいな立派なブラウザになるんだ！

9$PGH(%

サーバ (Apache Camel) の上にクライアント (Firefox)

�������

�������

Firefox のステッカーを君のPC とスマホに貼ってね！

��������B>A'$5�

about:lesserpanda

ある日の Mozilla Corporation オフィスです

ある日の Mozilla Corporation オフィスの一室です

ある日の Mozilla Corporation オフィスの一室です

Topics

Topics

BackgroundWeb PlatformFirefox OSMarketplaceApp Dev (slides only)

Background

2 '/��� ���

現在のアプリエコシステム

アプリマーケットで配信iOS <=> App StoreAndroid <=> Google PlayWindows <=> Windows Store

販売、アプリ内課金、広告課金の手数料は 30% が標準その他アフィリエイトなど

既存エコシステムの課題

OS 毎のアプリ開発が必要言語や API は OS に依存iOS/Windows は UI 制限も強い

WebView はサブセットWebView << Native追加 API も標準化されない

継続性、互換性、実装依存…

既存マーケットの課題

独占的マーケット恣意的・排他的レビュー (iOS)ユーザに直接リーチできない

独占的課金システム他の課金システム利用不可 (iOS)手数料は原則 30%Paypal (2.9~3.6%+¥40) の10倍！

独自プラットフォーム

プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

i a f c

)&0��� ���+5�

"HTML5" の目的

アプリ のための HTMLHTML は文書専用じゃない

互換性 のある実装にブラウザの挙動を厳密に定義

マルチデバイス Webどこでも同じ Web 技術で

Web 標準プラットフォーム

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

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

It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, ... all at

once didn't work.

by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166

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

by Tim Berners-Lee: http://dig.csail.mit.edu/breadcrumbs/node/166

Web Platform への期待

次世代プラットフォームWeb 技術で何でも可能に

マルチデバイス対応開発言語や API の共通化

ベンダー非依存の標準自由で持続性のある API

Web が共通プラットフォーム

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

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

標準技術 のオープンな世界vs

独自技術 による囲い込み

「ブラウザ戦争」の時代はとっくに終わりました

多くの開発者が "HTML5" に79% が "HTML5" を採用21% が Native だけで開発

但しその殆どは Hybrid同調査では 72% が Hybridこれまでの Web は力不足だった

"HTML5" に期待するアプリ開発者

Appcelerator&IDC 2012Q1 http://www.appcelerator.com/thinkmobile/surveys/

開発者の多いプラットフォーム

調査にも依るけど HTML5 開発者の方が圧倒的に多い

800万人

45万人10万人

Web Platform の課題

機能的な制約デバイスやシステム系の API 不足

パフォーマンスJava などに比べても数倍遅い

アプリ配信と課金Market や Payment の標準がない

マイクロベンチなら JS ~= Java に追いついたが実アプリレベルでは JS 遅い

2 4!'3#=�

Web Platform

�������"beY\(@?'�>�

Web 技術 = Native へ

Web 技術が「ネイティブ」HTML/CSS/JS ですべて可能に新しい API は W3C 標準化

速度も Java に追いつく単純な演算程度なら既に同程度WebGL や DOMCrypt なども活用asm.js で大規模アプリも高速化

Web 技術だけですべてが済むプラットフォームとなるよう発展中

Web で可能になってること

マルチメディアAudio, Video, Animation, 3D ...

アプリケーションOffline, Storage, Indexed DB...

高度な通信制御双方向通信, Server-Sent Event...

2011 年にはできていたことの一例

Web ではできなかったこと

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

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

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

2011 年にはできなかったことの一例

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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

Layout

MediaQueries

HTML5

CSS3~Transform

Animation

Regions

Filters

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

FlexBox

H.264

IndexedDB

FileAPI

WebAudio

CSS3~

Opus

ECMA6th

CSP

WebRTC

NetInfo

DeviceStorage

TCPSocket

File Sys

Notifi-cation

Proxi-mity

BatteryStatus

Radio

TelDNT

SPDY

この辺りが2012 年の進化

Regions

Filters

FlexBox

今年はもっと！

JavaScript の進化

次世代 JS への移行Firefox が最も実装進んでる慣れると現 JS 書くのがツライ

高速化やデバッグ容易化Class, TypedArray, ParallelArray ...静的解析でコンパイル時エラーを出しやすい言語仕様に

JavaScript は進化を続ける！

すべて問題解決してきた速度遅い → 高速化ミス多発 → Strict Modeスレッドがない → WorkersGPU 使えない → WebGL, WebCLClass 使いたい → 入るよ*** できない → API 増加中

写真は JavaScript の父 Brendan Eich (Mozilla CTO) です

asm.js でネイティブ並の速度に

重い処理も asm.js で C の 1/2 程度までJava や C# と同程度の処理速度

Unreal Engine on Browser

100 万行以上の C & OpenGL コードを移植LLVM + Emscripten で asm.js 形式に変換

ストレージ系の進化

IndexedDBLocal Storage は縮小化の方向

FileReader, FileHandleFileWriter, FileSystem も？

Device StorageArchive (ZIP 読み出し)

File System API 周りの話

Google:ネイティブと一緒で良いじゃんファイルシステム使おうぜ！

Mozilla:ファイルシステムなんて前近代的抽象化したコレクションにすべき

現在のところ平行線…

デザイン機能の進化

レイアウトGrid, Regions, Exclusions...Flexbox (XUL 的レイアウト)

フィルターSVG Filter, CSS Filter

CSS 構文の進化@document, variable ...

CSS Exclusions

自由な形の領域にテキストを流し込めますChrome Canary - http://html.adobe.com/webstandards/cssexclusions/

CSS Regions

複数領域にテキストを流し込み方向やサイズに応じたレイアウトも簡単

Chrome Canary - http://html.adobe.com/webstandards/cssregions/

CSS Filters

ぼかしや色調整などのフィルタ効果や曲げたり回したり変形も自由自在に

Chrome Canary - http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

SVG Filter & CSS Filter

Mozilla:既にある SVG 使おうぜ！

WebKit:SVG なんてシラネ。俺は何でも CSS でやるぜ！

Mozilla:仕方ないな…

アニメーションの進化

乱立しすぎ＆連携無しJavaScript AnimationCanvas 2D, WebGLSVG & SMILCSS Transitions, Animations

Web Animations で連携へ

Web Animations へ

Apple (Flash 代替技術として):CSS でアニメーション！

Mozilla & Opera:ダメ構文は直して標準化

Mozilla, Google, Adobe:JS と一括管理できる API 作ろう

Web Animations は Mozilla Japan の Brian さん頑張ってます

マルチメディアの進化

Opus Audio Codec (RFC6716)Web Audio, Audio DataWeb Audio にも Firefox 近日対応

Camera API (Media Capture)WebRTC - getUserMedia電話会議などは簡単に

No Comply

2次元＆3次元グラフィックスと音声＆ビデオのリアルタイム処理

https://developer.mozilla.org/ja/demos/detail/no-comply

#RIO20 ECOSPHERE

Rio+20 に関するツイートをグループ化時間の流れに応じて増えていく様子を可視化

http://cnn-ecosphere.com/

WebRTC (getUserMedia)

カメラを使ったデータ処理も可能ビデオ会議やリアルタイム動画分析に

Nightly (要設定変更) - https://people.mozilla.com/~anarayanan/webrtc/

インタラクティブ系の進化

Touch EventVibrationGamepadPointer Lockポインタを隠して移動量を取得

Banana Bread

ファーストパーソンシューティング３D ゲームも普通に動作します

https://developer.mozilla.org/ja/demos/detail/bananabread

センサー系の進化

従来からの Web APIGeolocation (位置情報)Orientation (加速度)

Sensor APIAmbient Light (環境光)Proximity (近接)Android 版 Firefox は実装済み

ネットワーク系の進化

WebSocketServer-Sent EventSPDY v2, v3 ... HTTP 2.0WebRTC - Peer to PeerTCP Socket, HTTP-cacheUDP Datagram Socket

Browser Quest

リアルタイムに多人数で同時プレイ (MMORPG)柔軟な画面サイズ対応と双方向通信による

http://browserquest.mozilla.org/

デバイス間連携の進化

Web ActivitiesPush NotificationWeb Intents (終了)

この辺の話はカエルさん(小松さん)に聞きましょう

デバイス間連携はこれから本番

Mozilla:Web Activities!Google:Web Intents!Google:Web Intents やーめた！Mozilla:Web Activities は続けるよ！

この辺の話はカエルさん(小松さん)に聞きましょう

Social 連携の進化

Social APIFirefox×Facebook 導入済み

マルチプロバイダ対応mixi, CliqZ, MSN Now, Weibo...

用途は "Social" に限らないある意味サイドバー API...

ステータス系の進化

WiFi InformationMobile ConnectionNetwork Info (通信速度等)Battery Status電池残量に応じた処理を

ハードウェア系の進化

BluetoothUSBUSB file-readingFM RadioNFC

System 系の進化

Resource Lockスリープや WiFi オフなどの禁止

Settings (システム設定)Alarm (時刻指定処理)Background ServiceIdle, Log

セキュリティ面での進化

Content Security Policy特に XSS 対策に有効Firefox 4~ や Chrome 実装済み

Permission APIアプリが使える API も管理アプリ毎の権限を制御可能に

アプリの権限管理はユーザが自由に制御可能重要な API は実行時にユーザに許可を求める

アプリの権限管理

Web 標準を充実させよう！

Web = Native に不足機能はすべて定義・実装

W3C の WG などで標準化実装と平行して標準化Device API, System Apps...そのほか IETF などでも

https://wiki.mozilla.org/WebAPI

Web API の標準化

Device API, System Application, Web Apps WG が主実装面では圧倒的に Firefox がリードしている

FYI: http://www.w3.org/Mobile/mobile-web-app-state/

QTEJ6Z_!?RTMOPG�S8

僕はまず立派なブラウザになりいつかは立派な OS にならなきゃ

Firefox OS

����"����43-,=-*�

ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も

その他なんでも...

ステータスバー (通知、電波強度、電池残量...)もカメラやラジオもビデオや音楽の再生もマーケットプレイスもシステムの環境設定もホーム画面や壁紙も電話や SMS の送受信ももちろん ブラウザ も

その他なんでも...

すべて Web 技術で！

シンプル＆スマート

Web プラットフォームの実行環境としては圧倒的にスマート！

WHAT IS FIREFOX OS?

6

HOW IS IT DIFFERENT FROM ANDROID

HTML5 User Experience/

Content

Kernel

Device

Web Engine/ Standard

Device APIs

Firefox OS

Web Browser/ Platform

Native API-based UI

Kernel (e.g. Android, iOS,

Win7, etc.)

Device (phone, tablet,

desktop)

APIs

Android

Firefox OS のアーキテクチャWHAT IS FIREFOX OS: ARCHITECTURE OVERVIEW

Web API

I/O (hardware & data stores)

Boot to Gecko (b2g)

Device hardware

Low-level processes, proxies & daemons (rild, mediaserver, netd, etc.)

Gecko

Gaia

Gonk

Device

Gecko Parent

Permission Manager Access Control List

Credential Validation

Permissions Store

Web Content (App)

Execution Environment

Gecko child

Firefox OS とセキュリティ

ユーザがアプリ権限管理可インストール時と実行時に権限を許可するハイブリッド方式「インストール時に全て許可」ではプライバシーは守れなかったユーザが理解できプライバシーなどに関わる API は実行時確認

Developer Preview Phone

来週ストアオープンKeon:Snapdragon 1GHz, 4GB ROM, 512MB RAM, 3.5" HVGA

Peak:Snapdragon 1.2GHz x2, 4GB ROM, 512MB RAM, 4.3" qHD

http://www.geeksphone.com/

Developer Preview Phone

Telefónica と Geeksphone が作る開発者向けテスト端末

開発パートナーと製品化

KDDI, Telefónica ...世界の主要 18 キャリアZTE, Alcatel, LG, Huawei, Sony...

6 月に 5ヶ国で発売予定スペイン、ブラジル、ベネズエラ、ポーランド、ポルトガル

2013 年中に更に 11ヶ国

日本や北米では 2013~2014 のタイムフレームで発売予定

MWC で発表したパートナー

主要なキャリア、端末メーカー、チップメーカーなど

端末＆チップメーカー

SONY Mobile は Telefónica と Firefox OS について提携

いつ Web にするか？

いつ Web にするか？

Marketplace

DRUFIKLNS7�

Web ＝ アプリマーケットへ

Open Web AppsWeb アプリのインストール API

Firefox Marketplaceオープンなマーケットの提供

Web Paymentsオープンな課金 API の実装

Mozilla は Web エンジンに注力

ビジネスは自由に独自 Market や自己配布も可能

決済手段も自由にベンダー、決済手段、認証システムに依存しない Payment API

ハードは Android と共通HAL は Android と共通化

独占的プラットフォームからオープンな Web へ

開発者/OEM/キャリア

AppleApp Store

iPhone/iPad

ユーザ

GooglePlay

端末

ユーザ

MSMarketplace

端末

ユーザ

market 開発者/OEM// キャリア

ユーザ端末

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

Firefox OS によるOpen プラットフォーム

Firefox Marketplace

Device, OS 横断マーケットWeb Platform のためのストアFirefox 限定にならない設計

現在開発者向けに公開中Firefox OS と Android 版 Firefox の開発版ユーザが対象PC で使うには UA 書き換え...

https://marketplace.firefox.com/

オープンなアプリストア

全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開

ベンダー非依存Firefox Marketplace 以外にもストア、認証、課金も自由に

https://marketplace.firefox.com/

Marketplace パートナーの例

多数のパートナーのうち一例です

Firefox ＝ WebRT (WebRunTime)

Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JS

マルチデバイス対応PC, Android, Firefox OS...同じコードでどこでも動くマーケットもマルチデバイス

2A�2[1<dg'�

Android に Web アプリ環境

Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験

Firefox = WebRT for Android

ホームにインストール、アプリを起動した画面、マーケットをブラウズ

PC にも Web アプリ環境

Web App = Native App にプログラムフォルダ (アプリケーションディレクトリ) への追加ウィンドウはもちろんプロセスもデータも全て独立

Firefox = WebRT for PC

Web = Marketplace

Marketplace に縛られないWeb はアクセスすれば使えるMarketplace のアプリでなくともアプリ内課金 API が利用可能

Web/Marketplace 横断検索Firefox Marketplace に登録されていないアプリも見つけられる

アプリも「ぐぐる」時代へ

"まずインストール" は古いディレクトリ(分類)だけのマーケットでは Google 以前の Web

動的な Web アプリ環境インストール不要で使える検索も Market / Web 横断検索

*1 everything.me ってサービスだから正確には「えぶる」かも？

*1

Marketplace

Web

アプリ内に直接ジャンプ

����bc":�%-1�

Web らしいシステムだね！

いつアプリ作るか？

いつアプリ作るか？

App Dev

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

いつもの開発ツールいつものエディタいつものライブラリ

�.<1W`+!?Va+5�

アプリ開発の流れ

普通に Web 開発デバッグもいつも通り

manifest ファイルを用意メタ情報を JSON 形式で記載

シミュレータや実機テストPC で動かない API は実機で確認Vibration や Sensor など...

https://github.com/dynamis/firefoxos/wiki/simulator

manifest.webapp 追加するだけ

Hosted AppWeb から読み込むアプリWeb サイト + manifest.webapp

Packaged App従来型のダウンロードアプリサイト全体を ZIP するだけ

manifest.webapp ファイル"$$������A�746+*289��$$���� ��������A�'/746+*)>.289.%��$$����� �������A������ �������$$�� ����A"$$$$�����A��� ������ ������������$$#�$$�����������A"$$$$������A��!�������$$$$�����A��������!����������$$#�$$����������� ����A����#��A?<A;&5:713:,A�A�A����� �����A@=0-(

https://developer.mozilla.org/en-US/docs/Apps/Manifest

Firefox OS Simulator

再起動不要の拡張機能https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/ポチッと押すだけWeb 開発メニューに追加されるFirefox デスクトップビルド＋プロファイル＋Alpha

詳しい解説: https://github.com/dynamis/firefoxos/wiki/simulator

Firefox OS Simulator (r2d2b2g)

プロファイル付きデスクトップビルドにホームボタンを追加コンソールやディレクトリからアプリケーションを読み込む機能も

シミュレータにインストール

Add Directory ボタンmanifest ファイルを選択zip されて packaged app としてインストールされ、起動する

Update ボタンで更新同じディレクトリのファイルを zip し直して、起動する

https://github.com/dynamis/firefoxos/wiki/simulator

.�@#-11!7�

Firefox OS 標準のライブラリとかあるの？

GAIA Building Blocks (UI 部品)

Gaia (Firefox OS 標準) Appsのデザインを簡単に作れるhttp://buildingfirefoxos.com/

使っても使わなくても OK好きな SDK/Library 使える自由な Web ですから！

http://buildingfirefoxos.com/

For More Info

Firefox OS コミュニティを！

http://FxOS.org/(https://groups.google.com/group/firefoxos にリダイレクト)

http://FxOS.org/wiki(https://github.com/dynamis/firefoxos/wiki にリダイレクト)

;C3]X'/5�;C3>A'$�

ぼくには難しいことは分からないけど許してね。

^f�@�