mixi engineer blog

*** 引っ越しました。最新の情報はこちら → https://medium.com/mixi-developers *** ミクシィ・グループで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い

こんにちは、寝過ごして長野まで行きそうになったソーシャルクライアント開発のtakimoこと瀧本です。

先週弊社数名がアメリカで行われていたVelocity 2011 - O'Reilly Conferencesに参加しました。
そこではモバイル端末のテストやパフォーマンスについての講演やLTがあったようです。
自分もお土産話を色々聞きたいので詳しくは誰かが書いてくれるはず...です。

その中で気になったプロダクトがあったので紹介したいと思います。

weinre - Web Inspector Remote

weinreはFirebug(Firefox)やWebKitのWebInspectorのようなデバッグ機能をリモートで提供してくれるプロダクトです。

iPhoneやAndroid(2.1以上)には一応コンソール機能のようなものがありますが
  • 基本的には出力だけ
  • ソフトキーボードでデバッグ用コードの入力/文字列だけの表示なので評価が難しい...
  • iPhoneでは出力された文字列が全部表示されない(alertなら全文出るがいけてない)
  • 狭い画面で何行にも渡るデバッグ情報を見なければいけない
といった出力専用コンソールの機能しかありません。 weinreを使えば長いデバッグ情報は手元の画面で見えるし、デバッグコードの実行もコンソールから実行できるようになります。

使い道としてはスマートフォンのデバッグもそうですが、遠隔な場所でのぺアプロ・レビューをする時にも効果がありそうです。

対応しているプラットフォーム

  • Supported
Android 2.2 Browser application
Android 2.2 w/PhoneGap 0.9.2
iOS 4.2.x Mobile Safari application
BlackBerry v6.x simulator
webOS 2.x (unspecified version)
  • Not supported
iOS 3.1.3 or earlier
webOS 1.45 or earlier

どうやって動いているの?

大雑把に仕組みを見てみると、
  • XMLHttpRequestでWebSocketっぽくクライアントとサーバーで通信する
  • サーバー側で入力されたコードをクライアント側で処理(eval)する
  • クライアント側のDOM関係のイベントをhookしてDOMの変化をサーバーに伝える
  • クライアント側のconsoleオブジェクトをリモート用のconsoleオブジェクトへとoverrideする
ような事をしているみたいです。

どうやって使えばいいのか

公式サイトに載っていますがさらっと。

1) インストール
http://pmuellr.github.com/weinre/Installing.html
記載されているgithubのURLに行き、zipをダウンロードし解凍します。
macで動かす場合は実行ファイルがbuildされているので、実行すればすぐに使えるようになります。

2) 実行 やることは2つ。デバッグ用の画面を提供するサーバーを立ち上げる、そのサーバーと通信するためのJavaScriptを開発しているWebサービスに埋め込みます。
  • サーバーの起動 先ほど解凍したディレクトリに入り、下記のコードを実行します。 java -jar weinre.jar -httpPort 8081 もしlocalhost以外の開発環境の場合は以下のようなオプションをつけてみてください java -jar weinre.jar -httpPort 8081 -boundHost hoge.local
  • JavaScriptの埋め込み 上記で起動したサーバーにアクセスすると埋め込むためのJavaScriptが発行されているのでそれをサービスに埋め込みます。 Bookmarkletとして実行もできるので、埋め込まなくても実行可能です。
3) デバッグ サーバーにアクセスした画面にあるdebug client user interfaceという項目がデバッグ画面のURLになります。 使い方はWebKitのInspectorとほぼ同じですので
  • bodyのbackgroundの色を変える
  • alertをだしてみる
  • サービス側のconsole.logで出力される文字列がデバッグ画面に表示される
遊んでみるといいと思います。

デバッグ環境が豊かになっていくことはとてもすばらしいことだと思うので引き続き目を光らせていきたいと思います。