色々なブラウザでの見栄えを確認できるサイト
2007/08/05 Sun [Edit]
Web デザイナーやブログテンプレートの制作者は自分のデザイン&コーディングしたものが、より多くのブラウザで同じように表示されているかを常に意識しながら制作していることと思います。お疲れさまです。
今日はそんな制作者の方達にちょっとだけ便利なサイトをご紹介。
古い IE や Mac のブラウザ、Linux のブラウザなどでどのように表示されているかを、スクリーンショットで撮影してくれるサイトです。つまり色々なブラウザでの見栄えを確認できるサイトがありました。
それでは海外のサイトなので一応簡単な説明を交えつつご紹介していきたいと思います。
まずは Browsershots にアクセスします。時間帯などでアクセスし辛い時があるので、ページが読込まれない時は別の時間帯などにアクセスしてみてください。
無事アクセスできると下のキャプチャーのページが開きます。

そうしましたら、1の長いテキストボックスに他のブラウザで確認したいページの URL を入力し、2の「Start」ボタンをクリックします。
※URL は http:// や https:// を付けた形で入力します。

すると上のキャプチャーのページへ移動するので、1の四角枠の中から確認したいブラウザを選択します。デフォルトでは全てのブラウザにチェックが入っていますが、チェック項目(ブラウザの数)が多いいとスクリーンショットの撮影にかなりの時間を要するので、必要のないブラウザのチェックは外したほうが良いです。
次に2の四角枠の中にあるプルダウンから、確認したいページの設定を行います。特に指定する必要がない場合、もしくは良く分からない場合は Don't Care でもスクリーンショットで撮影してくれます。設定すると言うより、細かい指定ができると言ったほうが良いのかも知れません。
上段の左から右、下段の左から右の順に簡単に説明すると、Screen resolution は確認したいモニターの解像度が指定でき、JavaScript は確認したいジャバスクリプトのバージョン、Macromedia Flash は確認したいフラッシュプレイヤーのバージョン、Color depth は確認したい色深度などが指定でき、Java と Media plugins は確認したいページでそれに関わるコンテンツがある場合などに適宜で設定可能です。
設定が済んだら3の四角枠の中にあるプルダウン Maximum wait から最大待ち時間を選択します。上で沢山のブラウザでの確認にチェックを残した方は最大の 4hour を選択しておくと良いです。30minute だと全部のスクリーンショットを見られない可能性があります。
『4時間も待つの!?』と驚いた方へ補足すると、私の場合4ブラウザの確認で1時間くらいかかりました。しかし、後述しますが、スクリーンショットが表示されるページをブックマークしておけば良いので、ブラウザを閉じてもパソコンを終了しても OK です。写真屋さんにフィルムを預ける感じでしょうか、頃合いを見計らって再度訪問するとスクリーンショットが撮影されています。
全ての選択が済んだら4の「Submit Jobs」ボタンをクリックします。

上のキャプチャーは既にそれぞれのブラウザで表示されたページをスクリーンショット撮影された状態ですが、前ページで設定した直後にはスクリーンショットのサムネイルはありません。
しばらくすると、このページで確認したいページのスクリーンショットが確認できるようになるのでブックマーク(お気に入りに追加)して待ちましょう。また、スクリーンショットのサムネイルをクリックすると 100% の大きさで確認できます。しかしあまり縦に長いページだと途中でスクリーンショットが切れます。
ちなみに撮影されたスクリーンショットはしばらくの間ブックマークしたページで確認できるので、前日に仕込んで翌日確認なんてことも可能です。それでは皆さんもお試しを。
Windows をお使いの方への補足
もし、しっかりと古いバージョンの IE などで確認しながら制作したい場合は evolt.org - Browser Archiveで、旧バージョンのスタンドアローンの IE が入手可能です。ダウンロードした Zip ファイルを解凍し、作成されたフォルダの中にある IEXPLORER.EXE を起動すると新旧の IE を共存できます。
※IE の共存は自己責任で宜しくお願いします。
また、IE5 と 5.5 では Cookie の扱いに問題が生じるようですがパッチで解決できます。パッチは実行せず CAB 形式に対応した解凍ソフトで展開し、作成されたファイルから wininet.dll を IE5 もしくは IE5.5 のフォルダの中にコピーで解決します。
●ご注意
スタンドアローンの IE は自サイトの確認だけに使用するのがセキュリティー的に無難です。
Comments
Track Backs
TB URL




