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


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

先日[Fx0](http://au-fx.kddi.com/products/)を購入してみました。
![IMG_1475.JPG](https://qiita-image-store.s3.amazonaws.com/0/70507/1b239c5e-e96c-128d-d7ef-f014342ce882.jpeg)![IMG_1477.JPG](https://qiita-image-store.s3.amazonaws.com/0/70507/f85fc3e5-9b80-5f26-0338-e81f272f2073.jpeg)
金のロゴがいい感じです。(*ﾟ0ﾟ)ﾊｯ


簡単にアプリを作れるというふれこみなので、、
試しにゲームとか作って動かせるのか試してみました。ヽ(〃´∀｀〃)ﾉ

何のライブラリが使えるのかも良く解っていないので、とりあえずメジャーなenchant.jsあたりから試してみます。
<a name="what"></a>
## enchant.js とは？
enchant.js isは、簡単にゲームやアプリを開発できる HTML5 + JavaScriptフレームワークです。
因みに「エンチャント ジェイエス」と読みます。
[![2015-03-04_125341.png](https://qiita-image-store.s3.amazonaws.com/0/70507/758b3e7d-7d84-9093-afe8-88736c5a1f82.png)](http://enchantjs.com/ja/)
[MITライセンス](http://ja.wikipedia.org/wiki/MIT_License)に基づくオープンソースソフトウエアとして開発が進められていて、
すでに1000本以上のゲーム/アプリが公開さてているみたい、スゴイですね。（*＾ワ＾*）
<a name="Env"></a>
## 今回試した環境
まずはFirefoxシミュレータ（Firefox OS2.0シミュレータ）を使って動かしてみます。
うまく動いたらFx0で試してみようと思っています。
<a name="Install"></a>
## enchant.jsのインストール
[こちら](http://enchantjs.com/ja/)からダウンロードしてください。

ダウンロードしたenchant.js-builds-0.8.2-b.zipを展開すると、下記のようにファイルがたくさんでてきました。
プラグインやドキュメント類も全て含まれています。
![2015-03-04_202746_2.png](https://qiita-image-store.s3.amazonaws.com/0/70507/03b3de64-8068-886d-4d1b-bae78af53ad0.png)

examples/expert/action下にあるindex.htmlをブラウザで開いたら、そのままゲームとして動きました。
![2015-03-04_203339_r2.png](https://qiita-image-store.s3.amazonaws.com/0/70507/a0a9a779-c8e5-5a5c-8f11-d1719f2e208a.png)
それでは、いよいよFirefoxシミュレータでこのライブラリを動かしてみます。
<a name="Go"></a>
## FirefoxOSシミュレータを使って動かしてみる！
**getbanana**というのが、タッチ操作が使えるみたいです。
スマホに向いてそうなので、こちらで試してみます。

**こんな感じの流れで進めます。**
[1.FirefoxOSシミュレータの起動](#SimLaunch)
[2.アプリ（getbanana）のインストール](#AppInstall)
[3.アプリ（getbanana）の起動](#AppLaunch)

<a name="SimLaunch"></a>
#####**1.FirefoxOSシミュレータの起動**
[Firefoxブラウザ](https://www.mozilla.org/ja/firefox/new/)からShift+F8を押し[WebIDE](https://developer.mozilla.org/ja/docs/Tools/WebIDE)を開きます。
WebIDEのメニューから[Firefox OS 2.0]選択して、[Firefox OSシミュレータ](https://developer.mozilla.org/ja/docs/Tools/Firefox_OS_Simulator)起動します。

![webide-select-fxos2.0sim.png](https://qiita-image-store.s3.amazonaws.com/0/70507/cd45adfe-fa48-a119-f921-c843a2e37a4d.png)

しばらくお待ちを。。


こんな画面が出てきました。
![webide-fxos2.0sim.png](https://qiita-image-store.s3.amazonaws.com/0/70507/6ff6a0ee-ff5b-ea0c-bbae-9c3707e1e1d3.png)
では、getbananaをインストールしてみます。
<a name="AppInstall"></a>
#####**2.アプリ（getbanana）のインストール**
WebIDEの[プロジェクト]-[[パッケージ型アプリ](https://developer.mozilla.org/ja/Apps/Packaged_apps)を開く]を選択します。
※1:Firefox OSのアプリには[ホスト型アプリとパッケージ型アプリ](https://developer.mozilla.org/ja/Apps/Packaged_apps)の2種類があるみたいです。
端末内にインストールする場合はパッケージ型みたいです。
![webide-select-package.sim.png](https://qiita-image-store.s3.amazonaws.com/0/70507/80b5dfc4-dda7-5b40-ac81-b0b3dcae80d8.png)
フォルダの選択画面が表示されるので、*[解凍フォルダ名(※2)]/examples/expert/getbanana*を選択します。
※2:今回はenchant.js-builds-0.8.2-bになります。

**あれ？？エラーになっちゃいました。**
![getbanana-nomanifest.png](https://qiita-image-store.s3.amazonaws.com/0/70507/97700eef-e570-f320-8d54-3e3655d4a3ce.png)
[manifest.webapp](https://developer.mozilla.org/ja/Apps/Manifest)ファイルが必要と書いてあります。

無いなら自分で作るしかないですよね。(￣ｰ￣)ﾆ
[こちら](https://developer.mozilla.org/ja/Apps/Manifest)参考にして、作ってみました。

こんな感じです。

```json:manifest.webapp
{
  "name": "マイアプリ",
  "description": "アプリの簡潔な説明をここに書きます",
  "launch_path": "/index.html",
  "icons": {
    "512": "/img/icon-512.png",
    "128": "/img/icon-128.png" 
  },
  "developer": {
    "name": "あなたの名前もしくは組織名",
    "url": "http://your-homepage-here.org" 
  },
  "default_locale": "ja" 
}
```
あと、こんな記載があるので**文字コードはUTF-8**にしておくことをお忘れなく。
>マニフェストの文字エンコーディングは UTF-8 とする必要があります。

気を取り直して、もう一回*[解凍フォルダ名]/examples/expert/getbanana*を選択します。
![getbanana-manifest.png](https://qiita-image-store.s3.amazonaws.com/0/70507/8d6cb071-3df0-2b7e-5371-feab55d7a4f0.png)
**エラーが消えました！！**
では、いよいよgetbananaを起動させましょう。o(●´ω｀●)oわくわく♪
<a name="AppLaunch"></a>
#####**3.アプリ（getbanana）の起動**
getbananaを起動してます。
![banana-white.png](https://qiita-image-store.s3.amazonaws.com/0/70507/83f15176-e21c-59c4-b6e8-bdf6cf84acc3.png)
**あれれ？？何も表示されません。**

getbananaフォルダのindex.htmlを見るとフォルダの外にあるjsを参照していました。
こんな感じ。。

```html:index.html
  <script type="text/javascript" src="../../../build/enchant.js"></script>
  <script type="text/javascript" src="../../../build/plugins/nineleap.enchant.js"></script>
```
アプリとして動かす場合には、フォルダ内にソースがないとダメそうなので、該当するファイルをフォルダ内にコピー
してindex.htmlも合わせて変更してみました。
こんな感じ。。

```html:index.html
  <script type="text/javascript" src="enchant.js"></script>
  <script type="text/javascript" src="nineleap.enchant.js"></script>
```

もう一度、getbananaを起動してみます。((((o゜▽゜)o))) ドキドキ♪
![banana.png](https://qiita-image-store.s3.amazonaws.com/0/70507/6ea9af31-2f9e-5d42-e8d1-d44ceb9b7b80.png)

**やった！！　動いた！！ Ｏ(≧∇≦)Ｏ イエイ！！**
クリックしてマウスを移動するとクマの位置も移動します。
<a name="Point"></a>
##**まとめ**
結局、今回対応したことは以下の２点だけです。　簡単に動かせました。
**・manifest.webappファイルをアプリを格納するフォルダの直下に置く**
**・アプリが使うファイルはアプリを格納するフォルダに置く**

[次回](http://qiita.com/onaona/items/f75becbe1c5f0f301f3b)は、Fx0で動かしてみます。
その後は色々とFirefox OSでゲームを作成するために、追加でいくつか試していこうと思います。

[（2）enchant.jsで作ったアプリをFx0で動かしてみる](http://qiita.com/onaona/items/f75becbe1c5f0f301f3b)
[（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)