タワ記

気が向いた時にだけ書く、技術メモっぽいもの。

FlaskでHTMLなHello World!

Python Flask

※この記事はUbuntu 16.04、Python3.5、Flask 0.12.2を前提として記載しています。

この記事に書いてあること

  • 戻り値にHTMLを入れてやればいいよ。
  • テンプレートエンジンを使えばHTMLをPythonコードから簡単に分離できるよ。
  • 単に分離するだけでなく、Pythonコードからテンプレートにパラメータを渡して、生成されるHTMLの内容を変えてみるよ。

HTMLを返してみる

公式Hello World!は以下のようなコードでした。

hello.py

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

"/"にアクセスしたらHello World!という文字列がそのまま返っていました。ということは、ここにそのままHTMLを書いてやれば、HTML版Hello World!ができそうな気がします。

hello_html.py

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "<html><body><h1>Hello World!</h1></body></html>"

Webブラウザで見てみると、こうなります。

f:id:twkmn:20171205222757p:plain
HTMLなHello World!

当然の結果になりました。

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

とはいえ、毎度HTMLをWebアプリケーションのソースコードに埋めるわけにもいきません。
FlaskはJinja*1 2というテンプレートエンジンが統合されています。あらかじめHTMLのテンプレートを別ファイルとして用意しておき、Flaskから呼び出して利用することができます。

テンプレートはhello.pyと同じレベルにtemplatesというディレクトリを作り*2、そこに放り込んでおきます。

templates/base.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <title>{{ title }}</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>

templates/hello.html

{% extends "base.html" %}
{% block content %}
<h1>{{ message }}</h1>
{% endblock %}

hello_template.py

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

@app.route('/')
def hello():
    return render_template("hello.html", title="Flask Page", message="Hello World!")

動かして、Webブラウザで結果を見てみましょう。

f:id:twkmn:20171205230513p:plain
TemplateでHTMLなHello World!

できたページのソースコードを表示すると、以下のようになります。

<!DOCTYPE html>
<html lang="jp">
<head>
    <title>Flask Page</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
        
<h1>Hello World!</h1>

</body>
</html>

Python上で設定したパラメータが反映されて、ちょっとWebアプリケーションっぽい雰囲気が出てきました。

*1:「神社」らしいのだけど、なぜ神社・・・

*2:暗黙的にtemplatesの中を探しに行きます