1. Firefox OS: Blaze Your Own Path
Slides @ ABC 2013 Spring
by Tomoya Asai (dynamis)
Last Update: 2013/03/16

2. FFiirreeffooxx OOSS で
AAnnddrrooiidd 端末の
世界が広がる！？

3. about:me

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

5. Topics

6. 本日のトピック
ぼくおやつ Background
担当ねっ！
Overview
Build & Flash
App Dev
Marketplace

7. about:foxkeh
今日もプレゼンを手伝って
くれるフォクすけを紹介します

8. ぼくフォクすけ
いつか僕も Firefox みたいな
立派なブラウザになるんだ！

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

10. 君と一緒にお出
かけしたいな！
ぼくのステッカーを君の
PC とスマホに貼ってね！

11. Background

12. 独自プラットフォーム
ネイティブアプリ
機能も速度もネイティブ優先
アプリエコシステム
制限多くビジネスの自由度低い
WebView + 独自 API
Web はサブセット扱い

13. 独自プラットフォーム
i a f c
プラットフォーム毎に異なる言語で個別の専用アプリを作る必要がある

14. 独自プラットフォームの課題
プラットフォーム依存
それぞれ異なる言語や API
不透明な継続性・再利用性
ベンダー依存の運命共同体
Fragmentation・実装依存
同一プラットフォームでも非互換

15. 独自プラットフォームの課題
プラットフォーム依存
それぞれ異なる言語や API
不透明な継続性・再利用性
ベンダー依存の運命共同体
Fragmentation・実装依存
同一プラットフォームでも非互換

16. Fragmentation...
http://i0.wp.com/cerebrux.files.wordpress.com/2012/09/
androidclones.jpg

17. "HTML5" への期待
次世代プラットフォーム
Web 技術で何でも可能に
Web アプリ開発を簡単に
API の充実と互換性確保
マルチデバイス対応
開発言語や API の共通化

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

19. 標準技術 のオープンな世界
vs
独自技術 による囲い込み
「ブラウザ戦争」の時代はとっくに終わりました

20. HTML5 = WebKit の方が良い？
それどの WebKit？
IE6 vs IE10 以上に違う現実
その API と実装で大丈夫？
複数実装でより良い標準に
イノベーションは競争から
独占が進化を止めてたよね…

21. HTML5 = WebKit の方が良い？
それどの WebKit？
IE6 vs IE10 以上に違う現実
その API と実装で大丈夫？
複数実装でより良い標準に
イノベーションは競争から
独占が進化を止めてたよね…

22. I am sad that the Web didn t handle small screens ̶
and later, touch UI ̶ that well. ... snip ...
For touch, though, I wish we had done a better job of
mapping the UI to the Web s generic events. A touch
gets mapped to a click event easily enough, but
drag-and-drop never got mapped, pinch gestures
didn t get mapped to wheel events, etc. Mainly I
think this is because the first truly successful touch
browser set the standard, and it was developed
mostly in secret with a small team many of whom,
as I understand it, weren t Web veterans.
Ian Hickson のインタビューより

23. 独占やクローズド仕様は残念…
タッチイベントが残念…
ドラッグ＆ドロップは？
ピンチとホイールの対応は？
密室で作られたから…
最初の人気タッチブラウザ実装
Web 技術知らない奴らが作った
オープンな標準は世界の英知の結晶

24. オープンな環境と競争で
イノベーションを加速！
オープンと競争は革新の源泉

25. Overview

26. FFiirreeffooxx OOSS って
どんな感じ？
フォクすけもわくわく。

31. Firefox OS = Boot to Gecko
Gecko エンジンだけ起動
Kernel 上に Gecko (Web Engine)
Java VM など不要な部分は削除
HAL 層は Android と共通
Linux 部分で独自性は必要ない
Android と同じエコシステム
プロジェクト名は今でも Boot to Gecko

32. WHAT IS FIREFOX OS?
HOW IS IT DIFFERENT FROM ANDROID
シンプル＆スマート
Firefox OS
Android
Web Browser/
Platform
HTML5 User
Native API- Experience/
based UI
Content
Web Engine/
APIs Standard
Device APIs
Kernel
(e.g. Android, iOS, Kernel
Win7, etc.)
Device
(phone, tablet, Device
desktop)
Web プラットフォームの実行環境としては圧倒的にスマート！

33. WHAT IS FIREFOX OS:
ARCHITECTURE OVERVIEW
アーキテクチャ
Gaia Web Content (App)
Gecko child
Gecko Execution
Parent Environment
Access Control
Permission Manager
List
Gecko Web API
Credential Permissions
I/O (hardware & data stores) Validation Store
Boot to Gecko (b2g)
Gonk Low-level processes, proxies & daemons
(rild, mediaserver, netd, etc.)
Device Device hardware

34. Web 技術 = Native
Web 技術が「ネイティブ」
HTML/CSS/JS ですべて可能に
新しい API は W3C 標準化
速度も Java に追いつく
単純な演算程度なら既に同程度
WebGL や DOMCrypt なども活用
時間の問題だから期待しててね！
Web 技術だけですべてが済むプラットフォームとなるよう発展中

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

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

38. 2012 年実装 Web API
Alarm File Handle Push Notifications
attention screen FM Radio Settings
Archive IdleAPI SMS
Audio Policy Mouse Lock Screen Orientation
Background Sensor Mobile Connection System XHR
Browser Network Events TCP Socket
Camera Network Stats Web Telephony
Contacts Manage Time Manager
Desktop Notification Payment Open Web Apps
Device Storage Permissions WiFi Management
Embed Apps Power Management などなど...
実装状況などのまとめ表: https://wiki.mozilla.org/WebAPI

39. Next Web API
Background Services Payment
Bluetooth-*** Quota
Calendar Resource Lock
Database Migration (temp to Simple Storage
permanent storage) Social API
FileSystem? SPDY Server Push
NFC Spellcheck
HTTP-cache UDB Datagram Socket
Keyboard/IME USB (low-level)
Log USB file-reading
MPEG DASH WebRTC - Camera
Open Web Apps WebRTC - P2P
Parallel Array などなど...
どこまで今年中にサポートされるか楽しみ！

40. Firefox OS の魅力
スリムな HTML5 実行環境
$100 でもフル機能のスマホを
今後の高速化もし易い設計
圧倒的な開発者数
Web 技術だけですぐアプリ開発
ハイブリッド権限管理
インストール時 or 実行時の許可
急速な高速化が続き、型推論の効く処理は既に Dalvik/Java にも匹敵

41. 開発者の多いプラットフォーム
800万人
10万人 45万人
調査にも依るけど HTML5 開発者の方が圧倒的に多い

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

43. *1
アプリも「ぐぐる」時代へ
"まずインストール" は古い
ディレクトリ(分類)だけのマーケ
ットでは Google のない Web
Web と Market の横断検索
動的な Web アプリ環境
Web はアクセスするだけ
アプリを検索してまず試し、
気に入ったらホームに追加する
*1 everything.me ってサービスだから正確には「えぶる」かも？

44. 透明性や自由度の
高いプラットフォーム
既存の独占的 Firefox OS による
プラットフォーム Open プラットフォーム
開発者/OEM/キャリア market 開発者/OEM/
/ キャリア
Apple Google MS
App Store Play Marketplace
iPhone/iPad 端末 端末
ユーザ
ユーザ ユーザ ユーザ 端末

45. MWC ANNOUNCEMENTS
Ecosystem Commitments
パートナーとの製品化
日本では KDDI が参加表明

46. Global アプリパートナー
まだまだあるけど入り切りません。一部ロゴ古いかも。ゴメンね。

47. ステキ。
僕もスマホになって君と
一緒にお出かけしたいな！

48. Build & Flash

49. サポート端末 (最新じゃない？)
Tier 1
Unagi, Otoro, Pandaboard, Emulator, PC
Tier 2
Nexus S, Nexus S 4G
Tier 3
Galaxy S2, Glaxy Nexus
ICS (Android 4.0)∼ の動作端末
上記以外の端末にはパッチが必要
https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Firefox_OS_build_prerequisites

50. おさかなさん＝？？？
Goldfish = 金魚
Trout = サケ科の総称
Mahimahi = マヒマヒ
Herring = ニシン
Stingray = アカエイ
Tuna (Maguro & Toro)

51. おさかなさん＝端末 (Android)
Goldfish = Emulator
Trout = G1
Mahimahi = Nexus One
Herring = Nexus S
Stingray = Xoom
Tuna = Galaxy Nexus
Android では伝統的に端末のコードネームがおさかなさん

52. おすし＝端末 (Firefox OS)
Otoro = 初代開発機
Unagi = 第二代開発機
Ikura = 第三代？
Inari = ？？？
Hamachi = ？？？
Buri = ？？？
Firefox OS では端末のコードネームは寿司ネタ

53. ビルド環境
Mac OS X
XCode 4.3.1
64bit GNU/Linux
GCC 4.6.3
Ubuntu 12.04 が標準
Linux Mint 13, Debian 6,
Ubuntu 12.10, Fedora 16/17/18
標準ビルドは Ubuntu で作られてますが Mac でビルドするのが楽です

54. Firefox OS ビルド環境 (Mac)
// 1. XCode, Command Line Tools インストール
// 2. XCode 4.3.x から MacOSX10.6.sdk をコピー
// /Applications/Xcode.app/Contents/
Developer/Platforms/MacOSX.platform/Developer/
SDKs/MacOSX10.6.sdk
// 3. HomeBrew が入ってなければ入れる
ruby -e "$(curl -fsSkL raw.github.com/mxcl/
homebrew/go)"
// 4. セットアップスクリプト実行！
curl -fsSL https://raw.github.com/mozilla-b2g/
B2G/master/scripts/bootstrap-mac.sh | bash
https://github.com/dynamis/firefoxos/wiki/article#wiki-build

55. Firefox OS のビルド＆書き込み
// 1. リポジトリの Clone
git clone git://github.com/mozilla-b2g/B2G.git
cd B2G
// 2. 対象端末を指定 (引数無しでリスト表示)
./config.sh nexus-s
// 2. ビルド実行 (-j* は並列ビルド数の指定)
./build.sh -j4
// 3. 端末に書き込み (adb 必要です)
./flash.sh
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building

56. Apps Dev

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

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

59. Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
いつもと一緒だ
から安心だね！

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

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

62. manifest.webapp ファイル
{
"name": "フォクすけアプリ",
"description": "あのフォクすけが遂にアプリに！",
"launch_path": "/index.html",
"icons": {
"128": "/icons/foxkeh-128.png"
},
"developer": {
"name": "dynamis",
"url": "http://dynamis.jp/"
},
"default_locale": "ja"
}
// 注意: ローカルファイルで / -> /index.html 変換はない
https://developer.mozilla.org/en-US/docs/Apps/Manifest

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

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

65. シミュレータにインストール
Add Directory ボタン
manifest ファイルを選択
zip されて packaged app として
インストールされ、起動する
Update ボタンで更新
同じディレクトリのファイルを
zip し直して、起動する
https://github.com/dynamis/firefoxos/wiki/simulator

66. つーるきっととかは？
Firefox OS 標準の
ライブラリとかあるの？

67. GAIA Building Blocks (UI 部品)
Gaia (Firefox OS 標準) Apps
のデザインを簡単に作れる
http://buildingfirefoxos.com/
使っても使わなくても OK
好きな SDK/Library 使える
自由な Web ですから！
http://buildingfirefoxos.com/

70. Marketplace

71. まーけっと？
Web アプリの配信方法は？

72. Firefox Marketplace
Device, OS 横断マーケット
Web Platform のためのストア
Firefox 限定にならない設計
現在テスター向け公開中
対象は Firefox OS と Android 版
Firefox の開発版ビルド
PC で使うには UA 書き換え...
https://marketplace.firefox.com/

73. オープンなアプリストア
全てを Web 技術で実装
安定・平等な環境を提供
Marketplace のソースも公開
ベンダー非依存
Firefox Marketplace 以外にも
ストア、認証、課金も自由に
https://marketplace.firefox.com/

74. オープンなレビューシステム
コミュニティレビュー
Firefox のアドオンと同じ
レビュー基準もレビュアーもすべ
てオープンで公平なマーケット
動作まではレビューしない
あくまで最低限のフィルタ
https://developer.mozilla.org/en-US/docs/Apps/Marketplace_review_criteria

75. 自分のサイトで配布
install() 関数使うだけ
navigator.mozApps.install(url)
manifest ファイル URL を渡す
その他の Apps API:
navigator.mozApps.getSelf()
navigator.mozApps.getInstalled()
installPackage(url)
https://developer.mozilla.org/en-US/docs/Apps/Apps_JavaScript_API

76. navigator.mozApps.install(url)
var Apps = navigator.mozApps;
var manifesturl
= "http://apps.dynamis.jp/manifest.webapp";
var request = Apps.install(manifesturl);
request.onsuccess = function() {
// 成功時の処理
};
request.onerror = function() {
// 失敗時の処理
};

77. Firefox ＝ WebRT (WebRunTime)
どろいど君 Gecko は元からアプリ環境
とも仲良し！
Firefox = Gecko で XUL/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firefox OS...
同じコードでどこでも動く
マーケットもマルチデバイス

78. Android に Web アプリ環境を
Web App = Native App に
ホームスクリーンへの追加や
独立してフル画面起動など
ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプリを起動した画面、マーケットをブラウズ

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

80. WWeebb だから
どこにでも！
Web らしいシステムだね！

81. 実機で開発したい？
僕の手でも使えるかな？

82. Developer Preview Phone
Telefónica と Geeksphone が作る開発者向けテスト端末

83. 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/

84. もっと知りたい？
僕はもっと知りたい！

85. Firefox OS コミュニティを！
http://FxOS.org/
(https://groups.google.com/group/
firefoxos にリダイレクト)
http://FxOS.org/wiki
(https://github.com/dynamis/firefoxos/
wiki にリダイレクト)
みんな参加してね。
みんなよろしく！

86. 質問ある？
ぼくには難しいことは
分からないけど許してね。

87. See Also...

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

89. Web 技術 2012 年の変化
最新 Web 技術動向
2012 年に進化した点やブラウザ
ベンダーの動向を紹介
HTML5 から HTML5.1 へ
HTML の仕様は進化と安定化が
同時平行で続けられる

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

91. セキュリティ関連機能紹介
セキュリティ大事！
知っておくべき機能です
Content Security Policy
次世代セキュリティポリシー
Same Origin Policy はもう古い
http://r.dynamis.jp/sec