はじめに
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で表示確認する敷居も下がりますね。