野球リーグスコア管理システムとキャップ野球情報局に関する進捗です。
旧システムについてはこちらの記事をご覧ください。
現在入力している全てのシーズンのデータから通算成績を取得する処理を実装しました。
react側は旧システムAPIであらかじめ作っていたのもあって、
これにはそんなに時間がかかりませんでした。
本日、2019年度前期シーズン開幕戦でした。
現行のReact/NodeJS/Netlifyのシステムでは初めての本格運用が始まります。
スコアの速報を入力していたのですがサーバサイド側で打率が0のときに打撃十傑から除く処理が抜けていたことに気づいてスコア入力を中断してシステムの修正を行うなど。
ここのところreactでOGPを動的に変える方法を模索していて進捗が出ていませんでした。
これまでスタッツページから個人の成績ページへの遷移は打率タブの名前欄のみ実装していましたが、ノンタイトル以外のタブで個人成績へジャンプできるように実装しました。
また、選手名をマウスオーバーした際にスタイルを変えるよう実装しました。
旧システムではAPI化していなかったものをAPI化してトロフィアイコンを組み込んでみました。
react-helmetを使用してmetaタグを書き換えるとページごとにOGPを生成できるのではないかと思ったが、結果としては動的に生成している部分のタグが認識されず。
SSRしないとできない模様
期毎投球成績を返すAPIを実装しました。
ドロップダウンでシーズンを選択するコンポーネントを「シーズンセレクタ」と呼んでいますが、期毎打撃成績と期毎投球成績タブで共通のコンポーネントとする実装を行いました。
何となくマテリアルデザインを使っているのですが、
「マテリアルデザインではタブを入れ子にしてはいけない」というルールをつい先日知りまして。
タブの代わりにドロップダウンでシーズンを選択するように修正しました。
UX的にどうなんですかねー?
[UI]
[API]
[API]
フォーム(UI)と入出力の形が一致していないのでどこかで策定する必要あり。
横軸を打席数(四球含む)、縦軸を打率として、
打席数―打率の相関グラフを描画するよう実装しました。
赤枠は規定打席以上ですが、chart.jsでは描画していません。
これまでバックエンドをJavaで書いていましたが、JavaからNodeJSへ移行中です。