- Flaskでのテンプレートの基本的な使い方
- 値を渡して動的にテンプレートの内容を変更する
- テンプレートのフォルダを変更する
について、必要なだけ、詳細に説明します。
テンプレートを用いてHTMLファイルを表示する
テンプレートのHTMLファイルは、デフォルトでアプリケーションのpythonファイルと同じ階層のtemplatesフォルダ内に配置する。
また、テンプレートを表示するには、render_template(from flask import render_template)を用いる
Example
- Viewの記述(app.py)
app = Flask(__name__)
@app.route('/index')
def index():
return render_template('index.html') # templatesフォルダ内のindex.htmlを表示する
if __name__ == '__main__':
app.run()
次に、index.htmlを実装する
- index.htmlの記述
- ファイルの階層構造
app.pyとtemplatesフォルダ内にindex.htmlを配置する。
- アプリケーションを実行した結果
アプリケーションを立ち上げて、http://127.0.0.1:5000/indexを表示すると、以下の画面が表示される。
値を渡して動的にテンプレートの表示を変更する(文字列、辞書、リスト、自作クラスのインスタンス)
変数をテンプレートに渡して、その変数をテンプレートで画面上に表示することができる。
つまり、動的にページの内容を変更することができる。
文字列や、数値などの変数を送ることもあれば、リストや辞書、オブジェクトのインスタンスなど様々な型で変数をテンプレートに送り表示することもあるので、それぞれのやり方を以下に記載した。
Example
- 変数を渡して表示する
@app.route('/index')
name = 'Taro'
age = 12
return render_template('index.html', name=name, age = age) # nameとageを変数としてテンプレートに渡す
if __name__ == '__main__':
app.run()
次に、index.htmlを実装する
- index.htmlの記述
<h2>My name is {{ name }} age is {{ age }}</h2>
次に、アプリケーションを立ち上げてhttp://127.0.0.1:5000/indexを表示すると、nameとageに値が渡されて以下のように表示される。
次に、リストをテンプレートに渡して表示してみる。
- リストをテンプレートで扱う
@app.route('/index')
gafa = ['apple', 'google', 'facebook', 'amazon']
return render_template('index.html', gafa=gafa) # gafaを変数としてテンプレートに渡す
if __name__ == '__main__':
app.run()
次に、index.htmlを実装する
- index.htmlの記述
<p>{{ gafa.0 }}</p> <!-- インデックス0のapple -->
<p>{{ gafa.2 }}</p> <!-- インデックス2のfacebook が表示される-->
<ul>
{% for g in gafa %} <!-- ループさせてそれぞれ要素を取り出す -->
<li>{{ g }}</li> <!-- apple google facebook amazonがそれぞれ表示される -->
{% endfor %}
</ul>
次に、辞書型をテンプレートに渡して表示してみる。
- 辞書型をテンプレートで扱う
@app.route('/index')
user = {'name': 'Taro', 'age': 17}
return render_template('index.html', user=user) # userを変数としてテンプレートに渡す
if __name__ == '__main__':
app.run()
次に、index.htmlを実装する
- index.htmlの記述
<h2>My name is {{ user.name }} age is {{ user.age }}</h2>
<!-- {{ 変数名['キー名'] }}としても同様に値を取り出すことができる。
<h2>My name is {{ user['name'] }} age is {{ user['age'] }}</h2>
{% for key in user %} <!-- ループしてキーを取り出す -->
{{ key }} <!-- キーだけ表示 -->
{{ user[key] }} <!-- キーを利用して変数の中の値を取り出す -->
{% endfor %}
次に、作成したクラスのインスタンスをテンプレートに渡して表示してみる。
- 作成したクラスのインスタンスをテンプレートで扱う
from flask import Flask, render_template
app = Flask(__name__)
class User: # クラスを作成する
def __init__(self, name, age):
self.name = name # プロパティの定義
self.age = age
@app.route('/index')
def index():
user = User(name='Taro', age=18) # インスタンスの作成
return render_template('index.html', user=user) # インスタンスをテンプレートに渡す
if __name__ == '__main__':
app.run(debug=True)
テンプレートに渡したuserのプロパティnameとageにアクセスするには、{{ user.name }} {{ user.age }}とすればよい。
{{ user.name }} <!-- .nameでプロパティにアクセス -->
{{ user.age }} <!-- .ageでプロパティにアクセス -->
以上、テンプレートに値を渡す方法について説明した。
テンプレートのフォルダの変更
テンプレートのフォルダはデフォルトでは、アプリケーションの立ち上げファイルと同じ階層のtemplatesフォルダです。
テンプレートのフォルダのパスを変えるには、FlasK(__name__)でアプリケーション作成時に、template_folderを第2引数に取ればよいです。
Example
- テンプレートのパスの変更(相対パス)
import os
# template_folder引数を指定して、実行ファイルと同じ階層のtemplates2の中のmyfolderに変更
# os.path.joinを用いると、Windows, Linuxの環境に依存せずにフォルダのパスを作成できる
app = Flask(__name__, template_folder=os.path.join(os.path.dirname(__file__), 'templates2', 'myfolder'))
@app.route('/index')
def index():
return render_template('index.html') # templatesフォルダ内のindex.htmlを表示する
if __name__ == '__main__':
app.run()
以上、Flaskのテンプレートの利用方法の一つ目として、templateの作成とViewから値を送る、テンプレートのフォルダの変更方法について記述しました。