1LINEコピーするコーディング時のブラウザ検証がラクになる方法をご紹介します。ホストOS(Mac)のローカル環境のコンテンツをゲストOS(Win)でも同様にローカルチェックできちゃいます。VMwareとdockerと組み合わせれば鬼に金棒の最強ツールですよ!コミットや本番公開する前にローカル環境でブラウザ検証したい自マシンのローカル環境でコーディングしたものを、ブラウザ検証しますよね。そのときに、Macであればsafari、Chrome、Firefoxなどモダンブラウザのチェックは簡単ですが、Windowsブラウザ(IE、Edge)をチェックするのに便利なのがVMwareです。MacをホストOS、WindowsをゲストOSとして、VMwareを使いMac内でWindowsを起動します。本番に公開されているものをVMware上で確認することは簡単ですが、開発者としてはそうはいきません。ローカル環境で制作したページや動的サイトを公開前にWindowsブラウザ検証したい場合は、一工夫することでVmwareでもページ確認をすることができます。実行する仮想環境を構築するソフトウェアです。他にも人気のあるソフトとしてVirtualBoxがありますが、どちらかを使っている方が多いのではないでしょうか。Fusion」というものになります。ソフト有料で1万円程度ですが、仮想環境構築がとても簡単ですのでおすすめです。肝心のWindowsOSはマイクロソフトからIEのテスト用に無料で使えるOSイメージが公開されています。WindowsOSを購入しなくてもよいのでとてもありがたいですね。ここに公開されているので、環境に合わせてダウンロードしてください。fusionをインストールし、Windowsを起動できる状態まで整っていることを前提に話を進めていきます。ローカル環境はdockerで構築しよう以前ご紹介しましたが、ローカルの開発環境はdockerで構築するとものすごく便利です。XAMMPやMAMPを使っている方はぜひdockerに乗り換えてみてください。続きを見るdockerのDAMPで開発環境を構築すると、ローカル環境上で◎◎.testというドメインを利用することが出来るようになります。このドメインが使えるようになることで、Vmware上でも同じようにホストOS(Mac)側のページを確認することができます。ローカルホストのIPアドレスを調べるホストOS(Mac)でターミナルを起動してifconfigコマンドを打ちましょう。192.168.44.255ここで「vmnet8」の項目を確認します。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ファイルに追記します。◎◎.test保存して再度VMwareのゲストOS(Win)側のブラウザから◎◎.testにアクセスしてみてください。するとホストOS側のローカルコンテンツが見事に確認できていると思います。コーディング時のブラウザチェックは意外と面倒なものですよね。OSをまたぐブラウザチェックは手間がかかります。Gitにコミットする前、サーバーに直接アップロードする前にすぐにブラウザチェックできる環境があるととても作業の時短になりますので、是非準備しておきましょう。Desktopで構築する場合は、macのターミナルでifconfigで情報を確認し、vnic0の項目でinetの隣の値がIPアドレスになります。制作したサイトが評価され新卒で上場企業のWEBデザイナーとして就職。その後数社を渡り歩き、2013年にフリーランスとして独立。現在は主にフロントエンドエンジニアとしてお仕事しています。コメントをキャンセルメールアドレスが公開されることはありません。制作したサイトが評価され新卒で上場企業のWEBデザイナーとして就職。その後数社を渡り歩き、2013年にフリーランスとして独立。現在は主にフロントエンドエンジニアとしてお仕事しています。