あるページからあるページに機械的（スクリプト的）に移動させたい・・・
そんなときの常とう手段と言えば リダイレクト です。
ここでは自分への忘備録も兼ね、PHP・JavaScriptでのリダイレクト方法をまとめました。具体的なコード例についても紹介します。
このページの目次
PHPの場合． リダイレクトには header 関数を使う
まずPHPでリダイレクトさせる方法について
これにはheader関数というヘッダー情報を送信できる関数を使います。
例えば現在ページから
hoge.php にリダイレクトさせたい場合、
次のようなスクリプトを実行してあげればOK
|
1 2 3 4 |
/// hoge.php にリダイレクト header( "HTTP/1.1 301 Moved Permanently" ); header( "Location: hoge.php" ); exit; |
header( "Location: hoge.php" ); みたいに Location の後に飛ばす先の ファイル名 または ファイルパス を書くだけです。ただしファイル名だけの場合は同じディレクトリにないとリダイレクトされないので要注意
もし安全にリダイレクトさせるなら次みたいにフルパスで書くのがベストです。
|
1 2 3 4 5 |
/// hoge.php にリダイレクト $url = '/home/example.com/www/public_html/path/to/hoge.php'; header( "HTTP/1.1 301 Moved Permanently" ); header( "Location: ${url}" ); exit; |
もしディレクトリ構成が頻繁に変わるなどの場合は、こういう書き方をしておいた方が事故が起きにくいです。
ちなみにフルパスをいちいち書くのが面倒、
という場合は
$_SERVER['DOCUMENT_ROOT'] を使うと楽に書けます。
これはドメイン直下までのフルパスを返してくれるという便利なサーバー変数
この $_SERVER['DOCUMENT_ROOT'] でリダイレクト処理を書きなおすと次の通りです。
|
1 2 3 4 5 |
/// hoge.php にリダイレクト $url = $_SERVER['DOCUMENT_ROOT'] . '/path/to/hoge.php'; header( "HTTP/1.1 301 Moved Permanently" ); header( "Location: ${url}" ); exit; |
もし今までフルパスを省略なしで書いてきた、という方はこっちを使う方が絶対楽になるはずです。
もしリダイレクトができない場合は・・・
このheader関数を使ったリダイレクト、なぜか上手くできないことが結構あります。
その原因としては特に多いのは次のようなこと
- HTML出力後に呼び出している
- Locationの書き方が正しくない
- 単純にパスを間違えている
こういうミスがないかどうか、リダイレクトするときは要注意です。
ちなみにリダイレクトできない問題への対処法は次記事でもまとめてあります。
もし正しく書いてるのに動かないという場合は、上記事で紹介した対処法もお試しあれ。少し書き方とか書く場所を変えるだけで解決するかもしれません。
JavaScriptの場合．リダイレクトには location を使う
お次はJavaScriptでのリダイレクトのやり方について
これには Locationインターフェイス というものを使います。これはURLに関連付けられるオブジェクトを一括で管理するためのものです。
具体的にそのことが書かれているのがMDNリファレンスの次の部分（引用）
Location インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。 Location に対して変更が行われると、関連するオブジェクトに反映されます。 Document インターフェイスおよび Window インターフェイスにはこのような関連付けられた Locationがあり、それぞれ Document.location および Window.location でアクセスできます。
上の文章を要約するなら「これを使うとURLの情報を調べたり、URLの操作ができるよ」ということ
URLの操作ができるのでリダイレクトも結構簡単に行えます。
例えば次は同じディレクトリにある hoge.php にジャンプするコード例
|
1 2 |
/** 他のページへ移動 */ location.href = 'hoge.php'; |
単純に Location のプロパティ href に遷移先のファイル名またはパスを入れればいいだけです。PHPと比べるとめちゃくちゃ簡単ですね。
ちなみに location.assign メソッドを使っても同じことは可能（次コード参照）
|
1 2 |
/** 他のページへ移動 */ location.assign('hoge.php'); |
このメソッドにファイル名・ファイルパスを渡すことでもリダイレクトができます。
ただし、JSの場合でも遷移先はフルパスURLで書いた方が安全です。
例えば次みたいな感じで
|
1 2 3 |
/** 他のページへ移動 */ $url = 'https://hoge.com/path/to/hoge.php'; location.assign($url); |
プロトコル（https）までつけておけば無駄なリダイレクトも発生しません。
Locationはリロードにも使える
もちろん、このLocationインターフェースの用途はリダイレクトだけじゃありません。
現在ページをリロード（再読み込み）させることも可能です。
そのやり方については次記事で書いたので、良ければそちらもどうぞ
また Location は現在ページのURL情報を調べたりする目的でも使えます。
例えばプロトコルだったり、ホスト名だったり、ポート番号だったり・・・
その詳しい調べ方は次記事で書いた通り
リダイレクトもできてURL情報も調べられるのが Location の便利な所ですね。
HTMLの場合．リダイレクト用のメタタグを使う
最後にHTMLだけを使ってリダイレクトさせる方法も紹介します。
そのやり方は次みたいにheadタグ内にリダイレクト用のメタタグを書くだけ
|
1 2 |
<meta http-equiv="refresh" content="0;URL=’http://hoge.com/path/to/hoge.php'" /> |
こういう風に http-equiv 属性に "refresh" 、 content 属性に "0;URL='～～～'" みたいに書くだけで即リダイレクトできます。
ちなみにリダイレクトを即（０秒）ではなく、X秒後に行いたい場合は content 属性の最初に秒数を指定すれば「X秒後にジャンプします」的なことが可能です。
例えば次は５秒後にリダイレクトさせるメタタグの例
|
1 2 |
<meta http-equiv="refresh" content="5;URL=’http://hoge.com/path/to/hoge.php'" /> |
上コードみたいに content="5;URL=’～～～'" と最初に秒数を指定するのがミソ
言語ごとのリダイレクトさせる方法まとめ
ここまで紹介した言語ごとのリダイレクト方法をまとめる次の通り
- PHPの場合
header関数を使う。例えば header('Location: hge.php'); を実行すれば hoge.php にリダイレクト可能、ただし書き方・書く場所によって動かないことがあるので要注意！
- JavaScriptの場合
URLオブジェクトを管理する Location インターフェースを使う。例えば location.href = 'https://example.com/path/to/hoge.php'; のようにすればリダイレクトが可能
ということでWeb開発でよく使う言語ごとのリダイレクト方法についてでした。ではでは($・・)/~~~
