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

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

https://qiita.com/ryu-ki/items/965d35a5b9abe86d0054

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

https://awsbeginners-sapporo.connpass.com/event/356886/

LT資料はこちら

<script defer class="speakerdeck-embed" data-id="f7e99bc0abf94adb8be136f1bdb2c268" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

# 概要
### デジタル名刺について
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/1d7a3362-6714-4de5-a15c-cba3a766bd0d.png)

### Amazon Q Developer for GitHubについて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/7789edb9-e1de-4dc5-a83f-5edcaa72983f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/f14dff06-d2a2-44f9-9b5f-3c6eaf218077.png)

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

https://aws.amazon.com/jp/builders-flash/202410/awsgeek-amazonq-developer/

もっと詳細はこちら

https://pages.awscloud.com/rs/112-TZM-766/images/2-AmazonQDeveloper.pdf?version=1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/5b5260d8-b5c5-4873-99a6-daaee0007b1a.png)

ドキュメントはこちら

https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/amazon-q-for-github.html

### AWS Amplify Hostingとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/7086967c-2dc2-4d34-a32d-44c467ecf2c5.png)

# やってみる
下記の流れで実際にデジタル名刺を作っていきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/b367a31a-54b0-4a03-a1c2-324e808c09ff.png)

### 前提
- VSCodeからGitHub Copilotが使える状態

## 1. 事前準備
### GitHubにAmazon Q Developerをダウンロードする

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

https://github.com/apps/amazon-q-developer

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

<details><summary>詳細はこちら</summary>

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/7839c4dd-8984-4451-a612-145dc6aa4b3e.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/f331a6f3-d38a-4aaf-8984-64279cd97e04.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/dfa01483-80ff-4d94-b980-66a7e7586613.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/089b06a9-13dc-4ba4-93ea-378a57757d24.png)

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

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

</details>

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/8bb595a3-a58e-4b4e-b6f0-dcaa0591c74b.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
```

:::note info
1. Amazon Q Developer に動いてもらうにはIssueに「Amazon Q development agent」のタグを指定する必要があります
1. Amazon Q DeveloperのAPIの制約(多分)でIssueの文字数は1,000文字以内である必要があります
:::

少し待つとIssueが出来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/fbb8372f-9313-499c-b4b0-d0382c45cccd.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/f608dfea-8b53-4ebb-afb3-e932c5c05d38.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/66e540d1-1156-44bd-a19f-9cc3a73d9782.png)

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

https://github.com/KMiya84377/digital-business-card-dev/pull/3

## 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://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/f57a9f57-47f4-47cd-ae15-720ade8c2ebd.png)
https://github.com/KMiya84377/digital-business-card-dev/pull/5#discussion_r2133258710

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

## 5. 動作確認フェーズ

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

```
npm install
npm rnu dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/b3392208-2a8e-4472-a01a-c2f16a1b8abb.png)

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

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

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

```:依頼2
Qiitaのurlを以下に差し替えて。
https://qiita.com/Takenoko4594
```
「Request changes」にチェックを入れ、「Submit review」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/7fa85321-70c0-4d87-b96f-6e449a86d189.png)

するとAmazon Q Developerの作業が開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/47da7f1d-c063-48de-80f4-52e910768bae.png)

少し待つと、依頼通り修正してくれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/c6e8a503-482f-4a01-9d51-3ff3bb0ddbea.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/90c5b688-652e-4e2b-970c-d29f7ca84498.png)

アプリケーションをデプロイの項目で「GitHub」を選択し、「次へ」ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/301a54d4-3ef7-44f6-b97c-1891306cadc0.png)

GitHubの認証が求められるので画面に沿って入力していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/f3c6e1df-5bea-4b22-bed6-12cf0d8b0998.png)

対象のソースコードが含まれたGitHubのリポジトリとブランチを指定して、「次へ」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/09df116c-77e3-4ee8-b408-17ef80861029.png)

あとは内容を確認して、「保存してデプロイ」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/dac11c9d-3c7e-485e-aad7-bf525e9d00c3.png)

自動的にデプロイが実行されるので、「デプロイ済み」になればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/4f053256-5b03-44f4-be55-a8cca3734734.png)

ドメインのURLからアクセスしてみます。
これで自己紹介ページを公開できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/4e4fbf93-8a68-4ff2-85f3-3f4817700f84.png)

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

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

↓Andoroidの場合

https://play.google.com/store/apps/details?id=com.wakdev.wdnfc&hl=ja

↓iOSの場合

https://apps.apple.com/jp/app/nfc-tools/id1252962749

あとはNFCカードorNFCタグにURLを登録する。以上！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/831b3f57-f5e2-471a-a588-54221ca7019f.png)

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

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

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

## 改善してほしい点
### Amazon Q Developerのエラー時の改善要望
下記のように「技術的な問題が発生しました。」というエラーになると、Issueを作り直すしかないのが辛いです...（実は解決方法があるのでしょうか...？）
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560123/10e198a8-37ee-42d6-aa51-a081bdc554c1.png)