はじめに
「ITなんでも調査屋（仮）」 というWebサイトについて、制作の中でやりたいこと → どう実装したかという形でまとめています。
今回の制作で運用可能になったと思いまして、正式公開にしました。（仮）は取るか迷っています。消すとカジュアル感がなくなってしまうのでは？という気持ちです。
https://everyit.net/
この記事でわかること
個人開発の過程が見られます。
「やりたいこと」と「実装したこと」をそれぞれ記していきます。
動作環境・使用するツールや言語
- VSCode
- React ＋ Typescript
- AWS Amplify Github 連携でのホスティング
- DynamoDBでのデータの管理
開発について
依頼データをブラウザで編集したい
問題点
調査依頼を受けたらステータスを変更 → 完了したら結果を記入しステータスを変更
という運用をしますが、最初はAWS上で直接データ変更すればいいと思っていたのですが、直接AWSにログインするのが面倒なので、ブラウザで編集したくなりました。
実装内容
もちろん認証は必須です。これをAWS内の機能であるAmazon Cognitoを利用することにしました。Cognitoに「admin」グループを作成して、自分のCogtnito内のアカウントをそのグループに作成するという流れ。
デフォルトのログイン画面を利用しており、見た目は↓こんな感じです。将来ユーザを増やす可能性は考えてはいますが、自らサインアップするUIはオフにしてます。
そして、Web画面側には、新しいURLにデータを編集するUIを作りました。↓の画像はCursorさんとのやりとり。この小学生みたいなプロンプトからほぼ完全な編集ページ作成しています。さすがに化け物感を感じてしまいました…
1文のプロンプトからほとんど完全に私の意図を汲み取り、実装まで実行したことになります。
- 既存のフォルダ構成を見て、作成するファイルを自動で判断（tsxファイル、CSSなど）
- DynamoDBのデータ型を勝手に見つけてくる
- ふさわしいUIを自動で判断し編集画面を完成
- エラーは勝手に自分で気づいて自分で直す
依頼の通知を追加
問題点
サイトの運用としては、調査依頼が登録されたら、それにすぐ気づけるようにしないといけません。そこで、データ登録時すぐにメールで通知を行う仕組みが必要になっていました。
実装内容
「DynamoDB Streams」「Amazon SES」を利用して通知をすることにし、無事完成しました。現在は通知が来るのですぐに気づくことが可能です。
- DynamoDB Streams にて、レコードの登録を検知して、Lambda関数を呼び出し
- Lambda関数で、パラメータに入っているレコード情報から件名や本文を作成
- Amazon SESを利用しメールを送信
おわりに
一旦、正式公開としてプロフィール等にも記載しようと思います。
まだまだ修正したい部分はありますが今度は、このサイトの知名度や、私自身の知名度を上げることで、依頼自体がたくさん来るようにしたいと考えています。