会員向けマイページ・管理画面

利用者が登録し、ログインし、自分の情報を見て直す管理画面です。初めての人は登録し、次回からはログインします。プロフィールで自分の情報を直し、マイページでその内容を見ます。ログイン、登録、プロフィール、マイページ以外の業務画面は置いていません。入口をこの四つの画面に揃え、利用者の情報が画面ごとに分かれないようにしています。

利用者の入口は、登録、ログイン、プロフィール、マイページの四つです。初めての人は登録し、次からはログインし、自分の情報はプロフィールで直してマイページで見ます。業務の一覧や申請の画面は、この管理画面には含めていません。自分の情報の置き場所を、この四つの流れに固定しています。業務の一覧や申請の画面は含めていません。

登録、ログイン、自分の情報の確認が別々になっていました。初めて使う人がどこで登録し、次にどこで入り、登録した内容をどこで見るかが、画面の流れとして繋がっていませんでした。プロフィールを直しても、マイページで見る情報と別の場所に残っているように見え、どれが自分の最新の情報かを利用者が判断していました。入口が増えるほど、パスワードや登録内容の確認先も分かれていました。

登録した内容を、ログイン後の別の画面で見られないことがありました。プロフィールの修正と、マイページに出る情報が別々に管理されているように見えました。入口が増えると、どの画面でパスワードや登録内容を確認するかも利用者ごとに違っていました。業務の画面と認証の画面が混ざると、アカウントの確認だけを切り出せませんでした。

初めての人は登録画面で利用者としての情報を作り、次回からはログイン画面で入ります。入ったあとはプロフィールで自分の情報を直し、マイページでその内容を確認します。登録からマイページまでを同じ管理画面の流れにして、自分の情報を見る場所を一つにしています。ログイン、登録、プロフィール、マイページ以外の業務画面は置いていません。業務の一覧や申請は、この画面の範囲には含めていません。

登録画面で利用者を作り、ログイン画面で入り、プロフィールで情報を更新し、マイページで更新後の内容を確認します。この順で、自分の情報が一つの流れとして残ります。四つの画面以外には進まず、申請や一覧などの業務は別の仕組みに残しています。ログインできない場合は、登録内容を見直すところまでがこの画面の役割です。

画面は Vue 3 と Vuetify、TypeScript で、登録、ログイン、プロフィール、マイページをブラウザに出します。API は Laravel と PHP で、利用者の登録とログイン、プロフィールの保存を受けます。画面と API は Docker でまとめて起動し、ブラウザから API へ接続して利用者の情報を読み書きします。見た目の部品は Vuetify、画面の組み立ては Vue 3 と TypeScript です。業務データ用の別画面は、この構成には含めていません。

Vue 3 と TypeScript が画面の遷移を組み、Vuetify が見た目の部品を出します。Laravel と PHP は登録、ログイン、プロフィール保存の API です。Docker は画面と API を同じ環境で起動します。ブラウザは API へ接続して利用者の情報を読み書きし、業務データ用の画面は、この構成の対象外です。