目次
この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
お久しぶりのwryyyです。
今流行？のスマートフォン最適化サイトを作る際、
スマートフォン実機でサイトを確認したら、デザインが崩れてる！！！となった場合、
皆様はどうしているでしょうか？
・実機だと、FireFoxのFirebugなんて便利なもの使えないし…
・気合を入れて修正しては確認して…ってのもめんどくせー！！！
ってなった時にはもう大変です。
さて、そんな時にオススメするのが今回ご紹介する
weinre
です！
さて、ではまず【weinre】とは何かから入って行きましょう。
weinreとは、簡単に行ってしまえばスマートフォンで閲覧しているページの
・HTML DOM
・CSS
・Javascript
等をPCから確認できるようにしちゃおうっていうツールです。
では、実際にインストールと使用方法について説明していきます。
※ 私のPC環境がMACのため、MACの手順で記載させて頂きます
1. ダウンロード
まずは https://github.com/phonegap/weinre/archives/master ここから
weinre-jar-1.5.0.zip
(mac OSX 10.6 Snow Leoperd 以上の方は weinre-mac-1.5.0.zip)
をダウンロードします。
※ weinre-mac-1.5.0.zip の中身は weinre をパッケージ化したものが入ってます。
2. 解凍
weinre-jar-1.5.0.zip（weinre-mac-1.5.0.zip） を解凍しましょう。
3. 設定ファイルの作成
自分のユーザのホームディレクトリ配下 「.weinre」というディレクトリを作成し、
.weinre 配下にserver.properties というファイルを作成します。
% pwd
/Users/username
% mkdir .weinre
% vim .weinre/server.properties
.weinre/server.properties の中身は以下のようになります。
% cat .weinre/server.properties
boundHost: -all-
httpPort: 8081
※ 設定の詳細は http://phonegap.github.com/weinre/Running.html を御覧ください。
4. 実行
・weinre-jar-1.5.0.zip を解凍した場合
% export JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/1.6.0/Home
% java -jar weinre-jar/weinre.jar --boundHost 192.168.3.181
上記コマンドでweinreが起動されます。
※ weinre-jar を実行するには Java 6.0 が必要なので、
事前にexport してJava のバージョンを変えておく。
・weinre-mac-1.5.0.zipを解凍した場合
解凍したディレクトリに出来ている、weinre をダブルクリック
5. 確認
ブラウザから http://[IPアドレス]:[ポート番号] に接続します。
（アドレスは –boundHost 、ポート番号は server.properties で設定したもの）
すると、weinreのページが閲覧できるはずです。
閲覧できたら、「debug client user interface」のリンクをクリックしておいてください。
リンクを押すとchromeのデベロッパーツールのようなページが出ます。
Targets が none になっているはずです。
次はスマートフォンの操作です。
スマートフォンでブラウザから適当なサイト(https://www.google.co.jp/ とか）にアクセスしてください。
アクセスしたら「bookmarklet url in a textarea」と書かれているテキストフィールド
に入力されているJavaScript をなんとかコピーし、
スマートフォンブラウザのURL入力欄に貼りつけて実行してください。
（事前にスマートフォンで http://[IPアドレス]:[ポート番号] に接続し、テキストフィールドに入力されているJavaScript をコピーしてブックマークに登録しておくと次回からブックマークをクリックするだけで利用できるので便利です！）
貼りつけて実行しましたら、元にアクセスしていたページに戻るはずです。
ここで、さきほどPCでクリックしておいたページを見てみましょう。
Targets が緑色で
「192.168.2.83 [channel: 1200079761 id: anonymous] – https://www.google.co.jp/ 」
と表示され、Clients も緑色で表示されるようになりました！
では、上部タブの Elements をクリックしてみてください。
Chrome のデベロッパーツールのように HTML の DOM が表示されたでしょうか。
Chrome のデベロッパーツールのように、DOM 上にマウスを合わせたら、
なんとスマートフォンの画面もその DOM に当たる部分が薄い灰色っぽく反転します！
これでいろいろテストすることが可能になります。
※ いろいろ試した結果、どうもページ遷移は対応していないようで
ページ遷移する毎に weinre の JavaScript を実行させないとダメないようです。
以上がweinreの解説と実行方法になります！
※ 上記実行手順等はコチラを参考にさせていただきました。
※※ 上記サイトによると、呼び方は 「ワイナリー」 もしくは 「ワイナー」 らしいです。
weinreを説明しているyoutubeの外人さんは「ウィ…ナー？HAHAHA」って言ってました…
是非、利用して快適なスマートフォン最適化サイト開発をお送りください！
