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


VartualBoxでIEを動作させる
インストールしたVartualBoxを起動させ、先ほどダウンロードしてきたWindowsのイメージファイル(OVAファイル)をダブルクリックで開きます。



VartualBoxでローカルファイルをIEで確認する
サーバー上にあるものはURLを入力することで確認することができますが、ローカルにあるファイルとなるとまた勝手が違ってきます。公開前のテストなどに使用するケースなどが考えられるかと思います。そこでMAMPで構築したローカル環境をIEで確認できるように設定することでローカルにあるファイルもIEで確認できるようにしていきます。 まずはMAMPでローカル環境を構築し、htdocフォルダにファイルを入れMAMPが立ち上がっている状態に準備します。そしてVartualBoxも立ち上げます。Windowsを起動させスタートメニューからエディタ(Notepadなど)を管理者権限で開きます。



sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories