目次
はじめに
どうも～、実はサンタに扮することのできるディーネットの山田です。
（山田 → 山：San、田：Taで、SanTaです！！）
・
はい！、雪が降るくらい寒くなったと思いますが、今年もやってきましたアドベントカレンダーーーーー
今年は「赤と緑」に縛りを設けて何か、動作するものを作ってみようということで、「赤：Amplify」と「緑：Bedrock」に焦点を充ててクリスマスらしいものを作ってみました！！！
タイトルにもあるとおり、AIでクリスマスカードを生成するアプリケーションのほとんどをKiroによって作ってもらいました。
（Kiroが得意とする仕様駆動開発は使ってないので、そういった利用方法のブログではありません）
私は普段、インフラエンジニアとしてバックエンドの構築等を行っており、フロントエンドを生業にしている訳ではないので、１からフロントエンドのコードを開発するのは、非常に難易度が高い話です。
昨年の今頃は、某GPTにコードと修正したい内容をプロンプトとして渡して修正、テストを繰り返しておりましたが、IDEだけでコード開発が完結できるようになったのは、非常に便利ですね。
構成図
構成図としては簡単ですが、以下のようになっております。
技術構成
-
AWS Amplifyでは、Backendとして以下のリソースが作成されています。
AWSサービス名 用途 Amazon API Gateway フロントエンドからBedrockを呼び出すのにREST APIで通信を行います AWS Lambda フロントエンドからのリクエストを元にBedrockからモデルを呼び出します -
続いて、Amazon Bedrockで利用しているモデルの利用用途です。
Model名 用途 Amazon Nova Pro Nova Canvasで目的の画像を生成するために日本語から英語のプロンプトを生成 Amazon Nova Canvas プロンプトから目的の画像を生成
成果物について
クリスマス当日までの限定公開になります。。。
※API Gatewayの使用量プランを使用して1日に受付することのできるリクエスト数を制限していますので、皆さん仲良く使ってください。
https://www.2025adcale.rakuraku.world/
（上記URLに関する一切のことや、生成される成果物に対して当社や個人は責任を負いませんのでご注意ください）
先にクリスマスカード生成AIの使い方について
1. クリスマスカード生成アプリケーションにアクセス
「背景シーン説明」で背景画像の元となるテキストを考えて入力してください。
「スタイル」についても選択いただくことで雰囲気が違った画像になります。
2. プロンプトを元に背景画像を生成
プロンプトが入力できましたら、「背景画像を生成」をクリックして背景画像を生成してください。
主な機能としては、画像が生成できたら完了です。
3. メッセージを追加したい場合は、メッセージを添える
HTMLのグラフィックキャンバス要素を利用しているため、ブラウザ内蔵の機能を使って生成された画像にメッセージを埋め込むことができます。
4. ダウンロードできるようにしてあるので、お世話になった方などへ送ってみましょう
最後に、表示された画像はダウンロードできますのでダウンロードしてぜひクリスマスカードの代わりとして送ってみましょう。
作成したコードは、GitHubで管理
Kiroに作成してもらったソースコードは、GitHubで管理
Amplifyとの接続が容易にできるため、アプリケーションのソースコードは、GitHubで管理しました。
いろいろ問題があると困るので、Privateリポジトリでひっそりと管理しています。
Amplifyでアプリケーションの設定方法
さて、少し脱線してしまっておりましたが、技術者らしくAmplifyでのアプリケーション設定方法を見ていきます。
新しいアプリを作成
Amplifyはアプリケーションを新たに作成する段階から、Gitの利用がかなり推奨されています。
今回は、GitHubを利用しましたので、「GitHub」を選択しています。
GitHubとの連携を選択
「次へ」をクリックするとGitHubとの連携を求められるので、適切なアカウントを選択します。
目的のブランチが出てこなかった
今回は、Org配下にブランチを作ったので、そのままでは自分のブランチしか表示されませんでした。
さらに設定ができるようだったので「GitHubのアクセス許可をアップデート」をクリックしました。
どのGitHubアカウントか？と再度選択を求められたので、適切なアカウントをクリックしました。
すると、Org一覧が表示されたので、適切なOrgを選択します。
すべてのリポジトリを見せるか、特定のリポジトリを見せるか選択を求められたが、今回はすべてを選びました。
ようやく目的のリポジトリを選択
ここまでやって、ようやく目的のリポジトリを選択することができました。
アプリケーションに関する設定
事前にリポジトリ内で、AmplifyのCIに関する設定ファイル（amplify.yml）を定義してあったので、自分で調整することなく次へ進められます。
必要に応じてパスワードで保護する
このタイミングで、BASIC認証を設定したい場合は、設定しておきましょう。
詳細設定でビルド環境の設定ができる
ビルド環境の詳細設定を行うことができるようです。
今回は、特にカスタマイズしたいことがなかったのでデフォルトのままとしました。
ビルドマシンのインスタンスタイプ変更やビルドイメージを変更して使うことができるようです。
設定の最終確認を実施する
最終確認して問題がなければ、設定を保存して初回のデプロイが実行されます。
Amplifyのビルド結果について
デプロイのビルド履歴確認
設定を保存した時点で、自動的にデプロイが開始されるので、一部失敗となっていますが、以下のような内容で、デプロイの状況を確認することができます。
Kiroを使った開発環境についてご紹介
Kiroを使った開発環境は、リモート設置しています。
「Remote - SSH」プラグインを活用することで、リモートを開発環境にすることができるためリモート環境に接続して開発しました。
Kiroのチャット欄に修正を依頼したファイルとプロンプトを渡して修正などを依頼しています。
具体的に目的のファイルを編集したいときは、ファイルを指定することでより精度が向上します。
対象のファイルと直してほしいことを伝えただけです。
コードの内容をチェックして修正してくれました。
開発に際してはまったポイント
- Amazon Nova Proではなく元々Claude 4.5 Sonnetを使う予定でしたが、大人の事情（ClaudeをAWSパートナーが使うのは色々と制限があるよう）で、利用できないことがわかるまでに1,2日要しました。
- エラー内容をKiroに質問しても、原因の提示が行われず、Claude 3.5 Sonnetの利用を常にしようとする動作が発生してました。
- 生成AIによって文字の挿入まで実施させようとしてましたが、Amazon Nova Canvasが英語にプロンプトにのみ対応している形だったので、諦めてクライアントブラウザ上で文字を加工する形にしました。
まとめ
- Kiroとチャット欄で対話するだけで、作りたいシステムを簡単に作ることができました。
- 簡単にシステムの中身を作れるようになりましたが、AWSのセキュリティ周りとかはAWSエンジニアの技量がまだまだ必要だなと思いました。
- すべてをKiroに任せるとAIらしいUI/UXに仕上げられるので、ちょこちょこ人間でデザインを整えてあげるとよりかっこよく見えます。
- 人間が作る物ですら絶対はないので、AIで簡単にシステムを作れるようになったからといって過信は禁物です。必ずセキュリティ周りの設定確認は動作テストは必ず行うようにしましょう。
- クリスマスカードを保存して短縮URLで送ろうとしましたが、何のブログかわからなくなってしまうので、機能面はこのあたりで留めておきます!
プロフィール
テクニカルサポートは卒業して、フロントサイドでお客様環境の構築をさせていただいております。
たまに、テクニカルサポートでご対応させていただくことがあるかもしれませんが、その際はよろしくお願いいたします。
インフラ系のエンジニアですが、時々休日プログラマー（Python、PHP）をやっております。