0%

Designデザインワークショップ

Posted:2017.03.01

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

ウェブサイトを作成する上で必ず行われるブラウザチェックですが、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ドライブ内、\Windows\System32\drivers\etcにある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でアクセスする方法

 

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】