サイトアイコン APPSWINGBY Developers Blog

VagrantでWindows × Edgeの動作確認を行う

hidekazu kawashima

はじめに

最近では、macで開発業務を行っているエンジニアが増えた印象ですが、やはり一般的に普及しているOSは、windowsが圧倒的に多く、その標準で搭載されているブラウザ(Edge)の利用者も多い印象があります。普段、webサイトの開発業務を行っていると「Edgeでの表示が崩れている、表示できない」などの報告をいただくことがあります。このとき、困るのが動作確認の環境です。
今の時代、パブリッククラウドが発達しているので手元にWindowsのマシンがなくてもクラウド上にWindows環境を構築することは、手軽にできるのですが、そこで困るのが「コスト」の問題です。WindowsOSで作成した場合には、LinuxベースのOSと比べて、コストが数倍になるので、なかなかクラウドで気軽に動作確認というわけにもいかないですよね。弊社内でも、同じような問題が発生したので、今回は、そのとき利用したVagrantを用いた方法を紹介します。

主要ブラウザのシェア状況

Source: StatCounter Global Stats – Browser Market Share

開発環境

VirtualBox

VirtualBoxをインストールします。
pkg、brewのどちらかの方法でインストールを行います。

pkgを利用してインストールする

下記サイトからダウンロードし、パッケージを実行します。
https://www.virtualbox.org/wiki/Downloads

brewを利用してインストールする

下記のコマンドを実行します。

インストールでエラーが発生してインストールできない場合

インストール途中で、「システム環境設定」を開いて…の警告が出ている可能性が高いです。
[システム環境設定] > [セキュリティとプライバシー] > [一般] の画面を確認して、”Oracle America, Inc”のブロックを解除して下さい。

Vagrant

Vagrantをインストールします。
pkg、brewのどちらかの方法でインストールを行います。

pkgを利用してインストールする

下記サイトからダウンロードし、パッケージを実行します。
https://www.vagrantup.com/downloads.html

brewを利用してインストールする

下記のコマンドを実行します。

Microsoft Virtual Machines

Microsoftが提供するVirtula Machinesイメージを下記のサイトから取得します。
VirtualBox、Vagrant、HyperV、VMwareなどの主要どころやParallesもサポートしています。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

今回は、Vagrantで利用したいのでVagrant向けのイメージをダウンロードします。
※ ダウンロードには、少し時間がかかるのでコーヒでも飲みながらのんびり待ちましょう!

ダウンロードしたファイルは、「MSEdge.Win10.Vagrant.zip」という名前でした。

Vagrantで起動する

Vagrantで仮想をOSを起動する際には、大まかに次の流れを行う必要があります。

ダウンロードしたboxファイルを追加する

vagrantは、boxファイルとしては、zipもサポートしているのでzipファイルを直接実行してみるとエラーになりました。

vagrantfileを作成する

  1. 適当なディレクトリを準備して、vagrant initコマンドを実行します。
  2. Vagrantfileを編集します。
    GUI環境で動作させるので、Video memoryなんかも設定を変更しておくほうが良いです。

Windows環境へログインしてホスト側のサイトへアクセスする

注意点

この仮想マシン自体は、90日であれば無料で利用可能ということです。

まとめ

昔からWebサイトの開発では、ブラウザごとの挙動の違いに悩まされるということが多くありました。現在では、Javascriptなども標準化が多くされていますが、ブラウザ種別ごとの挙動差異があるのも事実です。このようなときに無料で手軽にVagrantで環境を作れるのは、非常にありがたいので、皆さんも利用してみては、いかかがでしょうか。

モバイルバージョンを終了