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

パート 2 : Monaca クラウド IDE と Monaca デバッガーとの連携

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

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

事前準備

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

App Store Logo
Google play logo

注釈

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

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

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

../../../_images/117.png
  1. プロジェクトの一覧が表示されます。Monaca クラウド IDE 上のプロジェクトは、[ Monaca.io プロジェクト ] 欄に表示されます。プロジェクトを実行する場合は、Monaca デバッガー上のプロジェクト名をタップ、または、Monaca クラウド IDE のメニューから 実機デバッグ をクリックします。

../../../_images/219.png
  1. デバッガー上でプロジェクトが実行されていることを確認します。プロジェクトの一覧画面に戻る場合は、[ デバッガーメニュー ] ボタンをタップし、次に 戻る ボタンをタップします。

../../../_images/315.png
../../../_images/67.png
  1. 再びアプリを起動させ、メモの追加と削除を行い動作を確認してみましょう。

../../../_images/48.png

ステップ 2 : Monaca クラウド IDE と Monaca デバッガー間のリアルタイム更新

ここまでの手順で、Monaca デバッガー上でプロジェクトを実行できることを確認しました。次に、このプロジェクトを編集し Monaca デバッガー側に反映されるか確認してみましょう。

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

  2. Monaca クラウド IDE 上でプロジェクトファイルの内容を変更し、保存してみましょう ( プロジェクトファイルの編集 を参照のこと )。ここでは index.html 上でページのタイトルを 「 Monaca Memo 」 から 「 My Memo 」 へ変更し、保存します。

../../../_images/76.png
  1. 保存された変更は、端末の Monaca デバッガー側に送られます。アプリ側で変更が反映されない場合は、デバッガーメニュー上の 更新 ボタンをタップすることで、最新の内容を取得することができます。

../../../_images/57.png

更新後のページタイトル

../../../_images/84.png

更新ボタン

注釈

Monaca デバッガーが提供する機能に関しては、 機能の概要 をご確認ください。

ここでは、Monaca デバッガーの基本的な使用方法について解説しました。他の箇所も変更して、デバッガー上で確認してみましょう。

Monaca でのデバッグをお楽しみください!