はじめに

MacでWebサイトの開発を行っていると、「IEやEdgeでうまく表示できません」などの報告が上がってくるかと思います。

IE・Edgeの環境で確認や修正を行うための手段として、Windowsマシンを買うなり、MacにBootcampを入れるなりが考えられますが、
表示の確認や修正だけの場合であればそこまでコストをかけたくないというのがほとんどだと思います。

そんな中、Microsoftが実はInternet ExplorerやMicrosoft Edgeの仮想マシンを用意してくれているため、それを使用してローカルに仮想環境を準備することができます。（※1）

そこで今回は、自分のMacにVagrant(Virtual Box)で仮想環境を用意して、実際にIE11を動かすところまで行いたいと思います。

※1 2019年3月時点では、以下の環境の仮想マシンを使用できます。

InternetExplorer 8 (Windows7)
InternetExplorer 9 (Windows7)
InternetExplorer 10 (Windows7)
InternetExplorer 11 (Windows7)
InternetExplorer 11 (Windows8.1)
MicrosoftEdge (Windows10)

環境

macOS Mojave(10.14.3)
VirtualBox
Vagrant

VirtualBox

以下からmacOS版をダウンロード。
https://www.virtualbox.org/wiki/Downloads

pkgファイルを開いて、指示に従いインストール。

Vagrant

以下からmacOS版をダウンロード。
https://www.vagrantup.com/downloads.html

pkgファイルを開いて、指示に従いインストール。

Vagrant用の仮想マシンを取得

以下にアクセス
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
Virtual machineのプルダウンからWindows7 IE11用の仮想マシンである、「IE11 on Win7 (x86)」を選択
Select platformのプルダウンから「Vagrant」を選択
「DOWNLOAD .ZIP >」ボタンをクリックして、仮想マシンをダウンロード
ダウンロードしたzipファイルを解凍
私の環境(macOS Mojave)ではfinder上からは解凍できず、コマンドラインからunzipコマンドを使うと解凍できました。

terminal

$ unzip IE11.Win7.Vagrant.zip

コマンドラインからも解凍できない場合は、「The Unarchiver」などのツールをインストールして解凍を行ってください。

完了すると、 IE11 - Win7.boxというファイルを確認できるかと思います。

※ フォームの下部に以下のような注意書きがありますが、気にすべきは90日で有効期限が切れるということでしょうか。

ダウンロードした仮想マシンをVagrantで起動

１. ダウンロードしたboxを追加
　--name オプションでboxの名称を指定する必要があります。今回は「win7_ie11」とします。

terminal

$ vagrant box add IE11\ -\ Win7.box --name win7_ie11

２. 適当なディレクトリを用意し、vagrant initコマンドで初期化とVagrantfileの作成を行う

terminal

$ mkdir ie11
$ cd ie11
$ vagrant init

３. Vagrantfileを編集

Vagrantfile

Vagrant.configure("2") do |config|
  # vagrant box addで追加したbox名を指定
  config.vm.box = "win7_ie11"

  # GUIの使用とメモリの設定
  config.vm.provider "virtualbox" do |vb|
    vb.gui = true
    vb.memory = "2048"
  end

  # ゲストOSを指定
  config.vm.guest = "windows"

  # SSHの設定
  config.ssh.username = "IEUser"
  config.ssh.password = "Passw0rd!"
  config.ssh.insert_key = false
  config.ssh.shell = 'sh -l'
end

SSHのユーザーとパスワードは、仮想マシンをダウンロードしたサイトにある、View installation instructionsのリンク先を参照。

４. 仮想マシンを起動

terminal

$ vagrant up

起動が無事成功すると、Windows7のデスクトップ画面が表示されます！

IEも問題なく開けます！

※ vagrant upを実行後、terminalでタイムアウトのエラーが表示されている場合は、Vagrantfileにタイムアウトの設定を追加すると表示されなくなります。
時間は任意に指定してください。

Vagrantfile

config.vm.boot_timeout = 600

まとめ

Microsoftが用意してくれている仮想マシンを使うことで、簡単にWindows×IEの環境を用意することができました！

動作はもっさりしてしまうかもしれませんが、
最終的な成果物をWindows環境でも確認する場合など、限定的な用途においては十分な環境なのではないかと思います。

Mac × VagrantでWindows7 × IE11の環境をつくる！

はじめに

環境

VirtualBox

Vagrant

Vagrant用の仮想マシンを取得

ダウンロードした仮想マシンをVagrantで起動

まとめ