BLOGMacでWindowsのブラウザチェック環境作ってみた

すー
  1. HOME
  2. ブログ
  3. フロントエンド
  4. MacでWindowsのブラウザチェック環境作ってみた

Webサイト制作でコーディング終わってからブラウザチェックを行うと高確率でIEに泣かされるすー(@belltreeWeb)です。
最近は「これだとIEで崩れる」、「思ってるのと違う結果になる」というのが見えてきて大分マシになりました。

サイト制作でブラウザチェックは必須です!
どのユーザーからも(特にメジャーな端末・ブラウザでは)崩れる事なく美しく見せなくてはいけません。
IEで見る人は減ってきているものの、スルー出来るわけではないのです…。

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

目次

  1. 方法その1:Safariでユーザーエージェントを変更する
  2. 方法その2:VirtualBoxを導入する
    1. VirtualBoxのインストール
    2. WindowsOSのダウンロード
    3. WindowsOSをVirtualBoxに追加する
    4. ローカルホストをVirtualBoxで確認する

方法その1:Safariでユーザーエージェントを変更する

Safariの開発タブ>ユーザーエージェントからIEが選択できます。

これはあくまでユーザーエージェントを変えてるだけなのでJavaScriptなどでユーザーエージェントを利用した処理の出し分けなどには効果ありますが、スタイルはIEとは異なるでしょう。
そんな簡単ではありませんでした。残念。

余談ですみません!って事で本命いきます。

方法その2:VirtualBoxを導入する

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

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

VirtualBoxのインストール

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

Download VirtualBoxと書いてある緑色のデカいリンクに飛びます。分かりやすいですねw

VirtualBox 6.0.8 platform packagesと書いてある箇所の下にあるOS X hostsをクリックするとダウンロードが開始されます。※バージョンは執筆時のものです。

ダウンロードしたdmgファイルを開くと以下の画面が表示されるので、1 Doule click on this icon:の箇所を指示通りダブルクリックしてください。

インストールの画面が表示されるので「次へ」でバンバン進めちゃいましょう。

エ、エラー!?なぜかインストールが完了しない!

特に問題なくインストールが完了した以下スルーしてOKです。

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

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

これが原因です。

文言の横にある「許可」をクリックしてもう一度インストールしてみてください。
無事、インストールが完了するはずです。

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

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

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

WindowsOSのダウンロード

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

Virtual macine: MSEdge on Win10(x64) Stale 1809
Slelect platform: VirtualBox

を選択してダウンロードしてください。
zipファイルがダウンロード出来たら解凍しておいてください。

次はVirtualBoxを操作します。

WindowsOSをVirtualBoxに追加する

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

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

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

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

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

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

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

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

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

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

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

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

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

(127.0.0.1以外のIPを使っている場合の確認方法は今回は省略しています。)

さて、私もテキストだけの簡易的なページを準備しました。

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

ゲストOSでブラウザを開きましょう。VirtualBoxでは、ホストOSのlocalhostを10.0.2.2のIPアドレスで表示できるよう設定されています。

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

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

以上、MacでIEを確認する方法でした。

「!DOCTYPE」へのご意見・ご相談などに関しては
こちらからお気軽にご連絡ください。