こんにちは、ネクストモード株式会社の平林です。
こんにちは、ネクストモード株式会社の平林です。
今回は、Kiroを使ってレトロなゲームを120分で作ってみよう！というエンタメ要素たっぷりのワークショップ
「Game on: build a retro adventure game in 120 minutes [REPEAT] (DVT402-R1)」に参加してきました。
いつも真顔なエンジニアたちも、楽しそうな声、優しい眼差しで取り組んでいるのが印象的でした。そんなセッションの内容をお伝えします。
セッション概要
まずはセッションの基本情報です。
- セッションID：DVT402-R1
- セッション名：Game on: build a retro adventure game in 120 minutes
- 形式：Workshop（ハンズオン）
- レベル：400 – Expert
- スピーカー：Keerthi Konjety、Megan Sattler
ワークショップの内容
今回のワークショップは、下記の構成で進みました。
- セッション0：初期設定
- セッション1：コンテキストの構築
- セッション2：ゲームアプリの基本バージョンを構築
- セッション3：使用駆動開発による機能追加
- セッション4：作業内容を保存する
- セッション5：作品を共有する
-
セッション0：初期設定
まずはKiroのインストールおよびセッティングからです。
下記からダウンロードできます。
私の端末は既にインストール済みのため、飛ばしております。
そのためKiroの機能をいくつか紹介します。
- バイブモード
- 会話型のコーディングモードです。
- 自然言語でKiroと対話でき、探索的コーディング・デバック・問題解決などに最適です。
- スペックモード
- 要件収集・設計・実装のワークフローを段階的に進め、アプリを構築します。
- 複雑なコーディングタスク・複数のステップワークフロー・ステップごとのコード生成などに最適です。
- 仕様モード
- アプリの機能の開発プロセスを構造化した成果物です。
- 高度なアイデアを詳細な実装へと変換するためのアプローチを提供します。
- エージェントフック
- 特定のイベントが発生した際に、事前定義されたアクションを実行するトリガーです。
- 定期的なタスク実行を、ドキュメント更新やテストケースの作成などのイベントへの自動応答を設定します。
- エージェントステアリング
- マークダウン形式を通じて、ワークスペースに関する永続的な知識の設定です。
- チャットごとに慣例を説明せずに、確立したパターン・ライブラリに一貫して従うようになります。
- モデルコンテキストプロトコル
- ツールやコンテキストを提供するサーバーに接続することで、Kiroの機能を拡張するものです。
- 専門的なナレッジやドキュメントにアクセスできたり、ドメイン固有のツールを使用できるようになります。
- モデル
- 複数のモデルから選択します。
- 選択するモデルによって消費クレジットが変化します。
- コンテキストの追加
- プロンプトにコンテキストを追加する場合は「#」を使用して下さい。
- フォルダやドキュメント、コードやURLなどを含めることができます。
セッション1：コンテキストの構築
- ワークスペースを設定する
- 作業用フォルダを作成します
- Kiroのロゴをダウンロードしてゲームキャラクターとして設定します
※白背景だと可愛さは伝わらないですね・・・
- 作業用フォルダを作成します
- ステアリングファイルを構成する
- プロジェクト固有のステアリングファイルを作成する
- 「Kiroアイコン」→「+」とクリックします
- 「kiro agent steering」をクリックし、名前を付けます
- 作成するとコンテンツが生成されるため、コンテンツ内の下の行に下記を張り付けます
# My Game application building rules
You are a helpful game building agent, that works with developers of all kind in a collaborative manner. This file is given to you as an instruction set that Kiro will follow during AWS Re:Invent workshop. In the next 2 hours you will be helping participants build games of their choice.
You must:
- Use useand create a user-context.md steering file to store user preferences as you help the user build a game
- If the Kiro-logo.png image is present in the project, the use it as a game sprite
-- Ask calrifying questions and do not move forward with assumptions unless user confirms
- 「Kiroアイコン」→「+」とクリックします
- ゲームスタイルのステアリングファイルを作成する
- 上記の固有ステアリングファイルと同様に作成し、ゲームスタイル用のルールを張り付ける
- 2つのステアリングファイルが作成されたことを確認する
- プロジェクト固有のステアリングファイルを作成する
セッション2：ゲームアプリの基本バージョンを構築
- 基本バージョンを構築する
- 一からは大変なので、複数のオプション（サンプル）が用意されていました
- その中には昔、駄菓子屋にあったレトロなゲームもありました
- 今回は「Flappy Kiro」というものを作ります。
- 右上の「吹き出しマーク」→「Vibe」をクリックします。
"I want to build a Flappy Kiro game. Please create a basic working version with:
- HTML5 canvas for rendering
- Use kiro-logo.png as a character
- A Kiro character that can jump/fly with balanced physics (gravity: 0.3, jumpPower: -6 - or equivalent)
- Simple obstacles that move at reasonable speed (1.5 pixels per frame)
- Basic collision detection
- A score counter
- Proper game state management with three states: 'start', 'playing', 'gameOver'
- Start screen that shows 'Press SPACE or click to start!'
- Game begins when player presses SPACE
- Add a restart functionality
- Proper game timing with slower obstacle spawning - every 180 frames
- Game logic only updates during 'playing' state
Make sure the physics feel responsive and give players enough time to react. The game should start with a clear start screen and begin playing immediately when SPACE is pressed." - コンテキストを考慮してステアリングファイルを作成してくれました。また追加の質問がありました。
以下のように日本語で回答してみましょう- プログラミング言語はPython
- 障害物を越えるごとに1点加算
- 障害物は土管
- Kiroのブランドカラーを使用
- 作成してくれて、次のステップも提示してくれました。
- ゲームの実行もKiroに確認させてみますが、動作しないようでHTML5に変更するよう依頼しました
- 途中で許可を求められたときは、ヨシ！しておきましょう
- やっとKiroに会えました
- これで基本バージョンが出来ました！
- アプリを作成したことのない自分でも、対話形式で簡単なアプリが作成できました（すごい）
セッション3：使用駆動開発による機能追加
- スペックモードで会話する
- 視覚効果とゲーム履歴を保存する機能を追加します。
- 「+」→「Spec」の順にクリックし、下記コメントをKiroに渡します。
・ゲーム履歴とスコアの保存プレイヤーのスコアとハイスコアを保存する・ビジュアルエフェクトKiroが飛行する際、背後に軌跡パーティクルを表示するゲーム内のオブジェクトに衝突した際、爆発エフェクトを表示するゲーム内の障害物を通過する際、スパークルを表示するハイスコア更新時に、紙吹雪を表示する
- 途中何回かヨシ！して、機能を作成しました。
- 実装するよう指示すると、完成したようなので確認してみましょう。
- 新しい機能も日本語で追加出来ました！
- アプリを磨く
- 下記のような改良点をKiroに伝えてみましょう
以下を改良したい・ゲーム感覚の調整（速度、難易度、応答性）・ビジュアルの洗練（アニメーション、効果、色）・パフォーマンスの調整・バランスの変更ゲームを改善するための追加スペックを作成します。以下のアイデアを自由に活用してください。・ゲームにサウンドエフェクトを追加する・ゲームに新しいキャラクターを追加する・ゲームに新しいレベルを追加する・ゲームに新しい障害物を追加する・ゲームに新しいパワーアップを追加する - 何回かヨシ！したら、出来たので再度確認してみましょう
- 全く伝わらないですが、ちゃんと変わっています
- 下記のような改良点をKiroに伝えてみましょう
セッション4：作業内容を保存する
- KiroのVibeモードでGitHubに保存する
- ここパートは時間がなくやれませんでした～
- 内容としてはKiroにリポジトリの情報などを渡して、保存してもらう形です。
- 何事もバックアップは大切ですね！
セッション5：作品を共有する
- ここで完成した人いますか～？というスピーカーの問いかけに、腕に自信のあるエンジニアが共有してくれました
- 写真撮れたのがこれしかなかったですが、何人も紹介してくれて、みんな楽しそうに自らのKiroを紹介していました。
やってみて分かったこと
- ステアリングファイルによる前提条件の指定
- 最初にルール（コンテキスト）を一度読み込ませるだけで、その後の会話で毎回説明しなくても文脈を理解して動いてくれます。
- 長く連れ添った相手のような阿吽の呼吸が実現できていました。
- 非エンジニアでも「ヨシ！」連発の開発体験
- Kiroが提案してくるコードや修正案に対して「ヨシ！（承認）」を出していくだけで、目に見えてゲームが進化していく過程は快感でした。
※今回はワークショップなためですが、本来は作成されたコードや成果物は確認しましょう！ - 「爆発エフェクト入れたい」「紙吹雪舞わせたい」といった無茶振りにも、嫌な顔ひとつせず応えてくれる頼もしさもありますね。
- Kiroが提案してくるコードや修正案に対して「ヨシ！（承認）」を出していくだけで、目に見えてゲームが進化していく過程は快感でした。
- 可愛いは正義！でも中身は本格派
- Kiroを動かす「Flappy Kiro」は、見た目の愛らしさだけで開発のモチベーションを爆上げしてくれました。
※実際周りのエンジニアもワークショップ中に「わ～お」や「ん～～」など我が子を見る親のようにKiroにハマっていました。 - ただKiroの本質はその可愛さだけではありません。
- Vibeモードで自然言語を使ってアイデアを出し合い、Specモードで要件をカチッと固めて実装する
この2つのモードの使い分けが、開発体験を非常にスムーズにしてくれます。 - 直感的に「こうして！ああして！」と伝えると、しっかりとしたロジックを組んでくれること驚かされました。
- Kiroを動かす「Flappy Kiro」は、見た目の愛らしさだけで開発のモチベーションを爆上げしてくれました。
まとめ
今回のワークショップを通じて、Kiroは単なる「コード生成ツール」ではなく、一緒にモノ作りを楽しむ「頼れる相棒」だと感じました。
そんな相棒ですが、料金はまぁまぁ高いイメージです。
今回はワークショップ用にクレジット付与があったため、気兼ねなく対話できましたが、
通常であれば前段の要件定義みたいなところは別AIを使った方がいいかなとは思いました。
とはいえ、AWSに特化したサービスのため、AWSと連携する場合などは頼もしすぎる相棒になってくれるでしょう。
「いつも真顔なエンジニアたちが笑顔だった」という冒頭の光景が、Kiroの魅力を何よりも物語っています。
これからKiroを使ってみようと考えている方は、ぜひKiroの可愛さに癒やされつつ、その驚異的なパフォーマンスを体感してみてください！
