Google+ もご覧ください
ユーザーアイコン

デバッグツールレビュー

Ripple UI - スマートフォン独自の情報をエミュレートしてくれるGoogle Chrome機能拡張のモバイルシミュレータ

Ripple UI - スマートフォン独自の情報をエミュレートしてくれるGoogle Chrome機能拡張のモバイルシミュレータ

スマートフォン特有の機能をテストしようと思うと実機を使わざるを得ません。エミュレータを使えば位置情報を送ったり、シェイクジェスチャーを送信することはできますが、細かなカスタマイズは難しいでしょう。

それがアプリではなくWebサイトであるなら尚更です。そこで使ってみたいのがRipple UIになります。Google Chrome機能拡張として動作し、スマートフォンの機能をシミュレートして送信できるソフトウェアです。

インストール

インストールは簡単で、Chrome Storeへいってダウンロード&インストールするだけです。

Chrome ウェブストア - Ripple Emulator (Beta)

使い方

まずはテストしたいWebサイトに行きます。そのサイトにいったら、右上にあるRipple UIのアイコンをクリックしてメニューを呼び出します。

メニューを表示
メニューを表示

Enableを押して有効にすると、ウィンドウ全体がRipple UIの画面になります。ここではどの環境としてエミュレートするか指定します。モバイルWebサイトの他、PhoneGap/Apache Cordovaとしても実行できるのがユニークです。

環境を指定
環境を指定

例えばモバイルWebとして実行した結果がこちらになります。特にデバイスの指定はなく、WVGAの大きさで表示しているだけです。

実行結果
実行結果

デバイスは自由に変更できます。iPhone 5やBlackberryなど様々なデバイスの表示が選択できます。

iPhone 5の表示設定
iPhone 5の表示設定

機能

ジャイロ/加速度センサーのエミュレートができます。小さなデバイス画像をドラッグして動かすと、その情報がエミュレータに送信されます。

ジャイロ/加速度センサー
ジャイロ/加速度センサー

位置情報を送れます。地図から選択することもできますし、GPXファイルを指定することで刻々と移動する位置情報を送信し続けることもできます。

地図による位置情報送信
地図による位置情報送信

地図は移動して位置情報を変更できます。ただし検索がないので移動がちょっと面倒なのが辛いところです。

位置情報を日本に変更
位置情報を日本に変更

テーマを変更できます。黒と白が用意されています。

テーマ変更
テーマ変更

面白い機能としてクロスドメインプロキシがあります。PhoneGapなどでJSONデータを使っている場合、ここで指定したURLを経由してデータの取得ができるようになります。

クロスドメインプロキシ
クロスドメインプロキシ

向きは縦、横指定可能です。

向き変更
向き変更

ジャイロ/加速度センサーを試す

位置情報はスマートフォンでなくとも取得できますので、それほどエミュレートは難しくないでしょう。問題はジャイロ/加速度センサーです。そこでさっそく試してみました。

通常のWebサイト
通常のWebサイト

もちろんWebサイト側が機能を提供していなければ意味がありません。そこで、○で公開されているジャイロセンサーを使ったブロック崩しを試してみました。

動きは相当酷いですが、これは画面を録画しているためです。実際にはもっと機敏に反応しますので、もう少しは続きます。しかしこれで十分ジャイロ/加速度センサーが使えるのが分かるかと思います。

まとめ

PhoneGapの開発においてもWeb技術でできるとしながらもスマートフォン特有の機能を呼び出していたりしてWebブラウザだけでは作れなかったりします。Ripple UIを使うことでそういった足りない機能をエミュレートしてくれれば、Google Chromeだけでさくさく開発が進められそうです。

加速度センサーまで使ったWebアプリケーション開発はかなり高度だと思われますが、位置情報の利用はよくある話です。各種スマートフォンでの表示の確認や細かな作り込みにおいてこれまでのWeb開発手法が使える便利なソフトウェアではないでしょうか。

Chrome ウェブストア - Ripple Emulator (Beta)

blackberry/Ripple-UI

Opensource

連載バックナンバー

記事をリクエストする

関連記事

コメント