Online debug tool、debug.phonegap.com

PhoneGap User Group が日本に立ち上がり、注目を増している PhoneGap ですが、この数ヶ月は毎月マイナーバージョンが上がる活発な動きを見せています。ちなみに、現時点の最新版は 2.0 です。

PhoneGap 2.0 の解説もしたいところですが、今回は簡単にオンラインデバッグツールの http://debug.phonegap.com をご紹介します。このツールを使うと、スマホやタブレットなどの実機に対して、PC上のブラウザからリモートで Web Inspection が可能になります。Adobe Shadow でも採用している WeInRe(読み方は、ワイナリーとか、ワインリーとか。Web Inspector Remote から命名。)

使い方はとても簡単です。

1. Webkit ベースのブラウザ(Chrome推奨)で http://debug.phonegap.com にアクセスする

2. 以下の Step 1 のテキストフォームに適当な文字列を入力する

ここでは、kskstudio と入力しています。最初は「anonymous」となっていると思います。自分の好きな文字列を入力してください。入力すると、自動的に Step 2 / Step 3 にある URL の末尾に反映されます。

3. Step 2 にある <script> タグを自分の PhoneGap アプリに使う HTML ファイル(index.html)の <head> タグ内に追記する

4. PhoneGap でアプリ化し、デバッグしたい実機にインストール & 起動しておく

5. Step 3 にある URL をクリックする

Webkit ベースのブラウザ以外で URL をクリックすると以下のようなメッセージが出るかもしれません。

ちなみに、上記メッセージは Firefox 14.0.1 で開いた時のものです。OK を押しても、多少表示が崩れるだけで何となく使えましたが、やはり Chrome などがいいでしょう。

6. コネクションを確認する

最初は以下のようにデバイスとのコネクションができてない表示かもしれません。

暫くすると、以下のようにデバイスとのコネクションが確認できます。

いつまでも DEVICES が「none」の場合は、実機でアプリケーションが起動しているかを確認してください。アプリケーションの再起動も試してください。

7. Elements タブから Web Inspection を開始する

Web Inspection の解説は省略しますが、PC上のブラウザで DOM を触ってみると、コネクションが確立している実機上で対象のエリアが反応するのが分かると思います。CSSの調整や文字列の変更など Web Inspector で出来る事がリモートで出来る事が分かります。
スマホやタブレットなどの実機上での検証は面倒な場合が多いので、PhoneGap に限らずこのようなリモート検証手法は今後重要になってくるかと思います。

広告

One Response to Online debug tool、debug.phonegap.com

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。