これまでは、MonacaクラウドIDEを中心としたMonacaの利用方法について説明してきました。MonacaクラウドIDEは、インターネット上に公開されているサービスになるため、インターネット環境を利用できるPCがあれば、場所やPCに依存しないアプリ開発を行うことができます。反面、

  • 普段使用しているエディターが利用できない。
  • 会社で使用しているバージョン管理システムが利用できない。

等の問題が発生する場合がります。

Monacaでは、ローカル環境でMonacaプロジェクトを開発できるMonaca LocalkitやMonaca CLIを提供しています。Monaca LocalkitとMonaca CLIは、有料プランで提供しているサービスになりますが、Monaca LocalkitやMonaca CLIを使用することで、普段使用しているエディターの利用や会社で使用しているバージョン管理システムの利用に対応できるようになります。

今回は、Monaca Localkitを使用するための基礎知識について説明していきたいと思います。Monaca Localkitは、Windows版とmacOS版を提供しています。Monaca Localkitの最新版は、以下からダウンロードすることができます。

今回の説明では、macOS版のMonaca Loclkitを使用して説明していきます。

Monaca Localkitを起動する

Monaca Localkitを起動するとログイン画面が表示されます。

Monaca Localkitを利用するためには、Monacaに登録されているMonacaアカウント（メールアドレス）とパスワードを使用してMonacaへのログイン認証を行う必要があります。そのため、Monaca Localkitを利用する場合は、インターネット環境と事前にMonacaアカウントの登録が必要になります。

メイン画面

Monaca Localkitにログインすると、メイン画面が表示され、プロジェクト一覧とMonaca Localkitガイドが表示されます。

メイン画面から開発を行う新しいMonacプロジェクトを新規作成したり、既存のMonacaプロジェクトをインポートすることで開発を行うことができるようになります。

Monaca Localkitにプロジェクトを登録する

Monaca Localkitにプロジェクトを登録する場合は、ファイルメニューの

  • 新しいプロジェクト
  • プロジェクトのインポート

から登録することができます。

新しいプロジェクトからは、MonacaクラウドIDEで提供しているテンプレートプロジェクトを作成することができます。最小限のテンプレートを作成する場合は、以下の項目の入力および選択して作成ボタンをクリックします。

  • プロジェクト名：プロジェクト名を入力します。
  • 作業ディレクトリ：プロジェクトの保存先を指定します。
  • カテゴリを選択：No Framework
  • テンプレートを選択：Blank

プロジェクト一覧に登録されたプロジェクトを選択すると、プロジェクト操作画面が表示されます。

プロジェクト操作画面

プロジェクト操作画面では、以下の操作を行うことができます。

  • 開く
  • 実行
  • ライブリロード
  • プレビュー
  • アップロード
  • ダウンロード
  • リモートビルド
  • 設定

開く

開くでは、登録されたプロジェクトを開く対象を選択することができます。

プログラムを追加からエディターをエディターを登録することで、利用したいエディターでプロジェクトを開くことができます。コマンドライン引数に%dを設定することで、対象プロジェクトへのファイルパスを指定することができます。スクリーンショットでは、Visual Studio Codeを設定しています。

実行

実行は、Monaca LocalkitとペアリングしたMonacaデバッガーでプロジェクトを実行します。

ライブリロード

ライブリロードをONにすると、Monaca LocalkitとペアリングしたMonacaデバッガー間でライブリロードを行います。ライブリロードがONの場合は、プロジェクトのソースコードをエディターで保存した際に、自動でMonacaデバッガーに更新内容が反映されます。

プレビュー

プレビューでは、Chromium Developer Toolsetのプレビュー画面で動作を確認することができます。

注意点として、プレビューは、Webブラウザ上で動作します。そのため、MonacaクラウドIDEのプレビュー画面と同様に、Cordovaの機能や一部JavaScriptの機能を使用することができません。これらの機能を使用した画面遷移や画面レイアウトを行なっている場合は、Monacaデバッガーやビルドしたアプリで確認する必要があります。

アップロード

Monacaで提供しているリモートビルドは、インターネット上で提供しているサービスになります。そのため、Monacaでビルドを行う場合は、Monacaクラウド上にMonacaプロジェクトをアップロードする必要があります。

アップロードは、ローカルPC上にあるMonacaプロジェクトをMonacaクラウドへアップロードします。MonacaクラウドへアップロードされたMonacaプロジェクトは、ローカルPC上にあるMonacaプロジェクトと紐付かれ、MonacaクラウドIDEのMonaca Dashboardから確認することができます。

ダウンロード

ダウンロードは、紐付かれたMonacaクラウド上のMonacaプロジェクトをローカルPC上にダウンロードします。

リモートビルド

ビルドを行う場合は、リモートビルドから行います。リモートビルドを実行すると、ローカルPC上のMonacaプロジェクトは、Monacaクラウド上へアップロードされ、ビルド画面が表示されます。

設定

Monacaプロジェクトの設定を変更する場合は、Monacaクラウド上で行う必要があります。設定を実行すると、ローカルPC上のMonacaプロジェクトは、Monacaクラウド上へアップロードされ、設定画面が表示されます。

Monaca Localkitの設定

Monaca Localkitの設定画面では、以下の設定を行うことができます。

  • 作業ディレクトリ：ローカルPCに保存されるMonacaプロジェクトの保存先を指定します。
  • 待ち受けポート番号：Monaca LocalkitとMonacaデバッガーをペアリングする時に使用するポート番号を指定します。
  • プレビュー用ポート番号：プレビューで使用するポート番号を指定します。
  • プロキシーサーバー：プロキシーサーバーを指定します。（プロキシーサーバの設定が必要な場合）
  • ログ出力：ログの出力先となるファイルを指定します。（Monaca Localkitの処理内容を確認したい場合。）
  • 言語：Monaca Localkitの表示言語を指定します。
  • ファイル同期：リモートビルドと設定画面を閉じた後のファイル同期を指定します。
  • アップロードオプション：アップロードする前にプロジェクトをトランスパイルするか指定します。（トランスパイル用プロジェクトが対象）
  • ビーコン ブロードキャスト：Monaca LocalkitとMonaca デバッガーを同期する際に使用するビーコン ブロードキャストの設定を指定します。
  • 環境パス：Monaca LocalkitがNode.jsを認識しない場合、Node.jsのパスを指定します。

APIエンドポイントの設定

アプリ開発環境によっては、アプリが利用しているAPIのエンドポイントを設定する必要があります。そのような場合、対象のAPIエンドポイントURLを設定します。注意点として、APIエンドポインを変更した場合、アプリケーションが正常に動作しなくなる場合があります。

アップロードとダウンロードの制御

ローカルPCからMonacaクラウドへのアップロードやMonacaクラウドからローカルPCへのダウンロードの際に、特定のファイルやフォルダーを含めたくない場合があります。そのような場合のために、Monacaプロジェクトには、.monacaignoreファイルが含まれています。

.monacaignoreは、.gitignoreと同じパターンを使用しており、デフォルトでは、以下の設定が行われています。.monacaignoreを編集することで、特定のファイルやフォルダーを設定する事ができます。

/.monaca/*
!/.monaca/project_info.json
/platforms
.DS_Store
*.swp
.vscode/
typings/
node_modules
.git

おわりに

今回は、Monaca Localkitを利用する際の基礎知識について説明しました。Monaca Localkitを利用する事で、MonacaクラウドIDEではカバー出来ない部分に対応できる場合があります。次回は、Monaca Localkitの活用について説明したいと思います。