• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

Tech Life

エンジニアの生き方を考えるメディア

  • プログラミング
    • Python入門
    • Flask入門
    • Django入門
  • 利用規約
  • プロフィール
You are here: Home / IT・プログラミング / Python / フレームワーク / Flask / Flaskのテンプレートで表示。テンプレートに値を渡す。テンプレートのフォルダを変更する

Flaskのテンプレートで表示。テンプレートに値を渡す。テンプレートのフォルダを変更する

2020年12月11日 by 9nmatsumoto

  • Flaskでのテンプレートの基本的な使い方
  • 値を渡して動的にテンプレートの内容を変更する
  • テンプレートのフォルダを変更する

について、必要なだけ、詳細に説明します。

 

Contents
  1. テンプレートを用いてHTMLファイルを表示する
  2. 値を渡して動的にテンプレートの表示を変更する(文字列、辞書、リスト、自作クラスのインスタンス)
  3. テンプレートのフォルダの変更

テンプレートを用いてHTMLファイルを表示する

テンプレートのHTMLファイルは、デフォルトでアプリケーションのpythonファイルと同じ階層のtemplatesフォルダ内に配置する。
また、テンプレートを表示するには、render_template(from flask import render_template)を用いる

Example

  • Viewの記述(app.py)
from flask import Flask, render_template

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の記述
<h1>Hello</h1>

 

  • ファイルの階層構造

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 }}</p> <!-- ['apple', 'google', 'facebook', 'amazon'] -->
<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 %}

 
次に、作成したクラスのインスタンスをテンプレートに渡して表示してみる。

  • 作成したクラスのインスタンスをテンプレートで扱う
# views.py
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 }}とすればよい。

# template.html
{{ user.name }} <!-- .nameでプロパティにアクセス -->
{{ user.age }} <!-- .ageでプロパティにアクセス -->

以上、テンプレートに値を渡す方法について説明した。

テンプレートのフォルダの変更

テンプレートのフォルダはデフォルトでは、アプリケーションの立ち上げファイルと同じ階層のtemplatesフォルダです。

テンプレートのフォルダのパスを変えるには、FlasK(__name__)でアプリケーション作成時に、template_folderを第2引数に取ればよいです。

Example

  • テンプレートのパスの変更(相対パス)
from flask import Flask, render_template
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から値を送る、テンプレートのフォルダの変更方法について記述しました。


« Previous

URLマッピング

Next »

DEBUGの方法


Flask入門記事一覧はこちら

Filed Under: Flask Tagged With: flask, python, template

Primary Sidebar

注目記事

プロのエンジニアが選ぶPython入門者、初心者向けの書籍10選
元SEが語る、システムエンジニア(SE)ってどんな仕事?きつくてつらいのか?
元SEが語る、システムエンジニアの良いところ

スポンサーリンク