【Flask入門】Python初心者がマインスイーパーを作ってみる③　～ボタンを表示する～

こんにちは、Amagoです。

前回の目標は達成できませんでしたが、少し進捗があったので記事を書きます。
今回は9×9のボタンを表示するところまで実装できました。
cssの取り込みはボリューム的にまた今度にします。

前回の記事を見てない方はこちらから
hamaguchi-amago.hatenablog.com

フォルダ構成

Minesweeper
├── Minesweeper.py
└── templates
        └── index.html

コントローラー側

コントローラー側っていうんでしょうか。。。Pythonのコードはこんな感じで書いてみました。9×9の二次元配列です。もっときれいに書けると思うけど一旦はベタで書いていきます。

あとで、cellに爆弾と周りに設置された爆弾の数を設定します。これはまたの機会に関数を作りたいと思います。

次に生成した空っぽの二次元配列を『index.html』に渡します。

[Minesweeper.py]

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello():
	cell = [["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],
		   ["", "", "", "", "", "", "", "", ""],]
	return render_template("index.html", cell = cell)

if __name__ == "__main__":
	app.run( debug = True )

ビュー側

こちらはビューです。コントローラーで渡した二次元配列のcellを受け取って、buttonを生成しています。外側のループ『{% for row in cell %}』でtableの行(tr)、中側のループ『{% for col in row %}』で列(td)を作ります。

[index.html]

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Minesweeper</title>
	</head>
	<body>
		<table>
		{% for row in cell %}
		    <tr>
			{% for col in row %}
 				<td><button></button></td>
			{% endfor %}
			</tr>
		{% endfor %}
		</table>
	</body>
</html>