💬

ウィッフルボール情報局をリリースしました

2021/03/15に公開

MySQL

備忘録

chromajs

idea

ウィッフルボール情報局

https://wiffle.netlify.app

フロント(UI)側

フロント側は文言の変更などの必要があったので既存プロジェクトからブランチを切る形にしました。.envなどで一括で切り替える方が楽なのかもしれません。

キャップ野球情報局
https://cap-baseball.com

バックエンド

元々キャップ野球情報局は2つのバックエンドからなっています。

「みんなのSCORE」という成績管理システムは多リーグ対応をしていたため、DBのレコードを増やすだけで対応できました。
一方、ユーザがコンテンツを作る部分(CGM)に関しては多リーグを想定していなかったため、これもブランチを切ってサーバに複製を作りました。

リリースにあたって気づいたこと

konvajsで選手カードを作り直したときに気づいたことです。
トップページにチーム情報の更新を通知する欄があり、ユーザがチームのイメージカラーを設定できる仕様になっています。

これまではCSSでbackground-color単色で設定していたのですが、
chroma-jsを使ってある色を少し明るくした色を算出できることを学んだので応用してグラデーションをかけるように変更しました。

import chroma from 'chroma-js';

background: `linear-gradient(to right, ${team.team_color} 50%, ${chroma(team.team_color).brighten(2).hex()})`,

失敗したこと

DB周り

基本的にdockerを使ってデータベースを構築しているのですが、初期のデータベース作成SQLはあるものの、そこから加えた変更をコミットとして残していなかった(DBに直接alter文を実行していた)ため、秘伝のたれ状態になっていました。

カラム追加忘れ

alter文の履歴が残っていなかった。
今後マイグレーションの使用も視野に入れる。

絵文字対応

#データベースの文字コードをutf8bm4にする
alter database データベース名 default character set utf8mb4;

#テーブルの文字コードを変更
alter table テーブル名 default character set utf8mb4;

#カラムの文字コードを変更
alter table テーブル名 modify カラム名 character set utf8mb4...