バイブコーディング × Cursor 入門講座 05 スマホアプリ開発 スマホブラウザ（レスポンシブ＋PWA）

はじめに

ゲーム開発はまだ途中で、未実装・バグなど問題を抱えていますが、現段階ではコードがまだそこまで複雑化していないので、この状態でスマホアプリ化が出来るかどうか試してみようとAIに相談したところ、２つのプランを提示してくれました。

今回は、その１つを実装してみた記録的メモです。

スマホアプリ化への２パターン

自作ゲームのスマホ対応については以下のような進め方が現実的です：

ブラウザ対応（レスポンシブ＋PWA）

メリット

  • すぐに試せる
  • インストール不要（URLを送るだけでプレイ可能）
  • Hugoで作ったポートフォリオに組み込める

やるべきこと

  • viewport メタタグの設定
  • フルスクリーン化（requestFullscreen()）
  • スマホ用の仮想ボタン（Canvas内またはHTML UIで実装）
  • タッチ操作（touchstart / touchend イベント）
  • PWA対応（manifest.json＋service worker）

アプリ化（Capacitor.jsやCordova）

メリット

  • Android/iOSにネイティブアプリとして配布可能
  • アプリストア掲載も視野に入る
  • オフラインでも動作可能

やるべきこと

  • Node.js環境で Capacitor（またはCordova）導入
  • HTML/JSゲームを組み込む
  • Android Studio や Xcode を用いたビルド・署名
  • ストアポリシー対応（アイコン、プライバシーポリシーなど）

記事ネタとしても魅力的

  • 「JavaScript製のSTGゲームをスマホアプリにする方法」
  • 「Capacitor入門：Webゲームをアプリに変換する」
  • 「タップ操作で遊べるSTGをHTMLで作ってみた」

迷っていることがあれば

  • まず スマホブラウザ対応＋フルスクリーン＋タップ操作
  • その後に アプリ化にチャレンジ

という流れもおすすめです。

競合問題

user icon

スマホブラウザ対応（レスポンシブ＋PWA対応）に間する、一連の処理を、マークダウンでリスト化し、尚且つ、実装する順序も大事だと思うので優先順毎にナンバリングし、尚且つ、出来るだけ詳細に実装内容を書いた方が、Cursorで開発する上では重要な気はします。

尚且つ、スマホブラウザ版の完成後、出来上がったコードを、「 スマホアプリ化（Capacitor.jsやCordova）」へ流用出来るかどうかも気になります。

両者を同時に開発うえで、余計なコードが追加されたことで、後者の開発が難航する危険性も気になります。
（この辺りの事は全く分からないので想像でしかないです）

ai icon

結論：基本的にそのまま流用可能です。
ただし以下の点に注意してください：

■そのまま活かせる部分

  • HTML/CSS/JS構成 → そのまま www/ 配下に入れてOK
  • PWA用の manifest.json や service-worker.js も問題なし（むしろ推奨）

■気をつけるべき点

  • PWA用の service-worker.js は一部のアプリストアでは不要（オフラインキャッシュなどはCapacitorの仕組みに委ねる場合もある）
  • 外部APIアクセス時にCORS制限の扱いが変わる（ブラウザ環境と違うので要注意） -ネイティブ連携が必要な場合（ファイルアクセス・通知など）はCapacitorプラグイン導入が別途必要

要件定義を作成

スマホゲームアプリ開発に関するノウハウがない為、AIによるアドバイスを元に要件定義を作成。

ファイルは以下でダウンロード可能です。

requirements3.md

Cursorへ要件定義を投げる

@requirements3.md 制作したゲームを、スマホアプリ化するにあたり、今後の流れを @requirements3.mdにまとめましたのでこれを元に開発をお願いします。最初は、 スマホブラウザ対応（レスポンシブ＋PWA対応）バージョンを完成させ、その後、✅ スマホアプリ化（Capacitor.jsやCordova）」並行して、寝いtぃ部アプリ化を予定しています。念の為、Githubにリポジトリを作成し、途中でロールバックできる環境も整えていますので、途中で行き詰った場合は過去のバージョンへ戻すことも可能です。
以上よろしくお願いします。

初歩段階で問題発生

Python サーバを起動するとスマートフォンから上記のアドレスにアクセスでき、上手く行くかに思えたのですが、バグを修正すると別のバグが発生するという悪循環が続き、修正を繰り返していく中で状況が悪化し、開発が困難になりました。

python -m http.server 8000
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
[...]
グラディウス風シューティングゲーム スマートフォン対応バージョン 01 グラディウス風シューティングゲーム スマートフォン対応バージョン 02

無料枠の限界

無料トライアルでは、14日間のProトライアル、150回のプレミアムモデル利用が可能ですが、現時点で137回を消費しており、 このまま開発を継続すると無駄にプロンプトを浪費するだけで終わりそうで、一旦開発を中止しました。

■ Cursorの利用状況を確認できるプラグイン「Cursor Stats」

Cursorの利用状況を確認できるプラグイン「Cursor Stats」01 Cursorの利用状況を確認できるプラグイン「Cursor Stats」02

シビアなSTG開発

STGは処理がシビアな為、１つのバグを潰すと別のバグが生まれやすいゲームジャンルではないかと開発をしててよく感じました。

カードゲームや、ボードゲームなど、処理精度を求められないジャンルが良かったのかもしれません。

とはいえ、困難なゲーム開発に向き合ったことは無駄ではなく、限られたプロンプト数の中で、パソコン専用バージョンとはいえ、それなりに満足が出来るゲームが出来たことは良い経験にはなりました。

ChatGPTへ相談

今回の問題に関してネットで調べると、Cursor バージョン 0.46 以降に同じ問題を抱えてる方の情報を拝見し、状況が酷似していました。

それも踏まえてのAIの回答：

問題の本質

Cursor バージョン 0.46 以降のバグによって、

  • バイブコーディングのプロンプト修正がループ状態になり、
  • コード品質が悪化・混乱し続ける感覚がある。
  • この症状は、以下のようなユーザー報告とも一致しています：

Cursor 0.46 以降で「修正すると別のバグが出る」のループにハマる。 → Cursor Forum のスレッド にも記述あり。

対応策の選択肢

  1. Cursorを0.45にダウングレード（可能であれば）
  • 長所： 安定バージョンで正常なやり取りが再現できる可能性大。
  • 短所： 現状、Cursorには簡単なバージョンダウングレード手段は非公開。

Forumのこちらの投稿 でも「現時点ではダウングレード非対応」と回答されています。

✅ 対案

  • バックアップして別のエディタに切り替える（例：VSCode＋Copilot Chat）
  • 別のプロンプト系ツールに切り替え、コード断片ごとに修正していく
  1. 現状の Cursor を使い続ける場合の対処

  • コードを小さく分割して修正単位を減らす

    • → Cursorは「全体構造を巻き込んだ修正」に弱い印象があります。

  • 「完全なリセットプロンプト」で回復を試みる

Ignore all prior context. Rewrite the following code from scratch based on this clean design...
  • 修正点の「意図」をコードコメントに明示
    • → 例： // Fix hit detection only. Do not modify render logic.
  1. 最悪のケース：Cursorを一時離脱し、自力で回復＋再統合
  • バイブコーディングは非常に有効ですが、**「回復不能なスパゲッティ状態」**のときには、
    • バックアップから 安定版コードを復元
    • 自力で main.js の構造を整理
    • 再度 Cursor に 整った状態で投げ直す

今できるベストなアプローチ

あなたの状況に即して言えば：

🔁 一時的に Cursor から離れ、手動でコードを「整形→再導入」 がベストかもしれません。

  • あくまで 人間の理解を軸にコードの再整理を行う
  • 機能単位で分割（例：player.js, bullet.js, gameLoop.js）
  • 完成した1ファイルずつ Cursor へ戻す

補足：再び Cursor を活かすために

以下のような構成で再投入すると、効果が高いです：

#1. 各ファイルの機能と責務を明確にする
#2. 「このファイルは変更しないで」とプロンプトに書く
#3. 一度に1ファイルずつ修正を依頼する

まとめ

私自身がバイブコーディングやCousor初心者だったのもありますが、実際にやって見ないと分からない事というのは非常に多く、「バイブコーディングの利便性と限界」を実際の開発を通してほんの僅かでも理解する事が出来ました。

少なくとも現時点では、プロが作るようなシューティングゲームを、Cursorへのプロンプトだけで完成させることは恐らく非常に難しいと思います。

AIから助言のように

「あくまで 人間の理解を軸にコードの再整理を行う」

という前提がないと難しい気がします。

ただ、AI業界が”過渡期”で日進月歩の進化の途中であるため、数か月後には不可能だったことが可能になってるかもしれません。

余談ですが、このブログでは、Hugoという静的サイトジェネレーターを使いゼロからWEBサイトを構築しています。 サイト自体もAIの力を借りてカスタムを続けていますが、AIに丸投げにせず、自分自身もHugoやGoテンプレートなどへの理解を深めつつ作成していますが、それと同様にJavaScriptによるゲーム開発も生成されたコードの意味を咀嚼しつつ、進めていくスタイルをとる事が望ましいように思います。

最後に、出来上がったバグのあるソースコードを眺めながらそのように感じました。

補足:ログについての現状

Cursorは、ChatGPTをベースにしたIDEですが、以下のような履歴の保存・閲覧仕様になっています：

  1. 各ファイルごとの会話履歴（左下の「Chat」履歴）

    • ファイルを開いた状態で使ったプロンプトやAIの応答が表示されるチャット履歴が残っています。
    • チャットウィンドウでスクロールすれば過去の指示や応答は時系列で確認可能です。

  2. 明示的なエクスポート機能は現在ない

    • *.md や *.json などで 全履歴を一括でエクスポートする機能は、現時点のCursor（v0.46）には搭載されていません。

対処法：履歴を保存・バックアップする方法

方法1：手動コピーによる履歴バックアップ

  • Chatパネルをスクロールして、重要なプロンプト＋返答を手動でコピーしてMarkdownに貼り付ける。
  • 特に「指示 → 生成されたコード」のセットで記録していくと、振り返りに有効です。

おすすめ構成：

## Chat Log - 2025/06/10

### Prompt:
「スマホ対応のために、canvasのサイズをウィンドウ幅に合わせてください」

### AI Response:
```js
const canvas = document.getElementById("game");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

方法2：スクリーンショット保存

  • 特に複雑な修正や複数ファイルにまたがる変更は、画像として保存しておくと便利です。
  • Windowsなら Win + Shift + S、Macなら Cmd + Shift + 4 で簡単に切り取り。

方法3：自分で履歴保存用のMarkdownファイルを作成し、以下のように使う

今後に備えて：自動記録やエクスポートの代替策

project/
├── index.html
├── game.js
├── dev-logs/
│   ├── 2025-06-10-cursor-log.md
│   └── 2025-06-09-smartphone-adaptation.md

方法4：Gitと連携して、コードの変更履歴＋AI生成理由をコミットメッセージに書く

git commit -am "AIによるスマホ対応コード追加（canvasの自動リサイズ）"

今後改善の可能性（参考）

Cursorの公式フォーラムでも、「全チャット履歴をプロジェクト単位でエクスポートしたい」という要望は多く、将来的に搭載される可能性はあります。