旧ページからカウントダウン後にリダイレクトさせるJavaScript

HONDA-BEAT.JPのリニューアルでMovable Type 4 から MovableType.netに移行したのですが、移行にあたり各記事のURLも変更しました。そのためすべての記事にリダイレクトをかけています。

2011年10月3日のブログ記事「エンジンオイル交換」のURLは下記のように変更しました。


旧URL：https://honda-beat.jp/beat_life/archives/2011/10/03_235355.html

新URL：https://honda-beat.jp/beat_life/post-75.html

リダイレクトさせるにあたってはMovableType.netにもリダイレクト機能がありますが、今回は旧URLにアクセスした時カウントダウンが始まり、カウントが0になったらリダイレクトされるようにしました。

本来なら.htaccessで301リダイレクトと言われる恒久的にURLが変わったことを意味するリダイレクトにするべきなのでしょうが...

なぜ、カウントダウン後にリダイレクトするようにしたかというと、URLが変わったことを認識してほしいのでカウントダウンの後にリダイレクトするようにしました。

そして、ただカウントダウン後にリダイレクトするのでは面白くないのと、いつまでもカウントダウンさせる必要はないかなと思い、1日1秒ずつカウントダウンの秒数が減っていくようにしました。


// アクセスした日
var startDateTime = new Date();

// endDateTimeにカウントダウンをさせる最後の日を設定する
var endDateTime = new Date("2018/06/30 00:00:00");

// アクセスした日（startDateTime）からendDateTimeに設定した日までの残り時間
var left = endDateTime - startDateTime;

// 1日のミリ秒
var a_day = 24 * 60 * 60 * 1000;

// 期限から現在までの『残時間の日にちの部分』
var d = Math.floor(left / a_day);

var start=new Date();
start=Date.parse(start)/1000;

  function count_down(){
    var now=new Date();
    now=Date.parse(now)/1000;
    var x=parseInt(d-(now-start),10)+1;

    $("#TimeLeft").text(x);
    if(x>0){
      timerID=setTimeout("count_down()", 100)
    }else{
      location.href = redirectURL
    }
  }
  window.setTimeout('count_down()',100);

上記ではアクセスした日から「endDateTime」にある「2018/06/30 00:00:00」までの日数を求めて、その数字をカウントダウンの始まりの数字として1日に1秒ずつ減っていきます。

そして最終的に「endDateTime」に設定した日時を過ぎるとカウントダウンまでのカウントが「0」になり、アクセスと同時にリダイレクトされます。

スクリプトはこれだけですが、上記スクリプトを動作させるには当然ながら旧ページに上記スクリプトを読み込ませる必要があるので、上記のスクリプトを読み込むようにしたブログ記事のページも旧ページのURLでも生成されるようにしてMovableType.net上に作ってしまいました。

旧サイトはMovableType4だったのでスクリプトを読み込ませるように修正してFTPでHTMLファイルをダウンロード、MovableType.netの「ファイルマネージャ」機能でファイルをアップロードしてと思っていましたが、先日よりブログ記事用のテンプレートが2つ作れるように増えたので、新旧のページをMovableType.netに作ることにしました。

2018/06/30までカウントダウンするようになっています。
サンプルURL：https://honda-beat.jp/beat_life/archives/2011/10/03_235355.html

GitHub : js-countdown-redirect-to-new-url