経緯

これまで読んだ本や積んでる本の値段の合計がわかるサービス「積読ハウマッチ」が最近リリースされたのですが、

#積読ハウマッチ ...ホームに追加できるんです(*´ω｀*)アイコンも用意したんです(*´ω｀*)ステータスバーの色も変わるんです(*´ω｀*) pic.twitter.com/EKn8tv45q2

— めもらば@公式 (@MemoryLoverz) July 28, 2019

PWA対応してるよ!という売りだったのでふとフロントがCRAのうちのサービスどうだったっけ...と思って確認。
manifest.json初期状態のままだったので「React App」....ダサい。

App Manifest Generatorを使ってみる

• PWAのmanifest.jsonとiconsの各サイズのアイコン画像を自動生成してくれるApp Manifest Generatorの紹介

項目で設定を選んでアイコンに使う画像ファイルをアップロードするだけ。

項目の解説はこちらが参考になります。
- manifest.jsonでホーム画面へのアプリ追加【これからはじめるPWA】

manifest.json

{
  "short_name": "JCBL-SCORE",
  "name": "日本カラーボール野球連盟スコア管理システム「JCBL-SCORE」",
  "theme_color": "darkcyan",
  "background_color": "#ffffff",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    .....
    {
      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

対応した結果

日本カラーボール野球連盟スコア閲覧サービス「JCBL-SCORE」、androidの「ホームに追加」に対応しました。#pwa#reactjs pic.twitter.com/uMYmaCZ8CI

— 日本カラーボール野球連盟公式 (@JCBL_Official) July 29, 2019

選手登録API実装

まだ画面(UI)の実装はまだですが、選手の新規登録APIは実装完了。
打撃成績などはまだマニュアルでDBに入れてます。

Nodeプロジェクトに統合していたReactプロジェクトを再分離

現在のSEOの資産を活かすのであればこのままnetlifyドメインでもいいかな...と思い始めました。
分けていた方がデプロイが楽なので。

画面イメージ

サンプルデータはいつものように「関東キャップリーグ」さんです。

ブランドロゴに副題をつけました。

チームページ

スタッツ

チーム・選手一覧

チーム成績登録API実装完了

node-mysql2が数値を文字列として返してくる

おかげでtoFixed()とかコケます。parseFloat(文字列を小数にパースするメソッド)とか間に挟みました。

undef判定はちゃんと書きましょう

undefの判定に! valueって書いてたらvalueが0で躓きましたｗ

テーブルの大文字小文字に注意しましょう

今回からdockerコンテナを使い始めたのですが、小文字のテーブルを大文字でSQL書くと認識しません。やっぱりlinuxですね。

エンドポイント調整

複数リーグ対応のためにUIからAPIに渡すパラメータなどを増やす必要があるので調整。

サンプルデータ投入しながらデバッグ

関東キャップリーグさんの試合データが公開されているので入力していきます。
1カード分探しても見つからなかったのですが。

シーズンスタッツ

日別試合結果一覧

試合結果詳細

SELECT結果の調整

これまでは単一のリーグ用のシステムだったため、where句で集計する期間の範囲を与えるだけだったが、リーグIDを渡して「どのリーグのどの期間か」を求めるように修正した。

• チーム順位
• 打撃タイトル
• 投手タイトル

いずれも修正完了。

データ登録APIの実装開始

ようやく重い腰を上げてデータ登録機能の実装に着手。

関東キャップリーグさんにシステム提供の打診中

Excelで集計した成績を写真に撮ってアップされてるので
同じマイナースポーツの誼で、システムを提供させてもらえないかと打診。
確定ではないですが、とりあえず前向きな回答をもらっています。

ver3(複数リーグ対応版)でサンプルデータ投入

若干滞り気味だったver3の開発を進めることに。
ただ、リーグの期間終了が今週末とのことなのでver3投入は間に合わないだろうなー。

• docker-composeでの動作確認
• サンプルデータの投入
• DB設計修正
• SQL修正

やっぱりモチベーションがある方が開発が進みます。