MAC使い必見!ローカル開発でWindowsブラウザをチェックする簡単な方法

投稿日:2018年3月16日 更新日:

コーディング時のブラウザ検証がラクになる方法をご紹介します。ホストOS(Mac)のローカル環境のコンテンツをゲストOS(Win)でも同様にローカルチェックできちゃいます。VMwareとdockerと組み合わせれば鬼に金棒の最強ツールですよ!

コミットや本番公開する前にローカル環境でブラウザ検証したい

自マシンのローカル環境でコーディングしたものを、ブラウザ検証しますよね。

そのときに、Macであればsafari、Chrome、Firefoxなどモダンブラウザのチェックは簡単ですが、Windowsブラウザ(IE、Edge)をチェックするのに便利なのがVMwareです。

MacをホストOS、WindowsをゲストOSとして、VMwareを使いMac内でWindowsを起動します。

本番に公開されているものをVMware上で確認することは簡単ですが、開発者としてはそうはいきません。

ローカル環境で制作したページや動的サイトを公開前にWindowsブラウザ検証したい場合は、一工夫することでVmwareでもページ確認をすることができます。

「VMware」とは

Mac 環境で Windows を実行する仮想環境を構築するソフトウェアです。他にも人気のあるソフトとしてVirtualBoxがありますが、どちらかを使っている方が多いのではないでしょうか。

VMwareはいくつかシリーズがあり、個人用で簡単に仮想環境が作れるシリーズは「VMware Fusion」というものになります。ソフト有料で1万円程度ですが、仮想環境構築がとても簡単ですのでおすすめです。

肝心のWindowsOSはマイクロソフトからIEのテスト用に無料で使えるOSイメージが公開されています。

わざわざWindowsOSを購入しなくてもよいのでとてもありがたいですね。

ここに公開されているので、環境に合わせてダウンロードしてください。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

VMwareのインストール手順はこちらが参考になりますよ


それではvmware fusionをインストールし、Windowsを起動できる状態まで整っていることを前提に話を進めていきます。

ローカル環境はdockerで構築しよう

以前ご紹介しましたが、ローカルの開発環境はdockerで構築するとものすごく便利です。XAMMPやMAMPを使っている方はぜひdockerに乗り換えてみてください。

https://yatteq.com/?p=1479

https://yatteq.com/?p=1515

dockerのDAMPで開発環境を構築すると、ローカル環境上で◎◎.testというドメインを利用することが出来るようになります。

このドメインが使えるようになることで、Vmware上でも同じようにホストOS(Mac)側のページを確認することができます。

ローカルホストのIPアドレスを調べる

ホストOS(Mac)でターミナルを起動してifconfigコマンドを打ちましょう。


〜中略〜
flags=8051<UP,POINTOPOINT,RUNNING,MULTICAST> mtu 2000
inet6 fe80::cf12:c2fc:8c41:a988%utun0 prefixlen 64 scopeid 0xb
nd6 options=201<PERFORMNUD,DAD>
vmnet1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 00:50:56:c0:00:01
inet 192.168.102.1 netmask 0xffffff00 broadcast 192.168.102.255
vmnet8: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 00:50:56:c0:00:08
inet 192.168.44.1 netmask 0xffffff00 broadcast 192.168.44.255

ここで「vmnet8」の項目を確認します。

私の環境ではinet 192.168.44.1となっているところが仮想環境で動くゲストOS(Win)のローカルホストIPアドレスということになります。

VMware側でホストファイルを設定する

IPアドレスとドメインを一致させるためにhostsファイルをいじります。

ホストOS(Mac)側のlocalhost:8080は127.0.0.1です。VMwareのゲストOS側から同じ場所を見る192.168.44.1をアドレスに入れると確認することができます。

しかしこのままではdocker-DAMPで設定した◎◎.testのドメインがVMwareのゲストOS(Win)側からアクセスできないため、ゲストOS(Win)内のhostファイルに追記します。

## For docker -damp##
192.168.44.1 ◎◎.test

保存して再度VMwareのゲストOS(Win)側のブラウザから◎◎.testにアクセスしてみてください。

するとホストOS側のローカルコンテンツが見事に確認できていると思います。

コーディング時のブラウザチェックは意外と面倒なものですよね。とくにOSをまたぐブラウザチェックは手間がかかります。Gitにコミットする前、サーバーに直接アップロードする前にすぐにブラウザチェックできる環境があるととても作業の時短になりますので、是非準備しておきましょう。

関連するおすすめ記事

Amazonチャージ


Amazonで買い物するなら、Amazonチャージを利用しよう!

チャージごとに、プライム会員なら最大2.5%Amazonポイントが貯まる!

クレジットカードがなくてもOK! Amazonギフト券チャージでお得にお買い物しよう!

さっそくチャージする

Amazonクリスマスギフト
  • この記事を書いた人

りょうま

WEBエンジニア/フリーランス5期目/大阪府北摂在住🏠長野県諏訪市出身🎣webデザインやフロントエンド技術の情報を中心に、人生をカスタマイズして楽しく過ごすための情報を発信中📢WPテーマはAFFINGER5です。

-アプリサービス
-, ,

Copyright© ヤッテモータース , 2018 All Rights Reserved.