リダイレクト（html/htaccess）の設定と使い分けについて
- 目次
-
こんにちは、オトナ帝国です。
みなさん、リダイレクトの設定はなさっていますでしょうか。
リダイレクトを設定することはそんなにないかもですが、後日でも触れますが、httpからhttpsへのリダイレクト、レンタルサーバーのリンクから独自ドメインへのリダイレクトなどなど、やることはちょくちょくあるかと思います。
リダイレクトとは
リダイレクトとは特定のページにアクセスしてきたユーザーを特定のページに自動で遷移させることです。特にサイトのリニューアルでリンクを変更するときに変更前から変更後に遷移させたいときや、アクセス時にアクセス端末がスマホであればスマホサイト、PCであればPCサイトに遷移させたいときに使用します。
リダイレクトのやり方
リダイレクトの方法は大きく2つあります。 ※ここではページＡからページＢにリダイレクトする前提で書いていきます。
ユーザーサイトからのリダイレクトか、サーバーでのリダイレクトです。
ユーザーサイドでのリダイレクト
ユーザーサイドのリダイレクトの場合は、Aページにアクセス時に、Aページ内に書かれているプログラムによってBページにリダイレクトしていくことになります。
つまりユーザーがアクセス、ファイルを取得、そのファイルによってリダイレクトが行われます。
ファイルを取得、という意味では、AページにGoogleAnalyticsを埋め込んでいた場合、リダイレクト前のページアクセス（Ａページのアクセス数）が計測できるため、Ａページのアクセス需要がわかります。
アクセス需要がわかれば、Ａページのアクセスがない場合、もう不要なページとしてファイルを削除するなどが可能です。
ただし、ファイルを取得してリダイレクトが起きるのでユーザーのネット接続状況や、プログラムの動きによってはリダイレクトが機能しないこともあるので、サーバー処理より不安定になることがあります。
ですので、単一ページのリダイレクトに向いていますが、サイト全体のリダイレクトに向いてないです。
この場合、処理としてのhtml・jQueryは下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>オトナ帝国</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="" />
<link rel=”icon” href=“https://otona-teikoku.com/favicon.ico”>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<p>リダイレクトされない場合は<a href="" class="js-redirect-link">こちら</a></p>
<script>
(function () {
//リダイレクト先設定
$(function () {
const $target = $(".js-redirect-link");
const redirectLink = "https://リダイレクト先のリンク";
$(window).on("load", function () {
setTimeout(function () {
window.location.href = redirectLink;
}, 2000);
$target.attr("href", redirectLink);
});
});
})();
</script>
</body>
</html><head>内は無視していただいて問題ないです。jQueryで動かすためにbody直下でjQueryを読み込んでいます。
window.location.href = redirectLink;リダイレクトだけであれば、これで終わりなのですが、今回は一応リダイレクトが動かなかったとき用に、setTimeout()関数で2000を入れることで2秒ほど待機させるのと、テキストリンクを用意しています。
テキストリンクは、.js-redirect-linkを$targetに格納し、そこにredirectLinkに格納したリダイレクト先リンクをattr()関数でhref項目に追加しています。
サーバーサイドでのリダイレクト
ここまではユーザーサイドでのリダイレクトの話をしてきましたが、次はサーバーサイドでのリダイレクトについて、です。
サーバーサイドのリダイレクトの場合は、Aページにアクセス時に、サーバー側でBページに変更してレスポンスを返すことになります。
つまりユーザーがアクセス、ファイルの取得はなく、そのままリダイレクトが行われます。
こちらのほうが、サーバーが落ちない限り動きますし、ファイルの取得がなく、ユーザーのネット状況も関係ないため、早く安定して動きます。
ただし、サーバーのアクセスログでしかアクセス情報がわからないので、どれほどＡページのアクセス需要はわからないです。
つまり、サイト全体のリダイレクトに向いていて、単一ページのリダイレクトに向いてないです。
サーバーサイドでのリダイレクトはhtaccessをここでは記載します。htaccessはapacheサーバーでしか動かないので、全サーバーで動かないことがあるので注意が必要です。
例えば、httpsからhttpのリダイレクトは下記のようになります。
RewriteEngine on
RewriteCond %{ HTTPS} off
RewriteRule ^(.*)$ https://%{ HTTP_HOST}%{REQUEST_URI} [R=301,L]ドメインがaaa.comからbbb.comに変わる場合は下記になります。
RewriteEngine On
RewriteCond %{http_host} ^www.old.com
RewriteRule ^(.*) https://www.new.com/$1 [R=301,L]この辺りのhtaccessはまた別の機会にもう少し詳しくまとめていきたいと思います。
最後に
今回はリダイレクトをまとめてみました。
ユーザーサイドとサーバーサイドのリダイレクトには処理の速度、アクセス解析、などメリットデメリットがあるので、各状況でそれぞれ使い分けがあります。
必要に応じて使い分けしてみてください。 何かの参考になれば幸いです～
オトナ帝国では、昔のゲームなどの懐かしい体験ができる秘密基地を運営中。
浅草葦拠点では現在セールを実施しています。お部屋の詳細だけでも見てください～
