【ワレコのJavaScript】クエリー文字列を引き継いだまま別サイトへリダイレクトする方法【WEBプログラミング】

ワレ子

久しぶりにWEB関連の話題だ。

では本題に入ろう。

クエリー文字列を引き継いだまま別サイトへリダイレクトしたい
まとめ

クエリー文字列を引き継いだまま別サイトへリダイレクトしたい

WEBサイトにアクセスが有った場合に、他のサイトへリダイレクトさせたい場合がある。

例えば、

https://www.wareko.net/old_site/index.html

は既にサービスを停止している。

もしold_siteへのアクセスが有った場合には、以下の新サイトへリダイレクトさせたい。

https://www.wareko.net/new_site/index.html

そう言う状況は良くあるだろう。

ここで問題になるのがクエリー文字列の扱いだ。

クエリー文字列を無視してリダイレクトする

もし単純にやりたいなら old_site/index.html に以下のような簡単なhtmlを記述しておけば良いだろう。

<head>
  <meta http-equiv="Refresh" content="0; URL=https://www.wareko.net/new_site/">
</head>

コード　クエリー文字列を無視してリダイレクトする index.htmlファイルの中身

この場合、もし以下のようなクエリー文字列（URLパラメータとも言う）がURLに連結されていたとしても、それらは無視して新サイト new_site/index.html が開く

https://www.wareko.net/old_site/index.html?aaa=単語1&bbb=単語2

.htaccessファイルでクエリー文字列も引き継いだままリダイレクトさせる

では、クエリー文字列も引き継いだままリダイレクトさせるにはどうすれば良いか？

まず最初に思いつくのは .htaccessファイルを編集してredirectの設定を追加する。その時、クエリー文字列も引き継ぐように記述をすれば良いのだ。

.htaccessファイルは良く知られているようにウエブサーバーに各種の制御を指示するためのファイルだ。

特定のアドレスからのアクセスを許可するとか拒否するなども記述出来る。

.htaccessファイルの記述に関してはややこしいで各自勉強して頂くのが良い。

クエリー文字列を引き継いだままリダイレクトするには、恐らくこの.htaccessファイルの方法が最も一般的な方法であり、正統派の方法だと思う（ワテの経験で）。

ところが、ワテの場合は.htaccessファイルなんて滅多に編集しないし。

そう言う場合はネット情報に頼るのが良い

キーワード　RewriteRule redirect with query string

でGoogle検索したみたら、以下のサイトがヒットした。

How do you redirect URLs with a query string to another host?

This htaccess snippet is supposed to redirect myhost.com/?p=1&preview=true to alt.myhost.com/?p=1&preview=true RewriteEn...

このサイトに質問を投稿している人は以下のようにリダイレクトさせたいとの事だ。

旧サイト　myhost.com/?p=1&preview=true
　↓
新サイト　alt.myhost.com/?p=1&preview=true

つまり、新旧サイトのホスト名が変更になっいるが、クエリー文字列はそのまま引き継いでリダイレクトさせたいとの事だ。

回答は以下の通り。

RewriteCond %{HTTP_HOST} !^alt\.myhost\.com [NC]
RewriteCond %{HTTP_HOST} !^$
RewriteRule ^/?(.*) http://alt.myhost.com/$1 [L,R,NE]

う～ん、さっぱり分からん。

正規表現を使ってパターンを記述してあるが、自称正規表現の初段レベルのワテですら、直ぐには理解出来ない。

もしこの回答を流用するなら myhost.com や alt.myhost.com の部分を自分用にカスタマイズして .htaccessファイルを編集しても良いが。

でも今回は .htaccessファイルを編集するのはやめておく。

その理由は、.htaccessファイルはサイトのセキュリティにも関係するので、素人が安易に編集して間違った設定をするとセキュリティホールを作ってしまう可能性もあるからだ。

JavaScriptでクエリー文字列も引き継いだままリダイレクトさせる

次はJavaScriptを使ってクエリー文字列も引き継いだままリダイレクトさせる方法を試した。

その結果、以下のような簡単な index.html ファイルを作成しておいて、old_site/index.html に保管しておけば new_site/index.html にクエリー文字列も引き継いだままリダイレクトに成功した。

<!DOCTYPE html>
<html>
<head>
    <script>
	/* 
		index.html?q=コーヒー豆+マンデリン

		を

		https://www.google.co.jp/search?q=コーヒー豆+マンデリン

		へリダイレクトするサンプルhtml
	*/

		var queryString=location.search;
		alert('queryString '+queryString);
		alert('リダイレクト先 '+'https://www.google.co.jp/search'+queryString);
		window.location = 'https://www.google.co.jp/search'+queryString;
	</script>
</head>
<body>
</body>
</html>

コード　JavaScriptを使ってクエリー文字列を引き継いでリダイレクトする index.htmlファイル

このコードの要点は以下の通り。