もっと使おうPhoneGap/Cordova 2.0.0

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

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

前回は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がどのような構造や値になっているかを確認する際に役立つ

著者プロフィール

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

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

コメント

コメントの記入