はじめに#
「OKAZAKI Shogo のひとりアドベントカレンダー2024」の3日目です。 今回は Flask の基本的な使い方として、 HTML テンプレートを用いてページを表示します。
HTML を表示する#
Flask では Jinja というテンプレートエンジンを用いている。
templates という名前をつけたフォルダの下を参照するようになっている。
まずは以下の場所に index.html を作成する。
1.
2|-- Makefile
3|-- poetry.lock
4|-- pyproject.toml
5`-- src
6 |-- __init__.py
7 |-- app.py
8 `-- templates
9 `-- index.html <-- 新規作成
index.html の中身はなんでも良いので、適当に以下のようにする。
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <title>ボーイスカウト阪神さくら地区 加盟員向けページ</title>
6 </head>
7
8 <body>
9 <!----- ヘッダー ----->
10 <header>ヘッダー</header>
11 <nav>ナビ</nav>
12 <!----- ヘッダー END ----->
13
14 <!----- メインコンテンツ ----->
15 <article>
16 <h1>タイトル</h1>
17 <section>
18 <h2>タイトル</h2>
19 <p>コンテンツの内容</p>
20 </section>
21 </article>
22 <!----- メインコンテンツ END ----->
23
24 <!----- フッター ----->
25 <footer>フッター</footer>
26 <!----- フッター END ----->
27 </body>
28</html>
app.py を以下のように変更する。
1from flask import Flask, render_template
2
3app = Flask(__name__)
4
5
6@app.route('/')
7def index():
8 return render_template('index.html')
9
10
11if __name__ == "__main__":
12 app.run(debug=True)
関数 render_template を import し、表示したい HTML ファイえうを引数に指定して呼び出す。これで、 Flask を起動し、アクセスすると HTML に書いた内容が表示される。
CSS を入れて適用する#
static フォルダを作成し、 CSS ファイルを入れる。 CSS ファイル（default.css）の中身は コピペで使える見出しタイトルのCSSデザイン＆サンプルコード35選 から拝借して作成。
1.
2|-- Makefile
3|-- poetry.lock
4|-- pyproject.toml
5`-- src
6 |-- __init__.py
7 |-- __pycache__
8 | |-- __init__.cpython-38.pyc
9 | `-- app.cpython-38.pyc
10 |-- app.py
11 |-- static
12 | `-- css
13 | `-- default.css <-- 新規作成
14 `-- templates
15 `-- index.html
1h1 {
2 position: relative;
3 padding: 1em;
4 color: #ffffff;
5 background-color: #009250;
6}
7h1::before {
8 position: absolute;
9 content: '';
10 top: 0;
11 left: 0;
12 width: 0;
13 height: 0;
14 border-top: 0px solid transparent;
15 border-right: 20px solid transparent;
16 border-left: 20px solid #ffffff;
17 border-bottom: 20px solid transparent;
18}
19h1::after {
20 position: absolute;
21 content: '';
22 right: 0;
23 bottom: 0;
24 width: 0;
25 height: 0;
26 border-top: 20px solid transparent;
27 border-right: 20px solid #ffffff;
28 border-left: 20px solid transparent;
29 border-bottom: 0px solid transparent;
30}
index.html を以下のように変更する。スタイルシートの場所の指定は {{ }} で指定する。{{ }} の中が Jinja のテンプレートエンジンを用いて処理された結果が表示される。
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <title>ボーイスカウト阪神さくら地区 加盟員向けページ</title>
6 <link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}"/>
7 </head>
8
9 <body>
10 <!----- ヘッダー ----->
11 <header>ヘッダー</header>
12 <nav>ナビ</nav>
13 <!----- ヘッダー END ----->
14
15 <!----- メインコンテンツ ----->
16 <article>
17 <h1>タイトル1</h1>
18 <section>
19 <h2>タイトル2</h2>
20 <p>コンテンツの内容</p>
21 </section>
22 </article>
23 <!----- メインコンテンツ END ----->
24
25 <!----- フッター ----->
26 <footer>フッター</footer>
27 <!----- フッター END ----->
28 </body>
29</html>
これを適用すると以下のような表示となる。
共通部分を括り出す#
ヘッダーやフッターなど、各ページに共通の箇所を括り出しておくことも可能。
以下の場所に layout.html を作成する。
1.
2|-- Makefile
3|-- poetry.lock
4|-- pyproject.toml
5`-- src
6 |-- __init__.py
7 |-- app.py
8 |-- static
9 | `-- css
10 | `-- default.css
11 `-- templates
12 |-- index.html
13 `-- layout.html
layout.html の中身は以下の通り。
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4 <meta charset="utf-8">
5 <title>ボーイスカウト阪神さくら地区 加盟員向けページ</title>
6 <link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}"/>
7 </head>
8
9 <body>
10 <!----- ヘッダー ----->
11 <header>ヘッダー</header>
12 <nav>ナビ</nav>
13 <!----- ヘッダー END ----->
14
15 {% block content %}{% endblock %}
16
17 <!----- フッター ----->
18 <footer>フッター</footer>
19 <!----- フッター END ----->
20 </body>
21</html>
{% block content %}{% endblock %} と書いた箇所が、それぞれのテンプレートで違う部分が入る。。これを使うために、 index.html も変更する。
1{% extends "layout.html" %}
2
3{% block content %}
4
5<!----- メインコンテンツ ----->
6<article>
7 <h1>タイトル1</h1>
8 <section>
9 <h2>タイトル2</h2>
10 <p>コンテンツの内容</p>
11 </section>
12</article>
13<!----- メインコンテンツ END ----->
14
15{% endblock %}
{% extends "layout.html" %} で共通のレイアウトを使うことを宣言し、{% block content %} と {% endblock %} で囲った部分が、レイアウトに埋め込まれる部分となる。
これを適用しても先ほどと同じ表示になっていれば OK。