WordPress テーマ・プラグイン開発者がバイブコーディングでゲームをつくってみた話

Transcript

1. WordPress テーマ・プラグイン 開発者がバイブコーディングで ゲームをつくってみた話
2. キタジマタカシ @inc2734 • 長崎在住 • 株式会社モンキーレンチ • WordPress の有料テーマ Snow Monkey の開発 / 販売 • WordPress の有料テーマ unitone の開発 / 販売 • 多数のプロダクトをオープンソースとして開発・公開 • WordPress 7.1, 7.0, 6.9, 6.8, 6.6, 6.5, 6.3, 6.2, 6.1, 6.0 コントリビューター
4. • 100%GPL • ブロックエディター対応 • カスタマイザー • 開発者向け API • 価格：16,500円（税込）/年
5. • 100%GPL • ブロックテーマ • タイポグラフィ • Every Layout • 価格：16,500円（税込）/年
10. 最近バイブコーディングで ブラウザゲームをつくっています。
11. fi ねこじまフィッシング https://games.2inc.org/games/nekojima- shing/
12. 戦国のゆくえ https://games.2inc.org/games/sengoku-yukue/
13. これまでの僕の開発手法（ここ1年くらい？）
14. これまでの僕の開発手法 • Visual Studio Code + Codex 拡張機能 • サイドバーのチャットで指示してコードを生成。 • 生成されたコードを目で確認し、手で動作確認し、問題な さそうならコミット。 • ドキュメントもあまりない。基本はコードで仕様を把握。 • 基本的には自分でも書けることを時短のために書いても らっているイメージ。
16. ChatGPT が勝手にサイトをつくった • パソコンが使えない環境でキャラクターの能力の一覧を出 してもらおうとスマホで相談したら、ブラウザですぐ確認 できる形でサイトをつくってきた（ChatGPT Sites） • ブラウザゲームなら同じようにすぐ作れるのでは？
17. 釣りを題材にしたブラウザゲームをつくりたいです。 操作は簡単なほうが良いですが、業種が豊富とか ルアーが豊富とかゲーム性は高いほうが良いです。
19. なにこれ？
20. あまりにもシミュレーションゲームすぎる感じが するのでもっとアクションよりというか、子ども でも楽しめるようにキャラクターがいたり、漁港も もっとイラストとかCGにしたりとか、わかりやすく 楽しい感じにしてください。
22. キャラクターの位置が固定（イラストがあるだけ） で、キャストするポイントを選ぶ方式になっています が、ここもゲーム性を持たせたいです。釣り場を選択 →その釣り場のマップが開く→例えば◯◯漁港マップ みたいになっていて〜以下省略
25. この辺から ChatGPT/Codex アプリに移行 • それまでは ChatGPT のブラウザ版でやりとりしていた。 • Sites だとコードもわかりくいし Git でバージョン管理も できない。 • 理想の8割くらいの完成度になったので、ソースコードを ダウンロードして Git 管理できるようにし、そこから ChatGPT/Codex アプリに移行。 • ここまで1時間くらいでできてしまったので、このときは もう楽勝〜とか思っていた（遠い目
26. バイブコーディング：良かったこと
27. バイブコーディング：良かったこと • コードを見ないのでめっちゃ時間が節約される。
28. バイブコーディング：良かったこと • コードを見ないのでめっちゃ時間が節約される。 • コードを見ないので自分がボトルネックになることが減り、複数の作 業を同時におこなうことができる。
29. バイブコーディング：良かったこと • コードを見ないのでめっちゃ時間が節約される。 • コードを見ないので自分がボトルネックになることが減り、複数の作 業を同時におこなうことができる。 • アイデア出しから調査、実装、検証、公開まで ア イ 装 実 、 査 調 ら か し 出 ア デ イ ア リだけで（ほぼ）完結できる。
30. バイブコーディング：良かったこと • コードを見ないのでめっちゃ時間が節約される。 • コードを見ないので自分がボトルネックになることが減り、複数の作 業を同時におこなうことができる。 • アイデア出しから調査、実装、検証、公開まで ア リだけで（ほぼ）完結できる。 イ 装 実 、 査 調 ら か し 出 ア デ イ ア • テストコードを勝手に書いてくれる。
31. バイブコーディング：良かったこと • コードを見ないのでめっちゃ時間が節約される。 • コードを見ないので自分がボトルネックになることが減り、複数の作 業を同時におこなうことができる。 • アイデア出しから調査、実装、検証、公開まで ChatGPT/Codex アプ リだけで（ほぼ）完結できる。 • テストコードを勝手に書いてくれる。 • ドキュメントも勝手に用意してくれる。
32. ドキュメントも勝手に用意してくれる。
33. バイブコーディング：良かったこと • コードを見ないのでめっちゃ時間が節約される。 • コードを見ないので自分がボトルネックになることが減り、複数の作 業を同時におこなうことができる。 • アイデア出しから調査、実装、検証、公開まで ア リだけで（ほぼ）完結できる。 • テストコードを勝手に書いてくれる。 イ 装 実 、 査 調 ら か し 出 ア デ イ ア • ドキュメントも勝手に用意してくれる。
34. バイブコーディング：良かったこと • コードを見ないのでめっちゃ時間が節約される。 • コードを見ないので自分がボトルネックになることが減り、複数の作 業を同時におこなうことができる。 • アイデア出しから調査、実装、検証、公開まで ChatGPT/Codex アプ リだけで（ほぼ）完結できる。 • テストコードを勝手に書いてくれる。 • ドキュメントも勝手に用意してくれる。 • ゲームのテストプレイがえぐい。
35. ゲームのテストプレイがえぐい。
36. バイブコーディング：良くなかったこと
37. バイブコーディング：良くなかったこと • 画像の認識はいまいち。
38. 画像の認識はいまいち 当たり判定のラインが全然合わないので、デバッグツールを作成 して手で調整した。
39. バイブコーディング：良くなかったこと • 画像の認識はいまいち。
40. バイブコーディング：良くなかったこと • 画像の認識はいまいち。 • UI とかビジュアル面は先に絵をつくってから、それをもとにつくらせた ほうが良さそう。
41. ビジュアル面
42. ビジュアル面
43. バイブコーディング：良くなかったこと • 画像の認識はいまいち。 • UI とかビジュアル面は先に絵をつくってから、それをもとにつくらせたほうが良 さそう。
44. バイブコーディング：良くなかったこと • 画像の認識はいまいち。 • UI とかビジュアル面は先に絵をつくってから、それをもとにつくらせたほうが良 さそう。 • 直接コードを変更したほうが良いところもガチガチにテストが組まれていて簡単 に変更できなくなっていた。
45. バイブコーディング：良くなかったこと • 画像の認識はいまいち。 • UI とかビジュアル面は先に絵をつくってから、それをもとにつくらせたほうが良 さそう。 • 直接コードを変更したほうが良いところもガチガチにテストが組まれていて簡単 に変更できなくなっていた。 • 複数のタスクを同時に処理できる分、短いスパンで頭の切り替えを何度もおこな うことになり、めっちゃ疲れる。
46. バイブコーディング：良くなかったこと • 画像の認識はいまいち。 • UI とかビジュアル面は先に絵をつくってから、それをもとにつくらせたほうが良 さそう。 • 直接コードを変更したほうが良いところもガチガチにテストが組まれていて簡単 に変更できなくなっていた。 • 複数のタスクを同時に処理できる分、短いスパンで頭の切り替えを何度もおこな うことになり、めっちゃ疲れる。 • 作業が速い分、次々にタスクを依頼できるので終わりが来ない。つまり休憩・睡 眠のタイミングがない。
47. バイブコーディング：良くなかったこと • 画像の認識はいまいち。 • UI とかビジュアル面は先に絵をつくってから、それをもとにつくらせたほうが良 さそう。 • 直接コードを変更したほうが良いところもガチガチにテストが組まれていて簡単 に変更できなくなっていた。 • 複数のタスクを同時に処理できる分、短いスパンで頭の切り替えを何度もおこな うことになり、めっちゃ疲れる。 • 作業が速い分、次々にタスクを依頼できるので終わりが来ない。つまり休憩・睡 眠のタイミングがない。 • 指が腱鞘炎になる。
48. バイブコーディング：その他雑感 • 僕がつくった規模感のものだと、8割くらいまでは結構す ぐいけるけど、そこから9割以上に持っていくのは思って いた以上に手間と時間が必要だった。 ※釣りゲームは約2週間、戦国ゲームは約1ヶ月かかった。 • バイブコーディングはその場の「ノリ」でつくれはするも のの、結局手戻りとかも多くなってしまうので、結局要件 定義とか仕様書、デザインはあったほうが良さそう。 • ちなみに、デザインを用意しても、Codex だけで 3D ゲー ムは結構厳しかったです。
51. WordPress プロダクトとゲームの開発の比較 • ブラウザゲームは wp-env とかいらないから動作確認の ハードルが低い、動作が軽い。データベースとか不要でテ ストもしやすい。 • （データの互換性さえ気にしていれば）CSS とか HTML の互換性とか気にしなくて良いので最高！ • ゲームは単に UI を作ってもらうだけではなく、ビジュア ル・音・間・面白さなど総合的な UX の考慮が必要。 • ゲームは子どもにデバッグを手伝ってもらえるのも良い。
52. WordPress プロダクトの開発にも活かせそうなこと • ドキュメントとコードも結構差異なく保ってくれるので、ド キュメントは積極的に作ってもらっておくと良さそう。 • 動作確認も手でやらなくても AI でできるところはやってもら うと良さそう。 • ただ、コードを見ないはまだちょっと怖い…（個人の感想） • 「これは AI ではできないだろう」と意識的・無意識的にやら ないことがあるなぁと思ったので、頭を柔軟にして試してみた り、AI で皆が何をやっているのかの情報収集とか必要かも。
53. 皆さんどうやってます？ ぜひ教えてください！