作成日：2024年12月23日
FileMakerでビンゴマシンを作ろう
どうも、にゃん太です
もうすぐクリスマスなので、クリスマスパーティーで使用できるビンゴゲームアプリを作成してみました
今回のメモでは、ビンゴゲームアプリの作成手順を書いていきます
ビンゴゲームとは
一応、ビンゴゲームのルールを簡単に説明します
- 5×5の25マスに番号が書かれたカードを配布
- マス目には1～75の数字のいづれかを書かれている（重複なし）
- ゲーム運営が1～75までの数字から無作為に選んでいく
- 選ばれた数字マスをチェックしていき、タテ・ヨコ・ナナメのいづれかが一列に揃ったら「ビンゴ」
ビンゴゲームの設計
ビンゴゲームの設計を考えてみましょう
- 複数人で遊ぶゲームですので、サーバでの管理する
- 配布するカードは起動時に自動で番号を割り振る
- 番号が気に入らない時はカードの再選択を許可
- 一度カードを決定したら変更は不可
- 途中参加は不可
- 運営の処理により、番号は乱数で残り番号から選択
- 番号が選ばれたら、プレイヤーが自分でチェック
- 自動チェックボタンも用意
- 一列に揃ったら、ビンゴの表示
といった感じですかね
テーブル構造
では次にテーブル構造を見てみましょう
- 運営が選出した番号を記録するテーブル
- プレイヤーに配布したカードとその選出状況を記録するテーブル
- 未選出の番号を記録するテーブル
くらいあれば良さそうです
下図の様によういします
画面レイアウト
画面レイアウトを作成します
まずは必要な画面をピックアップしましょう
- 起動時画面
- プレイヤー用：カード画面
- プレイヤー用：BINGO画面
- プレイヤー用：既出番号閲覧画面
- 運営用：番号選出画面
必要最小限ではありますが、これをベースに設計を考えていきます
起動時画面
起動時に表示される画面です
プレイヤー向けにカード画面への移行ボタンと終了ボタンを配置します
iPhone用とiPad用の画面を用意しておきます
また、iPad用には運営用画面へ移動するボタンも用意します
カード選択画面
ユーザー用の配布されたカードを表示する画面です
BINGOゲームへ進むボタンと共に、番号が気に入らない場合にカードを再取得する機能も用意しました
BINGO画面
BINGOゲームを行う画面です
現在までに選出された番号の数の表示と共に、選出番号一覧が見られる画面を表示するためのボタンを用意します
選出された番号のチェックには自動で行っても良いのですが、遊んでいる感じを出すために自分で番号をタップして番号チェックを行う方法で行きたいと思います
但し、面倒がる人用に一括チェック用のボタンも用意しておきます
なお、チェックマークは非表示機能を使ってチェック後に表示される様にします
尚、BINGOした場合にこの画面でBINGOしたことを示す画像も表示します
非表示の機能を使用して制御することにしましょう
既出番号閲覧画面
これまでに出た番号を一覧で見られる画面です
運営画面にも表示予定ですが、手元でも見られるようにします
条件付書式を使用して、選出番号は背景色が変わるようにします
番号選出画面
運営用の番号選出する画面です
こちらはiPad用画面のみとします
条件付書式を使用して、選出番号は背景色が変わるようにします
スクリプト
では最後に、動作させるためのスクリプトを準備していきましょう
起動時処理
iPhone用とiPad用のレイアウトを用意しましたので、起動時に振り分けるスクリプトを実行します
起動時処理
# ################################################## # 起動時処理 # ################################################## # グローバル値を初期化 フィールド設定 [numbers::決定; ""] フィールド設定 [numbers::番号表示; ""] # iPhoneかそれ以外かでレイアウト変更 If [Get ( デバイス ) = 4] レイアウト切り替え [「起動画面｜iPhone」(bingo); アニメーション:なし] Else レイアウト切り替え [「起動画面｜iPad」(bingo); アニメーション:なし] End If ツールバーの表示切り替え [レコードの編集ツールバーを含める; 隠す] メニューバーの表示切り替え [ロック:オフ; 隠す] ウインドウの調整 [収まるようにサイズ変更]
カードの配布処理
起動時画面のはじめるボタンに割り当てる処理です
新しいレコードを作成し、番号を乱数で配置していきます
はじめる
# ################################################## # BINGOの開始 # ################################################## ウインドウの固定 If [bingo::進行 > 0] # 既に開始している場合はカード選択できない Else # カードの作成処理 レイアウト切り替え [Get ( レイアウト番号 ) + 1; アニメーション:なし] 新規レコード/検索条件 スクリプト実行 [指定:一覧から;「番号割当」; 引数: ] End If
番号割当
# ################################################## # BINGOカードに番号を割り当てる # ################################################## # 現在のレイアウトを記憶 変数を設定 [$layout; 値: Get ( レイアウト番号 )] # １～７５の番号を対象にする レイアウト切り替え [「numbers」(numbers); アニメーション:なし] 全レコードを表示 変数を設定 [$i; 値: 1] Loop If [$i = 13] # 13番目はFreeスペースなのでスキップ Else # 残り番号からランダムで選出 レイアウト切り替え [「numbers」(numbers); アニメーション:なし] 変数を設定 [$targetCount; 値: Get ( 対象レコード数 )] 変数を設定 [$line; 値: Int ( Random * ( $targetCount - 1 ) ) + 1] レコード/検索条件/ページへ移動 [ダイアログあり:オフ; $line] 変数を設定 [$val; 値: numbers::番号] レコードを対象外に レイアウト切り替え [$layout; アニメーション:なし] フィールド設定 [card::番号[$i]; $val] End If 変数を設定 [$i; 値: $i + 1] Exit Loop If [$i > 25] End Loop
カードの再配布処理
カード選択画面のカード再発行ボタンに割り当てる処理です
現在のカード番号を置き換えます
この処理は先ほどの「番号割当」を使用します
カードの承認
カード選択画面のこのカードを承認ボタンに割り当てる処理です
これは、単一ステップで実行します
レイアウト切り替え [Get ( レイアウト番号 ) + 1; アニメーション:なし]
既出番号の一覧表示
BINGO画面の番号一覧ボタンに割り当てる処理です
既出番号一覧画面をカードウインドウで表示させます
既出番号閲覧
# ################################################## # 既出番号閲覧画面をカードで表示 # ################################################## If [PatternCount ( Get ( レイアウト名 ): "iPhone" )] 新規ウインドウ [スタイル: カード; 使用するレイアウト:「既出番号閲覧画面｜iPhone」(bingo)] Else 新規ウインドウ [スタイル: カード; 使用するレイアウト:「既出番号閲覧画面｜iPad」(bingo)] End If 全レコードを表示
番号チェック
BINGO画面の各番号および番号自動チェックボタンに割り当てる処理です
指定した番号が既に出ていれば、チェックマークを表示させます
また、その結果番号が揃っていればBINGOしたことを示す画像を表示させます
番号チェック
# ################################################## # カード番号の既出チェック # ################################################## 変数を設定 [$param; 値: Get ( スクリプト引数 )] If [Exact ( $param; "all" )] 変数を設定 [$i; 値: 1] Loop スクリプト実行 [指定:一覧から;「既出判定」; 引数: $i] 変数を設定 [$i; 値: $i + 1] Exit Loop If [$i > 25] End Loop Else スクリプト実行 [指定:一覧から;「既出判定」; 引数: $param] End If スクリプト実行 [指定:一覧から;「BINGO判定」; 引数: ] ウインドウ内容の再表示 []
既出判定
# ################################################## # 指定した番号が既出の番号かを判定する # ################################################## 変数を設定 [$param; 値: Get ( スクリプト引数 )] 変数を設定 [$val; 値: card::番号[$param]] If [not Isempty ( bingo::番号判定[$val] )] フィールド設定 [card::判定[$param]; 1] End If
BINGO判定
# ################################################## # BINGOしているかを判定する # ################################################## If [Exact ( card::判定[1] & card::判定[2] & card::判定[3] & card::判定[4] & card::判定[5]; "11111" )] # １行目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[6] & card::判定[7] & card::判定[8] & card::判定[9] & card::判定[10]; "11111" )] # ２行目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[11] & card::判定[12] & card::判定[14] & card::判定[15]; "1111" )] # ３行目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[16] & card::判定[17] & card::判定[18] & card::判定[19] & card::判定[20]; "11111" )] # ４行目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[21] & card::判定[22] & card::判定[23] & card::判定[24] & card::判定[25]; "11111" )] # ５行目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[1] & card::判定[6] & card::判定[11] & card::判定[16] & card::判定[21]; "11111" )] # １列目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[2] & card::判定[7] & card::判定[12] & card::判定[17] & card::判定[22]; "11111" )] # ２列目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[3] & card::判定[8] & card::判定[18] & card::判定[23]; "1111" )] # ３列目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[4] & card::判定[9] & card::判定[14] & card::判定[19] & card::判定[24]; "11111" )] # ４列目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[5] & card::判定[10] & card::判定[15] & card::判定[20] & card::判定[25]; "11111" )] # ５列目が揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[1] & card::判定[7] & card::判定[19] & card::判定[25]; "1111" )] # ななめが揃っている場合 フィールド設定 [card::BINGO; 1] Else If [Exact ( card::判定[5] & card::判定[9] & card::判定[17] & card::判定[21]; "1111" )] # ななめが揃っている場合 フィールド設定 [card::BINGO; 1] End If
運営画面へ移動
起動画面のギアマークのボタンに割り当てる処理です
パスワードで移動を制御します
運営確認
# ################################################## # 運営画面へ移動 # ################################################## ウインドウの固定 カスタムダイアログを表示 ["パスワードを入力"; $pw] If [Exact ($pw; "123" )] # BINGO進行の初期化 フィールド設定 [bingo::進行; 0] 変数を設定 [$i; 値: 1] Loop フィールド設定 [bingo::番号判定[$i]]; "" 変数を設定 [$i; 値: $i + 1] Exit Loop If [$i > 75] End Loop レイアウト切り替え [「運営画面｜iPad」(numbers); アニメーション:なし] 全レコードを表示 対象外のみを表示 End If
番号の選出
運営画面の番号を選出するボタンに割り当てる処理です
未選出番号からランダムで選出します
また、onTimerスクリプトを設定して演出エフェクトを用意します
番号選出
# ################################################## # 残り番号から次の番号を選ぶ # ################################################## # 初回のみ、全番号を有効にする If [Get ( 対象レコード数 ) = 0] 全レコードを表示 レコード/検索条件/ ページへ移動 [最初の] End If # 番号確定フラグの解除 フィールド設定 [numbers::決定; ""] # 番号選出の演出制御用変数を初期化 変数を設定 [$$i; 値: 0] レコード/検索条件/ ページへ移動 [最初の] 変数を設定 [$$numbers; 値: ""] Loop 変数を設定 [$$numbers: 値: $$numbers & numbers::番号 & ¶] レコード/検索条件/ ページへ移動 [次の; 最後まできたら終了:オン] End Loop # 番号選出の演出処理を開始 OnTimerスクリプトをインストール [「timer_番号選出」; 間隔: .1]
timer_番号選出
# ################################################## # 残り番号から次の番号を選ぶ（onTimer処理） # ################################################## 変数を設定 [$$i; 値: $$i + 1] 変数を設定 [$targetCount; 値: Get ( 対象レコード数 )] 変数を設定 [$targetLine; 値: Int ( Random * ( $targetCount - 1 ) ) + 1] 変数を設定 [$number; 値: GetValue ( $$numbers; $targetLine )] フィールド設定 [numbers::番号表示; $number] # 時間経過による処理 If [$$i = 1] # ２秒経過で、番号回転速度を減少させる OnTimerスクリプトをインストール [「timer_番号選出」; 間隔: .3] Else If [$$i >= 30] # ４秒経過で、番号確定 # 対象の番号を対象外にする レコード/検索条件/ページへ移動 [ダイアログあり:オフ; $targetLine] レコードを対象外に # 番号選出フラグ フィールド設定 [bingo::番号判定[$number]; 1] フィールド設定 [bingo::進行; bingo::進行 + 1] フィールド設定 [numbers::決定; 1] レコード/検索条件確定 [ダイアログあり:オフ] OnTimerスクリプトをインストール [] End If
これらのスクリプトを割り当てたら完成です
動作確認
サーバにアップロードして動作確認してみましたが、処理の遅延もなく問題なさそうです
音が鳴らないのが寂しいですが、サーバから音声を鳴らすと遅延して鳴るなど上手くいかないので諦めます
サンプルファイル
これでBINGOゲームアプリは完成です
試作品はこちらからダウンロードできますので、ご興味がありましたらどうぞ
以上で今日のメモ書きは終了です
内容はいかがでしたか？
もしご意見やご要望、誤りの指摘などありましたら、下記フォームよりお気軽にご連絡ください