リダイレクトの方法 #JavaScript

PCとスマホ両方に対応したサイトを構築するにあたって、

レスポンシブで対応する(読み込むファイルを分ける)
PC用・スマホ用でページ(URL)を分ける
PC用・スマホ用で読み込むソースを分ける(同じファイル内で)
PCではあるけど、スマホにはないページがある(またはその逆)

のような場合がでてくる。
アクセスされたくないページにアクセスされてしまっても、正しいページに誘導してあげることが必要になる。

上記の場合がメインの内容です。

metaタグによるリダイレクト

<meta http-equiv="refresh" content="秒数;URL=URL">

URLは相対パスでも絶対パスでも可能

ex.5秒後に指定したURLにリダイレクトさせる場合

<meta http-equiv="refresh" content="5;URL=/sp/index.html">

JavaScriptによるリダイレクト

location.href="URL";

URLは相対パスでも絶対パスでも可能

秒数を指定する場合

setTimeout("redirect()", 5);
function redirect(){
    location.href='/sp/index.html';
}

デバイスごとに切り替える場合

var ua = navigator.userAgent;
var redirectPass = '/sp/index.html';
if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
    location.href = redirectPass;
}

パラメーターなどをつけてリダイレクトする場合

var url = document.URL;
if(url.match(/separate/)){
  if(url.match(/\?/)){
    location.href = url + "&device=sp"
  }else{
    location.href = url + "?device=sp"
  }
}

.htaccessによるリダイレクト(同じホストの場合)

RewriteEngine On
RewriteBase /
RewriteRule ^$ /sp/ [R=301,L]

ディレクトリ単位でリダイレクトの設定が可能
サブディレクトリもそのままの階層のままリダイレクトが行われる

リダイレクトステータス

301

恒久的なリダイレクト
元に戻すことが無い場合に利用する
ブラウザが記憶をする為、htaccessの記述を無くしてもリダイレクトし続ける場合がある

302

一時的なリダイレクトです。
メンテナンス中など、一時的な対処に使う

PHPによるリダイレクト

header('location: /sp/index.html');
exit();