前回は、Monaca CLIを使用するための基礎知識について説明しました。今回は、Monaca CLIを使った基本的な開発手順について説明していきたいと思います。

Monaca CLIでの基本的なアプリ開発の流れは、以下の通り、Monaca Localkitと同様の流れになります。

開発を行うMonacaプロジェクトを作成する。
アプリ設定を行う。
Cordovaプラグインの設定を行う。（Cordovaプラグインが必要な場合）
エディターでコーディングを行う。
Monacaデバッガーを使用して動作確認を行う。
デバッグビルドしたアプリで動作確認を行う。

開発を行うMonacaプロジェクトを作成する

Monaca CLIで開発を行うMonacaプロジェクトを作成するためのコマンドは、以下になります。

monaca create
monaca clone
monaca import

monaca create

monaca createコマンドは、Monacaで提供しているテンプレートプロジェクトからMonacaプロジェクトを作成します。monaca createコマンドを実行する場合は、保存先のパスを指定する必要があります。monaca createでは、以下のオプションが用意されています。

--url: MonacaプロジェクトのZipファイルのURLを指定
--template-list: 利用可能なテンプレートプロジェクト一覧を表示します。
--template: テンプレートプロジェクトの名前を指定します。

monaca create path [option]

monaca create Sample01
monaca create --template-list
monaca create Sample01 --template blank
monaca create Sample01 --url https://github.com/me/myproject/archive/master.zip

プロジェクトの作成が成功した場合は、以下のように表示されます。

monaca clone

monaca cloneコマンドは、Monacaクラウドに保存されているMonacaプロジェクトのクローンを作成するコマンドになります。monaca cloneコマンドを実行すると、Monacaクラウドに保存されているプロジェクト一覧が表示されます。対照のプロジェクトを選択することで、Monacaプロジェクトのクローンを作成する事ができます。

monaca cloneコマンドで作成されたMonacaプロジェクトは、monaca cloneコマンドで選択したMonacaクラウド上のMonacaプロジェクトに紐付いています。そのため、monaca uploadコマンドを実行した場合は、紐付いているMonacaクラウド上のMonacaプロジェクトのファイルが上書きされます。

monaca import

monaca importコマンドは、Monacaクラウドに保存されているMonacaプロジェクトを使用して、新規にMonacaプロジェクトを作成するコマンドになります。monaca importコマンドを実行すると、Monacaクラウドに保存されているプロジェクト一覧が表示されます。対照のプロジェクトを選択することで、選択したプロジェクトを使用してMonacaプロジェクトを作成する事ができます。

monaca cloneコマンドとの違いは、monaca importで作成されたMonacaプロジェクトは、monaca importコマンドで選択したMonacaクラウド上のMonacaプロジェクトとは、紐付いていません。そのため、初めてmonaca uploadコマンドを実行した場合は、Monacaクラウド上の新しいMonacaプロジェクトとして作成されます。

アプリ設定を行う

開発を行うMonacaプロジェクトを作成したら、アプリ設定を行います。アプリ設定は、Monaca Localkitと同様にMonacaクラウド上で行う必要があります。Monaca CLIでアプリ設定を行う場合は、以下のコマンドを実行します。

monaca remote build --browser

上記のコマンドを実行すると、Monacaクラウド上にMonacaプロジェクトがアップロードされた後、ブラウザーが起動してリモート設定画面が表示されます。

左のメニューにあるアプリ設定項目から、必要な設定を行います。このアプリ設定は、後から設定しても問題ありません。設定が完了したら保存ボタンをクリックします。

注意点として、Monaca CLIでは、Monaca Localkitのようにリモート設定画面を閉じてもローカル上のMonacaプロジェクトと変更内容が同期されません。Monacaクラウドとローカルでファイル同期を行う場合は、以下のコマンドを実行します。

monaca download

monaca downloadコマンドでは、以下のオプションが用意されています。

--delete: Monacaクラウド上に存在しないローカルファイルを削除します。
--force: 処理の実行時にユーザー側に確認しません。
--dry-run: ダウンロード処理をシュミレートします。実際のダウンロードは、行われません。ダウンロード対象のファイルを表示します。

Cordovaプラグインの設定を行う

Monaca CLIでCordovaプラグインの設定を行う場合は、以下のコマンドを実行します。

monaca plugin

monaca pluginコマンドでは、以下のオプションが用意されています。

add : プラグインを追加します。
rm : プラグインを削除します。

monaca plugin add cordova-plugin-camera
monaca plugin rm cordova-plugin-camera

Cordovaプラグインの設定は、リモート設定画面のCordovaプラグインからも行う事ができます。リモート設定画面からCordovaプラグインを設定した場合、Monacaクラウドとローカルでファイル同期を行う場合は、monaca downloadコマンドを実行する必要があります。

エディターでコーディングを行う

エディターを使用して実際の処理をコーディングしていきます。使用するエディターは、使い慣れたものを使用すると開発効率が高くなります。まだ好みのエディターが見つかっていない場合は、気になるエディターを試してみてください。

Monacaデバッガーを使用して動作確認を行う

Monacaデバッガーを使用して動作確認を行う場合は、Monaca CLIとMonacaデバッガーをペアリングさせる必要があります。Monaca CLIとMonacaデバッガーをペアリングさせる場合は、以下のコマンドを実行します。

monaca debug

MonacaデバッガーをMonaca CLIでログインしているMonacaアカウントでログインしている状態でmonaca pluginコマンドを実行すると、ペアリングするためのダイアログボックスが表示されます。

ペアリングが成功すると、以下のようなメッセージが表示されます。

Monacaデバッガーのローカルプロジェクトに表示されているプロジェクトをタップすれば、Monacaデバッガーでプロジェクトを実行する事ができます。

実行されたプロジェクトの動作確認を行い、動作に問題ないかチェックします。Monaca CLIでもローカル上のソースコーを更新し、ファイルを保存した際には、ライブリロード機能が動作するため、リアルタイムに動作を確認する事ができます。動作に問題がある場合は、以下の記事を参考にデバッグを行います。

Monacaデバッガーを使ってみよう（MonacaクラウドIDE編）

デバッグビルドしたアプリで動作確認を行う

Monaca Localkitの時と同様に、Monacaデバッガーでの動作確認ができたら、デバッグビルドしたアプリで最終確認を行います。Monacaデバッガーは、デバッグツールのため、アプリの実行環境が、デバッグビルドしたアプリと全く同じではありません。そのため、最終的な動作確認は、デバッグビルドしたアプリで行う必要があります。

Monaca CLIでビルドを実行する場合は、以下のコマンドを実行します。

monaca remote build [options]

以下は、実行例になります。

monaca remote build android --build-type=debug
monaca remote build android --build-type=release
monaca remote build ios --build-type=debug
monaca remote build ios --build-type=release

注意点として、Androidリリースビルドや、iOSビルドを実行する場合は、対応したキーストア内のエイリアスやプロビジョニングプロファイルを選択する必要があります。

初めてMonaca CLIからAndroidリリースビルドや、iOSビルドを実行する場合は、対象のエイリアスやプロビジョニングプロファイルが選択されていないため、一度、以下のコマンドを実行して、Monacaクラウド上からビルドを実行して、対象のエイリアスやプロビジョニングプロファイルを選択する必要があります。