【第3回】FlaskでWebアプリ作成練習。スタイルシート表示、Jinjaテンプレートエンジンを使って値を埋め込む。

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

2020年3月26日 20:17

こんにちは(@t_kun_kamakiri)

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

今回やること
●スタイルシートの読み込み
●Jinjaのテンプレートエンジンを使って値を渡す

この2つをやっていきたいと思います(^^)/

☟参考書はこちら

index.htmlにスタイルシートを読み込む設定を行う

htmlやcssになじみがある方ならご存じだと思いますが、スタイルシート(CSSファイル）をhtmlから読み込む際には<head></head>の間で以下のように書きます。

<head>
    
<!--  CSS -->
   <link rel="stylesheet" href="../static/style.css"> 

</head>

しかし、Flaskにはスタイルシートを読み込む関数（url_for関数）というのが用意されています。

ではその手順を示していきます。

●まず、現在のフォルダ（run.pyのあるフォルダ）で、「static」という名前のフォルダを用意します。
その中に、「style.css」というファイルを用意しましょう。

●次に、「flaskライブラリ」の中の「url_for」関数をインポートします。

from flask import Flask, render_template, url_for

「Flask,」と「render_template」は第2回でインポートした際に書いたものです。
新たに追加したのは「url_for」関数のみです。

●url_for関数を使ってスタイルシートを読み込む

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

url_for関数
・第一の引数：フォルダ名
・第二の引数：filename = 'style.css'

とすることで、「static」フォルダの中のstyle.cssファイルを読み込むことになります。

ちなみに、style.cssは以下のように書いておきます。

./static/style.css

body{
   margin:30px;
   background-color:aliceblue;
   text-align: center;
}

h2{
   color: lightblue;
   font-size:50px;
}

p{
   font-size:20px;
}

これでスタイルシートが読み込まれます。

※ここではどのように表示されるか確認はしません。
このnoteの最後までいったらブラウザでの表示をお見せします。

Jinjaテンプレートエンジンを使う

次に、「Jinja」のテンプレートエンジンを使ってみたいと思います。

HTMLはプログラミング言語ではないため、変数の引き渡しなどは基本的にはできません。

例えば、

<head>
       <meta charset="utf-8">
       <title>宇宙に入ったカマキリ＠物理ブログ</title>
</head>

としても、<title></title>で過去かれた文字は変更することができません。

しかし、FlaskにはJinjaテンプレートエンジンが用意されており、下記のように書くことで値を渡すことができます。

<title>{{title}}</title>
<p>{{message}}</p>

どういうことかというと、

●「index.html」のrender_tenplateに引数として「title」と「message」という変数を設定します。
title = "Flask入門"
message = "Flask入門へようこそ"

と文字列を設定しています。

それを、「run.py」にも同じように変数を設定しておくと、変数に指定された値（例えば、message = "Flask入門へようこそ"）が表示されるという仕組みになっています。

※変数の値の対応付けがされていれば変数名な何でもよいです。

アクセスしているアドレスをパラメータにしてみよう

今度はアクセスした先のアドレスをパラメータにしてhtmlファイルに変数を引き渡してブラウザ上に表示する方法を紹介します。

アドレスhttp://127.0.0.1:5000/kamakiri/kkk

にアクセスすると、

●id = kamakiri
●password = kkk

が変数になっており、それをブラウザ上に表示するという流れになっています。

それぞれの変数の引き渡しの道を下記に記しておきます。

全体のコード

ファイル構成は以下のようにしております。

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

run.py

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

@app.route('/<id>/<password>')
def index(id, password):
   id_pass = 'id: %s, password: %s' %(id, password)
   values = {"name": "カマキリ", "age" :100}
   return render_template('index.html', \
       values=values,\
       title = "Flask入門",\
       message = 'Flask入門へようこそ！'+ id_pass)

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

./templates/index.html

<!doctype html>
<html lang="en">
<title>Flask入門</title>
 <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   
   <!--  CSS -->
   <!-- <link rel="stylesheet" href="../static/style.css"> -->
   <link rel="stylesheet" href="{{url_for('static',filename = 'style.css')}}">

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

 <body>
   <header>
       <div class="navbar navbar-dark bg-primary box-shadow">
           <div class="container d-flex justify-content-between">
               <a href="/" class="navbar-brand d-flex align-items-center">
                   <h1><strong>{{message}}</strong></h1>
               </a>
           </div>
       </div>
   </header>
   <div class="content container">
       <h2>値を出力してみよう↓</h2>
       <p>名前は？：{{ values.name }}です。</p>
       <p>年齢は？：{{ values.age }}です。</p>
   </div>

   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </body>
</html>

./static/style.css

body{
   margin:30px;
   background-color:aliceblue;
   text-align: center;
}

h2{
   color: lightblue;
   font-size:50px;
}

p{
   font-size:20px;
}

コマンドプロンプトで「run.py」を実行してみてください。

python run.py

↓このようになります。

アドレスhttp://127.0.0.1:5000/kamakiri/kkk

にアクセスすると、↓こんな感じなります。

アドレスのアクセス先が変数になっているのが確認できますかね(^^)/

今回は以上です。

引き続きFlaskの勉強を続けます( ｀ー´)ノ

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

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