PythonモジュールFlaskのテンプレートエンジンで変数展開する方法についてまとめました。
【1】テンプレートエンジンの有無を比較
Pythonモジュール「Flask」にはNinjaというテンプレートエンジンが標準搭載されています。
テンプレートエンジンとは、テンプレート(HTMLのひな形)を元に、プログラムで加工し、画面に出力するライブラリです。
コードを見たほうが理解しやすいと思うので、テンプレートエンジン有りとなしのコードの違いをみていきます。
動画解説
本ページの内容は以下動画でも解説しています。
テンプレートエンジン無し
まずは、テンプレートエンジンなしの最低限の機能だけで文字列(HTML)を返すだけのWebアプリを作ってみます。
■server.py
実行してブラウザで「127.0.0.1:8080」にアクセスすると、赤文字で「Hello World」と表示されます。
ただし、これだとHTMLのコード管理が面倒なのでテンプレートエンジンを使うと楽です。
テンプレートエンジンあり
【変数展開のやり方】
render_template関数の第2引数以降にHTMLで使う変数名 = 値のように指定します。(複数指定)。
HTMLでは{{}}の間に変数名を指定することで、render_template関数で指定した変数を展開できます。
テンプレートのHTMLファイルは、pythonファイル(app.runするもの)と同じ階層にtemplatesフォルダを作成し、その中に配置します。
■server.py
→pythonファイル(app.runするもの)
■templates/index.html
→テンプレートのHTMLファイル(トップページ用)です
■static/css/main.css
→HTMLファイルで使うCSSファイル。Pythonファイルと同じ階層にstaticフォルダを作成し、その中に配置して、htmlファイルにurl_forでパスを指定して適用します。
実行すると以下のように表示されます。
こんにちは ユーザー1 さん
現在時刻:2021/07/04 00:37:22
【2】テンプレートファイルの継承
Flaskには、テンプレートファイルを継承する機能があります。
これを使うことで、効率よく同じレイアウトで複数のページを作成することができます。
掲示板やブログなどのサイトは、コンテンツ(記事や書き込み)以外は、同じ構造、レイアウトが使用されている場合が多いです。
そのため、各ページを個別に作成するよりも、テンプレートの継承を活用して、共通な部分は使い回すことで効率的にページを増やすことができます。
テンプレート継承を使うにあたって、親テンプレートと子テンプレートの違いを理解する必要があります。
| 項目 | 概要 |
|---|---|
| 親テンプレート(baseテンプレート) | 各ページに共通する部分のテンプレート(要はヘッダーやフッターなど、ページごとに異なるコンテンツ以外の部分)。 |
| 子テンプレート | コンテンツ部分のテンプレート(要はブログの記事部分など、ページごとに異なるコンテンツの部分)。 |
つまり、親テンプレートの内容を子テンプレートが継承して、1つのページを作成します。
テンプレートの継承は、以下のように記述するのが基本となります。
記述例
●親テンプレート(base.htmlなど)
:
{% block 名前 %}
{% endblock %}
:
●子テンプレート(index.html、page1.htmlなど)
{% extends 継承元のファイル名 %}
{% block 名前 %}
:
{% endblock %}
動画解説
本ページの内容は以下動画でも解説しています。
ソースコード
具体的なコードにすると以下のようになります(前回と同じWebアプリを継承を使って作ってみます)。
■server.py
→pythonファイル(app.runするもの)
■templates/base.html
→親テンプレートのHTMLファイル(共通化部分)
■templates/index.html
→子テンプレートのHTMLファイル(トップページのコンテンツ部分)
■static/css/main.css
→HTMLファイルで使うCSSファイル
■実行結果(前回と同じ)
こんにちは ユーザー1 さん
現在時刻:2021/07/04 00:37:22
このように、継承を使うと、親テンプレートの内容(base.html)を複数のページで使いまわすことができ、
新規で作成するページの記述はコンテンツ部分だけで済むため管理が楽になります。
【3】複数のページを作成
複数のページを作成するには、ページの数だけ関数を用意します。
具体的にコードを見たほうがわかりやすいので、2つのページを作成するサンプルを以下に掲載します。
動画解説
本ページの内容は以下動画でも解説しています。
ソースコード
■server.py
→pythonファイル(app.runするもの)
■templates/base.html
→親テンプレートのHTMLファイル(共通化部分)
■templates/index.html
→子テンプレートのHTMLファイル1(トップページのコンテンツ部分)
url_forはURLを生成する関数で、テンプレート上でaタグでリンクを作成できます。上記の例だと、関数名(index)を指定してトップページに遷移します
■templates/page1.html
→子テンプレートのHTMLファイル2(ページ1のコンテンツ部分)
■static/css/main.css
→HTMLファイルで使うCSSファイル
トップページ(http://127.0.0.1:8080/)とページ1(http://127.0.0.1:8080/page1)の2つのページが作成されました。
関数とテンプレート(HTML)を増やせば、さらに複数のページを作成できます。
【4】Blueprintでモジュールの分割
Blueprintとは、Flaskの中で使われるモジュールで、アプリケーションの機能を分割することができます。
具体的には、これまで1つのメインファイル(Pythonファイル)に全ての関数を記述していましたが、これを関数毎にファイルを分割できるため、規模が大きくなるほど保守しやすくなります。
具体的にコードを見たほうがわかりやすいので、以下に簡単なサンプルを示します。
肥大化したプロジェクトを整理するための手段として、公式でもBlueprintが推奨されています。
動画解説
本ページの内容は以下動画でも解説しています。
ソースコード
■server.py
→pythonファイル(app.runするもの)
■index.py
→pythonファイル(index関数の部分をモジュール化)
■page1.py
→pythonファイル(page1関数の部分をモジュール化)
■templates/base.html
→親テンプレートのHTMLファイル(共通化部分)
■templates/index.html
→子テンプレートのHTMLファイル1(トップページのコンテンツ部分)
■templates/page1.html
→子テンプレートのHTMLファイル2(ページ1のコンテンツ部分)
■static/css/main.css
→HTMLファイルで使うCSSファイル
参考 : Blueprintの引数
Blueprint(name, # Blueprintの名前を指定
import_name, # ブループリントのパッケージ名を指定
static_folder, # 静的ファイルを配置するフォルダを指定
static_url_path, # 特に指定しなければ url_prefix の値が設定される
template_folder, # アプリのテンプレート検索パスを指定
url_prefix, # アプリのルートパスを指定
subdomain, # ブループリントルートが一致するサブドメインを指定
url_defaults, # ブループリントがルーティングするデフォルト値の指示
root_path) # import_nameが取得できなかった場合の検索先を指定
コメント