【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

※2018/05/11 Parallels Desktopでの設定方法を追記しました。

本当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 Desktopでも仮想環境を構築することが出来ます。
では早速環境構築方法をご説明していきます。

VirtualBoxでの構築方法

まずはフリーソフトのVirtualBoxを活用した方法をご紹介していきます

VirtualBox

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

Virtualboxインストール

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

日本語化

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

クリップボード共有化

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

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

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

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

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

Windowsダウンロード

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

Download virtual machinesにアクセス。

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

仮想環境インストール

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

Parallels Desktopでの設定法

私はParallelsを普段から使用しているため、Prallesでのmodern.IEの設定法も紹介します。
Virtualboxよりも遥かに楽なので、Prallelsを使っている方は是非仮想環境を構築してみてはいかがでしょうか。

modern.IEのインストール方法

まず初めにインストールアシスタントを開きます。

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

すでに左下にmodern.IEというのが見えてしまっていますね。
こちらを選択し続行をクリック。

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

注意事項等が表示されるため、一読しておきましょう。
※modern.IE共通のパスワードも表示されますので、必要であればメモして下さい。

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

【同意する】をクリック。

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

あとは、テスト環境に使用したいバージョンを指定すれば終わりです。

あとはDL・設定が終わるのを待つだけ。

parallesでの設定は驚くほど簡単です。
すでに項目が用意されているため、基本的には選択してDL完了・設定完了を待つだけでOKです。
parallesはパソコンに入ってるけど、そういえば使ってなかったなって方はテスト環境として活用してみてはいかがでしょうか。

modern.IEで覚えておきたいTIPS

デベロッパーツール

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

使用期限延長方法

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

slmgr -rearm

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

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

【無料】MacでIEとEdgeの確認を一気に行えるmodern.IEの使い方

最後に

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

PR

Instagram Feed

Something is wrong.
Instagram token error.
Load More

Instagram

WEB DIRECTOR

m.k

2016年より株式会社AWESOMEにてWEB開発とコンテンツ制作を担当しております。SEO対策と記事執筆が得意分野です。

他の投稿を見る →