amagoのエンジニアブログ

IT関連のネタを中心に記事を書いてます。

【Flask入門】Python初心者がマインスイーパーを作ってみる⑥ ~ランダムに爆弾を配置する〜

こんにちは、Amagoです。

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

前回まで

前回は、爆弾と数字のレイアウトの設定をおこないました。
見ていないかたは、こちらからお願いします。
hamaguchi-amago.hatenablog.com


今回はランダムに爆弾を設定する関数を作ってみました。

Pythonの修正

pythonファイルの修正はこんな感じです。後程修正箇所を記述します。
セルの作成用の関数はファイルを分けようかなと思いましたが、マインスイーパーのアプリケーション自体大きくないのでまとめて記述してあります。

[Minesweeper.py]

from flask import Flask, render_template
import random

def create_cell():
	BOMB_NUMBER = 10
	cell =  [['' for i in range(9)] for j in range(9)]
	
	# 爆弾をランダムに配置
	index = 0
	while index < BOMB_NUMBER:
		row = random.randint(0, 8)
		col = random.randint(0, 8)
		value = cell[row][col]
		if	value != 'B':
			cell[row][col] = 'B'
			index += 1
	return cell

app = Flask(__name__)

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

if __name__ == "__main__":
	app.run( debug = True )
関数を作る

今まではcell変数に二次元配列を直接設定してましたが、create_cell関数を作成しました。関数について細かく見ていきます。

def create_cell():
	BOMB_NUMBER = 10
	cell =  [['' for i in range(9)] for j in range(9)]
	
	# 爆弾をランダムに配置
	index = 0
	while index < BOMB_NUMBER:
		row = random.randint(0, 8)
		col = random.randint(0, 8)
		value = cell[row][col]
		if	value != 'B':
			cell[row][col] = 'B'
			index += 1
	return cell

①cellの生成
 まず、cell変数に二次元配列を格納します。内側のforで文字列の配列を9個作っています。行にあたる部分ですね。そして、外側のforで列を作ります。この時点では、なにも値を設定していないので、すべて空文字が設定されています。

②爆弾を10回設置するまでループ
 while文でindexが10より大きくなるまでループさせています。爆弾を設置するときにindexを加算してあげます。

③行と列にランダムな値を設定する
 randint関数はrandomライブラリをインポートして使います。下の記述では0から8のランダムの値を生成しています。

④爆弾を設定するか判定する
 if文の前の行でランダムに選択したセルの値を取得します。そして、セルの値がB以外か判定します。

もし、B以外の場合はランダムに選択したセルに爆弾を定義する値の"B"を設定し、indexの値を1追加します。
Bの場合は次のループでもう一度ランダムにセルを選択して判定を行います。

やがて、10回爆弾を設定し終えるとループから抜けて、呼び出し元に爆弾を設定した二次元配列を渡します。

実行結果・次回目標

実行結果はこんな感じです。
ランダムに爆弾が設定されるようになりました。
f:id:hamaguchi_amago:20190525162919g:plain

次回は、爆弾の周りの数字を設定する処理について書いていこうかと思います。
最後まで読んでくださって、ありがとうございました。

【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変数に値を設定してあげましょう。
周りに爆弾がいくつ設置されているかの数字1~8を設定、
まぁ7とか8はめったに使わないと思いますが。。。。
それと爆弾の『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;
}

実行結果・次回目標

生成されたhtmlを見てみましょう。
表示しているのは一部ですが、ボタンのテキストとクラスが動的に設定されていますね。
また、inputも正しく設定されました。
f:id:hamaguchi_amago:20190525123239j:plain

実行結果はこんな感じです。
ちゃんと数字が色分けされていて、爆弾も表示されています。
f:id:hamaguchi_amago:20190525115404j:plain

次回はランダムに爆弾を生成する処理を書いてみようかと思います。
最後まで読んでくださって、ありがとうございました。

【Flask入門】Python初心者がマインスイーパーを作ってみる④ ~cssを取りこむ〜

こんにちは、Amagoです。

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

前回まで

前回は、9×9のボタンを表示するところまで実装しました。
見ていないかたは、こちらからお願いします。
hamaguchi-amago.hatenablog.com


今回はcssを取り込んでボタンのレイアウトを整えていきます。
cssの取り込み方法は以下の記事を参考に作成しました。
qiita.com

フォルダ構成

『style.css』を以下のフォルダに配置します。余談ですが、ディレクトリ構成の記号が分からなかったのでこちらを参考にしました。
ディレクトリ構成図を書くときに便利な記号 - Qiita

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

htmlの修正

cssは、linkを使って読み込ませます。
また、buttonに『cell』というclassを設定しておきます。

[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 %}
 				<td><button class="cell"></button></td>
			{% endfor %}
			</tr>
		{% endfor %}
		</table>
	</body>
</html>

cssの内容

cssは、このように書きます。
tableのstyleを追加したのは横線の隙間が空いてしまったので調整しておきました。

[style.css]

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

.cell {
	height: 50px;
	width: 50px;
	background: #C0C0C0;
}

実行結果・次回目標

実行結果はこんな感じです。

f:id:hamaguchi_amago:20190524011000j:plain

次回は爆弾のアイコンを表示してみようかと思います。
最後まで読んでくださって、ありがとうございました。

【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>

実行結果

実行結果は、こんなこんな感じになります。
まだ、レイアウトの設定がされていませんが、ちゃんと9×9のボタンが作られました。

f:id:hamaguchi_amago:20190523223750j:plain
実行結果

次回目標

cssを取り込んでボタンをいい感じに表示する。

【Flask入門】Python初心者がマインスイーパーを作ってみる② ~『Hello world』を表示する~

こんにちは、Amagoです。

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

前回の記事を見ていないかたはこちらからお願いします。
hamaguchi-amago.hatenablog.com

前回の目標は『Hello world』を表示するところまでです。こちらは問題なく達成できました。スクリプト言語ってとっかかりやすくてとても良い。
f:id:hamaguchi_amago:20190521235822j:plain

というか、インストールから『Hello world』まではやり方が書いてあった。
www.pytry3g.com

『render_template』を使ってみる

思ったより順調だったので、もう少し開発を進めてみました。

次は、盤面ですかね、9×9のセルを作ってみようかと思います。
要素は何が良いのだろうか。。。

buttonですか?divですか?細かいことは気にせず『button』にしようと思います。

盤面を作るときは、セルを動的に生成したほうがよさそうです。
一旦は、Pythonで動的に値を設定してブラウザに表示されることを確認します。
また、Flaskには標準でJinja2というテンプレートエンジンが付いているので、それを使って書いていこうかと思います。やっとフレームワークを使ってる感が出てきましたね。

ここで少しハマったのでメモしておこうと思います。
 ・『render_template』が認識されない。
 『Minesweeper.py』と『index.html』を以下のように配置していたのですが。

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


これがダメだったみたいです。どうやらhtmlファイルは『templates』の配下に置かなければならないようで、サーバーエラーが出力されていました。

raise TemplateNotFound(template)

画像はありませんが、以下のフォルダ構成に直したところ正しく動くことが確認できました。

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

参考サイト
Flaskの簡単な使い方 - Qiita

次回目標

 cssの読み込みと9×9のセルを表示するところまで。