# 概要 Monaca Localkit は、Monaca アプリ向けのローカル環境用の開発ツールです。ソースコード管理システム ( バージョン管理システム )・タスク実行ツール ( Task Runner )・エディターなど、多岐にわたる開発ツールと併用できます。Monaca Localkit を使用すれば、オフラインでの開発も行え、また、Monaca デバッガーとのスピーディーな同期も行えます。 Monaca Localkit では、次のような、開発効率の向上に役立つ、複数のサポート機能を提供しています。 * Cordova プロジェクトの作成とインポート : Monaca が提供するテンプレートを使用して、プロジェクトを新規作成できます。または、既存の Monaca プロジェクト ( Monaca クラウド IDE 上 ) と 既存の Cordova プロジェクトをインポートできます。 * プロジェクトのライブリロード : Monaca デバッガーとペアリングすれば、端末上で、プロジェクトを即実行できます。また、ソースコードに対して行った変更も、保存後、端末側に即反映されます。 * Chrome DevTools との連携 : 端末 ( Monaca デバッガー側 ) とホスト PC ( Monaca Localkit 側 ) を USB 接続し、Chrome DevTools を使用して、アプリをデバッグできます。また、DevTools では、ブレークポイントを設定して、JavaScript のデバッグ、アプリの検証などを行えます。 * リモートビルド : Monaca Localkit を使用すれば、Monaca サーバーのサポートを介して、複数のプラットフォーム向けのアプリをビルドできます。 {% hint style="info" %} 30 日間のトライアル期間 ( 初回ログイン時から起算 ) を設けておりますが、Monaca Localkit を長期でご利用になる場合には、対応するプランへの加入が必要です。詳細は、[ 各プランの解説 ](https://monaca.mobi/ja/pricing?type=2)をご確認ください。 {% endhint %} {% hint style="danger" %} Monaca Localkit では、[ Monaca バックエンド ](https://ja.docs.monaca.io/products_guide/monaca_localkit/broken-reference)と [プッシュ通知機能 ](https://ja.docs.monaca.io/products_guide/monaca_localkit/broken-reference)は利用できません。 {% endhint %} ## インストールと設定 事前準備として、Monaca Localkit ( PC 上 ) と [Monaca デバッガー](https://ja.docs.monaca.io/products_guide/debugger) ( 端末上 ) をインストールします。 1. Monaca Localkit の [最新版はこちら](https://ja.monaca.io/localkit.html) からダウンロードできます。変更履歴に関しては、 [GitHub のリリースページ](https://github.com/monaca/Localkit/releases) をご確認ください。 2. [インストール方法](https://ja.docs.monaca.io/products_guide/debugger/installation) の記載内容に従い、Monaca デバッガーをインストールします。 {% hint style="danger" %} Windows 環境で Localkit を利用する場合は、事前に Git をインストールする必要があります。 {% endhint %} ## 使用例 ### Monaca Localkit の起動 1. Monaca Localkit を開き、Monaca アカウントを使用してサインインします。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVl_b81XsNruQzNUyC%2Fimage.png?alt=media\&token=22b767ed-b7c9-4fc1-ae04-967defa0ed6f) 2\. ログイン後、Monaca Localkit のダッシュボードが表示されます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVlcan9nIpcVP7uw-t%2Fimage.png?alt=media\&token=b3f4e96e-abd9-415c-83e9-8f03ff6b7732) ### プロジェクトの新規作成 プロジェクトを新規作成します。ここでは、Monaca が提供するテンプレートを使用します。 1. Monaca Localkit のダッシュボードの `+` アイコンをクリックして、`作成` を選択します。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVljOTQ0g_hmOUBPkc%2Fimage.png?alt=media\&token=c0b2615e-288b-4e0e-961b-2e47f9115a9d) 2\. 必要な情報を入力します。 * プロジェクト名 : プロジェクト一覧に表示される、プロジェクトの名前 * 作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー * カテゴリを選択 : プロジェクトに使用するテンプレートの種類を選択します。 * テンプレートを選択 : プロジェクトで使用するテンプレート。 `プレビュー` ボタンをクリックすると、選択されているテンプレートを確認できます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVlqP_-29az04I0kXC%2Fimage.png?alt=media\&token=32171967-37c2-4850-8733-c9eb8ac7368b) 3\. プロジェクトの作成後、プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。 ### プロジェクトのインポート 次のいずれかの方法で、プロジェクトをインポートできます。 1. `クラウド IDE からインポート` : Monaca クラウド IDE 上に、既存のプロジェクトがある場合に選択できます。 2. `Cordova プロジェクトをインポート` : PC 上に保存している Cordova プロジェクトをインポートする場合に選択できます。Cordova プロジェクトのインポートには、次のような制限があります。 * アプリのアイコンとスプラッシュ画像が、インポートされない場合があります。この場合、「 設定 」 画面上で、再び設定します。 * hooks ディレクトリー内のスクリプトは無視されます。 * Cordova を含め、各プラットフォーム固有のソースコードは、インポートの対象外となります。Monaca では、Monaca 側にあらかじめ実装されている、Cordova プラグインと他の関連ライブラリーが使用されます。 3. `Zip ファイルからインポート` : Zip ファイルをインポートします ( 有効な形式のプロジェクトを圧縮した Zip ファイルであること )。 Monaca Localkit へプロジェクトをインポートします。次の手順に従います。 1. Monaca Localkit ダッシュボードの左パネルの上部に表示された `+`ボタンをクリックします。表示されたメニューから `インポート`を選択します。次に、表示されたサブメニューから、お好みのインポートオプションを選択します。 2. `クラウド IDE からインポート` を選択した場合には、次の情報を入力して、\[ インポート ] ボタンをクリックします。 * `プロジェクトを選択` : Monaca クラウド IDE 上に保存されているプロジェクトから、1 つ選択します。 * `作業ディレクトリ` : プロジェクトファイルの保存先となるディレクトリー ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVmFCWkx99tOvihFMQ%2Fimage.png?alt=media\&token=7948168d-13d9-4b2f-b20d-159cb970b77d) 3\. `Cordova プロジェクトをインポート` を選択した場合には、次の情報を入力して、\[ インポート ] ボタンをクリックします。 * `作業ディレクトリ` : プロジェクトファイルの保存先となるディレクトリー * `プロジェクト名` : プロジェクト一覧に表示される、プロジェクトの名前 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVmTi66nOr9_FDpyVx%2Fimage.png?alt=media\&token=b2a61a4f-6572-4d0e-9bc9-1fd2d14246fd) 4\. `Zip ファイルからインポート` を選択した場合には、次の情報を入力して、\[ インポート ] ボタンをクリックします。 * `Zip ファイル` : 対象の zip ファイルを選択します。 * `プロジェクト名` : プロジェクト一覧に表示される、プロジェクトの名前 * `作業ディレクトリ` : プロジェクトファイルの保存先となるディレクトリー ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVmX6G1OMhCSlHaV9p%2Fimage.png?alt=media\&token=5a42e04d-bc65-469b-8bc4-352f1834e97b) 5\. プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。 ### ローカルプロジェクトの編集用エディターの追加 次に、Monaca Localkit の \[ 開く... ] メニューを解説します。Monaca Localkit では、ローカルプロジェクトのファイルを以下のような方法で開くために `開く...` 機能を提供しています。 * Finder / ファイルエクスプローラ : Finder ( Mac の場合 ) 、File Browser ( Linux の場合 ) または、ファイルエクスプローラ ( Windows の場合 )を使用して、対象プロジェクトのフォルダーを開きます。 * ターミナル / コマンドプロンプト : ターミナル ( Mac / Linux の場合 ) またはコマンドプロンプト ( Windows の場合 ) を使用して、対象プロジェクトのフォルダーを開きます。 * プログラムを追加 : お好みのエディターを追加して、ローカルのプロジェクトファイルを Monaca Localkit から開くことができます。 Monaca Localkit へエディターを追加する場合、次の手順に従います。 1. Monaca Localkit 上で、プロジェクトを選択します。 2. `開く...` ボタンをクリックして、`プログラムを追加...` を選択します。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVmsvXIBiv0VWbDt7o%2Fimage.png?alt=media\&token=1eeeb50f-e181-4cb4-b792-512b04ba5d2c) 3\. \[ エディターの追加 ] ダイアログが表示されます。エディタープログラムに関する、次の情報を入力します。 * アプリケーションのパス : エディターの実行ファイルを指定します ( Mac の場合 `.app` ファイル、Windows の場合 `.exe` ファイル )。 * アプリケーション名 : エディターの表示名を指定します。この表示名は、\[ 開く... ] メニューを選択したときに、一覧上に表示されます。 * コマンドライン引数 : 追加するエディターに適用する引数を設定できます。現時点では、`%d` ( プロジェクトファイルへのパス ) を使用できます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVn4kT_h0oweFgUq92%2Fimage.png?alt=media\&token=0c0aa409-6c15-4668-ba79-ba10102bb7df) 4\. `OK`をクリックします。\[ 開く... ] メニューを選択したときに、追加したエディターが一覧上に表示されていることを確認します。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVnA-yIAEEeh6ICFBt%2Fimage.png?alt=media\&token=9c7911aa-1246-41aa-b2e5-9ab4bb97386e) ### トランスパイル処理の管理 最新の JS フレームワークの中には、JSX などとのやり取りを行うために独自の言語を作成したものや、ネイティブ JavaScript で利用できない拡張機能 ( TypeScriptなど ) を統合したものがあります。トランスパイル処理では、これらの言語で書かれたコードを最新のブラウザ / WebView で実行可能なネイティブ JavaScript コードに変換します。トラインスパイル処理は、WebPack を利用して実行しています。 Monaca Localkit 上での変換処理は、プロジェクトの内容が変更されるたびに実行され、今まではユーザー側で制御することができませんでした。 ハードウェアのスペックによっては問題が生じるため、自動変換を行うかどうかをユーザー側で設定できるようにしました。自動で変換を行わない場合には、\[ トランスパイラー ] タブ上の `自動トランスパイルを有効にする` オプションを切り替えます。設定はプロジェクト毎に変更でき、変更後はその設定が適用され続けます。また、変換の状態は、`トランスパイラー` タブ上で確認できます。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVnN4MegY5TFrU3olr%2Fimage.png?alt=media\&token=d2717aec-b1f8-4266-88b4-d9d8b453e1f7) #### *Transpiler Console* 変換処理の進捗・内容をリアルタイムで監視することができます。以前は、別ウィンドウ上のログに出力していましたが、ユーザー側で各種設定を行う必要がありました。そこで、Monaca LocalKit にコンソールを移植し、Monaca LocalKit 上でもログを確認できるようにしました。 表示される情報は次のとおりです。 * コード変換の状態 * 割り振られた PID ( プロセス ID ) とその ID に紐づけされている処理 ( 当該 ID 下で行われた一連の処理内容 ) * 処理終了の通知 ( Kill ) * 処理時に使用する設定の通知など また、コンソールの大きさは、必要に応じて適宜調整または非表示にすることもできます。 ### 設定ダイアログ 1. Monaca Localkit メニュー上で、 `設定` ( Mac の場合 ) または `ファイル → 設定` ( Windows / Linux の場合 ) を選択します。 ![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgVkf1ptbvmJbOKMhYU%2F-MgVn_7NEFTMRnPCEkA6%2Fimage.png?alt=media\&token=ca2cb185-e2e6-4cab-9533-c235bf665c67) 2\. \[ 設定 ] ダイアログでは、次の項目を設定できます。 * 作業ディレクトリ : プロジェクトの保存先を指定します ( ローカル )。 * 待ち受けポート番号 : Monaca Localkit と Monaca デバッガーをペアリングするときに使用するポート番号を指定します。 * プレビュー用ポート番号：プレビュー画面で使用するポート番号を指定します。 * プロキシーサーバー : プロキシサーバーを指定します。 * ログ出力 : ログの出力先となるファイルを指定します。 * 言語 : 表示言語を指定します。 * ファイル同期 : リモート画面（ リモートビルドと設定 ）を閉じた後のダウンロード操作を指定します。 * アップロードオプション : アップロードする前にプロジェクトをトランスパイルするか指定します。 * ビーコン ブロードキャスト : Monaca Localkit と Monaca デバッガーを同期する時に使用するビーコン ブロードキャストを指定します。 * 環境パス：Monaca Localkit が Node.jsを認識しない場合は、Node.jsのパスを指定します。 3\. 設定を保存します。
### アップロードとダウンロードの制御 特定のファイルやフォルダを除外して Monaca クラウドにアップロードしたくない場合があります。 この場合は、プロジェクトのルートディレクトリにある `.monacaignore` ファイルを編集して、特定のファイルやフォルダを設定することができます。 {% hint style="info" %} `.monacaignore` は、`.gitignore` と同じパターンを使用しています。 {% endhint %} `.monacaignore` ファイルのデフォルト設定は次のとおりです。 ```bash /.monaca/* !/.monaca/project_info.json /platforms .DS_Store *.swp .vscode/ typings/ node_modules .git ```