スマートフォン最適化に便利な【weinre】を使ってみた

この記事はアピリッツの技術ブログ「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」って言ってました…

是非、利用して快適なスマートフォン最適化サイト開発をお送りください！