Monaca Localkit は、Monaca アプリ向けのローカル環境用の開発ツールです。ソースコード管理システム ( バージョン管理システム )・タスク実行ツール ( Task Runner )・エディターなど、多岐にわたる開発ツールと併用できます。Monaca Localkit を使用すれば、オフラインでの開発も行え、また、Monaca デバッガーとのスピーディーな同期も行えます。
Monaca Localkit では、次のような、開発効率の向上に役立つ、複数のサポート機能を提供しています。
事前準備として、Monaca Localkit ( PC 上 ) と Monaca デバッガー ( 端末上 ) をインストールします。
Monaca Localkit を開き、Monaca アカウントを使用してサインインします。
ログイン後、Monaca Localkit のダッシュボードが表示されます。
プロジェクトを新規作成します。ここでは、Monaca が提供するテンプレートを使用します。
Monaca Localkit のダッシュボードの +
アイコンをクリックして、 作成
を選択します。
必要な情報を入力します。
プロジェクトの作成後、プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。
次のいずれかの方法で、プロジェクトをインポートできます。
クラウド IDE からインポート
: Monaca クラウド IDE
上に、既存のプロジェクトがある場合に選択できます。Cordova プロジェクトをインポート
: PC 上に保存している Cordova
プロジェクトをインポートする場合に選択できます。Cordova
プロジェクトのインポートには、次のような制限があります。
Zip ファイルからインポート
: Zip ファイルをインポートします (
有効な形式のプロジェクトを圧縮した Zip ファイルであること )。
Monaca Localkit へプロジェクトをインポートします。次の手順に従います。
クラウド IDE からインポート
を選択した場合には、次の情報を入力して、[ インポート ]
ボタンをクリックします。
プロジェクトを選択
: Monaca クラウド IDE 上に保存されているプロジェクトから、1 つ選択します。作業ディレクトリ
: プロジェクトファイルの保存先となるディレクトリーCordova プロジェクトをインポート
を選択した場合には、次の情報を入力して、[ インポート ]
ボタンをクリックします。
作業ディレクトリ
: プロジェクトファイルの保存先となるディレクトリープロジェクト名
: プロジェクト一覧に表示される、プロジェクトの名前Zip ファイルからインポート
を選択した場合には、次の情報を入力して、[ インポート ]
ボタンをクリックします。
Zip ファイル
: 対象の zip ファイルを選択します。プロジェクト名
: プロジェクト一覧に表示される、プロジェクトの名前作業ディレクトリ
: プロジェクトファイルの保存先となるディレクトリープロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。
次に、Monaca Localkit の [ 開く… ] メニューを解説します。Monaca Localkit では、ローカルプロジェクトのファイルを以下のような方法で開くために 開く... 機能を提供しています。
Monaca Localkit へエディターを追加する場合、次の手順に従います。
開く... ボタンをクリックして、 プログラムを追加... を選択します。
[ エディターの追加 ] ダイアログが表示されます。エディタープログラムに関する、次の情報を入力します。
.app
ファイル、Windows の場合 .exe
ファイル )。%d
( プロジェクトファイルへのパス ) と %p
( プロジェクト名 ) を使用できます。OK をクリックします。[ 開く… ] メニューを選択したときに、追加したエディターが一覧上に表示されていることを確認します。
最新の JS フレームワークの中には、JSX などとのやり取りを行うために独自の言語を作成したものや、ネイティブ JavaScript で利用できない拡張機能 ( TypeScriptなど ) を統合したものがあります。トランスパイル処理では、これらの言語で書かれたコードを最新のブラウザ / WebView で実行可能なネイティブ JavaScript コードに変換します。トラインスパイル処理は、WebPack を利用して実行しています。
Monaca Localkit 上での変換処理は、プロジェクトの内容が変更されるたびに実行され、今まではユーザー側で制御することができませんでした。
ハードウェアのスペックによっては問題が生じるため、自動変換を行うかどうかをユーザー側で設定できるようにしました。自動で変換を行わない場合には、[ トランスパイラー ] タブ上の 自動トランスパイルを有効にする
オプションを切り替えます。設定はプロジェクト毎に変更でき、変更後はその設定が適用され続けます。また、変換の状態は、トランスパイラー
タブ上で確認できます。
変換処理の進捗・内容をリアルタイムで監視することができます。以前は、別ウィンドウ上のログに出力していましたが、ユーザー側で各種設定を行う必要がありました。そこで、Monaca LocalKit にコンソールを移植し、Monaca LocalKit 上でもログを確認できるようにしました。
表示される情報は次のとおりです。
また、コンソールの大きさは、必要に応じて適宜調整または非表示にすることもできます。
Monaca Localkit メニュー上で、 設定
( Mac の場合 ) または
ファイル → 設定
( Windows / Linux の場合 ) を選択します。
[ 設定 ] ダイアログでは、次の項目を設定できます。
設定を保存します。
特定のファイルやフォルダを除外して Monaca クラウドにアップロードしたくない場合があります。 この場合は、プロジェクトのルートディレクトリにある .monacaignore
ファイルを編集して、特定のファイルやフォルダを設定することができます。
.monacaignore
は、.gitignore
と同じパターンを使用しています。
.monacaignore
ファイルのデフォルト設定は次のとおりです。
/.monaca/*
!/.monaca/project_info.json
/platforms
.DS_Store
*.swp
.vscode/
typings/
node_modules
.git
参考ページ