LoginSignup
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ec2_on_aws

WindowsネイティブClaude CodeとKiroで作るRoute53+CloudFront+S3なデジタル名刺

Posted at

はじめに

みなさん、Kiroってますか？
KiroはAWSから突然リリースされた、VS Codeを模したIDEです。

Kiroがリリースされて数週間経ってしまい、完全に出遅れてしまったのですが、使ってみた方のご意見を整理すると以下のような内容になる...という理解です(追加のご意見大募集)。

  • Builder IDでログインするとAmazon Q Developerの許可が必要になるので、実態はAmazon Q Developerやないか。
  • 今までになかった要件定義～設計部分をAIが代替してくれるのはかなり面白い。
  • 要件定義～設計部分をKiroを用いる、というのはよさそうだが、それを用いた実装をさせるには実装速度がかなり遅い。

ということは、Kiroに要件定義～設計部分を任せ、その内容を元に別AIツールを用いて実装させると塩梅がいいのでは？？と考え、その組み合わせを試してみました。

※そんなことを思っていたのはもちろん私だけではなく、以下をはじめとした多くの方が語っていらっしゃいました。
【Kiro】Kiro(要件定義) × Claude Code(実装) で役割分担させてみる

本記事では、上記に加えてClaude CodeがWindowsで、WSLなしで動くようになったという記事がありましたので、Kiro × Claude Codeを試しています。

前提

  • 【推奨条件】Windows 11 24H2であること(筆者環境)
  • 【推奨条件】Power Shellバージョンが5.1.26100.4652以上であること(筆者環境) 
    PS kiro> $PSVersionTable

Name                           Value
----                           -----
PSVersion                      5.1.26100.4652
PSEdition                      Desktop
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.26100.4652
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

PS kiro>
  • 【必須条件】Kiroがインストールされていること
    • なお、現時点でKiroは需要が多すぎるようで、インストーラーのダウンロードに制限がかかっています。
    • 興味がある方は、Waitlistに登録の上、通知が届くのをお待ちください。
    • Kiro Waitlist
      • ただし、Macの場合は以下コマンドでWaitlistをすっ飛ばしてインストールが可能です 
        brew install kiro
  • 【必須条件】Node.jsがインストールされていること
  • 【必須条件】Git for Windowsがインストールされていること

WindowsでClaude Codeを準備する

  1. Power ShellでClaude Codeをインストール
    コマンド

    > npm install -g @anthropic-ai/claude-code

    実行例

    PS kiro> npm install -g @anthropic-ai/claude-code

added 2 packages in 7s

1 package is looking for funding
run `npm fund` for details
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.4.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.4.2    
npm notice To update run: npm install -g npm@11.4.2
npm notice
PS kiro>

  2. Claude Codeを起動する
    コマンド

    claude

    実行例

    1. Claude Codeのプロンプトの色モードが切り替えられます。上下矢印で選択し、Enterで決定です。上下で選択すると、画面下部の表示が変わるので、お好きなモードを選択してください。
      Claude-Code-01.png

    2. Claude Codeを利用するにあたって、認証が必要になります。今回筆者はClaude Pro契約があるため、"1"を選択しています。
      Claude-Code-02.png

    3. URLが表示されるので、ブラウザで指定のURLにアクセスします。
      Claude-Code-03.png

    4. Claude Codeに許可を与えてよいかを問われるので、承認します。
      Claude-Code-04.png

    5. Authentication Codeが表示されるので、こちらをプロンプトに入力することで承認が完了します。
      Claude-Code-05.png

    6. ログインが完了すると、"Login successful."と表示されるので、Enterで次へ進みます。
      Claude-Code-06.png

    7. 重要なセキュリティ注意事項が記されているので、必ず目を通してからEnterを押してください。
      翻訳

      🌟 Claude Codeへようこそ
セキュリティに関する注意事項：

1. Claudeは間違いを犯すことがあります
    Claudeの応答は常に確認してください。特にコードを実行する際は注意が必要です。
2. プロンプトインジェクション攻撃のリスクがあるため、信頼できるコードでのみ使用してください
    詳細については以下を参照してください：
    https://docs.anthropic.com/s/claude-code-security

Enterキーを押して続行してください...

      Claude-Code-07.png

    8. Claude Codeを実行したフォルダの中身をClaude Codeが読み取ってよいか聞かれています。良い場合は1を、フォルダを誤った場合は2を選んで、フォルダを変更してから再度実行しましょう。
      翻訳

      このフォルダ内のファイルを信頼しますか？
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Claude Codeはこのフォルダ内のファイルを読み取る可能性があります。信頼できないファイルを読み取ると、Claude Codeが予期しない動作をする可能性があります。

あなたの許可により、Claude Codeはこのフォルダ内のファイルを実行する可能性があります。信頼できないコードの実行は安全ではありません。

https://docs.anthropic.com/s/claude-code-security

**選択肢：**
> 1. はい、続行します
2. いいえ、終了します

**操作方法：**
Enter：確認 • Esc：終了

      Claude-Code-08.png

    9. 無事Claude Codeが起動しました！！！
      Claude-Code-09.png

Kiro × Claude Codeを試してみる

ここからがメインです。
今回は最近拝見したLTのネタである、NFCカードを用いた名刺作成をしてみました。
AWSとゼロから始めるデジタル名刺生活～S3+CloudFront 編～

前提

試してみる

  1. KiroをSpecモードで起動し、要望を伝えてみます。

    NFCカードを用いたデジタル名刺を作成したいです。
NFCカードにURLを埋め込み、CloudFrontにアクセス、そこからS3に静的ホスティングするイメージです。

要件は以下です。
・Route53にドメインは購入しているので、CloudFrontのURL直ではなく、購入したドメインを使用してください。
・コストはできるだけ最小にしつつ、セキュリティは担保するように心掛けて下さい。

  2. まずは要件定義書(requirements.md)が作成されます。
    内容を見るに、何一つ違和感のない要件定義ができているように思います。

    Kiro01.png

    requirements.md 
    # Requirements Document

## Introduction

NFCカードを使用したデジタル名刺システムの開発。NFCカードにURLを埋め込み、Route53で管理されたカスタムドメインを通じてCloudFront経由でS3の静的サイトにアクセスする構成。コスト最適化とセキュリティを重視した実装を行う。

## Requirements

### Requirement 1

**User Story:** NFCカードの所有者として、カードをスマートフォンにタップするだけで自分のデジタル名刺を表示したい。これにより、物理的な名刺交換よりも効率的で環境に優しい名刺交換を実現したい。

#### Acceptance Criteria

1. WHEN NFCカードがNFC対応デバイスにタップされた時 THEN システムは自動的にデジタル名刺ページを開く SHALL
2. WHEN デジタル名刺ページが表示された時 THEN 名前、職業、連絡先情報が明確に表示される SHALL
3. WHEN ページが読み込まれた時 THEN 3秒以内に完全に表示される SHALL

### Requirement 2

**User Story:** システム管理者として、Route53で購入済みのカスタムドメインを使用してアクセスできるようにしたい。これにより、プロフェッショナルな印象を与え、ブランディングを強化したい。

#### Acceptance Criteria

1. WHEN ユーザーがNFCカードをタップした時 THEN Route53で管理されたカスタムドメインのURLにリダイレクトされる SHALL
2. WHEN カスタムドメインにアクセスした時 THEN CloudFrontディストリビューションを経由してコンテンツが配信される SHALL
3. WHEN ドメイン設定が完了した時 THEN HTTPSでのアクセスが強制される SHALL

### Requirement 3

**User Story:** システム管理者として、運用コストを最小限に抑えたい。これにより、長期的に持続可能なサービス運用を実現したい。

#### Acceptance Criteria

1. WHEN S3バケットが設定された時 THEN 静的ウェブサイトホスティング機能を使用する SHALL
2. WHEN CloudFrontが設定された時 THEN 適切なキャッシュ設定でデータ転送量を最小化する SHALL
3. WHEN リソースが作成された時 THEN 不要なAWSサービスは使用しない SHALL
4. WHEN S3バケットが設定された時 THEN 最も安価なストレージクラスを使用する SHALL

### Requirement 4

**User Story:** システム管理者として、セキュリティを確保したい。これにより、不正アクセスや情報漏洩を防止したい。

#### Acceptance Criteria

1. WHEN S3バケットが作成された時 THEN パブリックアクセスは最小限に制限される SHALL
2. WHEN CloudFrontディストリビューションが設定された時 THEN Origin Access Control (OAC)を使用してS3への直接アクセスを制限する SHALL
3. WHEN HTTPSアクセスが設定された時 THEN SSL/TLS証明書は自動的に管理される SHALL
4. WHEN セキュリティヘッダーが設定された時 THEN 適切なセキュリティヘッダー（HSTS、CSP等）が含まれる SHALL

### Requirement 5

**User Story:** デジタル名刺の閲覧者として、モバイルデバイスで見やすい形式で情報を確認したい。これにより、どのデバイスからでも快適に情報を閲覧したい。

#### Acceptance Criteria

1. WHEN デジタル名刺がモバイルデバイスで表示された時 THEN レスポンシブデザインで最適化される SHALL
2. WHEN 連絡先情報が表示された時 THEN ワンタップで電話やメール送信ができる SHALL
3. WHEN ソーシャルメディアリンクが表示された時 THEN 各プラットフォームに直接アクセスできる SHALL

### Requirement 6

**User Story:** システム管理者として、インフラストラクチャをコードで管理したい。これにより、再現可能で保守しやすいシステムを構築したい。

#### Acceptance Criteria

1. WHEN インフラストラクチャが構築された時 THEN Infrastructure as Code (IaC)ツールを使用する SHALL
2. WHEN 設定変更が必要な時 THEN バージョン管理されたコードで管理される SHALL
3. WHEN デプロイが実行された時 THEN 自動化されたプロセスで実行される SHALL

  3. "Move to design phase"をクリックして、次へ進みます。

  4. 設計書(design.md)が作成されます。
    あくまでざっくりチェックしかしていませんが、要件に合わせて、コスト最小のセキュリティを意識した構成になっているように見えました。

    Kiro02.png

    ※長すぎるので、転記は省略

  5. "Move to implementation plan"をクリックして、次へ進みます。

  6. タスクリスト(tasks.md)が作成されます。
    内容自体は申し分のない、この順で作成していけばいけそうです。ただし、筆者がCDKを使いこなせないため、Terraformでの書き直しを指示してます。

    Kiro03.png

    tasks.md 
    # Implementation Plan

- [ ] 1. プロジェクト構造とAWS CDKセットアップ
- TypeScript AWS CDKプロジェクトの初期化
- 必要な依存関係とdevDependenciesの設定
- ESLint、Prettier、Jest設定ファイルの作成
- _Requirements: 6.1, 6.2_

- [ ] 2. AWS CDKインフラストラクチャコードの実装
- [ ] 2.1 S3バケット設定の実装
- S3バケットリソースの定義とセキュリティ設定
- バケットポリシーとOAC用の権限設定
- バージョニングと暗号化の設定
- _Requirements: 3.1, 3.4, 4.1, 4.2_

- [ ] 2.2 CloudFront Distribution設定の実装
- CloudFrontディストリビューションリソースの定義
- Origin Access Control (OAC)の設定
- キャッシュビヘイビアとTTL設定の実装
- _Requirements: 2.2, 3.2, 4.2_

- [ ] 2.3 Route53 DNS設定の実装
- Route53ホストゾーンの参照設定
- AレコードとCNAMEレコードの定義
- CloudFrontディストリビューションとの連携設定
- _Requirements: 2.1, 2.2_

- [ ] 2.4 Certificate Manager SSL証明書の実装
- SSL証明書リソースの定義
- DNS検証の自動化設定
- CloudFrontディストリビューションとの関連付け
- _Requirements: 2.3, 4.3_

- [ ] 3. セキュリティ機能の実装
- [ ] 3.1 CloudFront Functionsでセキュリティヘッダー実装
- セキュリティヘッダー追加用のCloudFront Function作成
- HSTS、CSP、X-Frame-Optionsなどの設定
- CloudFrontディストリビューションとの関連付け
- _Requirements: 4.4_

- [ ] 3.2 S3バケットポリシーの実装
- OAC専用のバケットポリシー作成
- パブリックアクセスブロック設定
- 最小権限原則に基づく権限設定
- _Requirements: 4.1, 4.2_

- [ ] 4. デジタル名刺ウェブサイトの実装
- [ ] 4.1 HTMLテンプレートとレスポンシブデザイン実装
- モバイルファーストのHTMLテンプレート作成
- CSS Grid/Flexboxを使用したレスポンシブレイアウト
- メタタグとOGP設定の実装
- _Requirements: 5.1_

- [ ] 4.2 連絡先情報とインタラクション機能実装
- 電話番号とメールアドレスのワンタップ機能
- ソーシャルメディアリンクの実装
- vCard形式でのダウンロード機能
- _Requirements: 1.2, 5.2, 5.3_

- [ ] 4.3 パフォーマンス最適化の実装
- 画像の最適化とWebP形式対応
- CSS/JavaScriptの最小化
- Critical CSSのインライン化
- _Requirements: 1.3, 3.2_

- [ ] 5. デプロイメント自動化の実装
- [ ] 5.1 CDKデプロイスクリプトの実装
- CDKスタックのデプロイコマンド作成
- 環境変数とパラメータ管理
- デプロイ前の検証スクリプト
- _Requirements: 6.3_

- [ ] 5.2 静的サイトデプロイメント自動化実装
- S3へのファイルアップロードスクリプト
- CloudFrontキャッシュ無効化の自動実行
- デプロイ後の動作確認スクリプト
- _Requirements: 6.3_

- [ ] 6. テストスイートの実装
- [ ] 6.1 CDKインフラストラクチャテストの実装
- CDKスタックのユニットテスト作成
- S3、CloudFront、Route53設定の検証テスト
- セキュリティ設定の検証テスト
- _Requirements: 4.1, 4.2, 4.3, 4.4_

- [ ] 6.2 End-to-Endテストの実装
- Playwrightを使用したブラウザテスト
- レスポンシブデザインの自動テスト
- パフォーマンステストの実装
- _Requirements: 1.3, 5.1_

- [ ] 6.3 セキュリティテストの実装
- HTTPS強制の検証テスト
- セキュリティヘッダーの検証テスト
- S3直接アクセス制限の検証テスト
- _Requirements: 4.1, 4.2, 4.3, 4.4_

- [ ] 7. 監視とロギングの実装
- [ ] 7.1 CloudWatchアラームの実装
- CloudFrontエラー率監視アラーム
- S3アクセスエラー監視アラーム
- SSL証明書期限切れアラーム
- _Requirements: 4.3_

- [ ] 7.2 ログ分析とダッシュボード実装
- CloudFront Access Logsの設定
- S3 Access Logsの設定
- CloudWatchダッシュボードの作成
- _Requirements: 3.2_

- [ ] 8. ドキュメントとデプロイガイドの作成
- [ ] 8.1 README.mdとセットアップガイド作成
- プロジェクトの概要と前提条件
- ローカル開発環境のセットアップ手順
- デプロイメント手順の詳細説明
- _Requirements: 6.2_

- [ ] 8.2 NFCカード設定ガイドの作成
- NFCカードへのURL書き込み手順
- 推奨NFCカードとツールの紹介
- トラブルシューティングガイド
- _Requirements: 1.1_

  7. 以下の通り、Terraformでの書き直しを指示してみます。

    IaCとして、CDKではなくTerraformを採用してもらえませんか？

  8. tasks.mdが、Terraformを前提とした内容に書き換わりました。

    Kiro04.png

    tasks-remake.md 
    # Implementation Plan

- [ ] 1. プロジェクト構造とTerraformセットアップ
- Terraformプロジェクトの初期化とディレクトリ構造作成
- provider.tf、variables.tf、outputs.tfの基本設定
- terraform.tfvarsテンプレートとGitignore設定
- _Requirements: 6.1, 6.2_

- [ ] 2. Terraformインフラストラクチャコードの実装
- [ ] 2.1 S3バケット設定の実装
- S3バケットリソースの定義とセキュリティ設定
- バケットポリシーとOAC用の権限設定
- バージョニングと暗号化の設定
- _Requirements: 3.1, 3.4, 4.1, 4.2_

- [ ] 2.2 CloudFront Distribution設定の実装
- CloudFrontディストリビューションリソースの定義
- Origin Access Control (OAC)の設定
- キャッシュビヘイビアとTTL設定の実装
- _Requirements: 2.2, 3.2, 4.2_

- [ ] 2.3 Route53 DNS設定の実装
- Route53ホストゾーンの参照設定
- AレコードとCNAMEレコードの定義
- CloudFrontディストリビューションとの連携設定
- _Requirements: 2.1, 2.2_

- [ ] 2.4 Certificate Manager SSL証明書の実装
- SSL証明書リソースの定義
- DNS検証の自動化設定
- CloudFrontディストリビューションとの関連付け
- _Requirements: 2.3, 4.3_

- [ ] 3. セキュリティ機能の実装
- [ ] 3.1 CloudFront Functionsでセキュリティヘッダー実装
- セキュリティヘッダー追加用のCloudFront Function作成
- HSTS、CSP、X-Frame-Optionsなどの設定
- CloudFrontディストリビューションとの関連付け
- _Requirements: 4.4_

- [ ] 3.2 S3バケットポリシーの実装
- OAC専用のバケットポリシー作成
- パブリックアクセスブロック設定
- 最小権限原則に基づく権限設定
- _Requirements: 4.1, 4.2_

- [ ] 4. デジタル名刺ウェブサイトの実装
- [ ] 4.1 HTMLテンプレートとレスポンシブデザイン実装
- モバイルファーストのHTMLテンプレート作成
- CSS Grid/Flexboxを使用したレスポンシブレイアウト
- メタタグとOGP設定の実装
- _Requirements: 5.1_

- [ ] 4.2 連絡先情報とインタラクション機能実装
- 電話番号とメールアドレスのワンタップ機能
- ソーシャルメディアリンクの実装
- vCard形式でのダウンロード機能
- _Requirements: 1.2, 5.2, 5.3_

- [ ] 4.3 パフォーマンス最適化の実装
- 画像の最適化とWebP形式対応
- CSS/JavaScriptの最小化
- Critical CSSのインライン化
- _Requirements: 1.3, 3.2_

- [ ] 5. デプロイメント自動化の実装
- [ ] 5.1 Terraformデプロイスクリプトの実装
- terraform plan/applyの自動化スクリプト作成
- 環境変数とterraform.tfvarsの管理
- デプロイ前のterraform validateとformat実行
- _Requirements: 6.3_

- [ ] 5.2 静的サイトデプロイメント自動化実装
- S3へのファイルアップロードスクリプト
- CloudFrontキャッシュ無効化の自動実行
- デプロイ後の動作確認スクリプト
- _Requirements: 6.3_

- [ ] 6. テストスイートの実装
- [ ] 6.1 Terraformインフラストラクチャテストの実装
- Terraformコードのユニットテスト作成（Terratest使用）
- S3、CloudFront、Route53設定の検証テスト
- セキュリティ設定の検証テスト
- _Requirements: 4.1, 4.2, 4.3, 4.4_

- [ ] 6.2 End-to-Endテストの実装
- Playwrightを使用したブラウザテスト
- レスポンシブデザインの自動テスト
- パフォーマンステストの実装
- _Requirements: 1.3, 5.1_

- [ ] 6.3 セキュリティテストの実装
- HTTPS強制の検証テスト
- セキュリティヘッダーの検証テスト
- S3直接アクセス制限の検証テスト
- _Requirements: 4.1, 4.2, 4.3, 4.4_

- [ ] 7. 監視とロギングの実装
- [ ] 7.1 CloudWatchアラームの実装
- CloudFrontエラー率監視アラーム
- S3アクセスエラー監視アラーム
- SSL証明書期限切れアラーム
- _Requirements: 4.3_

- [ ] 7.2 ログ分析とダッシュボード実装
- CloudFront Access Logsの設定
- S3 Access Logsの設定
- CloudWatchダッシュボードの作成
- _Requirements: 3.2_

- [ ] 8. ドキュメントとデプロイガイドの作成
- [ ] 8.1 README.mdとセットアップガイド作成
- プロジェクトの概要と前提条件（Terraform、AWS CLI）
- ローカル開発環境のセットアップ手順
- Terraformを使用したデプロイメント手順の詳細説明
- _Requirements: 6.2_

- [ ] 8.2 NFCカード設定ガイドの作成
- NFCカードへのURL書き込み手順
- 推奨NFCカードとツールの紹介
- トラブルシューティングガイド
- _Requirements: 1.1_

  9. "Finalize task list"をクリックして、要件定義～設計までを完了させます。
    Kiro05.png

  10. ここまでで作成した3ファイルを用いて、Claude Codeで実装してみましょう。

    Claude Codeはデフォルトではカレントフォルダにあるファイルを探索します。
    しかし、Kiroは、該当の3ファイルを".kiro/spec/xxxxxxxxx"配下に作成するため、それを明示する必要があります。

    requirements.md、design.md、tasks.mdを参照して、実装してください。
ファイルは、".kiro\specs\nfc-digital-business-card"配下に配置されています。

  11. 以下のようなタスクの整理から始まりました。
    途中、実行の可否を2回ほど問われたタイミングがありましたが、今回はAutoで実行させる選択肢を選んでいます。

    > requirements.md、design.md、tasks.mdを参照して、実装してください。
ファイルは、".kiro\specs\nfc-digital-business-card"配下に配置されています。

● I'll help you implement the NFC digital business card system. Let me first
read the specification files to understand the requirements.

● Read(.kiro\specs\nfc-digital-business-card\requirements.md)
⎿  Read 69 lines (ctrl+r to expand)

● Read(.kiro\specs\nfc-digital-business-card\design.md)
⎿  Read 284 lines (ctrl+r to expand)

● Read(.kiro\specs\nfc-digital-business-card\tasks.md)
⎿  Read 122 lines (ctrl+r to expand)

● Now I'll create a comprehensive todo list and start implementing the NFC
digital business card system based on the specifications.

● Update Todos
⎿  [ ] Set up Terraform project structure and basic configuration
    [ ] Implement S3 bucket configuration with security settings
    [ ] Implement CloudFront distribution with OAC
    [ ] Implement Route53 DNS configuration
    [ ] Implement SSL certificate with Certificate Manager
    [ ] Implement responsive HTML digital business card
    [ ] Create CloudFront Functions for security headers
    [ ] Add contact interaction features (tel:, mailto:, vCard)
    [ ] Create deployment automation scripts
    [ ] Implement testing suite (unit, E2E, security)

● Let me start by setting up the Terraform project structure and basic
configuration.

● Update Todos
⎿  [ ] Set up Terraform project structure and basic configuration
    [ ] Implement S3 bucket configuration with security settings
    [ ] Implement CloudFront distribution with OAC
    [ ] Implement Route53 DNS configuration
    [ ] Implement SSL certificate with Certificate Manager
    [ ] Implement responsive HTML digital business card
    [ ] Create CloudFront Functions for security headers
    [ ] Add contact interaction features (tel:, mailto:, vCard)
    [ ] Create deployment automation scripts
    [ ] Implement testing suite (unit, E2E, security)

● List(.)
⎿  Listed 2 paths (ctrl+r to expand)

Bash(mkdir -p infrastructure/terraform website scripts tests)
⎿  Running…

╭─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Bash command                                                                                                                                                                                            │
│                                                                                                                                                                                                         │
│   mkdir -p infrastructure/terraform website scripts tests                                                                                                                                               │
│   Create project directory structure                                                                                                                                                                    │
│                                                                                                                                                                                                         │
│ Do you want to proceed?                                                                                                                                                                                 │
│ > 1. Yes                                                                                                                                                                                                │
│   2. Yes, and don't ask again for mkdir commands in xxxxxxxxxxxxxxxxxxx                                                                                    │
│   3. No, and tell Claude what to do differently (esc)

  12. タスクが終わったタイミングで以下のようになりました。
    Kiro-ClaudeCode01.png

    次のタスクとしては以下が指示されていました。

    🚀 次のステップ

1. terraform.tfvarsを設定
2. ./scripts/deploy.shでデプロイ
3. NFCカードにURLを書き込み
4. テスト実行で品質確認

    terraform.tfvarsは以下がサンプルとして用意されていました。

    aws_region      = "ap-northeast-1"
domain_name     = "your-domain.com"
hosted_zone_id  = "Z1234567890ABC"
project_name    = "nfc-digital-business-card"
environment     = "prod"

business_card_data = {
    name     = "Your Name"
    title    = "Your Title"
    company  = "Your Company"
    email    = "your.email@example.com"
    phone    = "+81-90-1234-5678"
    website  = "https://your-website.com"
    linkedin = "https://linkedin.com/in/yourprofile"
    twitter  = "https://twitter.com/yourhandle"
    github   = "https://github.com/yourusername"
    bio      = "Your professional bio here."
}

tags = {
    Project     = "NFC Digital Business Card"
    Environment = "Production"
    ManagedBy   = "Terraform"
    Owner       = "Your Name"
}

  13. その後、Claude Codeに実行を依頼し、エラー解消もClaude Codeに任せつつ、追加要件も伝えたところ、最終的には以下のような画面が作成できました。
    Kiro-ClaudeCode02.png

  14. NFCカードへURLの書き込みは、Claude CodeでもKiroでもできないため、そちらは省略します...
    実施の場合はこの辺りを参照
    NFCカードを使ってスマホでその場でパッと自己紹介できる名刺的な仕組みを作った話【
    AWSとゼロから始めるデジタル名刺生活～S3+CloudFront 編～

    ちなみに、上記2つ目のリンクにあるLTを拝見して、このブログを書いてみようかなーと思い立ちました。

おわりに

Kiroによる要件定義～設計、そしてClaude Codeによる実装～実行を試してみました。記載していませんが、Kiroの要件定義ではいくつか不足しているものがあったため、Claude Codeに追加要件を伝えて実装していましたが、それでも思っていたより簡単に実装できたなぁ...と感じています。

この組み合わせ、現実的に結構よさそうですね！

トラブルシュート

  • Claude CodeからGit for Windowsが見つけられないエラー
    私の環境で初めてClaude Codeを起動しようとした際、以下エラーが発生しました。
    これはサブタイトルにもあるように、Claude Codeからgit-bashが見つけられないというものです。

    PS kiro> claude
Claude Code on Windows requires git-bash (https://git-scm.com/downloads/win). If installed but not in PATH, set environment variable pointing to your bash.exe, similar to: CLAUDE_CODE_GIT_BASH_PATH=C:\Program Files\Git\bin\bash.exe
PS kiro>

    対処法としては、"CLAUDE_CODE_GIT_BASH_PATH"にgit-bashのパスを記載することです。
    ただ、私の環境ではGit for Windowsがインストール済みであるにもかかわらず、うまく認識してくれなかったので、、Git for Windowsを再インストールすることで対応しました。

    ※特にアンインストールはしていません

    もし同様のエラーが出た際は、Git for Windowsの再インストールをお試しください。

参考

13
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?