このサイトの WordPress のテーマを新しくしたのだけれど、その際 IE11 の表示確認に VMware Fusion 上の Windows 8.1 の IE11 からも表示確認をしました。 MAMP でローカルに WordPress を動かしていて、それを VMware Fusion 上の IE11 から確認するためには設定が必要だったので忘れないようにメモをしておきます。
設定は以下のサイトを参考にしました。
→ A Day in the Life : VMWare Fusion + MAMP Mac の localhost を Windows でも確認する
ちなみに Windows 8.1 の IE11 は 2023 年 1 月まで、 Windows 10 の IE11 は 2025 年 10 月までサポートが続きます。さすがに無視できないので、完全ではないにしろ読める程度には対応することにしたのです。
目次
MAMP の設定
まずは MAMP の設定をします。以下の 2 つのファイルをいじるのでコピーをとっておいたほうがよいでしょう。
/Applications/MAMP/conf/apache/httpd.conf
/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
ポートの追加
httpd.conf
の 48 行目あたりに以下を追加。
Listen 80
# 8000ポートを新規追加
Listen 8000
バーチャルホストの追加
httpd.conf
の 585 行目あたりの文頭の # を削除します。
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
次に httpd-vhosts.conf
に以下をつけ加えます。
<VirtualHost *:80>
ServerName theme.1010uzu.com
DocumentRoot "/Volumes/XXXX/MAMP/htdocs/theme.1010uzu.com"
ErrorLog "logs/theme.1010uzu.com"
</VirtualHost>
<VirtualHost *:8000>
ServerName theme.1010uzu.com
DocumentRoot "/Volumes/XXXX/MAMP/htdocs/theme.1010uzu.com"
ErrorLog "logs/theme.1010uzu.com"
</VirtualHost>
MAMP の htdocs の中身を増設の HDD に置いているので以上のような設定になっています。 htdocs フォルダまでのフルパスを設定します。
Mac の hosts の設定
次に Mac の設定をします。 /private/etc/hosts に書き加えるのですが、 Hoster というアプリを使っています。そして「 MAMP でバーチャルホストを設定して複数ドメインで運用する方法」にて設定しているのでそのままで OK でした。
左上の「 + 」をクリックして設定画面で下記のように記入。
- セット名
- (好きな名前をつける)
- ホスト名
127.0.0.1
- IP
theme.1010uzu.com
「 127.0.0.1 」はローカルホストを指す IP アドレスです。
そして「システム環境設定」→「ネットワーク」の「 IP アドレス」を Windows の設定に使うのでメモっておきます。
VMware 上の WIndows 8.1 の hosts の設定
VMware 上の Windows の設定をします。以下のファイルをいじるのでコピーしてバックアップをとっておきます。
C:/WINDOWS/system32/drivers/etc/hosts
Windows 8.1 では hosts ファイルが管理者権限がないと以下のような「アクセスが拒否されました (Access is denied) 」ダイアログが出て変更して保存することができません。
なのでメモ帳 (Notepad) を管理者権限で開い編集します。メモ帳を右クリックして下のバーに出てくる「管理者として実行 (Run as administrator) 」をクリックします。
警告が出るので「はい (Yes) 」をクリックして起動します。
「ファイル」メニューの「開く」からパスをたどって hosts ファイルを開き、文末に以下のようにメモった Mac の IP アドレスと Mac の hosts に設定したドメインとスペースで並べて書き加えます。
192.168.X.X theme.1010uzu.com
VMware Fusion の設定
最後に VMWare Fusion の Windows 8.1 のネットワーク設定をブリッジ(自動検出)にします。仮想マシーンのライブラリ画面にて Windows 8.1 を選んで「設定」→「ネットワークアダプタ」にて「ブリッジされたネットワーキング」の「自動検出」にチェックを入れます。
VMware 上の Windows 8.1 の IE11 から MAMP のサイトを確認
これでようやく VMware 上の Windows 8.1 の IE11 から MAMP のサイトを確認する準備が整ったので「 http://theme.1010uzu.com
」にアクセスしてみると……。
こんなふうにレイアウトが乱れまくっていました。
→ J-COOL-BLOG : IE11 :表示崩れする時の対処法
上のサイトを参考に以下のメタタグを head に入れたらそこそこ見られるようになりました。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
「互換表示モード」が原因で、 Edge のエンジンを使った表示をするように宣言をする必要があるようです。