-- 目次はこちら。PythonでBINGOの「Webツール」をつくる
-- 記事作成：2019年12月、訂正：2020年6月
「Webツール」の構成を考える
前々回インフラ屋がお題として「Webツール」を開発することになったが。。
BINGOゲームの抽選機と表示器を作成することとして、「Webツール」作成用の環境を考えるから、前回はWebワークフレームのFLaskをインストールしました。
今回は、「Webツール」の構成を考えていきます。
画面構成
FlaskでWebを起動した場合、http://localhost:5000/ にアクセスする。
以下の様な構成を作る。
トップページ
｜ BINGO Webツールの説明
｜ 抽選状態の概要
｜ 各種機能へのリンク
｜
＋－ー 直近の抽選結果の表示
｜ ｜ 直近の抽選数字を大きく表示
｜ ｜
｜ ＋ 抽選 ⇒ 直近の抽選結果表示へ
｜ ＋ 過去抽選表示へ
｜ ＋ トップページへ
｜
＋－ー 過去抽選結果表示
｜ ｜ 最初から直近までの抽選数字を表示
｜ ｜
｜ ＋ 抽選 ⇒ 直近の抽選結果表示へ
｜ ＋ 直近の抽選結果の表示へ
｜ ＋ トップページへ
｜
＋－ー BINGOカード登録
｜ ｜ 登録者名＋カードを登録
｜ ｜ 登録時にカードの有効性を確認(JavaScript？)
｜ ｜ ※カードを画像認識して登録できるとBEST！
｜ ｜ 登録後⇒登録者BINGOカード表示へ
｜ ｜
｜ ＋ トップページへ
｜
＋－ー BINGOカード配布
｜ ｜ 登録ユーザ名よりBINGOカードを作成
｜ ｜ 作成後⇒登録者BINGOカード表示へ
｜ ｜
｜ ＋ トップページへ
｜
＋－ー BINGO！一覧表示
｜ ｜ 登録カードからBINGO、リーチなどの順位を表示
｜ ｜ 直近の抽選でBINGO者の表示
｜ ｜
｜ ＋ トップページへ
｜
＋－ー 登録者BINGOカード表示
｜ ｜ 登録者名のビンゴカードを表示
｜ ｜ 抽選途中の状態（当選状況）を表示（JavaScript？）
｜ ｜ 再表示で内容を更新
｜ ｜
｜ ＋ トップページへ
｜
プログラムの構成（検討中）
△は後日追加機能
error処理、ログ機能は後日
main.py
#Flask + jinja2 ＋ BINGOツール
初期設定
抽選したボールの置き場を用意する。
ビンゴゲーム状態
カード置き場（登録者名、カード情報、当選情報を記録）
状態保持
結果を保存するファイルを用意する
カードの情報を保存
共通処理
抽選したボール置き場が７５個あればBINGOは終了状態とする。
（/）トップページのりクエスト
ビンゴゲーム状態を表示
トップページのHTMLを返す
（/ball）直近の抽選結果の表示
抽選したボール置き場の最後尾の値を表示
△上記の値でビンゴしたカードの枚数
△上記の値でリーチしたカードの枚数
（/get_ball）抽選のリクエスト
ビンゴゲームの終了状態が終了のときは（/）を表示
乱数で１～７５の数字を作成
抽選したボール置き場に同じ数字があれば再度やり直し
なければ、抽選したボール置き場の最後に置く
△抽選したボール番号と、カード置き場の各カードの当選処理をする。
抽選したボール置き場が７５個あればビンゴゲーム状態を終了とする。
（/ball）を表示する
（/list_ball）過去抽選結果表示のリクエスト
抽選したボール置き場の数値と以下の表中の数値が同じものを反転色等にする
以下の並びは縦で表示する。
Ｂ： １～１５
Ｉ：１５～３０
Ｎ：３１～４５
Ｇ：４６～６０
Ｏ：６１～７５
（/card）BINGOカード登録
入力フォームを表示
検査用JavaScriptの埋め込み
（/card_input）
登録者名、カード情報をカード置き場に登録
登録後（/card_self?name=登録者名）で開く
（/card_self）
nameの値のカードを表示
抽選したボール置き場の値とカードの値が同じときは反転表示
（/list）
一覧表示をする。
登録カードからBINGO、リーチなどの順位を表示
直近の抽選でBINGO者の表示
各カードへのリンクを付ける。
次回は、BINGO「Webツール」の抽選機のみ(デザインなし)を作成する。
-- 目次はこちら。PythonでBINGOの「Webツール」をつくる