MacでVirtualBoxとWindowsイメージを使ってIEテストする

# はじめに
Macで人力IEテストを行う方法をメモして置きます。
方法はすごく簡単で下記の項目を行うだけとなっています。

- VirtualBoxでWindows環境構築
- 開発環境でローカルサーバを立ち上げる
- プライベートIPを調べる
- VirtualBoxのIEにプライベートIPとローカルサーバのポート番号元にアクセス
- テストする


##環境
- MacBook Pro(8GB)
- Microsoft virtual machines
- VirtualBox
- python 2系/３系
- 25GB以上のストレージ容量

# 仮想イメージの取得

### 1.アクセス
下記リンクからMicrosoftが無償公開している仮想イメージのダウンロードを行います。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

### 2.[Virtual machine]の選択
仮想イメージは下記のファイルから選ぶことが可能です。
今回はIE11をテストする想定で、"IE11 on WIn81(x86)"選択します。
![スクリーンショット 2018-08-23 15.39.12.png](https://qiita-image-store.s3.amazonaws.com/0/226435/415874ea-3138-f2b1-1b92-ffe9feec9620.png)



### 3.[Select platform]の選択
VirtualBoxを使用するので"VirtualBox"を選択します。

![スクリーンショット 2018-08-23 11.33.52.png](https://qiita-image-store.s3.amazonaws.com/0/226435/7cf040ab-d518-1f40-3dbb-6ff16ba8cfad.png)

### 4. [DOWNLOAD .ZIP]の押下
7GB以上容量のあるファイルの為、少々時間がかかります！

# VirtualBoxの取得

### 1.アクセス
下記のサイトからVirtualBoxのダウンロードを行います。
https://www.virtualbox.org/wiki/Downloads

### 2.ダウンロード
Macの場合は"OS X hosts"のパッケージリンクを押下してダウンロードを行ってください。
![スクリーンショット 2018-08-23 11.46.46.png](https://qiita-image-store.s3.amazonaws.com/0/226435/1e70b567-75e2-e634-5ce4-3dffd120eb3b.png)

### 3. VirtualBoxのインストール
ダウンロードしたファイルを実行し、インストールを行います。

# 仮想イメージのインストール

### 1.イメージの実行
ダウンロードした仮想イメージの"IE11 - Win81.ovf"をダブルクリックしてください。
すると、下記画面が現れます。
![スクリーンショット 2018-08-23 13.50.54.png](https://qiita-image-store.s3.amazonaws.com/0/226435/d29be7ae-4036-4a44-fccf-6baab59c6444.png)

### 2.仮想設定、インポート
仮想環境の設定を行います。主にRAMの設定の変更を行います

RAMの容量をお使いのPCにあったサイズに変更しましょう。
今回は4096MBから2048MBに変更しました。

![スクリーンショット 2018-08-23 16.58.23.png](https://qiita-image-store.s3.amazonaws.com/0/226435/3b5b9db9-aade-3002-0c10-014c2309ab80.png)

問題がなければインポートボタンを押下します。
インポートには約17GBの程度容量を必要とします。


# 仮想環境の起動

### 1.仮想マシンの起動
インポートが完了するとVirtualBox上に仮想マシンが作成されているのでダブルクリックで起動します。
![スクリーンショット 2018-08-23 15.32.26.png](https://qiita-image-store.s3.amazonaws.com/0/226435/d4ada43a-0b52-3e7b-b229-ceb6f0bb6ae3.png)

しばらくすると下記画面が表示されます。
![VirtualBox_IE11 - Win81_23_08_2018_15_37_07.png](https://qiita-image-store.s3.amazonaws.com/0/226435/35ab13c3-8a64-9544-2f64-a9da141cc13a.png)

### 2.VirtualBox内の画面操作設定
画面をクリックすると下記ポップアップが表示されるのでキャプチャーを押下
VirtualBox内の画面操作が可能になります。
<img width="702" alt="スクリーンショット 2018-08-23 15.40.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/226435/cea0d3a7-8812-16fc-2246-a649dc9a6b1d.png">


# ローカル開発環境からIEテストを行う
これでVirtualBox内でWindows環境を構築しIEが使用可能になりました。
あとは開発環境でローカルサーバを立ち上げてその内容をVirtualBoxのIEで閲覧可能にし、テストするだけです。

### 1.ローカルサーバの立ち上げ
ここでは確認の為、htmlだけのシンプルなローカルサーバを立ち上げる説明を行いますが、
すでに何かしらローカルサーバを立ち上げられる環境があればそちらを使用してください。

#### 1-1. index.htmlを用意
任意のディレクトリにindex.htmlを用意してください。

#### 1-2. pythonでローカルサーバーを立ち上げる
上記htmlを用意したディレクトリに移動してから下記コマンドを実行

3系の場合

```python
python -m http.server 8000
```

2系の場合

```python
python -m SimpleHTTPServer 8000
```
> https://qiita.com/okhrn/items/4d3c74563154f191ba16

※起動に失敗する場合はdockerなど、他のサーバーが立ち上がっていないか確認してください。

#### 1-3.起動確認
サーバーが起動できたら下記にアクセスし、起動できている事を確認してください。
http://localhost:8000

### 2. プライベートIPアドレスの確認
ターミナルから下記コマンドを実行

```
ifconfig
```
左側の項目に表示される"en0"内の"inet"に表示されているアドレスがプライベートIPアドレスです。

### 3.VirtualBoxのIEでテスト
あとは取得したプライベートIPとローカルサーバ起動時に設定したポート番号を元にアクセスします。

```
http://<プライベートIP>:<ローカルサーバで設定したポート番号>
```

サーバーで立ち上げた内容がVirtualBoxのIEで閲覧できたらテストを行います。



### 注意点
以下の点に注意すればよいかと思います。
・仮想環境構築時、容量に余裕を持つ
・ローカルサーバー起動時ポートがかぶらないように