Yuta Watanabe's Blog

開発周りと、その他諸々

PhoneGap Developer App でコードの変更をリアルタイム自動更新しながらデバッグ

こんにちは。

JavaScript/HTML でネイティブ機能にもアクセスする iOS/Android/Windows アプリを開発できる PhoneGap。久しぶりに公式ページを見てみると、「 PhoneGap Developer App 」なるものを発見 ( 今年春にリリースされていた模様 )。

f:id:yuwata:20140815094845p:plain

開発マシンと実機でバイスをワイヤレスに接続し、手元のコードの変更をリアルタイムに反映しながらデバッグができるという大変便利なアプリ。

使い方はとっても簡単。

1. 開発マシンで PhoneGap の開発環境を整える

PhoneGap のインストール方法はこちら

$ npm install -g phonegap

で、PhoneGapをインストールし、

$ phonegap create my-app 

で、my-app ( アプリ名 ) プロジェクトを作成。

$ cd my-app
$ phonegap serve

プロジェクトフォルダに移動し、ローカルサーバを起動します。

2. PhoneGap Developer App を入手 & 起動

App Store/Google Play/Windows Phone Store より目的の実機用のアプリを入手。起動すると、IP アドレスの入力を促されるので、1. の $phonegap serve で ローカルサーバを起動した後に出力されたアドレスを入力して進みます。

f:id:yuwata:20140815101410p:plain

3. アプリの動作を確認 & 開発を進める

接続が完了すると、いつもの PhoneGap 初期画面が表示されます。

f:id:yuwata:20140815101443p:plain

あとは、プロジェクトフォルダ内の www フォルダ内を適当に変更してみてください。保存すると、それがアプリ側ですぐに反映され動作を確認することができます。

手元に実機がある場合は、シミュレータよりスムーズに開発/検証を進めることもできそうです。ぜひ、さくっと一度お試しください。