狠狠撸

FirefoxOSを俺得改造
@tamacjp

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

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

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

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

础苍诲谤辞颈诲のカスタム搁翱惭

日本独自のカスタム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

贵惭ラジオを聴きたい

? 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/keo
n

まずはアプリ層を見てみる
? 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(/tamacjp/firefox-os-24442869/&) 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などでもよく使われる手法）
? ? この画像を変えればテーマ変更できそう。
? 誰かー（丸投げ
今回の話を聞いて「自分も改造やってみよう！」と思った方に
ぜひ挑戦して頂きたくて残しておきました。

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

狠狠撸

Firefox OSを俺得改造

More Related Content

Firefox OSを俺得改造