2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Kiroで画像生成アプリをちゃちゃっと作る

Last updated at Posted at 2025-12-21

Kiroを試しに触ったらKiroダウンロードから15分でアプリ作れたのでメモ
仕様駆動はいったん置いておいて気楽に触ってます

1. Kiroをダウンロード

2. Git連携

Kiroを起動するとまずはGit連携の画面が出るので、指示に沿ってブラウザでの認証などをする。

3. Vive Coding

Vive Codingのモードでapp creating image with bedrockといったら
ささっとreadme.meとかindex.jsとか作ってくれた。(10~20秒くらいかな)

Kiroが最初に作ってくれたコードは.envにawsのクレデンシャル入れるスタイルだったんだけど、クレデンシャルベタ打ちはいただけないので直してくれ(I don't want to type my credentials in .env)って言ったらローカルの~/.aws/credentialsにクレデンシャルセットすればOKな形式に直してくれた。(いったんlocalhostで動かすだけだからいったんこれで良しとした)

作ってくれたコードの一部
image.png

Kiroからのチャット。起動の仕方も教えてくれる(ちなみにこれはクレデンシャルハードコードなのでリテイクを出した)
image.png
リテイクを受けて直してくくれたところ
image.png
上の続き。一番下に使用したCreditsも表示される
image.png

4. アプリを使ってみる

npm startしてブラウザからアクセスしたらImage Generatorの画面が出てきたので、適当に入れてGenerate Imageしてみる

image.png

画像ができたー!
image.png

5. 使ってみた感想

クレデンシャルをベタ打ちだったり、実はプルダウンで画像生成モデルを選択するところで既にリタイアしているモデルがでてきちゃったり、一度でパーフェクトなものはできないけど、こうしたいってチャットしたりエラーメッセージを貼ったりすると修正してくれるので5往復くらいで動くものができた。

以前にも似たようなアプリを自分で作ってたものの、フロントエンド作るのが億劫で途中で止めてたので、さくっと作れるようになったのは嬉しい!
こういうの作りたい…ってイメージをチャットするとコードがサクサクできるのは見てて楽しかったし、Kiroのオバケアイコンがうごうごするのがかわいかった。
(気になる人はぜひ使ってみてください)

無料利用枠は2025/12/21時点では50クレジット/月+初回利用は500クレジットのボーナス(有効期限あり)
https://aws.amazon.com/jp/blogs/news/new-pricing-plans-and-auto/

2
1
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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?