ゲームのバグを集める図書館を、AIと作った

ゲームのバグを集める図書館を、AIと作った

目次

ゲームのバグとか、裏技とか、MODが好きだ。

2025年の終わり、その好きなものを集める「Glitch Hunter Library」を作った。ゲームの変な挙動を投稿して、眺めて、気に入ったものに投票する。さらに、投稿のハッシュをBaseというブロックチェーンに刻むことができる。

Base Japanの「大喜利.hack Vibe Coding Hackathon」に出して、審査員特別賞をいただいた。

制作中はChatGPTとずっと相談していた。今回、その頃の会話を読み返したら、完成したアプリだけ見ていても分からない迷いや判断が、かなり残っていた。

Glitch Hunter Libraryの既存ビジュアル。タイトルと、ゲーム画面やコントローラーのピクセルアート。

最初は、好きなものを紹介するサイトだった#

11月29日の会話に、こんな発言がある。

バグとかチートとかMOD好きだね。

そこから「バグ技図書館」の話になった。最初に考えていたのは、ゲームのバグやMODを記事で紹介するサイト。どうぶつの森が好きなので、その非公式パッチのページを貼って、「こういうのを紹介したい」と相談している。

ChatGPTは、既存のブログやNotionに置き場所を作る案を出してきた。でも、自分は本格的なサイトを作りたかった。どうぶつの森だけに絞るつもりもなく、ほかのゲームも紹介したいと伝えた。

この時点ではAstroで作る話をしていた。MarkdownとMDXのどちらで記事を管理するか、トップページをどう見せるか。まず考えていたのは、好きなものが並ぶサイトの形だった。

デザインの相談も、すんなりは進んでいない。黒い背景、サイバーっぽい雰囲気、横に並ぶカード。そういう案に対して、かなり注文をつけていた。

なんで全体的に黒いの?サイバー感やめろ。ポップな感じで。

Three.jsやGSAPを使って、ページ全体を動かしたいとも言っている。技術名だけ指定しても、頭にある雰囲気までは伝わらなかった。

「Bで行こう」で、Baseのアプリになった#

12月10日には、Base上で何を作るかという相談をしていた。

いくつかの案の中にあったのが、世界中のゲームバグを投稿・閲覧・投票できる「Glitch Hunter Library」。図書館という考えに、ほかの人も参加できる仕組みが加わった。

別案も聞いたあと、自分は「Bで行こう」と返した。

作るものは、ゲーム名、タイトル、動画URL、説明などを持つ投稿の一覧と詳細、投稿フォーム、投票機能。実装はNext.jsとTypeScript、データベースはPostgreSQLを使う構成になった。

DBも、最初の提案をそのまま採用したわけではない。ChatGPTはSupabaseを勧めたけれど、別案件ですでに使っていたので「AWSじゃだめ?」と聞いた。最終的にAWSのRDSでPostgreSQLを用意した。

12月10日にはDB接続とマイグレーション、Vercelへのデプロイを終え、翌11日にはテストネットで動いたと報告している。

11月の図書館サイト案から、少しずつ形が変わっていた。

ChatGPTで相談し、GeminiとClaude Codeで作る#

当時、役割はかなりはっきり分けていた。

画面UIのhtmlコーディングは、geminiにやらせます。実装は、claude codeです。

ChatGPTとは、何を作るか、どういう構成にするか、次に何を実装するかを相談する。そこでまとめた内容を、実装用のプロンプトにして渡す。

GeminiにはHTMLとCSSの静的な画面を作らせた。その画面をNext.jsのコンポーネントに分ける作業や、DB・API・スマートコントラクトをつなぐ実装はClaude Codeに任せた。後半の改修ではCodexも使っている。

会話には「プロンプトください」が何度も出てくる。

ただ、プロンプトを受け取る前にも修正していた。Tailwindは使わない。CSSもGeminiに書かせる。Base App内の小さな画面でも使えるようにする。生成された案を見て、違うと思ったところを具体的に戻す。

12月15日には、Codexに前提を渡すためのagent.mdについて相談した。自分が入れたかったのは、BaseのドキュメントのURLとハッカソンの内容。実装だけ進んで、何に出すアプリなのかが抜けないようにしたかった。

振り返ると、コードを書くことと同じくらい、AIに渡す前提を揃えるやり取りが多かった。

「スタンプ」って、何が残るのか#

12月12日にはBase Appから起動できるようになった。自分で投稿する題材として選んだのが、ポケモン ダイヤモンド・パールの「なぞのばしょ」だった。

翌13日、ハッカソンの要項をChatGPTに渡した。テーマは「Baseを使って面白いことをする」。ここで、すでに動いていたアプリをどう磨くか相談し、追加機能として選んだのがこれだった。

A:投稿スタンプ(ハッシュ刻む)

名前だけだと分かりにくくて、「スタンプ絵文字が表示されるの?」とも聞いている。

実際に残すのは、投稿内容から計算したハッシュだ。ハッシュは、内容を照合するための短い指紋のようなもの。タイトル、ゲーム名、動画URL、説明、作成日時、投稿者の識別子などを決まった順序に並べ、keccak256で計算する。

本文はDBに保存し、そのハッシュをBase mainnetに記録する。スタンプが成功すると、画面にスタンプ済みの表示と、BaseScanで取引を確認できるリンクを出す。

ここは、今あらためて書くなら正確にしておきたい。

ハッシュを刻んでも、動画や記事そのものが永久保存されるわけではない。 元のデータが残っていれば、それから計算したハッシュと、過去に記録されたハッシュを照合できる。スタンプだけでバグの実在や最初の発見者まで証明できるわけでもない。

当時作ったのは、気に入った投稿に、その内容を照合するためのオンチェーンの記録を付ける仕組みだった。

動いていても、面白さが伝わるとは限らない#

機能が揃ったあとも、まだ気になっていたことがある。12月16日、自分はこう聞いていた。

面白さの一撃の件ですが、UI上で一瞬で伝わりますか?

投稿できる。投票できる。スタンプもできる。でも、初めて開いた人に、それが分かるだろうか。

相談して詰めたのは、タイトルの下に置く一行説明、Browse / Post / Stampの導線、一覧でも見えるスタンプ済みの表示だった。機能を増やす話から、今ある機能をどう見せるかに話題が変わっている。

12月17日には実装完了と、Base Appの検索にも出るようになったことを報告した。18日に提出。20日の発表は5分以内、質疑応答が2分だった。

発表原稿もChatGPTと相談した。なぞのばしょの投稿を見せ、スタンプを見せ、BaseScanにつなぐ。画面を触りながら、何を作ったのか説明できる順番を考えていた。

審査員特別賞。でも、悔しかった#

結果は審査員特別賞だった。

その日の会話に、自分の反応がそのまま残っている。

優勝はできませんでしたが、審査員賞もらえました。残念です

優勝したかったので、悔しかった。そのあと「審査員特別賞もらえたから」と気持ちを切り替えて、Xに受賞報告を投稿している。

今回、履歴を読み返してよかったのは、その途中まで思い出せたことだった。最初は好きなバグやMODを紹介したかった。そこから投稿と投票のあるアプリになり、Base Appへの対応、スタンプ、説明の見直し、発表まで進んだ。

AIには、企画の相談から画面、実装、発表原稿まで手伝ってもらった。その間、自分は何度も「それは違う」「こっちで行く」と返していた。

Glitch Hunter Libraryは、そういうやり取りを重ねて作った、ゲームのバグの図書館だ。


この記事は、2025年11〜12月のChatGPTとの会話と、当時のリポジトリの記録をもとに振り返っています。

Related Post
Astroで画像のホバーCSSが効かなかった原因
image

このブログを直している途中で、「ホバー時の画像のCSS変えた?」と聞いたことがある。

記事カードの画像は、普段は少し色を落とし、マウスを重ねると元の色に戻るようにしている。その表示を直した履歴を読むと、変更したのはCSSではなく、画像コンポーネントの属性の受け渡しだった。

Meta Data
公開日:2026-09-19
Tags:
#個人開発
#tech
「新しい順」だけでは足りなかった。記事の並び順を考える
image

このブログで、グリッチハンターの記事をピン留めしてほしいと頼んだあと、「先頭になってない」と伝えたことがある。

記事のデータにピン留めの印を付けることと、画面の先頭へ並べることは、別の処理だった。記事を増やしながら、何を基準に並べるかも決める必要が出てきた。

Meta Data
公開日:2026-09-19
Tags:
#個人開発
#tech
投稿と再現手順を、まとめて保存する。グリッチハンターのDB設計
image

ゲームのバグを投稿するアプリには、タイトルや説明だけでなく、「どう操作すると、その現象が起きるか」という再現手順も必要になる。

Glitch Hunter Libraryのコードを読み返すと、投稿と手順を別のテーブルに保存し、両方の書き込みを一つのトランザクションにまとめていた。今回は、その実装をたどってみる。

Meta Data
公開日:2026-09-18
Tags:
#個人開発
#tech
Astroブログの下書きを、一覧・RSS・サイトマップからも除外する
image

このブログは、AIと下書きを作り、ローカルで読んでから公開している。下書きは手元で確認したい。でも、本番には出したくない。

そのために記事へ付けているのが、draft: trueだ。今回整理したのは、この値を記事ページだけでなく、一覧やRSSなどの出力にも反映する処理だった。

Meta Data
公開日:2026-09-18
Tags:
#個人開発
#tech
AstroブログのSEOを整えた。メタデータとSearch Consoleで確認したこと
image

このAstroブログのSEO周りを、Codexと一緒に整えた。canonical、OGP、記事の構造化データを確認し、Google Search Consoleも設定した。

その中で気になったのが、「memida」と検索するとContactが上の方に出てくることだった。ページを直したことと、検索結果が変わったことを混同しないように、作業と確認結果を分けて残しておく。

Meta Data
公開日:2026-09-18
Tags:
#個人開発
#tech