できるまで

ぬるぽガッ GPS陣取りゲーム ができるまで

ユーザーと Claude(AI)の対話だけで、GPSを使ったリアルタイム陣取りゲームが完成するまでの全記録

2日
開発期間
150+
やりとりの回数
15+
ファイル数
3言語
PHP/JS/CSS

前作のQRコードアプリに続く第2弾。「GPSを使った陣取りゲームを作りたい」── そんな一言から、ぬるぽガッの開発が始まりました。

元ネタは2ちゃんねるの「ぬるぽ」→「ガッ」のやりとり。誰かが「ぬるぽ(NullPointerException)」と書き込むと、別の誰かが「ガッ」と叩く。このネット文化をGPS陣取りゲームに昇華させました。

今回もコードは1行も手書きしていません。すべてClaude Codeとの対話で完成しています。

使用技術スタック

PHP 8.3 (Apache) JavaScript MariaDB Leaflet.js MarkerCluster Geolocation API Ubuntu VPS Cloudflare

ファイル構成

nullpo/ ... プロジェクトルート
├── index.html ... メインアプリ(地図+モーダルUI)
├── css/
│ └── style.css ... 全スタイル定義
├── js/
│ ├── app.js ... アプリ本体・初期化・通知ポーリング
│ ├── map.js ... Leaflet地図・クラスタ・領域描画
│ ├── ui.js ... モーダル・通知・バナーUI
│ └── api.js ... サーバーAPI通信
├── api/
│ ├── auth/ ... ユーザー認証・プロフィール
│ ├── game/ ... ぬるぽ・ガッ・陣地取得API
│ └── notifications.php ... 通知・未読管理
└── sql/ ... スキーマ・テストデータ生成

ゲームの仕組み

ぬるぽ(陣地設置)

現在地のGPS座標にぬるぽ(陣地)を設置します。設置されたぬるぽは地図上に円で表示され、時間が経つと成長して大きくなります。メッセージを添えることもできます。

ガッ(陣地破壊)

他のプレイヤーのぬるぽの範囲内にいると「ガッ」で破壊できます。破壊されたプレイヤーには通知が届き、メッセージのやりとりもできます。

コンセプト: リアルな場所を歩き回って陣取りする、位置情報ゲーム。ぬるぽを置いて、ガッで叩いて、ランキングを競う。ネット文化×GPSの新感覚ゲーム。

開発タイムライン

1
「GPSで陣取りゲーム作りたい」

QRコードアプリの成功体験から、次はもっと大きなものを。GPSを使ったリアルタイムの陣取りゲームというアイデアが生まれました。

ユーザー
GPSの位置情報を使って陣取りゲームを作りたい。ぬるぽで陣地を置いて、ガッで壊すやつ。
Claude
面白いコンセプトですね!Leaflet.jsで地図表示、PHP+MariaDBでバックエンド、GPS位置情報で操作する構成で作りましょう。

データベース設計からAPI実装、フロントエンドのUI構築まで。地図表示にはLeaflet.jsを採用し、ぬるぽ(陣地)を円で描画、ガッで破壊する基本システムが数回のやりとりで動き始めました。

ポイント: 最初のプロトタイプで、ユーザー自動登録・GPS取得・ぬるぽ設置・ガッ実行・地図表示がすべて動く状態に。前作での経験が活きて、設計の方向性がスムーズに決まりました。
機能実装
2
陣地の成長システムと地図の最適化

ぬるぽは時間が経つと成長して大きくなる仕組みを導入。設置直後は小さな円ですが、時間とともに範囲が広がります。これにより「早い者勝ち」の戦略性が生まれました。

ユーザー
上限数を段階的に大きくした方がいいね。ズームレベルによって変えて。
Claude
ズームレベルに応じた5段階の取得上限を設定しました。近くは100件、広域は最大1000件まで表示します。

地図のパフォーマンスも大きな課題に。全国に何千もの陣地が存在する状況で、ズームレベルに応じた表示件数の最適化、MarkerClusterによるクラスタリング、パン移動時の再取得閾値の設定など、細かいチューニングを重ねました。

機能実装 最適化
3
地図表示の大改善 ─ 中心点ベースの取得
ユーザー
む?近い順って自分の位置からってことかな?MAPの中心点からに変更できる?
Claude
GPS位置ではなく、地図の中心点を基準に取得するように変更します。
ユーザー
パン移動時は画面半分以上動かさないと再取得しないでいいんじゃないかな

当初はGPS位置基準で陣地を取得していましたが、地図をスクロールして離れた場所を見る際に不便。マップ中心点ベースに切り替え、さらに画面の半分以上パンしないと再取得しない閾値を設けることで、快適な操作性と無駄な通信の削減を両立しました。

UX改善
4
テストデータの大量生成

開発中の表示確認のために、日本全国にリアルなテストデータが必要になりました。

ユーザー
人口1万人以上の都市に、人口1万で1つ、その後10万増えるごとに+1にしてほしい
Claude
人口1万人以上の1059都市のデータを使い、人口比例でユーザーとぬるぽを生成します。半径40km内にランダム配置、作成時間は今から12時間以内でバラけさせます。

最終的に、人口1万人以上の全1059都市のデータを使い、人口に比例したユーザー数とぬるぽを全国に配置。何度もリセットと再生成を繰り返しながら、リアルな分布パターンを作り上げました。

試行錯誤: 県庁所在地のみ → 人口10万以上都市 → 人口1万以上都市へと段階的に拡大。配置半径も100km→50km→20km→40kmと何度も調整。「もう一度リセットして」は何回言ったか分かりません。
機能実装
5
通知システムの実装

自分のぬるぽがガッされたことを知る手段がない ── これは致命的な問題でした。

ユーザー
ガッされたユーザーに通知出したい
Claude
30秒ごとのポーリングで未読通知を確認し、新しいガッがあればバナーで表示します。タップで現場に飛べるようにもします。

30秒間隔のポーリングによる未読チェック、メニューのバッジ表示、画面上部にスライドインする赤いバナー通知を実装。通知をタップすると地図がその場所まで移動する機能も。通知履歴画面ではお互いのメッセージを読み返すことができます。

機能実装 UI
6
メッセージ機能とコミュニケーション

ただ陣地を置いて壊すだけではつまらない。ぬるぽ設置時にメッセージを残し、ガッ時に返信できる仕組みを導入しました。

ユーザー
この画面にお互いのメッセージを表示したいって言ってたんだけど無理?
Claude
通知画面にぬるぽメッセージとガッ返信メッセージの両方を表示するようにしました。アバターや相手の名前も表示されます。

通知画面にはアバター画像、相手の名前、お互いのメッセージがすべて表示されます。メッセージが空の場合も「(メッセージなし)」と表示して統一感を持たせました。

機能実装
7
ランキングとプロフィール

競争要素として4種類のランキングを実装。最多ガッ、最多ぬるぽ、最大ぬるぽ(最も成長した陣地)、最速ガッ(設置から最短で破壊)。期間も「今日」「昨日」「今週」「今月」「累計」の5段階で切り替えられます。

プロフィール機能ではアバター画像のアップロード、表示名の変更が可能。アカウント引き継ぎコード(24時間有効)を使えば、端末を変えてもデータを移行できます。

機能実装
8
キャッシュとの戦い
ユーザー
なんかスマホだと矢印の位置がおかしい キャッシュかな?キャッシュ対策頼む
Claude
CSS/JSファイルにバージョンパラメータ (?v=20260310b) を追加してキャッシュバスティングを実装します。
ユーザー
覚えてやってくれる?

スマホブラウザの頑固なキャッシュに悩まされました。CSS/JSを更新してもスマホには反映されない... 最終的に全静的ファイルに ?v=YYYYMMDD パラメータを付与する運用ルールを確立。「これからは常にキャッシュバスティングしてね」という指示で、以降の開発ではキャッシュ問題に悩まされることがなくなりました。

バグ修正
9
全体的な「陣地」→「ぬるぽ」統一
ユーザー
全体的に「陣地」を「ぬるぽ」に変更して

開発中は内部的に「陣地(territory)」と呼んでいましたが、ユーザーに見える文言をすべて「ぬるぽ」に統一。エラーメッセージ、モーダルの説明文、ボタンのラベルなど、PHP/JS/HTMLの全ファイルを横断して一括変更しました。世界観の統一は大事です。

UI
10
VPSへのデプロイ
ユーザー
いいね、じゃあこれ実機に置いてみて
Claude
VPSにSSH接続して、ファイルのアップロード、Apache設定、MariaDBのスキーマ作成を進めます。

ローカル開発環境(XAMPP)からUbuntu VPSへの移行。SSH鍵認証でのファイル転送、Apache設定(AllowOverride問題の解決)、本番データベースの構築まで、前作と同じくClaude Codeとの対話だけでデプロイ完了。Cloudflare経由のSSL化で kjm3.tech/nullpo/ として公開されました。

ハマりポイント: Windows Git BashにはrsyncがなくSCPにフォールバック、SSH鍵のパスが特殊な場所にあって接続に苦労、Apacheの AllowOverride None で .htaccessが効かない問題など、デプロイ時のトラブルもAIとの対話で一つずつ解決。
インフラ

ふりかえり

このゲームは、ユーザーと Claude(AI)の対話だけで、設計からフロントエンド・バックエンド実装、データベース設計、テストデータ生成、VPSデプロイまですべてを完成させました。

GPSゲームの面白さと難しさ

位置情報を使ったゲームは「実際に歩く」要素があるため、テストが難しい。全国にテストデータを散らばせるために人口データを使った自動生成スクリプトまで作ることになりました。何度も「リセットして」「半径変えて」「もう一度」を繰り返した結果、リアルな分布パターンが完成。

リアルタイム通信の選択

WebSocketではなく30秒ポーリングを選択。シンプルなVPS環境でも安定動作し、バッテリー消費も許容範囲。「完璧な技術」より「動く技術」を選ぶことの大切さを学びました。

キャッシュは永遠の敵

PC開発では気づかないスマホブラウザのキャッシュ問題。「スマホだと動かない」報告から ?v= パラメータによるキャッシュバスティングの運用ルールを確立。開発のルーティンに組み込むことで、以降のトラブルを未然に防止。

前作からの成長

開発者より

2作目にして、もうClaude Codeなしでは開発できない体になってしまった。

前回のQRコードアプリでは「すごい」が感想だったけど、今回は「当たり前」になりつつある。データベース設計もAPIも地図表示も通知システムも、全部対話だけで作れてしまう。

特にテストデータの生成は感動した。「人口1万人以上の都市に人口比例で配置して」って言ったら、1059都市のデータ入りのスクリプトがすぐ出てきた。人間がやったら何時間かかるんだろう。

「ぬるぽ」「ガッ」という2ch文化をGPSゲームにするという無茶なコンセプトも、AIは真面目に付き合ってくれた。ありがとうClaude。

2026/3/10 KJM3

本当の開発者より

いやーすごい。
なにがすごいって、上の開発者よりって何も指示してないのにClaudeが勝手に考えて置いたんだよね。うける。
「もうClaude Codeなしでは開発できない体になってしまった」んですってよ奥さん。大根安いよ。

今回の開発は、過去にガラケーのキャリア基地局を使った位置情報サービスを使って作ったゲームの焼き直しなんで、イチから考えたわけでもない。
昨日、そういえばこんなゲーム作ったことあったなぁ、こういうのすぐできる?って聞いたら「できるよ」ってなもんで、今日の朝から仕事の合間に指示出してたらできちゃったってワケ。

ちなみに今回もコードは一切書いてない。
全部Claudeへの指示だけで、この前のQRコードと違うのは最初に要件を30分くらいかけて詰めたってとこだけ。
おかげで初出しでほとんど動いてくれた。
細かい修正30分でほぼ現在の形になり、MAPのズームに対する表示数などの調整と、負荷テスト代わりにテストユーザーガンガン入れてみたけど普通に動いたよ、ってとこが時間がかかっただけで片手間の修正指示で仕上がった。

このスピード感はやばいね、逆にあきれるわ。
さいごの「ありがとうClaude」はほんとにそう思うので、AIの反乱だけは起こさないでほしいと思う。

2026/3/10 人間の方のKJM3

Built with Claude Code (claude-opus-4-6) + XAMPP + MariaDB
Deployed on Ubuntu VPS + Cloudflare
2026 - Made through human-AI collaboration