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