1.
さわってみよう Firefox OS in 大阪
2013/1/26

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

3.
Firefox OS の概要

4.
開発状況

Firefox OS バージョン 1 に向けて開発中
●
テスター達によるテスト段階。
●
2013年初頭にブラジルにて発売予定。
●
KDDI が販売を検討中！

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 7 編）

13.
r2d2b2g のインストール

URL: http://people.mozilla.org/~myk/r2d2b2g/

（70M ぐらいあるので会場の方は 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/syst
em.gaiamobile.orgを開く。

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

19.
壁紙の追加

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

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

22.
Web API の活用
（余力のある方向け）

23.
Web API 一覧

Firefox OS で使用可能な API

近接センサー、電源管理、バイブレーション等 JavaScript から
ハードウェアを制御できる。

Firefox OS で使用可能な API 一覧
https://wiki.mozilla.org/WebAPI
※開発中なので動作しない/問題があるものもあり

これ使ってみたい等あれば可能な限りサポートします