2018」8日目の記事です。昨日はHirozさんの「Koretteのオモテとウラ」という記事でした。今回は個人で開発している野球リーグスコア管理システムの現行の技術と開発中システムの技術について触れようと思います。野球リーグスコア管理システム(旧)について※旧システムは2018年12月で新システムへと移行しました。日本カラーボール野球連盟に選手成績の速報を提供しているCMSです。機能紹介シーズン成績ページ(2015/07/02~)野球リーグの公式ページからフレームの中で呼び出されるページです。チーム順位以外は上位10位までを表示する仕様です。上記をグラフにしたものグラフはhighchartsを使って実装しています。ページシーズンごと、チーム別の参加者推移グラフをhighchartsを使って実装しています。全期間通算成績ページリーグ自体は2004年から開催されており、成績データは2010年~2018年まで入力されています。レイアウトはシーズン成績ページと同じです。継続参加者成績ページ直近2年間に参加している参加者の成績一覧を表示します。レイアウトはシーズン成績ページと同じです。slack/pushbullet(push通知)連携slackとpushbulletというアプリベースのpush通知機能があります。Nginxフロントエンド(旧)基本ベースは未だにJSPとなっていますが、バックエンドのAPI化とクライアントレンダリングを進めており、ajax+datatablesで動的に生成しています。Robotoフォントにしています。ここまでが現行のシステムとなります。実際に試合後にデータを入力すると成績に反映される仕組みになっています。SAStrutsはEOLな技術になっているため、現在モダンな開発環境でリニューアル中です。ここからは開発中のシステムについての話になります。5.7フロントエンド(現行)デザインは引き続きmaterializeをベースに、コンポーネントは使い勝手のよいreact-bootstrapを使用しています。旧システムにはないこれらの機能を実装しています。新機能は思いついたところから実装していっています。打率分布グラフリーグも長く運営されており、きれいな正規分布とはいかないまでもそれなりのデータが蓄積されています。各選手能力チャート標準偏差を求める処理が若干重いのが難点ですが、選手の特徴を文章よりも雄弁に語ってくれます。課題APIのレスポンスが遅い低スペックのサーバを使っているため、APIの応答が約1秒かかっています。これはサーバの載せ替えを考えています。デザインセンスがない業務システムの経験が長かったのでUIのセンスが壊滅的です。UIは未だに試行錯誤中です。テストコードを書いていなかった基本人力テストです(笑)最近ようやくJest使い始めたのでテストコード書こう...。ページが多い前述のUIの話になるのですが、ページ数が多いのでどういうメニューにして導線をどうするか...という点です。まとめこの記事をレビューしていただいたnabettuさんに感謝を。現行システムがEOLの技術を使っているので、なるべく早く移行したいとは思っていますが、ロジックが多い&最適化できていない上にソースの量が多くてなかなか開発が進まない状況です。現行システムに新しい機能を追加して移行のための開発を後回しにしてしまったり...。(エンジニアあるある?)野球リーグの広報も兼任していて試合の動画作ったりもしているので、ただでさえ土日しか開発できないのに時間が足りなくて辛い。おわりに明日は839さんの記事です!お楽しみに。ツイッターでシェアみんなに共有、忘れないようにメモマシュマロでメッセージか投げ銭?ckoshien個人開発4年目。普段はアプリケーションエンジニア。ReactJS/NodeJS/ReactNative/JavaCrieitは個人で開発中です。どんな軽い内容でも嬉しいです。Crieitを作ろうと思ったかまた、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!ボードとは?関連記事React+Netlifyで最小のアプリを作るスワイプで気になるAV女優を探すことができる「AVキャッチャー」というサービスをリリースしました。react-big-calendarの攻略キャップ野球向けイベントカレンダー作ってみました。