MacでWebサイトを制作していると、Windowsでの動作確認が必要になることがあると思います。

普段Macを使っているとマヒしてきますが、2016年11月時点でのOSシェアはWindowsが90%以上と、まだまだ世の中の主流はWindowsなんですよね。 やっぱりWindowsでの動作確認は必須といえます。

でも安心してください。 MacでもWindowsでのブラウザ表示を行なう環境を無料で構築することができます。 この記事では、この方法についてまとめていきます。

Free Virtual Machines

MacでWindowsを実行するには、Microsoftが提供しているVMを使うとよいです。 これを導入することで、Mac上でさまざまなバージョンのWindowsを実行でき、その上でIEやChromeといったブラウザを実行することができます。

Webサイトを確認するだけなら、これで十分だと思います。

ちなみにMicrosoftはかつてmodern.IEというブランドでこのVMを提供していましたが、これが現在はFree Virtual Machinesとして提供されています。 昔から使っている方はご注意ください。

インストール

それでは、Mac上でWindowsのブラウザ表示環境を構築する手順について書いていきます。

1. ダウンロードする

まずはじめに、テスト用のWindowsはVMとして提供されていますが、このVMを動作させるための仮想化ソフトウェアをダウンロードする必要があります。

仮想化ソフトウェアはいくつか選択肢がありますが、ここでは無料のVirtualBoxを選びます。

また、Microsoftの公式サイトからVMをダウンロードします。 VMの種類と仮想化ソフトウェアの組み合わせでダウンロードするので、目的・環境に応じて選んでください。

あとはダウンロードボタンをクリックすればダウンロードが開始されます。

2. VirtualBoxをインストールする

次にVirtualBoxをインストールします。 一般的なインストール方法なので、手順にしたがってインストールを行なってください。

3. VMをインストールする

Free Virtual Machinesからダウンロードした.zipファイルを解凍すると、.ovfファイルが生成されます。 これはVirtualBoxに関連づけられたファイルなので、ダブルクリックで実行します。

実行すると、アプライアンスのインポート画面が表示されます。 そのままインポートしましょう。 これによりVMがインストールされます。

4. VMを実行する

VMのインストールが完了すると、VirtualBoxのマネージャでインストールされたVMを確認することができます。

あとはこれをダブルクリックで実行すると、Windowsが立ち上がります。

localhostを表示する

Mac上で開発する際、localhostによるアクセスが一般的だと思います。 これをWindows側から参照するにはどうすればよいでしょうか。 Windowsでhttp://localhost/...としてアクセスしようとしても、正しく表示することはできません。

Windowsからは、10.0.2.2というIPアドレスでMac上のlocalhostにアクセスすることができます。 たとえば、Mac上でのWebサイトのアドレスがlocalhost:3000なら、Windows側で10.0.2.2:3000によりアクセスすることができます。

Mac上のWebサイトの動作を確認する際はぜひ覚えておきましょう。

オンラインサービスで確認する

Microsoftは、Browser Screenshotsというツールも公開しています。 これは、オンライン上でURLを指定するだけでWindowsでのブラウザ表示をその場で確認できる、とても便利なツールです。

Webサイトをサクッと確認したい場合は、こっちだけでいいかもしれません。 ユースケースに応じてVMと使い分けましょう。

参考記事

おわりに

Macでは、上記のようにWindowsでのブラウザ表示環境を簡単に構築することができます。

最近はOS/ブラウザ間での表示の際は昔ほどではなくなりましたが、やはり崩れることは十分あり得ます。 しっかり動作を確認して、優れたWebサイトをつくっていきたいですね。