1. さわってみよう Firefox OS in 福岡
2012/12/06

2. 自己紹介
 Twitter: @masap
 職業: 組み込みプログラマ（主に Wi-Fi）
 ハッシュタグ: #FirefoxOSjp

3. Firefox OS の概要

4. 開発状況
 Firefox OS バージョン 1 に向けて開発中
● テスター達によるテスト段階。
● 新規機能の取り込みはしない。
● 2013年初頭にブラジルにて発売予定。

5. Firefox OSの構造
 ３層構造
Gaia ユーザーインターフェイス層
Gecko レンダリングエンジン ユーザ空間
ハードウェア仮想化層
Gonk
Linux カーネル カーネル空間

6. Gaia
 Gaia とは
● HTML5 (+ CSS + JavaScript) で書かれた UI。
● UI 自体が HTML5 で書かれているのは Firefox OS だ
け。
● HTML5 を使っているのでカスタマイズが容易。今日の
テーマは Gaia のカスタマイズ。

7. Firefox OS を変えてみる
 UI は全て Gaia で描かれている
 実機にて変えてみる
● 起動画面
● 壁紙

8. エミュレータインストール
（Mac 編）

9. r2d2b2g のインストール
 USBメモリ内のファイルを使用
 r2d2b2g-mac.xpi ファイルを Firefox にドラッグ&ドロップす
る。
 下記メッセージが表示されるので「今すぐインストール」ボタン
を押す。

10. r2d2b2g起動
 Firefoxから起動
 ツール → Web開発->Firefox OS Simulator

11. エミュレータ画面起動
 起動
 Simulatorと書かれたスイッチをスライドしてRunningに変更。
 図のようにロック画面が表示されればOK。

12. エミュレータインストール
（Windows XP 編）

13. r2d2b2g のインストール
 USBメモリ内のファイルを使用
 r2d2b2g-windows.xpi ファイルを Firefox にドラッグ&ドロップ
する。
 下記メッセージが表示されるので「今すぐインストール」ボタン
を押す。

14. r2d2b2g起動
 Firefoxから起動
 Firefoxボタン → Web開発->Firefox OS Simulator

15. エミュレータ画面起動
 起動
 Simulatorと書かれたスイッチをスライドしてRunningに変更。
 図のようにロック画面が表示されればOK。

16. 起動画面のカスタマイズ
(Mac/Windows 共通)

17. フォルダを開く
 フォルダの場所を探す
 FirefoxのURL に about:support と入力。
 「アプリケーション基本情報」の「フォルダを開く」ボタンを押
す。
 extensions/r2d2b2g@mozilla.org/profile/webapps/system
.gaiamobile.orgを開く。

18. 起動画面のカスタマイズ
 ソースコードの書き換え
 application.zip をコピーして application.zip.bak としてバック
アップ。
 application.zip を解凍。
 application/index.html をエディタで開く。
 #initlogoの中のbackgroundの
bottom, right を center に変更。
 applicationフォルダの下をzipで圧縮。
 ※フォルダを圧縮しないように注意！
 エミュレーターを再起動。
 Mozillaの文字が中央に表示されていれば成功。

19. 壁紙の追加

20. 壁紙の追加
 ソースコードの書き換え
 extensions/r2d2b2g@mozilla.org/profile/webapps/wallpap
er.gaiamobile.orgを開く。
 application.zipをバックアップする。
 application/resources/320x480/に追加したい壁紙ファイル
を置く。
※サイズは320x480。
 application/pick.html をエディタで開く。
 div id=wallpapers の中に img 要素を追加。

21. 壁紙の確認
 壁紙の追加を確認