Webサイト制作をしている人の大半が導入しているであろうXAMPPですが、少し設定に手間取った部分があったので共有したいと思います。
XAMPP上で動作しているWebサイトは、同じローカルネットワーク上にあるパソコンやスマートフォンからアクセスすることが可能です。
これを上手く活用することでローカル環境でも様々なデバイスで動作検証することが可能なので、まだ導入していない人はこの記事を参考に試してみてください(‘ω’)ノ
この記事の目次
XAMPPで別のPCからアクセスする方法
XAMPPで別のPCからアクセスする手順は下記のとおりです。
1. コマンドプロンプトのipconfigでホストPCのローカルIPを確認しておく
コマンドプロンプトを起動して『ipconfig』と入力すると、ネットワーク情報が表示されます。
その中に【IPv4 アドレス】という項目があるので、そのIPアドレスをコピーして控えておきます。
複数のアダプターが表示される場合は、実際に使っているWi-Fiまたは有線LANのアダプターのIPv4アドレスを確認してください（「vEthernet」などの仮想アダプターと間違えやすいので注意）。
なお、このIPアドレスはルーターから自動で割り当てられているため、再起動などで変わることがあります。変わると以降の設定を書き直す必要があるので、ルーターの設定でIPアドレスを固定（DHCP予約）しておくと便利です。
2. httpd-vhosts.conf を編集する
次に httpd-vhosts.conf を編集します。
このファイルはXAMPPディレクトリ内にあります。デフォルトだと下記に入っているかと思います。
C:\xampp\apache\conf\extra\httpd-vhosts.conf
このファイルをテキストエディタで開いて下記のように入力します。テキストの末尾に追加する形でOKです。
<VirtualHost *:80 192.168.100.32> DocumentRoot "C:\xampp\htdocs\sample_site" ServerName sample_site.local </VirtualHost>
192.168.100.32 の部分はコマンドプロンプトでコピーしたIPアドレスを指定します。このようにIPアドレスを指定しておくと、別のPCからIPアドレスで直接アクセスしたときに、このサイトが表示されるようになります。
DocumentRoot はあなたのサイトが置かれているディレクトリを指定します。
htdocs の外にあるディレクトリを指定した場合は、アクセスが許可されず「403 Forbidden」になることがあります。そのときは、VirtualHost の中に次のような記述を追加してください（パスは DocumentRoot と同じものを指定します）。
<Directory "D:\sites\sample_site"> Require all granted </Directory>
ServerName は任意の内容で良いですが、個人的には本番サイトが sample_site.com の場合は sample_site.local とすることが多いです。
ただし、「.local」はmDNS（Bonjour）用に予約されているドメインのため、MacやiPhoneでは名前の解決に時間がかかることがあります。これから決めるなら、テスト用に予約されている「.test」を使うのがおすすめです。また、ホスト名に「_」（アンダースコア）を使うのは本来の規格では認められていないため、「sample-site.test」のようにハイフンを使うほうが無難です。
3. XAMPPのコントロールパネルからApacheを再起動
httpd-vhosts.conf の編集が終わったら、XAMPPコントロールパネルでApacheを再起動します。
これで設定したローカルIPで他のPC・スマートフォンから、XAMPP上のサイトにアクセスできるようになります。
4. 必要に応じてhostsファイルを編集
これは必須ではありませんが、hostsを設定することで「http://sample_site.local」といった文字列でサイトにアクセスできるようになります。
hostsファイルの場所は下記のとおりです。
Windowsのhostsの場所
C:\Windows\System32\drivers\etc\hosts
Macのhostsの場所
/private/etc/hosts
hostsに記述する内容
hostsに記述する内容は下記のとおりです。
192.168.100.32 sample_site.local
別のPCではなく、サイトが設置されているPC自身でアクセスする場合は下記の記述でもOKです。
127.0.0.1 sample_site.local
これで「http://sample_site.local」とブラウザのアドレスバーに入力するだけでサイトにアクセスできます。
ハマりがちなトラブルと追加設定
XAMPPやローカルIPとは別に設定が必要になる場合があります。
私はこれにハマって時間を無駄にしました…( ;∀;)
Windowsはネットワークプロファイルを設定する必要がある
Windowsを使っている場合『ネットワークプロファイル』を【プライベート】にする必要があります。
詳しい手順は下記のとおりです（赤枠の部分をクリックしていってください）。
これで完了です。
要するに、XAMPPを設定しても、ネットワークプロファイルが「パブリック」のままだと他の端末からはアクセスできないということです（間違いやすいですが、他の端末からのアクセスを許可するのはパブリックではなくプライベートのほうです）。
それでもつながらない場合は、Windows Defender ファイアウォールで Apache HTTP Server（httpd.exe）の通信が許可されているかも確認してみてください。
WordPressサイトの場合はパスに注意
一般的なサイトでは以上の設定で問題なく動作するかと思いますが、WordPressサイトではうまく動かない可能性があります。
その原因はパスです。
一般的なサイトは相対パスで動作しますが、WordPressサイトは絶対URL（http://から始まる形式）が記述されます。
ここで想定されるトラブルが、XAMPPのデフォルトである 127.0.0.1 でWordPressサイトを動かしている場合で、これだと別のPCでは正しく動作しなくなるということです（127.0.0.1 というローカルIPは自分自身を指すので、他のPCからはアクセスできないため）。
なので、他のPCからアクセスする場合を想定して、WordPressの「設定」→「一般」にある「WordPress アドレス (URL)」と「サイトアドレス (URL)」を127.0.0.1 や localhost にしないことが大切です。
また、後述のとおりスマートフォンではhostsを使えないため、「http://sample_site.local」のようなURLにしていると、スマートフォンでは表示が崩れます。スマートフォンでも確認する場合は、サイトURLをローカルIP（http://192.168.100.32）にするか、ローカル環境の wp-config.php に次のように書いて、アクセスされたホスト名に合わせてURLが変わるようにしておくと便利です。
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
これはローカル環境専用の設定なので、本番環境の wp-config.php には書かないよう注意してください。
なお、記事中の画像などのURLは投稿内に絶対URLで保存されているため、サイトURLを変えるだけでは画像が表示されない場合があります。その場合は、データベース内のURLを置換する必要があります。
AndroidやiPhoneではhostsを設定できない
説明した通り、hostsを設定することで「http://sample_site.local」という形式でアクセスできるようになります。
さらに下記のようにすると、1つのローカルIPで複数のサイトを管理できるようになります。
192.168.100.32 sample_site.local
192.168.100.32 sample_site2.local
192.168.100.32 sample_site3.local
この場合は、httpd-vhosts.conf にもサイトごとに VirtualHost を用意し、それぞれに同じIPアドレス（*:80 192.168.100.32）を書いておきます。
非常に便利ですが、実はAndroidやiPhoneでは、root化や脱獄をしない限りhostsファイルを編集できないんですよね…( ;∀;)
なので、私はホストPC以外ではhostsを使うのは諦めて、その都度 httpd-vhosts.conf の DocumentRoot と ServerName を書き換えて、他のPC・スマートフォンで動作確認をしています。
何はともあれローカルで動作確認できるのは便利
というわけでXAMPP上のサイトを他のPCで表示する方法を解説しました。
スマートフォンでの動作確認が若干不便ではあるものの、工夫をすればローカルでも十分検証できて、実用性も高く、時間短縮が可能です。
とても便利なので、ぜひ皆さんも試してみてください(‘ω’)ノ
