野球リーグスコア管理システムとキャップ野球情報局に関する進捗です。
旧システムについてはこちらの記事をご覧ください。
元々スライドメニューはあったのですが完成度が低かったので途中からコメントアウトしていました。
メニューを選択するとfocusで意図しないスタイルが適用されていたので背景色に同化してごまかしましたw
.bm-item:focus {
outline-color: darkcyan;
}
カード化すると見栄えがよくなりました。
ただ、react-bootstrap-tableをカードでラップしようとするとカードのheightが0になってしまってちょっと悩みどころ。
ずっと公開はしていたのですが、
- UIがだいぶマシになってまともに見られるようにはなった
- UIの修正が一段落ついた
- メニューを実装して導線が張れた
ということで、crieitのサービスのレビュー掲示板でレビューを募集しています。
リーグのコンテンツとして試合動画を撮っているので上手く活用したいところです。
今回はreact-youtubeというパッケージを使っています。
定石としてはDBにカラム作ってAPIで返すべきなのだとは思いますが、今回はjsonですらないです。
ということで試合IDをキーとしてyoutubeの動画IDを格納するファイルを作りました。
DBに追加するのと手間は同じぐらいだと思います。
export const youtubeConfig =
{
//日付などのコメント
"試合ID":"youtube動画ID",
}
これをreact内のループでこう書いてやります。
import { youtubeConfig } from './youtubeConfig'
(中略)
<YouTube
videoId={youtubeConfig[試合ID]}
/>
個人開発でcalcを使ったのは初めてです。
業務でもそんなに使ったことはないのですが...。
ブラウザの幅に応じて動画の幅を拡大縮小し、高さをアスペクト比を維持するように変えてやります。
iframe{
width: 90%;
height: calc(90vw*9/16);
}
react-bootstrap
Reactを使われている方は馴染みがあるかと思いますが、
0.32.4までがbootstrap3に対応しており、bootstrap4対応によって0.32.4から1.0.0-betaまで一気にバージョンが上がりました。
公式ではbootstrap3系と4系は分けてサポートしていくとアナウンスされています。
昨年9月に1.0.0-betaがリリースされていましたが、知ったのは昨日。しかも「ドキュメントのフォーマットちょっと変わったなー」ぐらいの認識で見ていたのと、Cardコンポーネントが新たに追加されていたのでそちらの実装に気を取られていたのとでbreaking changeに気づいたのが今朝。昨夜デプロイしてたので一晩メインのページが落ちた状態でした...。
昨夜実装したコンポーネントをコメントアウトして一旦デプロイしなおし、エラー箇所のソースを確認していた際にようやくbreaking changeに気づく。Cardコンポーネントがある4系に寄せるか、3系に戻してCardコンポーネントがない状態で対応するか少し迷いましたがとりあえず3系に戻してCardはmaterializeCSSで対応しました。元々ベースのデザインにmaterializeCSSを採用しています。
結局昼休み30分ぐらい使って何とか直して再デプロイ。
現在入力している全てのシーズンのデータから通算成績を取得する処理を実装しました。
react側は旧システムAPIであらかじめ作っていたのもあって、
これにはそんなに時間がかかりませんでした。
本日、2019年度前期シーズン開幕戦でした。
現行のReact/NodeJS/Netlifyのシステムでは初めての本格運用が始まります。
スコアの速報を入力していたのですがサーバサイド側で打率が0のときに打撃十傑から除く処理が抜けていたことに気づいてスコア入力を中断してシステムの修正を行うなど。
ここのところreactでOGPを動的に変える方法を模索していて進捗が出ていませんでした。
これまでスタッツページから個人の成績ページへの遷移は打率タブの名前欄のみ実装していましたが、ノンタイトル以外のタブで個人成績へジャンプできるように実装しました。
また、選手名をマウスオーバーした際にスタイルを変えるよう実装しました。
[UI]
[API]
[API]
フォーム(UI)と入出力の形が一致していないのでどこかで策定する必要あり。
横軸を打席数(四球含む)、縦軸を打率として、
打席数―打率の相関グラフを描画するよう実装しました。
赤枠は規定打席以上ですが、chart.jsでは描画していません。
これまでバックエンドをJavaで書いていましたが、JavaからNodeJSへ移行中です。