野球リーグスコア管理システムの開発

2019-01-13に作成

image
野球リーグスコア管理システムキャップ野球情報局に関する進捗です。

使っている技術など

  • NodeJS
  • ReactJS
  • netlify
  • MySQL
  • materializecss
  • react-bootstrap
  • react-bootstrap-table-next

旧システムについてはこちらの記事をご覧ください。

残りタスクリスト

trello

所有者限定モードのためこのボードには投稿できません ボードとは?

1/27進捗

全期間通算成績

現在入力している全てのシーズンのデータから通算成績を取得する処理を実装しました。
image
react側は旧システムAPIであらかじめ作っていたのもあって、
これにはそんなに時間がかかりませんでした。

本日から新シーズン始動

本日、2019年度前期シーズン開幕戦でした。
現行のReact/NodeJS/Netlifyのシステムでは初めての本格運用が始まります。

スコア入力

スコアの速報を入力していたのですがサーバサイド側で打率が0のときに打撃十傑から除く処理が抜けていたことに気づいてスコア入力を中断してシステムの修正を行うなど。

昨日の進捗

ReactでOGP対応した

1/23進捗

スタッツページから個人成績への遷移

image

ここのところreactでOGPを動的に変える方法を模索していて進捗が出ていませんでした。
これまでスタッツページから個人の成績ページへの遷移は打率タブの名前欄のみ実装していましたが、ノンタイトル以外のタブで個人成績へジャンプできるように実装しました。
また、選手名をマウスオーバーした際にスタイルを変えるよう実装しました。

1/20進捗

個人獲得タイトル

image
旧システムではAPI化していなかったものをAPI化してトロフィアイコンを組み込んでみました。

球団別投球成績

image

シーズンページ打者全成績・投手全成績実装

image

動的にOGP生成→失敗

react-helmetを使用してmetaタグを書き換えるとページごとにOGPを生成できるのではないかと思ったが、結果としては動的に生成している部分のタグが認識されず。
SSRしないとできない模様

1/17進捗

image

[API]期毎投球成績

期毎投球成績を返すAPIを実装しました。

[UI]シーズンセレクタ

ドロップダウンでシーズンを選択するコンポーネントを「シーズンセレクタ」と呼んでいますが、期毎打撃成績と期毎投球成績タブで共通のコンポーネントとする実装を行いました。

1/16

[UI]タブ入れ子問題修正

image
何となくマテリアルデザインを使っているのですが、
「マテリアルデザインではタブを入れ子にしてはいけない」というルールをつい先日知りまして。
タブの代わりにドロップダウンでシーズンを選択するように修正しました。
UX的にどうなんですかねー?

1/14進捗

1/14進捗

[UI]スコア入力画面実装中

image

[UI]

  • react-autocompleteを用いた選手名の候補表示
  • 数値入力コンポーネントの実装・スタイル調整

[API]

  • クライアントから投げられた検索クエリに対して選手候補の一覧を返す実装

[API]試合結果データ取得

image

[API]

  • 試合結果データを返す

フォーム(UI)と入出力の形が一致していないのでどこかで策定する必要あり。

打率分布バブルチャート実装

1/13

打率分布バブルチャートを実装しました。

image

横軸を打席数(四球含む)、縦軸を打率として、
打席数―打率の相関グラフを描画するよう実装しました。
赤枠は規定打席以上ですが、chart.jsでは描画していません。

新APIへの移行作業

image
これまでバックエンドをJavaで書いていましたが、JavaからNodeJSへ移行中です。

  • 打率順位算出バグ修正
  • 空だったチーム順位算出ロジック実装
  • API変更で動作していなかった打撃成績・投球成績の合計行を動作するよう修正
  • 期毎打撃成績内訳実装