概要
最終更新
役に立ちましたか？
最終更新
役に立ちましたか？
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 サーバーのサポートを介して、複数のプラットフォーム向けのアプリをビルドできます。
Monaca Localkit では、 Monaca バックエンド と プッシュ通知機能 は利用できません。
事前準備として、Monaca Localkit ( PC 上 ) と ( 端末上 ) をインストールします。
Monaca Localkit の からダウンロードできます。変更履歴に関しては、 をご確認ください。
の記載内容に従い、Monaca デバッガーをインストールします。
Windows 環境で Localkit を利用する場合は、事前に Git をインストールする必要があります。
Monaca Localkit を開き、Monaca アカウントを使用してサインインします。
2. ログイン後、Monaca Localkit のダッシュボードが表示されます。
プロジェクトを新規作成します。ここでは、Monaca が提供するテンプレートを使用します。
Monaca Localkit のダッシュボードの + アイコンをクリックして、作成 を選択します。
2. 必要な情報を入力します。
プロジェクト名 : プロジェクト一覧に表示される、プロジェクトの名前
作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー
カテゴリを選択 : プロジェクトに使用するテンプレートの種類を選択します。
テンプレートを選択 : プロジェクトで使用するテンプレート。 プレビュー ボタンをクリックすると、選択されているテンプレートを確認できます。
3. プロジェクトの作成後、プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。
次のいずれかの方法で、プロジェクトをインポートできます。
クラウド IDE からインポート : Monaca クラウド IDE 上に、既存のプロジェクトがある場合に選択できます。
Cordova プロジェクトをインポート : PC 上に保存している Cordova プロジェクトをインポートする場合に選択できます。Cordova プロジェクトのインポートには、次のような制限があります。
アプリのアイコンとスプラッシュ画像が、インポートされない場合があります。この場合、「 設定 」 画面上で、再び設定します。
hooks ディレクトリー内のスクリプトは無視されます。
Cordova を含め、各プラットフォーム固有のソースコードは、インポートの対象外となります。Monaca では、Monaca 側にあらかじめ実装されている、Cordova プラグインと他の関連ライブラリーが使用されます。
Zip ファイルからインポート : Zip ファイルをインポートします ( 有効な形式のプロジェクトを圧縮した Zip ファイルであること )。
Monaca Localkit へプロジェクトをインポートします。次の手順に従います。
Monaca Localkit ダッシュボードの左パネルの上部に表示された +ボタンをクリックします。表示されたメニューから インポートを選択します。次に、表示されたサブメニューから、お好みのインポートオプションを選択します。
クラウド IDE からインポート を選択した場合には、次の情報を入力して、[ インポート ] ボタンをクリックします。
プロジェクトを選択 : Monaca クラウド IDE 上に保存されているプロジェクトから、1 つ選択します。
作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー
3. Cordova プロジェクトをインポート を選択した場合には、次の情報を入力して、[ インポート ] ボタンをクリックします。
作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー
プロジェクト名 : プロジェクト一覧に表示される、プロジェクトの名前
4. Zip ファイルからインポート を選択した場合には、次の情報を入力して、[ インポート ] ボタンをクリックします。
Zip ファイル : 対象の zip ファイルを選択します。
プロジェクト名 : プロジェクト一覧に表示される、プロジェクトの名前
作業ディレクトリ : プロジェクトファイルの保存先となるディレクトリー
5. プロジェクト一覧上に、作成したプロジェクトが表示されていることを確認します。
次に、Monaca Localkit の [ 開く... ] メニューを解説します。Monaca Localkit では、ローカルプロジェクトのファイルを以下のような方法で開くために 開く... 機能を提供しています。
Finder / ファイルエクスプローラ : Finder ( Mac の場合 ) 、File Browser ( Linux の場合 ) または、ファイルエクスプローラ ( Windows の場合 )を使用して、対象プロジェクトのフォルダーを開きます。
ターミナル / コマンドプロンプト : ターミナル ( Mac / Linux の場合 ) またはコマンドプロンプト ( Windows の場合 ) を使用して、対象プロジェクトのフォルダーを開きます。
プログラムを追加 : お好みのエディターを追加して、ローカルのプロジェクトファイルを Monaca Localkit から開くことができます。
Monaca Localkit へエディターを追加する場合、次の手順に従います。
Monaca Localkit 上で、プロジェクトを選択します。
開く... ボタンをクリックして、プログラムを追加... を選択します。
3. [ エディターの追加 ] ダイアログが表示されます。エディタープログラムに関する、次の情報を入力します。
アプリケーションのパス : エディターの実行ファイルを指定します ( Mac の場合 .app ファイル、Windows の場合 .exe ファイル )。
アプリケーション名 : エディターの表示名を指定します。この表示名は、[ 開く... ] メニューを選択したときに、一覧上に表示されます。
コマンドライン引数 : 追加するエディターに適用する引数を設定できます。現時点では、%d ( プロジェクトファイルへのパス ) を使用できます。
4. OKをクリックします。[ 開く... ] メニューを選択したときに、追加したエディターが一覧上に表示されていることを確認します。
最新の JS フレームワークの中には、JSX などとのやり取りを行うために独自の言語を作成したものや、ネイティブ JavaScript で利用できない拡張機能 ( TypeScriptなど ) を統合したものがあります。トランスパイル処理では、これらの言語で書かれたコードを最新のブラウザ / WebView で実行可能なネイティブ JavaScript コードに変換します。トラインスパイル処理は、WebPack を利用して実行しています。
Monaca Localkit 上での変換処理は、プロジェクトの内容が変更されるたびに実行され、今まではユーザー側で制御することができませんでした。
ハードウェアのスペックによっては問題が生じるため、自動変換を行うかどうかをユーザー側で設定できるようにしました。自動で変換を行わない場合には、[ トランスパイラー ] タブ上の 自動トランスパイルを有効にする オプションを切り替えます。設定はプロジェクト毎に変更でき、変更後はその設定が適用され続けます。また、変換の状態は、トランスパイラー タブ上で確認できます。
変換処理の進捗・内容をリアルタイムで監視することができます。以前は、別ウィンドウ上のログに出力していましたが、ユーザー側で各種設定を行う必要がありました。そこで、Monaca LocalKit にコンソールを移植し、Monaca LocalKit 上でもログを確認できるようにしました。
表示される情報は次のとおりです。
コード変換の状態
割り振られた PID ( プロセス ID ) とその ID に紐づけされている処理 ( 当該 ID 下で行われた一連の処理内容 )
処理終了の通知 ( Kill )
処理時に使用する設定の通知など
また、コンソールの大きさは、必要に応じて適宜調整または非表示にすることもできます。
Monaca Localkit メニュー上で、 設定 ( Mac の場合 ) または ファイル → 設定 ( Windows / Linux の場合 ) を選択します。
2. [ 設定 ] ダイアログでは、次の項目を設定できます。
作業ディレクトリ : プロジェクトの保存先を指定します ( ローカル )。
待ち受けポート番号 : Monaca Localkit と Monaca デバッガーをペアリングするときに使用するポート番号を指定します。
プレビュー用ポート番号：プレビュー画面で使用するポート番号を指定します。
プロキシーサーバー : プロキシサーバーを指定します。
ログ出力 : ログの出力先となるファイルを指定します。
言語 : 表示言語を指定します。
ファイル同期 : リモート画面（ リモートビルドと設定 ）を閉じた後のダウンロード操作を指定します。
アップロードオプション : アップロードする前にプロジェクトをトランスパイルするか指定します。
ビーコン ブロードキャスト : Monaca Localkit と Monaca デバッガーを同期する時に使用するビーコン ブロードキャストを指定します。
環境パス：Monaca Localkit が Node.jsを認識しない場合は、Node.jsのパスを指定します。
3. 設定を保存します。
特定のファイルやフォルダを除外して Monaca クラウドにアップロードしたくない場合があります。 この場合は、プロジェクトのルートディレクトリにある .monacaignore ファイルを編集して、特定のファイルやフォルダを設定することができます。
.monacaignore ファイルのデフォルト設定は次のとおりです。
