Pythonフレームワーク「Django」を利用したアプリで「Bootstrap」を利用してみた

Bootstrapは、WEBページでよく使われるフォーム、ボタン、メニューなどの部品がテンプレートとして用意されているフレームワークで、Bootstrapを利用すると、見栄えのいいWEBサイトを簡単に作成することができる。

今回は、作成済の「Django」を利用したアプリケーションを、「Bootstrap」でデザインしてみたので、そのサンプルプログラムを共有する。

なお、Bootstrapについては、以下のサイトを参照のこと。
https://www.sejuku.net/blog/7407

Bootstrap ダウンロード

Bootstrapは、WEBサイトから無料でダウンロードして利用することができる。その手順は、以下の通り。

1) 以下のサイトにアクセスし、「ダウンロード」ボタンを押下する。
https://getbootstrap.jp

2) 以下の画面に遷移するため、「コンパイルされたCSSとJS」にある「Download」ボタンを押下する。

3)「bootstrap-5.0.2-dist.zip」がダウンロードされるため、解凍する。

4) 今回のサンプルプログラムでは、Bootstrapを解凍したフォルダ内の、「bootstrap.min.css」「bootstrap.bundle.min.js」を利用する。

「MiniTool Partition Wizard」はパーティション分割・統合・バックアップ・チェックを直感的に行える便利ツールだったハードディスクの記憶領域を論理的に分割し、分割された個々の領域のことを、パーティションといいます。例えば、以下の図の場合、C/D...

サンプルプログラムの作成

作成したサンプルプログラムの構成は、以下の通り。

なお、上記の赤枠は、前提条件のプログラムから追加・変更したプログラムである。

「bootstrap.min.css」「bootstrap.bundle.min.js」は、ダウンロードしたBootstrapのCSSファイル／JSファイルとなる。

demoフォルダ下、templatesフォルダ下の各画面の内容は以下の通りで、Bootstrapを利用するようにしている。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>一覧画面</title>
    <!-- BootStrap CSS/JSファイルの読み込み -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'demo/css/bootstrap.min.css' %}">
    <script src="{% static 'demo/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
    <!-- 画面サイズを画面幅いっぱい(container-fluid)とし、marginを上下左右に設定 -->
    <div class="container-fluid m-4">
        <!-- タイトル行の文字サイズを設定 -->
        <p class="fs-4">ユーザーデータテーブル(user_data)の全データ</p>

        <!-- 表の幅を、画面横幅の11/12の長さに設定 -->
        <div class="col-11">
            <!-- テーブルの1行おきに背景色を設定 -->
            <table class="table table-striped">
                <!-- テーブルのタイトル行を水色に設定 -->
                <tr class="table-info">
                    <th>ID</th>
                    <th>名前</th>
                    <th>生年月日</th>
                    <th>性別</th>
                    <th></th>
                    <th></th>
                </tr>
                <!-- context_object_nameで指定した一覧取得結果を画面に表示 -->
                {% for user in user_list %}
                <tr>
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.birth_year }}年
                        {{ user.birth_month }}月
                        {{ user.birth_day }}日
                    </td>
                    <td>
                        {% if user.sex|stringformat:"s" == "1" %}
                        男
                        {% elif user.sex|stringformat:"s" == "2" %}
                        女
                        {% endif %}
                    </td>
                    <td>
                        <a href="{% url 'update' user.id %}">更新</a>
                    </td>
                    <td>
                        <a href="{% url 'delete' user.id %}">削除</a>
                    </td>
                </tr>
                {% endfor %}
            </table>
        </div>

        <!-- action属性のURLで、(demoフォルダ内)urls.pyの画面遷移先のname属性の値を指定している -->
        <form action="{% url 'input' %}" method="post">
            <!-- 下記csrf_tokenは、CSRF対策を行うことでform送信時エラーを防ぐために設定 -->
            {% csrf_token %}
            <!-- marginを上に設定 -->
            <div class="mt-5">
                <!-- ボタンの色を青色に設定 -->
                <input type="submit" name="next" value="データ追加" 
                    class="btn btn-primary"/>
            </div>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

{% load static %}

</head>

<body>

<p class="fs-4">ユーザーデータテーブル(user_data)の全データ</p>

</tr>

{% for user in user_list %}

<tr>

<td>{{ user.birth_year }}年

{{ user.birth_month }}月

{{ user.birth_day }}日

</td>

<td>

{% if user.sex|stringformat:"s" == "1" %}

男

{% elif user.sex|stringformat:"s" == "2" %}

女

{% endif %}

</td>

<td>

</td>

<td>

</td>

</tr>

{% endfor %}

</table>

</div>

{% csrf_token %}

<input type="submit" name="next" value="データ追加"

class="btn btn-primary"/>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>入力画面</title>
    <!-- BootStrap CSS/JSファイルの読み込み -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'demo/css/bootstrap.min.css' %}">
    <script src="{% static 'demo/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
    <!-- 画面サイズを画面幅いっぱい(container-fluid)とし、marginを上下左右に設定 -->
    <div class="container-fluid m-4">
        <!-- タイトル行の文字サイズを設定 -->
        <p class="fs-4">下記必要事項を記載の上、「確認」ボタンを押下してください。</p>

        <!-- action属性のURLで、(demoフォルダ内)urls.pyの画面遷移先のname属性の値を指定している -->
        <form action="{% url 'confirm' %}" method="post">
            <!-- 下記csrf_tokenは、CSRF対策を行うことでform送信時エラーを防ぐために設定 -->
            {% csrf_token %}

            <!-- 表の幅を、画面横幅の9/12の長さに設定 -->
            <div class="col-9">
                <!-- テーブルの枠線を非表示に設定 -->
                <table class="table table-borderless">
                    <!-- 名前 -->
                    <tr>
                        <!-- 画面幅が広くなるにつれてラベルのサイズを狭める設定 -->
                        <td class="col-md-4 col-lg-2">
                            <!-- フォームとラベルの関連付けを設定 -->
                            <label for="name" class="form-label">
                                {{ form.name.label_tag }}
                            </label>
                        </td>
                        <td>
                        <span id="name" class="form-label">
                            {{ form.name }}
                        </span>
                        </td>
                    </tr>
                    <!-- 生年月日 -->
                    <tr>
                        <td>{{ form.birth_day.label_tag }}</td>
                        <td>
                            {{ form.birth_year }}年
                            {{ form.birth_month }}月
                            {{ form.birth_day }}日
                            <!-- 生年月日の入力チェックエラーを表示 -->
                            <span class="text-danger">
                                {{ form.non_field_errors.0 }}
                            </span>
                        </td>
                    </tr>
                    <!-- 性別 -->
                    <tr>
                        <td>{{ form.sex.label_tag }}</td>
                        <td>
                            {% for sex_choice in form.sex %}
                            <span class="me-2">
                            {{ sex_choice.choice_label }}
                            {{ sex_choice.tag }}
                        </span>
                            {% endfor %}
                        </td>
                    </tr>
                    <!-- メモ -->
                    <tr>
                        <td>
                            <label for="memo" class="form-label">
                                {{ form.memo.label_tag }}
                            </label>
                        </td>
                        <td>
                        <span id="memo" class="form-label">
                            {{ form.memo }}
                        </span>
                        </td>
                    </tr>
                    <!-- 入力確認 -->
                    <tr>
                        <td>
                            <label for="check" class="form-label">
                                {{ form.check.label_tag }}
                            </label>
                        </td>
                        <td>
                        <span id="check" class="form-label">
                            {{ form.check }}
                        </span>
                        </td>
                    </tr>
                </table>
            </div>

            <!-- ユーザーID -->
            <!-- 一覧画面で更新リンクを押下したため、object.idが設定されている場合 -->
            {% if object.id %}
                <input type="hidden" name="user_id" value="{{ object.id }}"/>
            <!-- 入力画面で入力チェックエラーが発生したり、確認画面で戻るボタンを
                     押下したため、user_idが設定されている場合 -->
            {% elif user_id %}
                <input type="hidden" name="user_id" value="{{ user_id }}"/>
            <!-- 一覧画面でデータ追加ボタンを押下したため、object.idもuser_idも
                     設定されていない場合 -->
            {% else %}
                <input type="hidden" name="user_id" value=""/>
            {% endif %}

            <!-- marginを上に設定 -->
            <div class="mt-5">
                <!-- ボタンの色を青色に設定 -->
                <input type="submit" name="confirm" value="確認" 
                    class="btn btn-primary"/>
                <!-- marginを左に設定 -->
                <span class="ms-4">
                    <input type="button" name="back" value="戻る" 
                        class="btn btn-primary"
                        onclick="location.href={% url 'index' %}"/>
                </span>
            </div>
        </form>
    </div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<!DOCTYPE html>

<head>

{% load static %}

</head>

<body>

<p class="fs-4">下記必要事項を記載の上、「確認」ボタンを押下してください。</p>

{% csrf_token %}

<tr>

</label>

</td>

<td>

</span>

</td>

</tr>

<tr>

<td>{{ form.birth_day.label_tag }}</td>

<td>

{{ form.birth_year }}年

{{ form.birth_month }}月

{{ form.birth_day }}日

</span>

</td>

</tr>

<tr>

<td>{{ form.sex.label_tag }}</td>

<td>

{% for sex_choice in form.sex %}

</span>

{% endfor %}

</td>

</tr>

<tr>

<td>

</label>

</td>

<td>

</span>

</td>

</tr>

<tr>

<td>

</label>

</td>

<td>

</span>

</td>

</tr>

</table>

</div>

{% if object.id %}

<!-- 入力画面で入力チェックエラーが発生したり、確認画面で戻るボタンを

押下したため、user_idが設定されている場合 -->

{% elif user_id %}

<!-- 一覧画面でデータ追加ボタンを押下したため、object.idもuser_idも

設定されていない場合 -->

{% else %}

{% endif %}

<input type="submit" name="confirm" value="確認"

class="btn btn-primary"/>

<input type="button" name="back" value="戻る"

class="btn btn-primary"

onclick="location.href={% url 'index' %}"/>

</span>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>確認画面</title>
    <!-- BootStrap CSS/JSファイルの読み込み -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'demo/css/bootstrap.min.css' %}">
    <script src="{% static 'demo/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
    <!-- 画面サイズを画面幅いっぱい(container-fluid)とし、marginを上下左右に設定 -->
    <div class="container-fluid m-4">
        <!-- タイトル行の文字サイズを設定 -->
        <p class="fs-4">入力内容を確認し、問題なければ「送信」ボタンを押下してください。</p>

        <form action="{% url 'regist' %}" method="post">
            {% csrf_token %}

            <!-- 表の幅を、画面横幅の8/12の長さに設定 -->
            <div class="col-8">
                <!-- テーブルの枠線を非表示に設定 -->
                <table class="table table-borderless">
                    <!-- 名前 -->
                    <tr>
                        <!-- 画面幅が広い場合にラベルのサイズを狭める設定 -->
                        <td class="col-md-4 col-lg-2">
                            {{ input_form.name.label_tag }}
                        </td>
                        <td>{{ input_form.name.value }}</td>
                    </tr>
                    <!-- 生年月日 -->
                    <tr>
                        <td>{{ input_form.birth_day.label_tag }}</td>
                        <td>
                            {{ input_form.birth_year.value }}年
                            {{ input_form.birth_month.value }}月
                            {{ input_form.birth_day.value }}日
                        </td>
                    </tr>
                    <!-- 性別 -->
                    <tr>
                        <td>{{ input_form.sex.label_tag }}</td>
                        <td>{{ lbl_sex }}</td>
                    </tr>
                    <!-- メモ -->
                    <tr>
                        <td>{{ input_form.memo.label_tag }}</td>
                        <td>
                            <!-- テキストエリアの改行を有効にするため、「| linebreaksbr」を付与 -->
                            {{ input_form.memo.value | linebreaksbr }}
                        </td>
                    </tr>
                    <!-- 入力確認 -->
                    <tr>
                        <td>{{ input_form.check.label_tag }}</td>
                        <td>{{ lbl_checked }}</td>
                    </tr>
                </table>
            </div>

            <!-- ユーザーID -->
            <input type="hidden" name="user_id" value="{{ user_id }}"/>
            <!-- フォームの各値を次画面に渡すためhidden項目を設定 -->
            {% for field in input_form %}
                {{field.as_hidden}}
            {% endfor %}

            <!-- marginを上に設定 -->
            <div class="mt-5">
                <!-- ボタンの色を青色に設定 -->
                <input type="submit" name="send" 
                    class="btn btn-primary" value="送信"/>
                <!-- marginを左に設定 -->
                <span class="ms-4">
                    <input type="submit" name="back" 
                        class="btn btn-primary" value="戻る"/>
                </span>
            </div>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

{% load static %}

</head>

<body>

<p class="fs-4">入力内容を確認し、問題なければ「送信」ボタンを押下してください。</p>

{% csrf_token %}

<tr>

</td>

<td>{{ input_form.name.value }}</td>

</tr>

<tr>

<td>{{ input_form.birth_day.label_tag }}</td>

<td>

{{ input_form.birth_year.value }}年

{{ input_form.birth_month.value }}月

{{ input_form.birth_day.value }}日

</td>

</tr>

<tr>

<td>{{ input_form.sex.label_tag }}</td>

</tr>

<tr>

<td>{{ input_form.memo.label_tag }}</td>

<td>

</td>

</tr>

<tr>

<td>{{ input_form.check.label_tag }}</td>

<td>{{ lbl_checked }}</td>

</tr>

</table>

</div>

{% for field in input_form %}

{% endfor %}

<input type="submit" name="send"

class="btn btn-primary" value="送信"/>

<input type="submit" name="back"

class="btn btn-primary" value="戻る"/>

</span>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>完了画面</title>
    <!-- BootStrap CSS/JSファイルの読み込み -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'demo/css/bootstrap.min.css' %}">
    <script src="{% static 'demo/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
    <!-- 画面サイズを画面幅いっぱい(container-fluid)とし、marginを上下左右に設定 -->
    <div class="container-fluid m-4">
        <!-- タイトル行の文字サイズを設定 -->
        <p class="fs-4">お申し込みが完了しました。</p>

        <!-- marginを上に設定 -->
        <div class="mt-5">
            <!-- ボタンの色を青色に設定 -->
            <input type="button" name="back" value="一覧画面に戻る" 
                class="btn btn-primary"
                onclick="location.href={% url 'index' %}"/>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

{% load static %}

</head>

<body>

<p class="fs-4">お申し込みが完了しました。</p>

<input type="button" name="back" value="一覧画面に戻る"

class="btn btn-primary"

onclick="location.href={% url 'index' %}"/>

</div>

</body>

</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>削除確認画面</title>
    <!-- BootStrap CSS/JSファイルの読み込み -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'demo/css/bootstrap.min.css' %}">
    <script src="{% static 'demo/js/bootstrap.bundle.min.js' %}"></script>
</head>
<body>
    <!-- 画面サイズを画面幅いっぱい(container-fluid)とし、marginを上下左右に設定 -->
    <div class="container-fluid m-4">
        <!-- タイトル行の文字サイズを設定 -->
        <p class="fs-4">下記データを削除する場合は、「削除」ボタンを押下してください。</p>

        <form method="post">
            <!-- 下記csrf_tokenは、CSRF対策を行うことでform送信時エラーを防ぐために設定 -->
            {% csrf_token %}

            <!-- 表の幅を、画面横幅の8/12の長さに設定 -->
            <div class="col-8">
                <!-- テーブルの枠線を非表示に設定 -->
                <table class="table table-borderless">
                    <!-- 名前 -->
                    <tr>
                        <!-- 画面幅が広い場合にラベルのサイズを狭める設定 -->
                        <td class="col-md-4 col-lg-2">
                            名前:
                        </td>
                        <td>{{ object.name }}</td>
                    </tr>
                    <!-- 生年月日 -->
                    <tr>
                        <td>生年月日:</td>
                        <td>
                            {{ object.birth_year }}年
                            {{ object.birth_month }}月
                            {{ object.birth_day }}日
                        </td>
                    </tr>
                    <!-- 性別 -->
                    <tr>
                        <td>性別:</td>
                        <td>
                            {% if object.sex|stringformat:"s" == "1" %}
                                男
                            {% elif object.sex|stringformat:"s" == "2" %}
                                女
                            {% endif %}
                        </td>
                    </tr>
                    <!-- メモ -->
                    <tr>
                        <td>メモ:</td>
                        <td>
                            <!-- 「| default:""」で、Noneを空文字に置き換える -->
                            <!-- テキストエリアの改行を有効にするため、「| linebreaksbr」を付与 -->
                            {{ object.memo | default:"" | linebreaksbr }}
                        </td>
                    </tr>
                </table>
            </div>

            <!-- marginを上に設定 -->
            <div class="mt-5">
                <!-- 削除ボタンの色を赤色に設定 -->
                <input type="submit" value="削除" class="btn btn-danger"/>
                <!-- marginを左に設定 -->
                <span class="ms-4">
                    <!-- 戻るボタンの色を青色に設定 -->
                    <input type="button" name="back" value="戻る" 
                        class="btn btn-primary"
                        onclick="location.href={% url 'index' %}"/>
                </span>
            </div>
        </form>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>削除確認画面</title>

{% load static %}

</head>

<body>

<p class="fs-4">下記データを削除する場合は、「削除」ボタンを押下してください。</p>

{% csrf_token %}

<tr>

名前:

</td>

<td>{{ object.name }}</td>

</tr>

<tr>

<td>

{{ object.birth_year }}年

{{ object.birth_month }}月

{{ object.birth_day }}日

</td>

</tr>

<tr>

<td>

{% if object.sex|stringformat:"s" == "1" %}

男

{% elif object.sex|stringformat:"s" == "2" %}

女

{% endif %}

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</div>

<input type="button" name="back" value="戻る"

class="btn btn-primary"

onclick="location.href={% url 'index' %}"/>

</span>

</div>

</form>

</div>

</body>

</html>

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/python/tree/master/django-bootstrap/djangoApp

「CODE×CODE」は、需要の高い技術(AWS, Python等)を習得できるプログラミングスクールスクールだった近年、さまざまな会社でクラウド（特にIaaSやPaaSのパブリッククラウド）の需要が非常に高まっていて、クラウドサービスによるシステム開...

サンプルプログラムの実行

サンプルプログラムの実行結果は以下の通りで、各画面がBootstrapでデザインされていることが確認できる。

1) 実行前のuser_dataテーブルの中身は、以下の通り。

select * from user_data

1	select * from user_data

2) コマンドプロンプトでDjangoプロジェクト名のフォルダに移動し、コマンドプロンプトで「python manage.py runserver」コマンドを実行して、Webサーバーを起動する。

3) Webブラウザを起動し、「http://127.0.0.1:8000/demo/」にアクセスすると、以下のように、user_dataテーブルの中身が一覧画面(list.html)に表示されることが確認できる。

4) 上記画面で「データ追加」ボタンを押下すると、以下のように、入力画面(input.html)が表示されることが確認できる。

5) 入力画面(input.html)でエラーが発生した場合のレイアウトは、以下の通り。

6) 確認画面(confirm.html)のレイアウトは、以下の通り。

7) 完了画面(complete.html)のレイアウトは、以下の通り。

8) 一覧画面(list.html)で、ID=4の「更新」リンクを押下すると、以下のように、該当するデータが入力画面に表示されることが確認できる。

9) 一覧画面(list.html)で、ID=4の「削除」リンクを押下すると、以下のように、該当するデータが削除確認画面に表示されることが確認できる。

要点まとめ

Bootstrapは、WEBページでよく使われるフォーム、ボタン、メニューなどの部品がテンプレートとして用意されているフレームワークで、Bootstrapを利用すると、見栄えのいいWEBサイトを簡単に作成することができる。
Pythonフレームワーク「Django」を利用したアプリケーションでも、「Bootstrap」を利用できる。