これでできる! クロスブラウザJavaScript入門

第2回 完全版:ブラウザとデバッグ環境

この記事を読むのに必要な時間:およそ 7 分

こんにちは,太田です。前回はクロスブラウザの入口として,各ブラウザの特徴をまとめつつ,実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である,各ブラウザ環境の構築について解説したいと思います。

前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも,一苦労ではすみません。なるべく少ないマシンで,各バージョンをインストールして,さらにデバッグするための環境作りについて紹介します。なお,Safari以外はWindows環境を想定しています。さらに,特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。

各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に,Safari/Chrome(WebKit)のWeb Inspector,OperaのDragonfly,IEの開発者ツールと,それぞれDOMやオブジェクトの中身を解析したり,JavaScriptのステップ実行ができたりと,重要な機能をサポートしています。ウェブ開発者にとってはいずれも必須機能ばかりです。それぞれ長所短所もありますので,是非この機会に試していただければと思います。

IEのデバッグ環境

IEはWindowsにデフォルトでインストールされていますが,それゆえに各バージョンを用意するのに苦労します。IE 6・IE 7・IE 8と3つのバージョンでの確認が必要ですが,基本的に1つのマシンに1つのバージョンしかインストールすることができません。マシンリソースに余裕があるなら,仮想化で複数のWindowsを同時に動かしてバージョンを使い分けることが可能ですが,デバッグも行う開発環境としては少々使いにくさがあります。

仮想化以外の選択肢として,非公式で複数のバージョンを同時にインストールできるようにしたアプリケーションが公開されているので,それらを利用するという方法があります。もちろん,非公式なので完全にオリジナルと同じ動作をする保証はありませんし,セキュリティパッチの適用にも問題がありますので利用は自己責任となります。ただ,開発時や個人で使うレベルではそれほど問題ないでしょう。

Internet Explorer Collection

IEのデバッグ環境としては,IETesterなどが有名ですが,今回はInternet Explorer Collectionを紹介します。なぜIETesterではないのかといいますと,IETesterは各バージョンを並べて表示できるので,表示確認には便利ですが,JavaScriptについては少々挙動に不安があるためです。実際,IETesterでは特定のキーのイベントが取れなかったり,エラーが起きているのを捕まえ損ねたりといった問題が確認されています(2010年3月時点)。

Internet Explorer CollectionはIE Testerと異なり,それぞれのIEが独立して動作します。本来のIEに近い形で操作することができ,原因の切り分けもしやすくなっています。もちろん,Internet Explorer Collectionにも問題がないとは限りませんから,可能であれば正規版の検証環境も用意するべきです。繰り返しになりますが,開発時の環境として必要十分と言えます。

さて,Internet Explorer CollectionはIE 1.0からIE 8.0まで同時にインストールできますが,実際にインストールするのはIE 6.0以上でよいでしょう。また,IE 6はService Pack 2以前の6.00.2800.1106と,Service Pack 2が適用された6.00.2900.2180の2つのバージョンをインストールすることができますが,基本的には6.00.2900だけで十分です。厳密には,Service Pack 3を適用するとIE 6のJScriptのバージョンが5.6から5.7に変わるので,SP3適用バージョンがほしいところではあります。JScriptのバージョンについては後述します。

IEの開発者ツール

続いて,IEの開発者ツールを簡単に紹介します。開発者ツールを使えばIE 8でJavaScriptのステップ実行やプロファイリングなどができます。ローカル変数の中身をチェックすることができますし,console.logでデバッグコンソールに変数の中身を出力することもできます。スクリプトのなかにalertを入れてデバッグするといった古典的な方法はもはや必要ありません。詳しい解説はInternet Explorer 8 の開発者ツールの概要開発者ツール : スクリプト デバッグの概要」,開発者ツールを使用したスクリプトのプロファイリングを参照してください。

図1 開発者ツールでのデバッグ

図1 開発者ツールでのデバッグ

しかし,この開発者ツールはIE 8用ですので,上記のInternet Explorer CollectionでインストールしたIEでは動作しません。ただ,もしVisual Studio(筆者は2008 Professional Editionで確認)がインストールされていれば,JavaScriptのエラーが発生した際にVisual StudioのデバッガでJavaScriptのデバッグを行うことが可能です。無料のExpress Editionsでは不可能なためハードルは高いですが,90日間のVisual Studio 2008 評価版もありますので,どうしてもという際は利用されてみるとよいでしょう。

IE on Virtual PC

IEでの正規の検証環境として,Virtual PC用イメージがMicrosoftから公式に公開されています。こちらでIEの各バージョンを動かすことができます。まず,Virtual PC 2007をダウンロード・インストールし,Download details: IE App Compat VHDから,検証したいバージョンのイメージファイルをダウンロードできます。

ただし,このWindowsは使用期限が設定されており,2010年3月時点で2010年4月1日までとなっています。しかし,使用期限はこれまで都度延長されているのでおそらくは当分の間は使い続けることができると思われます(未確認ですが,2010年3月時点で導入すると4月以降に再度セットアップが必要になるようです)。

なお,このWindowsは英語版であり,初期状態では日本語を表示することができません。とはいえ,導入したバージョンに対応するOSのセットアップ用ディスクがあれば,日本語を表示させることができます。以下,IE6-XP-SP3の導入・日本語表示手順をざっくりと解説します。

まず,上記URLからダウンロードしたIE6-XP-SP3.exeファイルを実行(rarファイルの場合は解凍)してvhdファイルを適当なフォルダに保存します。Virtual PCを起動して「バーチャルマシンの作成」をウィザードに従って行い,「既存のバーチャルハードディスク」を選択して「バーチャルハードディスクの場所」に保存したvhdファイルを指定します。これでセットアップは完了です。

Virtual PCから起動したら,Control Panelから,Regional and Language Optionsを開き,LanguagesタブのInstall files for East Asian languagesにチェックを入れます。OKするとXPのインストールディスクを求められるので,ディスクの入ったドライブを指定してください。ただ,インストール途中でkbd106n.dllがないというエラーになるかもしれません。その場合,ディスクのi386フォルダ内にDRIVER.CABというファイルがあり,その中にkbd106n.dllが含まれているはずです。ちなみにCABはWindows標準の圧縮形式なので,そのまま開くことができます。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/

コメント

コメントの記入