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ベースで説明してくれているので、とってもわかりやすい。
PhoneGapインストール
※Node.jsはインストールされている前提です。
Monacaアカウント作成
プロジェクト作成
以下のようにプロジェクトを作成します。
テンプレートは好きなのを選んでOK。
[ダッシュボード画面]
=> 画面右上[プロジェクトの作成]
=> [最小限のテンプレート]
コーディング
注意点は次のとおり。
- components配下は基本的にはいじらない（Monacaが自動で生成しているので）
- トップ画面は必ずindex.html（WebアプリじゃなくてMobileアプリなので、できればSPAがよい）
-
<script src="components/loader.js"></script>は必ず入れておく（loader.jsが、必要なPhoneGapに必要なものを読み込む。）
Plugin
PhoneGapでは、Pluginを使って、Mobile特有のカメラや加速度センサーなどを使います。
MonacaはMonacaのプラグイン管理機能を使うのがよいらしい。
[ファイル] => [Cordovaプラグインの管理]
JS/CSS
MonacaはMonacaのJS/CSS管理機能を使うのがよいらしい。
[ファイル] => [JS/CSSコンポーネントの追加と削除]
Debug
Monacaデバッガーというのがあって、とっても簡単。
AndroidアプリのSDKはハマった人も多いと思いますが、これは大丈夫。
ソースを更新するとリアルタイムで更新されるし、デバッグ用のボタンが右下にでて、気がきいている。
Androidの場合
https://play.google.com/store/apps/details?id=mobi.monaca.debugger&hl=ja
実機へのインストール
Monacaの画面上[ビルド]を選んでいくと、インストール用のQRコードなどが表示される。
PhoneGap Build
これを参考にしました。
アカウント作成
実機への正式インストール
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特有のカメラや加速度センサーなどを使います。
以下のように、コマンドでプラグインを追加します。
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の画面から[コードを更新]してもいい。
実機への正式インストール
PhoneGap Buildの画面からプラットフォームを選んでファイルをダウンロードするか、QRコードからダウンロードURLを読み込む。