2022年12月1日

Monaca CLIの基本的な使い方について

Monaca

Monacaチームの小田川です。

Monacaでは、MonacaクラウドIDEやMonaca LocalkitのようなGUI環境でアプリ開発を行うことができますが、Monaca CLIを使用することでCUI環境でのアプリ開発も行うことができます。

Monaca CLIは、利用者側がローカルPC上に開発環境を整える必要があるため、少し敷居が高いツールなりますが、今回は、Monaca CLIの基本的な使い方いついて説明していきたいと思います。Monaca CLIについては、以下を参照してください。

Monaca CLI

開発環境を整える

ローカルPCにNode.jsをインストールする

Monaca CLIを利用する場合は、Node.jsが必要になります。Node.jsでは、複数のバージョンが用意されているため、今回は、MonacaクラウドIDEのターミナルで使用されている、以下のバージョンを使用する事とします。

Node.js v16.4.0
npm v8.3.1

Monaca CLIをインストールする前に、ローカルPCにNode.js v16.4.0をインストールします。Node.js v16.4.0は、以下からダウンロードできます。

Node.js v16.4.0

Windowsの場合は、node-v16.14.0-x64.msi または node-v16.14.0-x86.msi からインストールすることができます。使用しているPC環境にあわせて選択してください。macOSの場合は、node-v16.14.0.pkg からインストールすることができます。

ローカルPCにMonaca CLIをインストールする

Monaca CLIは、npmパッケージとして提供されているため、npmコマンドを使用してインストールします。Monaca CLIをインストールする場合、OS側のインストール権限が必要になるため、Windowsの場合は、コマンドプロンプトを管理者として実行し、以下のコマンドを実行します。

npm install -g monaca

macOSの場合は、ターミナルから以下のようにsudoコマンドでインストールします。

sudo npm install -g monaca

Monaca CLIのインストールが完了したら、以下のコマンドを実行し、Monaca CLIのバージョンが表示されるか確認してください。正常にインストールされている場合は、Monaca CLIのバージョンが表示されます。

monaca -v

Monacaへログインする

Monaca CLIを使用するためには、Monacaへログインする必要があります。Monacaへログインする場合は、以下のコマンドを実行します。

monaca login

Monacaアカウント（メールアドレス）とパスワードを入力後、ログインが成功した場合は、以下のように表示されます。

Successfully signed in as xxxxxx.

Monacaプロジェクトを作成する

Monacaへのログインが成功すると、Monacaプロジェクトを作成することができるようになります。Monacaプロジェクトを作成する場合は、以下のコマンドを実行します。

monaca create 保存先のパス
例：monaca create myproject

monaca createコマンドを実行するとMonacaプロジェクトのテンプレートを選択できるようになります。最小限のテンプレートを使用する場合は、

No Framework - Blank

を選択します。

Monacaプロジェクトの作成処理が完了すると、以下のようなメッセージが表示されます。cdコマンドで保存先のパスに移動します。

Type "cd myproject" and run monaca command again.
  > monaca preview      => Run app in the browser
  > monaca debug        => Run app in the device using Monaca Debugger
  > monaca remote build => Start remote build for iOS/Android/Windows
  > monaca upload       => Upload this project to Monaca Cloud IDE

Monacaプロジェクトをプレビューする

MonacaクラウドIDEやMonaca Localkitには、プレビュー画面があります。Monaca CLIでプレビュー画面を使用する場合は、以下のコマンドを実行します。

monaca preview

monaca previewコマンドを実行すると、ローカルPCにインストールされているブラウザーが起動し、プレビュー画面として使用することができるようになります。プレビューを終了する場合は、以下のキーを入力します。

Ctrl + c

Monacaデバッガーで動作確認をする

Monacaデバッガーで動作確認をする場合は、以下のコマンドを実行します。

monaca debug

monaca debugコマンドを実行すると、Monacaデバッガー上にペアリング画面が表示されます。ペアリング画面のペアリングをタップすると、Monaca CLIとペアリングすることができます。

ペアリングが成功すると、Monacaデバッガーのローカルプロジェクト欄に、Monacaプロジェクトが表示されます。表示されたMonacaプロジェクトを開くことで、動作を確認することができます。

ローカルPCにインストールされているエディターでソースコードを編集して保存すると、Monacaデバッガーに反映されます。ペアリングを終了する場合は、以下のキーを入力します。

Ctrl + c

ビルドを実行する

Monacaデバッガーで動作確認ができたら、Monaca CLIからビルドを実行します。Monaca CLIからビルドを実行する場合は、以下のコマンドを使用します。

monaca remote build <platform>

注意点として、Androidリリースビルドを実行する場合は、対象のエイリアスを指定する必要があります。また、iOS用のビルドの場合は、対象のプロビジョニングプロファイルを指定する必要があります。Monaca CLIから初めてAndroidリリースビルドやiOS用のビルドを実行した場合は、対象のエイリアスやプロビジョニングプロファイルが設定されていないため、以下のようなエラーメッセージが出力されます。

Missing dev provisioning file. Please upload it from remote build settings by executing `monaca remote build --browser`.

Monaca CLIから初めてAndroidリリースビルドやiOS用のビルドを実行する場合は、一度、以下のようにエラーメッセージに表示されている--browserオプションを使用して、MonacaクラウドIDE上からビルドを実行する必要があります。

monaca remote build --browser

一度、MonacaクラウドIDE上から行なっているビルドタイプについては、次回以降、以下のような形式でビルドを実行することができます。

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

ビルドが成功した場合は、以下のようなメッセージが表示されます。

Building project on Monaca Cloud...
.........................................................................
? Please enter the directory to save the file or press Enter to accept the defau
lt: /Users/xxx/Desktop

Your package is stored at /Users/xxx/Desktop/xxxxxxxxxxxxxx-myproject.ipa