もっと使おうPhoneGap/Cordova 2.0.0

第3回weinreを使ったiOS/Androidアプリの動作検証

前回はiOSプロジェクトを作成・動作確認を行うまでの手順と、ターミナルからiOSシミュレータを起動できるようにするまでの手順を紹介しました。今回は、weinreを使ったアプリケーションのデバッグについて紹介していきたいと思います。

weinreとは

weinre(WEb INspector REmote)とは、名前のとおり、リモートでWebインスペクタをサポートするツールです。iOSデバイスやAndroidデバイス上でWebアプリケーションやPhoneGapアプリケーションを動作させている際に、リモートからWebインスペクタを使用できます。

対象となるWebアプリケーションの修正は、weinreのJavaScriptをロードする1文を追加するだけです。

Webインスペクタはリードオンリーではなく、書き込みが可能です。リモートのWebインスペクタ上でDOMやCSSを操作すると、デバイス上の表示がリアルタイムに変わります。通常のWebインスペクタ同様、Resources/Network/Timeline/Consoleパネルが付属しており、デザイナ/開発者にとって強力なデバッグツールの1つです。

PhoneGap 2.0.0リリース時に、weinreはnode.jsに移行されました。現在はnpm経由でインストールを行います。

weinreを利用するための動作環境は、次のとおりです。

対象動作環境

  • Android Browser appication
  • iOS Mobile Safari application
  • PhoneGap/Cordova
  • other

Webインスペクタを動作させるWebブラウザ

  • Google Chrome
  • Apple Safari
  • 最近のWebKitベースWebブラウザ

Mac OS XおよびWindows環境下での、weinreのインストールから使い方までを紹介していきます。

Hello, weinre!(Mac OS X / iOS)

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

  • OS: Mac OS X 10.8(Mountain Lion)
  • iOS: iPhone 5.1.0(Simulator)
  • Webブラウザ: Safari 6.0(8536.25)

node.jsのインストール

node.jsをインストールしていない場合は、nodejs.orgにアクセスし、最新のパッケージ(node-v0.8.6.pkg)をダウンロードします。執筆時点での最新バージョンは v.0.8.6 です。

nodejs.org
nodejs.org

ダウンロードしたパッケージを展開し、インストールします。この作業で、Node.jsが/usr/local/bin/nodeに、npmが/usr/local/bin/npmにインストールされます。

インストール完了
インストール完了

weinreのインストール・起動

npmを使用してweinreをインストールします。依存関係のため、coffee-script, express, npot, underscoreが同時にインストールされます。

% npm install weinre

weinreのインストールが完了したら、さっそく起動してみましょう。ターミナルで次のコマンドを実行し、weinreを起動します。

% ./node_modules/weinre
2012-08-14T10:47:48.589Z weinre: starting server at http://localhost:8080

ログの出力通りに、http://localhost:8080にアクセスして動作を確認してみましょう。

weinre sever home
weinre sever home

これでweinreを使用する準備が整いました。weinreでデバッグしたいプロジェクトにおいて、HTMLに次のスクリプトをロードする1文を追加します。

<script src="http://localhost:8080/target/target-script-min.js#(任意の文字列)"></script>

#以降の文字列は、アプリケーションごとに固有で使用されるIDのようなものです。リモートからアクセスする際に必要となります。

なお、外部リソースをロードするため、PhoneGapプロジェクトのデフォルトの設定ではwhitelist rejectionが発生して動作しません。Xcodeで該当のプロジェクトを開き、ResourcesのCordova.plistの、ExternalHostsに追記を行う必要があります。

ExternalHostsにlocalhostを追加
ExternalHostsにlocalhostを追加

プロジェクトをビルドし、iPhoneシミュレータや実機上でアプリケーションを起動します。この状態で、Webブラウザでhttp://localhost:8080/client/#〈任意の文字列〉 にアクセスします。

iOSシミュレータ上で起動しているアプリとweinreを接続
iOSシミュレータ上で起動しているアプリとweinreを接続

Targetsに表示されているリンクをクリックして接続を行います。あとは通常のWebインスペクタと同じような操作で、DOMツリーやスタイルシート・ストレージの確認、JavaScriptのデバッグが行えます。

DOMやCSSの書き換えも可能。DOM選択時は、iPhoneシミュレータ/実機側で選択部分がハイライトされる
DOMやCSSの書き換えも可能。DOM選択時は、iPhoneシミュレータ/実機側で選択部分がハイライトされる
コンソールでCordova Connection/Device APIの返り値を確認。いちいちビルド→起動を繰り返さなくてよいので、使用したいAPIがどのような構造や値になっているかを確認する際に役立つ
コンソールでCordova Connection/Device APIの返り値を確認。いちいちビルド→起動を繰り返さなくてよいので、使用したいAPIがどのような構造や値になっているかを確認する際に役立つ

Hello, weinre!(Windows / Android)

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

  • OS: Windows 7 Professional (32bit)
  • Android: 4.1 (Emulator)
  • Webブラウザ: Google Chrome 21.0.1180.77m

node.jsのインストール

node.jsをインストールしていない場合は、nodejs.orgにアクセスし、最新のパッケージ(node-v0.8.6-x86.msi)をダウンロードします。執筆時点での最新バージョンは v.0.8.6 です。

ダウンロードしたインストーラを起動し、node.jsをインストールします。

Node.jsインストール完了
Node.jsインストール完了

weinreのインストール・起動

node.jsをインストールすると、コマンドプロンプトでnpmが使用できるようになります。npmを使用して、weinreをインストールします。依存関係のため、coffee-script, express, npot, underscoreが同時にインストールされます。

> npm install weinre
コマンドプロンプトでweinreをインストール
コマンドプロンプトでweinreをインストール

weinreのインストールが完了したら、起動してみましょう。コマンドプロンプトで次のコマンドを実行し、weinreを起動します。なお、筆者の環境の場合、デフォルトのlocalhostのままだとAndroidアプリケーションからうまく接続できなかったため、--boundHostでIPアドレスを指定しました。起動時の引数については、後ほど紹介します。

> node_modules\.bin\weinre.cmd --boundHost (IPアドレス)
2012-08-14T16:41:01.217Z weinre: starting server at http://(IPアドレス):8080
weinre起動
weinre起動

weinreを使用する準備が整いました。あとはweinreでデバッグしたいAndroidプロジェクトにおいて、HTMLに次のスクリプトをロードする1文を追加します。

<script src="http://(IPアドレス):8080/target/target-script-min.js#(任意の文字列)"></script>

iOSのプロジェクトと同様、外部リソースをロードするため、PhoneGapプロジェクトのデフォルトの設定ではwhitelist rejectionエラーが発生して動作しません。Androidプロジェクトの場合は、res/xml/config.xmlをテキストエディタで開き、<access origin="" />を追加します。

res/xml/config.xmlをテキストエディタで開き、赤枠部分を追加
res/xml/config.xmlをテキストエディタで開き、赤枠部分を追加

プロジェクトをビルドし、Androidエミュレータでアプリケーションを起動します。起動を確認後、Webブラウザでhttp://(IPアドレス):8080/client/#〈任意の文字列〉 にアクセスします。動作は基本的にiOS版で紹介した内容と変わりないので、省略させていただきます。

AndroidのPhoneGapアプリケーションをweinreを使ってデバッグ
AndroidのPhoneGapアプリケーションをweinreを使ってデバッグ

オンザフライで実機上の画面レイアウトを編集できるので、デザインの微調整を簡単に行うことができます。タイムラインやネットワークパネルで表示速度のボトルネックを調査する際にも活用でき、使い方次第では強力なツールになるでしょう。PhoneGapアプリケーション開発時に、ぜひ使いこなせるようになっておきたいプロダクトの1つです。

weinreサーバ起動時の引数について

weinreサーバ起動時に引数を渡すことで、ポート番号やタイムアウトまでの時間をカスタマイズすることができます。対応している引数とデフォルト値は次のとおりです。

引数 内容 デフォルト値
--httpPort [portNumber] HTTPサーバのポート番号を変更します 8080
--boundHost [hostname | ip address | -all-] ホスト名を変更します。デフォルトのlocalhostを使用している場合、他のマシンからweinreサーバにアクセスすることはできません localhost
--verbose [true | false] 標準出力に動作ログを出力します false
--debug [true | false] 標準出力により詳細な動作ログを出力します false
--deathTimeout [seconds] タイムアウトになるまでの時間を設定します 3

セキュリティリスクについて

weinreは現在、平文のHTTPで情報をやり取りします。認証も行わないため、Node.jsサーバがローカルマシンでない場合は、何らかのアクセス制御を別に行う必要があります。

誰でも接続できる状態のNode.js/weinreサーバに、実機でPhoneGapアプリケーションのテストを行っていた場合、悪意あるユーザがCordova Contacts APIで連絡先データを奪取するという最悪のケースも考えられます。可能な限り、自分の管理化のNode.js/weinreサーバで検証を行うべきです。

社内イントラネットにNode.js/weinreサーバが立っており、外部ネットワークからweinreサーバに接続したい場合は、sshでトンネルを張ってから利用すると良いでしょう。

次回からは、File APIを利用したアプリケーションの開発について紹介していきたいと思います。

おすすめ記事

記事・ニュース一覧