FlaskでササっとWebアプリケーション作成 〜基礎編②HTMLファイルを表示する
前回は直接、Pythonファイル内にHTMLタグ付きの文字列を表示させることをチュートリアルに沿って行いました。
今回は、予め用意しておいたHTMLファイルを利用してWebブラウザ上に同じく表示を行ってみましょう。
前回Flaskをインストールする時に、テンプレートエンジンであるJinja2も合わせてインストールされているため、Python側のプログラムで算出した結果を渡して、動的にHTMLファイルに表示させたりすることもできます。
この辺を試せる簡単なものを作ってみます。
1.HTMLファイル
まずはHTMLファイルを用意します。
今回は「おみくじ」的な、ブラウザを更新するたびに大吉・中吉・小吉・凶・大凶のいずれかが表示されるページを作成してみたいと思います。
そして、算出された運勢に合わせたコメントも合わせて表示してみます。
(1) omikuji.html
HTMLファイルをテキストエディタ等で作成してみましょう。
<!doctype html>
<title>おみくじ</title>
<h2>あなたの運勢は・・・{{ fotune }}です！</h2>
{% if fotune == "大吉" %}
<h3>強運の持ち主！きっといいことがあるでしょう。</h3>
{% elif fotune == "中吉" %}
<h3>上り調子！明るい未来が待っているでしょう。</h3>
{% elif fotune == "小吉" %}
<h3>ささやかな幸せこそ、ありがたいものですよね！</h3>
{% elif fotune == "凶" %}
<h3>どんまい！！今日は冷静に乗り切りましょう！</h3>
{% else %}
<h3>負けるな！</h3>
{% endif %}(2) テンプレート
HTMLファイルに引数を渡して利用する場合、{{ 変数 }}と記述することで変数に格納された値が表示されます。
{{ fotune }}に大吉などの運勢をセットするようにしています。
{% 構文 %}で条件分岐や、ループ処理が可能です。
fotuneで渡された値が何であるかによって、h3タグ内に表示するコメントが変わるようにしています。
(3)HTMLファイルの格納場所
templatesというフォルダを作成して、その配下にomikuji.htmlファイルを格納します。
2.Pythonファイル
次にPythonファイルを用意します。
(1) render_omikuji.py
次にPythonプログラムを作成します。
from flask import Flask, render_template
import random
app = Flask(__name__)
@app.route('/omikuji/')
def omikuji():
fotunes = ['大吉', '中吉', '小吉', '凶', '大凶']
return render_template('omikuji.html', fotune=random.choice(fotunes))
if __name__ == "__main__":
app.run()(2) render_template
HTMLファイルを読み込むために、render_templateモジュールをインポートします。そして、おみくじをランダムで選ぶためにrandomモジュールもインポートしておきます。
(3) omikuji関数
omikuji関数を定義します。
処理は簡単で、fotunesという5つの運勢が格納されたリストから、ランダムで一つ運勢を取り出してfotuneというパラメータにセットした上で、omikuji.htmlに渡します。
3.Webアプリケーションを実行する
それでは「おみくじ」アプリを実行してみましょう。
(1) 起動コマンド
コマンドラインで、以下のように指示します。
flask --app render_omikuji run※render_omikuji.pyなので上記のように記述しています。ご自分で違う名称をつけた場合は、その名称を記述してください。
エラーが出ない場合は、以下のように表示がされると思います。
* Serving Flask app 'render_omikuji'
* Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on http://127.0.0.1:5000
Press CTRL+C to quitエラーになってしまうようであれば、htmlファイルがtemplatesの配下にあるか、コードの記述ミスがないか確認してみてください。
(2)ブラウザを立ち上げてみよう
webブラウザに「http://127.0.0.1:5000/omikuji/」というURLを入力してみましょう。
ブラウザを更新すると・・・
ブラウザを更新する都度、Pythonプログラム側で運勢が選択されるため、動的にWebブラウザの表示が変わっているのがわかると思います。
次回はもう少し、面白いものを作ってみましょう。
この記事が気に入ったらサポートをしてみませんか？