Browsershots

HTML CSS

先のログ「W3C CSS Validation Service」で、「CSSによる見た目は実際のブラウザーで」と書いた。
自分の手持ちの機械は、以下。

  • WindowsXP(SP3); IE7, Safari3, FireFox3, Chrome1
  • WindowsXP(SP2); IE6, FireFox3(2から上げてしまって失敗)
  • OSX 10.5.6; Safari3,FireFox3
  • Ubuntu-ja 8.10; FireFox2

（何故、vistaを持っていないかというと。。。）

そこそこ持っている方だとは思うが、古いバージョンのOS、ブラウザーを残しておくのは面倒だし、色んなOSを揃えておくのはお金がかかる。

そんな悩みを解決しよう！というBrowsershots（ブラウザーショッツ）面白いサイトがある（Browsershotsへのリンクはこちら）。

特定のURLを、ネットワーク上にある（色々なOSの）サーバー上でレンダリングさせて、そのスクリーンショットを見せてくれる。
Browsershotsのトップページは以下。
OSやブラウザー（バージョン）を選び、トップページにURLを入力して、Submitボタンを押せばいい。
OSとブラウザー（バージョン）は予めチェックされているが、IE以外は最新バージョンにチェックが入っていることが多いので、適宜チェックを入れる。


この際は、以下のようにディスプレイや深度、ブラウザーオプションを指定できる。


Submitをすると、次の画面に遷移して、スクリーンショットができたらサムネイルに加わってくる（画面の更新が必要）。


「何分後に出来上がるかな」というのは、上の画面に「Queue estimate」として表示される。
その隣にある「Details」のリンクを開くと、下の画面に遷移し、個々に進捗がわかるようになっている。
uploadとなったらスナップショットがみえる。

一回のSubmitは「Request Group」として管理されていて、30分でExpire（失効）するようになっている。
Expireするとスナップショットもなくなってしまうので、必要に応じて、上画面の「Extendボタン」で時間を延長し、全てuploadステータスとなったら、上の画面からスナップショットを「Download」する（zipに丸まって落ちる）。


サムネイルをダブルクリックすると、スクリーンショットを確認することができる。
以下は、最初のチェックボックスで、「OSX＋Safari3.2」を選んだ結果。


これを見ると「明朝体」になっている。
CSSにfont-familyを記述していなかったと気づき、以下をCSSに追加した。

	font-family: Tahoma,sans-serif,monospace;

validatorでは、「足りないもの」が見つけづらいが、このサービスだとそれができる。


このサービスで難をいえば、「日本語」が出ない場合があること。
特に、Windowsの場合は日本語fontのないサーバーでスナップショットが取られることがしばしばある。
（どうしても取りたければ、Windowsだけを選択して、何回がトライするのがよさそう）

そういえば、トップページで言語の選択ができるが、ハングル語はあるが、日本語がない。
最近、しばしばこういうケースを見かける。
自分も含めて、日本のエンジニアは頑張らないといけない！！と痛感。

以下の画面は、XP＋IE5.5のスナップショット。

先のログ「W3C CSS Validation Service」で、課題となった、

html {
	overflow-y: scroll;
}

が問題なく表示されていることがわかる。


また、このサイトのところどころにある以下のリンク(XHTML|CSS)をクリックすると、W3CのHTML検証サービス（strict）、CSS検証サービス（レベル2.1）をつかって、URLに指定したHTMLをチェックしてくれる。