PhoneGap
monaca

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はインストールされている前提です。


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を読み込む。