RitoLabo

Mac で IE/Edge の確認環境を構築する(VirtualBox - Win 10 / Edge & Internet Explorer 11)

  • 公開:
  • 更新:
  • カテゴリ: Mac
  • タグ: mac,IE,Edge,VirtualBox

web アプリケーションを開発していく中で、様々なウェブブラウザでの表示確認は大切な作業の1つです。

特に Mac で開発を行っていると、Microsoft Edge や IE (Internet Explorer) は入っていないので、悩みの種の1つでもあります。

Google Chrome や Mozilla Firefox などのモダンブラウザ(Web標準に準拠したWebブラウザ)を主体に開発を行っていると、レガシーブラウザである IE では特に表示崩れを起こしやすく、対応するとなると細かく表示確認を行っていくことが求められます。

今回は、Mac に IE を導入し、開発環境において表示の確認を行っていける環境を構築します。

アジェンダ
  1. 実行環境
  2. VirtualBox のインストール
  3. Windows 10 の仮想マシンの導入
    1. ダウンロード
    2. VirtualBox へインポート
  4. VM の起動と Windows へのログイン
  5. 初期設定
    1. コピペできるようにする
    2. 共有フォルダを作成する
    3. ディスプレイサイズの変更
    4. timezone の変更
    5. 日本語表示にする
    6. キーボードレイアウトを日本語へ変更する
  6. Mac(ホストOS)の開発環境へ VM からアクセスできるようにする
    1. hostsファイルの権限変更
    2. hostsファイルの編集
    3. hostsファイルをいつでも呼び出せるようにしておく
  7. 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

VirtualBox ダウンロード画面

ダウンロードができたら、インストールします。この時に、Catalina の設定がデフォルトの場合はインストールが失敗するので、システム環境設定から、許可するとインストールできるようになります。

VirtualBox インストール許可

インストールが完了したら、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 10 VM ダウンロード画面

ググると結構 win 7 や 8 だったり、IE 10 や 9 なんかも出てきているのですが、2020年4月現在では Win 10(Edge & IE11)のみとなっているようです。(ievms も試してみましたが、既にダウンロードできなくなっていました)

ダウンロードができたら、適当なところに zip ファイルを移動し、以下のコマンドを叩いて解凍します。

# zip ファイルを解凍する
tar zxf FILE_NAME.zip

ova ファイルが作成されればOKです。

ovaファイル

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 を落として再度、起動させます。

VMシャットダウン

そしたら今度は「こいつにコンピュータの制御を行わせていいか」と聞かれるので、システム環境設定を開いて、許可します。 (またかよ感がすごいけど、真摯に対応する)

確認アラート

コンピュータ制御許可

そして一度 VM を落として再度、起動させます。

ようやくアラートなく起動するので Windows にログインします。

この時に、ユーザーは既に選択されているので、パスワードを入力します。

パスワードは Passw0rd! です。(「ゼロ」と「オー」を間違えやすいので注意です。)

ログインができれば、これで環境の立ち上げは完了です。

win10デスクトップ画面

初期設定

win 10 の環境は立ち上がったので、Edge も IE 11 も使えますが、やってみるとわかりますがデフォルトのままではこの上なく使いづらいので、初期設定を行っておきます。

コピペできるようにする

デフォルトでは ホストOS(Mac)とゲストOS(Win) でクリップボードを共有できない設定になっているので、例えば Mac でクリップボードにコピーしたものを VM にペーストができません。

これは地味に不便なので、コピペをできるようにしておきます。(VMはシャットダウンしておきます)

VirtualBox マネージャーで「設定」ボタンを押下します。

「設定」ボタン押下

「高度」セクションに切り替えると「クリップボードの共有」が「無効」になっているので「双方向」に変更し、OKボタンを押下します。

クリップボードの共有を双方向にする

共有フォルダを作成する

ホストとゲスト間でファイルを受け渡せるようにしておくと、設定を行っていく上で作業が捗るので、共有フォルダを作成しておきます。(VMはシャットダウンしておきます)

  1. VirtualBox マネージャーで「設定」ボタンを押下します。
  2. 設定画面が開いたら「共有フォルダ」を押下します。
  3. 共有フォルダ一覧の右側に、追加アイコンがあるので押下します。
  4. 「フォルダーのパス」より、共有フォルダに指定するディレクトリを選択します。
  5. 「自動マウント」にチェックを入れます。
  6. OK ボタンを押下すると、共有フォルダ一覧に追加されるので、OKボタンを押下して完了です。

共有フォルダの設定

ディスプレイサイズの変更

最初に立ち上がった時、ウィンドウが小さくてこのまま使うのは辛いので、表示を大きくしておきます。

画面下にある、ディスプレイのようなアイコンを右クリックすると、ディスプレイのサイズを変更できます。

ディスプレイ変更アイコン

ちなみに 13 インチ Macbook では、「Scale to 200%」を選択するといい感じの大きさになります。

Scale to 200%

timezone の変更

windows の timezone を日本に変更して、時計を日本時間に合わせます。(VMにログインします)

  1. 画面下のツールバーに時間が表示されているので、そこを右クリックします。
  2. ポップアップが表示されるので、「Adjust date/time」を押下します。

timezoneの設定1

設定画面が開くので、ここでタイムゾーンを日本に変更すれば完了です。

timezoneの設定2

日本語表示にする

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側からアクセス

ドメインを設定している場合は、Win 側の hosts を書き換えることで、Mac 側でのアクセスと同じ URL で表示できます。

hosts ファイルは、C:/Windows/System32/drivers/etc にあります。

hostsファイルの権限変更

hosts ファイルはデフォルトでは編集できないので、権限を変更して編集できるようにします。

hosts ファイルを右クリックして「プロパティ」を押下します。

hostsのプロパティを開く

セキュリティセクションへ移動し「編集」ボタンを押下します。

hostsの権限編集画面へ

編集画面を開いたら、Users を選択し、フルコントロールにチェックを入れ、OK ボタンを押下します。

hostsのUsers権限変更

これで hostsファイルが編集できるようになりました。

hostsファイルの編集

hosts ファイルをテキストエディタで開いて、IPアドレスとドメインをマッピングします。

hostsにホスト側IPとドメインをマッピングする

保存したら完了。これで、ブラウザからドメインでアクセスできるようになりました。

IPではなくドメインでブラウザからアクセス

hostsファイルをいつでも呼び出せるようにしておく

毎回、エクスプローラから C:/Windows/System32/drivers/etc を巡って hosts ファイルを開くのはちょっと手間なので、タスクバーにディレクトリを登録しておくと素早く開けて便利です。

タスクバーの空いているところを右クリックすると、ポップアップメニューが開くので「ツールバー」そして「新規ツールバー」と選択します。

新規ツールバー作成

フォルダの選択画面になるので、hosts が入っている etc フォルダを選択して「フォルダーの選択」ボタンを押下します。

etcフォルダの登録

すると、タスクバーに etc フォルダが登録されるので、いつでも簡単に hosts が呼び出せるようになります。

etcフォルダをタスクバーから開く

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 の表示確認は行っていきたいところです。