Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Firefox OSのカスタムROM開発を始めてみた@androidsola
自己紹介• twitter : @androidsola• blog : http://blog.sola-dolphin-1.net/• JCROM(Japanese Custom ROM)Projecthttps://sites.googl...
本日の内容• Firefox OS を改造する準備• Firefox OS を改造する
Firefox OS を改造する準備Firefox OS をビルドする
Firefox OS をビルドする• Mozilla Developer Network の Firefox OS の所に手順があります。http://goo.gl/ZfNdA英語&最新のソースに追従してるか微妙?なので、自分で(多少)安定して...
Firefox OS をビルドする• Ubuntu(12.04か12.10)を用意VMWare等の仮想マシンの上でも良い。• 必要なソフトのインストールと環境変数の設定https://sites.google.com/site/jcromfir...
Firefox OS をビルドする• ソースコードの取得&ビルドKEON向けの例(1/4)ソースコードの取得。$ mkdir ~/b2g_work$ export B2G_WORK=~/b2g_work$ git clone git://git...
Firefox OS をビルドする• ソースコードの取得&ビルドKEON向けの例(2/4)環境変数の設定(日本語を追加したい場合)$ export LOCALE_BASEDIR=$B2G_WORK/multilocale/gaia-l10n$ ...
Firefox OS をビルドする• ソースコードの取得&ビルドKEON向けの例(3/4)KEON から必要なファイルを吸い出す。KEON と PC を USB ケーブルで繋いで以下のコマンドを実行。$ cd $B2G_WORK/device/...
Firefox OS をビルドする• ソースコードの取得&ビルドKEON向けの例(4/4)Firefox OS のビルド。$ cd $B2G_WORK$ ./build.sh
Firefox OS を改造する準備実機で動作確認する
実機で動作確認する• KEON を fastboot モードにしてイメージを書き込むfastboot モードになるには、KEON と PC を USB ケーブルで繋いで以下のコマンドを実行。$ adb reboot bootloaderイメージ...
実機で動作確認する• 手順通りにやるだけなので、簡単。ここまで確認出来れば、あとは自分の改造を加えるだけ。
Firefox OS を改造するJCROM で実装してるような機能を Firefox OS に実装する
JCROMで実装してるような機能
Firefox OS を改造するJCROM 用の設定を追加する
JCROM 用の設定を追加する• 設定アプリに項目を追加するSelect Theme をタップするとインストールしているテーマ一覧が表示されるようにする
JCROM 用の設定を追加する設定にJCROMの項目を追加gaia/apps/settings/index.htmlインストールしているテーマをSDカードから読み込んで一覧表示するgaia/apps/settings/js/settings.j...
Firefox OS を改造するテーマ変更のデモ
デモ使用したツールは Android Screen Monitorhttp://www.adakoda.com/adakoda/android/asm/
Firefox OS を改造する今回実装したテーマ変更の仕組み
テーマ変更の仕組みチェックボックスの変化でイベントが発生する。イベント発生時に処理したい所に以下を追記した。hogehogeの部分がテーマ変更処理。SettingsListener.observe(jcrom.theme.enabled, fa...
テーマ変更の仕組み一覧からテーマを選択するとイベントが発生する。イベント発生時に処理したい所に以下を追記した。hogehogeの部分がテーマ変更処理。SettingsListener.observe(theme.select,"", funct...
Firefox OS を改造するステータスバーを変更する
ステータスバーを変更する追加した SettingsListenerSettingsListener.observe(jcrom.theme.enabled, false, function(value) {StatusBar.enableThe...
changeThemeStatusbar: function ns_changeThemeStatusbar() {if(this.enableTheme) {var storage = navigator.getDeviceStorage(s...
Firefox OS を改造する通知領域の背景を変更する
通知領域の背景を変更する追加した SettingsListenerSettingsListener.observe(jcrom.theme.enabled,false, function(value) {NotificationScreen.e...
changeThemeNotification: function ns_changeThemeNotification() {if(this.enableTheme) {var storage = navigator.getDeviceSto...
Firefox OS を改造するロックスクリーンを変更する
ロックスクリーンを変更する追加した SettingsListenerSettingsListener.observe(jcrom.theme.enabled,false, function(value) {LockScreen.enableTh...
changeThemeLockscreen: function ns_changeThemeLockscreen() {var self = this;if(this.enableTheme) {var storage = navigator....
Firefox OS を改造する壁紙を変更する
壁紙を変更する追加した SettingsListenerSettingsListener.observe(jcrom.theme.enabled,false, function(value) {LockScreen.enableTheme = ...
changeThemeWallpaper: function ns_changeThemeWallpaper() {if(this.enableTheme) {var storage = navigator.getDeviceStorage(s...
アプリもテーマ変更するJCROM のテーマ変更にアプリも連動させてみる
変更を試すアプリはブラウザ• トップページのロゴを変更出来るようにする
アプリのテーマ変更に必要な事• SettingsListener を追加して、テーマ変更を行う本体の changeThemeBrowser を実装する。• SettingsListener を使うために、settings_listener.js...
Firefox OS の良い点カスタムROM 作る観点で
Firefox OS の良い点• ビルド時間が短いAndroid で 50 分だったのが、30 分で終わる。• テーマ変更時の切り替えが早いAndroid は約 10 秒程度の待ちを入れているが、Firefox OS は待ちはほぼ無い。(現時点...
Boot to JCROMFirefox OS 向けのカスタム ROMhttps://sites.google.com/site/jcromfirefox/
Boot to JCROM で公開してる内容• 日本語環境入りの Firefox OS 環境ターゲットは KEON、PEAK、Nexus S、Galaxy Nexus• JCROM としての機能を Firefox OS に実装した環境• ソース...
Upcoming SlideShare
Loading in …5
×

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

6,550 views

Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. Firefox OSのカスタムROM開発を始めてみた@androidsola
  2. 2. 自己紹介• twitter : @androidsola• blog : http://blog.sola-dolphin-1.net/• JCROM(Japanese Custom ROM)Projecthttps://sites.google.com/site/jcromproject/Android をベースにしたカスタムROMを作ってます
  3. 3. 本日の内容• Firefox OS を改造する準備• Firefox OS を改造する
  4. 4. Firefox OS を改造する準備Firefox OS をビルドする
  5. 5. Firefox OS をビルドする• Mozilla Developer Network の Firefox OS の所に手順があります。http://goo.gl/ZfNdA英語&最新のソースに追従してるか微妙?なので、自分で(多少)安定してビルド出来る環境を作ってます。
  6. 6. Firefox OS をビルドする• Ubuntu(12.04か12.10)を用意VMWare等の仮想マシンの上でも良い。• 必要なソフトのインストールと環境変数の設定https://sites.google.com/site/jcromfirefox/home/environment
  7. 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. 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. 9. Firefox OS をビルドする• ソースコードの取得&ビルドKEON向けの例(3/4)KEON から必要なファイルを吸い出す。KEON と PC を USB ケーブルで繋いで以下のコマンドを実行。$ cd $B2G_WORK/device/geeksphone/keon$ ./extract-files.sh
  10. 10. Firefox OS をビルドする• ソースコードの取得&ビルドKEON向けの例(4/4)Firefox OS のビルド。$ cd $B2G_WORK$ ./build.sh
  11. 11. Firefox OS を改造する準備実機で動作確認する
  12. 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. 13. 実機で動作確認する• 手順通りにやるだけなので、簡単。ここまで確認出来れば、あとは自分の改造を加えるだけ。
  14. 14. Firefox OS を改造するJCROM で実装してるような機能を Firefox OS に実装する
  15. 15. JCROMで実装してるような機能
  16. 16. Firefox OS を改造するJCROM 用の設定を追加する
  17. 17. JCROM 用の設定を追加する• 設定アプリに項目を追加するSelect Theme をタップするとインストールしているテーマ一覧が表示されるようにする
  18. 18. JCROM 用の設定を追加する設定にJCROMの項目を追加gaia/apps/settings/index.htmlインストールしているテーマをSDカードから読み込んで一覧表示するgaia/apps/settings/js/settings.js設定に表示するアイコンを追加gaia/apps/settings/style/icons.cssgaia/apps/settings/style/images/icons_sprite.gif変更の詳細はGithubを見てくださいhttps://github.com/sola-dolphin1/gaia/commit/b2f16542301e9c133b05651ca81c0f6dc0d630c9
  19. 19. Firefox OS を改造するテーマ変更のデモ
  20. 20. デモ使用したツールは Android Screen Monitorhttp://www.adakoda.com/adakoda/android/asm/
  21. 21. Firefox OS を改造する今回実装したテーマ変更の仕組み
  22. 22. テーマ変更の仕組みチェックボックスの変化でイベントが発生する。イベント発生時に処理したい所に以下を追記した。hogehogeの部分がテーマ変更処理。SettingsListener.observe(jcrom.theme.enabled, false, function(value) {hogehoge();});<label><input type="checkbox"name="jcrom.theme.enabled" /><span></span></label>テーマの有効・無効の設定
  23. 23. テーマ変更の仕組み一覧からテーマを選択するとイベントが発生する。イベント発生時に処理したい所に以下を追記した。hogehogeの部分がテーマ変更処理。SettingsListener.observe(theme.select,"", function(value) {hogehoge();});<p class="fake-select"><button class="icon icon-dialog">SelectTheme</button><select name="theme.select"></select></p>テーマ選択の部分
  24. 24. Firefox OS を改造するステータスバーを変更する
  25. 25. ステータスバーを変更する追加した SettingsListenerSettingsListener.observe(jcrom.theme.enabled, 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. 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. 27. Firefox OS を改造する通知領域の背景を変更する
  28. 28. 通知領域の背景を変更する追加した SettingsListenerSettingsListener.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. 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. 30. Firefox OS を改造するロックスクリーンを変更する
  31. 31. ロックスクリーンを変更する追加した SettingsListenerSettingsListener.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. 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. 33. Firefox OS を改造する壁紙を変更する
  34. 34. 壁紙を変更する追加した SettingsListenerSettingsListener.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. 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. 36. アプリもテーマ変更するJCROM のテーマ変更にアプリも連動させてみる
  37. 37. 変更を試すアプリはブラウザ• トップページのロゴを変更出来るようにする
  38. 38. アプリのテーマ変更に必要な事• SettingsListener を追加して、テーマ変更を行う本体の changeThemeBrowser を実装する。• SettingsListener を使うために、settings_listener.jsを読み込ませる。• SDカードへのアクセス権限(読み込み)を追加する。• 詳細は Github を見てください。https://github.com/sola-dolphin1/gaia/commit/5fce794fc6a6b748b4f51053593ca74a07aec9ef
  39. 39. Firefox OS の良い点カスタムROM 作る観点で
  40. 40. Firefox OS の良い点• ビルド時間が短いAndroid で 50 分だったのが、30 分で終わる。• テーマ変更時の切り替えが早いAndroid は約 10 秒程度の待ちを入れているが、Firefox OS は待ちはほぼ無い。(現時点では、これくらいしか良い点を見つけられてない)
  41. 41. Boot to JCROMFirefox OS 向けのカスタム ROMhttps://sites.google.com/site/jcromfirefox/
  42. 42. Boot to JCROM で公開してる内容• 日本語環境入りの Firefox OS 環境ターゲットは KEON、PEAK、Nexus S、Galaxy Nexus• JCROM としての機能を Firefox OS に実装した環境• ソースコードは Github で公開• 自由に使ってください。JCROM に興味があれば改造して Pull Request ください。

×