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

2019-01-13に作成

image
野球リーグスコア管理システムに関する進捗です。

使っている技術など

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

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

残りタスクリスト

trello

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

3/15進捗

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

image

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

image

3/13進捗

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

image

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

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

20190310時点のサイト構成

コンテンツ

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

(1)トップページ

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

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

(2)試合結果一覧

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

(3)最新のスタッツ

チーム順位

image

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

チーム順位以外

image

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

(4)全期間通算成績

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

(5)選手一覧

image

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

(6)日別試合結果

image

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

(7)チームページ

image
実装予定で未実装のもの

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

(8)選手ページ

image

3/4-5進捗

概要

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

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

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

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

試合結果レイアウト修正

チーム名ブロック内改行

チームアイコン表示

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

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

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

3/3進捗

youtubeの埋め込みを廃止

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

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

リファクタリング

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

3/2進捗

概要

動作イメージ(GIF)
image

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

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

シーズンセレクタの装飾

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

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

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