はじめに
ユーザー招待機能の概要と基本設計について投稿します。
Web業界実務未経験での転職活動用にポートフォリオとしてはじめて作成したWebアプリ開発のオリジナルの機能として「家族ユーザー招待」機能を実装したときのものです。（タイトルは分類として「ユーザー招待」と表記しています）
※ 作成したポートフォリオは、絵本を読み聞かせしたことの記録・管理を、家族と共有できるWebアプリケーションです（作成期間は、2021年2月末〜7月）
記事を書く目的
- 類似の機能を作る方への参考にしていただきたいため
- 自身の学習の振り返りのため
投稿内容（全 5 回）
本連載は以下の順序で投稿します。
- ユーザー招待機能の概要と基本設計
- ユーザー招待機能の詳細設計と実装
今回は、 ユーザー招待機能の概要と基本設計 についてです。
目次
以下、本記事の目次です。
機能の概要
1. 家族設定ページのイメージ
2. 画面遷移図
基本設計
1. 家族ユーザー招待ボタン
2. 家族招待メール送信フォーム
使用技術、サービスなど
- PHP 7.4.13
- Laravel 6.20.20
- MySQL 8.0.23
- MailHog（開発者向けのメールテストツール、開発環境）
機能の概要
「家族ユーザー招待」機能は、自身が招待した他のユーザー（夫婦や祖父母などの家族を想定）と、本棚の共有を開始する機能です。
- 例：登録済みユーザーである妻が、未登録の夫を家族ユーザーとして招待する
家族設定ページの「招待する」ボタンを押すと、「家族招待メール送信フォーム」画面に遷移して、招待メールを送信できます。
概要-1. 家族設定ページのイメージ
「家族一覧」に家族を追加して、表示されているユーザー同士で記録を共有できる。
概要-2. 画面遷移図
登録済みユーザー（招待する側）の操作
- 「招待する」ボタン（ページ２カ所に配置）を押すと「家族招待メール送信」ページへ遷移する。
- 「家族招待メール送信」ページで、招待したい家族（未登録ユーザー）のメールアドレスを入力して、「送信する」ボタンを押すと、入力したメールアドレス宛にメール送信される。
未登録ユーザー（招待される側）の操作
- 受信したメールの「家族ユーザー登録」リンクを押すと、家族招待用の登録画面にアクセスできる。
基本設計
各画面、機能、データについて、順番にご説明します。
基本設計-1. 家族ユーザー招待ボタン
「家族設定」ページに「家族を招待する」ボタンを２カ所配置する。
-
「家族設定」ページ上部
-
「家族一覧」下部
機能
- 「家族設定」ページ上部にボタンを設置する。
- 「＋招待する」ボタンを押すと、 「家族招待メール送信フォーム」ページに遷移する。
- メッセージを表示する。メッセージ内容は「家族を招待しよう」「子どもの絵本を読んだ記録を簡単に共有できます」
- 「家族一覧」下部に「＋家族を招待する」ボタンを設置する。
- 「招待する」ボタンを押すと、 「家族招待メール送信フォーム」ページに遷移する。
基本設計-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-3. 家族招待メール送信フォーム（送信完了）
機能
- 「メール送信が完了しました。」と表示する。
- バリデーションエラーの場合、エラーメッセージを表示する。
基本設計-3. メール文
機能
- デフォルトのHTMLメールではなく、テキストメールにする。
- 家族ユーザー登録用の新規登録フォームへ遷移するためのURLを表示する。
基本設計-4. 新規登録フォーム（家族招待用）
機能
- 「メールアドレス」は、招待した際のメールアドレスをそのまま利用する（変更できないようにする）。
- 「ユーザーネーム」、「パスワード」の入力を求める。
- 入力されたデータのバリデーションをする。
- プライバシーポリシーの同意チェックボックスを設置する。
- 「登録」ボタンを押すと、家族ユーザーとしての新規登録が完了する。
おわりに
今回は、 ユーザー招待機能の概要と基本設計 について投稿しました。
次回は、 ユーザー招待機能の詳細設計と実装(1) 招待メール送信フォーム についてです。
ありがとうございました。
参考資料
- MailHog, SendGridを利用したメール送信機能実装についての参考教材
- 招待機能の詳細設計についての参考ページ