2019-05-26に投稿

獲得タイトルに順位を表示するようにしました。

獲得タイトルとは

年度ごとに、打率、HR、打点、安打数、防御率、勝利数、セーブ、奪三振数の各タイトルの保持状況を表したもの。

今回実装したUI

テーマ:楽しめる人を増やす
元々の実装では1位(タイトル獲得者)しか表示されず、

  • 2位だったとかそういう情報がわからない
  • 参加しているのに表示されない

では一部の人しか面白くないと思ったので実装を変えることにしました。1-3位はメダル、10位以内入賞は順位を表示するよう変更しました。

image

実装裏話

タイトル集計バッチの実装

集計処理はリプレース前の旧システムで保持していたのですが、
今回の仕様変更に伴いNodeJSで新たに実装しました。

DBの破壊的変更

変更前はevent_typeというカラムを持って拡張性を考慮していましたが、逆にデータが取り出し辛いという欠点がありました。
また、1位の情報のみ保持しており、各タイトル10位までの情報が保持できないという欠点もありました。(定義が煩雑になる)

変更後はいつ誰が 何のタイトルで何位だったかを明確に視認できるようになり、データの可読性が上がりました。

変更前の定義

create table title_holder(
    player_id int(3) not null,
    season_id int(3) not null,
    event_type int(2) not null,
    value double not null,
    lock_flg int(1) not null,
    foreign key (player_id) references player(id),
    foreign key (season_id) references season(id),
    primary key(player_id,season_id,event_type)
);

変更後の定義

create table title_holder(
    player_id int(3) not null,
    season_id int(3) not null,
    average_rank int(2),
    homerun_rank int(2),
    rbi_rank int(2),
    hit_rank int(2),
    era_rank int(2),
    win_rank int(2),
    save_rank int(2),
    strikeout_rank int(2),
    lock_flg int(1) not null,
    foreign key (player_id) references player(id),
    foreign key (season_id) references league(id),
    primary key(player_id,season_id)
);

元々のUI

2/10ごろ完成したもの。
image

最後に

私の成績はそんなに上位ではないのですが、
最高で銅メダル(3位)取れていたのでちょっとうれしくなりました。


ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

所有者限定モードのためこのボードには投稿できません
コメント