テンプレート内に埋め込むフィルタでデータをいろいろといじることができます。
応用してテンプレート内でいろいろとできそうだね
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 runwindows
> 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”]」となって表示されていることが確認できました。
フィルタはこのように、テンプレート内でデータの変換処理などができ、自作もできます。
フィルタを使うと、テンプレートの自由度が高まりそうです。