※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
Oracle VM VirtualBoxを今回使用していきます。
Vagrantなどを使用している方や、もうすでに入ってるよって方は飛ばしてもらっても問題ありません。
まだ入ってないよ！って方は公式サイトもしくはターミナルからDLする方法があるのですが。
今回は簡単な公式サイトからDLする方法を紹介していきます。
Virtualboxインストール
Virtualboxの公式サイトにアクセスし、Downloadsをクリック
今回はmacで環境構築を行っていくのでmac用のファイルをダウンロードします。
ダウンロードしてファイルを展開してVirtualBoxをインストールすれば完了です。
日本語化
英語のままでも良いのですが、せっかくなので日本語化してしまいましょう。
VirtualBox VM>Perferencesと選択。
そうするとLanguageという項目があるので、そこから「日本語」を選択するだけで日本語化は完了です。
日本語化はとっても簡単ですね。
クリップボード共有化
次にクリップボードをホストOSと共有化させるために、クリップボードの設定も行っていきます。
といっても上記画像のように
デバイス>クリップボードの共有>双方向を選択するだけで完了です。
これで、Windows側のキーボードの設定などを特にしなくてもコピペでやり取りができるようになります。
環境構築で時間を割かれるのもあまり好きじゃないので、これで対処してしまうのが良いでしょう。
IE&Edgeチェック用環境構築
それでは次にIE＆Edgeチェック用の環境構築を行っていきます。
これもファイルをインストールするだけととても簡単です。
まずはWindowsをインストールしていきます。
Windowsダウンロード
Microsoftでは仮想マシン用のEdgeやIEのファイルが用意されています。
そのファイルをインストールするだけで環境が構築できます。
ではインストールを行っていきましょう。
Download virtual machinesにアクセス。
Virtual machineから使用したいブラウザのバージョンやWindowsのバージョンを指定しSelect platformから使用する仮想マシンを選択します。
今回はVirtualBoxを指定します。
そして下のDownload.zipをクリックしファイルをダウンロードしましょう。
仮想環境インストール
ダウンロードしたファイルを展開すると上記のようなファイルが現れます。
.ovfという拡張子のファイルを展開すると自動的にVirtualBoxが起動します
あとはメモリの設定などお好みで行い、インポートをクリックするだけです。
インストールが完了すると上記のように、Windowsが起動します。
ここまで到着したら後はブラウザチェックを行うだけですね。
Parallels Desktopでの設定法
私はParallelsを普段から使用しているため、Prallesでのmodern.IEの設定法も紹介します。
Virtualboxよりも遥かに楽なので、Prallelsを使っている方は是非仮想環境を構築してみてはいかがでしょうか。
modern.IEのインストール方法
まず初めにインストールアシスタントを開きます。
すでに左下にmodern.IEというのが見えてしまっていますね。
こちらを選択し続行をクリック。
注意事項等が表示されるため、一読しておきましょう。
※modern.IE共通のパスワードも表示されますので、必要であればメモして下さい。
【同意する】をクリック。
あとは、テスト環境に使用したいバージョンを指定すれば終わりです。
あとはDL・設定が終わるのを待つだけ。
parallesでの設定は驚くほど簡単です。
すでに項目が用意されているため、基本的には選択してDL完了・設定完了を待つだけでOKです。
parallesはパソコンに入ってるけど、そういえば使ってなかったなって方はテスト環境として活用してみてはいかがでしょうか。
modern.IEで覚えておきたいTIPS
デベロッパーツール
IEやEdgeには、GoogleChromeなどと同じようにデベロッパーツールが搭載されています。
このデベロッパーツールから、過去のIEをエミュレートしたりすることが可能なため。
とりあえずは最新版のIEやEdgeだけしれておけば問題ないかと思います。
では使用方法を説明していきます。
ブラウザを開き、右上の歯車みたいなアイコンをクリックするとメニューが出てきます。
その中からF12 Developer Toolを選択。
もしくはF12を押すとデベロッパーツールが開きます。
あとは画像の場所からブラウザのバージョンを選択できるため、
使用したいエミュレータを選択してブラウザチェックを行っていきましょう。
使用期限延長方法
仮想環境は９０日間の使用制限がついていますが３０日で一度使用期限が来てしまいます。
その際、コマンドプロンプトから
slmgr -rearm
と入力すると９０日に期限を延ばすことができます。
ですが、再インストールすることで使用期限をリセットすることもできます。
その場合はVirtualBoxから「除去」を選択し
すべてのファイルを削除を選択することで削除することができます。
最後に
もうすでにMacにWindowsはいってるよ！って人は必要ないですが。
入ってないしIEチェックどないしたらエエねん！って悩んでる方にはとっても役に立つ仮想環境。
フロントエンドの方は是非とも環境構築して日々の業務に役立ててくださいね！
