More Related Content Similar to KEONとPEAKが無くてもFirefox OS開発出来る Similar to KEONとPEAKが無くてもFirefox OS開発出来る (20) More from android sola (11) 2. 自己紹介
●
twitter ： @androidsola
blog ： http://blog.sola-dolphin-1.net/
●
JCROM(Japanese custom rom) Project
https://sites.google.com/site/jcromproject/
Android をベースにしたカスタム ROM を作ってます。
●
HTML5 、 JavaScript は触れた事が無いので、
何かアプリ作るためにこれから勉強します。
3. 本日の内容
●
Nexus S 等の Android 端末で Firefox OS を使う
●
PandaBoard 等の開発ボードで Firefox OS を使う
●
KEON と PEAK 向けに Firefox OS をビルドする
●
Firefox OS をカスタマイズしてみる
18. Nexus S で Firefox OS
●
Mozilla Developer Network の Firefox OS の所に手
順があります。
http://goo.gl/ZfNdA
19. Nexus S で Firefox OS
●
ソースコード取得＆ビルド
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh nexus-s
$ ./build.sh
20. Nexus S で Firefox OS
●
Nexus S への書き込み
fastboot モードにして以下を実行
$ fastboot flash boot out/target/product/crespo/boot.img
$ fastboot flash system
out/target/product/crespo/system.img
$ fastboot flash userdata
out/target/product/crespo/userdata.img
21. Nexus S で Firefox OS
●
Nexus S で Firefox OS が起動（しかし ... ）
KEON や PEAK の画面写真と違って、
幅が余ってる感じ ...
22. Nexus S で Firefox OS
●
Nexus S で Firefox OS が起動（しかし ... ）
アプリの一覧も同じ状態
左右の何も無い空間が気になる
23. Nexus S で Firefox OS
●
Nexus S で Firefox OS が起動（しかし ... ）
言語の選択に日本語が無い！
24. 画面の調整
●
KEON と PEAK の画面写真
HVGA(240x320) と qHD(540x960) の
どちらも画面ピッタリ。
HVGA 向けだから Nexus S(480x800)
では左右に空間が出来ると予想し
たが、 qHD でもうまく表示出来て
るので、何か仕組みがあるはず。
25. KEON と PEAK のビルド環境
●
manifest.xml を確認すると、 PEAK 向けが無かった
※デフォルトで取得する v1-train ブランチには無い
●
PEAK 用のマニフェストファイルは master ブランチに
登録されていた
●
KEON は v1-train か master 、 PEAK は master を使用
しろという事？
26. KEON と PEAK の違い
●
gaia 、 gecko 、 gonk-misc を比較した（ Firefox OS
固有の部分らしいので）
– KEON
gaia : v1-train
gecko : gecko-18
gonk-misc: v1-train
– PEAK
gaia : master
gecko : master
gonk-misc: master
master ブランチを使えば
OK ？
master ブランチを使えば
OK ？
28. ホームアプリを比較
●
master は横幅 100% 指定してるからいっぱいに表示さ
れる？
--- /home/sola/v1-train/B2G/gaia/apps/homescreen/style/grid.css
+++ /home/sola/master/B2G/gaia/apps/homescreen/style/grid.css
@@ -25,7 +25,7 @@
}
.apps ol {
- width: -moz-calc(4 * 8rem);
+ width: 100%;
padding: 0;
list-style-type: none;
display: block;
32. @2x の画像はどこで参照してる？
●
HIDPI という変数が条件になっている
gaia/build/webapp-zip.js
// Forces the file to pass as @2x
if ( HIDPI != '*' && file.path.search('@2x') == -1 ) {
var path2x = file.path.split('.')
[0]+'@2x.'+file.path.split('.')[1];
var file2x = new FileUtils.File(path2x);
// Adds the suffix
if ( file2x.exists() ) {
var path = path.split('.')[0]+'@2x.'+path.split('.')[1];
var file = file2x;
}
}
addToZip(zip, '/shared/resources/' + path, file);
33. HIDPI はどこで設定している？
●
HIDPI への設定があるのは Makefile のみ
gaia/Makefile
32 行目
HIDPI?=*
412 行目
const HIDPI = "$(HIDPI)";
●
export HIDPI=1 としてからビルドすれば、 @2x のファ
イルを使用するようになる。
この辺の仕組みを拡張すれば、色々な解像度向けにリ
ソースファイルを用意して使うことが出来そう。
37. 日本語を追加する方法
●
何か書いてないかと Mozilla の wiki を眺めていたら
答えが書いてあった。
https://developer.mozilla.org/en-US/docs/Mozilla
/Firefox_OS/Building
Building multilocale という項目があって、 Gaia と
Gecko 向けに日本語等の言語データを追加する方法が
書いてある。
38. 日本語を追加する方法
●
Gaia
$ hg clone http://hg.mozilla.org/gaia-l10n/ja gaia-l10n/ja
$ export LOCALE_BASEDIR=$PWD/gaia-l10n
$ export
LOCALES_FILE=$PWD/B2G/gaia/shared/resources/languages-japan.json
languages-japan.json の内容
英語と日本語の 2 種類を選べるようにするには以下のように書く。
{
"en-US" : "English (US)",
"ja" : " 日本語 "
}
39. 日本語を追加する方法
●
Gecko
$ hg clone http://hg.mozilla.org/l10n-central/ja gecko-l10n/ja
$ hg clone http://hg.mozilla.org/build/compare-locales
$ export L10NBASEDIR=$PWD/gecko-l10n
$ export MOZ_CHROME_MULTILOCALE="ja"
$ export PATH="$PATH:$PWD/compare-locales/scripts"
$ export PYTHONPATH="$PWD/compare-locales/lib"
MOZ_CHROME_MULTILOCALE には追加するものを記述する。
複数書く例
MOZ_CHROME_MULTILOCALE="ja zh-TW"
42. 日本語辞書を追加する
●
辞書に関しての README があるので、確認する。
gaia/apps/keyboard/js/imes/jskanji/README
# Japanese IME
About Dictionary
The IME dictionary is converted from IPAdic project with
following steps:
1. Get a copy of IPAdic at
http://sourceforge.jp/projects/ipadic/.
2. Extract all .dic files to dict/ipadic/.
3. run `make` under the `dict` directory to generate dict.json.
The tool of `dict/jcconv.py` is getting from
https://github.com/taichino/jcconv.
43. 日本語辞書を追加する
●
README にある URL にアクセスすると、 IPAdic legacy
と書いてあった。
●
調べると（ IPAdic を元に作った？） NAIST Japanese
Dictionary というのがあるらしいので、こちらを使う
ことにした。
http://sourceforge.jp/projects/naist-jdic/
46. フォントを追加する例
●
Android で使用されている MTLmr3m.ttf を使う場合
MTLmr3m.ttf をソースツリーのどこかに置く。
他のフォントが置いてある所（ external/moztt ）に便乗させてもらう。
external/moztt/Android.mk に以下の内容を追記。
include $(CLEAR_VARS)
LOCAL_MODULE := MTLmr3m.ttf
LOCAL_SRC_FILES := MTLmr3m/$(LOCAL_MODULE)
LOCAL_MODULE_CLASS := ETC
LOCAL_MODULE_TAGS := optional
LOCAL_MODULE_PATH := $(TARGET_OUT)/fonts
include $(BUILD_PREBUILT)
47. フォントを追加する例
●
Android で使用されている MTLmr3m.ttf を使う場合
MTLmr3m.ttf をビルドして出来るイメージに組み込むように、
PRODUCT_PACKAGES に MTLmr3m.ttf を追記する。
ビルド時に読まれる Android.mk 等に追記してあげれば良いの
で、 gonk-misc/b2g.mk に以下の 1 行を追記した。
PRODUCT_PACKAGES += MTLmr3m.ttf
50. official ビルドに変更する
●
MOZILLA_OFFICIAL を 1 にしてあげれば良い
gaia/Makefile の中で参照して OFFICIAL という変数に
代入してる。
OFFICIAL が 1 かどうかで、
- shared/resources/branding/unofficial
- shared/resources/branding/official
のどちらを使用するか判断している。
53. user/userdebug でビルドする
●
user/userdebug でビルドする簡単な方法
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh nexus-s
ここの段階で生成されている .config ファイルを編集する。
.config の内容
MAKE_FLAGS=-j10
GECKO_OBJDIR=/home/sola/B2G/objdir-gecko
DEVICE_NAME=nexus-s
DEVICE=crespo
LUNCH=full_crespo-userdebug
この後、 $ ./build.sh を実行してビルドすれば OK
これを追加します。
（ userdebug の例です）
これを追加します。
（ userdebug の例です）
54. Firefox OS での user/userdebug の差
gaia/Makefile の内容
GAIA_PROFILE_INSTALL_PARENT := $(TARGET_OUT_DATA)/local
GAIA_APP_INSTALL_PARENT := $(GAIA_PROFILE_INSTALL_PARENT)
ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),)
GAIA_MAKE_FLAGS += PRODUCTION=1
B2G_SYSTEM_APPS := 1
endif
ifeq ($(B2G_SYSTEM_APPS),1)
GAIA_MAKE_FLAGS += B2G_SYSTEM_APPS=1
GAIA_APP_INSTALL_PARENT := $(TARGET_OUT)/b2g
CLEAN_PROFILE := 1
endif
GAIA_APP_INSTALL_PATH := $(GAIA_APP_INSTALL_PARENT)/webapps
user/userdebug の時だけuser/userdebug の時だけ
アプリのインストールパスの設定アプリのインストールパスの設定
55. Firefox OS での user/userdebug の差
gaia/Makefile の内容
GAIA_PROFILE_INSTALL_PARENT := $(TARGET_OUT_DATA)/local
GAIA_APP_INSTALL_PARENT := $(GAIA_PROFILE_INSTALL_PARENT)
ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),)
GAIA_MAKE_FLAGS += PRODUCTION=1
B2G_SYSTEM_APPS := 1
endif
ifeq ($(B2G_SYSTEM_APPS),1)
GAIA_MAKE_FLAGS += B2G_SYSTEM_APPS=1
GAIA_APP_INSTALL_PARENT := $(TARGET_OUT)/b2g
CLEAN_PROFILE := 1
endif
GAIA_APP_INSTALL_PATH := $(GAIA_APP_INSTALL_PARENT)/webapps
user または userdebug でビルドすると
/system/b2g になる
user または userdebug でビルドすると
/system/b2g になる
初期値は /data/local初期値は /data/local
56. Firefox OS での user/userdebug の差
●
user/userdebug でビルドすると system パーティショ
ン（ system/b2g/webapps ）にアプリが格納される。
●
eng （デフォルト）でビルドすると data パーティショ
ン（ data/local/webapps ）にアプリが格納される。
user/userdebug でビルドしないと、初期化（ data
パーティションのクリア）でたぶん起動しなくなる。
アプリがいなくなるので ...
eng ビルドのまま system パーティションにアプリを格
納したければ、 gaia/Makefile を編集すれば良い。
58. Galaxy Nexus で Firefox OS
●
Mozilla Developer Network の Firefox OS の所に手
順があります。
http://goo.gl/ZfNdA
59. Galaxy Nexus で Firefox OS
●
ソースコード取得＆ビルド
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh galaxy-nexus
※ 日本語化等、変更を加える場合はここで作業を行う。
$ ./build.sh
60. Galaxy Nexus で Firefox OS
●
Galaxy Nexus への書き込み
fastboot モードにして以下を実行
$ fastboot flash boot out/target/product/maguro/boot.img
$ fastboot flash system
out/target/product/maguro/system.img
$ fastboot flash userdata
out/target/product/maguro/userdata.img
61. Galaxy Nexus で Firefox OS
●
Galaxy Nexus で Firefox OS を使う時の課題
– キーが電源、音量 UP/DOWN しかないのでホームキー
を押せない（戻れない）
– カメラ使えない
– SD カード認識しない
62. Galaxy Nexus で Firefox OS
●
ホームキーを使う方法
音量 UP キーをホームキーに割り当てる。
（音量の操作は設定から行えば何とかなるので）
device/samsung/tuna/tuna-gpio-keypad.kl を変更する。
-key 115 VOLUME_UP WAKE
+key 115 HOME WAKE
変更後、 $ ./build.sh でビルドし直す。
●
カメラと SD カードは未対応
Galaxy Nexus でどうしても使いたいという気持ちにな
らないので詳しくは調べてない ...
64. PandaBoard ES で Firefox OS
●
Mozilla Developer Network の Firefox OS の所に手
順があります。
http://goo.gl/ZfNdA
65. PandaBoard ES で Firefox OS
●
ソースコード取得＆ビルド
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh pandaboard
$ ./build.sh
66. PandaBoard ES で Firefox OS
●
ソースコード取得＆ビルド
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh pandaboard
$ ./build.sh
ビルドエラーで終了した（ 5/10 ）
（ソース取得した日によってはエラー出ないかも）
67. PandaBoard ES で Firefox OS
●
暫定的な対処（ビルドエラー出てなければ不要）
ビルドエラーが出ていた二つのリポジトリを削除した
- external/negatus
- external/orangutan
68. PandaBoard ES で Firefox OS
●
SD カードへのイメージの書き込み
fastboot での手順が書いてあるけど、 PC で直接 SD
カードに書き込む事にする。
B2G ディレクトリ直下で以下を実行
$ wget
http://sola-dolphin-1.net/data/B2G/patch/panda/mksdcard_panda
board.sh
$ chmod +x mksdcard_pandaboard.sh
$ LANG=C sudo ./mksdcard_pandaboard.sh /dev/sdX $PWD
※/dev/sdX は SD カードのデバイスファイルを指定。
69. PandaBoard ES で Firefox OS
●
PandaBoard ES で Firefox OS が起動した様子
・首を曲げないと見るのが辛い
・操作不能（タッチパネル無い＆マウスカーソル出ない）
・首を曲げないと見るのが辛い
・操作不能（タッチパネル無い＆マウスカーソル出ない）
70. PandaBoard ES で Firefox OS
●
マウスカーソルに対応
https://bugzilla.mozilla.org/show_bug.cgi?id=781039
●
横画面表示に対応
https://bugzilla.mozilla.org/show_bug.cgi?id=851442
gecko へのパッチ
http://sola-dolphin-1.net/data/B2G/patch/panda/0001-enabl
e-landscape-orientation-for-Pandaboard-DVI-outp.patch
http://sola-dolphin-1.net/data/B2G/patch/panda/0001-Add-m
ouse-cursor.patch
device/ti/panda へのパッチ
http://sola-dolphin-1.net/data/B2G/patch/panda/0001-Set-t
he-screen-orientation-to-landscape.patch
71. PandaBoard ES で Firefox OS
●
PandaBoard ES で Firefox OS が起動した様子
小さくて見難いが、これがカーソル
マジメに使うならもう少し大きく表示
するように変更するのが良い。
小さくて見難いが、これがカーソル
マジメに使うならもう少し大きく表示
するように変更するのが良い。
73. PandaBoard ES で Firefox OS
●
Nexus S 向けに行った日本語化対応等は PandaBoard に
も適用出来る
74. 以上のような Nexus や PandaBoard で Firefox OS
を使うというブログ記事を KEON と PEAK が届かな
いので上げ続けた
（お前らの端末イラネーよという意味を込めて）
76. 5/9 Geeksphone からの残念な連絡
●
メールのタイトルが「 PROBLEM WITH ORDER 」
●
本文は代引での注文は日本に発送出来ないという内容
（過去のやり取りは何だったのかと思った・・・）
TL で同様のメールが届いた人が問い合わせたところ、
銀行振込に変更するしか手段が無いらしい。
スペインへの送金は金かかるのでほぼ諦め状態に。
81. KEON と PEAK 向けに Firefox OS をビルドする
※ 入手したのでやらないわけにはいかない
82. KEON 向けに Firefox OS をビルドする
●
Mozilla Developer Network の Firefox OS の所に手
順があります。
http://goo.gl/ZfNdA
83. KEON 向けに Firefox OS をビルドする
●
ソースコード取得＆ビルド
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh keon
日本語化等、変更を加える場合はここで作業を行う。
高解像度向けの変更（ gaia を master にして HIDPI を設定）は
不要。
$ device/geeksphone/keon
$ ./extract-files.sh
（実機からファイルを吸い出すので、 PC と USB 接続しておく）
$ cd -
$ ./build.sh
84. KEON 向けに Firefox OS をビルドする
●
KEON への書き込み
fastboot モードにして以下を実行
$ 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
86. PEAK 向けに Firefox OS をビルドする
●
Mozilla Developer Network の Firefox OS の所に手
順があります。
http://goo.gl/ZfNdA
87. PEAK 向けに Firefox OS をビルドする
●
ソースコード取得＆ビルド
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh peak
KEON と PEAK のビルド環境で調べた通り、
デフォルトの v1-train ブランチには peak.xml が無いのでエ
ラーとなる。
fatal: manifest 'peak.xml' not available
fatal: manifest peak.xml not found
Repo sync failed
88. PEAK 向けに Firefox OS をビルドする
●
考えた解決策
– master ブランチからソースを取得する
– keon.xml から peak.xml を作る
デバイスの固有部分だけを PEAK 向けにする
89. PEAK 向けに Firefox OS をビルドする
●
考えた解決策
– master ブランチからソースを取得する
– keon.xml から peak.xml を作る
デバイスの固有部分だけを PEAK 向けにする
90. PEAK 向けに Firefox OS をビルドする
●
master ブランチからソースを取得するように変更
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ BRANCH=master ./config.sh peak
日本語化等、変更を加える場合はここで作業を行う。
今回の場合は gaia は既に master になっている。
$ cd device/geeksphone/peak
$ ./extract-files.sh
（実機からファイルを吸い出すので、 PC と USB 接続しておく）
$ ./build.sh
91. PEAK 向けに Firefox OS をビルドする
●
PEAK への書き込み
fastboot モードにして以下を実行
$ fastboot flash boot out/target/product/peak/boot.img
$ fastboot flash system out/target/product/peak/system.img
$ fastboot flash userdata
out/target/product/peak/userdata.img
92. PEAK 向けに Firefox OS をビルドする
●
PEAK もうまくいったか ... ？
問題無さそうに見えるが、キャプチャを取
得すると 360x640 という謎の解像度で取得
されていた。
本当のサイズは 540x960 のはず。
原因は gecko か gonk-misc と予想してる。
これらを v1-train ではなくて master で使
用してるのが Nexus S の環境と大きく異な
る点のため。
93. PEAK 向けに Firefox OS をビルドする
●
考えた解決策
– master ブランチからソースを取得する
– keon.xml から peak.xml を作る
デバイスの固有部分だけを PEAK 向けにする
94. PEAK 向けに Firefox OS をビルドする
●
keon.xml から peak.xml を作って、ソースを取得して
みる
$ git clone git://github.com/mozilla-b2g/B2G.git
$ cd B2G
$ ./config.sh keon （ keon 向けに一度ソースを取得する）
peak.xml を作成する
$ cd .repo/manifests
$ cp keon.xml peak.xml
95. PEAK 向けに Firefox OS をビルドする
●
peak.xml の変更内容
KEON 固有のリポジトリは「 <!-- Keon specific things --> 」
の下に書かれているので、まずはこれを削除する。
次に master ブランチにある peak.xml の「 <!-- Peak specific
things --> 」の下に書かれているものを keon.xml から作成した
keon.xml に追記する。
96. PEAK 向けに Firefox OS をビルドする
●
peak.xml の編集後にやること
$ cd B2G/.repo
$ rm manifest.xml
$ ln -s manifests/peak.xml manifest.xml
$ cd -
$ repo sync
repo sync 完了後はビルドして、
完了後に出来たイメージを PEAK に書き込む。
シンボリックリンクを作り直してるのは、ビルド中に
manifest.xml の内容をチェックするようで、 keon.xml を指して
るままだと keon 関連のファイルが無いと言って怒られるため。
97. PEAK 向けに Firefox OS をビルドする
●
今度はうまくいった！
540x960 でキャプチャを撮ることが出来
た。
解像度がおかしくなる原因は gecko か
gonk-misc でほぼ当たりと思うが、調べる
モチベーションが無くて放置中。
PEAK 以外の高解像度端末に対応する際、何
か必要なノウハウが出てくるかもしれない
が ...
103. JCROM Project for Firefox OS （仮）
●
Firefox OS でもカスタム ROM を作る
●
JCROM のように見た目を自分好みに変える機能を作る
●
当面はベースとなる Firefox OS の環境を安定させる
事（ビルドが通る、ちゃんと起動する等）
サイトの URL
https://sites.google.com/site/jcromfirefox/
環境構築、ビルド手順などを書いていく予定。
ソースコードは Github で公開しています。
https://github.com/sola-dolphin1
104. JCROM Project for Firefox OS （仮）
カスタマイズの詳細は
「関東 Firefox OS 勉強会 1st( 仮 ) 」で。
http://atnd.org/events/39556
「 Firefox OS 向けのカスタム ROM 開発」
として話をする予定。
