[WEB開発] flaskでWEBサイト作成の基本

前回の記事（下のリンク）で、PythonとFlasakによる簡単な使用の仕方を紹介しましたが、数回に分けて小規模開発に向いている軽量フレームワークflaskを使ってのWEB開発を紹介したいと思っています

前回は、とりあえず動かして見ることを重点に紹介しましたが、今回はどのような仕組みで動作しているのかを説明しながら簡単なWEＢサイトを作成したいと思います

https://touch-kun.net/2021/07/02/post-232/

Flaskの基本構成

Flaskフレームワークは、MVCモデルと同じ考えで構成されています

MVCモデル

●Ｍ（モデル）：クラス定義やデータベース処理など
●Ｃ（コントロール）：URLリクエストの処理など主処理を担当
●Ｖ（ビュー）：画面表示（HTML画面を生成）

前回の紹介記事では、Ｃが[app.py]、Ｖが[index.html]となり、Ｍは使っていません

Flaskの動き

前回の記事のソースを使ってFlaskの動きについて簡単に説明します

[app.py]

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/') def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(port=8000, debug=True)

[templates/index.html]

<!DOCTYPE html>
<html>
<head>
<title>Python+Flask Web Application</title>
</head>
<body>
  <div>
    <p>Welcome!!</p>
  </div>
</body>
</html>

ユーザトップページにアクセス
app.pyの、@app.route(‘/’)がリクエストを拾う
app.pyの、render_templateでindex.htmlを表示するように指示
index.htmlを読み込みテンプレート処理を行いHTMLを生成
生成したHTMLをユーザに返す

前回は、④のテンプレート処理が全くなくindex.htmlをそのまま返していきましたが
本来であれば、コントロールで処理したデータを元に可変的なHTMLを作成することができます

テンプレート処理

それでは今回は、ユーザの見た目に変化に関連するテンプレート処理（HTML生成）について説明します。
Flaskで利用するテンプレートエンジンは、jinja2をいうものでflaskをインストールすると一緒にインストールされます
jinja2テンプレートエンジンを利用することで、HTML内で変数を参照したり制御構文により表示を切り替えたり動的にHTMLを生成することができます

それでは、主な変数処理や制御構文を紹介します

変数処理

Python（コントロール）から送られて来た変数を、Templateで利用する場合、「中カッコ」２個で囲む必要がある。

{{ data }}

制御構文

Template内でPythonの構文を利用したい場合は、「中カッコ」と「パーセント」で囲む必要がある。その時に変数を利用する場合は、上記で説明した「中カッコ」での囲みは必要ありません。

if文

{% if x > 0 %}
    xは0以上です
{% elif x == 0 %}
    xは0です
{% else %}
    xは0未満です
{% endif %}

for文

{% for book in books %}
   <tr>
   <td>{{book.title}}</td>
   <td>{{book.buy}}</td>
   </tr>
{% endfor %}

サンプル

上記、テンプレート処理を利用したサンプルを以下に紹介しますので、動作をイメージしてください
前回と変更になったのは、コントロールからデータを渡し、テンプレートで動的処理を行っているところです

[app.py]

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    username = "Taro"
    birth_day = {"year": 2010, "month": 12, "day": 25}
    age = 20
    favorite_foods = ["寿司", "焼き肉", "ラーメン"]

    return render_template("index.html",
        username=username, birth_day=birth_day,
        age=age, favorite_foods=favorite_foods)

if __name__ == '__main__':
    app.run(port=8000, debug=True)

[templates/index.html]

<!DOCTYPE html>
<html>
<head>
<title>Python+Flask Web Application</title>
</head>
<body>
<div>
  <h2>自己紹介</h2>
  <h3>{{ username }}</h3>
  <h4>誕生日: {{ birth_day.year }}年{{ birth_day.month }}月{{ birth_day.day }}</h4>
  {% if age < 20 %}
  <p>まだ、未成年です！</p>
  {% elif age == 20 %}
  <p>今年、成人になりました。</p>
  {% else %}
  <p>成人です！</p>
  {% endif %}

  <h3>好きな食べ物</h3>
  <ul>
  {% for food in favorite_foods %}
    <li>{{ food }}</li>
  {% endfor %}
  </ul>
</div>
</body>
</html>

https://touch-kun.net/2022/07/12/post-390/