MonacaとPhoneGap Buildを試してみる


HTML5でアプリをつくって、レスポンシブにするとスマホでもつかえるんだけど、どうせなら、アプリとしてインストールさせたい。
そんなときに、助けてくれるcordovaというOSSが世の中にはある。
さらに、cordovaをベースにSDKを入れなくてもクラウド上で開発できるものがある。
で、MonacaとPhoneGap Builderというのが2大巨頭らしい（板垣調べ）ので、使い勝手を比較してみた。

なお、紛らわしいですが、PhoneGapとPhoneGap Buildは違うので注意。
OSSのcordovaをAdobeが製品化したのがPhoneGapで、PhoneGap BuildはPhoneGapのビルドツール。
MonacaもPhoneGapを使っている。

# 結果表

個人的感想だし、Androidで簡単なアプリをつくっただけなので、信頼性は低いですがご参考まで。
とりあえず、OSSでいっぱいアプリをつくりたいならPhoneGap。
売り物をつくるならMonacaもありだけど、チームが保持するgitとかと連携できないとGUIのみは辛い。
そこは調べられていないですが、そこが解決すればMonacaもいいかも。

項目|Monaca|PhoneGap Build|備考
---|---|---|---
無料枠|△(3つまで)|○(OSSなら無制限)|PhoneGap BuildはOSSなら無制限でプライベートは1つまで。好みもあると思いますが、これがスタンダードですよね。
とっつきやすさ|○|△|Monacaはクラウド上のGUIで操作できるのでとっつきやすい気がします。
使い勝手|△|○|慣れてくると、MonacaのGUIで操作しなければならないのがうっとおしくなりそうです。PhoneGap BuilderはGithubと連携しているのも好印象。
日本語情報量|○|△|それほど調べていませんが、Monacaの方が日本語情報が多く、PhoneGapは少ない印象です。また、PhoneGapは古いバージョンの情報も混じっていて困る。
デバッグ|○|△|どちらもデバッグツールがあって、ソースを更新する度に自動更新されるのですが、Monacaの方がデバッグ情報をだしてくれたり気が利いている。

# Monaca

このサイトがMonacaベースで説明してくれているので、とってもわかりやすい。

http://phonegap-fan.com/school/

## PhoneGapインストール

http://phonegap.com/install/

※[Node.js](http://nodejs.org/)はインストールされている前提です。

## Monacaアカウント作成

https://ja.monaca.io/

## プロジェクト作成

以下のようにプロジェクトを作成します。
テンプレートは好きなのを選んでOK。

[ダッシュボード画面]
=> 画面右上[プロジェクトの作成]
=> [最小限のテンプレート]

## コーディング

注意点は次のとおり。

* components配下は基本的にはいじらない（Monacaが自動で生成しているので）
* トップ画面は必ずindex.html（WebアプリじゃなくてMobileアプリなので、できればSPAがよい）
* `<script src="components/loader.js"></script>`は必ず入れておく（loader.jsが、必要なPhoneGapに必要なものを読み込む。）

## Plugin

PhoneGapでは、Pluginを使って、Mobile特有のカメラや加速度センサーなどを使います。

https://build.phonegap.com/plugins

MonacaはMonacaのプラグイン管理機能を使うのがよいらしい。

[ファイル] => [Cordovaプラグインの管理]

## JS/CSS

MonacaはMonacaのJS/CSS管理機能を使うのがよいらしい。

[ファイル] => [JS/CSSコンポーネントの追加と削除]

## Debug

Monacaデバッガーというのがあって、とっても簡単。
AndroidアプリのSDKはハマった人も多いと思いますが、これは大丈夫。
ソースを更新するとリアルタイムで更新されるし、デバッグ用のボタンが右下にでて、気がきいている。

http://docs.monaca.mobi/cur/ja/manual/debugger_index/

Androidの場合
https://play.google.com/store/apps/details?id=mobi.monaca.debugger&hl=ja

## 実機へのインストール

Monacaの画面上[ビルド]を選んでいくと、インストール用のQRコードなどが表示される。

# PhoneGap Build

これを参考にしました。

http://html5experts.jp/fenomas/7672/

## アカウント作成

https://build.phonegap.com/

## 実機への正式インストール

```
sudo npm install -g phonegap
phonegap create test com.example.test2 Test
cd test
```

## コーディング

注意点は次のとおり。

* トップ画面は必ずindex.html（WebアプリじゃなくてMobileアプリなので、できればSPAがよい）
* `<script src="cordova.js"></script>`は必ず入れておく（cordova.jsはMonacaが自動生成するのでフォルダになくてもよい）

## Plugin

PhoneGapでは、Pluginを使って、Mobile特有のカメラや加速度センサーなどを使います。

https://build.phonegap.com/plugins

以下のように、コマンドでプラグインを追加します。

```
phonegap plugin add org.apache.cordova.media
```

## JS/CSS

Monacaとは違って、普通にindex.htmlとの相対パスでJSやCSSを入れればよい。

## Debug

PhoneGap Developerというのがあって、とっても簡単。
AndroidアプリのSDKはハマった人も多いと思いますが、これは大丈夫。
（Monaca程は気がきいてないですが。。。）
なお、開発しているPCとデバッガーをインストールした実機は同じネットワークセグメントに接続しておかないとだめ。

1.デバッガーインストール

Androidの場合
https://play.google.com/store/apps/details?id=com.adobe.phonegap.app

2.サーバーを起動

```
phonegap serve
```

起動すると、次のようなメッセージがでるのでメモする。

```
listening on XXX.XXX.XXX.XXX:3000
```

3.アプリを起動

Server Addressを聞かれるので、メモしたものを入力する。

## build

SDKを入れれば、ローカルビルドもできますが、remoteビルドの方法。

```
phonegap remote build android
```

ちなみに、githubにpushして、PhoneGap Builderの画面から[コードを更新]してもいい。

http://qiita.com/tsunet111/items/2ab7a1bfdf58a08af38f

## 実機への正式インストール

PhoneGap Buildの画面からプラットフォームを選んでファイルをダウンロードするか、QRコードからダウンロードURLを読み込む。