Articles for 6月 2013

Firefox OS カスタマイズ – ホームスクリーンのアイコン表示数を変えてみた

今回はホームスクリーンのカスタマイズ第一弾です。

FirefoxOSのホームスクリーンは中央が時計、左が検索、右がインストールアプリのアイコンリストとなっていて、検索画面以外では、下部にDockと呼ばれるAndroidやiPhoneなどでもお馴染みの固定のショートカットが配置できます。

前回NexusS用のROMをビルドして、焼いたのですが、ホームスクリーン自体は公式開発機のKEONとPEAK向けに作成されているようで、低解像度向けのロジックになっているようです。
NexusSの解像度が勿体ないので、アイコンの表示数を増やしてみました。

変更前のアプリのアイコンリストは、こんな感じです。
device-2013-06-19-193002

今回はこれを5×5表示に変えてみようと思います。

手順
まずは、ビルド環境のB2G配下に移動します。

$ cd B2G

変更するファイルは以下の5ファイルです。

gaia/apps/homescreen/js/grid.js
4  var MAX_ICONS_PER_PAGE = 5 * 5;

4行目の1ページあたりのアイコン表示最大数を5×5に変更します。

gaia/apps/homescreen/style/grid.css
38  width: 20%;

38行目のタグliの幅を20%に変更します。今回は横方向に5個のアイコンを表示するので100% / 5 = 20%となります。

gaia/apps/homescreen/js/dock.js
9  var maxNumAppInViewPort = 5, maxOffsetLeft;

9行目のDockのアイコン表示数を5に変更します。アイコンが5×5なので、下部のDockに表示するアイコン数も5個に揃えます。

gaia/apps/homescreen/style/dock.css
13  width: 140%;

13行目のDockの全体幅を140%に変更します。Dockは7個までアイコンを登録できるので、表示数から1つあたりの幅を計算して、100% / 5 * 7 = 140%となります。

gaia/apps/homescreen/js/page.js
22 var SCALE_RATIO = window.innerWidth / BASE_WIDTH * 0.8;

22行目のアイコンのスケール係数に0.8を掛けて、80%に縮めます。アイコンの表示数だけ変えた場合、ぎっしり並んでしまうので、サイズを調整します。

各ファイルの編集が終わったら、ビルドして、焼きましょう。

$ ./build.sh
$ sudo ./flash.sh

こんな感じにアイコンの表示数を変えることができました。
device-2013-06-21-102927

まだまだJavaScriptを追いかけるのに苦労しているのですが、Webアプリケーションに詳しい方なら、もっと大胆な変更が可能なはずです。
FirefoxOSは色々な可能性を感じますね。

Share

Firefox OS カスタマイズ – 起動ロゴを変えてみる

Firefox OSのカスタマイズをやってみなさいと天の声があったので、調べていると簡単に起動ロゴを変えられるとのこと。
勉強会で発表されていたsolaさんのブログに書いてありました。こちら

Firefox OSのロゴを利用するのは基本的にフリーっぽいんですが、改変したらダメだよー、並べるときは火狐→文字の順だよー、など規約があるようで、そのへんは守りつつ・・・NexusSの画面サイズの480×800の起動ロゴ画像を作成して差し替えてみます。
ロゴの規約と素材が公式サイトにあります。こちら

で、作成した画像がこちら!
logo2

さて、画像の差し替え方法ですが、solaさんのブログによると、ファイルを環境に置いてビルドすればいいだけという簡単仕様のようです。

前回のビルド手順で作成した、ビルド環境のB2Gディレクトリに移動します。
ここに、gaiaというディレクトリが出来ていると思います。

Firefox OSは3つのレイヤーで構成されていて、gaiaはUIの描画を行う最上位レイヤーです。

差し替え手順
作成画像がホームディレクトリに置いてあると仮定しています。

$ cd B2G
$ mkdir -p gaia/apps/system/resources/power
$ cp -p ~/logo.png gaia/apps/system/resources/power/carrier_power_on.png
$ ./build.sh
$ sudo ./flash.sh

キャリアごとのブートアニメーションなんかが簡単に設定できるようになっているんですねー
次回はホームスクリーンを変更する方法について書こうと思います。

Share

Firefox OS ビルド for NexusS

先日、TizenとFirefoxOSの合同勉強会に参加して以来、FirefoxOSに盛り上がりを感じている今日このごろです。

今回はNexusSが手元にあったので、FirefoxOSを焼いてみることにしました。
NexusSは公式にサポートされているので、簡単に焼くことができました。
前回、石原が挑戦した環境はUbuntu12.04でしたが、自分の環境はUbuntu12.10 64bitなので、ちょっとつまづいた部分もあり、その辺りも交えて手順を書いて行こうと思います。

環境構築
Ubuntu12.10に必要なツールをインストールします。
環境構築に関しては、こちらを参考に。

$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make

gccとg++がバージョン4.7だと、ビルドエラーが出てしまいます。
gccは4.6に変えて大丈夫!と思っていたらg++も4.6にしないといけなくて、数時間無駄にしましたorz
ちなみに既知のエラーとして、公式サイトにも記載されています。こちら

$ sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.7 110
$ sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 100
$ sudo update-alternatives --config gcc
$ sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.7 110
$ sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 100
$ sudo update-alternatives --config g++

自分の環境は64bitなので、上記に加えてライブラリの参照先も変えないといけません。

$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so

これで環境構築は終わりです。ソースを落としてビルドしてみましょう!

リポジトリの複製
ワークディレクトリを作成し、そこにリポジトリの複製を取得します。

$ git clone git://github.com/mozilla-b2g/B2G.git

取得できたら、B2Gディレクトリが作成されているので、中に入ります!

$ cd B2G

ビルド
まずは、ターゲットに併せてコンフィギュレーションを行います。コンフィギュレーションで必要なパッケージがダウンロードされるようです。基本的に全てシェルを実行するだけです。
今回はNexusS向けのビルドを行うので、nexus-sを指定。

$ ./config.sh nexus-s

毎日なにかしらリポジトリが更新されているようです。タイミングによってはパッケージが見つからずエラーになったりしました・・・
そんな時は、コーヒーでも飲みながら少し時間を起きましょう。日を改めるという忍耐力も必要です:P
大抵はエラーも無く終わるはずです。

では、ビルドを開始しましょう。

$ ./build.sh

./build.sh -j1で並列ビルドをしないようにすることを推奨しているみたいですが、指定無しでも大丈夫でした。

焼き込み
NexusSを音量大+電源ボタンでFASTBOOTモードで起動し、USB接続します。
焼き込みもシェルが用意されているので、実行します。焼き込みだけは管理者権限が必要です。

$ sudo ./flash.sh

自動でBootLoaderのUnlockからRebootまで行なってくれます。

気づいたときにはFirefoxOSが起動しているはずです。

Share