クロスブラウザに対応したWebサイトの見た目を確認する作業は言わずもがな、面倒である。こまかなバージョンをふくめた場合、主要なWebブラウザだけでも数種類あり、さらに実行されるOSによっても微妙に異なってくる。

試験環境をひととおり用意するだけでも一苦労の上に、ひとつひとつチェックしていく作業も大変だ。本稿ではそのような悩みを一気に解決する便利サービス「Adobe BrowserLab」を紹介しよう。

「Adobe BrowserLab」がアップデート! 更新点は?

Adobe Labsが提供する「Adobe BrowserLab」が14日(米国時間)にアップデートされた。BrowserLabはさまざまなWebブラウザのレンダリング結果を表示・比較するWebサービス。Webサイト・Webアプリケーションの見た目はWebブラウザやそのバージョン、実行されるOSによって異なってくるが、同サービスを使えば簡単に見た目の比較をおこなえる(マイコミジャーナルでのニュース記事「Adobe BrowserLab - IE・Firefox・Safariのレンダリング結果表示」)。

おもな更新点と、サポートされているWebブラウザは次のとおり。

  • あたらしいWebブラウザ環境のサポート (別表にて太字にて掲載)
  • ルーラーガイド機能の追加
  • パンツール(レンダリング結果の画像をつかんでスクロールさせる)機能の追加
  • ビューモードに「Onion Skin」(重ねて表示)を追加
  • スクリーンショット取得時にディレイを設定できるように
  • スクリーンショットをローカルに保存できるように
Webブラウザ バージョン OS
Firefox 2.0, 3,0, 3.5 Windows XP, Mac OS X
Internet Explorer 6.x, 7,x, 8.x Windows XP
Safari 3.x 4.x Mac OS X
Chrome 3.0 Windows XP

同サービスはLimited Free Preview版として公開され、利用できるユーザは制限されている。また利用の際はFlash Player 10とAdobe IDが必要になるため、あらかじめ準備しておこう。それでは今回の更新点をふくめたBrowserLabの使い方を紹介しよう。

Hello, BrowserLab!

ここでの動作環境は次のとおり。

  • OS: Mac OS X 10.6.2
  • Webブラウザ: Safari 4.0.4

BrowserLabにアクセスし、Adobe IDとパスワードを入力してログインする。規約に同意し、利用開始だ。

BrowserLabにログイン。画面中央上のテキストボックスに表示をチェックしたいURIを入力する

画面中央上のテキストボックスに、表示をチェックしたいURIを入力してEnterキーを押す。

URIを入力するとロードがはじまり、何秒か待つと選択した環境下でのレンダリング結果が表示される

URIを入力すると選択した環境下でのスクリーンショットが画像で表示される。取得した画像は縦横スクロールが可能だ。またCtrl/Commandキーを押しながらドラッグすることで、つかんで移動させることもできる。