Kiroを使って 技術ブログ採点AI を作成してみました
初めてのアプリ開発で、初めてKiroを実際に触ってみました
初めてばかりでわからないことも多かったですが、まるッと記事にしてみます！
さっそくKiroを使ったアプリ開発について見ていきましょう！
無料トライアルとして、初めて Kiro にアクセスした際に14 日間有効な 500 クレジットのボーナスが付与されました！
無料トライアルの詳細や、Kiroの料金体系についてはこちらから
アプリ作成案
アプリ開発をするためのセットアップは以前やっておいたので、アプリ開発部分からスタートしていきます
セットアップ方法について気になる方はこちらを参考にしてください！
今回は、技術ブログを採点してくれるAIを作りたいと思っています！
作成前に、私の頭の中で以下のようなものをイメージしていました
- UIはiPhoneのブラックモードのようなシックな感じ
- 初期画面にはURL入力欄と採点ボタンがある
- URLを入力し採点ボタンを押下すると、採点が開始される
- 採点が完了するとURL入力欄の下に総合点が大きく表示され、その下にカテゴリごとの採点も表示される
- カテゴリは「技術力の高さ」「読みやすさ」「SEOの強さ」とあと何個か（←あと何個かはKiroに考えてもらお〜）
アプリ開発開始！
なんとなくのアプリ案が頭の中で描けたため、Kiroに開発をお願いしました
まずは思っていることを描いてみよう……
技術ブログ採点AIを作りたいと思っています。
Qiitaのような技術ブログ投稿サイトのURLを入力すると0点から100点の間で採点してくれるというAIです
採点のカテゴリは決まっていないですが、「技術力の高さ」「読みやすさ」「SEOの強さ」などを考えています（良いカテゴリ案があったらください）
UIはブラックモードのようなシックでかっこいいイメージ、画面真ん中より少し上にURLを入力する箇所があり、その横にある採点ボタンを押すと採点が始まります。採点が終わると総合点が0点から100点の間で表示され、その下にカテゴリ別のランクが表示されるといった感じがいいです
採点カテゴリの提案もしてくれて、プロジェクト構成も考えてくれて最高じゃん！
と思っていたのですが、30分しても作業は完了せず。。
ただ自分のやりたいことを書いて丸投げしてしまったので、処理に時間がかかったのだと思います
フロントエンド部分の開発
気を取り直して、小さくパーツごとに作ることにしていきます
先ほどのプロンプトに以下の文章を加えてみました
まずはブラックモードっぽい感じでURLを入力する欄と採点ボタンがある画面を作成してください
すると1分程度でUIを作成してくれました
かなりいい感じ！（※スコアに関してはランダムな数字を表示してくれています）
総合スコアの枠は丸がいいなと思ったので、お願いしてみました
総合点スコアを出力する箇所の枠は丸がいいです。CSSファイルから変更してください
ものの10秒で変更を加えてくれました！
（人生初の開発経験、そして初のAI駆動の開発経験なのでこの時点でKiroの凄さに驚きが隠せないです）
バックエンド部分の開発
次にバックエンド部分（AI部分）の設定をしていきます
Kiro頼りにはなっていますが、「どんな構成がいいの」と確認したところPythonバックエンド + Bedrock APIを推奨されたので、その方針でいきます
例のごとく、KiroにPythonバックエンドの部分は作成してもらいました
tech-blog-scorer/
├── frontend/ # フロントエンド
│ ├── index.html # HTMLファイル（UIのメイン画面）
│ ├── style.css # CSSファイル（デザイン・レイアウト）
│ └── script.js # JavaScriptファイル（UI操作・API呼び出し）
├── backend/ # Pythonバックエンド
│ ├── app.py # Flaskサーバー（エントリーポイント）
│ ├── scraper.py # 記事スクレイピング用モジュール
│ ├── analyzer.py # AI分析処理（Amazon Bedrock利用）
│ └── requirements.txt # Python依存パッケージ一覧
├── .env.example # 環境変数サンプル（APIキーなど）
└── README.md # プロジェクト概要・セットアップ手順
あとはBedrock APIを使えるように設定していきます
Bedrock APIの設定方法
ステップ1: AWSアカウントとIAMユーザー作成
①AWSコンソールにログイン
②IAMで新しいユーザーを作成
③権限：AmazonBedrockFullAccess を付与
④アクセスキーとシークレットキーを取得・保存
ステップ2: Bedrockモデルへのアクセス有効化
①AWSコンソールで「Amazon Bedrock」を検索
②左メニュー「Model access」をクリック
③「Modify model access」をクリック
④使用したいモデルにチェック
⑤「Save changes」
今回はClaude 3.5 Soneetを使用しました！
バックエンドの起動！！
最後にバックエンドを起動して完成となります！
ローカルの***と繋ぐので、ポート⚪︎⚪︎⚪︎番を開きましょう！と言いたいのですが、お恥ずかしながらそこらへんの知識が乏しく、、（ちゃんと勉強します
）
ということでKiro様の言いなりにならせていただきました
完成したので実際に触ってみる
そんなこんなで完成しました！（Kiro様ほんまにありがとうな）
さっそく実際の技術ブログを食わせて採点してもらいました
実際に実行した結果と過去に私がQiitaに投稿したブログから！
| 記事タイトル | 総合スコア | 技術力の高さ | 読みやすさ | SEOの強さ | 実用性 | 独自性 |
|---|---|---|---|---|---|---|
| AWS認定試験が受験料半額キャンペーン中！！ | 71 | D | B | A | S | C |
| JAWS-UG LT初参加レポート 〜初心者でも楽しめるコミュニティ体験〜 | 83 | C | S | A | S | A |
| 【合格体験記】AWS CLF-C02合格までの道しるべ | 83 | B | S | A | S | B |
| 【合格体験記】AWS SAA-C03合格までの道しるべ | 88 | A | S | S | S | B |
| 【合格体験記】AWS SAP-C02合格までの道しるべ | 88 | A | S | S | S | B |
| 【登壇レポ】"人生初登壇"をJAWS-UGでしてきた話 | 78 | C | A | B | S | B |
| 実例から学ぶCDN（Cloudflare障害について） | 76 | B | A | B | A | C |
| Amazon Q DeveloperとKiro比較 〜座学編〜 | 79 | B | A | A | A | B |
| Kiroを触ってみよう！ 〜セットアップ編〜 | 77 | B | S | B | A | C |
フロントエンド（UI部分）は完璧！
おおよそ予想通りの結果が返ってきた印象は受けました！
予想
①SAA、SAPの合格体験記は多くの人が興味を示しそうなので「総合スコア」の項目は高そう
②初心者向けの記事が多いから「技術力の高さ」の項目は全体的に低そう
③初心者向けの記事（特に合格体験記系）は書いてる人が多そうだから「独自性」の項目はスコアが低そう
結果
①SAA、SAPの合格体験記が一番スコアが高かった
②「技術力の高さ」の項目は全体的に低い
③「独自性」の項目は壊滅的に低い
次にQiitaの中から適当な技術ブログを抜粋させていただき採点してみました
| 記事タイトル | 総合スコア | 技術力の高さ | 読みやすさ | SEOの強さ | 実用性 | 独自性 |
|---|---|---|---|---|---|---|
| いいね300越えの技術ブログ | 89 | A | S | S | S | A |
| Markdown記法 チートシート | 88 | A | S | S | S | B |
作成コストについて
使ったのは7.78クレジットだけでした。想定よりかなり少ない！
Kiroのコストはクレジット単位なのですが、トークンとは違う考え方なので正直「どれくらいの処理でどれくらいのコストがかかるか」は全然わかっていませんでした
無料範囲の500クレジットに留まってくれれば嬉しいなくらいに思っていたのですが、そんなこと気にするまでもなかったようです笑
技術ブログ採点AIを作ってみて
UIや中身の精度については悪くない結果になったと思いました
しかし、「なんかこれじゃない」感を感じました。チープな感じ？
限られた時間の中で開発を終えることを目標にしてやっていたため、改良の手を加えていないこともありますが、、
次の課題&やりたいことは2つです！
- もっと精密な採点で納得感のある結果を出すように改良
- Webアプリとして公開し、多くの人に使ってもらう
さいごに
Kiroってどんなもんなの？とりあえず触ってみようと思って始めた技術ブログ採点AI開発でした
こんなアプリ（自分の中ではすごいアプリを作ったと思っています）が簡単に作れるようになったのはAIの凄さだと思っています
今までChatGPTくらいしか触ったことのなかったのですが、AI駆動開発の一部を体験できてさらに興味が湧いてきました
まだまだ改良の余地があることはわかったので、さらに良いものを作り公開できればと思っています！
そして、今日から2025年のQiita Advent Calendarが始まりました！
参加していただいた皆さん、ありがとうございます！記事の投稿楽しみにしています！
本当は技術ブログ採点AIを今日までに公開し、使っていただきたいと思っていたのですが実現できず、、
触っていただいて納得感を得れるアプリを公開したいと思っているので、リリースできた際はぜひ触ってみてください！