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」編

コメント

コメントを投稿

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか？

イメージ
日経14.06.08朝　芸術と科学のあいだ　１７　鏡文字に込めた天才の思惑　福岡伸一 …ダ・ビンチの筆の特徴は、線が左上から斜め右下へと流れていることである。これは彼が左利きだったかららしい。 もう一つの際立った特徴は、文字がすべて鏡文字、左右反転で書かれていることだ… アイディアを盗まれないよう暗号化したのだという説があるが、暗号にしては簡単に解読されてしまう… ダ・ビンチは天才であり完璧主義者であると同時に、大いなる山っ気を持った人物でもあった。 いつも自分を売り込むこと、プランやアイディアを広めることを考えていた。そのためには何が必要か。マスメディアである。 ダ・ビンチの鏡文字は自分の原稿をいつの日か活版印刷するために意図された周到な準備だったのではなかったか。 日経記事より レオナルド・ダ・ビンチは過去の人物の中で最も尊敬する人物だ。彼は本当に何でも出来た。芸術も、科学も、工学も。まさに「万能人 (uomo universale)」。 レオナルド・ダ・ヴィンチ - Wikipedia 当然自分はダ・ビンチの足元にも及ばないが、いくつもの人工言語（プログラミング言語）を使うことができる。ひとつをマスターするのは大変だったが、ひとつマスターするとその他の言語にはかなりの共通点があるので、新しい言語を習得するのにそれほど時間がかからなくなったからだ。 いかに天才であったとしても生きられる時間は限られている。その限られた時間の中であれほどの多方面に渡る物事を習得できたのは、「すべてのものに共通する何か」を習得したからではないかと思うのだ。 自分の知る限り、その「すべてのものに共通する何か」を習得したのではないかと思える人物は、ダ・ビンチただ一人だ。 そのダ・ビンチの新たな側面を知った。山っ気というか、マーケティングにも興味があったようだ。 そのマーケティングには何らかのメディアが必要だ。やはり自分もダ・ビンチは活版印刷のために鏡文字を使っていた説に一票だ。 マーケティングへの興味という他にもう一つ根拠がある。ダ・ビンチが生まれたのが1452年。グーテンベルクの聖書が世界で初めて活版印刷でつくられたのが1455年。 グーテンベルク聖書 - Wikipedia つまり、ダ・ビンチが生きた時代は活版印...
続きを読む

macでsmb（samba）共有サーバーに別名で接続（別アカウント名で接続）する方法

macでsmb（samba）共有サーバーに別のアカウント名で接続したくなった。 接続を解除してもパスワードを保存してしまったために自動的に再接続してしまい、別アカウント名で接続できなくなってしまった(´・ω・`) どうすれば別名で接続できるのか？ Finder＞移動＞サーバーへ接続＞サーバアドレス に下記のように入力する。 smb://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜
続きを読む

Google DriveにCURLでアップロードするには？

イメージ
LinuxからGoogleドライブにファイルをアップロードしたい！ Google Drive にlinuxからファイルを自動アップロードするにはどうしたら良いかを考えていた。 残念ながらlinux版のクライアントは予定はされているものの、まだリリースされていない。さてどうしよう？ 例えば、一応 SDK でライブラリが提供されているのでJavaでクライアントを書くとか？重いなぁ。そこまでやらなきゃいけないか？ そこで、Google DriveはRESTFulなんだからCurlだけでもある程度いけるはず・・・と思ってやってみたらできた。 Get Startedを参考にはじめる。 Google Drive SDK — Google Developers ちなみに、テスト環境はlinuxではなくMacのLIONです。 追記12.07.04 ：CentOS 5 64bitでも正常動作を確認した APIコンソールでアプリケーション登録 まずAPIコンソールでアプリケーション登録をする必要がある。 Google APIs Console Create＞「GoogleDriveUploader」とでも名前を付けて＞Create Project Services＞Drive SDKをON API Access＞Create an OAuth2.0 client ID Product Nameに「GoogleDriveUploader」とでも名前を付けて＞Next Installed Application、Otherを選択して＞Create client ID ここまででこんな情報を貰える。これが必要な情報。 ブラウザでOAuth認証してcodeを取得する 今度はブラウザ上で、先ほど得た情報を使ってOAuthの認証を通す。 https://accounts.google.com/o/oauth2/auth?client_id= CLIENT_ID &response_type=code&redirect_uri=urn:ietf:wg:oauth:2.0:oob&scope=https://www.googleapis.com/auth/drive こんな画面が出るので「アクセス...
続きを読む