スライドショー

JavaScriptで実現!404エラーの時に別ページにリダイレクトする方法

404エラーページが表示されるけど、普通の画面じゃ面白くないな。
もっと404エラーページを有効に活用できないかな。

こんにちは。HTMLやJavaScriptの開発歴8年の著者が、JavaScriptを使った404エラーページの有効的な使い方をご紹介します。

みなさんは、404エラーページというものに出会ったことはありますか?指定したURLのページが存在しない時に表示されるページが404エラーページです。

例えばこのようなページです。


404エラーページイメージ

これが表示されると、非常に残念な気持ちになりますよね。そして、静かにそのページを閉じてしまいます。

404エラーページをデフォルトのままにしておくと、このようにせっかく訪問してくれたユーザーが離脱してしまいます。しかし、JavaScriptを使ってオリジナルの404エラーページを作成すると、ユーザーの離脱を防ぐことができるのです!

今回は、JavaScriptを使って404エラーページを編集し、数秒後にトップページにリダイレクトされるようなページを作ろうと思います。

404エラーページをJavaScriptで扱うための準備

404エラーページをJavaScriptで扱うために、まずはオリジナルの404エラーページ用のhtmlを作成する必要があります。その作り方を詳しく解説します。

オリジナルの404エラーページを作成するには

オリジナルの404エラーページを作成するには、2つ、やらなければならないことがあります。それは、Webサイトのrootフォルダに.htaccessというファイルと、404.htmlというファイルを作成することです。

これらのファイルを編集することで、オリジナルの404エラーページを作成することができます。

.htaccessファイルの作成

ますは.htaccessというファイルを作成します。すでに作成されている場合もありますが、今回は1から作成する方法を説明したいと思います。

まず、Webサイトのrootフォルダに.htaccessというファイルを作成します。

.htaccessファイルの作成

そして内容を次のように編集します。

ErrorDocument 404 /404.html

これは404というエラーコードを取得したら、root直下にある404.htmlファイルを参照しなさいという意味です。ちなみに、http://から始まるような絶対パスではなく、/から始まる相対パスにするように注意してください。

そうしないと、ページの見た目は404エラーページでも内部的には正常なページとして扱われることになるので、例えばGoogle検索などで404エラーページがヒットしてしまう可能性があります。

.htaccessファイルの編集は以上です。

オリジナルの404エラーページの作成しよう

次に404エラーページの編集に移ります。このファイルは特別なファイルではなく、ただのhtmlファイルですので、いつもWebページを作成するのと同じようにhtmlを使って作成できます。

404.htmlファイルの作成

ではさっそく、404.htmlを作成してみましょう。これもroot直下に次のようにファイルを作成します。

404.htmlファイルの作成

通常のファイルの作成方法と変わりありませんね。

オリジナルの404エラーページを編集する

では、この404エラーページを編集しましょう。本来は凝ったデザインしたり、レイアウトを通常のページと合わせたりするのですが、今回は説明を簡単にするためにシンプルなページにしたいと思います。

このようにhtmlを作成します。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>404エラーページ</title>
    </head>
    <body>
        404エラーページ<br>
        ページが見つかりませんでした。5秒後にトップページへリダイレクトします。
    </body>
</html>

試しに、xxxなどの存在しないページを表示して見ましょう。404エラーページはこのようなシンプルな画面になります。

オリジナルの404エラーページの表示

404エラーページのhtmlの作成は以上です。

JavaScriptを使って404エラーページからリダイレクトする方法

次に、JavaScriptを使って、5秒後にトップページへリダイレクトする処理を作成しましょう。

JavaScriptで一定時間後に処理を行うには

JavaScriptを使って一定時間後に処理を実行するには、setTimeoutを使って次のように書くことで実装できます。

setTimeout( “処理“, 時間(m秒) );

ですので、ページのロードが終わって5秒後に処理をする場合は

window.onload = function(){
   setTimeout( "処理", 5000);
}

というように記述することができます。

リダイレクト処理の実行

それでは、次にトップページへリダイレクトする処理を実装していきましょう。次のように<script>タグを追加することで実装できます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>404エラーページ</title>
        <script>
            window.onload = function(){
               setTimeout( "location.href='./index.html' ", 5000);
            }
        </script>
    </head>
    <body>
        404エラーページ<br>
        ページが見つかりませんでした。5秒後にトップページへリダイレクトします。
    </body>
</html>

もう一度404エラーページを表示すると、5秒後にトップページに推移するのが確認できると思います。

5秒後に推移したトップページ

以上がJavaScriptを使って404エラーページからトップページへリダイレクトする方法でした。

まとめ

今回の内容は、404エラーページが表示されると5秒後にトップページへリダイレクトさせることで、ユーザーの離脱を防ぐというものでした。.htaccessなどの普段使い慣れないファイルがあったかもしれませんが、全体的には単純な作業だけで実装できたと思います。

簡単に説明するために404エラーページは非常にシンプルなものになってしまいましたが、このページを素敵にアレンジすることで、404エラーページがむしろユーザーの好感度をあげる要素になるかもしれません。いろいろと試していただいて、素晴らしい404エラーページを作成してもらえればと思います!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Tatsuya

Tatsuya

プログラム歴10年のシステムエンジニアです。
経験のある言語はHTML,JavaScript,PHP,VB,VBAなど。
WEB系の開発が得意です。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説