パート 2 : Monaca クラウド IDE と Monaca デバッガーとの連携
最終更新
最終更新
Monaca デバッガー は、Monaca アプリの検証とデバッグを、端末上でリアルタイムに行うためのアプリです。
Monaca アプリの開発時、Monaca クラウド IDE ( PC 側 ) と Monaca デバッガー ( 端末側 ) がインターネットに接続されていれば、IDE 上のプロジェクトファイルに加えられた変更は、保存後、即座にデバッガー側に 「 プッシュ 」 されます。
Monaca クラウド IDE で Monaca アプリを開発する場合、プロジェクトファイルに加えられたすべての変更は、保存後 Monaca デバッガーとリアルタイムで同期されます。
Monaca デバッガーを端末にインストールします。
Android端末の場合は、下のGoogle PlayストアからMonacaデバッガーアプリをインストールします。
iOS端末の場合は、こちらの手順にてMonaca上でデバッガーアプリを作成してください。
Monaca デバッガーのインストール方法の詳細は、 こちら をご確認ください。
Monaca デバッガーを起動し、Monaca アカウントを使用してログインします。ログインのユーザー名とパスワードは、Monaca クラウド IDE のログイン時に使用したものと同じものを使用します。
2. プロジェクトのリストが表示されます。 Monaca クラウド IDE 上のプロジェクトは、Monaca.io プロジェクト に表示されます。 プロジェクトを実行するには、Monaca デバッガーでプロジェクト名をタップするか、Monaca クラウド IDE から 実行 → 実機で実行をクリックします。
3. デバッガー上でプロジェクトが実行されていることを確認します。
4. デモアプリケーションのさまざまな機能を試してみてください。
(プロジェクトリスト画面に戻るには、デバッガメニューの、戻る ボタンをタップします。)
ここまでの手順で、Monaca デバッガー上でプロジェクトを実行できることを確認しました。
次に、このプロジェクトを編集し、Monaca デバッガー側に反映されるか確認してみましょう。
Monaca デバッガー上で、プロジェクトを実行します。
Monaca クラウド IDEでは、 index.html を開き、ページのタイトルを Monaca Memo から My Memo に変更しましょう。 次に、変更を保存します。
3. 保存された変更は、端末の Monaca デバッガー側に送られます。アプリ側で変更が反映されない場合は、デバッガーメニュー上の更新ボタンをタップすることで、最新の内容を取得することができます。
トランスパイルプロジェクトの場合は、クラウド IDE とMonacaデバッガー間のライブリロードは利用できません。コードを変更した際、更新ボタンをタップして変更内容をデバッガー上に反映させてください。
Monaca CLI で USBデバッグを使用することもできます。 Monaca 提供のローカル環境用の開発ツールと Monaca デバッガーとの連携 を参照してください。
ここでは、Monaca デバッガーの基本的な使用方法について説明しました。他の箇所も変更して、デバッガー上で確認してみましょう。
Monaca デバッガーには、ここで紹介した以外にも便利な機能がたくさんあります。どのような機能があるのか知りたい場合は、ドキュメントの「機能の概要」のページを参照してください。そこでは、Monaca デバッガーの様々な機能について詳しく解説されています。
