Mac
Windows
IE
vagrant
VirtualBox

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)"を選択します。

スクリーンショット 2018-11-01 21.18.50.png

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

スクリーンショット 2018-11-01 21.19.45.png

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

スクリーンショット 2018-11-01 21.42.48.png

こちらの解凍ツールを使用します。

https://theunarchiver.com/

スクリーンショット 2018-11-01 21.51.53.png

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

// リネーム前

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が立ち上がります。

スクリーンショット 2018-11-01 21.38.55.png

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

$ vagrant reload

スクリーンショット 2018-11-01 21.40.59.png

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


シャットダウン

GUIで操作してシャットダウンすることも可能ですが、

以下のコマンドでシャットダウンすることも可能です。

$ vagrant halt


まとめ

思っていたよりも簡単にMacにWindows環境を用意することができました。

これでIEやEdgeで表示確認する敷居も下がりますね。