こんにちは!
スマレジ・テックファームのWebエンジニアやまてと申します。
はじめに
今回は、Web業界実務未経験での転職活動用にポートフォリオとして作成した『はじめてのWebアプリ開発を振り返る』記事として、オリジナルの機能の一つである「家族ユーザー招待」機能の 概要と基本設計 について投稿します。
Webアプリを作成した期間は、2021年2月末〜7月です。
※ 作成したポートフォリオは、絵本を読み聞かせしたことの記録・管理を、家族と共有できるWebアプリケーションです
記事を書く目的
今回の記事を書く目的は以下の通りです。
自身の学習の振り返りのため
作成当時、独学なのでフィードバックなし、完成させることを最優先にしたこともあり、自分が作成したWebアプリであるにもかかわらず、技術的な理解が浅い部分があることが課題としてあります。
スマレジの面接のときに、Webアプリの出来については褒めていただいたものの、Webアプリについての技術的質問で「いいね機能について説明してみてください。」というような理解を問う質問に対しては、全く上手く答えられず、
「口頭で説明できるということも仕事では必要なシーンがありますので、その点は今後意識していくといいと思います。」
というアドバイスをいただきました。
「口頭で説明できる」ということは「理解している」状態と言えそうなので、振り返ることで「口頭で説明できる」レベルになることを目指します。
ローカル環境で起動させる手順 - はじめてのWebアプリ開発を振り返る Part1 - 転職したらスマレジだった件
これまで関連記事
これまで関連記事については、下記の記事を書きました。
目次
使用技術、サービスなど
1. 機能の概要
「家族ユーザー招待」機能は、自身が招待した他のユーザー(夫婦や祖父母などの家族を想定)と、本棚の共有を開始する機能です。
- 例:登録済みユーザーである妻が、未登録の夫を家族ユーザーとして招待する
家族設定ページの「招待する」ボタンを押すと、「家族招待メール送信フォーム」画面に遷移して、招待メールを送信できます。
1-1. 家族設定ページのイメージ
「家族一覧」に家族を追加して、表示されているユーザー同士で記録を共有できる。
1-2. 画面遷移図
登録済みユーザー(招待する側)の操作
- 「招待する」ボタン(ページ2カ所に配置)を押すと「家族招待メール送信」ページへ遷移する。
- 「家族招待メール送信」ページで、招待したい家族(未登録ユーザー)のメールアドレスを入力して、「送信する」ボタンを押すと、入力したメールアドレス宛にメール送信される。
未登録ユーザー(招待される側)の操作
- 受信したメールの「家族ユーザー登録」リンクを押すと、家族招待用の登録画面にアクセスできる。
2. 基本設計
各画面、機能、データについて、順番にご説明します。
2-1. 家族ユーザー招待ボタン
「家族設定」ページに「家族を招待する」ボタンを2カ所配置する。
機能
- 「家族設定」ページ上部にボタンを設置する。
- 「+招待する」ボタンを押すと、 「家族招待メール送信フォーム」ページに遷移する。
- メッセージを表示する。メッセージ内容は「家族を招待しよう」「子どもの絵本を読んだ記録を簡単に共有できます」
- 「家族一覧」下部に「+家族を招待する」ボタンを設置する。
- 「招待する」ボタンを押すと、 「家族招待メール送信フォーム」ページに遷移する。
2-2. 家族招待メール送信フォーム
2-2-1. 一般ユーザー
機能
- 招待したい家族(未登録ユーザー)のメールアドレスを入力して、「送信する」ボタンを押すと、入力したメールアドレス宛にメール送信される。
メールを送信するためのツール、サービスは下記を利用する。
開発環境では MailHog(開発者向けのメールテストツール) を利用する。
本番環境では SendGrid(メール配信サービス)を利用する。
招待メール用のトークンを発行して、メールに表示するリンクURLに利用する。
データ
「家族ユーザー招待」機能で利用するテーブルの定義は以下の通りです。
カラム名 | データ型 | 役割・備考 |
---|---|---|
id | INTEGER | 招待メール発行を管理するID |
family_id | INTEGER | 招待した側のファミリーID |
VARCHAR(255) | 招待された側のメールアドレス | |
token | VARCHAR(16) | 招待メールのトークン |
created_at | TIMESTAMP | 作成日時 |
updated_at | TIMESTAMP | 更新日時 |
2-2-2. ゲストユーザー
機能
- ゲストユーザーの場合、メール送信できないようにする。
- メールアドレスを入力できないようにする。
- 「送信する」ボタンを表示せず、代わりに戻るボタンを表示する。
2-2-3. 家族招待メール送信フォーム(送信完了)
機能
- 「メール送信が完了しました。」と表示する。
- バリデーションエラーの場合、エラーメッセージを表示する。
2-3. メール文
機能
- デフォルトのHTMLメールではなく、テキストメールにする。
- 家族ユーザー登録用の新規登録フォームへ遷移するためのURLを表示する。
2-4. 新規登録フォーム(家族招待用)
機能
- 「メールアドレス」は、招待した際のメールアドレスをそのまま利用する(変更できないようにする)。
- 「ユーザーネーム」、「パスワード」の入力を求める。
- 入力されたデータのバリデーションをする。
- プライバシーポリシーの同意チェックボックスを設置する。
- 「登録」ボタンを押すと、家族ユーザーとしての新規登録が完了する。
参考資料
招待機能の詳細設計についての参考ページ
MailHog, SendGridを利用したメール送信機能実装についての参考教材
3. 詳細設計(次回)
次回、詳細設計について投稿します。
おわりに
今回は、オリジナルの機能の一つである「家族ユーザー招待」機能の 概要と基本設計 について投稿しました。
次回は、「家族ユーザー招待」機能の 詳細設計 を投稿します。
今回の記事は以上です!
ありがとうございました。
朝活のおとも。カフェラテホットの美味しい季節がやって来ました。 pic.twitter.com/73mRn6eeVg
— やまて|Webエンジニア2年目 (@r_yamate) 2022年10月3日
10月になって急に寒くなってきたので、風邪ひかないようにしたいですね。