119
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

リダイレクトの方法

Last updated at Posted at 2015-06-11

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によるリダイレクト(同じホストの場合)

.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^$ /sp/ [R=301,L]
  • ディレクトリ単位でリダイレクトの設定が可能
  • サブディレクトリもそのままの階層のままリダイレクトが行われる

リダイレクトステータス

301

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

302

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

PHPによるリダイレクト

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
119
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?