前回はFlaskでのルーティングについて紹介しました。
Webアプリケーションでルーティング制御をするのは、画面遷移する場合が多いと思います。
画面はHTMLで記述します。Flaskのソースコードに直接HTML形式で記述することもできますが、HTMLファイルを用意してそれを読み込むような制御も可能です。
今回はFlaskで作成したWebアプリケーションでHTMLを表示する方法を紹介します。
FlaskスクリプトにHTMLを埋め込む場合
まずはFlaskのスクリプトにHTMLをそのまま埋め込む方法です。まずはコードを紹介します。
from flask import Flask
print(__name__)
app = Flask(__name__)
@app.route("/")
def main_page():
return "<p>This is the main page</p>"
if __name__ == "__main__":
app.run()main_page()を呼び出した際の戻り値にHTMLを直接記述しています。このときHTML文は全て１つの文字列として返します。
画面には以下のように表示されます。
今回は簡単なHTMLのためこのような形で問題ないですが、通常HTMLにはもっと多くの情報が含まれており、その記述量も膨大です。
FlaskのスクリプトはWebアプリケーションの処理制御等を目的としたスクリプトのため、HTMLを上記のように埋め込んでしまうとコードの可読性が著しく低下してしまいます。
なので、このようなシンプルなHTML以外でこの方法を用いることはあまりお勧めできません。
FlaskからHTMLファイルを読み込む場合
多くの場合、HTMLファイルを読み込んで画面として表示します。先ほどのコードにHTMLファイルを読み込むルートを追加します。
まずは、今回読み込むHTMLファイルを用意します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML Sample</title>
</head>
<body>
<div class="main">
<h1>
</h1>
<p>HTMLから読み込んだで</p>
</div>
</body>
</html>HTMLファイルはtemplatesというフォルダの中に格納します。HTMLファイルを格納する場所はデフォルトでtemplatesフォルダとされていますが、後述するPythonスクリプトでapp = Flask(__name__)に引数を追加することで格納するフォルダを変更することができます。
##ディレクトリ構成
- main.py
- templates
L index.htmlでは、main.pyにHTMLファイルを読み込む処理を追加します。
from flask import Flask, render_template
print(__name__)
app = Flask(__name__)
@app.route("/")
def main_page():
return "<p>This is the main page</p>"
@app.route("/htmlFile")
def html_page():
return render_template('index.html')
if __name__ == "__main__":
app.run()まず、Flaskからrender_templateもインポートするようにします。そして、/htmlFileを指定した際にHTMLファイルを読み込むような処理を追加しました。
html_page()では戻り値にrender_templateを渡し、その引数をHTMLファイルとしています。”templates/xx.html”のようにディレクトリを指定する必要はありません。
templatesという名称以外のフォルダでテンプレート（HTMLファイル）を管理したい場合には、app = Flask(__name__)に以下のように引数を追加します。
app = Flask(__name__, template_folder='フォルダ名')まとめ
Flaskで作成したWebアプリケーションでHTMLを表示する方法を紹介しました。基本的にはPythonのFlaskプログラムにHTMLを埋め込むのは可読性を低下させるので推奨できません。画面の見た目はHTMLに切り出して、管理しやすいコードにしておきましょう。
ではでは👋
