【Webアプリ開発】FlaskでWebアプリ開発、レンダリングテンプレート

れんだりんぐてんぷれーと?という難しそうな言葉が出てきました。

実際に動かしてみるとわかるかもね〜

今までは「hello.py」というPythonのプログラムを作成してきましたが、ついにhtmlを表示できるようにしてきます。レンダリングテンプレートは、テンプレートを持っておき、それを表示する、というflaskの仕組みなのでしょう。実際にどのように動くのかをプログラムを触って検証していきたいと思います。

やっているチュートリアルはこちらになります。

こんな人の役に立つかも

・flaskを勉強している人

・PythonでWebアプリケーションを作りたい人

・flaskでテンプレートを利用したい人

目次

レンダリングテンプレート

レンダリングテンプレートという仕組みを利用して、flaskはhtmlを表示したりするようです。

さて、Webアプリケーションで必要なHTMLファイルというと、内容が動的に変化するように作成しないといけません。

動的、というと、入力に応じて内容が変化するようなイメージですね。

内容が動的に変化するようにHTMLを作るということは、例えば、ユーザー名によって表示する文字が変化したり、ランクに応じたユーザーへの表示を切り替えたりと行ったようにHTMLファイルではあるのですが、変数を埋め込んだり、条件分岐を記述できたり、そのようなHTMLファイルが作成できるととても都合よくプログラミングすることができます。

このようなHTMLをPythonで作ろうとすると、毎回かなりの労力がかかります。そこで、flaskは「Jinja2」というテンプレートエンジンと呼ばれるプログラムを利用して動的なHTMLを作成することができるようになっています。

このJinja2の仕組みを利用したHTMLファイルをテンプレートとして「template」フォルダに配置することで、動的にHTMLを表示することができるようです。

とりあえずやってみると雰囲気が掴めます。

プログラミング(チュートリアルを少しだけ変更)

今回作成するWebアプリケーションは、テンプレートエンジンを利用してHelloWorldができます 笑

Webアプリのプログラム

今まで利用してきたプロジェクト、「myproject」を改造していきます。myprojectフォルダ内に、「application.py」というファイルを作成します。application.pyには次のようにプログラミングを行います。

↓「application.py」

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

@app.route('/')
def index():
    return 'index'

@app.route('/hello/')
@app.route('/hello/<name>')
def hello(name=None):
    return render_template('hello.html', name=name)

チュートリアルでは、@app.route(‘/hello/’)からの内容しか記載していませんが、動作させるためにappのインスタンス作成などWebアプリケーションとして動作するようなプログラムを追加しています。

ファイル構成

アプリケーションを制御するプログラムのapplication.pyができました。これから、テンプレートとして利用するファイルを格納するための「templates」フォルダと、その中に配置する「hello.html」を作成します。次の手順でフォルダの追加、ファイルの作成を行います。

①「templates」フォルダを追加する。

先ほど作成したapplication.pyの中に「render_template」という関数が出てきました。この関数は、「templates」フォルダからテンプレートを呼び出すため、必ず「templates」というフォルダ名にする必要があるようです。

②「hello.html」を配置する

「templates」フォルダを作成したら、その中に「hello.html」を作成します。次のスクリプトを入力してください。

<!doctype html>
<title>Hello from Flask</title>
{% if name %}
  <h1>Hello {{ name }}!</h1>
{% else %}
  <h1>Hello, World!</h1>
{% endif %}

Jinja2テンプレートエンジンを利用して、HTMLへの変数の埋め込みや条件分岐をこのように記述することができます。

変数

中括弧を二重で囲んだものです。また、変数名は、render_templateの第二引数以降で指定したものです。今回は、nameという一つの引数を渡しています。

{{ name }}

条件

中括弧とパーセンテージで表現します。サンプルではifとelseを利用しています。

{% if name %}
  <h1>条件1</h1>
{% else %}
  <h1>条件1以外</h1>
{% endif %}

flaskも色々なライブラリで成り立っているんですね〜

アプリケーションの実行と動作

実行をするために、デバッグ用のWebサーバーを立ち上げたり準備を行います。慣れていない場合、次の記事をご参考ください。今回は、アプリケーションのプログラムファイル名が「application.py」となりましたので、FLASK_APP環境変数はapplication.pyを指定する必要があります。

ぱんだクリップ
【Flask】Webアプリケーション開発の準備、Python仮想環境とデバッグ用Webサーバー | ぱんだクリップ パソコンを立ち上げて、flaskの開発を行う前に行う準備をまとめたページとなります。 flaskの開発環境はインストールされていることが前提となっています。インストール等...

動作の確認

次のURLで一つづつアクセスしてみます。

「localhost:5000/」

ルート(local)にアクセスすると「index」と表示

「localhost:5000/hello/」

「/hello/」にアクセスすると「Hello,World!」と表示

「localhost:5000/hello/namae」

「/hello/namae」とアクセスすると「Hello namae!」と表示(変数の埋め込み)

なんとなく、レンダリングテンプレートとテンプレートファイルの作成でどんな動きになるか、わかってきました。

まだまだ基本的なところなので、実用的な機能をもっと追加していきたいね

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次