もっと使おうPhoneGap/Cordova 2.0.0

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

この記事を読むのに必要な時間:およそ 3 分

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を利用したアプリケーションの開発について紹介していきたいと思います。

著者プロフィール

富田宏昭(とみだひろあき)

株式会社キクミミでFileMaker/SQLiteを使ったWebアプリ開発に従事しながら,オープンソースソフトウェアのハウツー記事執筆を行う。趣味は横乗り系スポーツ,美術館めぐり,高速ジャンクション鑑賞。