継続参加者成績の実装

直近2年間継続して参加している参加者の成績一覧を表示します。
基本的には1試合ごとの打席の内訳を1レコードとしてDBに保存しているので、選手IDと試合に参加した 年(試合日付をyear関数でまとめたもの) でGROUPBYします。
そうすると、参加年数分レコードが取れるので、2レコード以上ある選手を取得すればokです。

UI側はチームページが似たような実装なのでそれを使います。
なるべくコンポーネントを共通化するようにはしていますがなかなか難しいですね。

メニュー修正

新しいページを１つ増やすと、

-トップメニュー
- サイドメニュー
- ルーティング
- API問い合わせ

割と修正箇所多かったです..。

普段和暦はあまり使いませんが令和(こういうときだけ)最初のコミット、キメました。

打者最終出場日の表示

「全期間通算成績」ページで打者の最終出場日を表示するように実装しました。
例として、「通算打率20位の中で最近出場していたのは誰かな？」
という使い方ができます。

チームページ投球成績追加

時間がなくて1か月ぐらい作りかけで放置していましたが、
チームごとの投手通算成績を見ることができるようになりました。

デザイン修正

配色をcoolorsを元に見直しました。

• タブ色の見直し
• 選手名などのサブタイトルを外野の芝のイメージ色に
• スクロールバーを内野の土をイメージした若干明るめの色に
• パンくずリストの追加[階層をたどりやすくなりました]
  

全期間通算成績の機能強化

投手部門の成績の指標にWHIP・奪三振率・K/BBを表示してソートできるようにしました。

WHIP

WHIP = ( 与四球 + 被安打 ) / 投球回
投手がどれぐらい走者を出しているかという指標。
数値が小さい方が優秀です。打高投低のリーグでは1点台で優秀だと思います。
だいたい防御率の順位と相関があることがわかります。

奪三振率

奪三振率(5イニング換算)＝奪三振数 ÷ 投球回 * 5
5回投げた場合、投手がどれぐらい三振を奪えるかという指標。
やはり速球派が上位に名を連ねます。7点台はバケモン(笑)

K/BB

K/BB＝奪三振÷与四球
投手の制球力を示す指標。これまで指標として取り入れていなかったのですが、iotasさんに勧められたので取り入れてみました。
与四球が少なくて三振を取れる投手が上位にきますね。
奪三振率、WHIPと比べてみてみるとなるほど…と思えます。

最終出場日を表示する

現在、野球リーグでは2005年からの打撃・投球成績をExcelで保存しており、そのうちシステムには2010年度から現在までの成績の入力が終わっています。
約10年分の通算成績を見る際に、誰がアクティブなプレーヤーかという判別をできるようにするために、最終出場日を表示する機能を実装しました。

類似度計算の修正

先週、選手間の「類似度」を実装しました。
その際x軸に長打率(SLG)、y軸にAB/K(三振のしにくさ)を採用しましたが、正確さを向上させるため、K/BB(選球眼)をz軸に採用して3次元でのユークリッド距離を求めるよう修正しました。

記事書きました。
NodeJSでGraphQLのサーバ側処理を実装してみる

直近の試合結果で引分が表示できないバグ修正

チームメンバー打撃成績に詳細項目追加

チームページにチーム通算成績表示を追加

あまり進捗が芳しくないですが、昼休みに少しだけ進めました。

• 通算勝敗タブを新たに追加。
• 通算成績表示

コンテンツ

URL: https://jcblscore-react.netlify.com/

(1)トップページ

メニュー的な位置づけのページです。

• (2)試合結果一覧
• (3)最新のスタッツ
• (4)全期間通算成績
• (5)選手一覧
• 日本カラーボール野球連盟(外部ページです)

(2)試合結果一覧

各シーズン(半年ごと)の試合結果がアコーディオンメニュー形式で配置されています。

(3)最新のスタッツ

チーム順位

• 赤枠・・・(7)チームページへ

チーム順位以外

• 青枠・・・(8)選手ページへ

(4)全期間通算成績

(3)最新のスタッツとレイアウトがほぼ同じなので説明を割愛します。

(5)選手一覧

• 赤枠・・・(7)チームページへ
• 青枠・・・選手名・チーム名をフィルタリングできるフォームです
• 緑枠・・・(8)選手ページへ

(6)日別試合結果

• 赤枠・・・(7)チームページへ
• 青枠・・・(8)選手ページへ
• 緑枠・・・(あれば)youtubeへのリンク

(7)チームページ

実装予定で未実装のもの

• (6)日付へのリンク
• 勝ち投手・負け投手の(8)選手ページへのリンク
• チームメンバー打撃成績・投球成績

(8)選手ページ

概要

横スクロールバーをカスタマイズ

まだしっくり来てはいないのですが、横スクロールバーを目立たせるよう実装を変えました。スマホだと自己主張に乏しすぎて困る。

謎の余白ができていたのを修正

タブを入れ子構造にしていたころの名残がCSSの修正によって出てきていました。

試合結果レイアウト修正

チーム名ブロック内改行

チームアイコン表示

チーム名をdivで括ってブロックの中で改行するようにしました。
スコアにチームアイコンを表示するようにしました。

OneSignalを用いたWEBプッシュの実装

横スクロールするテーブルの余白調整

youtubeの埋め込みを廃止

あまり需要がなかったのと動画の読み込みでユーザにストレスがかかりそうだったのでリンクにしました。

試合結果からチームページへのリンク

リファクタリング

見た目にはあまり影響はないのですが、react-bootstrap-tableをいくつも使っていて同じ項目を表示しているのに実装が違う、という問題を解消しました。
レビューをいただいていた点の大部分を修正できたかなと思います。
ソースを統一したので全期間通算成績→チームページ、選手個人ページへのリンクも動作しています。

• 残りタスク

概要

動作イメージ(GIF)

スマホでも横スクロールバーを常に表示

スクロールバーをCSSでカスタマイズして、スクロール中以外でも表示するようにしました。

シーズンセレクタの装飾

あまり目立たないのでセレクタ(プルダウン)を装飾してみました。
プルダウンしたときの失敗感。。。

トップページのコンテンツ実装

長らく試合結果一覧をデフォルトのトップページにしていましたが、
メニューの内容をトップページのコンテンツにしました。

概要

打撃成績にAB/Kを追加

AB/K：打席数を三振数で割った数値。何打席に1回三振するかという指標。

投球成績にWHIP/奪三振率を追加

援護率は一部バグがあるので保留にしました。

テーブルの横スクロール実装

タブの横スクロール実装

概要

昼休み開発

サーバサイドは夜に差し替え。
夜は運営者ギルドでのKoretteさんのレビュー会に参加。

選手ページの打撃成績に出塁率・長打率・OPSを表示するよう修正

• スマホ版(375px未満)は非表示

選手一覧API

• 名前を昇順にソートする(全件表示・検索結果)

作ったサービスのレビュー依頼掲示板でご指摘いただいている箇所を部分的に修正しました。ありがとうございます。

概要

最新のスタッツのチーム順位からチームページへのリンク実装

テーブルセルのpaddingを増やした

#before
padding: 8px 1px 8px 1px;

#after
padding: 10px 5px 10px 5px;

概要

docker-composeで仮想環境作り

docker-composeのvolumesはコンテナが起動したときにマウントされるのでdockerイメージ作成時にホスト側のpackage.jsonを参照した状態でnpm installができない。
DockerfileのADDはdockerイメージ作成時にマウントされる。
volumesを使わずにDockerfile内でADDしてnpm installするのが吉。

参考リンク:
docker-composeのvolumesで指定したホストのディレクトリがマウントされずハマった
How to mount a single file in a volume

チームページ

API

• チーム一覧を最近試合があった順にソートする
• チームページAPI作成

UI

• ローディング画面変更
• チームページUI
  • helmet設定
  • 選手一覧ページにチームページへのリンクを設置
  • メニューからチーム一覧廃止
  • 試合結果にチームページへのリンクを張ったがデザイン的に一旦保留

#
旧システムでも最後の方に作ったチームページを作り始めました。
現在の導線は右上メニュー＞選手一覧＞チーム名から。
とりあえず直近の試合結果20件を表示できるところまで。

概要

• 選手一覧(UI)
• 選手一覧(API)

選手一覧

現在右上メニューバー内から遷移できます。

UI

チームの一覧と所属選手一覧を実装しました。materializeのchipsを使用しています。それから、チーム名・選手名検索ができるフォームの実装をしました。今回は所属チームごとの表示の振り分けをクライアント側で行うようにしました。チームの一覧を最近試合を行った順に並び替えできていないのが課題です。

API

フォームに何も入力されていないときは選手一覧を返すようにして、
入力された場合はAPIに検索結果を取りに行く方式にしています。
フォームがクリアされるとまた選手一覧を取得します。