Skip to content

キャラクター自動更新機能

ゲームAPIからキャラクターデータを自動取得し、DB更新・画像ダウンロード・インポート生成までを一括で行う機能。

コマンド一覧

データソース指定(ブラウザ自動化なし)

reseponses/ に配置したJSONファイルを読み込んで処理する。ブラウザは立ち上がらない。

bash
# 全ソース (winrate.json + battle_detail.json + memo.json)
yarn update-characters

# winrate.json のみ
yarn update-characters:winrate

# battle_detail.json のみ
yarn update-characters:detail

ブラウザ自動化 + 更新

Chrome/Edgeを自動起動し、ゲームサイトからAPIレスポンスを傍受して保存した後、更新パイプラインを実行する。

bash
# 勝率リストページから winrate.json を取得 → 更新
yarn update-characters:fetch

# 試合詳細URLから battle_detail.json を取得 → 更新
yarn update-characters:fetch-detail "https://xzysteam.shengtiangames.com/..."

内部フラグ

npx tsx scripts/data/update-characters.ts [オプション]

--fetch                       ブラウザ自動化で勝率データを取得
--fetch-detail <url>          ブラウザ自動化で試合詳細データを取得
--source winrate|detail|memo|all   処理するデータソースを指定 (既定: all)

データフロー

[ブラウザ自動化 (--fetch / --fetch-detail)]
  ↓ APIレスポンス傍受
reseponses/winrate.json / battle_detail.json
  ↓ yarn update-characters
[差分比較 → characters.json 更新]

[画像ダウンロード (avatar URL → public/images/starward/)]

[imageImports.ts 再生成]

データソース

ファイル取得元構造
winrate.json勝率リストAPI{ data: [{ role_code, role: {...} }] }
battle_detail.json試合詳細API{ data: { WinnerDetails: [...], LoserDetails: [...] } }
memo.json従来フォールバック{ data: { WinnerDetails: [...], LoserDetails: [...] } }

各ファイルの role / Role オブジェクトには code, name_jp, english_name, cost, avatar_link, img_jp 等が含まれる。

ファイル構成

scripts/data/
  update-characters.ts      # メインパイプライン (DB更新 + 画像DL + imports生成)
  fetch-winrate.ts          # ブラウザ自動化: 勝率データ取得
  fetch-battle-detail.ts    # ブラウザ自動化: 試合詳細データ取得
  browser-utils.ts          # 共通ブラウザユーティリティ (起動・セッション・CDP)
  generate-imports.ts       # imageImports.ts 自動生成

reseponses/                 # データソースJSON (gitignore対象)
  winrate.json
  battle_detail.json
  memo.json

.browser-session/           # ブラウザセッション (gitignore対象)
  user-data/                # Chrome user-data-dir

ブラウザ自動化の仕組み

  • CDP (Chrome DevTools Protocol) で Chrome/Edge に接続
  • Playwright の connectOverCDP() を使用 (pipe ではなく WebSocket)
  • Chrome を --remote-debugging-port で起動し、WebSocket で通信
  • セッションは --user-data-dir で永続化(2回目以降はログイン不要)

WSL2 対応

  • --user-data-dir パスを Windows 形式 (C:\...) に自動変換
  • CDP 接続先に Windows ホスト IP を使用
  • Chrome/Edge を WSL パス (/mnt/c/...) から自動検出

手動でレスポンスファイルを用意する場合

ブラウザ自動化が動かない環境では、手動でJSONファイルを用意できる:

  1. ブラウザでゲームサイト (https://xzysteam.shengtiangames.com/...) を開く
  2. DevTools (F12) → Network タブを開く
  3. 勝率リストまたは試合詳細ページにアクセス
  4. 該当APIレスポンスを右クリック →「Copy response」
  5. reseponses/winrate.json または reseponses/battle_detail.json として保存
  6. yarn update-characters:winrate または yarn update-characters:detail を実行