【第5回】FlaskでWebアプリ作成練習。Jinjaを使ってPythonコードを埋め込もう！

物理・プログラミング・Python、Web制作・自己啓発

2020年3月28日 17:55

こんにちは(@t_kun_kamakiri)

前回↓に引き続き、「Flask」の勉強を進めていきたいと思います。

Flaskを使ったWeb制作には、Jinjaテンプレートエンジンを使うことでPythonコードを埋め込むことができます。

今回のテーマは以下となります。
【超入門】Jijaを使ってPythonコードを埋め込む

ファイル構成

ファイル構成は前回同様、このようにしておきます。

-run.py
-templates
|- index.html
-static
|- style.css

./templates/index.htmlにPythonコードを埋め込む

./templates/index.htmlの全体のコードが以下です。

<!doctype html>
<html lang="en">
<title>Flask入門</title>
 <head>
   <!--  CSS -->
   <!-- <link rel="stylesheet" href="../static/style.css"> -->
   <link rel="stylesheet" href="{{url_for('static',filename = 'style.css')}}">

   <title>{{title}}</title>
 </head>

 <body>
   <header>
     <h1><strong>{{message}}</strong></h1>
   </header>

   <div>
       <ul>
         <!-- <li>カマキリ</li> -->
         <!-- <li>100</li> -->
         {% for value in values %}
         <li>{{value}}</li>
         {% endfor %}
       </ul>
   </div>

   <div class = "text">
     <ol>
       <!-- <li>カマキリ</li> -->
       <!-- <li>100</li> -->
       {% for value in values %}
         {% if value == 'name' %}
           <li>{{value | reverse}}</li>
         {% else %}
           <li>{{value | upper}}</li>
         {% endif %}
       {% endfor %}
     </ol>
   </div>

   <p>{{'私の名前は "%s"です！'　| format(values['name'])}}</p>
   <p>{{'私の年齢は "%s"歳です！'　| format(values['age'])}}</p>
   <p>{{'メールアドレス："%s"'　| format(values['mail'])}}</p>

 </body>
</html>

htmlにPythonコードを埋め込むためには{% %}という記号でくくってやります。
そうすることでPythonの制御構文を使うことができます。

【for文】
{% for value in values %}
<li>{{value}}</li>
{% endfor %}

【if文】
{% if value == 'name' %}
<li>{{value | reverse}}</li>
{% else %}
<li>{{value | upper}}</li>
{% endif %}

さらに、Pythonのメソッドを使うこともできます。

「値 | フィルター」とする書き方です。

#文字を反転させる
<li>{{value | reverse}}</li>

#大文字にする
<li>{{value | upper}}</li>

#formatを使って%sに値を埋め込む
{{'私の名前は "%s"です！'　| format(values['name'])}}
{{'私の年齢は "%s"歳です！'　| format(values['age'])}}
{{'メールアドレス："%s"'　| format(values['mail'])}}

こんな感じでPythonコードを埋め込むことができます('ω')ノ

run.pyに変数を定義

./templates/index.htmlに書いている変数・・・

●title
●message
●value

はどこで設定しているかというと「run.py」に書いています。

run.py

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

@app.route('/',methods=['GET'])
def index():
   values = {'name': 'kamakiri', 'age' :110, 'mail': 'kamakiri@mail'}
   return render_template('index.html', \
       title = 'Flask入門',\
       message = 'Flask入門へようこそ！',\
       values = values)
       


if __name__ == '__main__':
   app.run()

●title←文字列
●message←文字列
●value←辞書型

このように、「run.py」に変数を指定しておきながら、「'/'」にアクセスがあった場合に「run.py」に変数を「./templates/index.」に引き渡してブラウザで表示させているという仕組みです。

スタイルシートはこんな感じ

ちなみに「./static/style.css」はこのように書いています。
※スタイルシートはテンプレートに従って表示させる方法を学んだだけですので特にこだわって記述しているわけではありません。

./static/style.css

h1{
   font-size:50px;
}

p{
   font-size:20px;
   text-align: letf;
}

.text{
   text-align: letf;
   font-size: 20px;
}

スタイルシートの表示は、

１．「run.py」でurl_for関数のインポート

from flask import Flask, render_template, url_for, request

２．「./templates/index.html」でurl_for関数を使う

   <link rel="stylesheet" href="{{url_for('static',filename = 'style.css')}}">

この2つの記述で可能です。

run.pyを実行

ブラウザ上でどのように表示されるか確認しましょう。

コマンドプロンプトを立ち上げて「run.py」を実行します。

そしてhttp://127.0.0.1:5000/にアクセスします。

そうすると↓こんな感じで表示されると思います。

毎日続けることでFlaskの使い方が少しずつ分かってきました。

☟参考書はこちら

Twitter➡@t_kun_kamakiri
ブログ➡宇宙に入ったカマキリ（物理ブログ）

この記事が気に入ったらサポートをしてみませんか？