Web=OS − Firefox OS
efsta12 × html5j
by Tomoya ASAI (dynamis)
Last Update: 2013/02/22

about:me

Tomoya ASAI
Mozilla Japan
Technical Marketing (Evangelist)
dynamis @ community
dynamis.jp
@dynamitter
facebook.com/dynamis
mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

about:mozilla

about:foxkeh

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

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

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

about:lesserpanda

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

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

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

Topics

Topics
Background
Web Platform
Firefox OS
Marketplace
App Dev (slides only)

Background

現在のアプリエコシステム
アプリマーケットで配信
iOS <=> App Store
Android <=> Google Play
Windows <=> 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

"HTML5" の目的
アプリ のための HTML
HTML は文書専用じゃない
互換性 のある実装に
ブラウザの挙動を厳密に定義
マルチデバイス 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 遅い

Web Platform

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 年にはできなかったことの一例

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

Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Micro-
Data
Server-
Sent ev.
Web
Sockets
Web
Storage
HTML5HTML5
Parser
Mouse,
Key ev.
XHTML5
Web
Workers
Web
Messag-
ing
WAI-
ARIA
W3C
WHATWG
HTML

Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Micro-
Data
Server-
Sent ev.
Web
Sockets
Web
Storage
Layout
Media
Queries
HTML5
CSS3~Trans
form
Anim
ation
Regions
Filters
HTML5
Parser
Mouse,
Key ev.
XHTML5
Web
Workers
Web
Messag-
ing
WAI-
ARIA
W3C
WHATWG
HTML

Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Micro-
Data
WebGL
Indexed
DB
SVG
Server-
Sent ev.
Web
Sockets
Web
Sockets
Geo-
location
FileAPI
Web
Storage
XHR2
Math
ML
Layout
Media
Queries
HTML5
CSS3~Trans
form
Anim
ation
Regions
Filters
HTML5
Parser
Mouse,
Key ev.
ECMA
Script
CSP
SPDY
XHTML5
Orien-
tation
Web
Workers
Web
Messag-
ing
DOM4
SMIL Vibra-
tion
XPath
RSS
OGP
WAI-
ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
HTML
DNT

Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Webm
H.264
Micro-
Data
WebGL
Web
SQL
Indexed
DB
SVG
Server-
Sent ev.
Web
Sockets
Web
Sockets
Geo-
location
FileAPI
Web
Storage
XHR2
Math
ML
Web
Audio
Layout
Media
Queries
HTML5
CSS3~Trans
form
Anim
ation
Regions
Filters
HTML5
Parser
Mouse,
Key ev.
Opus
ECMA
Script ECMA
6th
USB
CSP
SPDY
WebCL
Web
RTC
Net
Info
MP3
Device
Storage
TCP
Socket
NFC
File
Sys
Notifi-
cation
XHTML5
Orien-
tation
Web
Workers
Web
Messag-
ing
DOM4
SMIL Vibra-
tion
Proxi-
mity
XPath
RSS
RDF
OGP
Schema
.org
WAI-
ARIA
W3C
WHATWG
other
Khronos
ECMA
IETF
WOFF
Battery
Status
Radio
Tel
HTML
DNT
Flex
Box

H.264
Indexed
DB
FileAPI
Web
Audio
CSS3~
Opus
ECMA
6th
CSP
Web
RTC
Net
Info
Device
Storage
TCP
Socket
File
Sys
Notifi-
cation
Proxi-
mity
Battery
Status
Radio
Tel
DNT
SPDY
この辺りが
2012 年の進化
Regions
Filters
Flex
Box
今年はもっと！

JavaScript の進化
次世代 JS への移行
Firefox が最も実装進んでる
慣れると現 JS 書くのがツライ
高速化やデバッグ容易化
Class, TypedArray, ParallelArray ...
静的解析でコンパイル時エラーを
出しやすい言語仕様に

JavaScript は進化を続ける！
すべて問題解決してきた
速度遅い → 高速化
ミス多発 → Strict Mode
スレッドがない → Workers
GPU 使えない → WebGL, WebCL
Class 使いたい → 入るよ
*** できない → 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 形式に変換

ストレージ系の進化
IndexedDB
Local Storage は縮小化の方向
FileReader, FileHandle
FileWriter, FileSystem も？
Device Storage
Archive (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 Animation
Canvas 2D, WebGL
SVG & SMIL
CSS 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 Data
Web 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 Event
Vibration
Gamepad
Pointer Lock
ポインタを隠して移動量を取得

Banana Bread
ファーストパーソンシューティング
３D ゲームも普通に動作します
https://developer.mozilla.org/ja/demos/detail/bananabread

センサー系の進化
従来からの Web API
Geolocation (位置情報)
Orientation (加速度)
Sensor API
Ambient Light (環境光)
Proximity (近接)
Android 版 Firefox は実装済み

ネットワーク系の進化
WebSocket
Server-Sent Event
SPDY v2, v3 ... HTTP 2.0
WebRTC - Peer to Peer
TCP Socket, HTTP-cache
UDP Datagram Socket

Browser Quest
リアルタイムに多人数で同時プレイ (MMORPG)
柔軟な画面サイズ対応と双方向通信による
http://browserquest.mozilla.org/

デバイス間連携の進化
Web Activities
Push Notification
Web Intents (終了)
この辺の話はカエルさん(小松さん)に聞きましょう

デバイス間連携はこれから本番
Mozilla:
Web Activities!
Google:
Web Intents!
Google:
Web Intents やーめた！
Mozilla:
Web Activities は続けるよ！
この辺の話はカエルさん(小松さん)に聞きましょう

Social 連携の進化
Social API
Firefox×Facebook 導入済み
マルチプロバイダ対応
mixi, CliqZ, MSN Now, Weibo...
用途は "Social" に限らない
ある意味サイドバー API...

ステータス系の進化
WiFi Information
Mobile Connection
Network Info (通信速度等)
Battery Status
電池残量に応じた処理を

ハードウェア系の進化
Bluetooth
USB
USB file-reading
FM Radio
NFC

System 系の進化
Resource Lock
スリープや WiFi オフなどの禁止
Settings (システム設定)
Alarm (時刻指定処理)
Background Service
Idle, 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/

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

Firefox OS

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

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

シンプル＆スマート
Web プラットフォームの実行環境としては圧倒的にスマート！
WHAT IS FIREFOX OS?
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

Web ＝ アプリマーケットへ
Open Web Apps
Web アプリのインストール API
Firefox Marketplace
オープンなマーケットの提供
Web Payments
オープンな課金 API の実装

Mozilla は Web エンジンに注力
ビジネスは自由に
独自 Market や自己配布も可能
決済手段も自由に
ベンダー、決済手段、認証システ
ムに依存しない Payment API
ハードは Android と共通
HAL は Android と共通化

独占的プラットフォーム
からオープンな Web へ
開発者/OEM/キャリア
Apple
App Store
iPhone/iPad
ユーザ
Google
Play
端末
ユーザ
MS
Marketplace
端末
ユーザ
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/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firefox OS...
同じコードでどこでも動く
マーケットもマルチデバイス

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

アプリ内に直接ジャンプ

Web らしいシステムだね！

いつアプリ作るか？

いつアプリ作るか？

App Dev

Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと３回

Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと３回

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

アプリ開発の流れ
普通に Web 開発
デバッグもいつも通り
manifest ファイルを用意
メタ情報を JSON 形式で記載
シミュレータや実機テスト
PC で動かない API は実機で確認
Vibration や Sensor など...
https://github.com/dynamis/firefoxos/wiki/simulator

manifest.webapp 追加するだけ
Hosted App
Web から読み込むアプリ
Web サイト + manifest.webapp
Packaged App
従来型のダウンロードアプリ
サイト全体を ZIP するだけ

manifest.webapp ファイル
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

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 にリダイレクト)

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