2018/08/10
Django フロントエンドDjangoでカスタマイズした404ページを表示する
Djangoプロジェクトでの404ページのカスタマイズについてまとめてみます。
404ページの役割とは?
そもそも404ページとはなんのために存在するのでしょうか?404ページとは、存在しないページにアクセスした際にエラーを表示するページです。誰しも一度は、「404 Not Found」のような表記を目にしたことがあるのではないでしょうか?
Webサービスでは、ユーザーがURLにアクセスした際にサーバーにリクエストを送信します。そのリクエストに対応したレスポンスを数字で示した、HTTP statusコードを返します。代表的なものは、200 OKや500サーバーエラーなどがありますが、404とは、存在しないページにアクセスしたときに返されるstatusコードになります。
本来、存在しないページにアクセスされるのはユーザーにとってよくないことですが、もしアクセスしてしまった場合にはサービスからそのまま離脱させてしまうのではなく、きちんとサービスに戻ってこれるようなページを作成しておくべきです。
Djangoのデフォルトの404ページ
Djangoにはデフォルトで表示される404ページが存在します。ローカルでDjangoプロジェクトを立ち上げ、存在しないURLを打ち込んでみましょう。
こちらはDEBUG=Trueの際に表示される404ページになります。実際のプロダクション環境では、DEBUG=Falseでサービスを提供するので、以下のようなページになります。ユーザーにとってあまり親切な内容ではありませんね。
404ページをカスタマイズしよう
デフォルトの404ページの情報はあまりよろしくないようなので、カスタマイズしてみましょう。今回はサンプルなので、テンプレートのデザイン自体は修正しませんが、オリジナルのデザインにしたり、ヘッダーを共通化するなどの工夫をしてもいいでしょう。
まずは、ルートディレクトリにtemplates
フォルダを作成しましょう。Djangoにおけるルートディレクトリとは、プロジェクトの一番上のフォルダのことで、manage.py
ファイルが存在するディレクトリのことです。django_project
という名前のプロジェクトを作成した想定で進めていきます。
django_project/
$ mkdir templates
$ touch templates/404.html
この404.html
がカスタマイズしていく404ページになります。内容を追加していきましょう。
django_project/templates/404.html
<h1>このページは利用できません</h1>
<p>アクセスできないURLか、ページが削除されています。</p>
<p><a href="/">トップページに戻る</a></p>
これで404ページにトップページへ戻る導線を追加することができました。続いて、settings.py
を変更し、テンプレートをきちんと読み込むようにしましょう。
django_project/django_project/settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')], # ここを追加
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Djangoはテンプレートディレクトリ内に404.html
が存在すればそちらを404ページとして読み込んでくれます。先ほどの404ページをリフレッシュすると、新しい404ページが表示されていると思います。
きちんとした404ページを表示して、ユーザーフレンドリーなサイトにしましょう。