デザインワークショップSuplog

2017.03.01

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

Pocket

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

 

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

 

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

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

 

VartualBoxでIEを動作させる

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

 

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

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

 

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

 

仮想環境のVartualBoxを使ってMacでIEブラウザチェック

 

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

 

dws0301-009

 

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

 

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

 

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

 

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

 

 

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

 

【参考サイト】

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

 

 

Pocket

>>記事一覧に戻る