もっと404エラーページを有効に活用できないかな。
こんにちは。HTMLやJavaScriptの開発歴8年の著者が、JavaScriptを使った404エラーページの有効的な使い方をご紹介します。
みなさんは、404エラーページというものに出会ったことはありますか？指定したURLのページが存在しない時に表示されるページが404エラーページです。
例えばこのようなページです。
これが表示されると、非常に残念な気持ちになりますよね。そして、静かにそのページを閉じてしまいます。
404エラーページをデフォルトのままにしておくと、このようにせっかく訪問してくれたユーザーが離脱してしまいます。しかし、JavaScriptを使ってオリジナルの404エラーページを作成すると、ユーザーの離脱を防ぐことができるのです！
今回は、JavaScriptを使って404エラーページを編集し、数秒後にトップページにリダイレクトされるようなページを作ろうと思います。
404エラーページをJavaScriptで扱うための準備
404エラーページをJavaScriptで扱うために、まずはオリジナルの404エラーページ用のhtmlを作成する必要があります。その作り方を詳しく解説します。
オリジナルの404エラーページを作成するには
オリジナルの404エラーページを作成するには、２つ、やらなければならないことがあります。それは、Webサイトのrootフォルダに.htaccessというファイルと、404.htmlというファイルを作成することです。
これらのファイルを編集することで、オリジナルの404エラーページを作成することができます。
.htaccessファイルの作成
ますは.htaccessというファイルを作成します。すでに作成されている場合もありますが、今回は１から作成する方法を説明したいと思います。
まず、Webサイトのrootフォルダに.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エラーページを編集する
では、この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エラーページの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秒後にトップページに推移するのが確認できると思います。
以上がJavaScriptを使って404エラーページからトップページへリダイレクトする方法でした。
まとめ
今回の内容は、404エラーページが表示されると5秒後にトップページへリダイレクトさせることで、ユーザーの離脱を防ぐというものでした。.htaccessなどの普段使い慣れないファイルがあったかもしれませんが、全体的には単純な作業だけで実装できたと思います。
簡単に説明するために404エラーページは非常にシンプルなものになってしまいましたが、このページを素敵にアレンジすることで、404エラーページがむしろユーザーの好感度をあげる要素になるかもしれません。いろいろと試していただいて、素晴らしい404エラーページを作成してもらえればと思います！
