MAMP環境のWordPressサイトをLAN内の別デバイスで閲覧。

MAMP環境にインストールしたWordPressサイトを、同一LAN内にあるiPhoneなど別のデバイスのブラウザから「http://MacのローカルIPアドレス」にアクセスして閲覧できるようにする方法。

[ ループバックアドレスでは別デバイスからアクセスできない ]

• ループバックアドレス(ホスト名なら「http://localhost」、IPアドレスなら「http://127.0.0.1」)は、自デバイス内の別のソフトウェアに自身を示すアドレスなので、外部のデバイスはアクセスできない。
• ループバックアドレスではなくLAN内での「MacのローカルIPアドレス」でアクセスしても、WordPressの内部処理から出力されるURL(home_url()関数など)や、cssやjsファイルなどのsrc属性値(src=”http://localhost/ファイル名”)の記述は「localhost」のままなので読み込めず、サイトは正しく表示されない。

[ 対処方法 ]

WordPressが出力するhtml内にある「http://localhost」の記述をすべて「http://MacのローカルIPアドレス」に自動置換することで対処する。

1. MAMPが動作しているMacのローカルIPアドレスを取得。
2. WordPressの内容がhtmlとして出力されるときに「http://localhost」をすべて「http://ローカルIPアドレス」に置換する処理をfunctions.phpに記述。
3. 別のデバイスから「http://ローカルIPアドレス」にアクセスして動作確認。

MacのローカルIPアドレスを取得

MAMPが動作しているMacの、LAN(Local Area Network)内でのプライベートIPアドレスであるローカルIPアドレスを取得する。

※ LAN内の別デバイスからこのローカルIPアドレスにアクセスして、WordPressサイトを閲覧できるようにする。

(1) MacのアプリケーションでローカルIPアドレスを確認する方法

「ネットワークユーティリティ」で確認する場合

1. 起動ディスク > 「システム」 > 「ライブラリ」>「CoreServices」>「Applications」 > 「ネットワークユーティリティ.app」を起動。
2. 「Info」タブを選択 > 「Wi-Fi (en0)」を選択 > 「IPアドレス」の欄で確認できる。

「ターミナル」で確認する場合

1. 起動ディスク > 「アプリケーション」 > 「ユーティリティ」 > 「ターミナル.app」を起動。
2. 「ifconfig」コマンドを実行し、表示される一覧の「en0」の欄の「inet」の項目で確認できる。

(2) PHPでローカルIPアドレスを確認する方法

下記を記述したphpファイルをブラウザに表示して確認。

echo gethostbyname(gethostname());

gethostname() : ローカルのマシンに設定されているホスト名を返す。失敗した場合はfalseを返す。

gethostbyname(‘ホスト名’) : 指定したホスト名の IPv4 アドレスを返す。失敗した場合はホスト名をそのまま返す。

html内の「localhost」を「ローカルIPアドレス」で置換

WordPressのfunctions.phpにアクションフックを記述して、置換処理を自動的に適用する。

出力のタイミングでhtml内にある文字列「http://localhost」の部分をすべて「http://ローカルIPアドレス」に置換する。

1. リクエストされたURLが「自身のローカルIPアドレス」と一致するか判定。(一致した場合のみ実行。)
2. 置換処理を行う関数を作成。
3. WordPressのアクションフックで指定したタイミングで作成した関数を実行。

※ functions.phpから削除し忘れて本番環境へアップロードしてしまった場合を考慮して、リクエストURLが「ローカルIPアドレス」の場合だけ処理が実行されるようにif文で分岐しておく。

//リクエストURLがローカルIPアドレスの場合のみ置換
if($_SERVER['SERVER_NAME'] == gethostbyname(gethostname())){
  //置換処理をする関数を作成
  function ag2_localhost_to_ipv4_callback($buffer){
    $local_URI = 'http://localhost';
    $ipv4_URI = 'http://'.gethostbyname(gethostname());
    return str_replace($local_URI, $ipv4_URI, $buffer);
  }
  //ヘッダーが読み込まれたらバッファリングして出力時に関数をコール
  add_action('get_header', function(){ob_start('ag2_localhost_to_ipv4_callback');}, 1);
  //フッターまで読み込まれたらバッファリングを完了して出力する
  add_action('wp_footer', function(){ob_end_flush();}, 99999);
}

str_replace(‘置換前文字列’, ‘置換後文字列’, ‘対象文字列’) : 対象文字列内のすべての置換前文字列を置換後文字列で置換。文字列ではなく配列の指定も可能。返り値はすべて置換した後の対象文字列。

ob_start(‘コールバック関数’) : バッファリングを有効化し、以降の内容を標準出力としてすぐ出力表示せずにバッファ領域に一時保存する。コールバック関数は、バッファがフラッシュあるいは消去された場合やリクエストの最後にブラウザに出力をフラッシュする際に、バッファの内容を引数として受け取ってコールされる。

ob_end_flush() : バッファの内容を出力して、バッファリングを無効化する。

add_action(‘get_header’, ‘関数’, ‘優先順位’) : WordPressのアクションフック。テンプレートheader.phpを読み込む直前に優先順位の順番で関数を実行する。

add_action(‘wp_footer’, ‘関数’, ‘優先順位’) : WordPressのアクションフック。wp_footer()関数がコールされたタイミングで優先順位の順番で関数を実行する。

• XAMPPにLAN内のスマフォからアクセスする
• ob_start、ob_get_contents関数でPHPの標準出力をバッファリング・変数に代入
• 出力制御関数