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

[前回] 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で学ぶプログラミング基礎(18): Django高度なチュートリアル(再利用可能アプリの書き方)