コミット前に!本番公開前に!VMwareでWindowsブラウザを簡単にローカルチェックする方法

コーディング時のブラウザ検証がラクになる方法をご紹介します。ホスト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に乗り換えてみてください。

(前編)【コマンド不要】XAMMPもMAMPも使わない!ローカル開発環境はdockerで構築してみよう!

WordPressやPHPサイトをつくる際、自分のマシンのローカルの開発環境をXAMMPやMAMPを使って構築している方はまだけっこういらっしゃると思います。 かくいう私も最近までバリバリXAMMPを ...

(後編)XAMMPもMAMPも使わない!ローカル開発環境はdockerで構築してみよう!DAMPでラクラク構築の巻

WordPressやPHPサイトをつくる際、自分のマシンのローカルの開発環境をXAMMPやMAMPを使って構築している方はまだけっこういらっしゃると思います。 かくいう私も最近までバリバリXAMMPを ...

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

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

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

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

〜中略〜</pre><pre>utun0: 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にコミットする前、サーバーに直接アップロードする前にすぐにブラウザチェックできる環境があるととても作業の時短になりますので、是非準備しておきましょう。

 

よく読まれている人気記事

1

新居に引っ越してから我が家のインターネットはJ:COM NET(120MB)を利用しています。 以前Wi-Fi中継機を導入して快適インターネットを構築した記事を書きましたが、その後別の問題が起きてしま ...

2

新婚旅行でハワイに行ったときに買ってきたソルトスクラブとシアボディバターの紹介です。 ご自身用にもお土産用にもおすすめですので、ハワイに行かれた際にはぜひどうぞ! 見た目もかわいいソルトスクラブ「So ...

3

TOKYO MXで放送中の情報番組「5時に夢中!」の人気コーナー「中瀬親方のエンタメ番付」で紹介されたおすすめ作品を紹介します。(2018年5月31日放送分) 新潮社出版部部長の中瀬ゆかりさんが感銘を ...

Copyright© ヤッテキュー! , 2018 All Rights Reserved.