FlaskによるWebアプリ開発②~テンプレートエンジン(Jinja2)による動的Webページの生成

Contents

前回までのあらすじ
テンプレートエンジン(Jinja2)の使い方
if文を使った変数の値による条件分岐
for文を使ってリストや辞書の中身を出力する
まとめ

前回までのあらすじ

(前回の内容)

FlaskによるWebアプリ開発①~簡単なWebページを表示させてみる

今回も引き続きpythonの軽量WEBフレームワーク「Flask」で使って簡易的なwebアプリケーションを作っていきます。

前回はURLルーティングで動きのないペラページ(静的ページ)をでしたが、今回はアクセスするごとにHTMLの表示内容が変わるような動的なwebページを作っていきたいと思います。

基本的にWebアプリケーションで動的なページを作る場合にはテンプレートエンジンというものを使用します。PythonとFlaskの場合は「JINJA2」というテンプレートエンジンが用意されているので、それを使います。

テンプレートエンジン(Jinja2)の使い方

Flaskでは、Jinja2テンプレートエンジンを標準で使用できます。ここでは「Jinja2」の全機能は紹介しませんが、簡単な動的なWebアプリケーションを作成する上で、必要最低限の機能を紹介します。より詳しい部分は公式ドキュメントを参照してください

まずテンプレートエンジンとは、HTMLファイルなどの通常静的なファイルを動的にするものです。簡単なサンプルを用いてイメージを掴んでいきましょう。という訳で前回作った app.pyに、以下のように編集します。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/') 
def test_jinja(): 
   return render_template('test_jinja2.html', name="taro") 

#テスト環境起動
app.run(debug=True)

そして、app.pyと同じフォルダに「templates」というフォルダを作成し、というtest2.htmlファイルを作成してください。ファイル名は絶対に「templates」にしてください。そうでないとローカルでアプリを起動しても404 Not Foundのエラーが起こります

ちなみにhtmlファイルの作り方は色々ありますが、新規テキストファイルを作って末尾の.txtを.htmlに変えるだけで作ることができます。作業環境はAnacondaに付属している「Visual Studio Code」というツールで作業するのがオススメです。

次に test_jinja2.html を作成し、以下のように記述します。

<test_jinja2.html>

<!doctype html>
<title>Flask_test</title>
<h1>Hello {{ name }}!!</h1>
<p>
    <a href='test_ifa'>if文処理(TRUE)</a>
    <p>
        <a href='test_ifb'>if文処理(FALSE)</a>
        <p>
            <a href='test_for'>for文処理</a>
</html>

そして$python app.pyでアプリケーションを起動し「http://127.0.0.1:5000/」にアクセスしてみてください。Hello taro!と表示されているはずです。

処理の中身を開設すると、まずdef:test2():の最後のrender_template関数の部分で、引数に name="taro" というパラメータを設定することで、html側に「name=”taro”」というパラメーター渡しています。

そしてhtml側ではパラメータ名と同じ名前で{{パラメータ名}}のように、波括弧を二重にして囲むことで、テンプレートの中に.py側から渡した値を書き出すことができます。

今回の場合、flask側からtest.htmlに「name=”taro”」というパラメータを与えているので、テンプレート側の{{name}}の部分には「taro」が代入されて、ページにはhello taro！と表示される・・・という流れになっています。

if文を使った変数の値による条件分岐

他にもJinja2では、テンプレート側(html)に渡した変数の値によって、それをテンプレート側で何を表示するか、という条件分岐も行うことができます。

render_template関数では、通常の関数と同様に変数も引数に指定することができるので、app.pyを以下のように書き換える(追記する)ことで、URLの値を利用して、表示する画面を変更することもできます。またtest22.htmlも新規作成して「templates」に配置してください。

<app.pyに追加した処理>

@app.route('/test_ifa')
def if_testa(name=None):
    name = 'jiro'
    return render_template('test_if.html', name=name)

@app.route('/test_ifb')
def if_testb(name=None):
    name = 'sumijiro'
    return render_template('test_if.html', name=name)

<test_if.html>

<!doctype html>
<title>Flask_training</title>
{% if name=='jiro' %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>あなたは{{ name }}で次郎くんではありません</h1>
{% endif %}
</html>

Pythonではif文やfor文を定義するときに終わる際は改行するだけで定義することができますが、テンプレート側ではちゃんと{% %}でブロックの終了を定義しなければいけません。

{% endif %}や{% endfor %}を忘れないように注意してください。まあPythonが少し特殊なだけで他の言語ならif・forはちゃんと括るのが一般的ですね。

Jinjaのif文が、条件文に記載された変数が、定義されてて、空やFalseであれば、真となる条件分岐です。演算子は「＝＝」「<」「>」あたりはPythonと同じ書き方で大丈夫です。

処理の簡単な解説をすると

def if_test(name=None):
    name='jiro'
    ～

の部分でnameという変数に’jiro’という文字型のデータが格納されます。そして、return render_template(‘test22.html’, name=name)のname=nameの部分でテンプレート側に’jiro’というデータが入ったnameという変数を渡しています。

そして、template側で書いているJinja2のifには、{% if name=’jiro’ %}　という条件分岐を設定しており、今回は条件を満たしている、つまり True なので、その後の、<h1>Hello {{ name }}!</h1>の部分が表示されます。

ちなみに、test_ifbでapp.pyの部分のname=の部分をjiro以外に変えると、{% if name=’jiro’ %}は正しくない、つまり「False(偽)」なので、else以下の「<h1>あなたは{{ name }}で次郎くんではありません</h1>」が表示されます。今回変数nameは‘taro’としているので、taroが表示されています。

for文を使ってリストや辞書の中身を出力する

Jinja2のfor文はpythonのfor文と同様に、listや辞書型の要素をひとつずつ出すことができます。templatesに「test_for.html」を新規作成して、以下のコードをapp.pyとtest_for.htmlにそれぞれ追記して確認してみましょう。

<app.py>

# for文処理
@app.route('/test_for')
def test_for():
    brothers = ["太郎", "次郎", "三郎"]
    return render_template('test_for.html', users=brothers)

<test_for.html>

<html>
<h1>Brothers List</h1>
<ul>
    <li style="list-style-type: none">
        <ul>{% for name in users %}
            <li>{{ name }}</li>
            {% endfor %}
        </ul>
    </li>
</ul>
</html>

まとめ

以上がPythonのWEBフレームワークでよく使われるテンプレートエンジン「Jinja2」の基本的な使い方です。とりあえずこれらができるだけでも動的なWEBページを作ることが可能になります。

今回のサンプルコードはGithubの方にもアップロードしているので、全体像が分かりにくかった方はそちらを参照していただけると幸いです。

そして、この記事ではテンプレートエンジンに渡す値はURLルーティング関数の中で適当に定義した「name=’taro’」みたいなものでしたが、実運用する場合はデータベースから引っ張ってきたデータや、次の記事で解説している<form>タグによってテンプレート(html側)から送られてきたデータを色々と処理して渡すことが多いです。

次はGET/POSTの違いと<form>タグによるHTMLからサーバーへのデータの方法とPythonとSQLを接続させるsqlalchmyというライブラリとflaskを用いて、データベースの中身をテンプレート(HTML)に表示させるようなwebアプリを作る方法について解説していきたいと思います。

続き↓