大阪のホームページ制作会社 i.M.Design INFORMATION MEDIA DESIGN ロゴ

06-6809-5021

Columnコラム

WEBサイト制作

2014.10.27

仮想環境(VirtualBox)で古いIEの表示確認を行う

仮想環境(VirtualBox)で古いIEの表示確認を行う

Webサイトの制作時にたびたび問題になるのが古いIE(Internet Explorer)ですよね。最新のブラウザでは問題なく表示できていても、古いIEで見ると崩れる…ということはよくあると思います。

ここでは、オープンソースの仮想化ソフトウェア VirtualBox を使って古いIEの確認環境を作成する手順を記載します。

modern.IE

IEは原則としてひとつのPCに1バージョンしかインストールできません。
また、古いWindowsにしかインストールできないバージョンもあるので確認環境の構築がなかなか難しいという問題があります。

そこで便利なのがPC上で別のOSを実行できる仮想マシンです。
マイクロソフトが提供しているmodern.IEというWebサイトから複数のIEをテストできる仮想OSが提供されているので、それを使って確認環境を構築することができます。
modern.IE

VirtualBoxのダウンロード

まず、Windowsの仮想OSを動かすためのソフトウェア「VirtualBox」をインストールします。 VirtualBoxは以下のページからダウンロードできます。
Downloads – Oracle VM VirtualBox

各種OS用のインストーラがありますので、自分のOS用のものをダウンロードします。
以下はWindows用のもので進めます。

VirtualBoxのインストール

ダウンロードしたインストーラを実行します。
途中以下のような画面が表示されます。

vbox_install_4

「インストール中にネットワークが切断されます。」という警告です。
他にダウンロード中のファイルがあると止まってしまう可能性があるので注意してください。
問題なければYesを押してインストールを進めます。

インストール中に複数ダイアログが表示されますが、すべてOKを押してインストールします。

Windowsの仮想イメージをダウンロード

次に古いIEがインストールされたVirtualBox用のWindows仮想イメージをダウンロードします。
modern.IEの以下のページからダウンロードできます。
仮想化ツール

ページ 3

VirtualBox用の仮想OSのリストが表示されるので、必要なOSのファイルをすべてダウンロードします。
今回はWindows7のIE8の環境をダウンロードしました。
ちなみにダウンロードできる環境はすべて英語版のWindowsです。

ページ 1

ダウンロードファイルは分割ファイルになっています。
すべてのファイルを同じフォルダに置いて、part1.exeを実行するとVirtualBox用の .ova ファイルができます。

ページ 2

仮想OSをVirtualBoxにインポートする

VirtualBoxを起動して、メニューの「ファイル」から「仮想アプライアンスのインポート」を選びます。
ファイルを選択するダイアログが表示されるので、先ほど作成した「IE8 – Win7.ova」を選択してインポートします。
インポートにはしばらく時間がかかります。

vbox_import_1

仮想OSを起動する

インポートできたら「起動」のボタンで仮想OSを起動します。

vbox_win7_0

Windowsが起動します。

vbox_win7_1

IEを起動する

タスクバーに表示されいるアイコンをクリックしてIEを起動します。
バージョンを確認すると、ちゃんとIE8になっていますね。

vbox_win7_3

日本語言語パックをインストールする

さて、無事古いIEが起動できましたが、OSが英語版なので日本語入力ができません。
日本語入力が必要な場合は、日本語パッケージを導入することで可能になります。
なお、Windows Update をするので結構時間がかかります。

※注意
以下はWindows7での手順です。
WindowsXPではWindows Updateでの言語パック追加はできませんでした。

スタートメニューから「Control Panel」→「System and Security」→「Windows Update」とクリックして、Windows Updateの画面を開きます。
画面を開くと「Check for updates」というボタンがあるのでクリックします。

vbox_win7_8

今回インストールしたWindows7では、しばらくするとWindows Updateの更新のための画面が出ました。Windows Updateのシステムそのものを更新しないと、その他の更新が出来ないようなので「Install now」をクリックして続行。

vbox_win7_9

しばらく待つとその他の更新を行う画面が表示されます。
まだ「Install updates」のボタンは押さないでください。
IEが最新版に更新されてしまいます。


まず、「important updates are available」のリンクをクリックして、Internet Explorerのチェックを外します。これで最新のIEに更新されるのを防げます。

vbox_win7_11

加工画像

この状態でOKを押します。
ちなみに、その他のSecurity Updateもチェックを外すと更新時間を短縮できます。(セキュリティは下がります)

次にオプションの日本語言語パックのインストールを有効化します。

vbox_win7_11 コピー

vbox_win7_24

この状態でOKを押すと元の画面に戻るので、「Install updates」ボタンを押して更新をインストールします。

日本語化設定

日本語の言語パックをインストールしたので、設定を変更して日本語化します。
スタートメニューから「Control Panel」→Clock, Language, and Regionのブロックにある「Change display language」をクリックします。
開いた画面の Keyboards and Languages タブの「Change Keyboards…」をクリック。
日本語キーボードを追加します。

ページ 2

元の画面に戻って、Display languageを日本語に設定。

vbox_win7_19

OKを押すとログオフするか聞かれますが、一旦NOを選択します。
同じ画面の「Formats」タブを開いて、FormatをJapaneseに変更後、OKボタンを押して設定を適用します。

vbox_win7_26

一旦ログアウトして再びログインすると日本語に切り替わっています。
(ログインパスワードは”Passw0rd!”)

vbox_win7_27

キーボード配列は英語配列で認識されているようで全角/半角キーなどが認識されませんが、言語バーからHiraganaなどを選択すると日本語入力ができます。

最後に

以上、これで複数のPC・OSを用意しなくても過去のIEで確認ができますね。 ちなみに仮想OSは利用期限が設定されているようですが、期限が切れた場合も再度VMのセットアップを行えば使えるようです。
その他の注意事項など、以下のサイトに詳しく書かれていましたので、参考になるかと思います。
無料でIEのマルチバージョンテスト「Modern.IE」開発での利用時の注意点 – ふろしき.js

この記事を共有する