##内容
今回はPythonのWebアプリケーションフレームワークのFlaskを使って画面を表示させるよーっていうところまで書きます！簡単な内容となっていますがよろしくお願いいたします！
※本記事ではソースコードのみの記載とさせていただき、環境の構築(Python、Flaskのインストールなど)に関しましては割愛させていただきます。
##環境
・Python 3.9.6
・Flask 1.1.2
##helloを表示
どこにでもあるhelloを表示させるです。
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello():
return "Hello World!"
if __name__ =="__main__":
app.run()
###実行
サーバーを起動させる
python hello.py
下記URLにアクセスしてみます。
http://localhost:5000/
すると、、、
このように表示されます。
こちらはhtmlも使用せずに画面に「hello」とだけ表示させるものです。
続いては呼び出された際にhtmlを返します。
##htmlを返す
今回はシンプルに記載ができるJinja2というテンプレートエンジンを使用します。
htmlを返すだけではつまらないので入力フォームから2つの数字を受け取って掛け算させたいと思います！
templatesというフォルダを作って、そこにhtmlを置きます。htmlは3つ用意します。
まず共有のテンプレート
<!doctype html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
{% block content %}
<!-- ここにメインコンテンツを書く -->
{% endblock %}
</body>
</html>
続いて入力フォーム
※↑で作ったlayout.htmlのbodyに埋め込まれます。
{% extends "layout.html" %}
{% block content %}
<form action="/calc" method="post">
<input type="text" name="a"> ×
<input type="text" name="b">
<input type="submit" value="計算">
</form>
{% endblock %}
最後に掛け算を表示させるhtml
{% extends "layout.html" %}
{% block content %}
<h1>答えは... {{ anser }} </h1>
{% endblock %}
、、、サボりました
実際に上で作成したhtmlを表示させるコードを書きます！
# htmlとの値の受け渡しのため、render_templateとrequestを追加でインポート
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/")
def hello():
# demo.htmlを呼び出す
return render_template('input.html', title = 'flask test')
# フォームの値を受け取って結果を表示
@app.route("/calc", methods=["post"])
def calc():
# 受け取った値を掛け算する
a = int(request.form.get("a"))
b = int(request.form.get("b"))
r = a * b
return render_template('output.html', anser = r)
# サーバーを起動
if __name__ == "__main__":
app.run(debug=True, port=5000)
サーバーを起動させる
python flask_project.py
再度、下記URLにアクセスしてみます。
http://localhost:5000/
すると、、、
表示されました！
続いて適当な数字を入力して、、、
計算ボタンをクリックすると、、、
計算結果が表示されました！！！
引き続き学習していきたいと思います。
ご指摘等ありましたら、コメントの方よろしくお願いいたします！
参考資料
https://qiita.com/zaburo/items/5091041a5afb2a7dffc8
https://qiita.com/kotayanagi/items/01e9a617571e2b9526bc
https://www.twilio.com/blog/how-to-run-a-flask-application-jp
https://www.python.ambitious-engineer.com/archives/760
https://tanuhack.com/jinja2-cheetsheet/