2014年10月27日月曜日

Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「LiveReload + GapReload plugin」編

この記事は「PhoneGap Developer App」編の続きです。

「PhoneGap Developer App」についてのJohannesさんの記事のコメントでSebastienさんが、カスタムプラグインをサポートしつつライブリロードする別の方法についてコメントしている。

Livereload for Phonegap/Cordova/Ionic - Johannes Schickling

…Hi, I wrote the GapReload plugin (https://github.com/fingerproof... which is a LiveReload Cordova/PhoneGap plugin that, unlike the PhoneGap app, works with custom plugins. Just wanted to let you know :) Hopefully you can try it and give me some feedback. …

これだね。早速試してみよう。

fingerproof/cordova-plugin-gapreload

全体的なイメージをつかむために、Sebastienさんが用意してくれているビデオを見ておいてもいいかもしれない。


GapReload Cordova/PhoneGap plugin demo from Sebastien Paul πtt° on Vimeo.

前提として、AndroidでCordovaアプリを動かす環境が整っていることとする。まだ整っていない場合はこの記事が参考になるだろう。

琴線探査: CordovaのAndroidアプリを動かすまで(MacOS XとAndroid Studioにて)


プロジェクトの作成とプラグインの組み込み

# cordova create TestApp
# cd TestApp
# cordova platform add android
# cordova plugin add https://github.com/fingerproof/cordova-plugin-gapreload --variable SERVER_HOST="192.168.xxx.xxx"


「LiveReloadの」インストールと設定

まず、こちらから「LiveReload」を開発機にインストールする。Mac版とWin版がある。

How do I start using LiveReload? – LiveReload Help & Support

MacのAppStoreに有料版があるが、とりあえず無料版のv2.3.66をインストールする。

起動するとメニューバーにこのようなアイコンが表示される。


これをクリックするとこのようなウインドウが表示されるので、「+」をクリックして「TestApp」のルートフォルダを選択する。


Optionsをクリックする。


「+」をクリックする。


TestApp/platformsとTestApp/pluginsを追加する。


「Disable live reflesh」をチェック。live refleshだとdevicereadyイベントが来ないでリフレッシュされてしまうので。


そして「Apply」。ここでLiveReloadがクラッシュするかもしれないが、めげずに再起動させて続ける。

「Run custom command…」からの「cordova prepare」を入力して「Apply」。


これでLiveReloadの設定は終了だ。


アプリの起動とサーバーの起動、そしてアプリからサーバーへの接続

Androidの実機をデバッグモードで開発機に接続しておく。

# cordova run
# cordova serve

アプリからサーバーへ接続する。



コンテンツの編集とライブリロードの確認

起動時はこのような画面が表示されているはず。


ここで、TestApp/www/index.htmlを適当に編集して、アプリの表示が自動的に変更することを確認する。


保存してから変更されるまでに多少のタイムラグがある。リロードされると「cordova serve」したコンソールにこのようなログが表示されるので確認するといい。

Static file server running on port 8000 (i.e. http://localhost:8000)
CTRL + C to shut down
200 /android/www/index.html
200 /android/www/css/index.css
200 /android/www/cordova.js
200 /android/www/js/index.js
200 /android/www/img/logo.png
200 /android/www/cordova_plugins.js
200 /android/www/plugins/pro.fing.cordova.gapreload/gapreload.js
200 /android/www/plugins/org.apache.cordova.device/www/device.js
200 /android/www/plugins/com.ququplay.websocket.WebSocket/www/phonegap-websocket.js
200 /android/www/gapreload.xml
200 /android/www/index.html
200 /android/www/css/index.css
200 /android/www/cordova.js
200 /android/www/js/index.js
200 /android/www/img/logo.png
200 /android/www/cordova_plugins.js
200 /android/www/plugins/pro.fing.cordova.gapreload/gapreload.js
200 /android/www/plugins/org.apache.cordova.device/www/device.js
200 /android/www/plugins/com.ququplay.websocket.WebSocket/www/phonegap-websocket.js
200 /android/www/gapreload.xml

あとはwww以下のコンテンツをバリバリ編集していくだけだ。

最後にもう一点。アプリのインストール時にはUSBで接続しておかなければならないが、一度インストールしたらケーブルを使わなくてもWiFiでデバッグできる\(^o^)/

追記14.11.26:ionicは簡単!
琴線探査: Cordova/PhoneGap開発を加速するライブリロードを何とかする 〜 「ionic」編