ドキュメントTOP » Monaca ガイド » Monaca CLI » Monaca CLI チュートリアル » パート 2 : Monaca CLI と Monaca デバッガーとの連携

パート 2 : Monaca CLI と Monaca デバッガーとの連携

Monaca デバッガー は、Monaca アプリの検証とデバッグを、端末上でリアルタイムに行うためのアプリです。

Monaca アプリの開発時、Monaca CLI ( ローカル PC 側 ) と Monaca デバッガー ( 端末側 ) がペアリングされていれば、プロジェクトファイルに加えられた変更は、保存後、即座にデバッガー側に 「 プッシュ 」 されます。

事前準備

Monaca デバッガーを端末にインストールします。

App Store Logo
Google play logo

注釈

Monaca デバッガーのインストール方法 ( プラットフォーム別 ) は、こちら をご確認ください。

ステップ 1 : Monaca デバッガーとローカル PC のペアリング

ローカル PC 上で作成した Monaca アプリを、Monaca デバッガー上でデバッグ・検証をする場合には、ローカル PC と Monaca デバッガーをペアリングする必要があります。

注釈

Monaca デバッガーとローカル PC を接続する前に、次の点をご確認ください。

  1. 同じ WiFi または LAN ネットワーク上に、Monaca デバッガーとローカル PC が接続されていること。

  2. 同じ Monaca アカウントを使用して、Monaca デバッガーとローカル PC にサインインしていること。

  3. ローカル PC 側のファイアーウォールを無効化していること。

  1. コマンドウィンドウ上で、プロジェクトのフォルダーまで移動し、 monaca debug コマンドを実行して、Monaca デバッガーに接続します。実行すると、Monaca CLI 側では、デバッガーからのリクエストの待ち受けを開始します。

../../../_images/312.png
  1. Monaca デバッガーを起動し、Monaca アカウントを使用してログインします。ログインのユーザー名とパスワードは、Monaca CLI のログイン時に使用したものと同じものを使用します。

../../../_images/118.png
  1. Monaca デバッガー上に、ポップアップメッセージが表示され、Monaca デバッガーとホスト PC をペアリングするか聞かれます。[ ペアリング ] ボタンをタップします。

../../../_images/213.png
  1. ペアリング後、Monaca デバッガーの ローカルプロジェクト 欄に、ローカルに置かれているプロジェクト名が表示されます。ペアリングに失敗した場合には、Monaca デバッガーとのペアリングが失敗する場合 をご確認ください。

../../../_images/414.png

ステップ 2 : Monaca デバッガー上でのプロジェクトの実行

  1. Monaca デバッガーの [ ローカルプロジェクト ] 上に表示されたプロジェクト名をタップして、アプリを実行します。

  2. 下のスクリーンショットのように、プロジェクトが実行されます。プロジェクト一覧へ戻る場合には、デバッガーのメニュー画面へいったん戻り、戻る ボタンをタップします。

../../../_images/511.png

アプリ実行中の画面 ( 右下 : デバッガーメニューへの [ 戻る ] ボタン )

../../../_images/612.png

デバッガーのメニュー画面 ( 赤字 : プロジェクト一覧への [ 戻る ] ボタン )

ステップ 3 : Monaca CLI と デバッガー間のリアルタイムでの同期

  1. Monaca デバッガー上で、プロジェクトを実行します。

  2. ファイル内のコードを変更してみましょう。たとえば、アプリの起動時に表示するページを 「 Page 2 」 に変更してみましょう。変更を行うには、最初に、index.html ファイルを開き、次に、<ons-sliding-menu> タグ内の main-page 属性の値を、page2.html に変更・保存します。変更後のコードは、次のとおりです。

...
  <ons-sliding-menu
      var="app.slidingMenu"
      menu-page="menu.html"
      main-page="page2.html"
      side="left" type="overlay"
      max-slide-distance="200px">
  </ons-sliding-menu>
...
  1. Monaca デバッガーと PC が接続されていれば、変更箇所は自動的にデバッガー側に反映されます。起動時のページが Page 2 になっていることを確認しましょう。

../../../_images/79.png