こんにちは！
Social Databank Advent Calendar 2025 の14日目は、SDBのどいが担当します。よろしくお願いします。
はじめに
先月AWSのKiroの一般提供が発表されましたね。
さらに今年のre:InventではKiro autonomous agentが発表されるなど、とても盛り上がりを見せています。
今年はありがたいことに、re:Inventに現地ラスベガスで参加してきました。
様々なセッションやイベントに現地で参加してきたのですが、主に開発のハンズオンセッションでは、Kiroを使った開発支援をするものが多く、AWSがKiroを推してきている熱量を肌で感じてきました。
ということで、本記事ではKiroを実際に触って、簡単な使い方などを試していきたいと思います。
Kiroとは？
Kiroは、Spec-driven development(仕様駆動開発) を特徴としているAIエージェントを備えた統合開発環境IDEです。Spec という機能を利用することで最初に要件やタスクリストを生成し、それに沿ってコード生成などのタスクを実行できます。 つまり、ウォーターフォール開発のように、要件定義から設計、実装、テストという流れで、 エージェントが自律的に開発支援をしてくれるようですね。
それでは、早速使ってみましょう。
開発
今回は、Kiroを使ってFlappyBirdのようなブラウザで簡単に動くゲームを作ってみようと思います。
1. ステアリングファイルの設定
まず最初に、markdownでプロジェクトのルール、コーディング規約、アーキテクチャ方針などを定義します。
これにより、チャットごとに方針や規約を何度も説明せずとも、Kiroは確立されたパターン、ライブラリ、標準に一貫して従うことが保証されます。
作成するステアリングファイルはプロジェクトの .kiro/steering/ 配下に配置されます。
今回はステアリングファイルのテンプレートを生成し、以下の3つのファイルを用意しました。
product.md
# Product Overview
- 「flappy Kiro」というフラッピーバードのような2Dのブラウザゲーム
- 鳥ではなくKiro(Kiro-logo.png)が飛んで障害物を避けていく
- 障害物を避けてより遠くを目指して高いスコアを目指す
# Style
- メインカラー: #00a29a
tech.md
# Tech Overview
- フレームワーク: Vue3 Composition API
- 言語: TypeScript
- ビルドツール: Vite
- スタイル: TailwindCSS
- テスト: Vitest
structure.md
# Project Structure
- 使用するフレームワークの標準的なディレクトリ構成に合わせる
今回はサクッと試したいので定義は少なめです。詳細はドキュメントを確認してみてください。
2. スペックモードでゲームを作ろう
それでは、実際にゲームを作っていきます。今回は「flappy Kiro」というflappy Birdのようなゲームを作ってみます。
requirements.mdの作成
チャットタブを開き、「Spec」モードを選択して、以下のようなプロンプトを入力します：
# Flappy Kiro ゲーム仕様書
- 「Flappy Kiro」ゲームを作成する。
- キャラクター画像として **kiro-logo.png** を使用する
- Kiro キャラクターはジャンプ / 飛行できる
- **重力（gravity）：0.3**
- **ジャンプ力（jumpPower）：※値を指定する必要あり**
- 反応が良く、プレイヤーが操作しやすい物理挙動とする
- シンプルな障害物を生成する
- 移動速度：**1.5 px / frame**
- プレイヤーが十分反応できるバランスに調整する
- Kiro と障害物、地面の基本的な衝突判定を実装する
- 障害物を通過するごとにスコアを加算
- 画面に現在のスコアを表示する
- start, playing, gameoverの **3 つの状態**を持つ
- start 状態は「Press SPACE or click to start!」を表示
- SPACEをクリックするとで `playing`
- 失敗するとgameoverとなりSPACEをクリックすると再度playingになる
- 全画面で表示する
プロンプトを入力して実行すると、先ほど作成したステアリングファイルと共にテキストを解釈して、 要件定義書 (requirements.md) を作成してくれます。 要件定義書は、EARS表記法による受け入れ基準を含んだ形式となっています。
以下が作成されたファイルになります。
requirements.md
# Requirements Document
## Introduction
Flappy Kiro is a 2D browser-based game inspired by Flappy Bird, where the player controls a Kiro character (using kiro-logo.png) that must navigate through obstacles by jumping/flying. The game features physics-based movement with gravity, obstacle generation, collision detection, and score tracking across three distinct game states.
## Glossary
- **Flappy_Kiro_Game**: The complete browser-based 2D game system
- **Kiro_Character**: The player-controlled character using the kiro-logo.png image
- **Obstacle**: Vertical barriers that the player must navigate through
- **Game_State**: The current mode of the game (start, playing, gameover)
- **Score_System**: The point tracking mechanism based on obstacle passage
- **Physics_Engine**: The gravity and jump mechanics controlling character movement
- **Collision_System**: The detection mechanism for character-obstacle and character-ground interactions
## Requirements
### Requirement 1
**User Story:** As a player, I want to control the Kiro character's movement through jumping/flying, so that I can navigate through obstacles and avoid collisions.
#### Acceptance Criteria
1. WHEN the player presses SPACE or clicks, THE Flappy_Kiro_Game SHALL apply jump power to the Kiro_Character
2. WHILE the game is running, THE Physics_Engine SHALL continuously apply gravity of 0.3 to the Kiro_Character
3. WHEN no input is received, THE Kiro_Character SHALL fall due to gravity at the specified rate
4. WHEN jump input is applied, THE Kiro_Character SHALL move upward with responsive and smooth physics
5. WHILE the Kiro_Character is moving, THE Flappy_Kiro_Game SHALL maintain smooth animation and visual feedback
### Requirement 2
**User Story:** As a player, I want obstacles to appear and move across the screen, so that I have challenges to navigate through during gameplay.
#### Acceptance Criteria
1. WHILE the game is in playing state, THE Flappy_Kiro_Game SHALL generate obstacles at regular intervals
2. WHEN obstacles are generated, THE Flappy_Kiro_Game SHALL move them horizontally at 1.5 pixels per frame
3. WHEN obstacles move off the left side of the screen, THE Flappy_Kiro_Game SHALL remove them from the game
4. WHILE obstacles are present, THE Flappy_Kiro_Game SHALL maintain consistent spacing for player navigation
5. WHEN obstacles are generated, THE Flappy_Kiro_Game SHALL create gaps that allow the Kiro_Character to pass through
### Requirement 3
**User Story:** As a player, I want collision detection between the Kiro character and obstacles/ground, so that the game can determine when I have failed.
#### Acceptance Criteria
1. WHEN the Kiro_Character touches any obstacle, THE Collision_System SHALL detect the collision and trigger game over
2. WHEN the Kiro_Character touches the ground, THE Collision_System SHALL detect the collision and trigger game over
3. WHILE collision detection is active, THE Collision_System SHALL check for intersections every frame
4. WHEN a collision is detected, THE Flappy_Kiro_Game SHALL immediately transition to gameover state
5. WHILE the game is running, THE Collision_System SHALL provide accurate hit detection for all game objects
### Requirement 4
**User Story:** As a player, I want to earn points by successfully passing through obstacles, so that I can track my progress and compete for high scores.
#### Acceptance Criteria
1. WHEN the Kiro_Character successfully passes through an obstacle, THE Score_System SHALL increment the score by one point
2. WHILE the game is in playing state, THE Flappy_Kiro_Game SHALL display the current score on screen
3. WHEN the game transitions to gameover state, THE Score_System SHALL preserve the final score for display
4. WHEN a new game starts, THE Score_System SHALL reset the score to zero
5. WHILE score tracking is active, THE Score_System SHALL update the display immediately upon score changes
### Requirement 5
**User Story:** As a player, I want clear game states with appropriate controls and messages, so that I understand how to start, play, and restart the game.
#### Acceptance Criteria
1. WHEN the game initializes, THE Flappy_Kiro_Game SHALL start in the start state displaying "Press SPACE or click to start!"
2. WHEN the player presses SPACE or clicks in start state, THE Flappy_Kiro_Game SHALL transition to playing state
3. WHEN a collision occurs during playing state, THE Flappy_Kiro_Game SHALL transition to gameover state
4. WHEN in gameover state and player presses SPACE or clicks, THE Flappy_Kiro_Game SHALL reset and transition to playing state
5. WHILE in each state, THE Flappy_Kiro_Game SHALL display appropriate UI elements and respond only to valid inputs for that state
### Requirement 6
**User Story:** As a player, I want the game to utilize the full browser window, so that I have an immersive gaming experience with maximum screen real estate.
#### Acceptance Criteria
1. WHEN the game loads, THE Flappy_Kiro_Game SHALL render at full browser window dimensions
2. WHEN the browser window is resized, THE Flappy_Kiro_Game SHALL automatically adjust to maintain full-screen coverage
3. WHILE the game is running, THE Flappy_Kiro_Game SHALL scale all game elements proportionally to the screen size
4. WHEN displaying UI elements, THE Flappy_Kiro_Game SHALL position them appropriately for the full-screen layout
5. WHILE maintaining full-screen display, THE Flappy_Kiro_Game SHALL preserve the game's aspect ratio and playability
生成された要件に何か相違があればプロンプトから入力して変更できます。 これを繰り返すことで最終的な要件定義書を作成できます。
design.mdの作成
続いて要件定義書から設計書を作成します。 チャット欄にMove to designのボタンがあるのでクリックするとすぐに設計書が生成されます。
design.md
# Flappy Kiro Game Design Document
## Overview
Flappy Kiro is a browser-based 2D game built with Vue 3 Composition API and TypeScript, utilizing HTML5 Canvas for rendering and game physics. The game features a Kiro character that players control through gravity-based physics, navigating through procedurally generated obstacles while tracking scores across three distinct game states.
## Architecture
The game follows a component-based architecture using Vue 3's Composition API with clear separation of concerns:
┌─────────────────────────────────────────┐
│ Vue App │
├─────────────────────────────────────────┤
│ Game Component │
├─────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────────┐ │
│ │ Game Engine │ │ UI Manager │ │
│ │ │ │ │ │
│ │ ┌─────────┐ │ │ ┌─────────────┐ │ │
│ │ │Physics │ │ │ │ Canvas │ │ │
│ │ │Engine │ │ │ │ Renderer │ │ │
│ │ └─────────┘ │ │ └─────────────┘ │ │
│ │ │ │ │ │
│ │ ┌─────────┐ │ │ ┌─────────────┐ │ │
│ │ │Collision│ │ │ │ Input │ │ │
│ │ │System │ │ │ │ Handler │ │ │
│ │ └─────────┘ │ │ └─────────────┘ │ │
│ └─────────────┘ └─────────────────┘ │
└─────────────────────────────────────────┘
## Components and Interfaces
### Core Game Engine
- **GameEngine**: Main game loop and state management
- **PhysicsEngine**: Handles gravity, jump mechanics, and movement
- **CollisionSystem**: Detects intersections between game objects
- **ObstacleManager**: Generates, moves, and removes obstacles
- **ScoreManager**: Tracks and updates player score
### Game Objects
- **KiroCharacter**: Player-controlled character with physics properties
- **Obstacle**: Vertical barrier objects with collision boundaries
- **GameState**: Enumeration for start, playing, gameover states
### Rendering System
- **CanvasRenderer**: HTML5 Canvas-based rendering engine
- **AssetManager**: Loads and manages game assets (kiro-logo.png)
- **UIRenderer**: Handles text, score, and state-specific UI elements
### Input System
- **InputHandler**: Processes keyboard (SPACE) and mouse click events
- **EventManager**: Manages game event dispatching and handling
## Data Models
### KiroCharacter
```typescript
interface KiroCharacter {
x: number; // Horizontal position (fixed)
y: number; // Vertical position (physics-controlled)
width: number; // Character width for collision
height: number; // Character height for collision
velocityY: number; // Vertical velocity affected by gravity
image: HTMLImageElement; // kiro-logo.png asset
}
task.md の作成
生成された設計書に問題がなければ Move to implementation planのボタンをクリックして、タスクリストを生成します。
以下が生成されたタスクリストです。
task.md
# Implementation Plan
- [ ] 1. Set up project structure and core interfaces
- Create Vue 3 + TypeScript project structure with Vite
- Set up TailwindCSS for styling
- Configure Vitest for testing
- Install fast-check for property-based testing
- Create basic HTML template with full-screen canvas
- _Requirements: 6.1, 6.2_
- [ ] 2. Implement core game data models and types
- [ ] 2.1 Create TypeScript interfaces for game objects
- Define KiroCharacter, Obstacle, GameState, and GameConfig interfaces
- Create type definitions for physics properties and collision boundaries
- _Requirements: 1.1, 1.2, 2.1, 3.1_
- [ ]* 2.2 Write property test for data model validation
- **Property 5: Obstacle gap navigability**
- **Validates: Requirements 2.5**
- [ ] 3. Implement physics engine
- [ ] 3.1 Create PhysicsEngine class with gravity and jump mechanics
- Implement gravity application (0.3 per frame)
- Implement jump power application
- Handle velocity calculations and position updates
- _Requirements: 1.1, 1.2, 1.3, 1.4_
- [ ]* 3.2 Write property test for gravity consistency
- **Property 2: Gravity application consistency**
- **Validates: Requirements 1.2, 1.3**
- [ ]* 3.3 Write property test for jump input response
- **Property 1: Jump input affects velocity**
- **Validates: Requirements 1.1, 1.4**
- [ ] 4. Implement game object classes
- [ ] 4.1 Create KiroCharacter class
- Implement character with position, velocity, and image properties
- Add methods for physics updates and rendering
- _Requirements: 1.1, 1.2, 1.3, 1.4_
- [ ] 4.2 Create Obstacle class
- Implement obstacle with position, dimensions, and gap properties
- Add methods for movement and collision boundary calculation
- _Requirements: 2.1, 2.2, 2.3, 2.5_
- [ ]* 4.3 Write property test for obstacle movement
- **Property 3: Obstacle movement consistency**
- **Validates: Requirements 2.2**
- [ ] 5. Implement collision detection system
- [ ] 5.1 Create CollisionSystem class
- Implement rectangle-based collision detection
- Add methods for character-obstacle and character-ground collision
- Handle collision event triggering
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5_
- [ ]* 5.2 Write property test for collision detection accuracy
- **Property 6: Collision detection accuracy**
- **Validates: Requirements 3.1, 3.2, 3.5**
- [ ]* 5.3 Write property test for collision state transitions
- **Property 7: Collision triggers state change**
- **Validates: Requirements 3.4**
- [ ] 6. Implement obstacle management system
- [ ] 6.1 Create ObstacleManager class
- Implement obstacle generation at regular intervals
- Add obstacle movement and cleanup logic
- Handle obstacle spacing and gap creation
- _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5_
- [ ]* 6.2 Write property test for obstacle cleanup
- **Property 4: Obstacle cleanup**
- **Validates: Requirements 2.3**
- [ ] 7. Implement score management system
- [ ] 7.1 Create ScoreManager class
- Implement score tracking and increment logic
- Add score reset functionality
- Handle score display updates
- _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5_
- [ ]* 7.2 Write property test for score increment
- **Property 8: Score increment on obstacle passage**
- **Validates: Requirements 4.1**
- [ ]* 7.3 Write property test for score reset
- **Property 9: Score reset on new game**
- **Validates: Requirements 4.4**
- [ ] 8. Implement input handling system
- [ ] 8.1 Create InputHandler class
- Handle keyboard (SPACE) and mouse click events
- Implement state-specific input processing
- Add event delegation and cleanup
- _Requirements: 5.1, 5.2, 5.4_
- [ ] 9. Implement game state management
- [ ] 9.1 Create GameStateManager class
- Implement state machine for start, playing, gameover states
- Handle state transitions and validation
- Manage state-specific UI and behavior
- _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5_
- [ ]* 9.2 Write property test for state transitions
- **Property 10: State transition consistency**
- **Validates: Requirements 5.2, 5.3, 5.4**
- [ ] 10. Implement rendering system
- [ ] 10.1 Create CanvasRenderer class
- Implement HTML5 Canvas rendering for all game objects
- Add full-screen canvas setup and management
- Handle asset loading for kiro-logo.png
- _Requirements: 6.1, 6.2, 6.3, 6.4_
- [ ] 10.2 Create UIRenderer for game interface
- Implement text rendering for scores and messages
- Add state-specific UI elements
- Handle full-screen UI positioning
- _Requirements: 4.2, 5.1, 5.5, 6.4_
- [ ]* 10.3 Write property test for canvas responsiveness
- **Property 11: Canvas sizing responsiveness**
- **Validates: Requirements 6.2**
- [ ]* 10.4 Write property test for proportional scaling
- **Property 12: Proportional element scaling**
- **Validates: Requirements 6.3, 6.5**
- [ ] 11. Implement main game engine
- [ ] 11.1 Create GameEngine class
- Implement main game loop with requestAnimationFrame
- Integrate all systems (physics, collision, rendering, input)
- Handle game initialization and cleanup
- _Requirements: All requirements integration_
- [ ] 11.2 Wire up full-screen canvas management
- Implement window resize handling
- Add proportional scaling for all game elements
- Ensure responsive layout maintenance
- _Requirements: 6.1, 6.2, 6.3, 6.4, 6.5_
- [ ] 12. Create Vue component integration
- [ ] 12.1 Create main Game.vue component
- Set up Vue component with Composition API
- Integrate GameEngine with Vue lifecycle
- Handle component mounting and unmounting
- _Requirements: All requirements through Vue integration_
- [ ] 12.2 Implement asset management
- Load kiro-logo.png asset
- Handle asset loading errors and fallbacks
- Ensure proper asset scaling for full-screen display
- _Requirements: 1.1, 6.3, 6.5_
- [ ] 13. Checkpoint - Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
- [ ] 14. Fine-tune game balance and polish
- [ ] 14.1 Determine optimal jump power value
- Test different jump power values for responsive gameplay
- Balance jump power with gravity for smooth physics
- _Requirements: 1.1, 1.4_
- [ ] 14.2 Optimize obstacle generation parameters
- Fine-tune obstacle spacing and gap sizes
- Ensure consistent difficulty progression
- _Requirements: 2.1, 2.4, 2.5_
- [ ] 14.3 Apply game styling with TailwindCSS
- Implement main color theme (#00a29a)
- Style UI elements and game interface
- Ensure full-screen aesthetic consistency
- _Requirements: 5.5, 6.4_
- [ ] 15. Final Checkpoint - Ensure all tests pass
- Ensure all tests pass, ask the user if questions arise.
この生成されたタスクをIDE上で1つずつ実行できます。 内容を確認し特に問題がなければ実行をして、コードを生成していきます。
全て実行するのに約30~40分程度かかりましたが、その過程でコードの生成とテストを繰り返していきます。
最後にプロンプトで動作確認したいから動かしてと指示をするとnpm run devが実行されローカルで確認できました！
実際に使ってみて感じたこと
今回ゲームを作るにあたり、自分の手で書いたファイルは冒頭の3つのステアリングファイルのみです。
たった数十行手で書いただけで それ以降はSpecモードのチャットのやり取りだけで、要件定義書、設計書、開発、テストまで一貫して行ってくれました。
全ての工程で約1時間(そのうち30~40分が開発・テストの実行待ち)という短い時間で簡単なゲームを作ることができて驚きでした！
まとめ
本記事では、Kiroを使って簡単なブラウザゲームをサクッと作ってみました。
スペックモードを使って要件定義、設計、開発、テストを自動で生成してくれる過程を見て、開発効率が格段に向上する体験ができました。
今回紹介しきれなかった機能(フックやMCP連携など)もあるので、これからも色々試してみようかなと思います。
皆さんもKiroを使って、何か面白いものを作ってみてはいかがでしょうか？
Discussion