【ページに埋め込むだけ】JavaScriptを活用した効果的なリダイレクト方法

Web開発において、ページのリダイレクトは必要不可欠な機能の一つです。
通常、リダイレクトはサーバー側で.htaccessファイルを変更したり、またHTMLのmetaタグのだけでできます。
しかし、CMSの保守など権限がないなどの理由で、これらの方法が使えない場合があります。
そのとき、JavaScriptを使ってリダイレクトすることができます。

JavaScriptを使用したリダイレクトの実装方法

JavaScriptを使ったリダイレクトは、非常にシンプルで、下記のスクリプトをページ内に追加するだけです。

<script type="text/javascript">
    let seconds = 5; // 秒数を設定します。ここでは5秒後にリダイレクトするように設定しています。
    let newLocation = "https://www.example.com"; // リダイレクト先のURLを設定します。

    setTimeout(function(){
        location.href = newLocation;
    }, seconds * 1000);
</script>

このコードは、指定された秒数（この例では5秒）が経過した後に、指定されたURL（https://www.example.com）へとブラウザをリダイレクトします。

注意点

• ブラウザの設定: 一部のブラウザではJavaScriptの実行が無効になっている場合があります。その時、JavaScriptによるリダイレクトは機能しません。
• ユーザビリティ: リダイレクトの前にユーザーに通知することは、ユーザビリティを向上させる上で重要です。リダイレクトが発生する前に、短いメッセージやカウントダウンを表示することをお勧めします。

追加のヒント

リダイレクトすることがわかるように、「お詫びの文言」と「遷移先のボタンやURLもページに含める」ことを検討してください。これにより、JavaScriptが無効なブラウザを使用しているユーザーでも、適切なページへ簡単に移動できるようになります。

以下が例文になります。

<!--キャンペーンが終了したとき-->
<p>「2023年◯月◯日（◯）をもって、キャンペーンを終了させていただきました。<br>
お客様には大変ご不便とご迷惑をおかけいたしますが、何卒ご理解を賜りますようお願い申し上げます。<br>
ご不明点等ございまいたら、〇〇〇〇までお問合せください。5秒後にTOPページへ遷移します。</p>

<p>遷移しない場合、こちらのURLをクリックしてください。</p>
<p><a href="https://www.example.com">https://www.example.com</p>

まとめ

JavaScriptによるリダイレクトは、サーバーサイドの設定を変更できない場合の有効な代替手段です。
ただし、全てのブラウザで機能するわけではないため、ユーザーに親切なデザインを心掛けることが重要です。