概要

• 動画スライドコンポーネントの実装
• 蓋ざんまいサイトとの連携
• 独自ドメイン取りました
  　- トラブルシューティング
• 日別試合結果累計バグ対処
  • 原因

動画スライドコンポーネント

主にキャップ野球用の対応ですが、皆さんyoutubeとかtwitterにばらばらに動画を上げているので、蓋ざんまい非公式サイトではその集約の役割も果たしていました。

ただ、蓋ざんまいサイトでは
- 縦列に配置してコンテンツが長くなってしまう

という欠点があり、試合結果を一律JCBL-SCORE側で表示する対応をするため、どんなUIがいいか考えた結果、カルーセルみたいに横にスライドするのがよいという考えに。

使ったコンポーネント

• react-slideshow
  • 今回新たに採用したコンポーネント
• react-youtube
  • JCBL-SCOREで既に採用
• react-twitter-embed
  • 蓋ざんまいサイトで既に採用

実装結果

蓋ざんまいサイトとの連携

蓋ざんまいで独自に実装していた試合結果ページを廃止(アクセスはできますがリンクは張っていません)して、一律JCBL-SCORE側で試合結果を表示するようにしました。

独自ドメイン取りました

• 旧ドメイン(netlify)
  • https://jcblscore-react.netlify.com/league/cap_baseball
• 新ドメイン
  • https://jcbl-score.com/league/cap_baseball

だいぶ短縮できました。
設定自体は大して難しくなく、ちょっと古いですが以下のサイトなどを参考に進めました。

• Netlifyで静的サイトをホスティングする(2) 独自ドメイン設定 ～ HTTPS化
• Netlifyで独自ドメインを設定する

手順としては、
1. ネームサーバの設定をnetlifyのものにする
2. DNSが浸透するまで待つ
3. Let's encryptでSSL証明書を発行する(netlifyがやってくれる)

トラブルシューティング

3でちょっとはまりました。
ERR_CERT_COMMON_NAME_INVALID(プライバシーエラー)が出てしまうのです。
作られた証明書を見ると、subjectが「*.netlify.com」になっています。証明する対象が間違っているわけです。
よくよく考えると、新しいドメインにリダイレクトしていないままLet's encryptの処理をしていたので、redirectsに

[https://jcblscore-react.netlify.com/*](https://jcblscore-react.netlify.com/*) https://jcbl-score.com/:splat 301!

1行追記します。これで証明書を発行し直すとプライバシーエラーが解消されました。

日別試合結果累計バグ

原因

APIコンテナとDBコンテナのタイムゾーンがGMTで、DBに入っている値がJSTだったので、日付で比較しようとすると、SQLで>や
composeファイルで書くと有効な対応策がないので、SQLに渡す際に日付オブジェクトにするのをやめました。

概要

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件を表示できるところまで。