Mac で IE/Edge の確認環境を構築する（VirtualBox - Win 10 / Edge & Internet Explorer 11）
- 公開日
- 更新日
- カテゴリ：Mac
- タグ：mac,IE,Edge,VirtualBox
web アプリケーションを開発していく中で、様々なウェブブラウザでの表示確認は大切な作業の１つです。
特に Mac で開発を行っていると、Microsoft Edge や IE (Internet Explorer) は入っていないので、悩みの種の１つでもあります。
Google Chrome や Mozilla Firefox などのモダンブラウザ（Web標準に準拠したWebブラウザ）を主体に開発を行っていると、レガシーブラウザである IE では特に表示崩れを起こしやすく、対応するとなると細かく表示確認を行っていくことが求められます。
今回は、Mac に IE を導入し、開発環境において表示の確認を行っていける環境を構築します。
Contents
- 実行環境
- VirtualBox のインストール
- Windows 10 の仮想マシンの導入
- VM の起動と Windows へのログイン
- 初期設定
- Mac（ホストOS）の開発環境へ VM からアクセスできるようにする
- VM のスナップショットを作成する
実行環境
Mac は macOS Catalina です。
今回は、VirtualBox に Windows 10 を導入して、そこで Edge と IE 11 を表示させていきます。
VirtualBox のインストール
VirtualBox をインストールします。Oracle VM VirtualBox のサイトから、ダウンロードします。
Downloads – Oracle VM VirtualBox
https://www.virtualbox.org/wiki/Downloads
ダウンロードができたら、インストールします。この時に、Catalina の設定がデフォルトの場合はインストールが失敗するので、システム環境設定から、許可するとインストールできるようになります。
インストールが完了したら、VirtualBox はひとまずOKです。
Windows 10 の仮想マシンの導入
次に、Microsoft Edge および Internet Explorer 11 を搭載した Windows 10 仮想マシン（以下、VM）を導入します。
ダウンロード
Microsoft が確認用として VM を無料で公開しているので、以下から VirtualBox 用のイメージをダウンロードします。
Virtual Machines
Test IE11 and Microsoft Edge Legacy using free Windows 10 virtual machines you download and manage locally
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
ググると結構 win 7 や 8 だったり、IE 10 や 9 なんかも出てきているのですが、2020年4月現在では Win 10（Edge & IE11）のみとなっているようです。（ievms も試してみましたが、既にダウンロードできなくなっていました）
ダウンロードができたら、適当なところに zip ファイルを移動し、以下のコマンドを叩いて解凍します。
# zip ファイルを解凍する
tar zxf FILE_NAME.zip
ova ファイルが作成されればOKです。
VirtualBox へインポート
次に、この ova を VirtualBox へインポートします。
先程解凍したファイルを選択して「続き」を押下します。
作成される仮想マシンのスペックが表示されますので、メモリなど都度調整して（実機のスペックやキャパに余裕があればそのままで良いと思います）「インポート」を押下します。
ちなみに、Win 10 の場合は、VM のインストール手順書によると最低でも 2GB のメモリは積んでおいてねとのことです。
Windows 10 images: 1024 – 2048MB
Modern.IE VM Notes
https://az792536.vo.msecnd.net/vms/release_notes_license_terms_8_1_15.pdf
インポートには若干の時間がかかりますが、完了すると、一覧に表示されるようになります。
これで VM の導入は完了です。
VM の起動と Windows へのログイン
起動ボタンを押下して、起動させてみます。
起動している最中に、キーボード入力監視を受け付けるかとアラートが出るので、システム環境設定を開いて、許可します。
VM を再起動しないとダメだと言われるので、一旦「後で行う」を選択し設定した後、一度 VM を落として再度、起動させます。
そしたら今度は「こいつにコンピュータの制御を行わせていいか」と聞かれるので、システム環境設定を開いて、許可します。 （またかよ感がすごいけど、真摯に対応する）
そして一度 VM を落として再度、起動させます。
ようやくアラートなく起動するので Windows にログインします。
この時に、ユーザーは既に選択されているので、パスワードを入力します。
パスワードは Passw0rd! です。（「ゼロ」と「オー」を間違えやすいので注意。この場合は「ゼロ」が正しいです。）
ログインができれば、これで環境の立ち上げは完了です。
初期設定
win 10 の環境は立ち上がったので、Edge も IE 11 も使えますが、やってみるとわかりますがデフォルトのままではこの上なく使いづらいので、初期設定を行っておきます。
コピペできるようにする
デフォルトでは ホストOS（Mac）とゲストOS（Win） でクリップボードを共有できない設定になっているので、例えば Mac でクリップボードにコピーしたものを VM にペーストができません。
これは地味に不便なので、コピペをできるようにしておきます。（VMはシャットダウンしておきます）
VirtualBox マネージャーで「設定」ボタンを押下します。
「高度」セクションに切り替えると「クリップボードの共有」が「無効」になっているので「双方向」に変更し、OKボタンを押下します。
共有フォルダを作成する
ホストとゲスト間でファイルを受け渡せるようにしておくと、設定を行っていく上で作業が捗るので、共有フォルダを作成しておきます。（VMはシャットダウンしておきます）
- VirtualBox マネージャーで「設定」ボタンを押下します。
- 設定画面が開いたら「共有フォルダ」を押下します。
- 共有フォルダ一覧の右側に、追加アイコンがあるので押下します。
- 「フォルダーのパス」より、共有フォルダに指定するディレクトリを選択します。
- 「自動マウント」にチェックを入れます。
- OK ボタンを押下すると、共有フォルダ一覧に追加されるので、OKボタンを押下して完了です。
ディスプレイサイズの変更
最初に立ち上がった時、ウィンドウが小さくてこのまま使うのは辛いので、表示を大きくしておきます。
画面下にある、ディスプレイのようなアイコンを右クリックすると、ディスプレイのサイズを変更できます。
ちなみに 13 インチ Macbook では、「Scale to 200%」を選択するといい感じの大きさになります。
timezone の変更
windows の timezone を日本に変更して、時計を日本時間に合わせます。（VMにログインします）
- 画面下のツールバーに時間が表示されているので、そこを右クリックします。
- ポップアップが表示されるので、「Adjust date/time」を押下します。
設定画面が開くので、ここでタイムゾーンを日本に変更すれば完了です。
日本語表示にする
VM は英語表示になっているので、日本語表示へ変更します。
タスクバーの検索窓から language と入力すると、言語設定が出てくるので、これをクリックします。
設定画面を開いたら、「Add a language」を押下します。
たくさんの言語が出てくるので、適当に日本語を検索するなどして見つけたら、選択して「next」を押下します。
ここはお好みで。「install」を押下します。
インストールが開始されるのでしばらく待ちます。
インストールが完了すると、日本語が選択できるようになるので、選択したら日本語表示の設定は完了です。
再起動すると、日本語表示になったことを確認できます。
キーボードレイアウトを日本語へ変更する
初期は英語キーボードで設定されているので、もし日本語のキーボードを使っている場合は非常に混乱する（特に記号を入力する時とか）ので、キーボードの設定を JIS キーボードへ変更しておきます。
先程と同じ要領で、言語設定に入ります。（「設定」画面からでもいけます）
「日本語」を押下すると「オプション」ボタンが表示されるので、ここを押下します。
「ハードウェア キーボード レイアウト」という部分があるので「レイアウトを変更する」を押下し、日本語キーボードへ変更します。
再起動したら、キーボードレイアウトが日本語へ変更されます。
ここまでで大体の OS の初期設定は完了しました。
Mac（ホストOS）の開発環境へ VM からアクセスできるようにする
開発している WEB アプリケーションの表示確認を IE や Edge で行う為に Win 環境を導入したので、ローカル（Mac側）で開発しているアプリケーションにアクセスできるようにします。
例えば http://localhost/ で開発しているとして
Win 側からは http://10.0.2.2/ でホスト側の localhost にアクセスできます。 なので、単純にこれをブラウザで入力すると表示できます。
ドメインを設定している場合は、Win 側の hosts を書き換えることで、Mac 側でのアクセスと同じ URL で表示できます。
hosts ファイルは、C:/Windows/System32/drivers/etc にあります。
hostsファイルの権限変更
hosts ファイルはデフォルトでは編集できないので、権限を変更して編集できるようにします。
hosts ファイルを右クリックして「プロパティ」を押下します。
セキュリティセクションへ移動し「編集」ボタンを押下します。
編集画面を開いたら、Users を選択し、フルコントロールにチェックを入れ、OK ボタンを押下します。
これで hostsファイルが編集できるようになりました。
hostsファイルの編集
hosts ファイルをテキストエディタで開いて、IPアドレスとドメインをマッピングします。
保存したら完了。これで、ブラウザからドメインでアクセスできるようになりました。
hostsファイルをいつでも呼び出せるようにしておく
毎回、エクスプローラから C:/Windows/System32/drivers/etc を巡って hosts ファイルを開くのはちょっと手間なので、タスクバーにディレクトリを登録しておくと素早く開けて便利です。
タスクバーの空いているところを右クリックすると、ポップアップメニューが開くので「ツールバー」そして「新規ツールバー」と選択します。
フォルダの選択画面になるので、hosts が入っている etc フォルダを選択して「フォルダーの選択」ボタンを押下します。
すると、タスクバーに etc フォルダが登録されるので、いつでも簡単に hosts が呼び出せるようになります。
VM のスナップショットを作成する
Microsoft の VM ダウンロードページに、以下のような記載があります。
These virtual machines expire after 90 days. We recommend setting a snapshot when you first install the virtual machine which you can roll back to later.
これらの仮想マシンは90日後に期限切れになります。後でロールバックできる仮想マシンを最初にインストールするときにスナップショットを設定することをお勧めします。
せっかく初期設定などを行ってこれらの設定を使い続けるなら、スナップショットを取っておいてリストアできるようにしておいた方が良さそうです。
スナップショットは、command + T で作成ダイアログが開きます。
名前などを入力してOKボタンを押下すれば、スナップショットが作成されます。
VB マネージャーから、スナップショットを確認することができます。
一覧から「スナップショット」を選択すると、スナップショットの一覧が表示されます。
まとめ
Windows では、メインブラウザが Microsoft Edge に変わったとはいえ、win10 には互換性の維持の為にまだ IE 11 が搭載されており、サポート期間の終了も 2025年10月14日（Enterprise 版はものによっては最長で 2029年1月9日まで）となっているので、サービスによってはまだ対応が必要。
最後にまとめてと思って IE の表示確認を行うと結構痛い目に合う事も多いので、できるだけ細かく IE の表示確認は行っていきたいところです。
