前回は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 です。

ダウンロードしたパッケージを展開し、インストールします。この作業で、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を使用する準備が整いました。weinreでデバッグしたいプロジェクトにおいて、HTMLに次のスクリプトをロードする1文を追加します。

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

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

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

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

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

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をインストールします。

weinreのインストール・起動

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

> npm install 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でデバッグしたい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="" />を追加します。

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

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

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

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

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

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

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

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

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