MacでWindowsを立ち上げてIEの表示確認をしてみる

はじめに

Webサービスを開発していると表示確認をすることがあります。
Macで開発しているとChromeやFirefox、Safari等のブラウザでの表示確認は行いますが、IEやEdgeでの表示確認は疎かになったりします。
その原因としては、手元にWindows環境がないこと。
しかし、IEやEdgeを使用するユーザは少なくないので、表示が崩れていたらユーザビリティに影響が出てしまいます。
こうした状況を踏まえて、手軽にIEやEdgeの表示確認が可能な環境を用意しておいた方がいいだろうなと思い、この記事を書いています。

ツール

• Mac
• VirtualBox
• Vagrant

インストール

まずは必要なツールをインストールしていきます。

VirtualBox

こちらからダウンロードしてインストールします。
https://www.virtualbox.org/wiki/Downloads

Vagrant

こちらからダウンロードしてインストールします。
https://www.vagrantup.com/downloads.html

WindowsOS

こちらからダウンロードします。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

お好きなマシンを選択してください。
この記事では"MSEdge on Win10 (x64) Stable (17.17134)"を選択します。

今回はプラットフォームとして"vagrant"を選択します。

zipファイルをダウンロードして、ファイルを開く際は公式ページで紹介されている

こちらの解凍ツールを使用します。
https://theunarchiver.com/

解凍して得られたファイルを扱いやすいようにリネームします。

// リネーム前
MSEdge - Win10.box

// リネーム後
MSEdgeWin10.box

そして、boxを登録します。

$ vagrant box add path/to/MSEdgeWin10.box --name MSEdgeWin10

設定

これでツールは用意できましたので、設定ファイルを用意していきます。

Vagrantfile

こちらがVagrantfileのサンプルです。

Vagrant.configure("2") do |config|
  # VirtualBox の設定
  config.vm.provider "virtualbox" do |vb|
    vb.gui = true
    vb.memory = "2048"
  end

  # 使う Vagrant Box 名
  config.vm.box = "MSEdgeWin10"

  # ゲストの OS を指定しておかないとマウント設定などがうまく行かない
  config.vm.guest = "windows"

  # ユーザ名
  config.ssh.username = "IEUser"

  # パスワード
  config.ssh.password = "Passw0rd!"

  # ゲストに SSH 鍵を配置しない (false)
  config.ssh.insert_key = false

  # SSH ログインシェルを変更しておく
  config.ssh.shell = 'sh -l'

  # Windows に sudo の概念がないので空白に直しておく
  config.ssh.sudo_command = ''

  # 共有フォルダ (以下の設定だと無効)
  config.vm.synced_folder ".", "/vagrant", disabled: true
  # 有効にするには以下に書き換える (後述)
  # config.vm.synced_folder "./vagrant", "c:\\vagrant"
end

参考：Vagrant で Mac 上に Windows の仮想環境を構築する

起動

$ vagrant up

コマンド実行後、しばらくするとWindowsが立ち上がります。

うまく立ち上がらない場合は、以下のコマンドで再起動してみましょう。

$ vagrant reload

これでIE、Edgeでの表示確認ができるようになりましたね。

シャットダウン

GUIで操作してシャットダウンすることも可能ですが、
以下のコマンドでシャットダウンすることも可能です。

$ vagrant halt

まとめ

思っていたよりも簡単にMacにWindows環境を用意することができました。
これでIEやEdgeで表示確認する敷居も下がりますね。