Django+Reactで学ぶプログラミング基礎(17): Djangoチュートリアル(投票アプリその7-3) #QiitaEngineerFesta2022

[前回] Django+Reactで学ぶプログラミング基礎(16): Djangoチュートリアル(投票アプリその7-2)

はじめに

Django公式チュートリアル、その7-3です。
前回は、管理サイトにソート/検索/フィルター機能を追加しました。
今回は、Djangoテンプレートを使用し、見映えと使い勝手を改善します。

Djangoアプリ作成(その7-3): 投票(poll)アプリ

今回の内容

テンプレートを使用し、管理サイトのルック&フィールをカスタマイズ
- ※ ルック&フィールとは
  - ソフトウェアのUI(ユーザーインターフェイス)における、見映えと使いやすさを指す
- プロジェクトテンプレートをカスタマイズ
- アプリケーションテンプレートをカスタマイズ

プロジェクトテンプレートをカスタマイズ

テンプレートの格納場所

プロジェクトのテンプレート
- 慣習として、プロジェクトディレクトリ(manage.pyの配置ディレクトリ)直下のtemplatesディレクトリに配置
- プロジェクト設定ファイルのTEMPLATESオプションに、DIRSオプションを追加
  - DIRSは、検索パスで、ファイルシステム上のディレクトリのリスト
    - Djangoがテンプレートを読み込む際、チェックされる

pollsite/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [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自体のソースコードからテンプレートをコピー

プロジェクトのtemplatesの中にadminディレクトリを作成
Django自体のソースコードのディレクトリを確認
- VS Codeでもう一つコマンドプロンプトを開き、以下コマンドを実行

(venv) C:\kanban\pollsite>python -c "import django; print(django.__path__[0])" 
C:\kanban\venv\.venv\lib\site-packages\django

Django自体のソースコードから、デフォルトの管理サイトテンプレートディレクトリを探す
- ファイルメニューからフォルダーをワークスペースに追加を選択
- 上記で確認した、Django自体のソースコードディレクトリを入力し、ワークスペースにファルダーを追加
  - 例: C:\kanban\venv\.venv\lib\site-packages\django
- テンプレートdjango/contrib/admin/templates/admin/base_site.htmlをコピー(Ctrl+C)し、上記作成のtemplates/adminディレクトリにペースト(Ctrl+V)
コピーされたテンプレートファイルを編集
- {{ site_header|default:_('Django administration') }}を
  - 自分のサイト名(例えば投票管理サイト)に入れ替える

base_site.html

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">投票管理サイト</a></h1>
{% endblock %}

VS Codeコマンドプロンプトからサーバーを起動

(venv) C:\kanban\pollsite>python manage.py runserver

ブラウザで、管理サイトにアクセス
- http://127.0.0.1:8000/admin/
- 管理サイトのタイトルが変更されています

アプリケーションテンプレートをカスタマイズ

アプリ特有のテンプレートは、各アプリのテンプレートディレクトリに配置される
- 例: polls/templates
プロジェクト設定ファイルsettings.jsonで、TEMPLATESのAPP_DIRS属性がTrueと設定されている場合
- Djangoは自動的に各アプリのディレクトリからフォールバックとしてtemplates/を探す
  - ※ 上記操作で、テンプレートのコピー元のdjango.contrib.adminも、実は一つのアプリに相当

アプリケーションテンプレート VS. プロジェクトテンプレート

アプリケーションテンプレートを使用するのが賢明
- メリット1: 投票アプリを他のプロジェクトにも追加できる
- メリット2: 投票アプリ自身にフィットした、カスタムテンプレートを使用できる

実際のプロジェクトで、テンプレートによるカスタマイズ

Djangoのデフォルトの管理テンプレートはすべてオーバーライドできる
上記チュートリアルで紹介したアプローチは、テンプレートをオーバーライドする方法を示すため
実際のプロジェクトでは、django.contrib.admin.AdminSite.site_header属性を使用しカスタマイズ

テンプレート言語

テンプレートで使用される{%と{{タグ
- Djangoのテンプレート言語の一部
- Djangoがadmin/base_site.htmlをレンダリングする時、テンプレート言語が評価され
  - 最終的なHTMLページが生成される

以上、テンプレートを使用し、管理サイトをカスタマイズしました。

おわりに

これで、Django公式チュートリアルを一通り実践できました。
アプリ構築のノウハウのみならず、アプリ設計における考え方にも感銘を受けました。
次回は、Djangoの高度なチュートリアルです。お楽しみに。

Django+Reactで学ぶプログラミング基礎(17): Djangoチュートリアル(投票アプリその7-3)