Python(Flask)でアプリケーションを作る [ テンプレート編 ]
2020-07-04
前回の記事で、ブラウザ上に文字列の出力ができるようになりました。
今回は、PythonのFlaskに付属のテンプレート機能を使用して、より発展的な画面の出力に挑戦してみようと思います。
前提
- Python: 3.5.6
- pip: 20.1.1
- Flask: 1.1.1
- Jinja2: 2.10.1(Flaskインストールでついてくる)
テンプレートを作成
Flaskに付属のrender_templateは、
Flaskメインコードと同じディレクトリにある
templatesディレクトリからテンプレートを探して出力に使うようになっています。
templatesディレクトリを掘って、
その中に以下の
- base.html(外枠)
- index.html(部品)
を作成していきます。
- base.html (全ページ共通のテンプレート。アクセス方法で異なる部品が入った状態で出力される)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
<!--ここに部品としてのHTMLを入れることになります-->
{% endblock %}
</body>
</html>
- index.html (個別ページ用の部品HTML)
<!--ベースのHTML(base.html)の
block content宣言した部分に
このHTMLがはめ込まれて出力される-->
{% extends "base.html" %}
{% block content %}
<h1>HOME</h1>
ようこそ、{{ name }}さん。
今日の予定は{{ task }}です！
{% endblock %}
画面出力のロジックを作成
上記のテンプレートを利用して、Flaskサーバから値を送って出力するコードを書きます。
from flask import Flask, render_tempalte
app = Flask(__name__)
@app.route("/")
def index():
name = "Tom"
task = "Shopping"
template = "index.html"
return render_tempalte(template, title = "my task", name = name, task = task)
if __name__=="__main__":
app.run(debug=True, threaded=True, host="0.0.0.0", port=3000)
上記のrender_template()に引数で値を個別に渡していますが、テンプレートの指定を直接引数に渡したり、
テンプレートで使う変数をリストや辞書型にして渡すこともできます。
引数をリスト型で渡した例
- index.py(抜粋)
list1 = ["Tom", "Shopping"]
list2 = ["my task"]
list1 = list1 + list2
return render_template("index.html", list1)
- index.htmlでの呼び出しかたを修正
(リストのほしい値があるインデックスを指定する。
名前ならリストの先頭に入れたので0を指定する。
このケースだと使いにくいかも。)
例: {{ name }} => {{ list1[0] }}
引数を辞書型で渡した例
- index.py(抜粋)
dict1 = {"name": "Tom"}
dict1["task"] = "Shopping"
dict1["title"] = "my task"
return render_template("index.html", dict1)
- index.htmlでの呼び出しかたを修正 (「辞書型の変数名.キー名」のように呼び出す。)
例: {{ name }} => {{ dict1.name }}
Flask起動
上記のコードを作成したら、
$ python index.py
でFlaskアプリを起動します。
お使いのブラウザで以下のように見えると成功です！
以上です。
では、またお会いしましょう！