BINGO「Webツール」のビンゴカード作成部を作る

-- 目次はこちら。[PythonでBINGOの「Webツール」をつくる](https://qiita.com/wacky3/items/ab684c40c80de08b1c50)
-- 記事作成：2019年12月、修正・追記：2020年7月11日（未完）

## BINGO「Webツール」のビンゴカード作成部を作る
前回の [BINGO「Webツール」の抽選機のみ(デザインなし)を作成する。](https://qiita.com/wacky3/items/cb4de2eac011212428c6) からの続きです。

今回は以下のサイトを参考にさせていただきました。

+ [【Python入門講座】class習得➂ビンゴカードを作ろう](https://nonstop-iida- blog.com/python_class_bingocard/)
+ [Jinja2の使い方がわかるとFlaskを用いた開発がよりスマートになる](https://qiita.com/bookun/items/7ae5de21307d101b4759)
+ [はじめての Flask #2 ~POSTを受け取ろう~](https://qiita.com/nagataaaas/items/3116352da186df102d96)
+ [はじめての Flask #3 ~htmlをrenderしてみよう~](https://qiita.com/nagataaaas/items/4662237cfb7b92f0f839)



### ビンゴカードの構成
日本で一般に市販されているビンゴ(BINGO)カードは次の様な構成になっていると思います。

- ５行５桁のマス目が書いてある
- 各マス目には数字が書いてある
- 各マス目の数字は重複しない
- 中央のマス目は「Free」として既に当選とする
- B列は 1～15
- I列は16～30
- N列は31～45
- G列は46～60
- O列は61～75
- 参加する人の数を用意する。


| Ｂ | Ⅰ | Ｎ | Ｇ | Ｏ |
|:-:|:-:|:-:|:-:|:-:|
| 3 | 22  | 43 | 59 | 70 |
| 10 | 18 | 34 | 47 | 61 |
| 1 | 29 | Free | 56 | 68 |
| 15 | 23 | 31 | 46 | 72 |
| 11 | 20 | 35 | 51 | 63 |

#### ビンゴカードを作り「Webツール」とするのに必要な情報
ビンゴカードの構成を元に必要な情報をまとめると

- 誰のカードかわかる様にする。もしくは、「誰」が分かるとカードが分かる。
- 「誰」の部分は重複しないこと。
- 一人当たりカード番号が入った５×５の枠（リスト）を用意する。
- カードのデータは作成後、ゲーム終了まで変更しない。
- 抽選した結果を記録する５×５の枠（リスト）を用意する。
- BINGOしているか、いつBINGOしたか、リーチは何個かが分かるようにする。 

#### ビンゴカード情報の構造

bingo_cards と名前を付けたリストを作る(例)
bingo_cards = [
　　　[ 誰, BINGOした抽選回数, リーチの数,
　　　　[ 　　#ビンゴカードの内容 
　　　　　[ 3, 10, 15, 11,  4 ], # B列
　　　　　[22, 18, 29, 20, 30 ], # I列
　　　　　[43, 34,  0, 35, 41 ], # N列:Freeは0とする
　　　　　[59, 47, 56, 51, 61 ], # G列
　　　　　[70, 61, 68, 72, 63 ], # O列
　　　　], [　#抽選結果
　　　　　[ 0, 0, 0, 0, 0 ], # B列
　　　　　[ 0, 0, 0, 0, 0 ], # I列
　　　　　[ 0, 0, 1, 0, 0 ], # N列
　　　　　[ 0, 0, 0, 0, 0 ], # G列
　　　　　[ 0, 0, 0, 0, 0 ], # O列
　　　　]
　　　]
　　]

１：誰　＝　参加者の名前を入れる。重複禁止とする。
２：BINGOした抽選回数　＝ 最初にBINGOが完成した抽選回数を入れる。
３：リーチの数　＝　抽選する度にリーチの数を確認して更新する。
４：ビンゴカードの内容　　　　－－－＞　　　抽選結果
　　（最初決定した番号）－ー＞（抽選で当たった場合に”１”にする） 

| Ｂ | Ⅰ | Ｎ | Ｇ | Ｏ |　－－－＞　| Ｂ | Ⅰ | Ｎ | Ｇ | Ｏ |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| 3 | 22  | 43 | 59 | 70 |　| 0 | 0 | 0 | 0 | 0 |
| 10 | 18 | 34 | 47 | 61 |　| 0 | 0 | 0 | 0 | 0 |
| 1 | 29 | 0 | 56 | 68 |　| 0 | 0 | 1 | 0 | 0 |
| 15 | 23 | 31 | 46 | 72 |　| 0 | 0 | 0 | 0 | 0 |
| 11 | 20 | 35 | 51 | 63 |　| 0 | 0 | 0 | 0 | 0 |

※ここまで文章編集してソース見ましたが大変理解しにくいことが判明した。
　読みにくいソースは素人だからととはいえ修正したいと思います。
　(追記：2020/07/11)


#### まずはWeb側の環境を作成する
Pythonの周りの環境を整備します。
プログラムでは、
　＞　from flask import Flask
を
　＞　from flask import Flask, render_template, request
に変更して、テンプレートのHTMLファイルを送信できるようにするのと、フォームから送信されたデータを扱えるようにします。

#### BINGOカードの入力画面
card.html を作成して、名前と自分が持っているカードの番号を入力するフォームを作成します。
（ファイルは、実行フォルダ/templates/card.html）
今回はWebツール側でビンゴカードを作りますが、手持ちのカードでも入力できるようにしておきます。
＝＝　送信ボタンの値で切り替えることにします。
１．お名前：に名前を入力する。
　「カードを作る」ボタンをクリックするとPythonで自動作成。
　24マス全てを入力後・確認後に「登録する」をクリックすると登録する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516359/d0185337-dd06-d652-565f-f9fc1eb091ea.png)
　●サンプル：名前をいれて「カードを作る」をクリックした後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516359/6891a05e-c406-421f-c5ce-c40b322c8510.png)
　●「登録」をクリックする。
　　登録する前に各数値を変更することも可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516359/bed938e3-e123-1ae9-9a38-1f42eb7149f1.png)

#### （ここから先は未編集）


-- 目次はこちら。[PythonでBINGOの「Webツール」をつくる](https://qiita.com/wacky3/items/ab684c40c80de08b1c50)