※本ページにはプロモーション(広告)が含まれています
ウェブページを制作していると、ユーザの多いWindowsのInternet Explorerではどのように表示されるのかを確認したい場面がでてきます。
本稿では、Macを用いながらもInternet Explorerでウェブページがどのように表示されるのかを確認するブラウザテストの方法を紹介します。
Microsoft Edge Dev
Microsoftはウェブ開発者のためのウェブサイト「Microsoft Edge Dev」を公開しています。このウェブサイトではウェブ開発に関する情報とともに、ブラウザテストに使えるツールが紹介されています。
スクリーンショットの生成
1ページだけ、見た目だけのチェックしたい場合であれば、スクリーンショットの生成機能を使うのがお手軽です。
スクリーンショット生成のページにアクセスし、チェックしたいページのURLを入力するだけで、様々なOS、様々なブラウザでの表示結果を画像として生成してくれます。
簡易的にページ全体の見た目をチェックしたい場合は、このスクリーンショット生成が有用です。
仮想マシンによるブラウザテスト
ウェブサイトを全体的にチェックしたいのであれば、仮想マシンを用いたチェックを行います。
仮想マシンとは、かんたんに言えばパソコンの中に作られた仮想的なパソコンのことです。たとえばOS X上で仮想マシンを構築し、その仮想マシンにWindows OSをインストールすることができます。そうすると、OS Xはそのままいつも通り動作し、その中のウィンドウのひとつとしてWindows PCがまるごと動作している形になります。
Microsoft Edge Devでは、ブラウザテスト用に各種Windows OSとブラウザをセットにした仮想マシンを無償で配布しています。本稿ではその仮想マシンを用いてブラウザテストを行う方法を説明します。
VirtualBoxのインストール
仮想マシンを構築するアプリケーションとして、本稿では「VirtualBox」を使用します。VirtualBoxはOS Xで使える無償の仮想マシンアプリケーションです。
1. VirtualBoxのダウンロードページからOS X用のディスクイメージをダウンロードします。
2. ダウンロードしたディスクイメージをマウントし、インストーラを起動します。あとはウィザードにしたがっていけばVirtualBoxをインストールできます。
仮想マシンの構築
1. Microsoft Edge Devの仮想マシンのページから、目的の仮想マシンをダウンロードします。ここでは仮想マシンは「IE8 on Win7」、プラットフォームは「VirtualBox」を選択し、ダウンロードします。
2. ダウンロードしたZipファイルを展開します。ここではWindows 7とInternet Explorer 8のセットをダウンロードしたので「IE8 – Win7.ova」というファイルが展開されます。
3. VirtualBoxを起動します。前項でVirtualBoxをインストールしていれば「アプリケーション」フォルダの中にあります。
4. 「ファイル」メニューの「仮想アプライアンスのインポート(I)…」をクリックします。
5. 「インポートしたいアプライアンス」ダイアログで先ほど展開した「IE8 – Win7.ova」ファイルを指定し(フォルダのアイコンをクリックするとファイル選択ダイアログが表示されます)、「続ける」をクリックします。
6. 「アプライアンスの設定」ダイアログで「インポート」をクリックします。
7. インポートが完了するとVirtualBoxのウィンドウに「IE8 – Win7」の項目が表示されます。「IE8 – Win7」を選択してツールバーの「起動」をクリックしてください。
8. 下図のように、OS Xの中の、ひとつのウィンドウの中でWindowsが起動します。
9. 仮想マシンのWindows上でInternet Explorerを起動すると下図のようになります。
これで、Macを使用しつつInternet Explorerのブラウザチェックができる環境が完成しました。
ひとつの仮想マシンでチェックできるInternet Explorerのバージョンはひとつです。ブラウザテストを行いたい環境が複数ある場合、その数だけこの項の手順を繰り返す必要があります。
また、Microsoft Edge Devからダウンロードした仮想マシンはテスト用途で使用できるライセンスです。インストールから90日後にライセンスが切れて仮想マシンのWindowsは使用できなくなります。デスクトップに書かれているように、スナップショット・バックアップを取っておくとよいでしょう。ライセンスについてはMicrosoft Edge Devのページを参照してください。
まとめ
本稿ではMacでInternet Explorerのブラウザテストを行う方法を説明しました。Microsoftのウェブ開発者向けウェブサイト「Microsoft Edge Dev」を紹介し、スクリーンショットの生成による表示チェックと、仮想マシンの構築方法について説明しました。
Internet Explorerでのブラウザテストを行わなければならないときは、本稿の情報を参考にしてみてください。