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

はじめに

こんにちは、がんがんです。今回は前回に引き続きFlaskを扱っていきます。
前回記事はこちらです。
gangannikki.hatenadiary.jp

参考記事

今回はこちらを参考にしてやっていきます。
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. CSSJavaScriptを追加

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

変更したHTML、追加したCSSJavaScriptを以下に示します。
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>

出力結果は以下のようになります。


f:id:gangannikki:20181108010252p:plain

しっかりとボタンが出来ています。get submitを押してみます。


f:id:gangannikki:20181108010446p:plain

しっかりとvalueの値が表示されました。

post submitも押してみます。

f:id:gangannikki:20181108010640p:plain

まとめ

今回は
[Python] Flask 入門 - ゾンビでもわかるPythonプログラミング
を試していきました。

ボタンを作ったりするのが楽しかったので、いろいろいじってみたいです。
グラフィック系のものと組み合わせていろいろ試したりできるかもですね。