AWSのAIエディタ「kiro」でゲーム制作！Vibe機能とSpec機能を使いこなそう【ゲーム制作記 後編】

こんにちは！PCIソリューションズ エンタープライズビジネス事業本部 ITインフラ事業部の山岡です。

前編に引き続いて後編はkiroを使ったコンテンツ制作編です。

kiroのVibe機能を使ってWebページ、Spec機能を使用してゲームを制作しました。

kiro使用の際の参考にして頂けたらと思います。

(1)VibeモードでのWebページ制作

Vibeモード使ってみた

まずはVibeモードです。kiroを立ち上げるとこんな画面がでてきます。

ここで「Vibe」を選びます。前回も少し触れましたが、Vibe機能はAIと会話してコーディングをする、所謂バイブコーディングが可能です。
するとkiroのAIが立ち上がるので少し質問します。

>こんにちは。日本語で話せますか？

なるほど、普通に会話もできて色々教えてくれるみたいですね。早速コーディングを頼みました↓

>簡単な自己紹介ページを作成してください。

私専用の自己紹介ページを作成してくれました。

何をどう作成したか、どうカスタマイズしていけるかを報告してくれるのが有難いです。

また左の画面で作成してくれたファイルを閲覧＆編集可能です。

ただ意図としてはkiroの自己紹介ページが欲しかったので、内容を変更してもらいましょう。（指示は出来るだけ明確に分かりやすく…）

>kiroの自己紹介をするように内容を変更して

コードの内容に言及して直してもらうことも出来ましたが、あえて曖昧に指示していますが、見事修正してくれました。CSSの出来栄えもとても良いので、仕事自体もかなり高品質だなぁとしみじみ。

アイコンなどは差し込んでませんが、こんな感じです↓

内容も簡潔で良くまとまっているので、前編の機能解説はここが元になっている所もあります。

(2)Specモードで横スクロールアクションゲーム開発

Spec機能でのアクションゲーム制作

あたらしいコンソールを立ち上げて今度は「Spec」を選びます。

Spec機能は要件定義→設計→作成とウォーターフォール形式のように開発できるモードです。

最初は計画から立てていきましょう。今回は横スクロールアクションゲームを試しに作成してみます。

今から敵を倒しながら進む横スクロールアクションゲームを作ります。計画を立てましょう。

>障害物をジャンプで越えたり、即死の穴を飛び越えたりするギミックも欲しいです。
また敵を倒す手段は火の玉などの投擲物です。

こうして要件定義書が作成されました。

「requirements.md」というファイルがそれですね。

この画面では分かりませんが、要件定義書作成後に設計書の作成を開始するボタンが出ます。

ではこれに従って設計書を作ってもらいます。

設計書（design.md）作成後にこのような形で設計書の概要を話してくれます。

これで良かったらお願いして実装をしてもらいましょう。

>実装をお願いします！作成したファイルはversion1として分けて保存してください。

今回リポジトリ管理はGitなどを使用せず、バージョン分けして保存することにしています。

その際は画像のように明示的にバージョン分けする旨を言いましょう。

ここまでが要件定義→実装の流れです。

(2)-1.Agent Hooksで仕様変更とテストを自動化

Kiroでの仕様変更作業について　～そして完成へ～

あとから要件にいろいろ付け足して改良したいという時、あると思います。

そんな時には「Agent Hook」という機能が大活躍です。

この機能はkiroにおけるイベントをトリガーに、任意のアクションを実行する機能です。

以下設定↓

kiroの画面左側のAgent Hookにカーソルを合わせると「+」アイコンが出るので、クリックしてルールを追加します。

設定内容はkiroに案出ししてもらったので、少し修正してコピペ。

Agent Hookの設定は全て日本語の文章で行えるみたいです。

（今更ですが、kiroはkiro自身の使い方についても聞いたら教えてくれるので、非常に便利で初心者に優しいですね）

【コピー内容】
>requirements.mdが更新されました。以下の検証を実行してください：

1. 変更内容の確認
　　・追加・修正された要件を特定
　　・変更の影響範囲を分析

2. design.mdの整合性チェック
　　・新要件がアーキテクチャ、コンポーネント、データモデルに影響するか分析
　　・不整合があればdesign.mdの更新を提案
　　・具体的な修正箇所を指摘

3. tasks.mdの完全性チェック
　　・新要件を実装するタスクが存在するか確認
　　・不足があれば新規タスクの追加を提案
　　・タスクの優先順位を考慮

4. 変更サマリーの報告
　　・検出された問題点のリスト
　　・推奨される更新内容
　　・必要なアクションアイテム

5. 要件定義書.txtと# 横スクロールアクションゲーム設計書.txtの修正
　　・現在作業しているversionフォルダ内の要件定義書.txtと# 横スクロールアクションゲーム設計書.txtに修正内容を反映する
　　・修正したファイルと階層を報告する

>関連ファイルを読み込み、詳細な分析結果を日本語で報告してください。

今回作ったルールは要件定義書（requirements.md）を更新することがあったら、設計書（design.md）にも変更を反映し、実装するべきタスクについても確認するというものです。
それでは要件を追加して実際にこのAgentHooksが動作してくれるかを検証します。
（自動で検証してくれる機能もありますが、今回は手動でやってみます。）

>要件に音楽の再生が出来ることを追加したい。音楽は私の所持するMP3ファイルを使用します。

要件に「ゲーム中はBGMを再生する」旨を追加しました。

すると別タブでAgentHookが立ち上がってきます。

ここでAgentHookに定めたアクションを行ってくれます。

要件の追加は勿論、設計書と実装タスクの整合性についても検証し、自動で修正してくれます。

そしてkiroに実装を頼んでできたゲームがこちら

プレイは問題なくできるが、内部的にも大丈夫か心配なのでテストをしたいと思います。

>プレイテストはOKです。version9についてコードの中身のテストをお願いします。

kiroにテストをお願いしたら、自動でテストを行ってくれるテストページを作成してくれました。

音楽再生の要件を追加した分についてのテストページです。

本当は全ての機能を包括的にテストするようにできるのがベストですが、実は作成途中に他システムはテスト済みなので今回は割愛。（kiroに指示を出せば全体のテストももちろん実装してくれます）

これでひとまずは完成とします！

(3)Kiroでエラー解決・デバッグを行うコツ

エラー解決におけるKiroへの指示出し方法について

実際にkiroを使うにあたっての、指示出しのコツを書いておきます。

アバウトに指示しない

特にシステムの検証をしている時に大事なことですね。

最新のゲームのバージョンはバージョン9となりますが、バージョン1〜8ももちろんあります。バージョン7、8は問題なく遊べましたが、1〜6は遊べませんでした。
1〜6はkiroと話しながらバクを改善していきました。

そんなバグ改善中に気になったことが、「どれくらいのアバウトさでバグ改善の指示を出せば実際に改善してくれるのか？」ということでした。今回、特にジャンプが出来ないバグが中々厄介だったので、それについて書きますね。

結論から言うと、エラーログレベルの指示でkiroに指示を出せば今回は問題なく改善してくれました。

ちょうど画像くらいの粒度で指示を出した際にバグの核心に迫ることが出来ました。

それ以前では例えば

・ジャンプが出来ないから改善して。（事象を見たまま指示だし）

・エラーコードを見たらスペースキー入力でエラーが起きてました。直してください。（エラーコードの概要だけで指示だし）

・エラーコードではスペースキー入力が有効化されてないみたいです。直してください。（エラーコードの表示内容に触れて指示だし）

といった風に段階的に質問粒度を上げて指示を出してました。ただしkiroは直そうとしてくれるのですが、全く同じ症状が出続けるという結果に…

上の画像では実際のエラーログを張り付けて原因調査しています。こういった聞き方をしていくと、とんとん拍子にバグが一つずつ潰れていってくれました。

(4)まとめ

今回はkiroを使用して自己紹介webページ、横スクロールアクションゲームを作成しました。

vibeモード、specモード、AgentHooksなどのkiroの機能を使用する際の参考になれば幸いです。

次回はもう少しだけkiroの機能であるAgent Steeringついて紹介できればと思います。

それではまた！