Macでmodern.IEとVMWareを使ってInternet Explorerのテスト環境を構築してみる
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をサポートする際に役立つ新しいツール類ということでいくつかのツールが用意されています。
- Webページのスキャン:WebページをスキャンしInternet Explorer向けの問題をフィードバック
- 複数のブラウザーにわたってテスト(1):BrowserStack によるテストが 3 か月間無料
- 複数のブラウザーにわたってテスト(2):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をダウンロードします。
ダウンロードした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という名前のファイルができあがります。
Windows XPを起動する
IE6.XP.For.MacVMware.vmwarevmをダブルクリックしてVMWare FusionのWindows XPを起動します。なにやら聞かれますがとりあえず「コピーしました」を選択しましょう。
懐かしいboot画面ですね。
Windows XPのデスクトップが起動しました。
Internet Explorer 6を起動する
Internet Explorer 6を起動してみましょう。言語設定が英語の状態なので少し戸惑うかもしれませんがわかると思います。
日本語が表示されない・・・
見るとわかると思いますが、日本語が表示されません。
言語設定を変えてみようと思いましたが、どうやら日本語の言語設定ファイルがインストールできないようです。
日本語フォントをインストールしてみる
Windows XPのフォントと言えばMSPゴシックですよね。言語設定は変えられないけれど、日本語フォントをインストールすると日本語は表示できるようになるそうです。どこからかMSPゴシックまたはMSゴシックを入手してきてください。
これでInternet Explorerを再起動して適当にサイトを表示してみます。無事日本語が表示されたのでテストはできそうです。
IE10 - Windows 8の場合
続いてWindows 8の環境も作ってみましょう。こちらはWindows XPと違い、3つのファイルをダウンロードします(若干時間がかかります)。
ダウンロードしたファイル
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の起動
Internet Explorer(Windows 8版)
Windows 8 の起動直後はStart画面が表示されます。
Internet ExplorerのアイコンをクリックしてWindows 8版のInternet Explorerを起動してみます(何も表示されていませんが問題なく使えます)。
Internet Explorer(IE10 - Desktop版)
Start画面からDesktopのアイコンをクリックしてデスクトップに移動します。タスクバーにInternet ExplorerのショートカットがあるのでこれをクリックしてInternet Explorer 10を起動してみましょう。
無事起動できました。日本語の表示も問題なさそうですね。これで手順の解説は終わります。
最後に
ライセンスの問題
ライセンスの問題で、実際いつまで使えるのかというのが気になるところ。「Making Internet Explorer Testing Easier with new IE VMs」曰く何らかの形で延長できるよう検討しているとか。他の情報も探しましたが答えを見つけられませんでした。誰か知っていたら教えてください。自分でも使い続けてみて確認したいと思います。
Internet Explorerに関する記事
過去に投稿されたこちらの記事も参考にどうぞ。
- 身につけておきたいWebサイト高速化テクニック #2|検証ツールとそもそもHTTPって何だ編
- 【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】
- 【レポート】HTML5✕Internet Explorer 〜IEを使ってどこまでモダンなWebへ突き進めるのか?〜 に参加してきた
- 【Web開発者必見!】Windows8タブレット向けWebサイトを構築する際に知っておくべき9つのポイント