modern.IE 仮想マシンから Vagrant で作った開発環境にアクセスする方法
wakamsha
はじめに
普段の開発では Macbook 上で Google Chrome をメインに使っています。開発終盤までは Chrome のみで動作確認を行い、殆どの機能実装が終わってバグ潰しの段階になってから他のブラウザで確認して表示崩れやブラウザ特有のエラーを潰すようにしています。Safari や Firefox は Mac でも普通に見れるので問題ありませんね。iOS や Android といったモバイル環境に関しては、iOS Simulator や GenyMotion といったエミュレータである程度の確認は出来ますし、主要な端末は検証機として揃っているので、Mac に USB ケーブルで繋げば直接デバッグすることも出来ます。
では IE でのデバッグはどうすればいいのでしょうか？弊社では開発用の Macbook の他に勤怠管理といった庶務用途の WindowsPC も別に支給されていますが、開発環境を一切整えていないので、IE での動作確認は出来ても直接デバッグすることが出来ません。
BrowserStack という有料サービスを使えば Mac 上でも Windows マシンを立ち上げてそこで IE を操作することも可能ではあります。しかし BrowerStack はいわゆるリモートデスクトップのようなもので、あくまで他 OS のブラウザでの簡単な動作確認に用途をとどめています。そのため、解像度は何となく動いているかどうかが分かる程度のモノでお世辞にもキレイとはいえないですし、開発コンソールにある小さな文字は殆ど読むことが出来ません。動作もかなりモッサリしているので、なかなかスムーズにデバッグすることが出来いのが悩みどころです。
modern.IE から Windows の仮想マシンをインストールしてみた
modern.IE とは Microsoft が提供する動作検証のためのサービスの総称で、主に以下の内容を提供しています。
- Internet Explorer のバージョン間の違いに起因する Web サイトの問題点を自動的にスキャンするツール
- Web サイトのデバッグやテストに利用できる仮想環境を提供するサービス
他にも色々と便利なサービスがあるようですが、とりあえず Windows の仮想環境が手に入れば Mac でも IE での動作検証が出来るようになります。そんな訳で早速GETしてみます。
仮想マシンのダウンロード
トップページから仮想マシンダウンロードのページに進み、ダウンロードする OS と IE のバージョン、動作させるプラットフォームを選択して最後に Download Zip Archive を選択します。今回は以下の構成にしてみました。
- IE11 on WIn8.1
- VirtualBox (Mac用)
仮想マシンなのでファイルサイズは 4.9GB とかなりのサイズでしたが、自宅のわりと貧弱なネット環境でも 5 〜 10 分程度でダウンロードすることが出来ました。
仮想マシンのインストール
ダウンロードした Zip ファイルを解答すると、このような OVA ファイルが出てきます。ファイルサイズは 5.38BG。まぁまぁの大きさですね。ファイルをダブルクリックすると VirtualBox が起動して仮想マシンをインストールするためのウィザードが表示されます。
とりあえずそのままにしてインポートを開始しました。インストールする Mac のスペックにもよると思いますが、今回は3分程度で終わりました。
起動してみると、WindowsOS の初期化処理が始まりますが、特に自分で操作するようなことは何もありません。さすが動作検証用途に配布されているだけあって、すぐに使えるようになるのは便利ですね。
modern.IE 仮想マシンから Vagrant で作った開発環境にアクセスしてみる
僕は基本的に実務案件の開発環境は全て Vagrant で作っています。そのため既に VirtualBox がインストールされているので modern.IE の仮想マシンもすんなりインストールできたわけですが、modern.IE の InternetExplorer から Vagrant 内の Web アプリケーションにアクセスして動作確認が出来なければ何の意味もありません。そんな訳で、その設定をしてみるとします。
Vagrant 仮想マシンのネットワークを確認
はじめにアクセスしたい Vagrant 仮想マシンのネットワークを確認します。VirtualBox を開いて仮想マシン一覧から対象の Vagrant 仮想マシンを選択し、設定画面を開きます。
ネットワークタブを開き、アダプター2を開きます。ネットワークアダプターを有効化にチェックが入っており、割り当てにホストオンリーアダプターが選択されていることを確認します。そしてその名前が何なのかを確認します。僕の環境では vboxnet1 という名前が選択されていましたが、ここは皆さんそれぞれの環境で異なるかもしれません。
VirtualBox のネットワークを設定
⌘ + , を押して環境設定画面を表示します。ネットワークタブを選択し、DHCPサーバーを開きます。Vagrant仮想マシンのネットワークIPアドレスはデフォルトだと192.168.33.10となっていますので、それに合わせてこちらの画像にあるような設定をします1)インフラ関連の知識が殆ど無いので詳細までは把握していませんが、ひとまずこれで問題なく動作はします。。
入力が済んだら、環境設定画面を閉じます。
modern.IE 仮想マシンのネットワークを確認・設定
仮想マシン一覧からインストールした moern.IE 仮想マシンを選択して設定画面を開きます。
ネットワークタブを開き、アダプター2を開きます。Vagrant仮想マシンと同じくネットワークアダプターを有効化にチェックが入っていることと割り当てにホストオンリーアダプター、名前にvboxnet1が選択されていることを確認します。要するにVagrant仮想マシンと同じ設定になっているかを確認しているわけです。もしなっていなかったら自分で図のように同じにしてください。
これで設定は完了です。IE から Vagrant 仮想マシン上で動いている Web アプリケーションにアクセスしてみましょう。
http://192.168.33.10:3000
無事に表示させることが出来ました。Vagrant と modern.IE と仮想マシンを2つ同時に動かすので、それなりに負荷がかかってしまいますが、これで Mac 環境であっても IE で動作確認をしながら開発をすることが出来るというわけです。
modern.IE 仮想マシンを使う上での注意点
仮想マシンとはいえ、最新バージョンも含めた Windows 環境が無料で手に入るのだから、「すげぇ！もう WindowsOS を高い金出して買わなくていいじゃんｗｗｗｗ」なんて思ってしまいがちですが、さすがにそこまで都合良くいく訳がありません。
あくまでテスト用途で使ってください
なので通常業務など日常普通に使うマシンとして使用することは禁じられてます。ただし、業務の一貫としての動作確認テストに使用することは OK だそうです。OS 買うのもったいないから、これをメインにして使い続ければいいやというのは NG ということですね、わかります。
一つの仮想マシンの使用期間は90日です
仮想マシンをダウンロードした時点で modern.IE の利用規約に同意したものとみなされます。インストールされた仮想マシンは初回起動時のスナップショットから 90 日間だけライセンスが有効化される仕様になっています。
とはいえ、一度90日間を過ぎてしまうともう二度と使ってはいけないかというとそうではなく、一度その仮想マシンを削除して再度インストールして改めて使い続けることは許容されています。
但し、90 日目以降も使いたいからといって、ライセンスキーを別途購入してアクティベーションしてはいけません。通常の Windows と同様に起動時に OS からアクティベーションをするよう催促されますが、決して従わないでください。その際は先程述べたように、仮想マシンを再インストールして使う必要があります。
物理マシン一台につき、仮想マシンは一つのみをインストールしてください
なのでクラウド上の仮想マシンにインストールして複数人で共有して使うといったことは出来ません。ただし、物理マシンにインストールしたモノに対してリモートアクセスすることは許容されているようです。
とりあえず重要そうな部分だけをここで紹介しました。仮想マシンインストールページに利用規約へのリンクが貼られていますので、一読してみることをオススメします。英語ですがそこまで難しい言い回しは無いので、適当に単語を拾っていくだけでも大まかな内容は掴めることでしょう。
脚注
| ↑1 | インフラ関連の知識が殆ど無いので詳細までは把握していませんが、ひとまずこれで問題なく動作はします。 |
|---|