2012年3月2日金曜日

スマートフォンのリモートデバッグ

Galaxy Nexusを買ったぞー!!
というわけで,これでiPhone 4S/3GSとWindows PhoneとAndroid4.0が揃い,スマートフォン対応は俺に任せろー!状態になりつつある私です。
しかし,ここまで色々持ってても自分が興味あるのはウェブですので,スマートフォン用ウェブサイトを作る上で必要になるリモートデバッグツールについて今回は書きます。

リモートデバッグとは,デスクトップ上でスマートフォンのブラウザに出ている画面をデバッグする手法です。リモートデバッガはいくつかあります。
私が紹介するよりも,こちらにわかりやすくまとめられているものがあるのでkanasanさんのを見た方が圧倒的にいいと思います。私もkanasanさんのプレゼンではじめて知った口です。
http://www.kanasansoft.com/weblab/2011/07/html5toka19.html

で,Android4.0といえば,Chrome betaがリリースされましたね。
このChrome betaには,リモートデバッグ機能がついています。
今回は,Chrome betaのリモートデバッグについてと,weinreとの違いを自分が使ったレベルで浅いのですが,紹介します。

Chrome betaのリモートデバッグ使い方
まず,Chrome betaのリモートデバッグ方法です。
http://code.google.com/chrome/mobile/docs/debugging.html
ここ見れば書いてあります!
で終わるのも何なんで,Android SDKを入れるところからから書いて行きます。
環境はMac OS X Lionです
  1. Android SDKをhttp://developer.android.com/sdk/index.htmlからダウンロードする
  2. zipを展開して,任意のフォルダへ。
  3. open SDK_HOME/tools/android または ./SDK_HOME/tools/android で Android SDK Managerを起動(*図1)
  4. しばらくするとAndroid SDK Platform-toolsが出てくるのでインストール(このとき自分はなぜか何回も失敗したがリトライし続けたら入りました)
  5. SDK_HOMEにplatform-toolsというディレクトリができるので,SDK_HOME/platform-toolsをPATHに登録する。
図1 Android SDK Manager

ここまでが,リモートデバッグを利用する最小限のSDKの準備です。
次にAndroid側の準備です。
  1. [設定]>[開発者向けオプション]>[USBデバッグ]をオンにする
  2. [Chrome betaの設定]>[USBウェブデバッグを有効化]をオンにする
  3. SDKの入っているマシンにAndroidをUSB接続する
これでAndroid側は準備完了。
最後にマシン側を設定します。
  1. adb devicesをターミナル上で実行してみて,自分のAndroidが接続されていることを確認する
  2. adb forward tcp:9222 localabstract:chrome_devtools_remote
  3. マシン側のChromeでlocalhost:9222を開く
  4. Android側で開いているタブの一覧が表示されるので,マシン側でデバッグするタブを選択する
  5. 見慣れたdeveloper toolsが開くので,あとはよしなに!
以上でChrome betaのリモートデバッグは可能になります。
ちなみに動画でも利用方法が紹介されています。

weinreの使いはじめ方
次に,weinreです。
こちらはkanasanさんのスライドにも紹介されているリモートデバッグツールで,Webkit系ブラウザならどれでもリモートデバッグが可能になります。
Chrome betaと同じように使い方を書いておきます。環境はこちらもMac OS X Lionです。
  1. http://phonegap.github.com/weinre/から本体をダウンロードする(macはbinaryが配布されています)
  2. 落としてきたbinaryを起動します
  3. 図2みたいなのが起動します
  4. Server Home Pageのタブを開いて,Exampleのscriptタグをコピーして,デバッグ対象のhtmlに書き足します
  5. デバッグ対象をスマートフォンから見ると,weinreのビューでデバッグすることができます
図2 weinreの起動画面
違うサーバのデバッグを行いたいときは,ホームディレクトリに.weinreディレクトリができているので,そこにserver.propertiesを作って,
boundHost: hostname
httpPort: portnum
と書いて起動すれば,起動画面のServer Propertiesが書き変わるはずです。
変えた場合,スクリプトを取得する先も変わるので書き換えましょう。


両者の違いについて
ここまでは前置きで,ここからが本題です。
weinreとChrome betaの違いについてです。
恐らく,Chrome betaはあくまでChrome betaだけで,weinreはそれ以外用だ,という意見が大半でしょう。
その通りです。
ただChrome betaをデバッグする上でどちらがいいかという土俵で考えれば,今のところ圧倒的に標準のリモートデバッグツールの方が優れています。

優れている点を箇条書きでおこすと
  • 早い
  • Resourcesがちゃんと機能している
  • scriptタブがちゃんとある
  • console.logが問題なく動く
  • ようはデスクトップChromeと同じように使うことができる
最後が一番重要ですね。
weinreは,見た目はdevtoolsと同じなのですが,結構違います。
weinreの悪い点は少なくとも4つほど見つけました。

CSSの問題
スタイルの解釈順番が違ったりして,実際に表示するときに利用しているスタイルとは別のものがハイライトされ,実際に表示しているものをストライクするときがあります。
実例がこのスクリーンショットです。


スクリーンショットのように,一番強いのは#main-content .headerですから,font-weightはnormalになります。
しかしweinreは,font-weight: normalをストライクして,font-weight: boldが機能しているようにdevtools上では表示します。
また,ベンダープレフィックスを無視したり,margin: 5px 0px;をなぜかmargin: 0px;と表示したりします。
左のiPhoneの絵は,iOS Simulatorです。

スタイル破壊の問題
マウスがオーバした部分を青くしたりするのをHTMLとCSSでやっているわけですが
画面サイズでサイズを変更するようなJavaScriptが動いている場合,その青いエリアでサイズが変わってしまい,うまく動かないことがあります。
まぁこれはHTMLの書き方が悪いとも言えなくもないですが。

consoleオブジェクトの問題
他にも,問題があったのはJavaScriptのconsoleオブジェクトです。
weinreはwindow.consoleを置き換えて,スマートフォンのブラウザコンソールではなく,wenire上のコンソールに表示するという方法をとっているのですが,window.onload時はなぜか置き換えが終了していないため,onload時のconsole出力ができません。
weinreのメーリングリストには,onload前やonloadのハンドラーでconsole表示したいときは,setTimeout(func, 3000)をやるとできるよ!って書いてありました。

iframeが表示されない
さらに,iframe先は表示されません。
そりゃスクリプトで無理矢理DOM情報を取り出しているので,iframe内も取れてしまったら怖いです。当然の結果です。


いくつか悪い点あげたり,Chrome リモートデバッグの方がいいじゃんって言ったりしてますが,もちろんweinreのいい点もあります。
  • 端末側に設定がいらない
  • インストールするものはweinreだけ,htmlにタグを1つ追加するだけ
  • 端末側の制限が少ない
実際に運用する場合,まだまだAndroid4.0は普及していないし,普及したところで標準ブラウザがChromeになるわけでもないので,Chromeのリモートデバッグを主に使って行くということはしばらくないと思います。
しかし,きっとこういうの出してくるってことはGoogleさんもAndroid向けのChromeで何かやろうとされていることだろうし,OSが4.0なら1度はやってみるといいかもしれません。

Chrome beta for AndroidについてのFAQを翻訳してくれている方がいるのでこちらも見ると色々わかると思います。

そういえばOperaもリモートデバッグできるんだったな... そっちは試していません。
あとiOS Simulatorは,Xcodeのバージョン上げるとXcodeが/Applicationに入るので,
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.appに移動しています。めんどくさいですね。


最後に!
weinreは........... IE Mobileでは動きませんでした!!!!!!!
引き続き,IE Mobileでも使えるものを探します!!!たぶん!!!
proxy系のリモートデバッガならいけそうですね。
ちなみに,firefoxも動かなかったです。Operaはちょっと動きました。
Windows Phoneを落ち担当に使いたいだけです。ごめんなさい。

0 件のコメント:

コメントを投稿