通常PhoneGapを使ったアプリ開発では、iOSシミュレータやAndroidエミュレータ、実機を使った動作確認をすることになります。各エミュレータの起動や実機へのインストールは、それなりの時間が発生します。今回は、機能実装・修正→確認のサイクルを効率良く回すためのモバイルエミュレータ「Ripple Emulator」をご紹介します。

Ripple Emulatorとは

Ripple Emulatorは、Google Chromeベースのモバイルエミュレータです。各モバイルの画面サイズや、GPS、コンパス、モーションセンサを再現し、モバイルアプリの動作テストを行うことができます。

通常PhoneGapアプリを開発する場合、devicereadyイベントが発火した後でネイティブの機能を呼び出すことになります。このdevicereadyイベントはPhoneGap（Cordova）特有のイベントであり、一般的なWebブラウザではサポートされていません。

Ripple Emulatorではdevicereadyイベントがサポートされています。PhoneGapアプリをRipple Emulatorで開くだけで、特別な設定をすることなく、PhoneGapアプリの動作確認が可能になります。

RippleはChromeの拡張としてインストールします。Chrome ウェブストアよりインストールを行います。

対応しているCordova APIは次のとおりです（Developing on the PhoneGap platform with Rippleより引用⁠）⁠。

Accelerometer（モーションセンサ）

Compass（コンパス）

Contacts（連絡先）

Device（デバイス）

Events（イベントハンドラ）

Geolocation（GPS）

Network（ネットワーク）

Notification（通知）

執筆時の最新バージョンは、9月25日（米国時間）に公開された 0.9.9 です。現在はβ版として提供されています。本稿では、このRipple Emulatorの使い方をご紹介します。

ここでの動作環境は次のとおりです。

• OS: Mac OS X 10.8.2（Mountain Lion）
• Google Chrome: 22.0.1229.79
• PhoneGap: 2.1.0

Ripple Emulatorの使い方

PhoneGapで開発されたアプリケーションを、RippleがインストールされているChromeで開きます。Webサーバに配置する必要があるので注意してください。

• ×: file:///Users/hiroaki//HelloRipple/www/index.html
• ○: http://localhost/HelloRipple/www/index.html

PhoneGapで作成されているアプリケーションを開き、Rippleのアイコンをクリックします。[Enable]ボタンをクリックして、Rippleを有効にします。

Rippleを起動すると、画面中央に作成したアプリケーションの画面が表示されます。画面左右には、OSや加速度を示す情報や、GPS位置情報を操作できるパネルが表示されます。

それぞれのパネルは、右上のアイコンをドラッグすることで、左右どちらか好きなように配置することができます。必要のないパネルは、閉じておくことも可能です。

Devicesパネル

それでは各操作パネルについて見ていきましょう。Devicesパネルでは、デバイスやデバイスの向きを変更することが可能です。

デバイスはプルダウンで変更します。デバイスを変更すると、画面中央に表示されている画面デザインの縦幅・横幅が変化し、後述のInfomationパネルのOS情報などが更新されます。用意されているデバイスは次のとおりです。

Orientationではデバイスの縦・横を切り替えることができます。

Platformsパネル

Platformsパネルでは、各種プラットフォームを変更することができます。

プラットフォームを切り替えると、対応しているDevices/Platform Versionのみが選択できるようになります。用意されているプラットフォームは次のとおりです。

Apache Cordova / PhoneGapでは、バージョン1.0.0と2.0.0を切り替えることが可能です。

Infomationパネル

Infomationパネルでは、現在のプラットフォームや選択しているデバイス、OS名、画面サイズ、ユーザエージェント名などが確認できます。

Accelerometerパネル

Accelerometerパネルでは、加速度の確認と操作が行えます。

X方向、Y方向、Z方向の加速度が表示されます。画面に表示されている3Dの端末オブジェクトをドラッグで操作すると、加速度が生じます。パネル下部の[Shake]ボタンをクリックすると、シェイクの動作が行われます。

Device & Network Settingsパネル

Device & Network Settingsでは、通信回線の変更ができます。

Connection Typeで用意されている通信回線は次のとおりです。

• UNKNOWN
• ETHERNET
• WIFI
• CELL_2G
• CELL_3G
• CELL_4G
• none

Geo Locationパネル

Geo Locationでは、GPS座標の確認と変更が行えます。

項目名の意味は次のとおりです。

座標はLatitude/Longitudeの数値を直接変更するほか、パネル下部に表示されている地図の位置を変更することでも操作可能です。

Headingスライダではコンパスの向きを再現します。たとえばCordova APIのCompass API/compass.watchHeadingメソッドとHTML5/Canvasを使用してコンパスを実装します。iOSシミュレータではコンパスの向きをエミュレートすることができませんが、RippleではHeadingスライドを左右に動かすことで、コンパスが向いている方向を自在に調整・再現が可能です。

Configパネル

Configパネルでは、ルートディレクトリに配置されているconfig.xmlの内容を表示します。config.xmlは、Configuration Documentに則り記述します。

Eventsパネル

Eventsパネルでは、特定のイベントを発火させることができます。

選択できるイベントの種類は次のとおりです。

なお、PhoneGapで対応しているイベントはdevicereadyの1種類のみです。ほかのイベントを選択して[Fire Event]をクリックしても、各イベントハンドラで捕捉することはできません。

Settingsパネル

Settingsパネルでは、Rippleの設定を変更します。

Rippleカスタマイズの実際

カスタマイズ例は次のとおりです。SettingsパネルでThemesを[light]に変更し、パネルの位置を調整しました。画面右側には、Chromeのデベロッパーツールを表示しています。

イベントの発火をはじめ、Cordova APIの機能を完全に再現できない箇所もありますが、画面デザインやGPS、加速度、コンパスを直感的に操作できるのは大きな魅力でしょう。また、Webサーバのエイリアスが設定されているパスにPhoneGapプロジェクトを作成するようにすれば、iOSシミュレータやAndroidエミュレータ、実機へのインストールの時間コストも少なくてすみます。

最終的にはすべて実機でテストしたいところですが、それまでのモック作成や画面デザイン調整はRipple Emulator。JavaScriptの機能テストはiOSシミュレータ/Androidエミュレータ + weinre。最終テストは各実機でといったように、使い分けができるようになっておくと効率の良い開発が可能になります。

HTML5でモバイル向けのアプリを開発する場合、各デバイスやベンダごとに方言が存在し、微調整に大変な労力が発生します。決定打といえる解決手段ではありませんが、Ripple Emulatorやweinreといった開発ツールなどを駆使して、機能実装・修正→確認のサイクルを少しでも短くし、開発を進めていきたいところです。

なお、weinreのインストール・操作方法については「もっと使おうPhoneGap／Cordova 2.0.0 第3回 weinreを使ったiOS／Androidアプリの動作検証」をご参照ください。