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

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

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

Monaca クラウド IDE で Monaca アプリを開発する場合、プロジェクトファイルに加えられたすべての変更は、保存後 Monaca デバッガーとリアルタイムで同期されます。

はじめに

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

Android端末の場合は、下のGoogle PlayストアからMonacaデバッガーアプリをインストールします。

iOS端末の場合は、こちらの手順にてMonaca上でデバッガーアプリを作成してください。

Monaca デバッガーのインストール方法の詳細は、 こちら をご確認ください。

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

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

2. プロジェクトのリストが表示されます。 Monaca クラウド IDE 上のプロジェクトは、Monaca.io プロジェクト に表示されます。 プロジェクトを実行するには、Monaca デバッガーでプロジェクト名をタップするか、Monaca クラウド IDE から 実行 → 実機で実行をクリックします。

3. デバッガー上でプロジェクトが実行されていることを確認します。

4. デモアプリケーションのさまざまな機能を試してみてください。

(プロジェクトリスト画面に戻るには、デバッガメニューの、戻る ボタンをタップします。)

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

ここまでの手順で、Monaca デバッガー上でプロジェクトを実行できることを確認しました。

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

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

2. Monaca クラウド IDEでは、 index.html を開き、ページのタイトルを Monaca Memo から My Memo に変更しましょう。 次に、変更を保存します。

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

トランスパイルプロジェクトの場合は、クラウド IDE とMonacaデバッガー間のライブリロードは利用できません。コードを変更した際、更新ボタンをタップして変更内容をデバッガー上に反映させてください。

Monaca CLI で USBデバッグを使用することもできます。 Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携 を参照してください。

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

Monaca デバッガーには、ここで紹介した以外にも便利な機能がたくさんあります。どのような機能があるのか知りたい場合は、ドキュメントの「機能の概要」のページを参照してください。そこでは、Monaca デバッガーの様々な機能について詳しく解説されています。