ホームページ制作のことなら、ホームページ制作マッチング

Mozilla FIrefoxやGoogle Chromeは独立したアプリケーションなので同時に起動すればよいですが、バージョン違いのInternet Explorerではそうはいきません。結局正確なチェックをするためにはPCをまたがなければならないことだってありますし、もしチェック中にズレが発覚した場合はブラウズ環境からコーディング環境に切り替えなければならないのです。切り替え終わったときにはどこにエラーがあったかわからなくなってしまうこともしばしばです。
そんなつらい症状に効く！ということでAdobe Dreamweaver CS5を通してBrowser Labsも試してみましたが、クラウド上のサービスの速度が若干遅く、テスト結果の表示までやや時間を要するのがボトルネックに感じられて結局は今まで通り、テスト環境をまたにかけて右往左往しています。

なお、Expression Web 4は各種パートナー企業が提供している「Microsoft Website Spark プログラム」に加入すると無償で利用できます。 25人以下の制作会社であればウェブ経由で申し込みをすることで３年間の利用契約ができるとのことです。

本プログラムにはExpression Web 4を含むMicrosoft Expression Studio製品や、Visual Studio 2010、Windows Web Server 2008/ R2、SQL Server 2008 Web Editionといったサーバ製品のサブスクリプションも含まれています。 アプリケーション開発の環境整備など、なにげに面倒な作業がこれで一括してクリアできそうです。

マイクロソフト株式会社
エバンジェリスト春日井氏

詳しい話は自分で調べてくださいね。ということになったのですが、百聞は一見にしかずだ！とマイクロソフト株式会社に行ってエバンジェリストの春日井さんを発見。SuperPreview について説明してもらいました。

春日井さん曰く、このアプリケーションSuperPreviewは、ローカルのほかにもクラウドサービス越しにWebkitといった各種レンダリングエンジンにアクセスして結果を取ってくるそうです。複数種類のブラウザのレンダリング結果が１つの画面で試せるところまではAdobe Browser Labsと同じですが、ここはやはりMS製品。 歴代のInternet Explorerのレンダリングエンジンはローカルでサポートしており、レンダリングを正確に再現します。

SuperPreviewを起動すると出てくるブラウザ一覧。Expression Web 4からはShift+F12でSuperPreviewを呼び出して、コーディング中のWebページを送り込む。IEシリーズはすべてローカルの環境で使えるので処理が速い。ちなみに”クラウドのMS”と言われるだけに、オンライン上のレンダリングエンジンの処理もかなり速い。
(図1)

ファイルのURIを入力する箇所に運用中のURLを入れると、公開中のサイトの各種ブラウザへの対応もチェックできる。Twitterはプログレッシブ・エンハンスメント実装を採用しており使用ブラウザのCSS対応状況によって外観が変わる。IE6ではCSS3に対応していないのでボックス部分の角丸が反映されないことが分かる。
(図2)

要素ごとにエラーを確認

矢野が気に入ったのはレンダリング結果が、レイアウトをHTMLの要素ごとに選択できる状態に保たれているところです。問題を生じている要素の特定は、ブラウザ別にアドオンで入れている各種デバックツールなどでできることといっても複数のブラウザのレンダリング結果として確認しながら特定できるのは便利です。また、特定したあとはすぐに編集作業に切り替えられるのも楽です。
そのほか、画面上をピクセル寸法で採寸する機能があったり、オニオンスキン機能でズレの状況を把握するような細かい機能も持っています。PhotoshopデータをSuperPreview機能の中で表示できるびっくり機能もありました。通常デザインのカンプデータはPSDファイルになっているものですが、元のデザインデータを実装結果と並べてチェックし、ずれている箇所を見つける作業に使えます。

たとえサーバー上のデータであってもHTML要素の構成が確認できる。ずれている部分をこの画面で発見できる
(図3)

定規ツールを使ってピクセル寸法をはかっているところ。一見ズレがないように見えるこのレイアウトも、細かい部分（キャプチャーでは画面の右端）はズレを含んでいる
(図4)

オニオンスキン機能。選択中のレンダリング結果を重ねてずれの距離を確認する
(図5)

メニューバーから「スナップショット」を選ぶと、Expression Webのオーサリング環境にSuperPreviewの機能を取り込んでみせることが可能だ
(図6)

基本的に制作環境はWindowsを使っている。という制作会社ならExpression Web 4とSuperPreviewを使うことでかなり生産効率が上げられるでしょう。

しかし、そもそもレンダリングチェックが必要なのはマイクロソフトのブラウザがバージョンにより相当異なる挙動をするから..とも正直なところ考えてしまいますが、ことCSSのサポートについて考えみれば、どのブラウザでも微妙な違いは現れてしまうもの。ウェブ制作者にとってレンダリングチェックはこの先ずっとつきあわなければならない工程であることは間違いないでしょう（たとえInternet Explorer 6がなくなろうとも、ですね）。手軽に済ませるにこしたことはありません。個人的にはモバイル環境のエミュレーションもできれば完璧ですので、そのうち対応してもらえるとうれしいです。といってもPC向けサイトのレンダリングチェック専用アプリとしても十分活躍しますから、矢野は今後SuperPreviewで最終確認と微調整をものすごい勢いでこなします。そして今よりもうちょっと自由時間を多めにして、ブラウザテストの疲れをいやす、何かをしたいですね。机の上を片付けるとか。

なお、前述の通りSuperPreviewは「Microsoft Website Spark」に登録することで無料で利用することができます。 WebsiteSparkへの登録も無料ですので、コチラから登録のうえ利用してみてはいかがでしょうか？
矢野もWebsiteSparkへの登録作業をすべく（http://www.microsoft.com/web/websitespark/)からアクセスしてパートナー企業を選び制作会社登録を完了してから、Web開発者支援（WebsiteSpark）に登録するまではWindows Live IDがあれば（なければ取得すれば）よいため比較的スムーズにできました。ただそこからExpression 4が含まれるExpression Studio 4 Web Professional をダウンロードしてインストールするまでが少しややこしいです。それから、SuperPreview の中でローカル ブラウザーだけでなくSafari などの環境を検証する際には、ベータとして提供されている「SuperPreview オンラインサービス」という機能を有効にする必要がありました（ここは初めから有効にしておいてくれたらなぁ。と思いました）。わかりにくかった個所については以下にマイクロソフトさんに補足してもらいましたので、ご参照ください。