ウェブサイトを作成する上で必ず行われるブラウザチェックですが、Macで制作している場合にはIEのブラウザチェックをどうするか、という問題が出てきます。Macの場合はBootCampを使ってWindowsをインストールすることも可能ですが、少し面倒だったりコストがかかったりします。

今回はもっと手軽にVartualBoxという仮想化アプリケーションを使ってWindowsを動かし、IEでのブラウザチェックを行ってみたいと思います。

VartualBoxとWindowsイメージファイルの準備

まずはVartualBoxをPCにインストールするところから始まります。公式サイトのダウンロードページ（https://www.virtualbox.org/wiki/Downloads）にアクセスします。OS Xのダウンロードリンクからインストーラーをダウンロードします。

インストーラーを開き、ウィンドウに表示される指示にしたがって進めていくとVartualBoxのインストールが完了します。

VartualBoxのインストールが完了すると、次はWindowsのイメージファイルを揃えていきます。このイメージファイルをVartualBoxへインポートすることによってVartualBox内でWindowsが使えるようになります。Windowsイメージファイルのダウンロードは公式の仮想マシン※旧modern.IE ダウンロードページ（https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/）よりダウンロードできます。セレクトボックスからIEのバージョンを選択し、プラットフォームにはVartualBoxを選択します。ダウンロードボタンをクリックすると、それぞれバージョンごとのIEのOVAファイル（拡張子：.ova）が入手できます。

VartualBoxでIEを動作させる

インストールしたVartualBoxを起動させ、先ほどダウンロードしてきたWindowsのイメージファイル（OVAファイル）をダブルクリックで開きます。

自動的にVartualBoxへのインポートが開始します。

インポートが終了するとVartualBoxのアプリケーションパネル内にあるリストに追加されますのでクリックして起動させます。

新しいウィンドウで仮想環境が表示され、Windowsが起動し該当するIEを使用できるようになります。

VartualBoxでローカルファイルをIEで確認する

サーバー上にあるものはURLを入力することで確認することができますが、ローカルにあるファイルとなるとまた勝手が違ってきます。公開前のテストなどに使用するケースなどが考えられるかと思います。そこでMAMPで構築したローカル環境をIEで確認できるように設定することでローカルにあるファイルもIEで確認できるようにしていきます。

まずはMAMPでローカル環境を構築し、htdocフォルダにファイルを入れMAMPが立ち上がっている状態に準備します。そしてVartualBoxも立ち上げます。Windowsを起動させスタートメニューからエディタ（Notepadなど）を管理者権限で開きます。

Cドライブ内、WindowsSystem32driversetcにあるhostsファイルをエディタで開きます。

ローカルホストのIPとパスを追記し上書き保存します。

IEでURLを入力するとMAMPで構築したローカル環境にアクセスできファイルの確認が可能になります。

Edgeの場合も同じような形でhostsファイルを編集することで閲覧可能です。アドレスが「http://localhost」で表示されない場合は「http://10.0.2.2」と入力することで表示されるようになります。

いかがでしたでしょうか、今回紹介した一通りの環境が揃っていればとりあえずはIEのブラウザチェックに困ることはないかと思います。WindowsのPCが手元になかったり揃えるのが難しい場合はとても便利ですので是非お試しください。

【参考サイト】

VirtualBoxのWindows/IEからMacのローカル環境(MAMP)にvirtual hostでアクセスする方法