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

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

何も対処しないと別デバイスからMAMPのWordPressサイトを閲覧できない

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

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

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

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

※ このローカルIPアドレスで、LAN内の別デバイスからアクセスできるようにする。

MacのアプリケーションでIPアドレスを確認する場合

1. 「ネットワークユーティリティ」の場合

起動ディスク > 「システム」 > 「ライブラリ」>「CoreServices」>「Applications」 > 「ネットワークユーティリティ.app」を起動。

「Info」タブを選択 > 「Wi-Fi (en0)」を選択 > 「IPアドレス」の欄にローカルIPアドレスが表示されている。

2. 「ターミナル」の場合

起動ディスク > 「アプリケーション」 > 「ユーティリティ」 > 「ターミナル.app」を起動。

「ifconfig」コマンドを実行し、表示される一覧の「en0」の欄の「inet」の項目で確認できる。

PHPでIPアドレスを確認する場合

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

echo gethostbyname(gethostname());

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

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

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

WordPressのfunctions.phpにアクションフックを記述して、出力時に置換処理を実行させる。

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

1. 置換処理を行う関数を作成。
2. アクセスのリクエストURLが「ローカルIPv4アドレス」かを判定。
3. WordPressのアクションフックで任意のタイミングで処理を実行。

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

//リクエストURLがローカルIPv4アドレスの場合のみ置換
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’, ‘関数’, ‘優先順位’) : テンプレートheader.phpを読み込む直前に優先順位の順番で関数を実行する。

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

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