LoginSignup
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Takenoko4594(たけのこ)

Amazon Q Developer for GitHub と AWS Amplify Hosting でサクッとデジタル名刺を作ってみた

Posted at

はじめに

先日、下記の記事を拝見して、デジタル名刺って意外と手軽に作れるんだ！と知りまして、自分でもチャレンジしてみることにしました！

また本記事の内容は、下記でもLTさせていただきました。
貴重な機会をいただきありがとうございましたm(_ _)m

LT資料はこちら

概要

デジタル名刺について

image.png

Amazon Q Developer for GitHubについて

image.png

image.png

Amazon Developer自体は、下記のページがとても参考になりました

もっと詳細はこちら

image.png

ドキュメントはこちら

AWS Amplify Hostingとは

image.png

やってみる

下記の流れで実際にデジタル名刺を作っていきます
image.png

前提

  • VSCodeからGitHub Copilotが使える状態

1. 事前準備

GitHubにAmazon Q Developerをダウンロードする

Amazon Q Developer for GitHubを利用するために事前準備が必要なので、
下記リンクからAmazon Q DeveloperのGitHub Appをダウンロードします。

VSCodeにGitHub MCPの設定をする

今回は、VSCodeからGitHub Copilot + GitHub MCPを介して、GitHubの操作を行います。

詳細はこちら

GitHubを開いて、画面右上のアイコンを押します。

image.png

メニューから「setting」を選択します。

image.png

左メニューから一番下の「Developer settings」を選択します。

image.png

左メニューから「Personal access tokens > Toekns(classic)」を開き、右上の「Generate new token」からアクセスキーを作成します。

image.png

VSCodeからsetting.jsonを開いて、下記GitHub MCPの設定をします。
アクセスキーは、先ほどGitHub上で作成したものを指定します。

setting.json
{
  "mcp": {
    "servers": {
      "github": {
        "command": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-github"
        ],
        "env": {
          "GITHUB_PERSONAL_ACCESS_TOKEN": "GitHub APIキー"
        }
      }
    }
  }
}

GitHubにリポジトリを作成する

下記、GitHub Copilotにお願いして、GitHub上にリポジトリを作ります。

これからデジタル名刺のwebページ作るからGitHubに新しいリポジトリ作って！
あとdevブランチも作って！

GitHub Copilot + GitHub MCPが問題なく動作すれば、下記のようにリポジトリが自動で作成されます。

image.png

2. 要件定義フェーズ

どんな感じのデジタル名刺を作りたいか、イメージをマークダウンに書いていきます。

要件.md
# 機能要件
- Webページでプロフィールを閲覧できること
- プロフィールから下記を閲覧できること
    - アイコン画像
    - ユーザー名
    - 簡単な自己紹介文
    - 各ユーザページへのリンク
        - X (ソーシャルメディア)
        - Qiita
# 非機能要件
- スマホ、PCで閲覧できること (レスポンシブ対応されていること)
- Webページは、ReactとTypeScriptを使用して、実現すること
- Webページは、AWS Amplify Hostingでホスティングすること

3. 設計フェーズ

下記プロンプトでGitHub Copilotに設計用Issueを作成してもらいます。
作ったIssueからAmazon Q Developer に設計を書いてもらう算段です。

「要件.md」を元に、デジタル名刺用の自己紹介ページの設計のIssueを１つ作成してください。

また作成するIssueは下記のルールに従うようにしてください。

- 設計書はmdファイルとして、designフォルダに格納します。
- 出来るだけ詳細に設計するようにしてください。
- Issueは1000文字以内で作成してください。
- 文字数が限られているので、絵文字などは不要です。
- プルリクエストのターゲットは、devにしてください。
- Issueには必ず以下のラベルを指定してください
    - Amazon Q development agent
  1. Amazon Q Developer に動いてもらうにはIssueに「Amazon Q development agent」のタグを指定する必要があります
  2. Amazon Q DeveloperのAPIの制約(多分)でIssueの文字数は1,000文字以内である必要があります

少し待つとIssueが出来ました。
image.png

ここからはAmazon Q Developerが自動的にIssueを読み取って作業します。

image.png

Amazon Q Developerの作業が完了すると、プルリクエストまで作成してくれます。

image.png

あとはプルリクエストを承認するだけ。

4. 実装フェーズ

設計と同様にGitHub CopilotにIssueを作成してもらいます。

デジタル名刺用の自己紹介ページの下記の実装のIssueを１つ作成してください。
- designフォルダの設計を元に実装します。
- Amplify Hosting周りなどデプロイ周りは不要です。

また作成するIssueは下記のルールに従うようにしてください。
- Issueは1000文字以内で作成してください。
- 文字数が限られているので、絵文字などは不要です。
- プルリクエストのターゲットは、devにしてください。
- Issueには必ず以下のラベルを指定してください
    - Amazon Q development agent

Amazon Q Developerはセルフレビューもしてくれる

Amazon Q Developer for GiHubは、プルリクエスト作成後にセキュリティ観点からセルフレビューレビューを自動で実施してくれます。

下記の例だと、潜在的なクロスサイトスクリプティング（XSS）の脆弱性が検出されました。
レビューで問題が見つかると自動的に修正まで行ってくれます。
image.png
https://github.com/KMiya84377/digital-business-card-dev/pull/5#discussion_r2133258710

ちなみに自動だけでなく/q revewコマンドにてレビューを依頼することもできます。
https://dev.classmethod.jp/articles/qdeveloper-github-comment-review/

5. 動作確認フェーズ

あとはローカルにブランチを持ってきて画面を立ち上げてみます。

npm install
npm rnu dev

image.png

試しに修正を依頼してみる

XとQiitaのリンクを差し替えてもらうため、プルリクエスト上のコメントで依頼します。

依頼1
Xのurlを以下に差し替えて。
https://x.com/K5ARULtkUA4594
依頼2
Qiitaのurlを以下に差し替えて。
https://qiita.com/Takenoko4594

「Request changes」にチェックを入れ、「Submit review」ボタンを押します。
image.png

するとAmazon Q Developerの作業が開始します。
image.png

少し待つと、依頼通り修正してくれました。
image.png
https://github.com/KMiya84377/digital-business-card-dev/pull/5#pullrequestreview-2906650468

あとはいい感じになるまでAmazon Q Developer for GitHubにコードを修正してもらいます。

6. デプロイフェーズ

ソースコードの準備が出来たらAWS Amplify Hostingを使ってデプロイします。

AWSマネジメントコンソールからAWS Amplifyの画面を開き、右上の「新しいアプリを作成」ボタンを押します。
image.png

アプリケーションをデプロイの項目で「GitHub」を選択し、「次へ」ボタンを押します
image.png

GitHubの認証が求められるので画面に沿って入力していきます。
image.png

対象のソースコードが含まれたGitHubのリポジトリとブランチを指定して、「次へ」ボタンを押します。
image.png

あとは内容を確認して、「保存してデプロイ」ボタンを押します。
image.png

自動的にデプロイが実行されるので、「デプロイ済み」になればOKです。
image.png

ドメインのURLからアクセスしてみます。
これで自己紹介ページを公開できるようになりました。
image.png

NFCカードに登録する

NFCカードやNFCタグに先ほどのAmplify Hostingが発行したURLを登録します。

スマホにNFC Toolsというアプリをインストールします。

↓Andoroidの場合

↓iOSの場合

あとはNFCカードorNFCタグにURLを登録する。以上！
image.png

これでNFCに相手のスマホをかざしてもらうだけで、自己紹介ページのリンクが表示されるようになりました。

まとめ

良かった点

スマホさえあれば、どこからでも開発が可能！

極論、Issueさえ作ることができれば開発が出来るので、スマホからでも開発することが出来ます。
ということは出勤中や出先から開発可能となります（動作確認は家帰ってからでないと出来ないですが...）。

AWS Amplify Hostingによるデプロイが楽！

マネジメントコンソールのGUI上から画面をポチポチ操作するだけでデプロイできるので大変楽でした。
また、GitHubとの連携でブランチ更新時に自動デプロイが実行されるのも楽です。

改善してほしい点

Amazon Q Developerのエラー時の改善要望

下記のように「技術的な問題が発生しました。」というエラーになると、Issueを作り直すしかないのが辛いです...（実は解決方法があるのでしょうか...？）
image.png

3
0
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
Sign upLogin
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?