PhoneGapとRippleで世界を縮めるスマートフォンアプリ開発 - ドキッ！はてなブログに移転しました！

この世の理はすなわち速さだと思いませんか？

PhoneGapはスマートフォンのWebViewを利用してHTMLやJavaScript,CSSで気軽にスマートフォンアプリを作ることができるライブラリです。
PhoneGapはWebViewを使っているということで、ChromeなどのPCブラウザでもある程度のデバッグができます。そのためスピーディーでサクサクと開発ができるというのが良い点です。これはほかのSDKと比較してもかなり特徴的です。
スマートフォンアプリの開発でJavaScript デバッグコンソールが利用できると考えただけでその手軽さが分かるのではないでしょうか。

今回はPhoneGapでfastestなdebug環境を紹介したいと思います。

Rippleを導入して開発効率を更に加速！

PhoneGapでスマートフォンのネイティブAPI（Geo LocationやCameraなど）を呼び出そうとした場合、PCブラウザでデバッグをする場合にはそのようなAPIが用意されていないため、エラーが起きてしまいます。
…俺が遅い…！俺がスロウリィー！？
これではPCブラウザで簡単デバッグというせっかくの利点が生かせません。

そこでRippleというエクステンションを導入します。
RippleはChromeブラウザのエクステンションで、マルチプラットフォームでのモバイル環境をエミュレートしてくれます。PhoneGapをサポートしているので、ネイティブAPIを呼び出すJavaScriptの実装をしてもChromeブラウザでデバッグコンソールを開きながらサクサクと開発ができるという寸法です。

Rippleの導入

ここからはPhoneGapの環境が整っていることを前提に進めていきます。
まずはRippleを導入しましょう。とりあえずChromeのRippleエクステンションをここからインストールします。

次にfile:///でRippleを利用するためにChromeの設定をします。
Chromeの起動オプションに

--allow-file-access-from-files

を追加します。
具体的には、Chrome.exeのショートカットアイコンのプロパティを開いて、リンク先のchrome.exeの後にspaceを入力して上記のオプションを記述します。

コマンドラインから行うことも可能です。

次にChromeブラウザを終了してから上記の設定を行ったショートカットからChromeを再起動します。※Chromeを起動したまま新しくウィンドウを起動しても設定は反映されません。

この設定が終わったら、次にChrome Extensionの管理画面でRippleの「ファイルのURLへのアクセスを許可する」にチェックを入れます。

設定は以上になります。

それではassetsにあるPhoneGapのHTMLファイルをChromeで開きます。
開いた画面で右クリックをし、RippleのアイコンがついたEmulatorからEnableをクリックします。

するとRippeのプラットフォーム選択画面が表示されるのでPhoneGapを選択します。

これでPhoneGap APIを利用したアプリケーションが簡単にできるようになります。こんな感じです↓

実際にデバッグしてみる

試しに電話帳に登録されているユーザを取ってみましょう。

var fields = ['displayName'];
var onSuccess = function(contacts){
    for(var key in contacts){
        console.log(contacts[key].displayName);
    }
}
navigator.contacts.find(fields, onSuccess);

このコードをRippleのエミュレータで実行してみると

Brent Lintner
PJ Lowe
Dan Silivestru
Gord Tanner
Mark McArdle

このように、Rippleで用意されているデータが表示されます。

PCブラウザのみでデバッグしていたよりも更に簡単に行えるようになりました。ブラボォォォォォ！！
ﾊｯﾊｯﾊｯﾊ、これで最後までAndroid エミュレータや実機での確認をしないでデバッグができるようになりました！どうですかー？
ちなみにRippleでサポートされているPhoneGapのAPIはここで確認できます。ほとんどサポートされていますね。

ただ、PhoneGap Pluginで拡張したAPIは当然ながら呼び出すとエラーが起きてしまいます。
RippleのオプションでPhoneGap Plugin APIとそのレスポンスのJSONデータを登録できるようになればなお良いですね。
Rippleはまだベータバージョンなのでこれからの機能追加を期待したいです。

それでもRippleの導入で格段に開発しやすくなったと思います。
みなさんもPhoneGapとRippleでサクサクスマートフォンアプリの開発をしてみてはいかがですか？

ああ…2分20秒…！　また２秒、世界を縮めた…！