はじめに
Kiroを試してみました。
Kiroは、AWSが提供しているAIエージェントを内蔵したIDEです。
作成するものの仕様を決めてそれに従ったプログラムを開発できるのが特徴です。
例として、Googleの地図をPDFファイルに変換して保存するウエブアプリを作ってみました。
環境構築
今後業務で使うことを想定して、AWSのアカウント課金、アカウントはAWS Identity Centerで管理する方法で構築しました（この記事参照）
Windows PCに Kiroをインストールし、AWS Identity Centerで認証して、つかいます。
作業用ディレクトリを作り、Kiroで開くと、VibeかSpecかの選択肢があります。Specを選んで開発をはじめます。
要件の定義
プロンプトの入力欄に作りたいもの内容を記載します。技術的な要件は除いて最終的に実現したい事がなになのかを中心に書きます。
私が入力してみたのは、こんな感じです。
ちょっと日本語がおかしいところや、入力の途中でEnterを押してしまったんですが、それでも内容をくみ取ってくれました。
このあと、足りない部分を追加でつたえて、微調整しました。
Requirements.md が作成されました。
Requirements.md
# 要件定義書
## はじめに
本システムは、Google Mapsの地図を複数ページに分割してPDF出力し、印刷後に貼り合わせることで大きな地図を作成できるWebアプリケーションです。ブラウザ内で完結し、ユーザーは用紙サイズと分割数を指定して印刷範囲を決定できます。
## 用語集
- **システム**: 地図PDF印刷Webアプリケーション
- **ユーザー**: 本システムを使用して地図を印刷する人
- **印刷範囲**: ユーザーが指定した地図上の矩形領域
- **分割グリッド**: 印刷範囲を分割するための行列構造（例：3×2で6ページ）
- **用紙サイズ**: 印刷に使用する用紙の規格（A4、A3など）
- **ズームレベル**: 地図の縮尺を表す値
- **貼り合わせガイド**: 印刷ページを物理的に貼り合わせるための余白とマーカー
- **ページ識別子**: グリッド位置を示す識別子（A1、A2、B1など）
- **プレビュー**: 分割された各ページの表示内容を事前確認する機能
- **DPI**: Dots Per Inch、印刷解像度を表す単位
- **印刷品質**: 地図画像の解像度設定（標準、高品質など）
## 要件
### 要件 1: 地図表示と操作
**ユーザーストーリー:** ユーザーとして、Google Mapsの地図を表示して操作したい。これにより印刷したい場所を探せる。
#### 受入基準
1. WHEN システムが起動される THEN システムは Google Maps標準地図を表示する
2. WHEN ユーザーが地図を操作する THEN システムは パン（移動）とズーム操作を可能にする
3. WHEN 地図が表示される THEN システムは 現在のズームレベルを表示する
### 要件 2: 印刷範囲の設定
**ユーザーストーリー:** ユーザーとして、用紙サイズと分割数を指定して印刷範囲を決めたい。これにより必要な領域をカバーできる。
#### 受入基準
1. WHEN ユーザーが用紙サイズを選択する THEN システムは A4、A3、B4、B3サイズから選択可能にする
2. WHEN ユーザーが分割数を指定する THEN システムは 横方向と縦方向の分割数を個別に設定可能にする
3. WHEN 用紙サイズと分割数が決定される THEN システムは 印刷範囲の矩形形状を計算する
4. WHEN 印刷範囲が計算される THEN システムは 地図上に矩形の枠を表示する
5. WHEN ユーザーが矩形枠をドラッグする THEN システムは 地図上の任意の位置に枠を移動可能にする
### 要件 3: 縮尺調整
**ユーザーストーリー:** ユーザーとして、地図の縮尺を調整して印刷範囲に合わせたい。これにより適切な詳細度で印刷できる。
#### 受入基準
1. WHEN ユーザーが縮尺を変更する THEN システムは 地図のズームレベルを調整する
2. WHEN ズームレベルが変更される THEN システムは 印刷範囲の枠サイズを維持したまま地図を拡大縮小する
3. WHEN 縮尺が調整される THEN システムは 各分割ページの表示内容を更新する
### 要件 4: プレビュー機能
**ユーザーストーリー:** ユーザーとして、分割された各ページの内容を事前確認したい。これにより印刷前に適切な設定か判断できる。
#### 受入基準
1. WHEN ユーザーがプレビューを要求する THEN システムは 全ての分割ページのサムネイルを表示する
2. WHEN プレビューが表示される THEN システムは 各ページにページ識別子を表示する
3. WHEN ユーザーがサムネイルを選択する THEN システムは 選択されたページの詳細プレビューを表示する
4. WHEN 設定が変更される THEN システムは プレビューを自動的に更新する
### 要件 5: ページ識別とマーキング
**ユーザーストーリー:** ユーザーとして、印刷されたページに識別子が表示されていてほしい。これにより貼り合わせ時に正しい位置が分かる。
#### 受入基準
1. WHEN PDFが生成される THEN システムは 各ページにグリッド位置に基づくページ識別子を配置する
2. WHEN ページ識別子が生成される THEN システムは 列をアルファベット（A、B、C...）、行を数字（1、2、3...）で表現する
3. WHEN ページ識別子が配置される THEN システムは 識別子を各ページの隅に明確に表示する
### 要件 6: 貼り合わせガイド
**ユーザーストーリー:** ユーザーとして、貼り合わせ用の余白とガイドを選択したい。これにより物理的な貼り合わせ作業がしやすくなる。
#### 受入基準
1. WHEN ユーザーが貼り合わせモードを選択する THEN システムは 「4方向余白」と「片側余白（右下）」の2つのオプションを提供する
2. WHEN 「4方向余白」が選択される THEN システムは 各ページの上下左右全てに余白を追加する
3. WHEN 「片側余白（右下）」が選択される THEN システムは 各ページの右側と下側のみに余白を追加する
4. WHEN 余白が追加される THEN システムは 余白領域に貼り合わせ用のガイドマークを配置する
5. WHEN ガイドマークが配置される THEN システムは 隣接ページとの位置合わせを容易にするマークを表示する
### 要件 7: 印刷品質とDPI設定
**ユーザーストーリー:** ユーザーとして、プリンターのDPIに合わせた印刷品質を選択したい。これにより最適な解像度で印刷できる。
#### 受入基準
1. WHEN ユーザーが印刷品質を選択する THEN システムは 標準（150 DPI）、高品質（300 DPI）、最高品質（600 DPI）のオプションを提供する
2. WHEN 印刷品質が選択される THEN システムは 選択されたDPIと用紙サイズから必要なピクセル数を計算する
3. WHEN 必要なピクセル数が計算される THEN システムは Google Maps APIから取得すべき最適な地図解像度を決定する
4. WHEN 地図解像度が決定される THEN システムは 可能な限り詳細な地図が表示されるように最大解像度を選択する
5. WHEN 高いDPIが選択される THEN システムは より高解像度の地図画像を取得する
6. WHEN プレビューが表示される THEN システムは 選択された印刷品質と実際の地図解像度を表示する
7. WHEN 印刷品質が変更される THEN システムは ファイルサイズの推定値を更新する
### 要件 8: PDF生成と出力
**ユーザーストーリー:** ユーザーとして、設定した内容でPDFを生成してダウンロードしたい。これにより印刷できる。
#### 受入基準
1. WHEN ユーザーがPDF生成を要求する THEN システムは 全ての分割ページを含む単一のPDFファイルを生成する
2. WHEN PDFが生成される THEN システムは PDFの1ページ目に全体概要ページを配置する
3. WHEN 全体概要ページが生成される THEN システムは 印刷範囲全体の地図を表示する
4. WHEN 全体概要ページが生成される THEN システムは 分割グリッドの矩形を地図上に重ねて表示する
5. WHEN 全体概要ページが生成される THEN システムは 各グリッドセルにページ識別子（A、B、C...と1、2、3...）をラベル表示する
6. WHEN PDFが生成される THEN システムは 2ページ目以降に各分割ページを指定された用紙サイズで出力する
7. WHEN PDFが生成される THEN システムは 選択されたDPIで地図画像を埋め込む
8. WHEN PDFが生成される THEN システムは 各分割ページに地図画像、ページ識別子、貼り合わせガイドを含める
9. WHEN PDF生成が完了する THEN システムは ユーザーにダウンロードを提供する
10. WHEN PDFがダウンロードされる THEN システムは ファイル名に日付と範囲情報を含める
### 要件 9: 設定の保存と復元
**ユーザーストーリー:** ユーザーとして、現在の設定をPDFに埋め込んで保存したい。これにより後で同じ設定を再利用できる。
#### 受入基準
1. WHEN PDFが生成される THEN システムは 印刷範囲、分割数、用紙サイズ、ズームレベル、印刷品質の設定情報をPDFメタデータに埋め込む
2. WHEN ユーザーが以前生成したPDFをアップロードする THEN システムは メタデータから設定情報を読み取る
3. WHEN 設定情報が読み取られる THEN システムは 地図表示と印刷範囲を以前の状態に復元する
### 要件 10: ブラウザ内完結動作
**ユーザーストーリー:** ユーザーとして、サーバーにデータを送信せずにブラウザ内で全ての処理を完結させたい。これによりプライバシーが保護される。
#### 受入基準
1. WHEN システムが動作する THEN システムは 全ての地図処理をクライアント側で実行する
2. WHEN PDFが生成される THEN システムは ブラウザ内でPDF生成を完了する
3. WHEN ユーザーデータが処理される THEN システムは サーバーへのデータ送信を行わない
4. WHEN Google Maps APIが使用される THEN システムは 必要最小限のAPI呼び出しのみを行う
### 要件 11: エラーハンドリング
**ユーザーストーリー:** ユーザーとして、エラーが発生した際に適切な通知を受け取りたい。これにより問題を理解して対処できる。
#### 受入基準
1. WHEN Google Maps APIの読み込みに失敗する THEN システムは エラーメッセージを表示してユーザーに通知する
2. WHEN 無効な分割数が入力される THEN システムは 入力を拒否して有効な範囲を示す
3. WHEN PDF生成に失敗する THEN システムは エラーの原因を説明するメッセージを表示する
4. WHEN ブラウザが必要な機能をサポートしていない THEN システムは 互換性の問題を通知する
Design
次にdesign工程に進むように指示します。技術的なことを決めます。このアプリはブラウザーで実行し、サーバサイドでの処理は行わない方針にしたかったのでその旨を伝えたりしました。
開発言語を決めるなどもこの段階で行うことになります。
この結果、Design.md が作成されました。
Design.md
# 設計書
## 概要
地図PDF印刷アプリケーションは、Google Maps APIを使用したクライアントサイドWebアプリケーションです。ユーザーは地図上で印刷範囲を指定し、複数ページに分割してPDF出力できます。全ての処理はブラウザ内で完結し、サーバーへのデータ送信は行いません。
### 主要機能
- Google Maps標準地図の表示と操作
- 用紙サイズ（A4/A3/B4/B3）と分割数の指定
- 印刷範囲の視覚的な設定
- DPI設定による印刷品質の調整
- 分割ページのプレビュー
- 全体概要ページ付きPDF生成
- 設定の保存と復元
## アーキテクチャ
### システム構成
┌─────────────────────────────────────────┐
│ ブラウザ環境 │
│ │
│ ┌──────────────────────────────────┐ │
│ │ UI Layer (React/Vue/Vanilla) │ │
│ │ - MapView │ │
│ │ - ControlPanel │ │
│ │ - PreviewPanel │ │
│ └──────────────────────────────────┘ │
│ ↓↑ │
│ ┌──────────────────────────────────┐ │
│ │ Application Layer │ │
│ │ - MapController │ │
│ │ - GridCalculator │ │
│ │ - PreviewGenerator │ │
│ └──────────────────────────────────┘ │
│ ↓↑ │
│ ┌──────────────────────────────────┐ │
│ │ Service Layer │ │
│ │ - MapService │ │
│ │ - PDFService │ │
│ │ - ConfigService │ │
│ └──────────────────────────────────┘ │
│ ↓↑ │
│ ┌──────────────────────────────────┐ │
│ │ External APIs │ │
│ │ - Google Maps JavaScript API │ │
│ │ - jsPDF / PDFKit │ │
│ └──────────────────────────────────┘ │
└─────────────────────────────────────────┘
### 技術スタック
- **フロントエンド**: HTML5, CSS3, TypeScript
- **地図API**: Google Maps JavaScript API
- **PDF生成**: jsPDF (ブラウザ内PDF生成)
- **状態管理**: シンプルなステートマネージャー（必要に応じてRedux/Zustand）
## コンポーネントとインターフェース
### 1. MapController
地図の表示と印刷範囲の管理を担当します。
interface MapController {
// 地図の初期化
initialize(containerId: string, apiKey: string): Promise<void>;
// 印刷範囲の設定
setPrintArea(bounds: LatLngBounds): void;
// 分割グリッドの表示
showGrid(config: GridConfig): void;
// ズームレベルの取得/設定
getZoomLevel(): number;
setZoomLevel(level: number): void;
// 地図の中心座標
getCenter(): LatLng;
setCenter(position: LatLng): void;
}
### 2. GridCalculator
用紙サイズと分割数から印刷範囲とグリッドを計算します。
interface GridCalculator {
// グリッド設定の計算
calculateGrid(config: PrintConfig): GridLayout;
// 各セルの地理的境界を計算
calculateCellBounds(layout: GridLayout, cellIndex: CellIndex): LatLngBounds;
// DPIと用紙サイズから必要なピクセル数を計算
calculateRequiredPixels(paperSize: PaperSize, dpi: number): Dimensions;
// 最適な地図解像度を決定
determineOptimalResolution(requiredPixels: Dimensions, bounds: LatLngBounds): number;
}
～～～省略～～～
Task list
Designが完了すると、tasks.mdファイルが作成されます。
このファイルには、設計を進めるのに必要なタスクが羅列されています。
Guiでtasks.mdを表示すると、完了していないタスクには、Start taskのラベルがついていて、クリックできるようになっています。これをクリックするとタスクが実行されます。
タスクをひとつづつ進めていきます。
赤枠の部分が、クリックできる
不具合の修正
主要な機能を実装できたので、npm run devを実行して、動作を確認してみました。
ちゃんと地図が表示されて、仕様で決めたことができそうな画面になっています。すばらしい。
ここで、分割数を横5枚に増やしてみます。
設定に応じて赤枠内の分割数が横に5枚に変化しました。
しかしよく見ると分割された一枚の紙の形状が変化しています。本来は、1枚の紙は同じ大きさで、全体の領域が横に広がる動作になる必要があります。
Kiroに質問してみました。
すると、問題点に気づき、実装を修正しようとしました。
仕様駆動開発が売りのKiroですが、仕様や設計書を見直すことはせず、実装の修正にとびついてしまうところは、残念ですね。きっと今後改善されるとおもいます。
実装の修正の前に、仕様や設計の見直しからするように、次のようにガイドしてみました。
仕様、設計には間違いはないのか？と質問
↓
設計に不足があることをみつける
↓
まず設計を修正してと依頼
↓
次は実装を修正しますか？といってきた
↓
タスクを修正したほうがいいのではないか？と質問返し
↓
タスクが修正される
↓
修正したタスクの実行を依頼
タスク完了後、想定通りの動作になりました。素晴らしい。
まとめ
- 地図印刷アプリが作成でき、動作することを確認できました
- 少ないやりとりで、かなり詳細な仕様書や設計書が生成できた
- テストコードも生成されていて、エラー無く動作した
- 修正する時は、仕様書、設計書を修正するようにKiroに働きかける必要がある
- 初見で結構動くものが作成できたので、もう少し高度なものを作成してみたい