OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

仮想環境のVartualBoxを使ってMacでIE&Edgeブラウザチェック

最終更新日:2018.1.7 Update!!
ウェブサイトを作成する上で必ず行われるブラウザチェックですが、Macで制作している場合にはIEのブラウザチェックをどうするか、という問題が出てきます。Macの場合はBootCampを使ってWindowsをインストールすることも可能ですが、少し面倒だったりコストがかかったりします。   今回はもっと手軽にVartualBoxという仮想化アプリケーションを使ってWindowsを動かし、IEでのブラウザチェックを行ってみたいと思います。  
VartualBoxとWindowsイメージファイルの準備
まずはVartualBoxをPCにインストールするところから始まります。公式サイトのダウンロードページhttps://www.virtualbox.org/wiki/Downloads)にアクセスします。OS Xのダウンロードリンクからインストーラーをダウンロードします。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック   インストーラーを開き、ウィンドウに表示される指示にしたがって進めていくとVartualBoxのインストールが完了します。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック   VartualBoxのインストールが完了すると、次はWindowsのイメージファイルを揃えていきます。このイメージファイルをVartualBoxへインポートすることによってVartualBox内でWindowsが使えるようになります。Windowsイメージファイルのダウンロードは公式の仮想マシン※旧modern.IE ダウンロードページhttps://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)よりダウンロードできます。セレクトボックスからIEのバージョンを選択し、プラットフォームにはVartualBoxを選択します。ダウンロードボタンをクリックすると、それぞれバージョンごとのIEのOVAファイル(拡張子:.ova)が入手できます。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック    
VartualBoxでIEを動作させる
インストールしたVartualBoxを起動させ、先ほどダウンロードしてきたWindowsのイメージファイル(OVAファイル)をダブルクリックで開きます。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック   自動的にVartualBoxへのインポートが開始します。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック   インポートが終了するとVartualBoxのアプリケーションパネル内にあるリストに追加されますのでクリックして起動させます。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック   新しいウィンドウで仮想環境が表示され、Windowsが起動し該当するIEを使用できるようになります。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック    
VartualBoxでローカルファイルをIEで確認する
サーバー上にあるものはURLを入力することで確認することができますが、ローカルにあるファイルとなるとまた勝手が違ってきます。公開前のテストなどに使用するケースなどが考えられるかと思います。そこでMAMPで構築したローカル環境をIEで確認できるように設定することでローカルにあるファイルもIEで確認できるようにしていきます。   まずはMAMPでローカル環境を構築し、htdocフォルダにファイルを入れMAMPが立ち上がっている状態に準備します。そしてVartualBoxも立ち上げます。Windowsを起動させスタートメニューからエディタ(Notepadなど)を管理者権限で開きます。   仮想環境のVartualBoxを使ってMacでIEブラウザチェック   Cドライブ内、WindowsSystem32driversetcにあるhostsファイルをエディタで開きます。   dws0301-009   ローカルホストのIPとパスを追記し上書き保存します。   ローカルホストのIPを追記し上書き保存します。   IEでURLを入力するとMAMPで構築したローカル環境にアクセスできファイルの確認が可能になります。   ローカルホストのIPを追記し上書き保存します。   Edgeの場合も同じような形でhostsファイルを編集することで閲覧可能です。アドレスが「http://localhost」で表示されない場合は「http://10.0.2.2」と入力することで表示されるようになります。   いかがでしたでしょうか、今回紹介した一通りの環境が揃っていればとりあえずはIEのブラウザチェックに困ることはないかと思います。WindowsのPCが手元になかったり揃えるのが難しい場合はとても便利ですので是非お試しください。   【参考サイト】 VirtualBoxのWindows/IEからMacのローカル環境(MAMP)にvirtual hostでアクセスする方法    
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram