FirefoxOS を俺得改造@tamacjp

自己紹介

名前： tama

Twitter ： @tamacjp

自称ハタチ。ハタチは生き様。

IS03 で Android デビューした遅咲き（咲いてない）

毎週木曜日北新地で「 GeekBear （ぎーくべあー）」という飲み会をしています。勉強会のような技術的な話を好きな方はぜひ一度お越しください(o’ ヮ’ o)http://geekbear.jp/

アジェンダ

OS の改造 OS の改造ってどういうこと？という説明をします

FM ラジオを聴きたい 具体的な事例として FM ラジオの改造を解説します

バッテリー残量表示 バッテリー残量を数字で表示できるようにします

OS の改造

改造ってどういうこと？オープンソースで公開されている OS のソースを

自分で好きなように書き換える

端末に書き込む

オレオレ端末（俺得端末）完成！

何ができるの？

標準 OS の痒いところを使いやすくする 例：ステータスバーのバッテリー残量がわかりにくい

⇒ 数字で見えるようにする

標準 OS ではできないことをできるようにする 例：ホーム画面を横向きにも表示できるようにする

趣味に走ったテーマで端末をもっと楽しくする 例：通知領域にも背景画像を設定する

Android のカスタム ROM

日本独自のカスタム ROM を作る。JC ハァハァ…

https://sites.google.com/site/jcromproject/

テーマの適用（壁紙、通知領域、ピクトアイコン等）

開発デバッグ支援機能

使い勝手をよくするためのカスタマイズ

B2JC

JCROM の FirefoxOS 版

正式名称は Boot to JCROM

本家の Boot to Gecko を文字ってる ?

JCROM 同様テーマ変更ができるようになっている ステータスバー、通知領域、ロック画面、壁紙、アプ

リのテーマなどの画像

https://sites.google.com/site/jcromfirefox/

http://www.slideshare.net/sola1980/firefox-osrom

FM ラジオを聴きたい

KEON には FM ラジオが入っている

海外バンド 87.5MHz 〜 108Mhz しかチューニングできない… 残念！（日本の FM 派は 76MHz 〜）

社員のラジオっ子「 FM802 も聴きたいお… (´ ･ ω ･`) 」

「 FM OSAKA 派ノ」

「…」

FM ラジオを使いたい

突然の派閥争い

ビルド環境の準備

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/keon

まずはアプリ層を見てみる

FM ラジオアプリのソース： gaia/apps/fm/js/fm.js

すぐに目につく

あやしい <●><●>

さっそく変更してビルド→実機書き込み…

frequencyLowerBound: 87.5,frequencyUpperBound: 108,

ダメでした ( ・ ω<) てへぺろチューニングできるバンド帯に変化なし

なぜ…？

よく見てみると

navigator オブジェクトに mozFM や mozFMRadio というオブジェクトが含まれている… ?

⇒ FirefoxOS が提供する API や機能が navigator オブジェクト内で公開されている

var mozFMRadio = navigator.mozFM || navigator.mozFMRadio || {

https://developer.mozilla.org/ja/docs/Web/API/FMRadio

mozFMRadio 本体を探す

ソースツリー全体の中で mozFM を検索 OpenGrok を使うと早い！（らしい） grep するなら --exclude-dir=.git

ビルド生成物（ objdir-gecko/ や out/ ）も避けたい ⇒ gecko/dom/fm/ が見つかる

gecko/dom/fm/DOMFMRadio.manifest

これぽい！category JavaScript-navigator-property mozFMRadio …

ソースを読む

gecko/dom/fm/ のソースを読む ( ・ ω ・ )

DOMFMRadioChild → DOMFMRadioParent

DOMFMRadioParent.jsm

ｷﾀ━━━━ ( ﾟ∀ﾟ )━━━━!!

_updateBand()関数でチューニングバンド帯を設定

FM_BANDS[BAND_76000_108000_kHz] = { lower: 76000, upper: 108000};

設定は…どこで…

_updateBand()関数は BAND_SETTING_KEY の処理 その設定、、どこで書いてるんだろ？ ソース全検索しても BAND_SETTING_KEY も

fmRadio も見つけられなかった… ⇒ もしかしてまだチューニングバンド帯変更に対応し

ていない…？

動かしてみちゃおう (* ﾟ∀ﾟ )

gecko/dom/fm/DOMFMRadioParent.jsm

_currentBand の初期設定値を BAND_87500_108000_kHz からBAND_76000_108000_kHz に変更

ビルド…

書き込み…

ｷﾀ━━━━ ( ﾟ∀ﾟ )━━━━!!

残る謎と宿題

残る謎…チューニングバンド帯の設定はどうするの？ どなたかご存知でしたら教えてください m(_ _)m

今回の対応を B2JC に入れたい！ gecko リポジトリがまだ B2JC管理対象になっていな

い もう少し精査して sola さんに送りつけます 誰かやってくれてもいいのよ？ (/ω ・＼ ) ﾁﾗｯ

バッテリー残量表示

何％残ってるか知りたい

ステータスバーのバッテリー残量ピクトがおおざっぱ 具体的には 10%単位のピクト表示になっているもよう 数字でも見えるとうれしいな

ピクト画像もテーマで変更できるようにしたら… バッテリー残量が少ないときはおなかをすかせた画像 充電中は何かを食べている画像 などなど 世界観が深まるね！（ガラケーのきせかえ風）

当たりをつけて調べる

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;

表示側のソース 表示（ 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;}

サクッと改造しちゃう

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);

スタイル調整

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;}

結果

数字も表示されるようになった！

色が見にくいのは…ｺﾞﾒﾝﾅｻｲ

放電中 充電中

ピクト

ピクトは 1枚絵で、 width & height の指定と background-position をずらすことでひとつだけ表示（ Twitter bootstrap などでもよく使われる手法）

⇒ この画像を変えればテーマ変更できそう。 誰かー（丸投げ今回の話を聞いて「自分も改造やってみよう！」と思った方にぜひ挑戦して頂きたくて残しておきました。

おしまい

駆け足で FirefoxOS の改造についてお話しました。

なんか簡単そう！やってみたい！と思った方ぜひ挑戦してみてください

アプリ作るより楽しいです (*‘ω‘ *)

ご清聴ありがとうございました