Hatena::ブログ(Diary)

しゃの

2013-04-07

Mac+VirtualBox+modern.IEでIE6~10環境を無料で構築する

| 03:19

3月中に出すって言ってたmodern.IE日本語版が先日公開されていて、

ホーム | Internet Explorer の検証がより簡単に | modern.IE

※どうでもいい話だけど、modern.IEレスポンシブデザインだったりする


複数メディアで取り上げられてた。

マイクロソフト、ブラウザーの互換性検証サイト「modern.IE」日本語版を公開 -INTERNET Watch

ニュース - 日本MS、Webサイト検証ツール「modern.ie」の日本語版を公開:ITpro

マイクロソフト、Webページ検証サイト「modern.IE」の日本語版を公開 | 開発・SE | マイナビニュース


提供サービスは2つ。

・有料:検証webサービス(2014年1月10日3ヶ月まで無料キャンペーン中 ※要Facebookアカウント)

・無料:検証用仮想環境の配布


検証用仮想環境は幅広く対応していて、MicroSoftの本気具合が伺える。

<検証用仮想環境対応一覧>


Mac+VirtualBoxで検証用仮想環境を構築してみるの巻。


1、modern.IEから配布環境をダウンロード

まずここへ。

| Internet Explorer の検証がより簡単に | modern.IE


で、OSを選択して

f:id:syan0:20130408025124p:image


仮想環境にVirtualBoxを選択すると、

f:id:syan0:20130408025125p:image


ダウンロード先が出てくる。

f:id:syan0:20130408025126p:image


IE6 - XPIE8 - XPはファイル一つだけなんでそのままダウンロード

他のは複数あるので一番下の「Grab them all with cURL」をクリック。

f:id:syan0:20130408025127p:image


ポップアップで出てきた「curl -O "http://virtualization.modern.ie/vhd/IEKitV1_Final/VirtualBox/OSX/~」をTerminal.appにコピペして実行。

f:id:syan0:20130408025135p:image


ユーザーフォルダに保存されていく。

f:id:syan0:20130408025128p:image


1.5、VirtualBoxダウンロード

modern.IEの方は結構ファイルサイズ大きくてすぐにダウンロード終わらないんで、その間にVirtualBox

Downloads – Oracle VM VirtualBox


VirtualBox 4.2.10 for OS X hosts x86/amd64 を選択。

f:id:syan0:20130408025129p:image


インストール方法は説明するまでもないので端折る。


2、解凍して.ovaファイルをVirtualBoxに突っ込んでく

modern.IEからダウンロードが終わったら、ファイルを解凍して.ovaファイルを手に入れる。

IE8 - XP

.ovaのままダウンロードできるので一旦放置。


・IE6_WinXP.ova.zip

Mac標準のアーカイブユーティリティ.appを使うと、.ovaまで解凍してしまうので、StuffIt Expander.appとかThe Unarchiver.appで解凍する。

Mac App Store - StuffIt Expander

Mac App Store - The Unarchiver


・Terminal.appでダウンロードしたもの

一通りダウンロードが終わると、***.Part1.sfx、***.2.rar、***.3rar ~ と揃ってるはず。

f:id:syan0:20130408025130p:image


ここで.sfxって初見の拡張子が出てきたので調べてみると、

.sfx

読み方:エスエフエックス

.sfxとは、自己解凍書庫解凍ツールを必要としない圧縮形式で圧縮されたファイル)を作成する際に用いられるファイルに付く拡張子のことである。

すべての形式で用いられるわけではないが、ZIP形式やRAR形式で自動解凍書庫を作成する際には.sfxファイルが用いられている。

.sfx エスエフエックスとは:この拡張子のファイルを開くには? - 拡張子辞典 - IT用語辞典バイナリ

というものらしい。これを使って解凍していく。

Terminal.appを起動。chmodコマンドで.sfxファイルに実行可能権限を追加する。

例)chmod +x IE7.Vista.For.MacVirtualBox.part1.sfx

f:id:syan0:20130408025131p:image



  • chmod(パーミッション変更コマンド)
    • +(権限指定:後術権限の追加)
    • x(実行可能権限)

これをすると、

f:id:syan0:20130408025132p:image


てなってたのが、Unix実行ファイルになる。

f:id:syan0:20130408025133p:image


権限追加を終えたら、Terminal.appで起動させる。しばらくかかる。

例)./IE7.Vista.For.MacVirtualBox.part1.sfx

※./をつけないで実行すると、bashにこんなんねーよばーかって怒られる。

f:id:syan0:20130408025134p:image


無事終わると同階層内に.ovaファイルができてるはず。


---


.ovaファイルがある + VirtualBoxインストール済みなら、.ovaファイルをダブルクリックVirtualBoxに突っ込むことができる。

その際、仮想環境上の設定画面が出てくる。

仮想環境はメモリちゃんと割り当てておかないと厳しいらしいので、増やしとくといいかもしれない。

※後から設定変更が可能なのでスルーしてもok

f:id:syan0:20130408025136p:image


で、インストール開始。しばらくかかる。


3.5、予備知識を仕入れておく

インストールしてる間に色々見る。

ぱっと調べた感じ、下記辺りは目を通したほうがいいかも。


※英語

Making Internet Explorer Testing Easier with new IE VMs - Rey Bango

「Time Limits on the VMs」って項目を見ると、時間制限が受けられてるという話で、それに対する内容が書かれてる。

コメント欄でも何かと話が出てる模様。(ページ内をlimitで検索すればひっかかる)


modern.IEにのっかってみる(ievmsから乗り換え計画) - sugilogのブログ

一番下の「IEでのデバッグ環境構築。」の項目に、IEデバッグ環境を構築するための云々が紹介されてる。


無料でMacでIEの表示テストをする方法 │ Design Spice

一番下の「補足」、設定変更で日本語表示にする話。

重要なのはXP環境では日本語表示ができないということ。

日本語環境追加するにはインストールCDが必要なので、諦める。

スクリプト確認とかなら日本語は関係ないので、そういうのに使うのがよさそう。

※modern.IE日本語版公開に合わせてどうにかしてくれるかなと期待してたけどダメだった


4、VirtualBoxから起動する

インストール終わったら、左のOS一覧からダブルクリックするか、選択して上部起動ボタンで起動できる。

f:id:syan0:20130408025137p:image


そんな感じでひとまず完成。お疲れさまでした。

日本語表示設定は起動したWindowsのコントロールパネルから設定する。

さっきのリンク先見たりとかぐぐったりすればわかるはず。

試しにIE9 -Win7Yahoo.co.jp見たけど、問題無さげでした。

f:id:syan0:20130408030914p:image

f:id:syan0:20130408030915p:image


Twitterウィジェット見たら漢字が若干中華だったんで、多分フォント足りてないのかもしれない。

でもまあ基本問題ないかと。


番外、VirtualBoxの設定

とりあえず[環境設定]→[言語]→[日本語]にしておけば謎要素は減る。

VirtualBox - Mac間で共有フォルダ設定が出来たりとか色々便利機能あるらしいけど全然把握できてないのでそのうち。


公式マニュアル※英語

https://www.virtualbox.org/manual/UserManual.html

日本語解説

VirtualBoxのインストール・設定・使い方を詳しく解説 | VirtualBox Mania

トラックバック - http://d.hatena.ne.jp/syan0/20130407/1365358782
リンク元