はじめに
Djangoを使って将棋の棋譜管理アプリを作っていくなかでの備忘録、第6回です。
作業環境
今回の作業環境は以下の通りです
- Windows 10 Pro
- Anaconda
- version1.7.2
- python 3.7
- django 2.2.5
- git
- version 2.25.0.windows.1
- mysql
- ver 8.0.15 for Win64 on x86_64
また、Djangoのディレクトリ構造は次のようになります。
- kifu_app_project/
- kifu_app_project/
- __init__.py
- setting.py
- urls.py
- wsgi.py
- kifu_app/
- migrations/
- templates/
- index.html
- informationList.html
- informationDetail.html
- __init__.py
- admin.py
- apps.py
- models.py
- tests.py
- urls.py
- views.py
- manage.py
- .gitignore
本稿の内容
- Templateを継承する
- Templateをincludeする
Templateを継承する
前回まででTemplateを作成してきましたが、これからいくつものTemplateを作っていくことを考えると、できるだけ楽をしたいものです...
例えば<head>タグ内などは、どのテンプレートでも同じになるでしょう。
また、同じ部分はまとまっていた方が保守性も上がると思います。
Templateの継承とは、あるTemplateに他のTemplateをはめ込むようなものです。
元となるTemplateを作る
まずは元となるTemplateを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
{% block body_content %}
{% endblock %}
</body>
</html>
後からはめ込みたい部分を{% block <ブロック名> %}``{% endblock %}で囲みます。
これだけだとあまりメリットを感じないですが...
ただ、この先Bootstrapといったものを読み込むのにも、このTemplateだけ変えればいいのは楽ですね
個々のTemplateを作る
次にはめ込む方のTemplateを作ります。
例としてinformationList.htmlを変更します。
{% extends "base.html" %}
{% block title %}
Kifu APP
{% endblock %}
{% block body_content %}
{% for each_data in object_list %}
<h3>{{ each_data }}</h3>
<table border="1">
<tr>
<td><a href="{% url 'kifu_app:informationDetail' each_data.id %}">{{ each_data.date }}</a></td>
<td>{{ each_data.sente }}</td>
<td>{{ each_data.gote }}</td>
<td>{{ each_data.small_class }}</td>
</tr>
</table>
{% endfor %}
{% endblock %}
まずははめ込む先のTemplateを、{% extends "Template名" %}で読み込みます。
あとは先程のbaseの方で、はめこみたい場所に当たるblockで内容を囲います。
Templateをincludeする
例えば棋譜の詳細画面には「将棋盤があった方が使いやすいなぁ」と思ったりします。
しかし、そういう将棋盤は詳細画面以外でも使う可能性があるかもしれないです。
ならば、その"将棋盤"を部品として管理し、必要な所でその部品を読み込むというのがincludeという考え方です。
これもメンテナンスがしやすくなりますね
"部品"を読み込む
まずは"部品"として以下のHTMLファイルを作ります
<h3>ここに"部品"が来ます</h3>
このような"部品"を読み込むには、読み込みたいTemplateで次のようにします。
{% extends "base.html" %}
{% block title %}
Kifu APP
{% endblock %}
{% block body_content %}
<h3>{{ object }}</h3>
<table border="1">
<tr>
<td>{{ object.id }}</td>
<td>{{ object.date }}</td>
<td>{{ object.sente }}</td>
<td>{{ object.gote }}</td>
<td>{{ object.result }}</td>
<td>{{ object.my_result }}</td>
<td>{{ object.small_class }}</td>
<td>{{ object.created_at }}</td>
<td>{{ object.updated_at }}</td>
</tr>
</table>
{% include 'part.html' %} <!-- ここで読み込んでいる -->
{% endblock %}
たったこれだけで、part.htmlという部品を読み込んで表示することができます！
次回予告
.envの作成