こんにちは、間藤です。
今回から何回かに分けて、アシアル株式会社が提供するハイブリットアプリ開発環境「Monaca」について、レポートしていきたいと思います。
まず最初に断っておきますと、9月中旬にMonacaの正式版リリースが予定されています。そして、以下の内容は、ベータ版で確認した内容になります。今後正式版についても、弊社ブログで取り上げることがあるかもしれません。
今回の記事では、Monacaマニュアルのサンプルで紹介されているTODO管理アプリを題材にしていきます。このアプリをiOS、Android、Windows8の実機で動作確認するまでの過程で、私が気づいたことなどを以下に書いていきたいと思います。
※Windows8については、動作確認にまで至りませんでした。
PhoneGapについて
Monacaは、PhoneGapをベースにしたハイブリットアプリ環境を提供してくれます。JavaScriptからデバイス固有の機能（カメラ等）にアクセスする際、PhoneGapが提供するAPIを利用できます。PhoneGapのAPIがネイティブコード（Objective-CやJavaなど）とのブリッジの役割を果たしてくれるので、ネイティブコードを記述せずに各プラットフォームのアプリを開発できるのが特徴です。Windows8については、そもそもMicrosoftがWinJSを用意しているため、PhoneGapの位置づけは他プラットフォームとは異なります。このあたりのことも今後触れていく予定です。
PhoneGapは、9/10現在、最新版が3.0です。Monacaのベータ版では、バージョン2.2を利用しているとのことですが、正式版では2.9に置き換わるそうです。
もし、PhoneGapが提供するAPIでは機能が不足するという場合には、PhoneGapプラグインを作成します。但し、プラグラインは、プラットフォームごとにネイティブコードで用意しなければなりません。なお、ベータ版のMonacaでは、Monacaのユーザが用意したPhoneGapプラグインを利用することができませんが（Monacaがあらかじめ提供してくれるプラグインはベータ版でも利用可能）、正式版ではそれも可能になるとのことです。自由にPhoneGapプラグインを追加できれば、実現できることが大幅に増えるので、これは大きな機能強化になると思います。
Monaca IDE
Monacaのドキュメントを確認していただければ丁寧な説明があるので、Monaca IDEについてここで説明する必要もないのですが、話の流れとして触れておきます。
Monacaでは、プログラム開発をブラウザ上（ChromeかSafari）で行います。開発したプログラムは、クラウド上に管理されますので、例えば開発マシンを変更しても、すぐに新しいマシンで開発を再開できます。ブラウザからMonacaにログインすると、ダッシュボード画面が表示され、ここにこれまでに作成したプロジェクトが一覧されます。
新しいプロジェクトも、ここから作成します。
対象プロジェクトのIDEを起動すると、そのプロジェクト用のIDE画面が起動します。
なお、Monacaは無料で利用することができますが、正式版リリース以降は、無料で利用する場合、アクティブなプロジェクト数が３つまでに制限されます。詳しくは、こちらのページをご確認ください。
Monacaデバッカでサンプルアプリを実行
それでは、TODO管理アプリのプロジェクトを作成し、動作確認を行ってみます。プロジェクト作成の手順に関しては、Monacaクイックスタートの説明に詳しく記載されているので、そちらを参照してください。
なお、このサンプルは、jQueryとjQuery Mobileを利用します。Monacaでは、この２つのライブラリについて、「プラグイン設定」から取り込めるようになっています。プラグイン設定で選択したライブラリは、plugin-loader.jsやplugin-loader.cssに自動的に反映されます。これらファイルは、各プラットフォームごとのフォルダ配下に配置されており、IDEから編集できないようになっています。Monacaがデフォルトで用意しているPhoneGapプラグインも、プラグイン設定から選択します。
また、任意のファイルをIDEにアップロードすることも可能です。以下は、jQueryとjQuery Mobileをアップロードして取り込んだ例です。この場合は、plugin-loader.jsやplugin-loader.cssには反映されないので、別途scriptタグやlinkタグで読み込むようにする必要があります。
Monacaでは、作成したアプリの動作確認は、「Monacaデバッカ」というアプリを用いて行うことになります。もちろん、Monacaでアプリをビルドしてから実機にインストールして動作確認を行うこともできますが、ビルド結果をダウンロードして実機にインストールする必要があるため、頻繁にプログラム修正する段階での動作確認には向きません。また、正式版では、Basic（無料版）での利用の場合、1日のビルド回数が3回に制限されます。
iOSの場合、Apple StoreからMonacaデバッカを実機にインストールします。Androidの場合、Google Playからインストールできます。Windows8の場合は、IDEのメニューからインストーラーをダウンロードできます。
※Windows8版のMonacaデバッカは、9/10現在のバージョンでは正常に動作しなかったため、動作確認できていません。この問題には「対応中」とアナウンスされています。
※(10/9追記)この問題は解消されたようです。
実機にインストールしたMonacaデバッカを起動すると、ログイン画面が表示されます。以下の画像は、iPadでMonacaデバッカを起動した際のキャプチャです。
そして、Monacaデバッカ上でログインすると、プロジェクトの一覧が表示され、一覧からプロジェクトを選択すると、選択したアプリがMonacaデバッカ上で起動します。
また、ブラウザのIDEのほうからも認識されるようになります。（実機をUSB接続する必要もありません。）
この状態になれば、IDE上でのプログラム修正も、すぐさまMonacaデバッカ上に反映できるようになります。これはかなり素晴らしい機能です。試しに、2つ目の画面に戻るボタンを追加してみます。以下は、変更前の画面イメージです。
IDE上で以下のようにindex.htmlを修正・保存します。
<div data-role="page" id="add-page"> ↓ <div data-role="page" id="add-page" data-add-back-btn="true">
そうすると、Monacaデバッカ上で同期処理が自動的に開始されます。※但し、IDE上で[実行]-[保存時に自動更新]にチェックをつけておく必要があります。
同期が終わると、Monacaデバッカ上でTODO管理アプリが再実行されるので、2つ目の画面に遷移します。
変更が反映されて、戻るボタンが追加されました。
また、上の実行例は、iPad上でのものですが、ここまでの手順は、iOS Developer Programへ登録することなしに確認できるものです。もちろん、Macも必要ありません。iPhoneアプリをお試しで作成してみようと思えば、通常ならMacを用意し、実機で動作確認するならiOS Developer Programへ登録（有料）しなければならないので、この手軽さは本当に有難いですね。
なお、私の認識違いでなければ、Monaca IDE上でブレークポイントを設定し、デバックを行うことはできないようです。
Xcode上でPhoneGapアプリを開発する場合でも、JavaScriptのコードにブレイクポイントを設定することはできませんので、その点に変わりはないのですが、最近のSafariではアプリ内部のWebViewをデバックする機能があり、これを使えばブレークポイントを設定したJavaScriptのデバックが可能になっています。
（参考）
http://www.auraline.co.jp/tech-lab/?p=159
但し、この機能を利用する場合、iOSシミュレータを使用するか、Xcodeからアプリをデバック起動しなければならないようですので、残念ながらMonacaで開発する場合は利用できません。
アプリのビルド
次に、Monaca上で各プラットフォーム向けにアプリをビルドして、単独のアプリとして実機にインストールしてみます。ビルド手順についても、マニュアルで丁寧に解説されていますので、そちらを参照していただければと思います。
ビルドは、IDEのメニューから実行します。
Androidアプリのビルドでは、デバックビルドとリリースビルドが選択できます。
リリースビルドを行う場合は、事前にAndroidキーストア設定が必要です。ビルド結果は、apkファイルとしてダウンロードできますので、これを実機にインストールします。
iOSアプリのビルドでは、デバッグビルド、テストビルド、リリースビルドが選択できます。
ビルドを行うには、iOS Developer Programへの登録が必要です。ビルド結果は、ipaファイルとしてダウンロードできますので、これを実機にインストールします。iOSアプリのビルドにおいて指定するプロビジョニングプロファイルのApp IDは、Wildcard App IDである必要があるようです。しかも、「com.iti.*」のような指定もNGで、「*」としておく必要があるようです。
Windows8アプリのビルドでは、デバッグビルドのみがサポートされています。Windowsストア用には、Visual Studioでビルドする必要があるようです。
ビルド結果は、zipファイルで提供され、このzipシェルに含まれているPowerShellのスクリプトを実行して、インストールします。
手順に従って実機にインストールしてみたところ、AndroidおよびiOSについては実機で動作を確認することができました。しかしながら、Windows8では、アプリのインストールまでは行えたものの、アプリを実行すると異常終了してしまいました。つまり、Windows8では、Monacaデバッカでも、実機インストールでも、動作を確認できていません。
※問い合わせしたところ「Windows 8ビルドシステムは現在改修中」との回答を頂きました。
※(10/9追記)この問題は解消され、私も実機インストールして動作することを確認できました。
このことついては、次回の記事でもう少し掘り下げてみようと考えています。
