flaskでWebアプリ開発、テンプレートについて勉強3、フィルタのカスタマイズ

1_プログラミング

テンプレート内に埋め込むフィルタでデータをいろいろといじることができます。

応用してテンプレート内でいろいろとできそうだね

flaskのチュートリアル、テンプレートの項目を進めています。今回は、「ResisteringFilters」のサンプルプログラムをアプリケーションで動作させて確認してみたいと思います。

チュートリアルドキュメントのページはこちらになります。

こんな人の役に立つかも

・flaskを勉強している人

・flaskのテンプレートについて勉強している人

・flaskのアプリを作成している人

スポンサーリンク

ベースとなるアプリの取得

以前、ミニマムなflaskアプリの記事でGitHubにPUSHした基本的な構成のアプリを改造して、チュートリアルのカスタムフィルタを実装していきたいと思います。

まずは、GitHubからプロジェクトをcloneしてきます。もちろんcloneするときには、cloneする階層に移動しておきます。私はPythonという階層に移動してcloneします。

$ cd /Python
$ git clone https://github.com/perfectpanda-works/panda-flask.git

以下の手順で、仮想環境を入れて、仮想環境にすべてのPythonモジュールをインストールします。そして、flaskのデバッグ用Webサーバーを立ち上げます。

mac

$ cd panda-flask
$ Python3 -m venv venv
$ . venv/bin/activate
(venv)$ pip install -r requestments.txt
(venv)$ export FLASK_APP=min_app
(venv)$ export FLASK_ENV=development
(venv)$ flask run

windows

> cd panda-flask
> py -3 -m venv venv
> venv¥Scripts¥activate
(venv)> pip install -r requestments.txt
(venv)> set FLASK_APP=min_app
(venv)> set FLASK_ENV=development
(venv)> flask run

これで、ブラウザでlocalhost:5000にindexが表示されれば、準備完了です。

Filterをカスタマイズ

Filterをカスタマイズするには

①デコレータを利用する方法

②Jinja2に手動でFilterを設定する方法

があるとのことでした。

デコレータは、今まで何度も利用してきて、使い慣れているので、今回チュートリアルにあるreverseというリストを逆にするFilterをデコレータにて実装してみます。

min_appフォルダ内にある「__init__.py」を次のように書き換えます。

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

#①returnでリストもテンプレートに渡すように変更します。
@app.route('/')
def hello_world():
    return render_template('index.html', data=["1","2","3"])

#②今回検証するカスタマイズしたFilterです。
@app.template_filter('reverse')
def reverse_filter(s):
    return s[::-1]

①のルートにアクセスした時のview関数のrender_templateで、dataというリストを渡すようにしています。index.htmlに「[“1″,”2″,”3”]」というデータを渡しています。

②では、デコレータでfilterを実装しています。受け取ったリストを反対にするようにしています。なので、今回のdataの中身「[“1″,”2″,”3”]」は「[“3″,”2″,”1”]」となるはずです。

dataがテンプレートでフィルタ処理を通して表示するように変更します。「templates/index.html」を次のように変更しました。

<!doctype html>
    <h1>INDEX death</h1>
    <h2>{{ data | reverse }}</h2>

H2タグで、dataを表示するようにして、フィルタのreverseを指定しています。

動作検証

それでは、動作を検証してみます。

flaskのデバッグWebサーバが動作している場合、ブラウザをリロードしてみます。

view関数から渡したdata「[“1″,”2″,”3”]」が「[“3″,”2″,”1”]」となって表示されていることが確認できました。

フィルタはこのように、テンプレート内でデータの変換処理などができ、自作もできます。

フィルタを使うと、テンプレートの自由度が高まりそうです。

タイトルとURLをコピーしました