話題の記事

Macでmodern.IEとVMWareを使ってInternet Explorerのテスト環境を構築してみる

野中 龍一

2013.08.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Internet Explorerのテストって手間ですよね。
そもそも古いInternet Explorer（6-8）には対応したくないものですが、そうも言っていられないのが普通で嫌々対応することになると思います。IE8以上にあるF12開発者ツールやIE Testerなんてありますが、今回は少し前から話題になっていたInternet Explorerの実行環境を仮想マシンとして作れるmodern.IEを使ってみることにしました。

今回はMacOSのVMWareを前提として紹介します。

VMWare Fusionとは

VMware Fusion 5 は、Mac 上で Windows プログラムを実行するための、ホーム ユーザーに最適な、迅速、容易、かつ信頼性に優れたソリューションです。 VMware Fusion

VMWare Fusionの良いところ

私自身もつい最近使い始めたもので詳しくは知りませんでした。主にこんな良さがあるようです。詳しくは日本語の製品サイトをご覧ください。

  • PC から Mac への容易な移行を実現
  • お気に入りの Windows プログラムを実行
  • Mac 上で Windows プログラムを容易に実行
  • Mac アプリケーションと同様に Windows プログラムを実行
  • Windows プログラムの操作方法を選択可能
  • ジェスチャーとの連携
  • Windows 固有のデバイスを Mac 上で使用
  • Boot Camp の機能を完全に補完
  • 万全な Windows 環境の保護

VMWare Fusionを使うには

VMWare Fusionは有料のソフトウェアです。宣伝をしても弊社は何ももらえませんが、VMware Fusion 5は6,257 円で購入できるようです（Professional版は12,508 円）。ご購入はこちらからどうぞ！

modern.IEとは

Web ページで最新バージョンと以前のバージョンの Internet Explorer をサポートする際に役立つ、新しいツール類です。 modern.IE

modern.IEに含まれるツール

Internet Explorerをサポートする際に役立つ新しいツール類ということでいくつかのツールが用意されています。

  1. Webページのスキャン：WebページをスキャンしInternet Explorer向けの問題をフィードバック
  2. 複数のブラウザーにわたってテスト（１）：BrowserStack によるテストが 3 か月間無料
  3. 複数のブラウザーにわたってテスト（２）：Mac、Linux、Windows 用の仮想マシンを使ったテストができる

この記事で試すのが3つ目の「Mac、Linux、Windows 用の仮想マシンを使ったテスト」ですね。

modern.IEの選べるOSと仮想マシンプラットフォーム

意外と多くの環境をサポートしています。タイトルの通り、今回はMacのVMWare Fusion上で使ってみます。

  • Windows
    • Hyper-V（Windows Server 2008 R2 SP1 上）
    • Hyper-V（Windows Server 2012 上）と Hyper-V 付属の Windows 8 Pro
    • Virtual PC（Windows 7 用）
    • Virtual Box（Windows 上）
    • VMWare Player（Windows 用）
  • Mac
    • Virtual Box（Mac 用）
    • VMWare Fusion（Mac 用）
    • parallels（Mac 用）
  • Linux
    • Virtual Box（Linux 用）

仮想マシンのOSイメージをダウンロードする

まずはIE6のテストができるWindows XPの仮想環境を作ってみましょう。こちらの「Mac、Linux、Windows 用の仮想マシンをダウンロードします。」から対象OSと仮想マシンを選択して対象のOSイメージIE6.XP.For.MacVMware.sfxをダウンロードします。

IE6.XPのOSイメージをダウンロード

ダウンロードしたOSイメージIE6.XP.For.MacVMware.sfxはそのままでは使うことができません。使うためには実行権限を与えること、実行権限のついたファイルを解凍することの2つが必要です。この処理はどのOSイメージでも共通して行わなければいけません。

ターミナルを起動する

まずはターミナルを起動しましょう。Spotlightで起動する場合はcontrol + spaceでter...と入力すれば候補に出てくるはずです。

デザイナーの方でもわかるように説明します。ターミナルを起動するとログインしているユーザーのrootディレクトリにいます。lsと入力してみてください。見慣れたフォルダ名が出てくるはずです。

$ ls
Applications Documents    Library      Music        Public       フォント
Desktop      Downloads    Movies       Pictures

今回はダウンロードしたファイルをデスクトップDesktopに置いてください。コンソール上もcd Desktop/でデスクトップに移動しましょう。移動してデスクトップにあるファイルをlsで確認してみましょう。IE6.XP.For.MacVMware.sfxが出てくれば問題ありません。

$ cd Desktop/
$ ls
...
...
...
...
IE6.XP.For.MacVMware.sfx

実行権限を与える

chmod +xで.sfxファイルに実行権限を与えます。

$ chmod +x IE6.XP.For.MacVMware.sfx

ファイルを解凍する

実行権限のついたファイルをコンソールから実行して解凍します。

$ ./IE6.XP.For.MacVMware.sfx

この際に階層指定./...をしないとコマンドと認識されてしまい動かないので注意が必要です。

解凍を実行するとこんな感じにログが流れます。

Creating    IE6.XP.For.MacVMware.vmwarevm                             OK
Creating    IE6.XP.For.MacVMware.vmwarevm/Applications                OK
Creating    IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app  OK
Creating    IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents  OK
Extracting  IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents/Info.plist  OK 
Creating    IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents/MacOS  OK
Extracting  IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents/MacOS/vmware-docker  OK 
Creating    IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents/Resources  OK
Extracting  IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents/Resources/docker.icns  OK 
Extracting  IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents/Resources/document.icns  OK 
Creating    IE6.XP.For.MacVMware.vmwarevm/Applications/Address Book — IE6.XP.For.MacVMware.app/Contents/Resources/English.lproj  OK
...

解答が終わると、VMWare Fusion用のIE6.XP.For.MacVMware.vmwarevmという名前のファイルができあがります。

できあがったVMWare Fusion用ファイル

Windows XPを起動する

IE6.XP.For.MacVMware.vmwarevmをダブルクリックしてVMWare FusionのWindows XPを起動します。なにやら聞かれますがとりあえず「コピーしました」を選択しましょう。

VMWareの起動

懐かしいboot画面ですね。

WindowsXPの起動

Windows XPのデスクトップが起動しました。

Windows XPのデスクトップ

Internet Explorer 6を起動する

Internet Explorer 6を起動してみましょう。言語設定が英語の状態なので少し戸惑うかもしれませんがわかると思います。

WIndows XP IE6を起動

日本語が表示されない・・・

見るとわかると思いますが、日本語が表示されません。
言語設定を変えてみようと思いましたが、どうやら日本語の言語設定ファイルがインストールできないようです。

言語設定で日本語は設定できない

日本語フォントをインストールしてみる

Windows XPのフォントと言えばMSPゴシックですよね。言語設定は変えられないけれど、日本語フォントをインストールすると日本語は表示できるようになるそうです。どこからかMSPゴシックまたはMSゴシックを入手してきてください。

フォントのインストール

これでInternet Explorerを再起動して適当にサイトを表示してみます。無事日本語が表示されたのでテストはできそうです。

フォントをインストールしたら日本語が表示されました

IE10 - Windows 8の場合

続いてWindows 8の環境も作ってみましょう。こちらはWindows XPと違い、3つのファイルをダウンロードします（若干時間がかかります）。

IE10 - win8に必要なファイルをダウンロード

ダウンロードしたファイル

1つの.sfxファイルと2つの.rarファイルです。

  • IE10.Win8.For.MacVMware.part1.sfx
  • IE10.Win8.For.MacVMware.part2.rar
  • IE10.Win8.For.MacVMware.part3.rar

ファイルの権限変更と解凍

IE6 - Windows XPと同じように権限の変更と解凍を行います。今回3つファイルがありますが、権限の変更と解凍のコマンドを指定するファイルはIE10.Win8.For.MacVMware.part1.sfxのみです。

コマンドは省略します。IE6 - WinXP版を参考にしてください。

解凍を実行します。

Extracting  IE10.Win8.For.MacVMware.vmwarevm/IE10 - Win8.vmsd         OK 
Extracting  IE10.Win8.For.MacVMware.vmwarevm/IE10 - Win8.vmx          OK 
Extracting  IE10.Win8.For.MacVMware.vmwarevm/IE10 - Win8.vmxf         OK 
Extracting  IE10.Win8.For.MacVMware.vmwarevm/IE10-Win8-0.vmdk         40%

Extracting from ./IE10.Win8.For.MacVMware.part2.rar

...         IE10.Win8.For.MacVMware.vmwarevm/IE10-Win8-0.vmdk         80%

Extracting from ./IE10.Win8.For.MacVMware.part3.rar

...         IE10.Win8.For.MacVMware.vmwarevm/IE10-Win8-0.vmdk         95%
...

これでIE6 - WinXPと同様にVMWare Fusion用のファイルIE10.Win8.For.MacVMware.vmwarevmができあがります。あとは同じように実行してください。

Windows 8の起動

Windows 8の起動

Internet Explorer（Windows 8版）

Windows 8 の起動直後はStart画面が表示されます。

Windows 8のスタート画面

Internet ExplorerのアイコンをクリックしてWindows 8版のInternet Explorerを起動してみます（何も表示されていませんが問題なく使えます）。

何も表示されてませんが起動できています

Internet Explorer（IE10 - Desktop版）

Start画面からDesktopのアイコンをクリックしてデスクトップに移動します。タスクバーにInternet ExplorerのショートカットがあるのでこれをクリックしてInternet Explorer 10を起動してみましょう。

Wndows 8 Internet Explorer 10

無事起動できました。日本語の表示も問題なさそうですね。これで手順の解説は終わります。

最後に

ライセンスの問題

ライセンスの問題で、実際いつまで使えるのかというのが気になるところ。「Making Internet Explorer Testing Easier with new IE VMs」曰く何らかの形で延長できるよう検討しているとか。他の情報も探しましたが答えを見つけられませんでした。誰か知っていたら教えてください。自分でも使い続けてみて確認したいと思います。

Internet Explorerに関する記事

過去に投稿されたこちらの記事も参考にどうぞ。

この記事を書くために参考にしたWebサイト

スキルアップ|初心者向け|書評|デベキャン|AWS認定|スキルアップ|デベキャンだより|勉強会|コミュニティ