BLOGMacでWindowsの表示確認環境を作ってみた【IE11・Edge】

すー
  1. HOME
  2. ブログ
  3. フロントエンド
  4. MacでWindowsの表示確認環境を作ってみた【IE11・Edge】

Webサイトコーディングが終わってからWindowsのブラウザ「Internet Explorer」でブラウザチェックした時に泣かされてきたコーダーのすー(@belltreeWeb)です。

Chromeで作業していると綺麗に実装できているのにIE11だと崩れる、ということは多々あります。

サイト制作でブラウザチェックは必須です!
どのユーザーからも(特にメジャーな端末・ブラウザでは)崩れる事なく美しく見せるべきです。
IEで見る人は減ってきていますし対象外にしているサービスも増えてきたものの、お客さんによってはIE対応を求めてくることもあるし、まだ完全にスルー出来るわけではありませんよね。

というわけで、今回はMacでWindowsのInternet Explorer・Edgeブラウザを確認する方法をご紹介します。

目次

  1. VirtualBoxを導入する
    1. VirtualBoxのインストール
    2. WindowsOSのダウンロード
    3. WindowsOSをVirtualBoxに追加する
  2. ローカルホストをVirtualBoxで確認する
    1. IPアドレスの確認

VirtualBoxを導入する

VirtualBoxっていうのは、簡単に言えば自分のOS(ホストOS)の中に別のOS(ゲストOS)をぶっ込む事が出来るツールです。

なので、これからMacの中にWindowsをぶっ込みましょう!

VirtualBoxのインストール

Oracle社VirtualBox公式サイトからVirtualBoxをダウンロードしてください。

まず、「Download VirtualBox」と書いてあるデカいリンクに飛びます。

次に、VirtualBox 6.1.6 platform packagesと書いてある箇所の下にあるOS X hostsをクリックするとダウンロードが開始されます。

※バージョンは執筆時のものです。

ダウンロードしたdmgファイルを開くと以下の画面が表示されるので、右上のアイコンをダブルクリックしてください。

インストールの画面が表示されるので表示に従ってインストールを進めちゃいましょう。

むむ、エラー…?

特に問題なくインストールが完了した方は以下セキュリティの設定はスルーしてOKです。

「インストールできませんでした。」と表示された場合

VirtualBoxに限らず、セキュリティの問題でインストール時にエラーが出る事があります。
そんな時はディスプレイ左上のりんごマークからシステム環境設定>セキュリティとプライバシーを開きましょう。

下の方に「開発元”Oracle America, Inc.”のシステムソフトウェアの読み込みがブロックされました。」と出ています。

これが原因です。

先ほどエラーが出たウィンドウを閉じてから、文言の横にある「許可」をクリックしてもう一度インストールしてみてください。
無事、インストールが完了するはずです。

インストールが完了したら

以下の画面が出たらインストーラはゴミ箱ポイで問題ありません。
アンインストールする際には必要になりますが、またダウンロードすればいいので大丈夫です。

VirtualBoxのインストールが完了しましたね!
さて、これだとまだ別のOSを入れる為のツールをインストールしただけです。

次に、WindowsのOSを追加していきましょう。

WindowsOSのダウンロード

Microsoft公式サイトで仮想OSを配布しているので、ダウンロードページからWindowsのOSをダウンロードします。

赤枠を選択してダウンロードしてください。(結構重いです)
zipファイルがダウンロード出来たら解凍しておいてください。

次はVirtualBoxを操作します。

WindowsOSをVirtualBoxに追加する

上部のインポートをクリックします。

インポートがない!という方は、左上の「ツール」を押したら出てきます。

「インポートしたい仮想アプライアンス」の画面が表示されるので、先ほど解凍した「MSEdge – Win10」の中にあるMSEdge – Win10.ovfを選択し「続き」をクリック。

設定がごちゃごちゃ出てきますが、とりあえずそのままインポートで問題ないです。

左側に「MSEdge – Win10」が表示されましたでしょうか。
これでWindows(ゲストOS)を起動できます!

追加されたMSEdgeをダブルクリックで開いてみてください。

・・・なんかめっちゃ小さい画面で表示されるやん。

そんな時はディスプレイ上部のタブでView>Scaled Modeを選択すれば、Virt画面のリサイズに合わせて画面が広がります。

Scaled Modeを選択した際に警告っぽいの出ますが気にしなくて大丈夫です。

さて、パスワードを求められましたね。

Passw0rd!(wの後は数字のゼロ)と入力してログインしましょう。

ローカルホストをVirtualBoxで確認する

まず、Macの環境でブラウザチェックしたいサイトのURLを確認します。htmlファイルを直接開くのではなく、VSCodeのLive Serverなどを利用してlocalhost(127.0.0.1)で表示できるようにしてください。

IEで確認するために、テキストだけの簡易的なページを準備しました。

Live Serverで表示されたページのURLは「127.0.0.1:5500」となっています。コロン(:)の後の5500はポート番号です。この数字は後程使います。
※ポートが違う場合はご自身の環境に合わせた数字を利用してください。

このIPを使ってWindows側で開いても表示することはできません。なので、MacのlocalhostのIPを確認します。

IPアドレスの確認

Macの右上にある虫眼鏡から、「ネットワークユーテリティ」と検索し、開いてください。

すると、こんな画面が開かれたと思います。ここのIPアドレスの部分を使っていきます。

ゲストOSでブラウザを開きましょう。

今回Live Serverで表示したページのポートは5500だったので、ゲストOSのブラウザで「http://取得したIPアドレス:5500」を開いてみてください。

IEを開く場合は、左下の「○」をクリックして検索しましょう。

表示できました!これでIEのブラウザチェックが可能ですね!

おつかれさまでした!以上、MacでIEを確認する方法でした。