1. Firefox OSのカスタム
ROM開発を始めてみた
@androidsola

2. 自己紹介
• twitter : @androidsola
• blog : http://blog.sola-dolphin-1.net/
• JCROM(Japanese Custom ROM)Project
https://sites.google.com/site/jcromproject/
Android をベースにしたカスタムROMを作ってます

3. 本日の内容
• Firefox OS を改造する準備
• Firefox OS を改造する

4. Firefox OS を改造する準備
Firefox OS をビルドする

5. Firefox OS をビルドする
• Mozilla Developer Network の Firefox OS の所に手
順があります。
http://goo.gl/ZfNdA
英語＆最新のソースに追従してるか微妙？なので、
自分で（多少）安定してビルド出来る環境を作って
ます。

6. Firefox OS をビルドする
• Ubuntu（12.04か12.10）を用意
VMWare等の仮想マシンの上でも良い。
• 必要なソフトのインストールと環境変数の設定
https://sites.google.com/site/jcromfirefox/home/e
nvironment

7. Firefox OS をビルドする
• ソースコードの取得＆ビルド
KEON向けの例(1/4)
ソースコードの取得。
$ mkdir ~/b2g_work
$ export B2G_WORK=~/b2g_work
$ git clone git://github.com/sola-dolphin1/B2JC.git $B2G_WORK
$ cd $B2G_WORK
$ ./config.sh keon-ja

8. Firefox OS をビルドする
• ソースコードの取得＆ビルド
KEON向けの例(2/4)
環境変数の設定（日本語を追加したい場合）
$ export LOCALE_BASEDIR=$B2G_WORK/multilocale/gaia-l10n
$ export LOCALES_FILE=$B2G_WORK/multilocale/languages-
japan.json
$ export PATH="$PATH:$B2G_WORK/multilocale/compare-
locales/scripts"
$ export PYTHONPATH="$B2G_WORK/multilocale/compare-locales/lib"

9. Firefox OS をビルドする
• ソースコードの取得＆ビルド
KEON向けの例(3/4)
KEON から必要なファイルを吸い出す。
KEON と PC を USB ケーブルで繋いで以下のコマンドを実行。
$ cd $B2G_WORK/device/geeksphone/keon
$ ./extract-files.sh

10. Firefox OS をビルドする
• ソースコードの取得＆ビルド
KEON向けの例(4/4)
Firefox OS のビルド。
$ cd $B2G_WORK
$ ./build.sh

11. Firefox OS を改造する準備
実機で動作確認する

12. 実機で動作確認する
• KEON を fastboot モードにしてイメージを書き込む
fastboot モードになるには、
KEON と PC を USB ケーブルで繋いで以下のコマンドを実行。
$ adb reboot bootloader
イメージの書き込み
$ cd $B2G_WORK
$ fastboot flash boot out/target/product/keon/boot.img
$ fastboot flash system out/target/product/keon/system.img
$ fastboot flash userdata out/target/product/keon/userdata.img
$ fastboot reboot

13. 実機で動作確認する
• 手順通りにやるだけなので、簡単。
ここまで確認出来れば、あとは自分の改造を加え
るだけ。

14. Firefox OS を改造する
JCROM で実装してるような機能を Firefox OS に実装する

15. JCROMで実装してるような機能

16. Firefox OS を改造する
JCROM 用の設定を追加する

17. JCROM 用の設定を追加する
• 設定アプリに項目を追加する
Select Theme をタップすると
インストールしているテーマ
一覧が表示されるようにする

18. JCROM 用の設定を追加する
設定にJCROMの項目を追加
gaia/apps/settings/index.html
インストールしているテーマをSDカードから読み込んで一覧表示する
gaia/apps/settings/js/settings.js
設定に表示するアイコンを追加
gaia/apps/settings/style/icons.css
gaia/apps/settings/style/images/icons_sprite.gif
変更の詳細はGithubを見てください
https://github.com/sola-
dolphin1/gaia/commit/b2f16542301e9c133b05651ca81c0f6dc0d630c9

19. Firefox OS を改造する
テーマ変更のデモ

20. デモ
使用したツールは Android Screen Monitor
http://www.adakoda.com/adakoda/android/asm/

21. Firefox OS を改造する
今回実装したテーマ変更の仕組み

22. テーマ変更の仕組み
チェックボックスの変化でイベントが発生する。
イベント発生時に処理したい所に以下を追記した。
hogehogeの部分がテーマ変更処理。
SettingsListener.observe('jcrom.theme.ena
bled', false, function(value) {
hogehoge();
});
<label>
<input type="checkbox"
name="jcrom.theme.enabled" />
<span></span>
</label>
テーマの有効・無効の設定

23. テーマ変更の仕組み
一覧からテーマを選択するとイベントが発生する。
イベント発生時に処理したい所に以下を追記した。
hogehogeの部分がテーマ変更処理。
SettingsListener.observe('theme.select',
"", function(value) {
hogehoge();
});
<p class="fake-select">
<button class="icon icon-dialog">Select
Theme</button>
<select name="theme.select"></select>
</p>
テーマ選択の部分

24. Firefox OS を改造する
ステータスバーを変更する

25. ステータスバーを変更する
追加した SettingsListener
SettingsListener.observe('jcrom.theme.ena
bled', false, function(value) {
StatusBar.enableTheme = value;
StatusBar.changeThemeStatusbar();
});
SettingsListener.observe('theme.select',
"", function(value) {
StatusBar.themeName = value;
StatusBar.changeThemeStatusbar();
});
gaia/apps/system/js/statusbar.js
変更するファイル

26. changeThemeStatusbar: function ns_changeThemeStatusbar() {
if(this.enableTheme) {
var storage = navigator.getDeviceStorage('sdcard');
var req = storage.get("mytheme/" + StatusBar.themeName +
"/statusbar.png");
req.onsuccess = function(e){
var fl = e.target.result;
var reader = new FileReader();
reader.readAsDataURL(fl);
reader.onload = function(ev) {
var element = document.getElementById('statusbar');
element.style.backgroundImage = 'url('+ev.target.result+')';
}
}
else やエラーの場合は画像の設定を解除する（省略）
変更の詳細はGithubを見てください
https://github.com/sola-
dolphin1/gaia/commit/c3c2e33988124d8bda2c8ecf2a75191c2e96362c

27. Firefox OS を改造する
通知領域の背景を変更する

28. 通知領域の背景を変更する
追加した SettingsListener
SettingsListener.observe('jcrom.theme.enabled',
false, function(value) {
NotificationScreen.enableTheme = value;
NotificationScreen.changeThemeNotification();
});
SettingsListener.observe('theme.select', "",
function(value) {
NotificationScreen.themeName = value;
NotificationScreen.changeThemeNotification();
});
gaia/apps/system/js/notifications.js
変更するファイル

29. changeThemeNotification: function ns_changeThemeNotification() {
if(this.enableTheme) {
var storage = navigator.getDeviceStorage('sdcard');
var req = storage.get("mytheme/" + NotificationScreen.themeName +
"/notification.png");
req.onsuccess = function(e){
var fl = e.target.result;
var reader = new FileReader();
reader.readAsDataURL(fl);
reader.onload = function(ev) {
var element = document.getElementById('notifications-container');
element.style.backgroundImage = 'url('+ev.target.result+')';
}
}
else やエラーの場合は画像の設定を解除する（省略）
変更の詳細はGithubを見てください
https://github.com/sola-
dolphin1/gaia/commit/454d3e71c30f30943c8239f3e0652f874e6f0cb2

30. Firefox OS を改造する
ロックスクリーンを変更する

31. ロックスクリーンを変更する
追加した SettingsListener
SettingsListener.observe('jcrom.theme.enabled',
false, function(value) {
LockScreen.enableTheme = value;
LockScreen.changeThemeLockscreen();
});
SettingsListener.observe('theme.select', "",
function(value) {
LockScreen.themeName = value;
LockScreen.changeThemeLockscreen();
});
gaia/apps/system/js/lockscreen.js
変更するファイル

32. changeThemeLockscreen: function ns_changeThemeLockscreen() {
var self = this;
if(this.enableTheme) {
var storage = navigator.getDeviceStorage('sdcard');
var req = storage.get("mytheme/" + LockScreen.themeName +
"/lockscreen.png");
req.onsuccess = function(e){
var fl = e.target.result;
var reader = new FileReader();
reader.readAsDataURL(fl);
reader.onload = function(ev) {
self.updateBackground(ev.target.result);
}
}
else やエラーの場合は画像の設定を解除する（省略）
変更の詳細はGithubを見てください
https://github.com/sola-
dolphin1/gaia/commit/501cda7f247edbb8d09196dc4450f1adeaf989e1

33. Firefox OS を改造する
壁紙を変更する

34. 壁紙を変更する
追加した SettingsListener
SettingsListener.observe('jcrom.theme.enabled',
false, function(value) {
LockScreen.enableTheme = value;
LockScreen.changeThemeWallpaper();
});
SettingsListener.observe('theme.select', "",
function(value) {
LockScreen.themeName = value;
LockScreen.changeThemeWallpaper();
});
gaia/apps/system/js/lockscreen.js
変更するファイル

35. changeThemeWallpaper: function ns_changeThemeWallpaper() {
if(this.enableTheme) {
var storage = navigator.getDeviceStorage('sdcard');
var req = storage.get("mytheme/" + LockScreen.themeName +
"/wallpaper.png");
req.onsuccess = function(e){
var fl = e.target.result;
var reader = new FileReader();
reader.readAsDataURL(fl);
reader.onload = function(ev) {
var request = navigator.mozSettings.createLock().set({
'wallpaper.image': ev.target.result
});
}
}
else やエラーの場合は画像の設定を解除する（省略）
変更の詳細はGithubを見てください
https://github.com/sola-
dolphin1/gaia/commit/501cda7f247edbb8d09196dc4450f1adeaf989e1

36. アプリもテーマ変更する
JCROM のテーマ変更にアプリも連動させてみる

37. 変更を試すアプリはブラウザ
• トップページのロゴを変更出来るようにする

38. アプリのテーマ変更に必要な事
• SettingsListener を追加して、テーマ変更を行う本
体の changeThemeBrowser を実装する。
• SettingsListener を使うために、settings_listener.js
を読み込ませる。
• SDカードへのアクセス権限（読み込み）を追加する。
• 詳細は Github を見てください。
https://github.com/sola-
dolphin1/gaia/commit/5fce794fc6a6b748b4f51053
593ca74a07aec9ef

39. Firefox OS の良い点
カスタムROM 作る観点で

40. Firefox OS の良い点
• ビルド時間が短い
Android で 50 分だったのが、30 分で終わる。
• テーマ変更時の切り替えが早い
Android は約 10 秒程度の待ちを入れているが、
Firefox OS は待ちはほぼ無い。
（現時点では、これくらいしか良い点を見つけられて
ない）

41. Boot to JCROM
Firefox OS 向けのカスタム ROM
https://sites.google.com/site/jcromfirefox/

42. Boot to JCROM で公開してる内容
• 日本語環境入りの Firefox OS 環境
ターゲットは KEON、PEAK、Nexus S、Galaxy Nexus
• JCROM としての機能を Firefox OS に実装した環境
• ソースコードは Github で公開
• 自由に使ってください。
JCROM に興味があれば改造して Pull Request くだ
さい。