Webサイトの移転によるリダイレクトをJavaScriptで実現させるクラス

2019年04月14日 (日)

Webサイトを移転させる時、移転前から移転後ではパスやパーマリンクが変更になることでURLが変わってしまうことはよくありますよね。

私は先日、古いPukiWikiのシステムをGoogleのBlogger(ブロガー)に移転させようとしました。

PukiWikiのURLは、各ページの判別がGETパラメータになっています。
このような形式ですね。

https://example.com/?page1

GoogleのブログシステムのBlogger(ブロガー)にもリダイレクトの機能が備わっている為、
それで古いURLを新しいURLにリダイレクト(転送)すれば良いと考えていました。

しかし、実際に試したところ、？が付いたURLだとリダイレクトしてくれませんでした。
しばらく試行錯誤してみたのですが、やはり意図したように動作してくれません。

動かないものは仕方ないですよね。
幸いにもBlogger(ブロガー)では、JavaScriptが自由に使えるので、JavaScriptで実現させることにしました。

結果的に意図した通りにリダイレクト(転送)できそうなので、その時のコードを残すことにします。

今回は、PukiWiki から Blogger へのサイト移転でしたが
他のWebサイト移転でも、流用可能だと思います。

ただし、PukiWikiからBlogger用に作成しましたので、少しコードを変更する必要はあります。


今回、転送設定したURLです。

・PukiWiki のURL
https://example.com/?page1

↓ リダイレクト(転送)します

・Blogger(ブロガー) のURL
https://example.com/2019/01/01/page1.html


複数のURLを設定できるようにしています。 PukiWikiは、日本語のURLになっている場合があるので、転送元は、日本語でもＯＫです。

PukiWiki から Bloggerへ移転させるJavaScript

<script type='text/javascript'>
//<![CDATA[
class Redirect {
 constructor() {
  this.Scheme = window.location;
  this.Url = {};
 }

 set_url() {
  // 転送元・転送先を設定(転送元は日本語もＯＫ)
  this.Url = {
   '?page1': '/2019/01/01/page1.html'
   ,'?page2 ページ２': '/2019/01/01/page2.html'
  };
 }

 is_url(word) {
  return this.Scheme.search.indexOf(word) >= 0 ? true : false;
 }

 get_url() {
  let $result = /(^\?.+)/.exec(this.Scheme.search);
  if ($result[1] && ($result[1] = decodeURIComponent($result[1]))) {
   this.set_url();
   return this.Url[$result[1]] ? this.Url[$result[1]] : '';
  }

  return '';
 }
}

$redirect = new Redirect();
if ($redirect.is_url('?') == true) {
 if (($url = $redirect.get_url())) {
  window.location.href = $url;
 }
}

上記のコードを Blogger(ブロガー) のヘッダー内に入れるだけです。

以上、Webサイト移転時のリダイレクトをJavaScriptで実現させるクラスでした。