【PythonのWebフレームワーク Flaskをやってみた2】

はじめに
参考記事
1. まずはHelloから
2. HTMLの表示
3. CSSとJavaScriptを追加
4. Pythonの値を画面に表示
5. GET / POSTのボタンを作成
まとめ

はじめに

こんにちは、がんがんです。今回は前回に引き続きFlaskを扱っていきます。

参考記事

今回はこちらを参考にしてやっていきます。
python.zombie-hunting-club.com

1. まずはHelloから

前回同様、まずは基本のHelloの出力からやっていきます。
プログラムの中身はこんな感じです。

#  server.py
from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
	return "Hello"

if __name__ == "__main__":
	app.debug = True
	app.run(host="0.0.0.0", port=8080)

実行すると、きちんと表示できました。とりあえずはオッケーです。

2. HTMLの表示

次はHTMLを表示させていきます。こちらも前回同様です。前回よりもHTMLが簡単になってます。

#  server.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
	return render_template( 'index.html' )

if __name__ == "__main__":
	app.debug = True
	app.run(host="0.0.0.0", port=8080)

HTMLファイルはtemplatesフォルダの直下に配置します。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
	<head>
		<title></title>
	</head>
	<body>
		<h1>Hello from index.html</h1>
	</body>
</html>

こちらもしっかりと表示できました。HTMLははてなブログのときにしか使用しないので、なんか書いてて新鮮です。
f:id:gangannikki:20181107154238p:plain

3. CSSとJavaScriptを追加

今回はCSSとJavaScriptファイルも追加して色をつけていきます。JavaScriptは初めてコーディングしました。
pythonファイルは2章と同様なので割愛します。CSS、JavaScriptファイルはserver.pyがあるところにstaticフォルダを作成し、その直下に置きます。

変更したHTML、追加したCSS、JavaScriptを以下に示します。
HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
	<head>
		<link rel="stylesheet" href="{{url_for('static', filename='index.css')}}">
		<script src="{{url_for('static', filename='index.js')}}"></script>
		<title></title>
	</head>
	<body>
		<h1>Hello</h1>
		<h2 id='test'>World</h2>
	</body>
</html>

CSS

/* index.css */
h1{
	color: red;
}

JavaScript

//  index.js
window.onload = function() {
	var e = document.getElementById('test');

	e.style.color = 'blue'
}

実行結果は以下になります。h1であるHelloの色は赤に変わり、それ以外は青文字に変化しました。

f:id:gangannikki:20181107154243p:plain

4. Pythonの値を画面に表示

Pythonにはjinja2というテンプレートエンジンが存在します。チュートリアルは以下を参照ください。
qiita.com

Flaskにはデフォルトでjinja2が入っているようなので、今回はこれを試していきます。
まずは以下にpythonのコードを示します。こちらでは値を設定していきます。

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
	s = "abc"
	lis = ["a1","a2","a3"]
	dic = {"name":"John","age":24}
	bl = True

	return render_template("index.html", s=s, lis=lis, dic=dic, bl=bl)

if __name__ == "__main__":
	app.debug = True
	app.run(host="0.0.0.0", port=8080)

次にHTMLファイルを示します。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
	<head>
	<title></title>
	</head>
	<body>
			<p>{{ s }}</p>
			<hr>

			<ul>
			{% for x in lis %}
				<li>{{ x }}</li>
			{% endfor %}
			</ul>
			<hr>

			<p>{{ "name: %s age: %s" % (dic["name"], dic["age"]) }}</p>
			<hr>

			{% if bl %}
				<p>True</p>
			{% else %}
				<p>False</p>
			{% endif %}
	</body>
</html>

結果は以下のようになります。ちゃんとできてますね。

f:id:gangannikki:20181108004112p:plain

5. GET / POSTのボタンを作成

GET/POSTボタンを作成し、ボタンを押した先での出力結果を変えていきます。

python

#  server.py
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/")
def index():
	return render_template( 'index.html' )
	"""
	s = "abc"
	lis = ["a1","a2","a3"]
	dic = {"name":"John","age":24}
	bl = True

	return render_template("index.html", s=s, lis=lis, dic=dic, bl=bl)
	"""

@app.route("/test", methods=["GET", "POST"])
def test():
	if request.method == "GET":
		res = request.args.get("get_value")
	elif request.method == "POST":
		res = request.form["post_value"]

	return res

if __name__ == "__main__":
	app.debug = True
	app.run(host="0.0.0.0", port=8080)

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
	<head>
	<title></title>
	</head>
	<body>

		<form action="/test" method="get">
			<button name="get_value" value="from get">get submit</button>
		</form>

		<form action="/test" method="post">
			<button name="post_value" value="from post">post submit</button>
		</form>

	</body>
</html>