【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

本当IE絶滅したらいいのに。って思ってるのは僕だけではないと思います。
フロントエンドにとって悩みのタネがIEをどこまで対応させるのか。ではないでしょうか。

XPのサポートが終了しても今なおXPを使われている方も少なくありません。
Windows10になってEdgeという新しいブラウザにはなりましたが、まだまだIE9やIE8にも対応してほしいという要望もあります。
macでコーディングしている人ですと、わざわざWindowsを起動させたりしてチェックするのって本当に面倒ですよね。
でもMacでも簡単にIEのチェックを行うことができるんです。

しかも無料!

そんなmacユーザー必見!のMacでIEとEdgeの確認を一気に行う最もクールな方法をご紹介します!
Windowsをわざわざ買わなくてもOKなこの方法で、IEチェックをサクッと終わらせましょう!

Microsoft提供のVirtual machines!

マイクロソフトはデベロッパー向けにIE8〜Edgeまでの仮想マシン用のファイルを提供しています。
なんて太っ腹なんでしょう!
しかもVirtualBox用のファイルも用意されているため仮想マシンも含めて無料で環境構築をすることが可能です。
もちろんParallelsを愛用している方向けにParallels用のファイルも用意されています。
では早速環境構築方法をご説明していきます。

仮想環境構築

まずは仮想環境の構築を行っていきます。
私はParallelsを使っていますが有料ソフトのため、今回はフリーソフトのVirtualBoxを活用した方法をご紹介していきます

VirtualBox

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

Oracle VM VirtualBoxを今回使用していきます。
Vagrantなどを使用している方や、もうすでに入ってるよって方は飛ばしてもらっても問題ありません。
まだ入ってないよ!って方は公式サイトもしくはターミナルからDLする方法があるのですが。
今回は簡単な公式サイトからDLする方法を紹介していきます。

Virtualboxインストール

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

Virtualboxの公式サイトにアクセスし、Downloadsをクリック

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

今回はmacで環境構築を行っていくのでmac用のファイルをダウンロードします。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

ダウンロードしてファイルを展開してVirtualBoxをインストールすれば完了です。

日本語化

英語のままでも良いのですが、せっかくなので日本語化してしまいましょう。
VirtualBox VM>Perferencesと選択。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

そうするとLanguageという項目があるので、そこから「日本語」を選択するだけで日本語化は完了です。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

日本語化はとっても簡単ですね。

クリップボード共有化

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

次にクリップボードをホストOSと共有化させるために、クリップボードの設定も行っていきます。
といっても上記画像のように

デバイス>クリップボードの共有>双方向を選択するだけで完了です。

これで、Windows側のキーボードの設定などを特にしなくてもコピペでやり取りができるようになります。
環境構築で時間を割かれるのもあまり好きじゃないので、これで対処してしまうのが良いでしょう。

IE&Edgeチェック用環境構築

それでは次にIE&Edgeチェック用の環境構築を行っていきます。
これもファイルをインストールするだけととても簡単です。
まずはWindowsをインストールしていきます。

Windowsダウンロード

Microsoftでは仮想マシン用のEdgeやIEのファイルが用意されています。
そのファイルをインストールするだけで環境が構築できます。
ではインストールを行っていきましょう。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

Download virtual machinesにアクセス。

Virtual machineから使用したいブラウザのバージョンやWindowsのバージョンを指定しSelect platformから使用する仮想マシンを選択します。
今回はVirtualBoxを指定します。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

そして下のDownload.zipをクリックしファイルをダウンロードしましょう。

仮想環境インストール

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

ダウンロードしたファイルを展開すると上記のようなファイルが現れます。
.ovfという拡張子のファイルを展開すると自動的にVirtualBoxが起動します

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

あとはメモリの設定などお好みで行い、インポートをクリックするだけです。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

インストールが完了すると上記のように、Windowsが起動します。
ここまで到着したら後はブラウザチェックを行うだけですね。

デベロッパーツール

IEやEdgeには、GoogleChromeなどと同じようにデベロッパーツールが搭載されています。
このデベロッパーツールから、過去のIEをエミュレートしたりすることが可能なため。
とりあえずは最新版のIEやEdgeだけしれておけば問題ないかと思います。
では使用方法を説明していきます。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

ブラウザを開き、右上の歯車みたいなアイコンをクリックするとメニューが出てきます。
その中からF12 Developer Toolを選択。
もしくはF12を押すとデベロッパーツールが開きます。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

あとは画像の場所からブラウザのバージョンを選択できるため、
使用したいエミュレータを選択してブラウザチェックを行っていきましょう。

使用期限延長方法

仮想環境は90日間の使用制限がついていますが30日で一度使用期限が来てしまいます。
その際、コマンドプロンプトから

slmgr -rearm

と入力すると90日に期限を延ばすことができます。
ですが、再インストールすることで使用期限をリセットすることもできます。
その場合はVirtualBoxから「除去」を選択し

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

すべてのファイルを削除を選択することで削除することができます。

【決定版】MacでIEとEdgeの確認を一気に行うもっともクールな方法

最後に

もうすでにMacにWindowsはいってるよ!って人は必要ないですが。
入ってないしIEチェックどないしたらエエねん!って悩んでる方にはとっても役に立つ仮想環境。
フロントエンドの方は是非とも環境構築して日々の業務に役立ててくださいね!

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

WEB DIRECTOR

マンノカズミチ

バンドマンを経て、台湾で日本語教師をしてましたが、2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。こっそり台湾と日本のハーフです。

他の投稿を見る →