【FastAPI】テンプレートエンジンを使ってHTML・CSSを配信

2021-12-202024-03-23

当ページのリンクには広告が含まれています。

URLをコピーしました！

FastAPIを使用してJSONではなく、テンプレートエンジンを用いてHTMLやCSSを返す方法をご紹介いたします。

テンプレートエンジン

テンプレートエンジンはjinjaを用います。

jinja2とは「python用の、htmlを動的作成できるテンプレートエンジン」です。

djangoやflaskでも用いられている一般的なもので、データベースの値を埋め込んだり、ifやfor文などもテンプレートに埋め込めます。

https://jinja.palletsprojects.com/en/3.0.x/

例えば、下記のようにhtmlファイルを記述できます。

<h1>Hello {{ name }}</h1>

{% if name %} is_name {% endif %}

{% for object in object_list %}
{{ object }}
{% endfor %}

jinja2のインストールが必要です。

pip install jinja2

テンプレートの作成

まずは、テンプレート用のディレクトリを作成します。

ここでは、templates/とします。ここにhtmlやcssファイルを保管していきます。

Jinja2Templatesとは？

router/templates.pyにJinja2Templatesのインスタンスを作成します。

from fastapi.templating import Jinja2Templates
~~~
templates = Jinja2Templates(directory='templates')

先程作成したtemplatesディレクトリを指定しています。

簡単なエンドポイントの作成

まずは基本的なエンドポイントから作成します。

response_classにはHTMLResponseを指定しており、返り値には

product.html
テンプレートに渡す値

を渡しています。

from fastapi.responses import HTMLResponse
from fastapi.requests import Request

~~~

@router.get("/products/{id}", response_class=HTMLResponse)
def get_product(id: str, request: Request):
    return templates.TemplateResponse(
        "product.html",
        {
            "request": request,
            "id": id
        }
    )

product.htmlには下記のような簡単なhtmlを作成しました。

<div>Product ID is {{ id }}</div>

{{ id }}はテンプレートタグと呼ばれており、返り値のidに対応しています。

https://jinja.palletsprojects.com/en/3.0.x/templates/

確認してみましょう。

Response bodyの値を確認すると、無事値が埋め込まれていることが確認できました。

POSTされた値を利用

より実践的な内容で、POSTで受け取ったから値をテンプレートに記述してみます。

まずは、schemas.pyを作成してBaseModelの型を作成します。

【FastAPI】パラメータ・リクエストボディの使い方【入門】 FastAPIでは、簡単に受け取るパラメーターやリクエストボディの記述が可能です。今回は、パス・クエリパラメーターやリクエストボディの記述方法をご紹介いたします。 …

【FastAPI】リレーションモデルとレスポンス【SQLAlchemy】今回は、FastAPIとSQLAlchemyを使用してデータベース作成時にどのようにリレーション関係の持つモデルを作成するのかスキーマを定義して、レスポンス形式をどのように…

from pydantic import BaseModel

class ProductBase(BaseModel):
    title: str
    description: str
    price: float

りクエストボディの型を作成し、受け取った値をテンプレートに記述できるように追加しました。

@router.post("/products/{id}", response_class=HTMLResponse)
def get_product(id: str, product: ProductBase ,request: Request):
    return templates.TemplateResponse(
        "product_post.html",
        {
            "request": request,
            "id": id,
            "title": product.description,
            "price": product.price
        }
    )

指定したhtmlファイルの中身は下記になります。

<div>
    <li>id : {{ id }}</li>
    <li>title : {{ title }}</li>
    <li>price : {{ price }}</li>
</div>

実際にAPIを確認してみましょう。

うまく反映されていますね。

テンプレートの値は、下記の様にまとめることも可能です。

@router.post("/products/{id}", response_class=HTMLResponse)
def get_product(id: str, product: ProductBase ,request: Request):
    return templates.TemplateResponse(
        "product_post.html",
        {
            "request": request,
            "id": id,
            "product": product
        }
    )

<div>
    <li>id : {{ id }}</li>
    <li>title : {{ product.title }}</li>
    <li>price : {{ product.price }}</li>
</div>

CSSファイルなどの静的ファイルの配信

htmlファイルだけではなくcssファイルも一緒に配信するには静的ファイルを配信できるようにします。

【FastAPI】アップロード・ダウンロードファイルの操作 FastAPIのAPIでのファイルのアップロードダウンロード方法についてご紹介いたします。サーバーにある静的ファイルの配信方法や、エンドポイントでの認証を含めた配信…

main.pyにtemplates/static以下を配信できるように設定しました。

from fastapi.staticfiles import StaticFiles

~~~

app.mount(
    '/templates/static', 
    StaticFiles(directory="templates/static"), 
    name='static'
    )

templates/static配下にcssファイルを作成して反映させてみましょう。

product_post.htmlとproduct.cssを編集します。

<head>
    <link rel="stylesheet" href="{{ url_for('static', path='/product.css') }}">
</head>
<div class="list">
    <li>id : {{ id }}</li>
    <li>title : {{ product.title }}</li>
    <li>price : {{ product.price }}</li>
</div>

href=にはファイルパスを指定しています。

flaskのチュートリアルページが分かりやすいです→コチラ