はじめに
クロスブラウザテストをしっかり実施していますか？2016年1月12日には、IE8までのサポートが終了し、現在のところサポート対象になっている最も古いIEはIE9になりました。最近はIEのシェアが減ってきたとはいえ、まだまだ古いIEへの対応をやめられないのが現状ではないでしょうか。
また、Google ChromeやFirefox、AndroidやiOSなどのモバイルブラウザなどブラウザの種類は増え続けています。このため、クロスブラウザテストの重要性はどんどん高まってきています。
この記事では、テストを担当しているエンジニアの方のために、VirtualBoxを使って無料でIEのクロスブラウザテストをする方法をお伝えします。無料で誰にでもできますので、ぜひ一度お試しください。
VirtualBoxってなに？
公式ページ：https://www.virtualbox.org/
VirtualBoxとは、ホスト型に分類される仮想化ソフトウェアです。OSの上で、メモリの許す限りいくつでも別のOSを起動してアプリケーションのように扱うことができます。つまり、Windows上でLinuxを起動したり、Mac上でWindowsを起動したりできるというわけです。オープンソースで、オラクルにより無償で提供されていますので、誰でも無料で使うことができます。完全に物理環境を再現できるわけではありませんが、おおむね同じような動作環境になります。バリバリの3Dアプリケーションなどでもなければ問題ないでしょう。
なぜVirtualBoxをつかうの？
なぜVirtualBoxを使うのかというと、マイクロソフトがIEでテストしてもらうために、無償でVirtualBox用の仮想マシンイメージを提供しているからです。他にも、Hyper-V用やVMware用のイメージも公開されていますが、無料で使いやすいVirtualBoxが一番おすすめです。また、VirtualBoxはVagrantやDockerなどでも広く利用されているため、他のことにも流用できるというメリットもあります。
クロスブラウザテストの対象にするべきブラウザ
現在のところ、クロスブラウザテストをするべきブラウザは以下の通りです。
- IE9～IE11
- Edge最新版
- Google Chrome最新版
- Mozilla Firefox最新版
- Androidブラウザ（Chrome）
- iOSブラウザ（Safari）
プロジェクトの要件によっては、対象のブラウザを増やしたり、逆に減らしたりすることもあるでしょう。対応ブラウザはあいまいにせずにしっかりと決めておくべきです。
この記事では、この内IE9～IE11、Edgeを対象にしています。ChromeやFirefoxは普通にインストールできますし、AndroidやiOSはエミュレーターや実機を使ってテストできます。
VirtualBoxをインストールする
それでは、さっそくVirtualBoxをインストールしていきましょう。下記のページから「本体のインストーラー」と「Extension Pack」をダウンロードして、本体から順番にインストールしてください。なお、インストール中にネットワーク接続が一時的に切断されます。注意してください。
ダウンロードページ：https://www.virtualbox.org/wiki/Downloads
仮想マシンイメージをダウンロードする
次に、下記のページから仮想マシンイメージをダウンロードしましょう。IEはひとつのWindowsにつきひとつしかインストールできませんので、ブラウザテストを行うべきIEのバージョンごとに仮想マシンイメージをダウンロードする必要があります。ご自分に必要なものをダウンロードしてください。なお、プラットフォームはVirtualBoxを選択します。
ダウンロードページ：https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
仮想マシンイメージはZip圧縮されていますが、非常に大きい（3GBを超える）ためダウンロードには時間がかかります。
仮想マシンをインポートする
仮想マシンイメージがダウンロードできたら、ファイルを展開しましょう。すると、OVAという拡張子のファイルがひとつ入っています。VirtualBoxのインストール時に、この拡張子に対して関連付けが行われています。ダブルクリックすると、下記のようにインポートダイアログが表示されますので、インポートをクリックしてください。関連付けがうまく行われていない方は、VirtuaBoxを指定してファイルを開きましょう。
無事インポートされれば、下記のように仮想マシンとして表示されます。
起動してみる
それでは、さっそく仮想マシンを選択して起動してみましょう。リストから今しがたインポートした仮想マシンを選択して、上の起動ボタンをクリックすればOKです。下記のように、まるでアプリケーションのようにWindowsがウィンドウで起動します。これこそ本当の”Windows”ですね。
後は、通常のWindowsと同じようにIEを起動してサイトをテストできます。もちろん、お好みのソフトをインストールすることも可能です。なお、このWindowsは英語版なので標準では日本語入力ができません。キーボードレイアウトを日本語に変更して、日本語IMEに設定するとより快適に使えます。
まとめ
IEやEdgeはOSに統合されていて、クロスブラウザテストをする上で非常に厄介な存在です。VirtualBoxを使えばひとつのマシンで複数のバージョンのIEを扱えるようになるため、テストがはかどりますね。メモリを多く積んであれば、同時に起動することもできます。もし同時に起動できない場合は、仮想マシンの状態を保存しておくと、次回起動時も素早く起動できるようになるでしょう。Seleniumを使ってテストを自動化するのもおすすめです。テストを適切に実施して、ブラウザ毎の不具合を未然に発見していきましょう。あなたのサイトはどんなブラウザでも動作しますか？
本ブログは、Git / Subversionのクラウド型ホスティングサービス「tracpath(トラックパス)」を提供している株式会社オープングルーヴが運営しています。
エンタープライズ向け Git / Subversion 導入や DevOps による開発の効率化を検討している法人様必見！
「tracpath(トラックパス)」は、企業内の情報システム部門や、ソフトウェア開発・アプリケーション開発チームに対して、開発の効率化を支援し、品質向上を実現します。
さらに、システム運用の効率化・自動化支援サービスも提供しています。
”つくる情熱を支えるサービス”を提供し、まるで専属のインフラエンジニアのように、あなたのチームを支えていきます。
