今回はWebアプリケーションの画面についてだ。
これまでもHello World!とか画面に出してましたよね。
これまでは直接FlaskのコードにHTMLを書いていたが、HTMLファイルを読み込むこともできる。
今回はその方法についてですね。
FlaskスクリプトにHTMLを埋め込む場合
まずはFlaskのスクリプトにHTMLをそのまま埋め込む方法です。
main_page()を呼び出した際の戻り値に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()例ではHTMLの内容がシンプルすぎるので直接書いても問題ないが、実際のHTMLは記述量がもっと膨大になる。
その膨大なコードをFlaskのコード上に書いてしまうとどうなる？
どうなるって、1ファイルで丸く収まるんじゃないですか？
まったく、何でもまとめればいいと思っているその安直さにがっかりだよ。
す、すみません。。
膨大なHTMLコードをFlaskのコード上に書いてしまうと、可読性が著しく低下する。本来FlaskのソースコードにはFlaskの処理を書くべきであって、HTMLを書くところではない。
何を記述しているファイルなのか、目的が分からなくなりますね。
うむ。
なので、一般的にはHTMLはHTMLファイルとして別ファイルで管理する。
FlaskからHTMLファイルを読み込む場合
HTMLファイルを読み込んで表示するFlaskのコードを紹介します。
まずは、今回読み込む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
L templates
L index.html“/htmlFile”で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()HTMLファイルを読み込むため、Flaskからrender_templateをインポートする必要がある。
from flask import Flask, render_templateの部分ですね。
html_page()では戻り値にrender_templateを渡し、その引数をHTMLファイルとしています。”templates/xx.html”のようにディレクトリを指定する必要はありません。
templatesフォルダ以外でHTMLファイルを管理したい場合
templatesという名称以外のフォルダでテンプレート（HTMLファイル）を管理したい場合には、app = Flask(__name__)に以下のように引数を追加します。
app = Flask(__name__, template_folder='フォルダ名')render_template()ではデフォルトでtemplatesフォルダを参照するようになっている。
ディレクトリ構成のお作法ってやつですね。
もしお作法を破って独自のディレクトリ構成にする場合は、引数にtemplate_folder=’フォルダ名’を渡せばよいのだ。
まとめ
FlaskでHTMLファイルを読み込む方法を紹介したが、基本的にはFlaskのプログラムファイルとHTMLはファイルを分けて作成するのが望ましい。
なんでもまとめすぎると良くないんですね。
実際はHTML以外にもCSSやJavascriptを扱うケースが多い。それぞれ役割があるので、個別に管理すると可読性が上がる。
メンテナンスしやすくなるってことですね。
今日はここまでにしよう。
ありがとうございました~~♪