ramen-typing-game

夜のラーメン屋台で、出てくる注文をローマ字で打って平らげていくタイピングゲーム。 券売機で食券を買うと、食券の時間内は食べ放題。麺がのびる前にどんどん食べて、お会計で食券代の元を取ろう。

遊ぶ: https://ramen-typing.com

スクリーンショット

注文を打って平らげる	閉店後のお会計

遊び方

1. 食券を選ぶ。 屋台の脇の券売機で、腕前に合わせてコースの食券を買う。

   食券	食券代	食べ放題の時間	注文の長さ
   並	3,000 円	60 秒	よみ 2〜7 文字
   大盛り	5,000 円	90 秒	よみ 5〜10 文字
   特盛り	10,000 円	120 秒	よみ 9 文字以上

2. 注文を打つ。 丼が出てきたら、注文のよみをローマ字で打つ。打ち切ると平らげたことになり、丼の値段がお会計に足される。 「し」を shi でも si でも打てるように、よくあるつづりはどれでも受け付ける。

3. 麺がのびる前に食べる。 丼は出てから時間がたつと麺がのびていく。

   • 出てすぐ平らげると、できたての上乗せで定価より高くなる
   • のびかけになると、定価より安くなっていく
   • のびきると丼は下げられ、お会計には入らない

4. 替え玉で時間を延ばす。 ミスなしで 30 キー続けて打つと替え玉になり、食べ放題の時間が 2 秒延びる。

5. ミスなしで続けて平らげる。 ミスせず、丼を下げられずに続けて平らげると、連続ボーナスで丼の値段に倍率がかかる（3 杯目から ×1.1、5 杯目から ×1.2、10 杯目から ×1.5）。

6. 店主のおすすめを狙う。 ときどき出る「店主のおすすめ」の特別な丼は、値段が 2 倍になる。

時間が来ると閉店。結果画面で、お会計と食券代の差し引き（お得か損か）、称号、正確率、打ち間違いの多いキーなどが分かる。 コースごとの自己ベストが残り、結果は X で共有できる。

遊ぶのに必要なもの

• 物理キーボード（スマホやタブレットのタッチ操作では文字を打てない）
• 日本語入力（IME）をオフにして、半角英数で打つこと（オンのまま打つと、切り替えるよう案内が出る）

---

開発者向け

タイピングゲームを、ループエンジニアリング（AI エージェントが Issue を自律実装し、CI と CodeRabbit が通れば自動マージする開発手法）で開発している。

必要なもの

• Node.js 24 以上
• pnpm 10
• GitHub CLI（gh auth login 済み）
• Claude Code（ループを回すマシンのみ）

はじめかた

pnpm install
pnpm dev        # http://localhost:3000
pnpm verify     # lint / typecheck / test / depcruise / knip
pnpm build      # 本番ビルド（static export で out/ に静的ファイル一式を出力する）
pnpm start      # out/ を Cloudflare Pages と同じ規則で配信する（http://localhost:3100）
pnpm test:e2e   # 本番ビルドをブラウザで開いて通しで遊ぶ E2E テスト（e2e/）

E2E テストは初回だけ pnpm exec playwright install chromium でブラウザを入れてから実行する。 ブラウザが要って時間がかかるので pnpm verify には含めず、CI の e2e ジョブで実行している。

環境変数

名前	用途	未設定のとき
NEXT_PUBLIC_SITE_URL	サイトの URL（例: https://example.com）。メタデータの基準 URL（OGP 画像などの絶対 URL）・各ページの正規 URL（canonical）・/sitemap.xml・/robots.txt・トップページの構造化データ（JSON-LD）がこの値を使う	http://localhost:3000 を使う（ページは表示されるが、検索エンジン向けの URL がローカルのものになる）
NEXT_PUBLIC_CONTACT_EMAIL	お問い合わせを受け付けるメールアドレス（例: [email protected]）。お問い合わせページ（/contact）に、宛先と件名が入った状態でメールソフトを開くリンクを出す。収集ボットに拾われにくくするため、サーバーから返す HTML にはアドレスを平文で載せず、ブラウザで表示する	メールの手段を出さずに「準備中」と出す（メールアドレスの形でない値のときも同じ）
NEXT_PUBLIC_ADSENSE_PUBLISHER_ID	Google アドセンスのパブリッシャー ID（ca-pub-…）。全ページの head にアドセンスのスクリプト（審査用のコードを兼ねる）を読み込み、/ads.txt を返す	スクリプト・/ads.txt・広告枠のどれも出さない（/ads.txt は 404）
NEXT_PUBLIC_ADSENSE_SLOT_ID	トップページの紹介の下に出す広告ユニットの ID（数字）	広告枠を出さない（パブリッシャー ID が無いときも出さない）
NEXT_PUBLIC_ADSENSE_STAGE_BOTTOM_SLOT_ID	トップページの舞台のすぐ下に出す横長の広告（728×90、狭い画面では幅に合わせて縮む）の広告ユニットの ID（数字）	広告枠を出さず、場所も空けない（パブリッシャー ID が無いときも出さない）
NEXT_PUBLIC_ADSENSE_STAGE_SIDE_SLOT_ID	トップページの舞台の右に出す縦長の広告（300×600）の広告ユニットの ID（数字）。幅 1360px 以上のウィンドウでだけ出す	広告枠を出さず、場所も空けない（パブリッシャー ID が無いときも出さない）
NEXT_PUBLIC_GA_MEASUREMENT_ID	Google アナリティクス 4 の測定 ID（G-XXXXXXXXXX）。すべてのページの表示と、プレイの成績・リプレイと共有・つまずき・設定の操作をカスタムイベントで計測する（一覧は docs/analytics.md）	GA4 のタグを一切読み込まない

NEXT_PUBLIC_ の変数はビルド時に値が埋め込まれる。Cloudflare Pages のプロジェクトの設定で登録し、変えたら再ビルドする（下の「デプロイ」）。 どれも未設定のままでもビルドは通る。ローカルでは .env.local に書く。

デプロイ

DB・認証・サーバーで動く処理が無いので、Next.js の static export で静的ファイルを出力し、Cloudflare Pages で配信する。 Cloudflare Pages のプロジェクトをこのリポジトリにつなぎ、ビルドの設定を次のようにする。

項目	値
フレームワークのプリセット	なし（None）
ビルドコマンド	pnpm build
ビルドの出力ディレクトリ	out
環境変数 NODE_VERSION	24（Node.js のバージョンの指定。package.json の engines に合わせる）
環境変数 PNPM_VERSION	10.32.1（package.json の packageManager に合わせる）

• 本番ブランチは production にする（「設定 → ビルド → ブランチの制御」）。main はループが自動マージするので、本番に直接つながないため。 プレビューのデプロイは「カスタムブランチ」で main だけを含める（ループの loop/* ブランチごとにビルドが走らないようにする）。

• 本番に出すときは、main のプレビューを確かめてから、production をそのプレビューのコミットまで進める。 確かめたあとにループが main へマージすることがあるので、main ではなくコミットの SHA を指定する（SHA は Pages のデプロイの一覧に出る）。

  git fetch origin
  git push origin <確かめたコミットの SHA>:refs/heads/production   # fast-forward のみ。production に直接コミットしない
  

• 上の表の NEXT_PUBLIC_ の変数は、Pages のプロジェクトの「設定 → 変数とシークレット」に登録する。 サイトの URL・問い合わせのメールアドレスは本番（Production）とプレビュー（Preview）の両方に、GA4 とアドセンスの ID は本番だけに入れる（確認用のアクセスで計測が汚れるのと、審査を通していないプレビューの URL に広告を出さないため）。 ビルド時に埋め込まれるので、変えたら「デプロイを再試行」で再ビルドしないと反映されない。

• /about などのページは、拡張子なしの URL で配信される（out/about.html を Cloudflare Pages が /about で返す）。 存在しないパスには out/404.html を 404 で返す。

• OGP 画像・X 用の画像・アイコンは拡張子の無いファイルとして出力されるので、public/_headers で Content-Type: image/png を付けている。

• ads.txt は、NEXT_PUBLIC_ADSENSE_PUBLISHER_ID があるときだけ出力される。

ループを回す

GitHub 側の設定（ラベル、CodeRabbit、ブランチ保護、auto-merge）が済んでいないと、ループは安全に回せない。 先に docs/loop-engineering.md の「GitHub 側のセットアップ」を済ませること。

pnpm --silent loop:decide   # 次に何をするかを確かめる（読み取り専用）
pnpm loop:once              # 1 tick だけ実行
pnpm loop 10                # SUCCESS が 10 回になるまで回す

タスクは Claude Code で /loop-issue <やりたいこと> を実行して起票する。

ドキュメント

docs/README.md から読む。

参加のしかた

誰でも Issue と PR を出せる。取り込むかどうかはオーナーが判断する。 流れと方針は CONTRIBUTING.md を、脆弱性の報告は SECURITY.md を参照。

ライセンス

MIT License