えいむーさんは明日も頑張るよ

Salmon Statsの記錄だけをまとめたサイトをつくった

価格

# Salmon Stats Records

最近、Power Egg Record が新設されるなどサーモンラン界隈の記錄に関する基準やらまとめ方などがいろいろ代わってきている流れに便乗して Salmon Stats の記錄だけをまとめたものを作ろうと思う。

UI 部分をつくるのは非常にめんどくさいので API キーを使ってアクセスすると JSON を取得できるような仕組みにしようと思う。

API キーについて

AWS で運営しようとしているので、アホみたいにアクセスされるとそれなりに料金がかかってきてしまうため。

# 記錄管理について

誰かから申請を受け付けるのも、それを受理するのもめんどくさいので全てプログラミングで行います。

Salmon Stats にアップロードされたリザルトからでしか判断しないので、それ以外のリザルトは全く考慮されません。

まあ普及率から考えてフレンド四人であそんで、誰も Salmon Stats に登録していないっていう状況もあんまりないと考えてこの仕様にしました。

編成・ステージにもよりますが大体シフトごとに 4000 件くらいはリザルトがアップロードされているのでそれなりにまともな指標にはなると思います。

# 仕様

次の仕様で実装することにしました。

# 記錄方式

以下の記錄を扱います。

シェケナダム
  通常編成
    総合記錄
      昼のみ
        赤イクラ
        金イクラ
      夜あり
        赤イクラ
        金イクラ
    WAVE記錄
      干潮
        イベントなし
          赤イクラ
          金イクラ
        霧
        ハコビヤ襲来
        ドスコイ大量発生
      通常
        イベントなし
        ラッシュ
        キンシャケ探し
        グリル発進
        霧
        ハコビヤ襲来
      満潮
        イベントなし
        ラッシュ
        キンシャケ探し
        グリル発進
        霧
        ハコビヤ襲来
  単緑編成
  全緑編成
  黄金編成

ステージが 5 通り、編成区分が 4 通りあり、更にその中に総合記錄と WAVE 記錄があります。

WAVE 記錄は 16 通りで、それに総合記錄が 2 通りあるので、合計で 18 通りあります。それぞれの記錄には赤イクラと金イクラの記錄があるので、全部で5*4*18*2=720通りの記錄があることになります。

記錄について

編成ごとの TOP10 とかつくっても良いかも知れないと思ったが、どのくらいコストがかかるのかわからんので一旦割愛した。

気が向いたら実装します。

これらに対して申請を受けたりしているといくら時間があっても足りないので、自動集計にするのは理にかなっていると言えます。

古い記錄についてどこまで遡るかは微妙なところなのですが、今回は 2019 年 9 月頃まで遡ることにしました。

まあでもこの辺はまだ知識なども十分洗練されていないので上位に載るような記錄は一件もないと思います。

# プレイヤーデータを保存しない

誰がその記錄を打ち立てたかというデータは保存しません。

要するに個人を特定できるデータを含まないようにします。

内部保存データ

ただし、外部に後悔されないキャッシュにはプレイヤーデータを含むデータとして保存してあります。

# 仕組み

まず、Salmon Stats から記錄を取得するところから始めます。記錄を取る API はリザルトを取る API より軽いですが、毎回アクセスしているとそれなりに負担がかかるので JSON としてキャッシュを保存します。

古いシフトについては新たにリザルトがアップロードされることはない、と考えて直近一週間のシフトの記錄だけを毎回取得します。

直近一週間となると 4~5 シフトくらいだと思うので、毎回全件(500 件以上)アクセスするよりは遥かに良心的です。このキャッシュを一時間に一回位のペースで更新することを考えます。

つまり、今回考案する API は一時間に一回しか新しい値を返さないことになります。

# レスポンス

以下のようなレスポンスを返すと想定します。

[
  {
    "stage_id": 5000,
    "shifts": [
      {
        // 編成区分
        "shift_type": "normal",
        // 金イクラ記錄
        "golden_egg": {
          // 総合記錄
          "total": {
            "power_egg": 9999,
            "golden_egg": 999,
            "weapon_list": [0, 5000, 5010, 6000],
            "start_time": 1630800000
          },
          // 昼のみ記錄
          "no_night_event": {},
          // WAVE記錄
          "wave": [
            {
              "power_egg": 9999,
              "golden_egg": 999,
              "weapon_list": [0, 5000, 5010, 6000],
              "start_time": 1630800000,
              "event_type": "-",
              "water_level": "low"
            }
          ]
        },
        // 赤イクラ記錄
        // フォーマットは金イクラ記錄と同一
        "power_egg": {}
      }
    ]
  }
]

と思ったけど、以下のレスポンスのほうがわかりやすかったりするかな。

{
  "5000": {
    // 通常シフト
    "normal": {
      // 金イクラ記錄
      "golden_egg": {
        // 総合記錄
        "total": {
          "power_egg": 9999,
          "golden_egg": 999,
          "weapon_list": [0, 5000, 5010, 6000],
          "start_time": 1630800000
        },
        // 昼のみ記錄
        "no_night_event": {},
        // WAVE記錄
        "wave": [
          {
            "power_egg": 9999,
            "golden_egg": 999,
            "weapon_list": [0, 5000, 5010, 6000],
            "start_time": 1630800000,
            "event_type": "-",
            "water_level": "low"
          }
        ]
      },
      // 赤イクラ記錄
      // フォーマットは金イクラ記錄と同一
      "power_egg": {}
    },
    // ランダムシフト
    "random1": {},
    "random4": {},
    "grizzco": {}
  },
  "5001": {},
  "5002": {},
  "5003": {},
  "5004": {}
}

というわけで下のレスポンスを採用しました。

# UI

表示方法はいろいろあるのですが、以前つくった LanPlay Records の雛形があるのでそれを利用します。

SCSS + Vue をコピペするだけで動くので楽ちんです。LanPlay Records は Vue で動作しているのですが、Salmon Stats Records は Vite を利用しました。

Vite は内部的には Vue3 なのでかなり高速に動作することが期待できます。

# ホスティング

いつもどおり Netlify を利用しました。とても便利です。

# Salmon Stats Records (opens new window)

結構横に長いのでパソコンでの閲覧推奨ですが、スマートフォンでも一応見れます。

# 注意点

  • Salmon Stats にある記録しか集計していないので、プレイした四人のうち誰も Salmon Stats 未登録の記錄は参照できません。
  • Salmon Stats で集計されていないのでPower Egg Records (opens new window)のような WAVE の組み合わせ等には未対応です

# 他のサイトとの差別化について

# Salmon Run Records

主に以下の違いがあります。

Salmon Stats Records Salmon Run Records
申請手続き Salmon Stats にアップロードされる限り、不要 スクリーンショットを含むリザルト提出
データの正当性 Salmon Stats の正当性に依存 ほぼ完全
ウェブサイト更新 一時間に一回自動的に更新 Google Spreadsheet 更新時
メンテナンス 不要 必要
読み込み速度 ローカル JSON で高速 API アクセスで低速
過去の記錄 Salmon Stats 設立前のデータなし 管理されているすべてのデータ
記錄の詳細(メンバーなど) なし(技術的には可能) あり
タイ記録など なし(技術的には可能) あり
より細かい記錄区分 なし(データがないため不可) あり

即反映されるというメリットを利用して、簡易的に記錄を見るのに利用していただければ良いかと思います。より詳細な記錄を見たいときは Salmon Run Records を使うという使い分けが良いと思います。

# Power Egg Records

主に以下の違いがあります。

Salmon Stats Records Power Egg Records
申請手続き Salmon Stats にアップロードされる限り、不要 スクリーンショットを含むリザルト提出
データの正当性 Salmon Stats の正当性に依存 ほぼ完全
ウェブサイト更新 一時間に一回自動的に更新 記錄追記時
メンテナンス 不要 必要
読み込み速度 ローカル JSON で高速 HTML 読み込み(理論上最速)
過去の記錄 Salmon Stats 設立前のデータなし 管理されているすべてのデータ
記錄の詳細(メンバーなど) なし(技術的には可能) なし
タイ記録など なし(技術的には可能) なし(タイ記録は非常に生まれにくい)
より細かい記錄区分 なし(データがないため不可) あり

こちらもやはりデータの完全性とより細かい区分がないので、大雑把に記錄を見たいときに利用して頂けると良いかと思います。

# つくってみた感想

思ったより差別化できていないので「Salmon Stats Records である必要があるのか」と言われると微妙という気がする。

とはいうものの、あくまでも Salmon Stats が WAVE 記錄しか保存していないので、これ以上表示させるデータがないというのはある。それぞれの WAVE の編成ランキングくらいなら出せると思うが、現在のページからモーダルやページ遷移で詳細ページを出すのがめんどくさいのでやらないことにする。

Salmon Stats のシフト記錄が若干見づらい(最適化されていない)ので、リストから好きなシフトを選んでその時のシフト記錄を見れるようにするとかならありかも知れない。

まあ気が向いたらやる、おやすみ。

価格
    えいむーさんは明日も頑張るよ © 2021