目次
ゲームと今回の目的
「接待焼肉：ベストで回収」は、上司が勝手に網へ置いていく肉をベストな焼き加減で回収して評価を稼ぐゲームです。 肉ごとに焼ける速さが違って、網の汚れが進むほど焼ける速度も上がるので、判断の速さとリスク管理が両方必要になります。
そして今回の本題は、 「このスコア、世界ランキングにしたい」です。
ただ、リアルタイム対戦じゃないので、正直オンライン実装はめちゃくちゃ楽です。 「ゲームが終わったときにスコアを送る」 「ホーム画面でランキングを読む」 これだけで成立します。
ゲーム本体の作り方（ざっくり）
まずゲーム本体は、難しいことをしていません。 やってることを日本語にすると、ほぼこれだけです。
- 肉が置かれたら、時間で「焼け具合」が進む
- プレイヤーはタップで回収してスコアが増減
- 網は時間で汚れて、放置するとペナルティが入る
- 一定時間で終了して結果を保存
重要なのは、ゲームの状態（スコアや焼け具合）を変数で持つという考え方。 見た目は派手でも、中身は「数字の管理」です。
そしてオンラインを足すなら、次の章の考え方を知っておくと一気に楽になります。
オンラインランキングは「こう考える」と一気に楽
よく「オンライン＝難しい」って思うんですが、今回みたいなランキングは別物です。
対戦ゲームみたいに「同時に接続して同期する」必要がないので、 実態はスコアのメモ帳をネット上に置くだけです。
つまり必要なのはこの2つ。
- 送る：ゲーム終了時に「名前・スコア」を送信する
- 読む：ホーム画面で「ランキング一覧」を取得して表示する
これができれば、オンラインっぽさは十分出ます。 逆に、ここに変にリアルタイム要素を入れると一気に難しくなります。今回は入れません。
Cloudflare Workers + KV の全体像
今回の構成は、無料枠でも長く使える可能性が高い、かなり現実的なやつです。
- Workers：「ランキングを送る/読む」受付係（API）
- KV：ランキングデータを保存する箱（簡易DB）
- Pages：home.html / game.html を置く場所（静的サイト）
ざっくり言うと、 「Pagesでゲームを配る」→「Workersにスコアを送る」→「KVに保存」→「ホームで読み込む」 という流れです。
ここで嬉しいのが、サーバーを常時動かす必要がないこと。 Renderみたいに「無料枠のスリープで落ちる」問題が起きにくいです（これが本当にでかい）。
オンライン実装の手順（コードなしで再現）
1) Cloudflareにログインして、Pagesを作る
まずはゲームを置く場所を作ります。Pagesは「HTMLを置くだけで公開」できるので簡単です。
- Cloudflareのダッシュボードを開く
- Pages（ページ）を選ぶ
- 新しいプロジェクトを作成
- GitHub連携（またはアップロード）で公開
公開できたら、home.html が開ける状態になっているはずです。
2) KV（保存箱）を作る
次にランキングデータを保存するためのKVを作ります。
- CloudflareのWorkers & Pagesへ
- KV（Key-Value）を作成
- 名前は分かりやすく（例：
RANKING_KV）
ここが「オンラインの心臓部」です。 ゲーム側は、ここに直接触りません。Workersが仲介します。
3) Workers（受付係API）を作る
ここからが「オンライン実装っぽいところ」ですが、やることは単純です。
- Workersを新規作成
- WorkersにKVをひも付ける（Binding）
- URLが発行される（これがAPIの入口）
大事なのは、Workersが最低限これをやってくれること：
- スコア送信：名前とスコアを受け取ってKVに保存
- ランキング取得：KVからランキングを取り出して返す
ここはコードが必要そうに見えるけど、実際はAIに「これを満たすWorkersのコード作って」と頼めばOKです。 しかも、コードを理解する必要はありません。コピペしてDeployできれば勝ちです。
4) home.html と game.html に「APIの住所」を入れる
最後に、ホームとゲームに「WorkersのURL（API_BASE）」を設定します。
- home.html：ランキングを読む（/ranking）
- game.html：終了時に送る（/ranking）
ここが繋がると、世界ランキングが動きます。 「送信OK」「取得OK」が見えるようにしてあるので、デバッグも楽です。
5) 動作チェック（ここだけやれば判断できる）
- WorkersのURLをブラウザで開いて、動作メッセージが出る
- home.htmlでランキングが表示される（空でもOK）
- game.htmlで1回プレイして、結果で送信がOKになる
- home.htmlの更新でランキングに追加される
ここまで動けば、オンライン実装は成功です。
AIに頼むときのコツ（僕のやり方）
ここが一番大事かもしれない。 AIは「全部作って」って言うと、だいたいズレます。僕はこうやって頼みます。
AIに渡す情報は3つだけ
- 何がしたいか：ランキング送信と取得をしたい
- 使うもの：Cloudflare Workers + KV
- 求める形：home.html / game.html に入れるURLと、Workersの中身（コピペ用）
具体的な頼み方（こう言うと強い）
- 「Workersで /ranking のGETとPOSTを作って」
- 「KVにランキングを配列で保存して、上位50件を返して」
- 「CORSも付けて、Pagesから叩けるようにして」
- 「初心者でもコピペで動く形にして」
これで出てきたコードを、そのままCloudflareに貼ってDeploy。 動かなかったら、エラー画面をスクショしてAIに投げる。 これを繰り返すと、理解してなくても普通に完成します。
詰まりやすいポイント（ここだけ見ればOK）
「ランキングが取れない」
- API_BASE が間違っている（WorkersのURLを入れる）
- Workers側でCORSが不足している（ブラウザから弾かれる）
- WorkersがDeployできていない（古いバージョンが動いてる）
「送信はできるのに反映されない」
- KVのバインド先が違う（WorkersにKVが紐付いてない）
- 保存形式が変（配列じゃなくて文字列になってる）
- 更新ボタン押してない（home側は再取得が必要）
「無料でずっと使える？」
正直「絶対」はないです。でも、少なくとも 常時サーバーを動かす方式よりは遥かに現実的です。 Pages + Workers + KV は「軽いアクセスに強い」構成なので、個人の作品公開にはかなり向いてます。