【Python/Flask】テンプレートエンジンを使ってみよう【変数展開、継承、ページ分割】

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)を複数のページで使いまわすことができ、
新規で作成するページの記述はコンテンツ部分だけで済むため管理が楽になります。

【Python/Flask】テンプレートファイルの継承
Pythonと「Flask」でテンプレートファイルを継承を行う方法について入門者向けにまとめました。

【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)を増やせば、さらに複数のページを作成できます。

【Python/Flask】複数ページの作成
Pythonと「Flask」で複数のページを作成する方法について入門者向けにまとめました。

【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ファイル


【Python/Flask】Blueprintでモジュールの分割
Pythonと「Flask」のBlueprintでモジュールの分割する方法について入門者向けにまとめました。
参考 : Blueprintの引数

Blueprint(name,  # Blueprintの名前を指定
          import_name,  # ブループリントのパッケージ名を指定
          static_folder,   # 静的ファイルを配置するフォルダを指定
          static_url_path,   # 特に指定しなければ url_prefix の値が設定される
          template_folder,   # アプリのテンプレート検索パスを指定
          url_prefix,   # アプリのルートパスを指定
          subdomain,  # ブループリントルートが一致するサブドメインを指定
          url_defaults,   # ブループリントがルーティングするデフォルト値の指示
          root_path)  # import_nameが取得できなかった場合の検索先を指定  
【Python/Flask】Webアプリ・サイトの作成入門
Python用Webフレームワーク「Flask」の使い方について入門者向けにまとめました。

コメント