関西Firefox OS勉強会 2nd 発表資料 http://atnd.org/events/40622

1. FirefoxOSを俺得改造
@tamacjp

2. 自己紹介
 名前：tama
 Twitter：@tamacjp
 自称ハタチ。ハタチは生き様。
 IS03でAndroidデビューした遅咲き（咲いてない）
 毎週木曜日北新地で「GeekBear（ぎーくべあー）」
という飲み会をしています。勉強会のような技術的な
話を好きな方はぜひ一度お越しください(o‟ヮ‟o)
http://geekbear.jp/

3. アジェンダ
 OSの改造
 OSの改造ってどういうこと？という説明をします
 FMラジオを聴きたい
 具体的な事例としてFMラジオの改造を解説します
 バッテリー残量表示
 バッテリー残量を数字で表示できるようにします

4. OSの改造

5. 改造ってどういうこと？
オープンソースで公開されているOSのソースを
自分で好きなように書き換える
端末に書き込む
オレオレ端末（俺得端末）
完成！

6. 何ができるの？
 標準OSの痒いところを使いやすくする
 例：ステータスバーのバッテリー残量がわかりにくい
 ⇒ 数字で見えるようにする
 標準OSではできないことをできるようにする
 例：ホーム画面を横向きにも表示できるようにする
 趣味に走ったテーマで端末をもっと楽しくする
 例：通知領域にも背景画像を設定する

7. AndroidのカスタムROM

8. 日本独自のカスタムROMを作る。
JCハァハァ…
https://sites.google.com/site/jcromproject/
 テーマの適用（壁紙、通知領域、ピクトアイコン等）
 開発デバッグ支援機能
 使い勝手をよくするためのカスタマイズ

9. B2JC
 JCROMのFirefoxOS版
 正式名称は Boot to JCROM
 本家の Boot to Gecko を文字ってる?
 JCROM同様テーマ変更ができるようになっている
 ステータスバー、通知領域、ロック画面、壁紙、アプ
リのテーマなどの画像
https://sites.google.com/site/jcromfirefox/
http://www.slideshare.net/sola1980/firefox-osrom

10. FMラジオを聴きたい

11.  KEONにはFMラジオが入っている
 海外バンド87.5MHz〜108Mhzしかチューニングでき
ない… 残念！（日本のFM派は76MHz〜）
 社員のラジオっ子「FM802も聴きたいお…(´･ω･`)」
 「FM OSAKA派ノ」
 「…」
FMラジオを使いたい
突然の派閥争い

12. ビルド環境の準備
 FirefoxOSのソース一式の取得、ビルド環境の用意
 公式ドキュメントがわかりやすくまとまっているので
こちらを参照
 せっかくなのでテーマ機能の使えるB2JCを
 標準で日本語対応
https://developer.mozilla.org/ja/docs/Mozilla/Boot_to_Gecko/Building_
and_installing_Firefox_OS
https://sites.google.com/site/jcromfirefox/home/firefox_build/jcrom/keo
n

13. まずはアプリ層を見てみる
 FMラジオアプリのソース：gaia/apps/fm/js/fm.js
 すぐに目につく
あやしい<●><●>
 さっそく変更してビルド→実機書き込み…
frequencyLowerBound: 87.5,
frequencyUpperBound: 108,
ダメでした(・ω<) てへぺろ
チューニングできるバンド帯に変化なし

14. なぜ…？
 よく見てみると
 navigatorオブジェクトに mozFM や mozFMRadio と
いうオブジェクトが含まれている…?
 ⇒ FirefoxOSが提供するAPIや機能がnavigatorオブジェ
クト内で公開されている
var mozFMRadio = navigator.mozFM || navigator.mozFMRadio || {
https://developer.mozilla.org/ja/docs/Web/API/FMRadio

15. mozFMRadio本体を探す
 ソースツリー全体の中で mozFM を検索
 OpenGrokを使うと早い！（らしい）
 grep するなら --exclude-dir=.git
 ビルド生成物（objdir-gecko/ や out/）も避けたい
 ⇒ gecko/dom/fm/ が見つかる
 gecko/dom/fm/DOMFMRadio.manifest
 これぽい！
category JavaScript-navigator-property mozFMRadio …

16. ソースを読む
 gecko/dom/fm/ のソースを読む(・ω・)
 DOMFMRadioChild → DOMFMRadioParent
 DOMFMRadioParent.jsm
 ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!
 _updateBand()関数でチューニングバンド帯を設定
FM_BANDS[BAND_76000_108000_kHz] = {
lower: 76000,
upper: 108000
};

17. 設定は…どこで…
 _updateBand()関数は BAND_SETTING_KEY の処理
 その設定、、どこで書いてるんだろ？
 ソース全検索しても BAND_SETTING_KEY も
fmRadio も見つけられなかった…
 ⇒ もしかしてまだチューニングバンド帯変更に対応し
ていない…？

18. 動かしてみちゃおう(*ﾟ∀ﾟ)
 gecko/dom/fm/DOMFMRadioParent.jsm
 _currentBand の初期設定値を
BAND_87500_108000_kHz から
BAND_76000_108000_kHz に変更
 ビルド…
 書き込み…
 ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

19. 残る謎と宿題
 残る謎…チューニングバンド帯の設定はどうするの？
 どなたかご存知でしたら教えてくださいm(_ _)m
 今回の対応をB2JCに入れたい！
 geckoリポジトリがまだB2JC管理対象になっていない
 もう少し精査してsolaさんに送りつけます
 誰かやってくれてもいいのよ？(/ω・＼)ﾁﾗｯ

20. バッテリー残量表示

21. 何％残ってるか知りたい
 ステータスバーのバッテリー残量ピクトがおおざっぱ
 具体的には10%単位のピクト表示になっているもよう
 数字でも見えるとうれしいな
 ピクト画像もテーマで変更できるようにしたら…
 バッテリー残量が少ないときはおなかをすかせた画像
 充電中は何かを食べている画像 などなど
 世界観が深まるね！（ガラケーのきせかえ風）

22. 当たりをつけて調べる
 B2JCでステータスバーをテーマ変更している
 まずはそのあたりのソースを探ってみる
 gaia/apps/system/js/statusbar.js
 this.icons.battery は getAllElements() で取得した
id=“statusbar-battery” なDOMオブジェクト
this.update.battery.call(this);
battery: function sb_updateBattery() {
var icon = this.icons.battery;

23. 表示側のソース
 表示（DOM）側
 gaia/apps/system/index.html
 gaia/apps/system/style/statusbar/statusbar.css
<div id="statusbar-battery" class="sb-icon sb-icon-battery"
data-level="100" charging hidden></div>
.sb-icon {（中略）
background: url('images/icons.png') no-repeat;
}
（中略）
.sb-icon-battery[data-level="100"][data-charging="true"] {
background-position: -260px -20px;
}

24. サクッと改造しちゃう
 gaia/apps/system/js/statusbar.js
 icon は <div id=“statusbar-battery”> なのでそのまま中
に数字を表示
 battery.level は少数ぽいので100倍
icon.hidden = false;
icon.dataset.charging = battery.charging;
icon.dataset.level = Math.floor(battery.level * 10) * 10;
icon.innerHTML = Math.floor(battery.level * 100);

25. スタイル調整
 gaia/apps/system/style/statusbar/statusbar.css
 センタリング表示、充電中は赤文字、放電中は青文字
.sb-icon-battery {
width: 21px;
text-align: center;
padding-top: 1px;
height: 15px;
color: blue;
}
.sb-icon-battery[data-charging="true"] {
color: red;
}

26. 結果
 数字も表示されるようになった！
 色が見にくいのは…ｺﾞﾒﾝﾅｻｲ
放電中 充電中

27. ピクト
 ピクトは1枚絵で、width & height の指定と
background-position をずらすことでひとつだけ表示
（Twitter bootstrapなどでもよく使われる手法）
 ⇒ この画像を変えればテーマ変更できそう。
 誰かー（丸投げ
今回の話を聞いて「自分も改造やってみよう！」と思った方に
ぜひ挑戦して頂きたくて残しておきました。

28. おしまい
 駆け足でFirefoxOSの改造についてお話しました。
 なんか簡単そう！やってみたい！と思った方ぜひ挑戦
してみてください
 アプリ作るより楽しいです(*„ω„ *)
 ご清聴ありがとうございました