こんにちは。Monacaチームの細井です。

本日、Monacaをローカル環境で使える「Monaca Localkit」が正式リリースされました。
本記事では、Monaca Localkitの紹介と簡単な使い方を説明させていただきます！

 

Monaca Localkit とは？

Monaca Debuggerを使ったデバッグやビルドの機能はそのままに、ローカルでの開発を支援するツールです。
Monaca クラウドIDEの開発とは異なり、ソースコードはお使いのPCで編集・管理できるため、
使い慣れたエディタ／IDEで実装したり、Gitなどでのバージョン管理を行うことも可能です。

Monaca Localkit 製品ページ
Monaca Localkit ドキュメント

Monaca Localkit でできること

Localkitでは、以下の機能により、開発を加速させます。

■ Cordovaプロジェクトの作成・インポート

Cordovaプロジェクトの雛形を作成するだけでなく、MonacaのクラウドIDEで作成したプロジェクトをローカルにインポートしたり、既存のCordovaプロジェクトをインポートして開発を行うことができます。

■ プロジェクトの配信・ライブリロード

Monacaデバッガーと連携することで、プロジェクトをモバイル端末に配信したり、ソースコードの変更を一瞬でアプリに反映するライブリロードを行うことができます。
デバッガーとの通信は、ローカルネットワークを通して行います。

■ Chrome DevTools との連動

USBでPCとモバイル端末を接続することで、Chrome DevToolsを使用したデバッグを行うことができます。
Chrome DevToolsを使うことで、インスペクタ機能やブレークポイントを貼ってJavaScriptのデバッグを行えます。

■ リモートビルド

アプリのビルドをMonacaのビルドシステムを使用して行えます。
WindowsでもiOSアプリのビルドを行うことができます。
※リモートビルドは、ソースコードをMonacaのクラウドサーバ上にアップロードします。
　アップロードしたソースコードは、削除することも可能です。

Monaca Localkit を使ってみよう！

Locakitは、30日間であれば、Basic(無料)プランユーザでもご利用いただけます。
下記にLocalkitでビルドするまでの簡単な手順を記載しますので、是非お試しください。
詳細なドキュメントはこちら

1. インストール

以下のURLから、各OS毎のインストーラをダウンロードしてください。

Windows 版ダウンロード
Mac OS X 版ダウンロード

Windowsの場合、ダウンロードしたexeファイルを実行し、ウィザードに従ってインストールしてください。インストール後、デスクトップにショートカットアイコンが作成されます。
Macの場合、ダウンロードしたzipファイルを解凍し、Localkitのアプリケーションを開いてください。

2. ログイン

Localkitを起動すると、ログイン画面が表示されるので、サインインしてください。
既にMonacaアカウントをお持ちの方は、そのままご利用いただけます。

3. プロジェクト作成

ログイン後、ダッシュボードが表示されるので、「+」ボタンから作成を行います。

プロジェクトの雛形になるテンプレートを選択できるので、お好きなものを選択してください。
既存プロジェクトのインポートはコチラをご参照ください。

4. プロジェクト配信

MonacaデバッガーをインストールしたiOS/Android端末に作成したプロジェクトを配信してみます。
※Monacaデバッガーが未インストールの方は、コチラをご参照ください。

Monacaデバッガーで、Localkitにログインしているユーザでログインします。
モバイル端末のWi-Fiを有効にし、Localkitを起動しているPCと同じローカルネットワークになっていることを確認してください。
そうすると、以下のようなダイアログが表示されるので、ペアリングを行い、デバッガーとLocalkitを接続します。
ダイアログを閉じてしまった場合は、デバッガーのサイドメニューのローカルコンピュータからペアリングを行えます。

ご利用のネットワーク環境によっては、ペアリングのダイアログが表示されなかったり、ペアリングに失敗する可能性があります。
その際は、トラブルシューティングをご確認ください。

ペアリングに成功すると、ローカルプロジェクトの一覧にLocalkitから配信されたプロジェクトが表示されます。
一覧に表示されない場合、一覧を下にスワイプし、一覧の更新を行ってください。

では、プロジェクトを配信してみまでしょう。
Localkitで「実行ボタン」をクリックすると、自動的にデバッガー上でプロジェクトを受信し、アプリを起動します。

5. ソースコード編集

コード編集は、普段からご利用のエディタ／IDEで行っていただけます。
Localkitの「開く」ボタンをクリックするとプロジェクトのディレクトリを開きますので、ご自由に編集してみてください。

デバッガーでプロジェクトを起動中にソースコードの編集を行うと、デバッガーが自動的にプロジェクトを再読み込みします。
編集した内容が反映されているはずです！

6. Chrome DevToolsを使う

LocalkitでChrome DevToolsを起動し、デバッガーで起動しているアプリのデバッグを行うことができます。
※この機能を使うためには、各環境によって条件がありますので、コチラをご参照ください。

条件が満たされていることを確認し、デバッガーでプロジェクトを起動し、以下のボタンをクリックすると、LocalkitでChrome DevToolsが起動されます。

7. ビルドする

Localkitの「リモートビルド」ボタンをクリックすると、リモートビルド画面が表示されます。

「ビルド設定」のタブに切り替えると、各OSの設定やビルドに使用するプラグインの設定を行えます。
設定が完了したら、「ビルド」のタブに切り替えて、ビルドするOSを選択し、ビルドを行ってください。

リリース版のアプリのビルド等は、コチラをご参照ください。

Monaca Localkitもリリースされたばかりなので、これからユーザ様の声をどんどん取り込んでいきたいと考えております。
アシアルブログでも、Localkitの情報をどんどん配信されると思うので、これからもよろしくお願いいたします！！