トイレのうず

このサイトの 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
Hoster の設定

「  127.0.0.1  」はローカルホストを指す  IP  アドレスです。

そして「システム環境設定」→「ネットワーク」の「 IP アドレス」を Windows の設定に使うのでメモっておきます。

Ethernet の IP アドレスをメモ

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 に設定したドメインとスペースで並べて書き加えます。

Hosts に書き加える

192.168.X.X theme.1010uzu.com

VMware Fusion の設定

最後に VMWare Fusion の Windows 8.1 のネットワーク設定をブリッジ(自動検出)にします。仮想マシーンのライブラリ画面にて Windows 8.1 を選んで「設定」→「ネットワークアダプタ」にて「ブリッジされたネットワーキング」の「自動検出」にチェックを入れます。

VMware でブリッジされたネットワーキングで自動検出を選択

VMware 上の Windows 8.1 の IE11 から MAMP のサイトを確認

これでようやく VMware 上の Windows 8.1 の IE11 から MAMP のサイトを確認する準備が整ったので「 http://theme.1010uzu.com 」にアクセスしてみると……。

IE11 で表示確認したらレイアウトが崩れていた

こんなふうにレイアウトが乱れまくっていました。

→ J-COOL-BLOG : IE11 :表示崩れする時の対処法

上のサイトを参考に以下のメタタグを head に入れたらそこそこ見られるようになりました。


<meta http-equiv="X-UA-Compatible" content="IE=edge">
互換モードを切るメタタグを記入したらそれなりに見られるようになった

「互換表示モード」が原因で、 Edge のエンジンを使った表示をするように宣言をする必要があるようです。

関連記事

MAMP でバーチャルホストを設定して複数ドメインで運用する方法
Mac
MAMPのポート設定
脱獄なしで iPhone から MAMP のバーチャルホストに接続する方法
MaciPhone
インターネット共有を有効にする
VMware Fusion 3 を安く購入する方法
Mac
thumbnail
modern.IE と VMware Fusion で Mac に Internet Explorer のテスト環境を作ってみた
MacWeb制作
modern.IE
VMware Fusion から NAS 認識されない
Mac
VMware Fusion ネットワーク設定画面
MAMP で WordPress をローカル環境にインストール
WordPressMac
MAMP 許諾画面

コメントを書く