このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2016.05.22

【無料】MacでIEブラウザのテスト環境(modern.IE)を構築する方法

スクリーンショット 2016-05-21 22.29.51

どもです。

去年まではAndroidさんと仲良くさせていただいたのですが、最近ではもっぱらIEさんだったりもします。

最近のIEさんはワガママ言わずきちんと仕事を行って頂けるので有難いです。

とは言え、ちょっと変わった事しようとすると、様子がおかしくなったりもしますよね。

Macだと、WindowsをvirtualboxやParallels®にインストールしたりして確認するのですが、IE8とかIE9とかちょっと前のブラウザだと確認ができなかったりします。

今回は、個別にWindowsをインストールせずに、IEのレガシーバージョンを使用する方法Virtualboxにmodern.IEを構築する方法となります。

 

VirtualBoxインストール

VirtualBoxの詳細に関しては割愛させていただきます。

以下のページよりダウンロードして、インストールを行いましょう。

ダウンロード

https://www.virtualbox.org/wiki/Downloads

 

スクリーンショット 2016-05-22 2.38.48

for OS X hosts」 のファイルをダウンロードしてインストールしましょう。

 

Windows (modern IE)のインストール

VirtualBoxのインストールは完了しましたでしょうか。

それでは、早速 VirtualBoxにWindows(modern IE)をインストールしていきます。

こちらのページより、Windows(modern IE)のイメージファイルをインストールしましょう。

Download virtual machines

Download virtual machines

スクリーンショット 2016-05-21 21.31.27

「Mac」のタブを選択。

Virtual machineの項目ではインストールするWindowsとIEのバージョンを選択します。

スクリーンショット 2016-05-21 21.30.50

Select platformの項目ではお使いのPCにインストールされている仮装環境を選択します。

スクリーンショット 2016-05-21 21.31.13

それぞれ選択完了すると、右の枠が以下の様な表示になりますので、「Download.zip」ボタンをクリックしてダウンロードしましょう。

スクリーンショット 2016-05-21 21.31.36

容量が3GB程あり、ダウンロードにも時間が少々かかります。

ダウンロード完了しましたら、ファイルを解凍、するとこの様な「.ovf」ファイルが解凍されますので、ダブルクリックで展開します。

スクリーンショット 2016-05-21 22.07.01

「.ovf」ファイルをダブルクリックすると、 VirtualBox が立ち上がり、以下の様な表示になり、ここでは仮想マシンのスペックを設定することができますが、後からも変更が行えますので、何も変更せず「インポート」を押下

スクリーンショット 2016-05-21 22.07.25

スクリーンショット 2016-05-21 22.13.19

すると、インストールが始まります。

インストールが完了すると、VirtualBox の左のリストに追加されますのでダブルクリックで起動。

スクリーンショット 2016-05-21 22.14.44

すると、Windowsが起ちあがります。

Windows7_Beta_Boot_Screen

キター!

スクリーンショット 2016-05-21 22.15.30

と、簡単にWindows(modern IE)を使用する事ができます。

IEのアイコンをクリックすると、Win7のIE8をインストールしたのでIE8が起動するのが確認できます。

スクリーンショット 2016-05-21 22.17.09

このままで、使用できるのですが、使い勝手が悪いので扱いやすく設定を行っていきましょう。

 

日本語キーボードを設定

今のままでは、「日本語」が入力できませんので入力できる様に設定していきます。

デバイスマネージャを開く為、

「スタートメニュー」 → 「検索ボックス」で「devmgmt.msc」と入力します。

スクリーンショット 2016-05-21 22.20.39

「Device Manager」が起動しますので「Keyboards」 → 「Standard PS/2 Keyboard 」をクリック。

win1

win2

Properties が表示しますので、「Driver タブ」から 「Update Driver」 ボタンを押下。

win3

Browse my computer for driver software」 を押下。

win4

Let me pick from a list of device drivers on my computer」 を押下。

win5

「Show compatible hardware」 のチェックを外し、「Standard keyborads」より 「Japanese PS/2 Keyboard (106/109 Key Ctrl + Eisuu」 を選択します。

選択しましたらNext を押下。

win6

手順に従いインストール完了後、仮想マシンを再起動します。

再起動してもまだキーボード配列は英語のままなので更に設定を行っていきます。

言語設定を Japanese にする為、コントロールパネル より 「Change display language」 を押下。

win7

Administrative」 タブから 「Change system locale」 をクリック、「Japanese(Japan)」 を選択。

win8

ここまで行いましたら、再起動します。

再起動後、タスクトレイに 「EN」 という言語選択のアイコンが表示しますのでクリックし、「JP」 を選択することによって日本語キーボードに変更する事ができます。

スクリーンショット 2016-05-21 22.28.18

このままでも良いのですが、起動する度に切り替えないといけなくなりますので、デフォルトを Japaneseになる様に設定していきます。

Region and Language」をクリック。

win9

Keyboards and Languages」タブより「Change keyboards」を押下。

Default input language」 を「Japanese(Japan)- Microsoft IME」に変更。

win10

これで日本語入力ができる様になりました。

更に設定していきましょう。

 

タイムゾーンを日本に変更

続いてはタイムゾーンを日本に変更しましょう。

先ほどの「Region and Language」から今度は「Fomats」タブを選択。

Format」を 「Japanese(Japan)」に変更。

スクリーンショット 2016-05-21 22.33.00

続いて「Location」タブを選択し「Current location」を「Japan」に変更します。

スクリーンショット 2016-05-21 22.33.27

タイムゾーンの変更を行います。

コントロールパネル の 「Change the time zone」 をクリックし、「Osaka, Sapporo, Kyoto」 を選択。

win11

win12

これでタイムゾーンの設定も完了しました。

続いて、「Guest Additions」をインストールしていきましょう。

 

Guest Additions をインストール

Guest Additions」をインストールする事によって更に使い勝手が向上します。

 

・VirtualBoxの画面を最大化(拡大)した際、 Windows の画面サイズも変更

・クリップボードの共有

・ドラッグアンドドロップでファイル追加

などなど。が行える様になります。

それでは、VirtualBoxのWindowsがアクティブの状態の時に 画面上のメニュー「Devices」より「Insert Guest Additions CD image..」を選択します。

win13

 

エクスプローラーを起動するとこのように「VirtualBox Guest Additions」というイメージファイルがマウントされているので、クリックし「VBoxWindowsAdditions」をダブルクリックで「VirtualBox Guest Additions」 のインストーラーが起ちあがります。

win14

win15

「Yes」を押下。

スクリーンショット 2016-05-21 23.18.58

「Next」を押下。

スクリーンショット 2016-05-21 23.24.19

インストール先を指定。

特に指定がなければそのまま「Next」を押下。

スクリーンショット 2016-05-21 23.24.32

デフォルトのままでも良いですが、「Direct3D Support」も使用する際はチェックを入れて「Install」を押下。

スクリーンショット 2016-05-21 23.25.26

インストールが始まります。

スクリーンショット 2016-05-21 23.25.35

インストールが完了したら以下の様なダイアログが表示しますので「Finish」を押下し再起動。

スクリーンショット 2016-05-21 23.25.54

これで、「VirtualBox Guest Additions」のインストール完了。

それでは、Virtualboxのwindow幅に合わせてWindows の画面サイズも変更する様に設定しましょう。

 

 

VirtualBoxの画面を最大化(拡大)した際、 Windows の画面サイズも変更

Virtualboxのwindow幅に合わせてWindows の画面サイズも変更する様に設定します。

と言っても大した事は行わず、

VirtualBoxのWindowsがアクティブの状態の時に 画面上のメニュー「View」メニューより「Auto-resize Guest Display」を選択するだけ。

スクリーンショット 2016-05-22 0.19.44

 

Virtualboxのwindow幅に合わせてWindows の画面サイズも変更するのが確認できます。

スクリーンショット 2016-05-21 23.54.20

 

双方向の クリップボード共有 の有効化

もっと使い勝手よくするため、MacでクリップボードにコピーしたものをVirtualboxのWindowsでもペーストできる様に設定しています。

VirtualBoxの起動メニューを開き、左のリストの「IE8 – Win7」(インストールしたwindows)を選択した状態で、画面右の「一般」をクリックします。

スクリーンショット 2016-05-22 0.02.22

スクリーンショット 2016-05-22 3.58.37

すると、以下の様に表示しますので「一般」→「高度(A)」タブを選択し、「クリップボードの共有」を「有効」に選択します。

英語表示のままの方は「General」→「Advanced」タブ→「Shared Clipboard」を「Bidirectional」に選択。

スクリーンショット 2016-05-22 0.04.05

これで完了。

ドラッグ&ドロップ」も同様に「有効」にすることでMacからWindowsにファイルをドラッグ&ドロップで追加する事ができます。

 

Windows と Mac で共有フォルダを設定

更に、VirtualBoxのWindowsとMacの共有フォルダの設定を行なっておくと、何かと便利なので設定していきましょう。

こちらもクリップボードの共有同様、

VirtualBoxの起動メニューを開き、左のリストの「IE8 – Win7」(インストールしたwindows)を選択した状態で、画面右の「共有フォルダー」をクリックします。

スクリーンショット 2016-05-22 4.19.15

クリックすると、以下の様な表示となりますので、画面右にあるフォルダアイコンをクリックします。

win16

すると、この様な表示になりますので、パスを指定し「自動マウント」にチェックを入れましょう。

スクリーンショット 2016-05-22 0.11.46

スクリーンショット 2016-05-22 0.12.12

これで、VirtualBoxのWindowsとMacの共有フォルダの設定は完了です。

スクリーンショット 2016-05-22 0.15.17

Windows側を確認すると、共有フォルダがマウントされているかと思います。

キーバインドを Mac と統一

大分、使い勝手が良くなったのですが、キーバインドが異なっているのでMacのショートカットキーが使えない状態だったりします。

command」+「c」でコピーできる様、Macの「command」キーをWindowsと合わせる様に設定しましょう。

 

ホストキーの変更

VistualBoxにはホストキーという特殊なキーが用意されています

仮想マシンを操作している場合でも、このキーを使えばホスト側の操作ができるという大変便利なキーになります。

初期設定では、Mac版VirtualBoxのホストキーは「左コマンドキー」となります。

Macで最も頻繁に利用するキーのひとつなので、仮想マシンで作業中に思わぬ操作をすることが多々ありますので、それを防ぐためにホストキーを変更します。

画面上のメニュー「VirtualBox」→「環境設定」を選択。

スクリーンショット 2016-05-22 0.22.30

「入力」の項目を選択。

スクリーンショット 2016-05-22 14.11.57

キーボードの自動キャプチャー

キーボードの自動キャプチャーのチェックを外します。

これにチェックを入れると、仮想マシンのウィンドウがアクティブになったキーボードが自動的に仮想マシン上のキーボードに変わる様になっております。

キーボードがキャプチャーされるとすべてのキーが仮想マシンに送られ、ウィンドウを切り替えるだけで、自動的にキャプチャーされてしますので、チェックを外しておきましょう。

スクリーンショット 2016-05-22 14.12.05

続いて、「ホストキーの組み合わせ」の変更。

初期設定では「左command」キーとなっているので、「右command」キーに変更。

スクリーンショット 2016-05-22 14.12.12

 

KeySwap

スクリーンショット 2016-05-22 0.31.54

KeySwap for XP」の「ダウンロード」からダウンロード。

ファイルを解凍し、「KeySwap」をWindows側で実行します。

スクリーンショット 2016-05-22 0.38.28

この際、ダブルクリックで実行しようとすると、権限がなく実行できないので、

右クリックでメニューを出し「Run as administrator」を選択して管理者権限でファイルを実行しましょう。

スクリーンショット 2016-05-22 14.19.22

ダイアログが表示しますので、「Run」を押下。

実行。

スクリーンショット 2016-05-22 0.38.41

KeySwap設定」が表示しますので、こちらで変更を行います。

スクリーンショット 2016-05-22 0.41.48

【キー名】に「左Win」

【変換キー名】に「左Ctrl」(1D)を入力。

スクリーンショット 2016-05-22 0.43.38

これで、Macのキーバインド同様、「command」+「c」でコピー、「command」+「v」でペーストができる様になったかと思います。

 

日本語表示パッケージをインストール

かなりいい感じなんですが、今のWindowsは英語版なのでメニューなども日本表示になる様に、日本語表示パッケージをインストールします。

まずは、スタートメニューの「Control Panel」をクリックします。

スクリーンショット 2016-05-22 1.17.05

System and Security」をクリックします。

win17

「Windows Update」セクションの「Check for updates」をクリックします。

win18

Windows Update」のページに切り替わったら「Check for updates」ボタンを押し、更新チェックが終わるのを待ちます。

win19

スクリーンショット 2016-05-22 15.03.22

ここではまだ「Install updates」ボタンは押さない様に気をつけてください。

今の状態で押してしまうと、IE10がインストールされてしまいますので

19 important updates are available」のリンクをクリックし、「Internet Explorer 10 for Windows 7」のチェックを外します。

画面左の「Optional」タブをクリックしてタブを切り替えて、「Japanese Language Pack – Windows 7 Service Pack (KB2483139)」にチェックをつけて「OK」ボタンを押下。

Windows Updateの画面に戻ったら「Install Updates」ボタンを押下。

インストールが完了したら、「Restart now」ボタンを押下で再起動。

 

Windows 側から Mac上のサーバにアクセス

VirtualBoxではデフォルトで、仮想マシンのデフォルトゲートウェイが「10.0.2.2」に設定されているので、 ホスト側の Mac のIPアドレスは「10.0.2.2」としてアクセスすることができます。
※ 実際に Mac に割り当てられているローカルIP(例:192.168.XXX.XXX ) を指定しても良いのですが、それだと恐らく一度ルーターを経由してのアクセスとなってしまうので、ややもっさりした挙動になってしまうと思います。

例えば、Mac 上に ポート3000番 で Railsサーバ を起ちあげている場合だと、Windows側のブラウザで、「http://10.0.2.2:3000 」を入力すれば確認できます。

 

スクリーンショット 2016-05-22 15.20.04

無事、アクセスでき確認する事ができました!

というわけで、長かったのですが、個別にWindowsをインストールせずに、IEのレガシーバージョンを使用する方法Virtualboxにmodern.IEを構築する方法でした!

ではでは。

wins

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。