久しぶりにWEB関連の話題だ。
では本題に入ろう。
クエリー文字列を引き継いだまま別サイトへリダイレクトしたい
WEBサイトにアクセスが有った場合に、他のサイトへリダイレクトさせたい場合がある。
例えば、
は既にサービスを停止している。
もしold_siteへのアクセスが有った場合には、以下の新サイトへリダイレクトさせたい。
そう言う状況は良くあるだろう。
ここで問題になるのがクエリー文字列の扱いだ。
クエリー文字列を無視してリダイレクトする
もし単純にやりたいなら 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 が開く
.htaccessファイルでクエリー文字列も引き継いだままリダイレクトさせる
では、クエリー文字列も引き継いだままリダイレクトさせるにはどうすれば良いか？
まず最初に思いつくのは .htaccessファイルを編集してredirectの設定を追加する。その時、クエリー文字列も引き継ぐように記述をすれば良いのだ。
.htaccessファイルは良く知られているようにウエブサーバーに各種の制御を指示するためのファイルだ。
特定のアドレスからのアクセスを許可するとか拒否するなども記述出来る。
.htaccessファイルの記述に関してはややこしいで各自勉強して頂くのが良い。
クエリー文字列を引き継いだままリダイレクトするには、恐らくこの.htaccessファイルの方法が最も一般的な方法であり、正統派の方法だと思う（ワテの経験で）。
ところが、ワテの場合は.htaccessファイルなんて滅多に編集しないし。
そう言う場合はネット情報に頼るのが良い
キーワード RewriteRule redirect with query string
でGoogle検索したみたら、以下のサイトがヒットした。
このサイトに質問を投稿している人は以下のようにリダイレクトさせたいとの事だ。
↓
新サイト 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ファイル
- クエリー文字列は location.search に入っている。「?」も先頭に付いている。
- リダイレクトは window.location = ‘https:// 新しいURL ‘ で行ける
- Windowsの適当なフォルダにこのhmtlコードを書き込んだindex.htmlファイルを保管する
- ここではデスクトップに保管したとしよう。
- SHIFTキーを押しながらindex.htmlファイルをマウス右クリックでメニュー表示する
- 表示メニューから”パスのコピー”を実行する
- メモ帳などのエディタを開いてコピー内容をペーストする
この文字列を全部選択してChromeブラウザーのアドレス欄に貼り付けてENTERを押すと以下のようになる。
まとめ
WEBプログラミングの世界は色んなテクニックがある。
新しい技術や手法もどんどん出てくるので勉強をサボると置いてきぼりになる。
ワテの場合も久しぶりにWEBプログラミングを再開したので浦島太郎状態だ。
当記事では、ウェブサイトにアクセスが有った場合に、クエリー文字列を引き継いだまま別サイトにリダイレクトする手法を紹介した。
一般的な手法は .htaccessファイルを編集してApacheやIISなどのウエブサーバーに指示をする手法だろう。
しかし .htaccessの編集には正規表現の知識が必要だし、普通の人は（ワテも）.htaccessの編集なんて滅多にやらないので難しい。
そこでもっと分かりやすい方法としてJavaScriptを使ってクエリー文字列も引き継いだままリダイレクトする手法を紹介した。
紹介したと言うよりも、ワテも今までに幾つかのウェブサイトを作っていて、古いサイトで廃止したものもあるので、旧サイトへのアクセスを新サイトへリダイレクトする必要に迫られたのだ。
そこで必死でネット検索して、この記事にまとめたJavaScriptの手法を覚えたと言うのが正しい。
当記事で紹介した手法にもし何か間違いなどありましたらお知らせ下さい。
あるいは、より良い手法があるなどの情報も歓迎です。
（続く）
コメント