Monaca Docs
検索…
パート 2 : Monaca CLI と Monaca デバッガーとの連携
Monaca アプリの開発時、Monaca CLI ( ローカル PC 側 ) と Monaca デバッガー ( 端末側 ) がペアリングされていれば、プロジェクトファイルに加えられた変更は、保存後、即座にデバッガー側に 「 プッシュ 」 されます。
はじめに
Monaca デバッガーを端末にインストールします。
ステップ 1 : Monaca デバッガーとローカル PC のペアリング
ローカル PC 上で作成した Monaca アプリを、Monaca デバッガー上でデバッグ・検証をする場合には、ローカル PC と Monaca デバッガーをペアリングする必要があります。
Monaca デバッガーとローカル PC を接続する前に、次の点をご確認ください。
- 1.同じ WiFi または LAN ネットワーク上に、Monaca デバッガーとローカル PC が接続されていること。.
- 2.同じ Monaca アカウントを使用して、Monaca デバッガーとローカル PC にサインインしていること。
- 3.ローカル PC 側のファイアーウォールを無効化していること。
コマンドウィンドウ上で、プロジェクトのフォルダーまで移動し、monaca debug コマンドを実行して、Monaca デバッガーに接続します。実行すると、Monaca CLI 側では、デバッガーからのリクエストの待ち受けを開始します。
2. Monaca デバッガーを起動し、Monaca アカウントを使用してログインします。ログインのユーザー名とパスワードは、Monaca CLI のログイン時に使用したものと同じものを使用します。
3. Monaca デバッガー上に、ポップアップメッセージが表示され、Monaca デバッガーとホスト PC をペアリングするか聞かれます。[ ペアリング ] ボタンをタップします。
4. ペアリング後、Monaca デバッガーの
ローカルプロジェクト 欄に、ローカルに置かれているプロジェクト名が表示されます。ペアリングに失敗した場合には、Monaca デバッガーとのペアリングが失敗する場合 をご確認ください。
デバッグを停止し、デバッガのペアを解除するには、
Ctrl+c を押します。ステップ 2 : Monaca デバッガー上でのプロジェクトの実行
1. Monaca デバッガーの [ ローカルプロジェクト ]上に表示されたプロジェクト名をタップして、アプリを実行します。
2. 下のスクリーンショットのように、プロジェクトが実行されます。プロジェクト一覧へ戻る場合には、デバッガーのメニュー画面へいったん戻り、
戻るボタンをタップします。
ステップ 3 : Monaca CLI と デバッガー間のリアルタイムでの同期
- 1.Monaca デバッガー上で、プロジェクトを実行します。
- 2.ファイル内のコードを変更してみましょう。たとえば、アプリの起動時に表示するページを 「 Page 2 」 に変更してみましょう。変更を行うには、最初に、
index.htmlファイルを開き、次に、<ons-sliding-menu>タグ内のmain-page属性の値を、page2.htmlに変更・保存します。変更後のコードは、次のとおりです。1...2<ons-sliding-menu3var="app.slidingMenu"4menu-page="menu.html"5main-page="page2.html"6side="left" type="overlay"7max-slide-distance="200px">8</ons-sliding-menu>9...Copied! - 3.PC が Monaca Debugger に接続されている場合は、自動的にアップデートが更新され Page 2 が表示されます。
Monaca デバッガーを使うのは簡単です。 プロジェクトをさらに変更し、デバッガ上でどのように動作するかを確認してください。 モナカで開発をお楽しみください！
次へ:
最終更新 3mo ago