先日、下記の記事を拝見して、デジタル名刺って意外と手軽に作れるんだ！と知りまして、自分でもチャレンジしてみることにしました！
また本記事の内容は、下記でもLTさせていただきました。
貴重な機会をいただきありがとうございましたm(_ _)m
LT資料はこちら
デジタル名刺について
Amazon Q Developer for GitHubについて
Amazon Developer自体は、下記のページがとても参考になりました
もっと詳細はこちら
ドキュメントはこちら
AWS Amplify Hostingとは
下記の流れで実際にデジタル名刺を作っていきます
前提
- 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を開いて、画面右上のアイコンを押します。
メニューから「setting」を選択します。
左メニューから一番下の「Developer settings」を選択します。
左メニューから「Personal access tokens > Toekns(classic)」を開き、右上の「Generate new token」からアクセスキーを作成します。
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が問題なく動作すれば、下記のようにリポジトリが自動で作成されます。
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
- Amazon Q Developer に動いてもらうにはIssueに「Amazon Q development agent」のタグを指定する必要があります
- Amazon Q DeveloperのAPIの制約(多分)でIssueの文字数は1,000文字以内である必要があります
少し待つとIssueが出来ました。
ここからはAmazon Q Developerが自動的にIssueを読み取って作業します。
Amazon Q Developerの作業が完了すると、プルリクエストまで作成してくれます。
あとはプルリクエストを承認するだけ。
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）の脆弱性が検出されました。
レビューで問題が見つかると自動的に修正まで行ってくれます。
https://github.com/KMiya84377/digital-business-card-dev/pull/5#discussion_r2133258710
5. 動作確認フェーズ
あとはローカルにブランチを持ってきて画面を立ち上げてみます。
試しに修正を依頼してみる
XとQiitaのリンクを差し替えてもらうため、プルリクエスト上のコメントで依頼します。
依頼1
Xのurlを以下に差し替えて。
https://x.com/K5ARULtkUA4594
依頼2
Qiitaのurlを以下に差し替えて。
https://qiita.com/Takenoko4594
「Request changes」にチェックを入れ、「Submit review」ボタンを押します。
するとAmazon Q Developerの作業が開始します。
少し待つと、依頼通り修正してくれました。
https://github.com/KMiya84377/digital-business-card-dev/pull/5#pullrequestreview-2906650468
あとはいい感じになるまでAmazon Q Developer for GitHubにコードを修正してもらいます。
6. デプロイフェーズ
ソースコードの準備が出来たらAWS Amplify Hostingを使ってデプロイします。
AWSマネジメントコンソールからAWS Amplifyの画面を開き、右上の「新しいアプリを作成」ボタンを押します。
アプリケーションをデプロイの項目で「GitHub」を選択し、「次へ」ボタンを押します
GitHubの認証が求められるので画面に沿って入力していきます。
対象のソースコードが含まれたGitHubのリポジトリとブランチを指定して、「次へ」ボタンを押します。
あとは内容を確認して、「保存してデプロイ」ボタンを押します。
自動的にデプロイが実行されるので、「デプロイ済み」になればOKです。
ドメインのURLからアクセスしてみます。
これで自己紹介ページを公開できるようになりました。
NFCカードに登録する
NFCカードやNFCタグに先ほどのAmplify Hostingが発行したURLを登録します。
スマホにNFC Toolsというアプリをインストールします。
↓Andoroidの場合
↓iOSの場合
あとはNFCカードorNFCタグにURLを登録する。以上！
これでNFCに相手のスマホをかざしてもらうだけで、自己紹介ページのリンクが表示されるようになりました。
良かった点
スマホさえあれば、どこからでも開発が可能！
極論、Issueさえ作ることができれば開発が出来るので、スマホからでも開発することが出来ます。
ということは出勤中や出先から開発可能となります（動作確認は家帰ってからでないと出来ないですが…）。
AWS Amplify Hostingによるデプロイが楽！
マネジメントコンソールのGUI上から画面をポチポチ操作するだけでデプロイできるので大変楽でした。
また、GitHubとの連携でブランチ更新時に自動デプロイが実行されるのも楽です。
改善してほしい点
Amazon Q Developerのエラー時の改善要望
下記のように「技術的な問題が発生しました。」というエラーになると、Issueを作り直すしかないのが辛いです…（実は解決方法があるのでしょうか…？）
Views: 0
