ローディング中

【無料】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

Vbox logo2 gradient

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

Virtualboxインストール

スクリーンショット 2016 10 31 午後5 52 19

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

スクリーンショット 2016 10 31 午後5 55 32

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

スクリーンショット 2016 10 31 午後6 05 35

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

日本語化

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

12

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

13

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

クリップボード共有化

14

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

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

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

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

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

Windowsダウンロード

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

1

Download virtual machinesにアクセス。

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

スクリーンショット 2016 10 31 午後6 12 53

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

仮想環境インストール

3

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

4

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

5

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

Parallels Desktopでの設定法

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

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

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

スクリーンショット 2018 05 11 午後7 02 20

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

スクリーンショット 2018 05 11 午後7 02 30

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

スクリーンショット 2018 05 11 午後7 02 34

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

スクリーンショット 2018 05 11 午後7 02 42

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

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

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

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

デベロッパーツール

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

7

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

8

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

使用期限延長方法

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

slmgr -rearm

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

9

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

10

最後に

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.