Fx0買いました！Firefox OSでゲームアプリを動かしてみる！～（2）enchant.jsで作ったアプリをFx0で動かしてみる～ 

# Fx0買いました！Firefox OSでゲームアプリを動かしてみる！ <br>　～（2）enchant.jsで作ったアプリをFx0で動かしてみる～ 

今日はとても暖かくて小春日和でした。
![resize.jpg](https://qiita-image-store.s3.amazonaws.com/0/70507/b4f6ecfb-fb7c-d27c-ad2f-4f1220c85a88.jpeg)
もう春も近いんですかねー。ヽ(*>∀<*)ﾉ｡.

さて、今回は[前回](http://qiita.com/onaona/items/6f30f5239ebd61391fe2)作ったgetbananaを[Fx0](http://au-fx.kddi.com/products/)で動かしてみます。
手順はだいたい前回と同じですが、そうは言っても必要な設定などはあるみたいです。

## 事前準備
**こんな感じの流れで進めます。**
[用意するもの](#Ready)
[Fx0で必要な設定](#Settings)
[USBドライバのインストール](#DrvInstall)
<a name="Ready"></a>
#### **用意するもの**
Fx0とUSBケーブルくらいです。
![IMG_1477.JPG](https://qiita-image-store.s3.amazonaws.com/0/70507/4a2af816-9863-0414-a8b8-fa5e5b022d2f.jpeg)![IMG_1483.JPG](https://qiita-image-store.s3.amazonaws.com/0/70507/dadbabd6-c333-adb2-1d1f-25007abddc0d.jpeg)
<a name="Settings"></a>
#### **Fx0で必要な設定**
Fx0の**環境設定アプリ**を起動して**[端末情報]**-**[その他の情報]**を選択します。
こちらの画面で**[開発者メニュー]**にチェックをつけます。
![developerMenuOn.png](https://qiita-image-store.s3.amazonaws.com/0/70507/313229de-5b4f-7757-f9e1-5ba79d5d67ff.png)

環境設定アプリのトップまで戻ってみます。なんと！**[開発者]**というメニューが追加されています。
こちら選択します。
![developerMenu.png](https://qiita-image-store.s3.amazonaws.com/0/70507/ae00f6dd-887d-e3c6-6c3e-bb0791c6c74a.png)

開発者メニューに入ったら、、[USB経由のデバッグ]のメニューで**[ADBと開発ツール]**を選択します。
![usbDebugOn.png](https://qiita-image-store.s3.amazonaws.com/0/70507/ba09fe48-1953-f0fa-fc5c-e85f302060c8.png)
これでFx0の設定は完了です。d(^^*)

<a name="DrvInstall"></a>
#### **USBドライバのインストール** （Windowsの場合のみ）
次に[USBドライバ](http://www.wanichan.com/beginner/pc/basis/win17.htm)をインストールします。結構、面倒くさいですね。(;´ρ`) ｸﾞｯﾀﾘ
但し、こちらをインストールしないとPCからFx0を認識してくれないですからねー。
[LGEのサイト](http://www.lg.com/jp/support-mobile/lg-LGL25)からインストールします。
![usbdriver-install.png](https://qiita-image-store.s3.amazonaws.com/0/70507/d3a5b03a-bfe8-7d3f-e068-976dcaf97c67.png)
Fx0って別名LGL25っていってLGE社製なんですね。。実は知らなかった。。（ _ _ ）......
ドライバをインストール後、設定が完了するので暫くお待ち下さい。
(windowUpdateのドライバ検索は時間が掛かるのでスキップしましょう。)
![images.jpg](https://qiita-image-store.s3.amazonaws.com/0/70507/930d6284-35e8-a406-9398-5283ba4f550f.jpeg)

環境の違いにより、うまくいかないことがあるかもしれません。
その場合、こちらの[auサイト](http://opensource.kddi.com/fx0/)も参考にして下さい。
ドライバのインストールが完了したら、アプリ（getbanana）をインストールします。
## アプリ（getbanana）のインストール
アプリ（getbanana）をインストールする前に、まずはWebIDEからFx0を認識させましょう。
[Firefoxブラウザ](https://www.mozilla.org/ja/firefox/new/)からShift+F8を押し[WebIDE](https://developer.mozilla.org/ja/docs/Tools/WebIDE)を開いて、**[USBデバイス]**の**[Firefox OS (LGL25)]**を選びます。
![webide-fx0.png](https://qiita-image-store.s3.amazonaws.com/0/70507/2eeecb56-cdee-1af7-6a11-2b038461d0e1.png)

そうすると、Fx0に接続許可を求めるダイアログが表示されるので**OK**を選択します。
![askUsbDebug.png](https://qiita-image-store.s3.amazonaws.com/0/70507/3765f920-1ea0-a02b-12db-a584fa9bcab4.png)

お待たせしました。いよいよアプリ（getbanana）のインストールです。
WebIDEの**[プロジェクト]**-**[[パッケージ型アプリ](https://developer.mozilla.org/ja/Apps/Packaged_apps)を開く]**を選択します。（ここは前回と同じですね。）
![webide-fx0.png](https://qiita-image-store.s3.amazonaws.com/0/70507/6f0e9404-6140-a77f-e52c-caedf9c3ce65.png)
フォルダの選択画面が表示されるので、*[解凍フォルダ名]/examples/expert/getbanana*を選択します。
## アプリ（getbanana）の起動
[再生ボタン]がアクティブになるので押します。

![webide-myapp-install.png](https://qiita-image-store.s3.amazonaws.com/0/70507/cc3154b5-e720-ee87-6f39-879518cf403a.png)

ドキドキ　(*ﾟ▽ﾟ*)ワクワク

![getbanana-fx0-camera-portlait.png](https://qiita-image-store.s3.amazonaws.com/0/70507/8bb5d09a-e8a3-4adc-db4d-6c905fa502cb.png)

**Fx0でgetbananaが動作しました。Ｏ(≧∇≦)Ｏ イエイ！！**クマをタップして指を動かすとクマも合わせて移動します。
これで自分で作成したアプリをFx0上で動かすことができそうです。簡単ですね。

因みに、一度インストールすればHomescreenにショートカットが作成され、タップすればgetbananaが起動できます。
![getbanana-shortcut.png](https://qiita-image-store.s3.amazonaws.com/0/70507/14f1c9f9-76bf-04c7-ab95-19d480a68679.png)
アイコンはアイコンが画像を設定していないので、デフォルトのロケットみたいなのアイコンになっています。
アイコンの下のアプリ名も前回サンプルをコピーしたmanifest.webappのnameに設定されている「マイアプリ」が表示されています。
変更したい場合は[manifest.webapp](https://developer.mozilla.org/ja/Apps/Manifest)を変更して下さい。

getbananaの画面をFx0で見ると下に無駄な余白がかなりありますね。。
シミュレータと比較しても余白の割合が広いような。。

左がシミュレータ、右がFx0
![getbanana-simulator.png](https://qiita-image-store.s3.amazonaws.com/0/70507/ed59e8f4-4db1-b7d3-adbf-f259915e2cee.png)![getbanana-fx0.png](https://qiita-image-store.s3.amazonaws.com/0/70507/7136f644-7ac5-a304-f8a0-0446c118678d.png)

なんか嫌ですねー。。[次回](http://qiita.com/onaona/items/a325f0a5023a6388f104)はちょっとこの余白何とかならないか試してみます。

[（1）enchant.jsを使ってみる](http://qiita.com/onaona/items/6f30f5239ebd61391fe2)
[（3）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応1）](http://qiita.com/onaona/items/a325f0a5023a6388f104)
[（4）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応2）](http://qiita.com/onaona/items/90e8f329711ccd2c1047)
[（5）enchant.jsで作ったアプリをFx0で動かしてみる（余白の対応3）] (http://qiita.com/onaona/items/8ebe91b3f82d4dff6797)



[PHASERを使ってゲームアプリを動かしてみた](http://qiita.com/onaona/items/ef113de5e1efdef74c93)