【Flask】Jinja2のテンプレート継承でHTMLファイルを役割ごとに分割する

11分

SHARE

この記事では、Flaskを使ったWebアプリケーション開発において、ヘッダー、フッターなど、複数のページで共通の部品を表示するときに効率よく開発する方法を紹介しています。

記事を理解するための準備

CHECK.1
ディレクトリ

Flaskの作業用フォルダ名はflaskで、venvでPython3の仮想環境を作成し、Flaskをインストールしています。

また、 ターミナル(コマンドプロンプト)のカレントディレクトリは、 flaskフォルダに存在します。

ディレクトリ
flask/
┣ app.py
︙
┗ templates/
┗ index.html
CHECK.2
app.py

Webアプリケーションの核であるapp.pyは、flask.render_templateメソッドでindex.htmlを読み込むシンプルなプログラムになっています。

app.py
# -*- coding: utf-8 -*-
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
	return render_template('index.html', \
		title = 'index.html')

if __name__ == '__main__':
	app.run()
CHECK.3
index.html

クライアントサイドに表示されるindex.htmlは、わかりやすさを考慮してBootstrapでデザインしているページになっています。

index.html
<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>{{ title }}</title>
		
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	</head>
	<body>
		<div class="container">
			<h1 class="mt-4">テンプレート継承({{ title }})</h1>
			
			<!-- ヘッダー -->
			<header class="my-3">
				<ul class="nav nav-pills">
					<li class="nav-item"><a class="nav-link" href="/prev/">prev.html</a></li>
					<li class="nav-item"><a class="nav-link active" href="/">index.html</a></li>
					<li class="nav-item"><a class="nav-link" href="/next/">next.html</a></li>
				</ul>
			</header>
		  
			<!-- メインコンテンツ -->
			<div class="pt-3 pb-4">
				<p>{{ title }}が読み込まれています。</p>				
				<div class="alert alert-warning" role="alert">
					今日の天気は晴れです。ポカポカ陽気で気持ちいいですね。
				</div>
			</div>
		  
			<!-- フッター -->
			<footer class="bg-dark text-light">
				<p class="text-center">Copyright 2020 tanu.</p>
			</footer>
			
		</div>
		
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	</body>
</html>
CHECK.4
動作確認
ターミナル
$ python app.py

http://127.0.0.1:5000/

END

index.htmlを分割する｜extends, block

Flaskで使っているJinja2テンプレートエンジンには、『テンプレートの継承』という機能が存在します。

テンプレートの継承は、Jinja2のextendsブロックを使用します。

継承の指定
{% extends "ファイルのパス" %}

そして、継承したテンプレートには継承元にあるブロックに、はめ込むコンテンツを記述します。

ブロックを呼び出すためには、Jinja2のblockブロックを使用します。

ブロックの記述
{% block 任意のブロック名 %}
<!-- コンテンツ -->
{% endblock %}

それでは、extendsブロックとblockブロックを使用して、

  • ページ全体のレイアウトを司るHTMLファイルをlayout.html
  • ルートで表示されるメインコンテンツ部分のHTMLファイルをindex.html

と設定し、もともと１つだったindex.htmlを2つのHTMLファイルにそれぞれ分割してみましょう。

レイアウトとコンテンツ部分に分割する

STEP.1
layout.html
ディレクトリ
flask/
┣ app.py
︙
┗ templates/
┣ index.html
┗ layout.html NEW

layout.htmlは、ページ全体のレイアウトを司るHTMLファイルです。

もともとのindex.htmlからメインコンテンツだけを取り除いた部分で構成されています。

取り除いたメインコンテンツ部分には、{% block content %}{% endblock %}と記述し、メインコンテンツ部分のindex.htmlを読み込ませるように設定します。

layout.html
<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>{{ title }}</title>
		
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	</head>
	<body>
		<div class="container">
			<h1 class="mt-4">テンプレート継承({{ title }})</h1>
			
			<!-- ヘッダー -->
			<header class="my-3">
				<ul class="nav nav-pills">
					<li class="nav-item"><a class="nav-link" href="/prev/">prev.html</a></li>
					<li class="nav-item"><a class="nav-link active" href="/">index.html</a></li>
					<li class="nav-item"><a class="nav-link" href="/next/">next.html</a></li>
				</ul>
			</header>

			<!-- メインコンテンツ -->
			{%- block content %}{% endblock %}
		  
			<!-- フッター -->
			<footer class="bg-dark text-light">
				<p class="text-center">Copyright 2020 tanu.</p>
			</footer>
			
		</div>
		
		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
	</body>
</html>
STEP.2
index.html

index.htmlには、STEP.1で取り除かれたメインコンテンツ部分をそのまま記述します。

index.html
{%- extends "layout.html" %}
{%- block content %}
			<div class="pt-3 pb-4">
				<p>{{ title }}が読み込まれています。</p>				
				<div class="alert alert-warning" role="alert">
					今日の天気は晴れです。ポカポカ陽気で気持ちいいですね。
				</div>
			</div>
{%- endblock %}
CHECK.3
動作確認

無事に2つのHTMLファイルに分割することに成功しました。

END

新しいページを作成する

メインコンテンツの中身が違う2つのHTMLファイル(prev.htmlとnext.html)を作成してみましょう。

ディレクトリ
flask/
┣ app.py
︙
┗ templates/
┣ index.html
┣ layout.html
┣ next.html NEW
┗ prev.html NEW
STEP.1
prev.html
prev.html
{%- extends "layout.html" %}
{%- block content %}
			<div class="pt-3 pb-4">
				<p>{{ title }}が読み込まれています。</p>				
				<div class="alert alert-secondary" role="alert">
					今日の天気は曇りです。光のコントラストが少なくポートレート撮影にはもってこいですね。
				</div>
			</div>
{%- endblock %}
STEP.2
next.html
next.html
{%- extends "layout.html" %}
{%- block content %}
			<div class="pt-3 pb-4">
				<p>{{ title }}が読み込まれています。</p>				
				<div class="alert alert-primary" role="alert">
					今日の天気は雨です。雨音ってなんだか落ち着きますね。
				</div>
			</div>
{%- endblock %}
STEP.3
app.py
app.py
# 中略
@app.route('/')
def index():
	return render_template('index.html', \
		title = 'index.html')

@app.route('/prev/')
def prev():
	return render_template('prev.html', \
		title = 'prev.html')

@app.route('/next/')
def next():
	return render_template('next.html', \
		title = 'next.html')
STEP.4
動作確認

http://127.0.0.1:5000/

http://127.0.0.1:5000/prev/

http://127.0.0.1:5000/next/

ヘッダーのナビゲーションがindex.htmlで固定されていますが、後述する方法で対応しています。

END

layout.htmlを役割ごとに分割する｜include

layout.htmlを見直してみましょう。

layout.html
<!-- 中略 -->
<div class="container">
	<h1 class="mt-4">テンプレート継承({{ title }})</h1>
			
	<!-- ヘッダー -->
	<header class="my-3">
		<ul class="nav nav-pills">
			<li class="nav-item"><a class="nav-link" href="/prev/">prev.html</a></li>
			<li class="nav-item"><a class="nav-link active" href="/">index.html</a></li>
			<li class="nav-item"><a class="nav-link" href="/next/">next.html</a></li>
		</ul>
	</header>

	<!-- メインコンテンツ -->
	{%- block content %}{% endblock %}
		  
	<!-- フッター -->
	<footer class="bg-dark text-light">
		<p class="text-center">Copyright 2020 tanu.</p>
	</footer>
			
</div>

この中には、ヘッダーやフッターなどが混在しています。

これらを管理しやすくするため、それぞれheader.html、footer.htmlとして細分割してみましょう。

今回は、ヘッダーやフッターをindex.htmlやprev.htmlのように新しいページ単位ではなく、あくまで１つの部品として保管させたいです。

そんなときは blockブロックではなく、includeブロックを使用します。

includeの記述
{% include "ファイルのパス" %}
ディレクトリ
flask/
┣ app.py
︙
┗ templates/
┣ footer.html NEW
┣ header.html NEW
┣ index.html
┣ layout.html
┣ next.html
┗ prev.html

layout.html

layout.html
<!-- 中略 -->
<div class="container">
	<h1 class="mt-4">テンプレート継承({{ title }})</h1>
			
	<!-- ヘッダー -->
	{% include "header.html" %}

	<!-- メインコンテンツ -->
	{%- block content %}{% endblock %}
		  
	<!-- フッター -->
	{% include "footer.html" %}
			
</div>

header.html

header.html
<header class="my-3">
				<ul class="nav nav-pills">
					<li class="nav-item"><a class="nav-link" href="/prev/">prev.html</a></li>
					<li class="nav-item"><a class="nav-link active" href="/">index.html</a></li>
					<li class="nav-item"><a class="nav-link" href="/next/">next.html</a></li>
				</ul>
			</header>
MEMO
※インデントがずれているのは、ソースをきれいに整えるためです。

また、リストの部分でactiveなクラスを動的に対応させるために、header.htmlを以下のように修正します。

header.html
<header class="my-3">
				<ul class="nav nav-pills">
					<li class="nav-item"><a class="nav-link{% if prev %} active{% endif %}" href="/prev/">prev.html</a></li>
					<li class="nav-item"><a class="nav-link{% if index %} active{% endif %}" href="/">index.html</a></li>
					<li class="nav-item"><a class="nav-link{% if nextt %} active{% endif %}" href="/next/">next.html</a></li>
				</ul>
			</header>

footer.html

footer.html
<footer class="bg-dark text-light">
				<p class="text-center">Copyright 2020 tanu.</p>
			</footer>
MEMO
※インデントがずれているのは、header.htmlと同様に、ソースをきれいに整えるためです。

app.py

app.py
# 中略
@app.route('/')
def index():
	return render_template('index.html', \
		index = True, \
		title = 'index.html')

@app.route('/prev/')
def prev():
	return render_template('prev.html', \
		prev = True, \
		title = 'prev.html')

@app.route('/next/')
def next():
	return render_template('next.html', \
		nextt = True, \
		title = 'next.html')

動作確認

http://127.0.0.1:5000/

http://127.0.0.1:5000/prev/

http://127.0.0.1:5000/next/

ちゃんと、ヘッダーのナビゲーションも動作してることが確認できますね(^o^)

まとめ

  • extends+blockで、アプリケーションの枠組みを継承
    • 継承の指定
    {% extends "ファイルのパス" %}
    ブロックの記述
    {% block 任意のブロック名 %}
<!-- コンテンツ -->
{% endblock %}
  • includeで、役割ごと(headerやfooterなど)に分割されたHTMLファイルを差し込む
    • includeの記述
    {% include "ファイルのパス" %}

    連載目次：FlaskでWebアプリケーションを開発するためのロードマップ

    入門編：10記事

    入門編の10記事を順に読んでいけば、FlaskでWebアプリケーションを開発する必要最小限のことが学べます。

    簡単なアプリケーションであれば、セキュリティ上の観点を考慮しなかった場合公開できるでしょう。

    1. Flaskを『ローカルで開発する環境構築』から『プログラムの実行まで』を一通り
    2. FlaskでWebアプリケーションを作る『全体の流れ』を大まかに理解する
    3. Flaskのrender_templateでHTML・CSS・JavaScriptファイルを読み込む
    4. サーバーサイドからクライアントサイドに変数(値・リスト・辞書型配列)を渡す
    5. クライアントサイドで変数を処理(アサイン、フィルター、エスケープ)する
    6. クライアントサイドで条件分岐(if)とループ(for in)を使って、コードを簡素化する
    7. クライアントサイド(form)からサーバーサイドにテキストや各種コントロール、ファイルを渡す
    8. テンプレート継承でHTMLファイルを役割ごとに分割する
    9. データベースに接続する
    10. デプロイする

    実践編

    実践編の記事では、FlaskでWebアプリケーションを公開するために欠かせないセキュリティのことや実践的なテクニックを紹介しています。

    ここまで読み込めば、あとはアイディア次第でいろんなWebアプリケーションを公開できるでしょう！

    1. セッション
    2. Cookie
    3. メソッドベース・ディスパッチ
    4. ベーシック認証・Digest認証
    5. ログイン機能
    6. サーバーサイドからクライアントサイドにpandas.Series、pandas.DataFrameを渡す
    7. クライアントサイド(form)からPOSTされた1、2次元配列を受け取る
    8. matplotlibを使う
    9. Bootstrap4を使う
    10. フォームの非同期通信(Ajax, jQuery)

    前の記事

    【Flask】クライアントサイド(form)からPOSTされた…

    次の記事

    【Python】静的なWebページを『Beautiful So…