はじめに
私が鋭意、個人開発中である 「ITなんでも調査屋（仮）」 というWebサイトについて、実装順がバラバラでまとまらないのですがログは残したく「個人開発ログ」としてナンバリングで残すことにしました。
私の考え方で、やりたいこと → どう実装したか と言う感じでまとめます。
https://everyit.net/ （調査依頼だけできるようになっています！）
この記事でわかること
UIを考えるにあたって「やりたいこと」と「実装したこと」をそれぞれ記していきます。
動作環境・使用するツールや言語
- VSCode
- React ＋ Typescript
- AWS Amplify Github 連携でのホスティング
- AWS AppSync - DynamoDB
実施内容
「依頼ボード」画面を作りたい
やりたいこと
依頼ボードを見ることで、「こう言うふうに調べてもらえるんだ」「こんな依頼でもいいんだ」とわかります。このページを見た人が依頼をしやすくなります。
実装したこと
ページを実装しました。イメージはこちらです。「ボード」と名のつく通り、コルクボードにピン留めした紙をイメージしています。こちらはまだデザインを整えるつもりです。
こちらはAmplifyにて、DynamoDBに登録されたレコードから、「公開可能な依頼」に設定されたものを取得して表示をしています。登録する場所は後に登場します。
細かい話をすると、依頼ごと（DBのレコードごと）にReactコンポーネントで画面表示しており、コンポーネント指向のいいところを体験できた気がします。
「依頼書」画面を作りたい
やりたいこと
実際に依頼を行うページです。依頼は「公開」「非公開」があり、公開依頼はすぐに依頼ボードに反映されます。非公開の場合はメールでやりとりさせていただき、調査等を進めます。
また、面倒なので依頼以外もこちらで送信可能なようにしました。
実装したこと
ページを実装しました。イメージはこちらです。
チェックボックスで「公開」「非公開」「その他」を選択すると、それぞれのパターンで必須項目が異なります。匿名でも投稿可能にし、依頼をすることへのハードルを下げます。
また、チェックボックスによりちょっと分かりやすくメッセージを変更するように設定しました。（赤文字部分）
内部処理としては、DynamoDBへのデータの登録を行なっています。
次回予告？
- TOP画面のデザインの調整
- 依頼時の管理者通知機能
- 認証機能（ログインし、調査結果を記入する機能）
- 依頼ボードの絞り込み機能