【Django】Bootstrap/Modalの使用方法を解説！

Masa

こんにちは！Masaです。

今回はDjango/Bootstrapでスマートにモーダルを使用する方法を解説します。

この記事でわかること

Dango/BootstrappでのスマートなModalの使用方法

Djangoを勉強中の人にお勧めする1冊！
実装から公開まで一通り記載してあるので、AWSでサーバを立てて公開まで出来てしまいます。

リンク

Modalとは
Modalの使用方法
1. 前提条件
2. モーダルの書き方
まとめ

Modalとは

まずモーダルの意味について見ていきましょう。

モーダルとは、ユーザーインターフェースデザイン（UIデザイン）の専門用語で、システムが特定の機能の使用に制限されている状態のことを指します。例えば、モーダルウィンドウとモーダルダイアログが該当します。
モーダルって何？ – WEB制作用語辞典 – Lab-ry Works

つまりモーダルとはシステムの親子において、子の操作を完了しないと親の操作ができない状態を指すということだと考えられます。

このモーダルを使用した機能が”モーダルウインドウ”や”モーダルダイアログ”というわけです。

今回はBootstrapnを使用したモーダルをDjangoで使用する場合について解説していきます！

Modal (モーダル)

モーダルでは, JavaScript modal プラグインを使用して, ライトボックス, 通知, カスタムダイアログを作成できます。モーダルの使い方の例を示します。

Modalの使用方法

前提条件

今回は社員一覧を例にし、削除ボタンをクリックするとモーダルウインドウが表示され確認を取るというシステムを作成します。

以下、事前に作成したurls.py、models.py、views.py、テンプレート(base.html)です。

from django.urls import path

from . import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('delete/<int:pk>', views.DeleteView.as_view(), name='delete'),
]

from django.db import models

class Member(models.Model):
    name = models.CharField(max_length=20)
    gender = models.CharField(max_length=20)
    age = models.IntegerField()
    department = models.CharField(max_length=20)

    def __str__(self):
        return self.nam

from django.views.generic import ListView, DeleteView
from django.urls import reverse_lazy

from .models import Member

class IndexView(ListView):
    template_name = 'example_app/index.html'
    model = Member

class DeleteView(DeleteView):
    model = Member
    template_name = 'example_app/delete.html'
    success_url = reverse_lazy('index')

indexViewではListViewを使用し、テンプレート(index.html)に社員一覧のデータを渡す
DeleteViewでは削除が完了した後、社員一覧ページに戻るよう指定

{% load static %}
<!doctype html>

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>社員管理システム</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">社員管理システム</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>  
    {% block main %}{% endblock %}
    <!-- Bootstrap Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

base.htmlに関しては今回は一切関係ないので、無視してもらって大丈夫です。

モーダルの書き方

ここからモーダルの作成を行っていきます。

まずは社員一覧を表示する“index.html”です。

{% extends 'example_app/base.html' %}

{% block main %}
    <h1>社員一覧</h1>
    <table class="table">
        <thead>
          <tr>
            <th scope="col"></th>
            <th scope="col">名前</th>
            <th scope="col">性別</th>
            <th scope="col">年齢</th>
            <th scope="col">所属部署</th>
          </tr>
        </thead>
        <tbody>
        {% for item in object_list %}
          <tr>
            <td><a type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#delete-Modal-{{ item.pk }}">削除</a></td>
            {% include 'example_app/delete.html' %}
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.department }}</td>
          </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}

モーダル部分は18, 19行目です。

(18行目)削除ボタン部分です。クリックするとモーダルウインドウが表示されます。
(19行目)テンプレートタグ”include”を使用して、モーダルウインドウ部分を”delete.html”に記述します。

次に”delete.html”を作成し、”index.html”と同じ階層に保存しましょう。

<div class="modal fade" id="delete-Modal-{{ item.pk }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">タスクの削除</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>削除するともとに戻せません。よろしいですか？
        </div>
        <div class="modal-footer">
            <form method='POST' action="{% url 'delete' item.pk %}">
            {% csrf_token %}
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
              <button type="submit" class="btn btn-primary">削除</button>
            </form>
      </div>
    </div>
  </div>