Flask | Jinja2 テンプレートエンジン | Python Web 開発

はじめに

Python 内から HTML を生成するのは面白くなく、実際にはとても面倒くさいです。なぜなら、アプリケーションをセキュアに保つために、独自に escape を使って HTML エスケープを行わなければならないからです。そのため、Flask は自動的に Jinja2 テンプレートエンジン を設定します。テンプレートを使って任意の種類のテキストファイルを生成することができます。Web アプリケーションの場合、主に HTML ページを生成しますが、マークダウン、メール用の平文など、他の何でも生成できます。

この実験では、Jinja2 テンプレートエンジンを使ってセキュアで動的なテンプレートを生成する方法を学びます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL flask(("Flask")) -.-> flask/DataHandlingGroup(["Data Handling"]) flask(("Flask")) -.-> flask/CoreConceptsGroup(["Core Concepts"]) python(("Python")) -.-> python/ControlFlowGroup(["Control Flow"]) flask(("Flask")) -.-> flask/DevelopmentToolsGroup(["Development Tools"]) python(("Python")) -.-> python/ModulesandPackagesGroup(["Modules and Packages"]) python(("Python")) -.-> python/AdvancedTopicsGroup(["Advanced Topics"]) flask/DataHandlingGroup -.-> flask/response_objects("Response Objects") flask/CoreConceptsGroup -.-> flask/url_route_registrations("URL Route Registrations") python/ControlFlowGroup -.-> python/conditional_statements("Conditional Statements") flask/DevelopmentToolsGroup -.-> flask/template_rendering("Template Rendering") python/ModulesandPackagesGroup -.-> python/importing_modules("Importing Modules") python/AdvancedTopicsGroup -.-> python/decorators("Decorators") subgraph Lab Skills flask/response_objects -.-> lab-188849{{"Jinja2 を使ったセキュアな動的テンプレートの生成"}} flask/url_route_registrations -.-> lab-188849{{"Jinja2 を使ったセキュアな動的テンプレートの生成"}} python/conditional_statements -.-> lab-188849{{"Jinja2 を使ったセキュアな動的テンプレートの生成"}} flask/template_rendering -.-> lab-188849{{"Jinja2 を使ったセキュアな動的テンプレートの生成"}} python/importing_modules -.-> lab-188849{{"Jinja2 を使ったセキュアな動的テンプレートの生成"}} python/decorators -.-> lab-188849{{"Jinja2 を使ったセキュアな動的テンプレートの生成"}} end

Jinja2 を使ってテンプレートをレンダリングする

このステップでは、Jinja2 テンプレートエンジンを使ってテンプレートレンダリングを実装します。

rendering_templates.py ファイルを開き、まず Flask クラスと render_template をインポートします。その後、Flask クラスのインスタンスを作成します。

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

次に、route() デコレータを使って、共有する 1 つのビュー関数 hello 用の 2 つのルート / と /<name> を作成します。テンプレートをレンダリングするには、render_template() メソッドを使うことができます。これは、Flask によって提供され、Jinja2 テンプレートエンジンを使ってテンプレートをレンダリングするためのものです。必要なことは、テンプレートの名前 と、キーワード引数としてテンプレートエンジンに渡したい変数を提供するだけです。ビュー関数では、render_template() メソッドを使って、name という変数を持つ hello.html テンプレートをレンダリングします。

@app.route('/')
@app.route('/<name>')
def hello(name=None):
    return render_template('hello.html', name=name)

スクリプトの main エントリポイントを作成して、Flask アプリケーションをポート（例えば port=5000）で起動します。その後、debug モードを有効にします。

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=5000, debug=True)

Flask は、デフォルトで templates フォルダ内を探してテンプレートを探します。そのため、templates という名前のフォルダを作成し、そのフォルダの下に hello.html という名前のファイルを作成する必要があります。端末で次のコマンドを実行することで、必要なフォルダとファイルを作成できます。

cd ~/project
mkdir templates
cd templates
touch hello.html

templates/hello.html ファイルを開き、次のコードを書きます：

<!doctype html>
<title>Hello from Flask</title>
{% if name %}
<h1>Hello {{ name }}!</h1>
{% else %}
<h1>Hello, World!</h1>
{% endif %}

上記のコードは、Jinja2 の 条件分岐ブロック を使っています。これは、name 変数が真偽値（None でも空でもない）であるかどうかを確認します。もしそうなら、Hello {{ name }}! の内容が表示されます。そうでなければ、Hello, World! の内容が表示されます。

アプリケーションを実行するには、まず端末で次のコマンドを使って Flask アプリケーションを起動します：

cd ~/project
python3 rendering_templates.py

次に、インターフェイス上部にある "Web 5000" タブを開き、インターフェイスを更新します。すると、Hello, World! が表示されるページが見えるはずです。

ルート /<name> の場合、URL バーに直接接尾辞を追加することができます。たとえば、ポート 5000 の URL バーに接尾辞 flask を入力すると、出力として Hello, flask! が表示されます。

Flask route name example
URL バーに異なる /<name> パスを試してみると、出力も対応して変化します。

まとめ

この実験では、render_template() メソッドを使って Jinja2 テンプレートエンジンを使ってテンプレートをレンダリングする方法を学びました。このメソッドは、テンプレートを生き生きとレンダリングするだけでなく、自動的なエスケープも可能にし、潜在的な XSS 攻撃を防ぐのに役立ちます。