クロスブラウザに対応した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」(重ねて表示)を追加
• スクリーンショット取得時にディレイを設定できるように
• スクリーンショットをローカルに保存できるように

同サービスは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キーを押しながらドラッグすることで、つかんで移動させることもできる。