Zenn
Open9

蓋野球スコア入力アプリ進捗

Next.js
React
React Native For Web
ピン留めされたアイテム
koshienkoshien


蓋野球スコア入力アプリ概要
https://cap-scoresheet.netlify.app

開発環境

  • NextJS(static export)
  • Netlify
  • 検証機: Pixel4a(Android)/12mini(iOS)/PC
  • サーバ側: NodeJS
  • DB: MySQL
  • Docker-compose
  • ReactNative For Web

webアプリ

  • firebaseログイン(twitter)
  • チーム新規登録画面
  • 選手新規登録画面
  • スタメン設定画面
  • 試合結果画面
    • 代打を含めた結果画面
    • 試合成績集計
      • 打撃成績
      • 投手成績
    • 最新のアウトカウント
    • 最新の走者
    • 裏の攻撃が入力されないと表の得点が確定しない不具合
  • 打席画面
    • 投手・捕手視点切り替え
    • その打席でのアウトカウント
    • その打席での走者
    • パスボール/ワイルドピッチ実装
      • 1球ごとに球種・コースを入力できるモード
      • 1球ごとにWP/PBで進塁できるようにする
      • 打席結果入力モード
    • 代打・投手交代機能
    • 次の打者へ回すロジック
      • チーム内
      • 攻守交代
    • スコア訂正機能
  • 共同編集機能(パスワードorQRコード)
  • 配球分析モード

API

  • firebaseログイン(twitter)
  • スタメン保存
  • 1球ごとに球種・コース(追加実装)
  • 打席結果入力(要改修)
  • 選手新規登録
  • チーム新規登録
  • 共同編集機能(パスワードorQRコード)
  • 配球分析(追加実装)
  • 成績算出(追加実装)

開発の経緯

10/21 蓋世・エスト監督からスコアを共有できるアプリはないか聞かれる
10/25 1打席ごとの入力ができるWEBアプリの仮実装が終わる
10/30 スコアの活用方法思い付かずに実装中断
11/26

よこっぺさんの一言で中断してたスコアアプリの開発のやる気が復活する。
11/28 リーグ戦の帰りにkamiさんが「投球分析したいなぁ」と言う話をする。
11/29〜
ある程度実装が終わっていたアプリに1球ごとのコース分析機能を拡張したアプリに着手。
当初はReactNativeを使ったandroid/iOSアプリを想定。
12/1 ネイティブアプリから得意なWEBアプリへの舵の切り直しを宣言。
12/4 ReactNative For Webの採用を決定。
12/7 Hirooookiさんから投手視点への切り替えが欲しいとの要望を受ける

12/11 配球分析機能の実装が完了
12/14 いらすとやからのデザイン変更
12/21 テストコードの実装に着手

koshienkoshien

ReactNative + Expoにfirebase/twitterログインを導入
Twitter APIをExpoでデタッチせず、かつAuth0を使わず、javascriptのみで叩く

import twitter, { TWLoginButton } from "react-native-simple-twitter";

useEffect(() => {
    const f = async () => {
      twitter.setConsumerKey(TWITTER_CONSUMER_KEY, TWITTER_CONSUMER_SECRET);
      const user = await twitter.get("account/verify_credentials.json", {
        include_entities: false,
        skip_status: true,
        include_email: false,
      });
    };
    f();
  }, []);

const callLogin = useCallback(async ({ oauth_token, oauth_token_secret }) => {
    try {
      const twitterCredential = firebase.auth.TwitterAuthProvider.credential(
        oauth_token,
        oauth_token_secret
      );

    //credentialを使ってfirebaseログイン  
    return firebase.auth().signInWithCredential(twitterCredential);
    } catch (error) {
      console.log(error);
    }
  }, []);
koshienkoshien

React NavigationのDrawerとAndroid10のジェスチャーの競合を解決する
Can not open / close drawer with swipe gesture

//App.tsxに何行か追加する
import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
import { AppRegistry } from 'react-native';
AppRegistry.registerComponent("scoresheet-app", () => gestureHandlerRootHOC(App));
koshienkoshien

25分割配球入力画面の実装

import { Text, TouchableOpacity, View } from "react-native";
import React, { useState } from "react";
import ModalSelector from 'react-native-modal-selector';
const data = [
    {
        label: 'ストレート',
        key: '●',
        index: 0
    },
    {
        label: 'カーブ',
        key: '▲',
        index: 1
    },
    {
        label: 'スライダー',
        key: '<',
        index: 2
    },
    {
        label: 'シンカー',
        key: '▼',
        index: 3
    },
    {
        label: 'シュート',
        key: '>',
        index: 4
    },
    {
        label: 'フォーク',
        key: '■',
        index: 5
    },
    {
        label: 'その他',
        key: '★',
        index: 6
    }
]

const InputCourse = () => {
  const [courses, setCourses] = useState([]);
  return (
    <View>

      {[0, 1, 2, 3, 4].map((col, colIdx) => (
        <View
          style={{
            display: "flex",
            flexDirection: "row",
          }}
        >
          {[0, 1, 2, 3, 4].map((row, rowIdx) => (
            <ModalSelector
            data={data}
            scrollViewAccessibilityLabel={'Scrollable options'}
            cancelButtonAccessibilityLabel={'Cancel Button'}
            onChange={(option)=>{
                console.log(option,courses);
                let tmpCourses = [...courses];
                tmpCourses.push({
                    row: rowIdx,
                    col: colIdx,
                    type: option.index,
                    count: tmpCourses.length + 1
                })
                setCourses(tmpCourses);
            }}>
                <TouchableOpacity
                    style={{
                    backgroundColor: 
                        rowIdx > 0 && rowIdx < 4 && colIdx > 0 && colIdx < 4 
                            ? '#FF000099' 
                            : '#0000FF99',
                    borderTopWidth: 1,
                    borderBottomWidth: 1,
                    borderLeftWidth: 1,
                    borderRightWidth: 1,
                    height: 50,
                    width: 30,
                }}
                >
                    {courses
                    .filter((course)=>{
                        return course.col === colIdx && course.row === rowIdx
                    })
                    .map((course)=>(
                        <Text>{data[course.type].key}{course.count}</Text>
                    ))}
                </TouchableOpacity>
            </ModalSelector>
            
          ))}
        </View>
      ))}
    </View>
  );
};

export default InputCourse;
koshienkoshien

・Screenを遷移してもWEBアプリと違ってAPIがリロードされない
　→・あまり実装コストをかけたくない
・ネイティブ機能ほとんど使ってない
　→最悪ガワネイティブ でもよい

ということで一旦WEBアプリとしてリリースする方向に舵を切り直すことにしました。

koshienkoshien

きくちゃんによるデバッグ

蓋世・きくちゃんにデバッグ協力していただいた。

要検討

  • プレイヤー新規作成は結構ミスする
    • プレイヤー編集機能要る？ 誰に編集権限与える？
  • 視点切り替えに球種の矢印が追随してない
  • 球種増やしてほしい
  • コース・球種表示が背景と重なって見にくい
  • スコアボード押すと各回の先頭に飛べるといい
  • 各打席に飛ぶところがわかりにくいのでボタン風にしてみてはどうか
  • 毎回リロードで視点選択が戻るのは使いにくい。
  • イニング完了してない状態だとスコアが反映されない(2020/12/31)
koshienkoshien

2021/1/1

毎回リロードで視点選択が戻るのは使いにくい。

  • 直近使った視点モードと1球ごと、1打席ごとの入力モードを保存するように修正済み

2021/1/2

  • 代打の成績表示が分離できていない問題を修正

各打席に飛ぶところがわかりにくいのでボタン風にしてみてはどうか

青色文字と下線でリンク風にした。対処済み

コース・球種表示が背景と重なって見にくい

text-shadowを設定

視点切り替えに球種の矢印が追随してない

暫定で投手側に変更(スライダー・シュートのみ)

スコアボード押すと各回の先頭に飛べるといい

対処済み

  • 1打席ごと入力の場合、リプレイで交代後の選手が表示されていた不具合を修正
  • 投手成績から個人ページへのリンク
koshienkoshien

2021/1/3

  • 背景を無地に変更。
  • シンカー、スライダー、シュート、フォーク、カーブのアイコンを1.2倍に拡大。シンカー、カーブは斜めになるように回転。
  • チェンジアップのアイコンを二重丸に変更。
<View
      style={{
        transform:[
          {scale:1.2},
          {rotateZ:'-30deg'}
        ]
      }}
    >▼</View>

↓修正前

↓修正後

2020/1/5

視点切り替えに球種の矢印が追随してない

追従するように修正

koshienkoshien

2021/1/10

  • 捕手成績実装
    • 個人ページ
    • リーグページ
    • チームページ

2021/1/11

  • CSVダウンロード機能実装
    • 投手成績
    • 打撃成績
    • 捕手成績