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

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でカスタマイズして、スクロール中以外でも表示するようにしました。

シーズンセレクタの装飾

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

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

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

2/28進捗

概要

image

打撃成績にAB/Kを追加

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

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

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

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

タブの横スクロール実装

2/27進捗

概要

image

昼休み開発

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

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

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

選手一覧API

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

2/26進捗

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

概要

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

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

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

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

2/16-17進捗

概要

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

チームページ

image

API

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

UI

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

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

2/14-15進捗

概要

image

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

選手一覧

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

UI

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

API

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

2/13進捗

概要

image

UI修正

thタグでフォントを太字→普通、12pxに

robotoフォントのfont-weight700を使っているので、敢えてテーブルヘッダを太字ではないようにして区別する
参考スタイル:Baseball LAB

ソート可能なテーブルヘッダのカーソルをポインタにする

画面幅が375px以下の場合は表のfont-sizeを11pxに下げる

コンテンツ詰め込むにはもうこれしか方法がないなーと思います。
スマホ版だけコンテンツ削るという手法もありだとは思いますが。

2/12進捗

UI

デザイン修正概要

image
同僚のデザインできる方にレビューしていただきました。
本日は指摘事項をいくつか反映してタイムアップ。

ヘッダ

  • ヘッダタイトルの左側にpaddingつけた

メニュー

  • バーガーボタンのhover時の色修正
  • メニューのhoverの色を変えた
  • メニューhover時の範囲を変えた
  • メニューで現在のページ位置表示
.current:before{
  content: '\f101';
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  padding-right:5px; 
}
  • 現在いるページのメニューを選択できなくする
.current{
  pointer-events: none;
}
  • 外部リンクに遷移することを示すアイコンをつけた

試合結果一覧

  • アコーディオン内のリストをシンプルにした

2/11進捗

概要

  • フッタにツイートボタン置いてみた
  • IE11対応
  • 期毎打撃成績・投球成績をアコーディオン化
    image

フッタにツイートボタン置いてみた

ページごとにシェアするURLを動的にしたいのでまだ課題として置いておきます。

参考にした記事:Twitterシェアボタンの設置 - Qiita

IE11対応

ふとIE11で表示させてみたら真っ白に近かったので急遽対応しました。下記記事のbabel-polyfill入れてindex.jsでインポートする方を採用しました。

参考記事:Reactアプリを IE11 で表示すると 「オブジェクトは 'startsWith' プロパティまたはメソッドをサポートしていません。」 が発生する

期毎打撃成績・投球成績をアコーディオン化

1/17のボードでシーズンをプルダウンで選択する方式にしたのですが、他の箇所でアコーディオン化に成功して思いのほかよかったのでこちらもアコーディオン化しました。
ただ、苦労したのはアコーディオンの中に格納したテーブルの横幅
テーブルの中で表示するコンテンツが多く、結局paddingで5px程度取っても横幅が足りなくなるのでfont-sizeを下げることにしました。

2/10進捗

概要

  • 試合結果一覧をアコーディオン化
  • 個人タイトルのカード化

試合結果一覧をアコーディオン化

image

シーズンごとにリストアイテム化していた試合日ですが、
今回アコーディオンの中に格納しました。

コンポーネントごとにstateを持ってdisplay:noneを切り替える方法を考えていたのですが、CSSで作るとトランジションが使えて表現が豊かになるのでこちらに変えました。
参考:CSSだけでアコーディオンを作る方法

個人タイトルのカード化

image
昨日の時点でheightが0になってしまってどうしようもなかった問題ですが、
1. BootstrapTableにidを設定する
BootstrapTableにはidというプロパティがないので外側のdivに設定しました。

return (
                <div className='col s12'
                    id={this.props.id}>
                    <BootstrapTable 
                        keyField={this.props.keyField}
                        data={this.props.data}
                        columns={this.props.columns}  />
                </div>
            )

  1. idを元にclientHeightを計算する
    trophyというidを要素につけてclientHeightを計算します。
    22はカードのタイトル分の高さです。
document.getElementById('trophy').clientHeight + 22
  1. stateにセットしてstyleに記述する
this.setState({
   height:document.getElementById('trophy').clientHeight
  })
style={
{ height: this.state.height}}