はじめに
「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」へ滑り込みで応募すべくAmazon Q CLIを用いてクイズゲームを作成しました。
サンプルはAWS認定資格を題材にした設問になっていますが、問題は差し替え可能になっており社内教育などにも利用できるようにしました。
完成したもの
ここで遊べます！ → https://tsukimi-site.github.io/aws_quiz_game/
設計
社内教育への応用を想定し日本企業のIT事情を考慮した仕様にします。
- 問題作成者側も回答者側もソフトウェアのインストールを必要としない。
- 特別な実行環境を必要としない。
上記を踏まえ以下の仕様を考えました。
- 容易に実行できる静的なWebページとする
- Node.jsなどのフレームワークは使用しない。
- S3静的ホスティングやGitHub Pagesへそのままデプロイ可能、さらにはローカルで開いても実行可能なシンプルなhtml, js, cssのみとする。
- 問題を差し替えられるようにする。
- ロジックと問題データは分離する。
- 問題データは視認性の良いyaml型式で記載し、Pythonでjsファイルへ変換する（GitHub Action）。
後述のようにプロンプトで指示したのはこの一部で、「こういう出来だったらいいなぁ」という潜在的な要件をAmazon Qが汲み取ってくれたことになります。
環境
開発環境
- OS : Ubuntu 24.04
- Amazon Q : 1.12.1
- Python : 3.12.3
実行環境
- OS : Windows 11 Pro 23H2
- Webブラウザ : Chrome 137.0.7151.121
手順
（事前準備）隔離された環境を用意しておく
Amazon Q CLIはファイル・フォルダ作成や、必要なパッケージのインストール、Webサービスを立ち上げての実行テストなどを自動で行ってくれますが、意図しない状態になる可能性もあるので本作業用のEC2インスタンスを用意するなど隔離した環境を設けるのが良さそうです。今回は自宅サーバに本件用の仮想マシンを作成し、ここにAmazon Q CLIをインストールしました。
Amazon Q CLIをインストールするための準備
Linux向けの手順はEssential guide to installing Amazon Q Developer CLI on Linuxの「Installing on the headless Linux system」の章にインストール用のコマンドが紹介されています。少しだけ修正していますがIAMのアクセスキーの発行も不要です。
# SSHポートフォワーディングを有効化
cat << 'EOS' | sudo tee -a /etc/ssh/sshd_config
AcceptEnv Q_SET_PARENT
AllowStreamLocalForwarding yes
EOS
# SSHのサービスを再起動
# ここだけ修正していて、RedHat系やArch Linuxではsshd.service, Debian系ではssh.service
sudo systemctl restart ssh
# Amazon Q CLIをダウンロード・解凍
sudo apt-get install -y gnupg libfuse2 unzip
curl --proto '=https' --tlsv1.2 -sSf \
"https://desktop-release.codewhisperer.us-east-1.amazonaws.com/latest/q-x86_64-linux.zip" \
-o "q.zip"
unzip q.zip
AWS Builder IDを作成・ログイン
まだ未作成であれば作成します。Amazon Q CLIの利用にはBuilder IDが必要なためです。
https://docs.aws.amazon.com/ja_jp/signin/latest/userguide/sign-in-aws_builder_id.html
起動
# Amazon Q CLIをインストール
chmod +x q/install.sh
./q/install.sh
# 初期セットアップ
# AWS Builder IDへログインしているPCで表示されたURLへアクセスします（別PCでもOK）
# 表示されたページでAmazon Q Developerのアクセスを許可するボタンを押せばOKです。
? Do you want q to modify your shell config (you will have to manually do this otherwise)? ・ Yes
? Select login method ・ Use for Free with Builder ID
Confirm the following code in the browser
Code: ****-****
Open this URL: https://view.awsapps.com/start/#/device?user_code=****-****
Device authorized
Logged in successfully
# 起動
q chat
TeraTermだと「Amazon Q」のロゴが表示されない～。
構築
プロンプト
最近のモデルはコンテキストサイズも増え、文脈の理解力も賢いので、最初から要件をすべて盛り込みました。
Webブラウザで動作するクイズを作りたいです。
以下の仕様やサンプルデータに基づいて、そのまま公開できるようプログラム一式を実装してくれますか？
見た目はおしゃれな感じでお願いします。
# ユーザーの操作の流れ
1. コース一覧から受講したいコースを選択する
2. そのコースの問題がランダムで表示される
3. 最後に正解数、自身の回答、解説が表示され振り返りができる
4. Top画面へ戻る
# コース
questionsフォルダに格納された各YAMLファイルの
course_detailセクションのtitleの値をコース名とします。
# 留意事項
- なお、github.ioで公開したいのでhtml, css, jsを用いたシンプルな構成にしてください。
- 事前に公開用のファイルをPythonを用いて作成する仕組みで構いません。
つまり、YAMLファイルを追加・更新 →
Pythonで公開用ファイルを生成 →
git pushで公開 という流れを想定しています。
# 問題を定義したYAMLファイルのサンプル
このサンプルはAWSの資格試験を想定しています。
## AIF-C01.yaml
course_detail:
title: AWS Certified AI Practitioner – AIF-C01
question_number: 5
questions:
- id: 1
title: Amazon Bedrock の役割
text: Amazon Bedrock が提供する中核的な機能はどれですか？
choices:
- フルマネージドな基盤モデル (FM) への統一 API 提供
- IoT デバイスのプロビジョニング
- GPU インスタンスの自動スケーリングのみ
- S3 のオブジェクトライフサイクル管理
answer: フルマネージドな基盤モデル (FM) への統一 API 提供
explanation: Bedrock は複数ベンダーの FM をサーバーレスで呼び出し、独自データでのカスタマイズや RAG、エージェント構築を容易にします。
- id: 2
title: Guardrails for Bedrock
text: 生成 AI 出力の不適切表現や個人情報流出を抑止するために Bedrock で利用する機能は？
choices:
- Guardrails for Bedrock
- IAM ポリシーのみ
- AWS WAF レート制限
- Macie の機密検出
answer: Guardrails for Bedrock
explanation: Guardrails はプロンプトとレスポンス双方に適用でき、多用途アプリ間で一貫した安全基準を維持します。
この後、各ファイルの作成が始まります。印象的だったのがWebサーバを立ち上げて動作確認を行っていたり、README.mdまで作成してくれた点です。よく見るとWebサーバを立ち上げただけなのでE2Eテストとは言い難いもののプロンプト次第でテストまで実施してくれそうです。
その後、以下のように修正を2回行い、全部で3回のやりとりでクイズアプリが完成しました！
quiz_data.jsには全問を含め、
app.jsでは各YAMLファイルcourse_detailセクションの
question_numberの値に応じた問題数をランダムでピックアップするように修正してください。
回答をクリックするとすぐに正当が表示されますが
これでは複数回答が必要な問題では1つ選んだだけで答えが表示されてしまい望ましくない状態です。
回答を選択してから「回答する」ボタンを押すと結果を照合・表示し、
それから「次の問題」ボタンを表示し次の問題へ遷移できるようにしてください。
Tips : すべて承認する
コマンド実行の際に承認を求められます。
都度確認しながらという進め方は着実ではあるのですが、最初から全て承認することも出来るようです。
q chat --trust-all-tools
まとめ
Amazon Q CLIを用いてノーコードで実用的すぎるクイズアプリを作ることができました。結果の保存や認証が不要な用途であれば余裕でこのまま業務利用できる完成度で驚きました。
このレベルができると非エンジニアによる内製や委託案件の精緻化を促すことができそうです。デザインもおしゃれで始めてみたい気持ちが湧きやすいと思います。
Amazon Q Developerの無料プランは50回/月と聞いていましたが1回のやりとりでLLMをかなりの回数呼び出していることが見て取れ、思った以上に使えることも分かりました。実行回数がBuilder IDに紐づくので個人単位でレート制限がかかるのもフェアでいいなと感じました。
公開情報
今回作ったクイズアプリ
https://tsukimi-site.github.io/aws_quiz_game/
コード
https://github.com/tsukimi-site/aws_quiz_game