スコアブックアプリを作った話

Transcript

1. スコアブックアプリを 作った話 PIZZA_JP #39 2021.3.19
2. 目次 1. スコアブックアプリとは 2. アプリでできること 3. 技術的な構成 4. 作ろうとした経緯 5. アルファ版リリース後の出来事 6. 想定と違ったこと 7. 得られた知見 a. RNWebを使うメリット・デメリット 8. これからやってみたいこと
3. スコアブックアプリとは 走者が走らない野球盤的な競技 (キャップ野球、ウィッフルボール、ピンポン野球) 向けのスコアブックアプリ(WEBアプリ)。 https://cap-scorebook.com • 一球速報ができる • 非公開試合モード • 成績を自動集計(自責点除く)
4. アプリでできること • 非ログイン時(閲覧モード)
 ◦ 試合結果(内訳・要約)閲覧
 ◦ 個人/チーム/リーグ成績閲覧
 ◦ 投球/打撃分析
 • ログイン時(入力モード)
 ◦ チーム新規作成
 ◦ 選手新規作成
 ◦ 試合新規作成
 ◦ スターティングメンバー設定
 ◦ 結果入力
 ▪ 1球ごと入力
 ▪ 1打席ごと入力
 ◦ 自責点・勝敗S入力
5. 技術的な構成 • フロントエンド ◦ Next.js ◦ Firebase ◦ Netlify ◦ React Native Web • サーバサイド ◦ NodeJS ◦ MySQL ◦ Docker-Compose
6. 作ろうとした経緯(需要駆動開発) 2020年10月 関東のキャップ野球仲間から「いいスコア入力アプリないですか？」と聞かれる 10月末までに1打席ごとに入力できる Webアプリは完成　 ⇨　うまく活用できずに頓挫 2020年11月末 関西のキャップ野球仲間が iOSでも動くアプリが欲しい ...という話をしているのを聞く。 当時推奨されているアプリは Android専用(スタンドアローン)だった。 関東のリーグ戦の結果を踏まえて 投球分析したいという声があり投球分析機能の導入を考える ⇨RNアプリ(Android/iOS)を想定していたが、リロードができないところで WEBアプリに再度舵を切り直す。 RNWebの導入を決める。 2020年12月30日 アルファ版をリリース。
7. アルファ版リリース後の出来事 2021年1月
 • イニングの先頭に飛ぶ機能(要望)
 • ダブルプレー対応(野球BAN)
 • 振り逃げ対応(新ルール)
 • (複数人で編集できる)編集許可QRコード(発行・承認)
 • CSVダウンロード機能(要望)
 • googleアカウントログイン対応
 • 関東キャップリーグにてスコア入力アプリとして正式採用が決定(しばらく実験期間)
 2021年2月
 • 非公開試合モードの実装(要望)
 • 2/11の大会で試用されるも、iPhoneだけ動かないバグ発覚(非同期の記述ミス)

8. 想定と違ったこと カスタムフックの実行タイミング 試合進行・自動集計ロジックを全てフロント側に寄せているが、カスタムフックの実行 (計算終了)タイミ ングによって意図しない動作になってしまうパターンが多発した。 iPhoneだけ動作しない不具合 原因は非同期処理が意図したように動いていなかったこと。 iPhone以外の端末はそれほどスペックが高くないためか、誤ったコードでも意図したように動作してお り、コード通りに動作した iPhoneだけが動かないという不具合が発生した。 そのため、原因究明に難航して 2/11の失敗を引き起こした。
9. React Native Webを使うメリット・デメリット • メリット ◦ 複雑なコーディングなしでモバイル用のコンポーネントが使える ◦ RNアプリ化するときにコンポーネントを移植できる • デメリット ◦ インラインCSSで設定できる項目が一般的なWEBよりも少ない ⇨表現力の低下 ◦ クラス名が動的に生成されるので(おそらく)外部CSSが使えない 表現力が必要な部分は一般的なWebコンポーネント(divなど)を混ぜて対処した。 　⇨　ネイティブアプリに移植する予定がないため
10. これからやってみたいこと・やっていること • スターティングメンバーを入力するときに(混成チームを想定しているため) 全選手から選択できるようにしている ⇨通常のPickerだと文字情報だけで大量の選手から探す必要がある 3カラムにする＋チームアイコンを表示することで視認性を上げる
11. これからやってみたいこと・やっていること • 実際の試合に投入してもらって、リアルタイム入力(特に一球ずつ)に 耐えうるかどうかの実験 • ユーザビリティの向上 • アプリの普及 • クソコードリファクタリング(笑) • 信頼性向上のための自動テスト