ベーステンプレートの作成

これからトップページやログインページなどの各ページを作成していきます。Djangoではテンプレートを使ってページをデザインします。テンプレートを格納するディレクトリとして、templates/ディレクトリを用意します。下記のとおり、recsys_django/online/ディレクトリにtemplates/ディレクトリを作成してください。

recsys_django/online/templates/

また、CSSファイルやJavaScriptのソースファイル、画像ファイルなどの静的ファイルを格納するディレクトリとしてstatic/ディレクトリを用意します。下記のとおり、recsys_django/ディレクトリ直下にstatic/ディレクトリを作成してください。さらに、static/ディレクトリ内に、CSS、JavaScriptのソースファイル、画像ファイル用のディレクトリとして、それぞれjs/、css/、img/ディレクトリも作成しておきます。

recsys_django/static/
recsys_django/static/css/
recsys_django/static/js/
recsys_django/static/img/

このstatic/ディレクトリの場所を設定しておきます。recsys_django/recsys_django/settings.pyに下記のコードを追加してください。

リスト1: recsys_django/recsys_django/settings.py

...（略）...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.0/howto/static-files/

STATIC_URL = 'static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)  # 追加
...（略）...

このように設定しておくことで、テンプレートタグ{% load static %}でstatic/ディレクトリへのパスを読み込めるようになります。

さらに、テンプレートのデザインにはBootstrapを利用します。そのための準備として、recsys_django/recsys_django/settings.pyのINSTALLED_APPSに下記のコードを追加してください。

リスト2: recsys_django/recsys_django/settings.py

...（略）...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'django_bootstrap5',            # 追加

    'online.apps.OnlineConfig',
    'accounts.apps.AccountsConfig'
]
...（略）...

つづいて、各ページで共通利用するテンプレートとして、ベーステンプレートを作成します。下記のとおり、recsys_django/online/templates/ディレクトリにbase.htmlを作成してください。

recsys_django/online/templates/base.html

ここでは、文献[1]を参考に、Bootstrapのサンプルを基に作成することにします。次の手順でサンプルファイルをダウンロードしてください。

Bootstrapのトップページからダウンロードボタンをクリックする。
表示されたページからサンプル > Download Examplesボタンをクリックする。

ダウンロードしたサンプルファイル内のbootstrap-*-examples/navbar-static/index.htmlの内容をbase.htmlにコピーし、下記のように編集してください。

リスト3: recsys_django/online/templates/base.html

{% load static %}
{% load django_bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<!-- Bootstrapサンプルのnavbar-staticをコピーして編集する。 -->
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
        <meta name="generator" content="Hugo 0.84.0">
        <title>{% block title %}{% endblock %}</title>

        {# --- css --- #}
        <!-- Custom styles for this template -->
        <link href="{% static 'css/navbar-top.css' %}" rel="stylesheet">
        <link href="{% static 'css/style.css' %}" rel="stylesheet">
    </head>
    <body>
        {# --- js --- #}
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

        {# --- files --- #}
        
        <!-- ナビゲーションバー -->
        <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
                        <li class="nav-item">
                            <a class="navbar-brand" href="{% url 'online:index' %}">recsys-django</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav mr-auto mb-2 mb-md-0">
                        {% if user.is_authenticated %}
                            <!-- ログイン中のメニュー -->
                            <div class="dropdown">
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    {{ user.username }}
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">ログアウト</a></li>
                                </ul>
                            </div>
                        {% else %}
                            <!-- ログイン状態ではない場合のメニュー -->
                            <li class="nav-item">
                                <a class="nav-link" href="#">サインアップ</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">ログイン</a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </nav>

        <!-- メインコンテンツ -->
        <main class="container">
            {% block contents %}{% endblock %}
        </main>

        <!-- フッター -->
        <footer class="text-muted py-5">
            <div class="container">
                <p class="float-end mb-1">
                    <a href="{% url 'online:index' %}">トップページに戻る</a>
                </p>
                <p class="mb-1">
                    &copy; 2022 RecSysLab
                </p>
            </div>
        </footer>
    </body>
</html>

また、ダウンロードしたサンプルファイル内のbootstrap-*-examples/navbar-static/navbar-top.cssを、下記のとおり、recsys_django/static/css/ディレクトリにコピーしてください。

recsys_django/static/css/navbar-top.css

併せて、recsys_django/static/css/ディレクトリにstyle.cssを作成し、下記のコードを記述してください。

リスト4: recsys_django/static/css/style.css

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

base.htmlの冒頭で、テンプレートタグ{% load static %}と記述することで、このテンプレート内からstatic/ディレクトリのファイルを参照することができるようになります。また、このテンプレートでBootstrapを利用するため、下記のテンプレートタグを記述しています。

{% load django_bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

テンプレートは基本的にHTMLで構成されています。

<!doctype html>はDOCTYPE宣言で、この文書がHTML5の文書であることを明示するものです。これは必ずHTML文書の先頭（html要素よりも前）に記述する必要があります。

<html>から</html>で囲まれた部分がHTML本体となります。HTMLはhead要素とbody要素で構成されます。head要素は文書の表紙に相当するものです。ここにページのタイトルやCSSファイルへの参照などを記述します。<title>から</title>で囲まれた部分がページタイトルになりますが、base.htmlでは{% block title %}{% endblock %}としています。この部分にbase.htmlを継承したテンプレートのページタイトルが入ることになります。また、本チュートリアルでは、CSSファイルへの参照は、{# --- css --- #}以降に記述することにします。

body要素は文書の本文に相当するものです。この中にHTMLの本文を記述します。ここでは、ナビゲーションバー、メインコンテンツ、フッターから構成されるようにしています。ここで、メインコンテンツには、{% block contents %}{% endblock %}と記述しています。この部分に継承先のテンプレート独自の処理が入ることになります。

また、本チュートリアルでは、JavaScriptのソースファイルや画像ファイル等への参照は、それぞれ{# --- js --- #}、{# --- files --- #}以降に記述することにします。ユーザ入力の受付やイベント処理、画面への出力などユーザインタフェースに関わる部分は主にJavaScriptを用います。ここでは、jQueryとよばれるJavaScriptライブラリを参照します。jQueryを用いることで、JavaScriptコードをより簡潔に記述できるようになります。本チュートリアルでは、jquery-3.6.0.min.jsを用います。jquery-3.6.0.min.jsを参照するためにbase.htmlの{# --- js --- #}の部分に下記コードを記述しています。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

ここでは、CDN (Content Delivery Network) を用いてjQueryを参照しています。上記のコードは，jQuery CDNから確認できます。このようにCDNを利用することで、手軽にjQueryを利用することができます。

テンプレートおよびベーステンプレートの詳細については文献[2][3]を参照してください。また、静的ファイル関連の設定やテンプレートタグについては、文献[4][5]を参照してください。

参考

Django4 Webアプリ開発実装ハンドブック # 7.1 photoアプリを作ろう
現場で使える Django の教科書《基礎編》 # 第7章テンプレート (Template)
現場で使える Django の教科書《基礎編》 # 7.5 ベストプラクティス6: ベーステンプレートを用意する
現場で使える Django の教科書《基礎編》 # 10.4 静的ファイル関連の設定
現場で使える Django の教科書《基礎編》 # 7.4 テンプレートタグ