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

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

## はじめに

[Django公式チュートリアル](https://docs.djangoproject.com/ja/4.0/intro/tutorial01/)、その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`ディレクトリを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/d77babc4-d475-5aaf-9208-d006bc129e99.png)

- Django自体のソースコードのディレクトリを確認
    - VS Codeでもう一つコマンドプロンプトを開き、以下コマンドを実行
```
(venv) C:\kanban\pollsite>python -c "import django; print(django.__path__[0])" 
C:\kanban\venv\.venv\lib\site-packages\django
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/10754794-ac80-88d3-ce05-dd9b9b02e7fe.png)

- Django自体のソースコードから、デフォルトの管理サイトテンプレートディレクトリを探す
    - `ファイル`メニューから`フォルダーをワークスペースに追加`を選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/f4145166-e952-0b77-7be2-fe7ec8cf5c29.png)
    - 上記で確認した、Django自体のソースコードディレクトリを入力し、ワークスペースにファルダーを追加
        - 例: `C:\kanban\venv\.venv\lib\site-packages\django`
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/15eee142-4016-1d03-8e41-e01f3ab995dc.png)
    - テンプレート`django/contrib/admin/templates/admin/base_site.html`をコピー(Ctrl+C)し、上記作成の`templates/admin`ディレクトリにペースト(Ctrl+V)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/a590d2f2-4fd5-71eb-c0b4-52184f5b445e.png)

- コピーされたテンプレートファイルを編集
    - `{{ 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/`
    - 管理サイトのタイトルが変更されています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/75f3d89c-1d76-3449-9817-2758ded2e800.png)

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

- アプリ特有のテンプレートは、各アプリのテンプレートディレクトリに配置される
    - 例: `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公式チュートリアル](https://docs.djangoproject.com/ja/4.0/intro/tutorial01/)を一通り実践できました。
アプリ構築のノウハウのみならず、アプリ設計における考え方にも感銘を受けました。
次回は、Djangoの高度なチュートリアルです。お楽しみに。

##### [次回] [Django+Reactで学ぶプログラミング基礎(18): Django高度なチュートリアル(再利用可能アプリの書き方)](https://qiita.com/mingchun_zhao/items/0e337b6681da9c7971b0)