【Flask入門】Python初心者がマインスイーパーを作ってみる⑤　～イメージファイルを取り込む〜

こんにちは、Amagoです。

進捗があったのでブログを書きます。

前回まで

前回は、cssを読み込んで、セルのレイアウトを整えました。
見ていないかたは、こちらからお願いします。
hamaguchi-amago.hatenablog.com

今回はサーバー側から受け取った値を判定して、爆弾の画像を表示することに加えて、数字のデザイン設定しました。

爆弾を書いてみる

まずは、どのパソコンにも標準搭載されているペイントを使って爆弾の画像ファイルを作りました。
こんな感じですね。

f:id:hamaguchi_amago:20190525103637j:plain

フォルダ構成

先ほど作成した、爆弾の画像『bomb.jpg』を『/static/images/』に格納します。

Minesweeper
　├── Minesweeper.py
　├── templates
　│ 　　└── index.html
　└── static
　　　└── css
　　　│　　└──style.css
　　　└── images
　　　　　 └──bomb.jpg

各ファイルの修正

Pythonの修正

次は、cell変数に値を設定してあげましょう。
周りに爆弾がいくつ設置されているかの数字１～８を設定、
まぁ７とか８はめったに使わないと思いますが。。。。
それと爆弾の『B』を設定します。

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

@app.route("/")
def hello():
	cell = [["1", "2", "3", "4", "5", "6", "7", "8",""],
			["", "B", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", "", ""],
			["", "", "", "", "", "", "", "", ""],]
	return render_template("index.html", cell = cell)

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

htmlの修正

次は、htmlの修正です。
ソースをそのまま張るとインデントがずれてしまう。。。

修正箇所は12行目から18行目あたりの中側のループですね。colがcell変数の一個一個の要素になります。

if文で『B』意外だったら、ボタンのテキストにcolの値を設定します。後でcssを設定するために『val-〇』というクラスを設定します。

『B』の場合は『input』タグを使って爆弾の画像を読み込みます。『src』に爆弾を格納したパスを指定してあげます。

[index.html]

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="/static/css/style.css">
		<title>Minesweeper</title>
	</head>
	<body>
		<table>
		{% for row in cell %}
			<tr>
			{% for col in row %}
				{% if col != 'B' %}
 					<td><button class="cell val-{{col}}">{{ col }}</button></td>
				{% else %}
					<td><input type="image" src="/static/images/bomb.jpg" class="cell" ></td>
				{% endif %}
			{% endfor %}
			</tr>
		{% endfor %}
		</table>
	</body>
</html>

cssの内容

数字の色を太字で色分けするために、cellクラスで『font-weight: bold;』を設定します。
後は、val-〇に適当に色を設定してあげます。

[style.css]

@charset 'utf-8';
table {
  border-spacing: 5px 0px;
}

.cell {
	height: 50px;
	width: 50px;
	background: #C0C0C0;
	font-weight: bold;
}

.val-1{
	color: #0000FF;
}

.val-2{
	color: #008000;
}

.val-3{
	color: #FF0000;
}

.val-4{
	color: #800080;
}

.val-5{
	color: #800000;
}

.val-6{
	color: #808000;
}

.val-7{
	color: #550000;
}