JRA の勝負服を組み合わせて作成し、URL で保存・共有できる Web ツールです。
作成した勝負服には 6 文字のコードが割り当てられます。URL を Discord や SNS に貼り付けると、そのコードに対応した勝負服が OGP のプレビュー画像として表示されます。
制作の背景
このツールは、制作中の競馬ゲームで使用する勝負服を作成し、確認するために開発しました。
ゲーム内で勝負服を扱うには、それぞれを個別の画像として管理するのではなく、色や柄の組み合わせをデータとして保存し、同じデータから同じ勝負服を再現できる仕組みが必要です。
そこで、JRA の勝負服を構成する要素を整理し、次の 6 つの属性で表現する形式を設計しました。
- 胴の地色
- 胴の柄
- 胴の柄色
- 袖の地色
- 袖の柄
- 袖の柄色
勝負服メーカーは、このデータをブラウザー上で作成し、描画結果を確認するためのツールとして始まりました。
JRA の勝負服に対応
現在は、JRA の勝負服に対応しています。
任意の図形を自由に描くツールではなく、JRA で定められている色と、胴・袖の柄を選択して組み合わせます。
現在の選択肢は次のとおりです。
- 色：13 色
- 胴柄：23 種類
- 袖柄：18 種類
無地の場合に柄色を使用しないことを考慮すると、UI 上で選択できる設定は 10,767,666 通りになります。
ただし、地色と柄色に同じ色を指定した場合など、異なる設定でも見た目が同一になる組み合わせを含みます。そのため、これは視覚的に異なるデザイン数ではなく、選択できる設定の組み合わせ数です。
6 文字コードによる保存と再現
作成した勝負服は、6 文字のコードで表現します。
たとえば、次の URL に含まれる 1DD500 が勝負服のコードです。
https://app.akiplaylab.com/racing-silks/1DD5006 文字の各桁が、胴と袖の色や柄に対応しています。
この URL を保存しておけば、アカウント登録やデータベースへの保存を行わなくても、同じ勝負服を再現できます。
ゲーム、Web ツール、URL の間で共通のデータを利用できることも、この形式を採用した理由です。
現在のコード構造と、色・柄の対応は、次のページで公開しています。
この仕様は、現在の勝負服メーカーと競馬ゲームで使用する形式を説明するものです。ゲーム制作を進める中で、より適した設計が見つかった場合は変更する可能性があります。
6 文字だけでは勝負服を判別できなかった
6 文字コードによって、勝負服を短いデータとして扱えるようになりました。
一方で、実際に使ってみると、コードだけを見ても、どのような勝負服なのかすぐには分かりませんでした。
天皇賞（秋）2024 のレース再現を制作した際には、各馬の勝負服を作成し、その URL を自分の Discord サーバーへ貼り付けて確認していました。
しかし、複数の URL が並んでいても、6 文字のコードだけでは、それぞれがどの勝負服なのか判別できません。確認するたびに URL を開く必要がありました。
そこで、URL を貼り付けた時点で勝負服を確認できるように、コードに応じて変化する OGP のプレビュー画像を実装しました。
OGP には、次の情報を表示しています。
- 勝負服メーカーの名称
- コードから復元した勝負服
- 胴と袖の色・柄の名称
これにより、URL を 1 件ずつ開かなくても、Discord 上で勝負服を見分けられるようになりました。
開発用の機能から、共有のための機能へ
動的 OGP は、最初から SNS での宣伝を目的として作った機能ではありません。
自分の開発作業で発生した、
6 文字コードだけでは、どの勝負服なのか分からない
という問題を解決するために実装しました。
しかし、この仕組みは、自分以外の人が勝負服を作成して共有する場合にも有効です。
URL を Discord や SNS に貼り付ければ、リンクを開く前に作成結果を確認できます。リンクを開けば、同じ勝負服を再現した状態から、さらに色や柄を変更できます。
現在の URL は、次の役割を兼ねています。
- 勝負服を保存・再現するための設定データ
- 他の人へ渡すための共有リンク
- 作成結果を示す OGP プレビュー
- 同じデザインから編集を始めるための入口
内部用の確認ツールとして使い始めましたが、既存の勝負服作成ツールを調べたところ、私が確認した範囲では、作成した勝負服が URL ごとの OGP として表示されるものは見つかりませんでした。
そのため、自分のゲーム制作だけに使うのではなく、Web ツールとして公開することにしました。
OGP 画像の生成とキャッシュ
動的 OGP を実装した当初は、生成したプレビュー画像を自分のサーバー上へ保存し、同じ勝負服では生成済みの画像を再利用していました。
しかし、開発中に画像を変更しても、Discord 上では以前の OGP 画像が表示されたままになることがありました。
調べる中で、Discord や X などのプラットフォームは、取得した OGP の情報や画像を、それぞれの側でキャッシュしていることを知りました。
そのため、自分のサーバー上にある画像を更新しても、共有先が同じ URL の情報を再取得するまでは、表示がすぐに切り替わるとは限りません。
ここで、自分のサーバー側で行う画像の保存と、Discord や X 側で行われる OGP のキャッシュは、別の問題として考える必要があると分かりました。
現在は、OGP 画像が要求された時点で、URL に含まれる 6 文字コードから勝負服を復元し、その場で画像を生成して返しています。生成した画像は、自分のサーバーには永続保存していません。
SNS のクローラーが URL を取得
↓
6 文字コードから勝負服を復元
↓
OGP 画像を生成して返す
↓
SNS 側で OGP がキャッシュされる
この構成では、生成画像の保存先、削除、バックアップなどを管理する必要がありません。また、生成済み画像を移行しなくても、アプリケーションと勝負服の定義があれば、同じ 6 文字コードから OGP 画像を再生成できます。
一方で、OGP は SNS のクローラーからのアクセス時に、一定時間内で安定して画像を返す必要があります。画像生成処理やサーバーの応答が遅い場合、プレビューが正常に取得されない可能性があります。
そのため、OGP プレビューの安定性を改善する目的で、画像生成処理も継続的に見直しています。
直近の計測では、画像生成ロジックそのものを約 6 倍、ネットワークやサーバー処理を含む応答全体では約 2 倍に高速化しました。
ただし、画像を永続保存しないこと自体を固定した設計方針にはしていません。今後の表示安定性やサーバー負荷によっては、生成済み画像を一時的に再利用するサーバー側のキャッシュを導入する可能性があります。
その場合も、勝負服の元データは 6 文字コードであり、OGP 画像はコードから再生成できる派生データとして扱います。キャッシュを削除しても再構築できる状態を保つことで、配信の安定性とサーバー移行のしやすさを両立できると考えています。
また、OGP の内容を変更しても、各プラットフォームに以前の情報がキャッシュされている間は、すぐに新しい表示へ切り替わらない場合があります。これは、自分のサーバー側で画像を保存するかどうかとは別に存在する制約です。
制作を通して得たもの
勝負服メーカーは、色と柄を選択する比較的小さな Web ツールです。
一方で、制作を通して、次のような仕組みを形にできました。
- JRA の勝負服をデータとして表現する設計
- 6 文字コードによる保存と復元
- URL を保存データとして利用する構成
- 同じデータをゲームと Web ツールで共有する仕組み
- URL の内容に応じて変化する動的 OGP
- 内部コードを、人が確認できる画像と名称へ変換する仕組み
- 6 文字コードから OGP 画像を再生成できる構成
- SNS 側とサーバー側のキャッシュを分けて考える設計
- OGP 画像の生成速度と配信安定性の改善
特に、作成結果を URL で再現できる Web ツールと、動的 OGP の組み合わせには、勝負服メーカー以外にも応用できる汎用性があると感じています。