FirefoxOSを俺得改造
@tamacjp
自己紹介
 名前:tama
 Twitter:@tamacjp
 自称ハタチ。ハタチは生き様。
 IS03でAndroidデビューした遅咲き(咲いてない)
 毎週木曜日北新地で「GeekBear(ぎーくべあー)」
という飲み会をしてい...
アジェンダ
 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同様テーマ変更ができるようになっている
 ステータスバー、通知領域、ロック画面、...
FMラジオを聴きたい
 KEONにはFMラジオが入っている
 海外バンド87.5MHz〜108Mhzしかチューニングでき
ない… 残念!(日本のFM派は76MHz〜)
 社員のラジオっ子「FM802も聴きたいお…(´・ω・`)」
 「FM OSAKA派ノ」
...
ビルド環境の準備
 FirefoxOSのソース一式の取得、ビルド環境の用意
 公式ドキュメントがわかりやすくまとまっているので
こちらを参照
 せっかくなのでテーマ機能の使えるB2JCを
 標準で日本語対応
https://develo...
まずはアプリ層を見てみる
 FMラジオアプリのソース:gaia/apps/fm/js/fm.js
 すぐに目につく
あやしい<●><●>
 さっそく変更してビルド→実機書き込み…
frequencyLowerBound: 87.5,
fr...
なぜ…?
 よく見てみると
 navigatorオブジェクトに mozFM や mozFMRadio と
いうオブジェクトが含まれている…?
 ⇒ FirefoxOSが提供するAPIや機能がnavigatorオブジェ
クト内で公開されてい...
mozFMRadio本体を探す
 ソースツリー全体の中で mozFM を検索
 OpenGrokを使うと早い!(らしい)
 grep するなら --exclude-dir=.git
 ビルド生成物(objdir-gecko/ や out...
ソースを読む
 gecko/dom/fm/ のソースを読む(・ω・)
 DOMFMRadioChild → DOMFMRadioParent
 DOMFMRadioParent.jsm
 キタ━━━━(゚∀゚)━━━━!!
 _upd...
設定は…どこで…
 _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管理対象になっていない
 もう少し精査して...
バッテリー残量表示
何%残ってるか知りたい
 ステータスバーのバッテリー残量ピクトがおおざっぱ
 具体的には10%単位のピクト表示になっているもよう
 数字でも見えるとうれしいな
 ピクト画像もテーマで変更できるようにしたら…
 バッテリー残量が少ないと...
当たりをつけて調べる
 B2JCでステータスバーをテーマ変更している
 まずはそのあたりのソースを探ってみる
 gaia/apps/system/js/statusbar.js
 this.icons.battery は getAllE...
表示側のソース
 表示(DOM)側
 gaia/apps/system/index.html
 gaia/apps/system/style/statusbar/statusbar.css
<div id="statusbar-batte...
サクッと改造しちゃう
 gaia/apps/system/js/statusbar.js
 icon は <div id=“statusbar-battery”> なのでそのまま中
に数字を表示
 battery.level は少数ぽいの...
スタイル調整
 gaia/apps/system/style/statusbar/statusbar.css
 センタリング表示、充電中は赤文字、放電中は青文字
.sb-icon-battery {
width: 21px;
text-al...
結果
 数字も表示されるようになった!
 色が見にくいのは…ゴメンナサイ
放電中 充電中
ピクト
 ピクトは1枚絵で、width & height の指定と
background-position をずらすことでひとつだけ表示
(Twitter bootstrapなどでもよく使われる手法)
 ⇒ この画像を変えればテーマ変更でき...
おしまい
 駆け足でFirefoxOSの改造についてお話しました。
 なんか簡単そう!やってみたい!と思った方ぜひ挑戦
してみてください
 アプリ作るより楽しいです(*„ω„ *)
 ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Firefox OSを俺得改造

2,228
-1

Published on

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

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,228
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Firefox OSを俺得改造

  1. 1. FirefoxOSを俺得改造 @tamacjp
  2. 2. 自己紹介  名前:tama  Twitter:@tamacjp  自称ハタチ。ハタチは生き様。  IS03でAndroidデビューした遅咲き(咲いてない)  毎週木曜日北新地で「GeekBear(ぎーくべあー)」 という飲み会をしています。勉強会のような技術的な 話を好きな方はぜひ一度お越しください(o‟ヮ‟o) http://geekbear.jp/
  3. 3. アジェンダ  OSの改造  OSの改造ってどういうこと?という説明をします  FMラジオを聴きたい  具体的な事例としてFMラジオの改造を解説します  バッテリー残量表示  バッテリー残量を数字で表示できるようにします
  4. 4. OSの改造
  5. 5. 改造ってどういうこと? オープンソースで公開されているOSのソースを 自分で好きなように書き換える 端末に書き込む オレオレ端末(俺得端末) 完成!
  6. 6. 何ができるの?  標準OSの痒いところを使いやすくする  例:ステータスバーのバッテリー残量がわかりにくい  ⇒ 数字で見えるようにする  標準OSではできないことをできるようにする  例:ホーム画面を横向きにも表示できるようにする  趣味に走ったテーマで端末をもっと楽しくする  例:通知領域にも背景画像を設定する
  7. 7. AndroidのカスタムROM
  8. 8. 日本独自のカスタムROMを作る。 JCハァハァ… https://sites.google.com/site/jcromproject/  テーマの適用(壁紙、通知領域、ピクトアイコン等)  開発デバッグ支援機能  使い勝手をよくするためのカスタマイズ
  9. 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. 10. FMラジオを聴きたい
  11. 11.  KEONにはFMラジオが入っている  海外バンド87.5MHz〜108Mhzしかチューニングでき ない… 残念!(日本のFM派は76MHz〜)  社員のラジオっ子「FM802も聴きたいお…(´・ω・`)」  「FM OSAKA派ノ」  「…」 FMラジオを使いたい 突然の派閥争い
  12. 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. 13. まずはアプリ層を見てみる  FMラジオアプリのソース:gaia/apps/fm/js/fm.js  すぐに目につく あやしい<●><●>  さっそく変更してビルド→実機書き込み… frequencyLowerBound: 87.5, frequencyUpperBound: 108, ダメでした(・ω<) てへぺろ チューニングできるバンド帯に変化なし
  14. 14. なぜ…?  よく見てみると  navigatorオブジェクトに mozFM や mozFMRadio と いうオブジェクトが含まれている…?  ⇒ FirefoxOSが提供するAPIや機能がnavigatorオブジェ クト内で公開されている var mozFMRadio = navigator.mozFM || navigator.mozFMRadio || { https://developer.mozilla.org/ja/docs/Web/API/FMRadio
  15. 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. 16. ソースを読む  gecko/dom/fm/ のソースを読む(・ω・)  DOMFMRadioChild → DOMFMRadioParent  DOMFMRadioParent.jsm  キタ━━━━(゚∀゚)━━━━!!  _updateBand()関数でチューニングバンド帯を設定 FM_BANDS[BAND_76000_108000_kHz] = { lower: 76000, upper: 108000 };
  17. 17. 設定は…どこで…  _updateBand()関数は BAND_SETTING_KEY の処理  その設定、、どこで書いてるんだろ?  ソース全検索しても BAND_SETTING_KEY も fmRadio も見つけられなかった…  ⇒ もしかしてまだチューニングバンド帯変更に対応し ていない…?
  18. 18. 動かしてみちゃおう(*゚∀゚)  gecko/dom/fm/DOMFMRadioParent.jsm  _currentBand の初期設定値を BAND_87500_108000_kHz から BAND_76000_108000_kHz に変更  ビルド…  書き込み…  キタ━━━━(゚∀゚)━━━━!!
  19. 19. 残る謎と宿題  残る謎…チューニングバンド帯の設定はどうするの?  どなたかご存知でしたら教えてくださいm(_ _)m  今回の対応をB2JCに入れたい!  geckoリポジトリがまだB2JC管理対象になっていない  もう少し精査してsolaさんに送りつけます  誰かやってくれてもいいのよ?(/ω・\)チラッ
  20. 20. バッテリー残量表示
  21. 21. 何%残ってるか知りたい  ステータスバーのバッテリー残量ピクトがおおざっぱ  具体的には10%単位のピクト表示になっているもよう  数字でも見えるとうれしいな  ピクト画像もテーマで変更できるようにしたら…  バッテリー残量が少ないときはおなかをすかせた画像  充電中は何かを食べている画像 などなど  世界観が深まるね!(ガラケーのきせかえ風)
  22. 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. 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. 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. 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. 26. 結果  数字も表示されるようになった!  色が見にくいのは…ゴメンナサイ 放電中 充電中
  27. 27. ピクト  ピクトは1枚絵で、width & height の指定と background-position をずらすことでひとつだけ表示 (Twitter bootstrapなどでもよく使われる手法)  ⇒ この画像を変えればテーマ変更できそう。  誰かー(丸投げ 今回の話を聞いて「自分も改造やってみよう!」と思った方に ぜひ挑戦して頂きたくて残しておきました。
  28. 28. おしまい  駆け足でFirefoxOSの改造についてお話しました。  なんか簡単そう!やってみたい!と思った方ぜひ挑戦 してみてください  アプリ作るより楽しいです(*„ω„ *)  ご清聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×