【Amazon Q】Amazon Q Developerで始めるAI開発！ポモドーロタイマーアプリを作ってみた

はじめに

こんにちは！パーソル&サーバーワークスの三宅です。

皆さんは業務でAIを活用していますか？今回は、AWSが提供する生成AIアシスタント「Amazon Q Developer」を使って、実際にWebアプリケーションを作成してみたいと思います。

Amazon Q Developerは、自然言語での指示だけでコードを生成したり、AWS環境の構築をサポートしてくれる強力なツールです。 今回のハンズオンでは、このAmazon Q Developerを活用して、集中力を高めるための「ポモドーロタイマー」アプリを作成し、AWS上にデプロイするまでの手順をご紹介します。

プログラミング経験が少ない方でも、AIの力を借りて本格的なWebアプリケーションを作成できることを体感していただければと思います！

今回作成するもの

ポモドーロタイマーは、25分の作業と5分の休憩を繰り返す時間管理術「ポモドーロ・テクニック」を実践するためのタイマーアプリです。

主な機能

• 25分の作業タイマー
• 5分の休憩タイマー
• スタート/ストップ/リセット機能
• シンプルで使いやすいUI

これらの機能を持つWebアプリケーションを、Amazon Q Developerの支援を受けながら作成し、最終的にAmazon S3(以下、S3)バケットでホスティングします。

前提条件

本ハンズオンを進めるにあたり、以下が必要です。

• AWSアカウント
• AWS Builder ID（Amazon Q Developerの利用に必要）
• インターネット接続環境
• Webブラウザ

ステップ1: AWS Builder IDの取得

まずは、Amazon Q Developerを使用するために必要なAWS Builder IDを取得します。

1-1. Builder ID登録ページへアクセス

ブラウザで以下のURLにアクセスします。

• AWS Builder ID
  https://profile.aws.amazon.com/

1-2. アカウント情報の登録

「開始方法」画面が表示されるので、以下の手順で登録を進めます。

メールアドレスの登録

まず、利用するメールアドレスを入力して「続行」ボタンをクリックします。GoogleアカウントでのSSO連携も可能ですが、今回はメールアドレスでの登録を進めます。

名前の入力

次の画面で名前を入力します。ここで入力した名前がBuilder IDのプロフィール名として使用されます。入力したら「続行」をクリックします。

メール確認コードの入力

登録したメールアドレスに認証コードが送信されます。メールを確認して、6桁の認証コードを入力し「Continue」をクリックします。認証コードは約30分で期限切れになるので、届いたらすぐに入力しましょう。もし届かない場合は「コードを再送信」をクリックしてください。

パスワードの設定

最後にパスワードを設定します。パスワードは8文字以上で、大文字・小文字・数字を含める必要があります。「パスワード」と「パスワードを確認」の両方に同じパスワードを入力して「続行」をクリックします。

登録完了

登録が完了すると、AWS Builder IDの詳細画面が表示されます。ここにはプロフィール情報（名前・ニックネーム）と連絡先情報（メールアドレス）が表示されています。

これでAWS Builder IDの取得は完了です！

ステップ2: EC2インスタンスの準備

Amazon Q Developerを動かすための開発環境として、EC2インスタンスを起動します。

2-1. EC2ダッシュボードへアクセス

AWSマネジメントコンソールへログインし、上部の検索バーで「EC2」と入力してEC2サービスを選択します。

EC2ダッシュボードが表示されたら、「インスタンスを起動」ボタンをクリックします。

2-2. インスタンスの基本設定

名前とタグ

インスタンスに分かりやすい名前を付けます。今回は「amazon-q-handson」としましょう。

アプリケーションおよびOSイメージ(Amazon Machine Image)

クリックスタートから「Amazon Linux」を選択し、「Amazon Linux 2023 AMI」を選びます。このAMIは無料枠の対象です。

インスタンスタイプ

「t3.small」を選択します。

2-3. キーペアの設定

今回はEC2 Instance Connectを使用するため、キーペアは不要です。「キーペアなしで続行」を選択します。

2-4. ネットワーク設定

ネットワーク設定では、セキュリティグループを作成します。今回は「amazon-q-handson-sg」とします。 その他は以下のようにデフォルトで進めます。

2-5. 高度な詳細設定

「高度な詳細」セクションを展開して、以下の設定を行います。

IAMインスタンスプロフィール

IAMインスタンスプロフィールを設定することで、EC2インスタンスからAWSサービス（S3など）へのアクセスが可能になります。

EC2インスタンス作成画面の「IAMインスタンスプロフィール」セクションで、「新しいIAMプロファイルの作成」リンクをクリックします。新しいタブでIAMコンソールが開きます。

IAMコンソールで右上の「ロールを作成」ボタンをクリックします。

「信頼されたエンティティタイプ」で「AWSのサービス」が選択されていることを確認し、「ユースケース」の「サービスまたはユースケース」から「EC2」を選択します。

「許可を追加」画面が表示されたら、「AdministratorAccess」にチェックを入れて、「次へ」をクリックします。今回は検証のため強い権限を付与しています。

今回は、ロール名に「amazon-q-handson-ec2-role」と入力します。

EC2インスタンス作成画面のタブに戻り、「IAMインスタンスプロフィール」の横にある更新ボタンをクリックします。ドロップダウンから先ほど作成した「amazon-q-handson-ec2-role」を選択します。

ユーザーデータの設定

「ユーザーデータ」のテキストボックスに、以下のスクリプトを貼り付けます。

#!/bin/bash


# システムのアップデート

dnf update -y


# Amazon Q Developer CLIのダウンロードと解凍

cd /home/ec2-user

curl --proto '=https' --tlsv1.2 -sSf \

  "https://desktop-release.q.us-east-1.amazonaws.com/latest/q-x86_64-linux.zip" \

  -o "q.zip"

unzip q.zip


# カスタムインストラクションファイルの作成

cat << 'EOF' > /home/ec2-user/AmazonQ.md

あなた Amazon Q は AWS が提供する AI アシスタントで、開発者やビジネスユーザーの生産性向上を支援します。自然言語での対話を通じて、コード開発、AWS リソース管理、問題解決などをサポートします。会話は必ず日本語で行います、例外はありません。必要に応じてAWSドキュメントや公式サイトを参照し、正確な応答を心がけてください。

EOF


# 必要なツールのインストール

dnf install pip -y

pip install uv

dnf install graphviz -y


# 権限設定

chown -R ec2-user:ec2-user /home/ec2-user


# 作業ディレクトリの作成

mkdir -p /home/ec2-user/pomodoro-timer

chown -R ec2-user:ec2-user /home/ec2-user/pomodoro-timer

このスクリプトは、インスタンス起動時にAmazon Q Developerのセットアップを自動で行います。

2-6. EC2 Instance Connectで接続

インスタンスが起動したら、ブラウザから接続してみましょう。作成したインスタンス(amazon-q-handson-ec2)にチェックを入れ、「接続」ボタンをクリックします。

EC2 Instance Connectで接続します。

新しいタブが開き、ブラウザ上でターミナル画面が表示されます。

このような画面が表示されれば、EC2インスタンスへの接続成功です！

2-7. Amazon Q Developerのセットアップ

Amazon Q Developerをインストールします。以下のコマンドを実行します。

./q/install.sh

途中で「Do you want q ... (Y/n)」と聞かれたら、Yes を選択してEnterキーを押します。

次に、認証方法を選択する画面が表示されます。「Use for Free with Builder ID」が選択されていることを確認して、Enterキーを押します。

認証URLが表示されます。https:// で始まるURLをマウスでドラッグして選択し、右クリックして「Copy」を選択します。

新しいブラウザタブを開いて、コピーしたURLにアクセスします。「開始方法」画面が表示されます。ステップ1で作成したメールアドレスが入力されていることを確認して、「続行」ボタンをクリックします。

「AWS ビルダー ID でサインイン」画面でパスワードを入力し、「続行」ボタンをクリックします。

「認証がリクエストされました」画面が表示されます。画面に表示されているコードを確認します。このコードがEC2のターミナル画面に表示されているコードと一致していることを確認したら、「確認して続行」ボタンをクリックします。

「Amazon Q Developer for command line がデータにアクセスすることを許可しますか？」という画面が表示されます。内容を確認して、「アクセスを許可」ボタンをクリックします。

「リクエストが承認されました」という画面が表示されれば認証完了です。「Amazon Q Developer for command line は Amazon Q Developer でデータにアクセスできるようになりました。」というメッセージが表示されます。「このウィンドウは閉じることができます。」と表示されているので、このタブは閉じて構いません。

EC2 Instance Connectの画面に戻ると、認証が完了したことを示すメッセージが表示されています。

これでAmazon Q Developerのセットアップが完了しました！

ステップ3: S3バケットの作成

作成したポモドーロタイマーアプリを公開するため、Amazon Q Developerを使ってS3バケットを作成します。

3-1. Amazon Q Developerの起動

EC2 Instance Connect画面で、以下のコマンドを入力してAmazon Q Developerを起動します。 プロンプトには、試しに「こんにちは！」と入力してみます。

Amazon Q Developerが日本語で返答してくれれば、正常に動作しています。

3-2. S3バケットの作成を依頼

Amazon Q Developerに以下のプロンプトを入力します。
※バケット名の部分（miyake）は、任意の値に変更してください。

3-3. コマンド実行の許可

Amazon Q Developerがバケット作成のコマンドを提案してきます。 「コマンドを実行してもよろしいですか？」というメッセージとともに、実行するコマンドが表示されます。内容を確認して、t と入力してEnterキーを押します。

これでS3バケットの作成は完了です！

ステップ4: アプリの作成

Amazon Q Developerを使って、ポモドーロタイマーアプリを作成していきます。

4-1. アプリ作成を依頼

Amazon Q Developerのチャット画面で、以下のプロンプトを入力します。

シンプルでキレイなポモドーロタイマーを作成してください。25分の作業タイマーと5分の休憩タイマーを実装し、スタート、ストップ、リセットボタンを付けてください。実装はindex.htmlファイルのみとし、Amazon S3でホストする前提で作成してください。レスポンシブデザインで、スマートフォンでも使いやすいデザインにしてください。

Amazon Q Developerが「シンプルでレスポンシブなポモドーロタイマーを作成します。」と応答し、コードの生成を開始します。

4-2. ファイル作成の許可

コード生成が完了すると、/home/ec2-user/index.html にファイルを作成しようとします。「Allow this action?」と確認されたら、t と入力してEnterキーを押します。

HTMLコードが画面に表示され、ファイルが作成されます。

4-3. アプリ作成の完了確認

ポモドーロタイマーアプリの完成です！以下のコマンドで、作成されたファイルを確認してみましょう。

index.html ファイルが表示されていればOKです。

ステップ5: アプリのデプロイ

作成したポモドーロタイマーをS3バケットにアップロードし、インターネットから誰でもアクセスできるように公開設定を行います。

5-1. デプロイを依頼

Amazon Q Developerのチャット画面で、以下のプロンプトを入力します。
※バケット名の部分は、ステップ3で作成した実際のバケット名に置き換えてください。

miyake-1762346915-9744 バケットにindex.htmlをアップロードして、静的ウェブサイトホスティング設定をしてください。S3バケットのパブリックアクセスブロック設定を無効化してから公開設定を行って、アプリがブラウザから実行できるようにしてください。

Amazon Q Developerが、S3へのアップロードと公開設定を自動で行ってくれます。

途中で「Allow this action?」と確認されたら、t と入力してEnterキーを押します。
以下の処理が順番に実行されます。

• S3バケットへのファイルアップロード

• パブリックアクセスブロックの無効化

• 静的Webサイトホスティングの有効化

• バケットポリシーの設定

デプロイ完了とURL確認

処理が完了すると、Amazon Q Developerから以下のようなメッセージが表示されます。

表示されたURLをコピーして、ブラウザの新しいタブで開いてみましょう。

5-4. アプリの動作確認

ブラウザでURLにアクセスすると、作成したポモドーロタイマーが表示されます！

• 「スタート」ボタンをクリックすると、25分のカウントダウンが始まります
• 「ストップ」ボタンで一時停止できます
• 「リセット」ボタンで最初の状態に戻ります
• 25分経過すると自動的に5分の休憩タイマーに切り替わります

これでAmazon Q Developerを使ったポモドーロタイマーアプリの開発とデプロイが完了しました！

まとめ

今回はAmazon Q Developerを使ってポモドーロタイマーアプリを作成し、S3で公開するまでの流れを体験しました。 AIを活用することで自然言語で指示を出すだけで、実際に動くWebアプリケーションを完成できる時代がもうそこに来ています。

本記事の内容は、ほんの一例ですがAIを活用することで、これまでプログラミングに苦手意識を持っていた方でも気軽にアプリ開発を行えます。 ぜひ今回のハンズオンをきっかけに、ぜひ自分のアイデアを形にしてみてください。

この記事は私が書きました

三宅 啓右

記事一覧

2025 Japan All AWS Certifications Engineers 猫派でしたが最近犬派になりました。