モバイル検証ツール 「Mobile Perf Bookmarklet」 の使い方

Google のパフォーマンス技術者 Steve Sauders（スティーブ・サウダース）が、モバイル向けの ブックマークレットを発表しました。このツールでは現在、HTML、CSS、DOM、CSSスプライトなどをチェックすることができます。

モバイルサイトを制作していると、たまに実機でソースがどうなっているのかな どチェックをしたいことが多々ありますが、そんな時に便利なツールです。

下記がそのMobile Perf Bookmarkletページです。

http://stevesouders.com/mobileperf/mobileperfbkm.php

該当ページでも、ステップバイステップで手順を紹介しているが改めて日本語で紹介しよう。

まず最初におこなうことは、上記のページのブックマークレットのページにいきます。
そして、下記のJavaScriptのURLをコピーします。

JavaScriptソース

javascript:(function(){var%20jselem=document.createElement('SCRIPT');jselem.type='text/javascript';jselem.src='http://stevesouders.com/mobileperf/mobileperfbkm.js';document.getElementsByTagName('body')[0].appendChild(jselem);})();

2番目の手順は、１のコピーをした状態で取りあえず該当のページをそのままブックマークします。URLは「http://stevesouders.com/mobileperf/mobileperfbkm.php」のままですが、このURLは後ほど変更します。

3番目の手順は、2でブックマークしたURLを1でコピーしたJavaScriptのコードに置き換えます。

これだけで、簡単にインストールして利用できます。

利用方法

1、自分の検証したいページをモバイル端末で開く

2、ブックマークから「Mobile Perf Bookmarklet」を起動させる。起動させると下記のようなボックスが現れます。

3、それぞれのツールを利用して検証をする。下記はFirebug Liteを起動時の画面です。

感想
利用してみた感想としてiPhone4で利用をしたのだが「Firebug Lite」の動作が非常に重たいと感じた。iPhone3GSでは少し厳しいかもしれない。Firebugのパネルは横に大きいので iPhoneをランドスケープモードにしようと思ったが、おもたすぎて途中で固まってしまった。

今回は、iPhone でインストールしたが、他のAndroid端末でも同様に動くはずだ。機会があれば Android 端末での検証してみたい。
また、それぞれのツールの使い方についても検証してブログを書いてみたい。