モダンブラウザーでの表示チェックサービス「BrowserLab」
今月号の記事
数年前までInternet Explorerが独占していたブラウザー市場は、Safari、Firefox、Chromeの登場により、今や群雄割拠の時代となりました。それにともないWebサイトの検証作業も負担が増しています。その検証作業の補助ツールとして活用していただきたいのが、アドビが提供するクロスブラウザーテストサービス「BrowserLab」です。BrowserLabでは、モダンブラウザーにおけるサイトの見た目を比較することができます。本記事では、このBrowserLabの機能と使い方を解説します。
モダンブラウザーの新旧バージョンをサポート
BrowserLabは、Internet Explorer、Firefox、Safari、Chromeといったモダンブラウザーでサイトを表示した際の見た目をチェックできるサービスです。
Adobe Developer Connectionサイトの表示結果。
左がWindows XP＋Internet Explorer 8.0、右がMac OS X＋Firefox 3.5
ブラウザーによっては、1台のマシンに複数のバージョンをインストールできなかったり、古いバージョンが配布されていなかったりするだけに、幅広いバージョンでチェックできる環境を持つのは大変です。しかし、BrowserLabでは以下のように、ブラウザーの最新バージョンだけでなく、Internet Explorer 6.0など古いバージョンもサポートしています。なお、最新サポート状況は、右上にあるメニュー項目の「Help→About」にて確認できます。
Windows XP
Firefox 2.0（2.0.0.18）
Firefox 3.0（3.0.13）
Firefox 3.05（3.5.3）
Internet Explorer 6.0（6.0.3790.3959）
Internet Explorer 7.0（7.0.5730）
Internet Explorer 8.0（8.0.6001.18702）
Chrome 3.0（3.0.195.27）
Mac OS X
Safari 3.0（3.2.3）
Safari 4.0（4.0.3）
Firefox 2.0（2.0.0.18）
Firefox 3.0（3.0.13）
Firefox 3.05（3.5.3）
BrowserLabの使い方は非常にシンプルです。チェックしたいサイトのURLを入力するだけです。入力すると、あらかじめ指定したブラウザーでの表示結果の画面キャプチャを自動生成します（後述するように、比較するブラウザーの種類をカスタマイズできます）。
BrowserLabでは、この生成した画面キャプチャを使って表示することになります。そのため、BrowserLabで表示したページ上のリンクをクリックして移動したり、インタラクティブ要素を試したりすることはできません。別なページを比較する場合は、その都度、該当URLを入力して画面キャプチャを生成する必要があります。
BrowserLabの機能
BrowserLabでは、以下のように様々な機能を用意しています。
Browser Sets：ブラウザーセットの登録・編集
前述のように、多くのモダンブラウザーとOSの組み合わせをサポートしていますが、チェックするブラウザーのセット内容をカスタマイズし、その内容を登録することができます。
ここで選択されているセットの画面キャプチャが生成されます
View：ビューモードの切り替え
生成した画面キャプチャの表示方法としては、「1-up View」「2-up View」「Onion Skin」の3つのモードがあります。なお、一度に比較できるのは2画面までです。
2-up Viewで表示したところ。2つの画面は連動してスクロールします。
なお、スクロールバーを使わずとも、アドビ製品と同様に
「Control（Windows）／Command（Mac OS）＋マウス」で移動させることもできます
Onion Skinで表示したところ。上部のスライダーバーを使って、透明度を調整できます
ルーラー／ガイド／Registration（基点の設定）
Viewプルダウンメニューにある「Show Rulers」を選ぶと、ルーラーを表示できます。このルーラーの単位はピクセルです。また、ルーラー部分からドラッグ操作でガイドを引くこともできます。
2-up Viewの場合、片方の画面でガイドを引くと、もう片方の画面の同じピクセルの位置にガイドが自動で引かれます
また、ページの特定部位を比較しやすいように、表示基点(0, 0)の位置を移動させることができます。
Registration（基点の設定）を解除するには、左隅（赤線部分）をダブルクリックします
Delay：遅延時間の設定
Flashアニメーションを埋め込んでいるサイトなどでは、ページが表示されてしばらく経過した後の状態を比較したい場合もあります。その場合は、Delay部分で遅延時間を設定します。最大10秒まで遅らせることが可能です。
Hot Keys：ショートカットキー操作
Viewモードの選択やルーラー表示／非表示、拡大縮小などといった操作は、キーボードのショートカットキーで操作できるようになっています。キーの一覧は、Hot Keysをクリックすると表示されます。
以上が、BrowserLabが提供する機能です。これからもユーザーのニーズを捉えてバージョンアップさせていきたいと考えています。ぜひ、試していただき、リクエストなどがあれば、BrowserLabフォーラムに投稿してください。
