草野球速報アプリをつくった話

こんにちは！TNDのKFugaku(フガク)です！

今回は、草野球を誰でも速報できるアプリ(w-baseball)を作成したのでその制作過程をご紹介します。

アプリ制作の経緯

　先日、高校時代の友達を複数人集めて広い公園の原っぱで草野球をして遊ぶ機会がありました。
　その際、スコアボードがなかったので、リンクを作成してスコアボードを共有できるアプリが欲しいと思い制作しました。

　相棒のCodex君と相談しながら詰めていきました。

　イニングごとのスコアが表示されるだけのボードでは面白くないので、プロ野球の一球速報のような、投手・打者の成績や、現在の走者の状況、打率等のデータ、といった詳細な情報を確認できるアプリを目指しました。

　その際重要なのがリアルタイムでのデータ更新・反映！最終的に以下のようなシステム構成にしました。

　画面更新のきっかけをRealtimeから通知して、画面の方はデータベースから最新状態を取り直しています。

　アプリを開くと管理者ログインと閲覧のみを選べます。管理者はルームを作成し、そのルーム内で試合を作成できます。

　管理者ログインにはSupabase Authenticationを使い、メールアドレスとパスワードで認証しています。データベース側でもルームの所有者を確認し、他の人の試合を変更できないようにしました。

　閲覧者はルーム番号とパスワード、または招待リンクで入室し、試合状況をリアルタイムで確認できます。

　試合の状況の更新は管理者のみ行えます。プロ野球では一球ごとに速報しますが、さすがに一球ごとにポチポチ記録するのは面倒なので打席結果を記録して更新する感じにしました。

　打席結果を入力すると、スコアや走者、試合経過が更新され、閲覧者の画面にも反映されます。

　ここで気をつけたのが、データを保存するときの整合性です。スコアと試合経過を別々に保存すると、途中で通信が失敗した際に内容が食い違う可能性があります。そのため、関連するデータはデータベース側でまとめて保存するようにしました。

　また、別の端末から同時に編集された場合には、古い情報で上書きしない仕組みも入れています。速報を届ける速さと、記録の正しさの両方を意識しました。

　ここまで最新のUIをお見せしてきましたが、実は最初は白を基調とした、シンプルな画面でした。

　※選手の名前はすべてAIにテストデータとして作らせた架空のものです。

　そこから、ナイターの球場や電光掲示板をイメージしたデザインに変更しました。スコアを大きく表示し、現在の打者・投手や守備位置もひと目で分かるようにしています。ぜひ比較してみてください！

　パソコンでは打順とグラウンドを横に並べ、スマホでは縦に配置するなど、画面の大きさに合わせた調整も行いました。

　スコアボードが欲しい、というきっかけから始まりましたが、最終的には選手の成績や試合経過も確認できるアプリになりました。草野球にも、ちょっとプロ野球っぽい観戦体験を持ち込めたらと思います！

　事前にたくさんテストしたのですが草野球当日に実際に使ってみたらいろいろ問題がでてきました。その中で一番重大な問題に感じたのはアプリとしての柔軟性です。

　ある一打席を入力し忘れてそれに気づかず入力していってしまった際、これを修正するのがとても大変でした。修正できるよう、操作の戻るボタンは作成していたのですが、気づくのが遅いとかなり前の状態まで戻さなければならない。ここに改善点があると感じました。

　また、当日2時間ほど使用したのち、Supabaseの内部にトラブルが生じて使えなくなってしまいました(現在原因調べてます)。やはりこのような不測の事態は起こりうるのだなーと勉強になりました。

　問題点はこんな感じで多々ありましたがこのアプリのおかげでかなり草野球のモチベーションが上がりました！このアプリの修正はもちろん、他にも様々なアプリを今後もつくっていこうと思います！

　ここまで読んでくださりありがとうございました！