DjangoBrothers BLOG

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ページを表示して、ユーザーフレンドリーなサイトにしましょう。

SHARE ! Tweet