【Laravel6】ユーザー招待機能の概要と基本設計

# はじめに

ユーザー招待機能の概要と基本設計について投稿します。

Web業界実務未経験での転職活動用にポートフォリオとしてはじめて作成したWebアプリ開発のオリジナルの機能として「家族ユーザー招待」機能を実装したときのものです。（タイトルは分類として「ユーザー招待」と表記しています）

※ 作成したポートフォリオは、絵本を読み聞かせしたことの記録・管理を、家族と共有できるWebアプリケーションです（作成期間は、2021年2月末〜7月）

https://qiita.com/ryamate/items/c3b4f63f8d94ab090bf8

## 記事を書く目的

- 類似の機能を作る方への参考にしていただきたいため
- 自身の学習の振り返りのため

## 投稿内容（全 5 回）

本連載は以下の順序で投稿します。

- **ユーザー招待機能の概要と基本設計**
- **ユーザー招待機能の詳細設計と実装**
    - [(1) 招待メール送信フォーム](https://qiita.com/ryamate/items/a1d0a5b1db9d11a69671)
    - [(2) マイグレーションファイルからのテーブル作成](https://qiita.com/ryamate/items/bfca6024d09858351c83)
    - [(3) 招待メール送信処理](https://qiita.com/ryamate/items/39a95e504b229edd5d3b)
    - [(4) 招待メールのテンプレート](https://qiita.com/ryamate/items/9392ba2a6e6351544e7b)
    - [(5) ユーザー登録フォームと登録処理](https://qiita.com/ryamate/items/57a94656134870d31edb)

今回は、  **ユーザー招待機能の概要と基本設計** についてです。 

## 目次    
以下、本記事の目次です。
[機能の概要](#機能の概要)
　[1. 家族設定ページのイメージ](#概要-1-家族設定ページのイメージ)
　[2. 画面遷移図](#概要-2-画面遷移図)
[基本設計](#基本設計)
　[1. 家族ユーザー招待ボタン](#基本設計-1-家族ユーザー招待ボタン)
　[2. 家族招待メール送信フォーム](#基本設計-2-家族招待メール送信フォーム)

## 使用技術、サービスなど

- PHP 7.4.13
- Laravel 6.20.20
- MySQL 8.0.23
- MailHog（開発者向けのメールテストツール、開発環境）    

https://github.com/mailhog/MailHog

# 機能の概要

「家族ユーザー招待」機能は、自身が招待した他のユーザー（夫婦や祖父母などの家族を想定）と、本棚の共有を開始する機能です。

- 例：登録済みユーザーである妻が、未登録の夫を家族ユーザーとして招待する

家族設定ページの「招待する」ボタンを押すと、「家族招待メール送信フォーム」画面に遷移して、招待メールを送信できます。

## 概要-1. 家族設定ページのイメージ

「家族一覧」に家族を追加して、表示されているユーザー同士で記録を共有できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/3165acb0-fe72-37e7-bb20-53798b02ef34.png)

## 概要-2. 画面遷移図

### 登録済みユーザー（招待する側）の操作

- 「招待する」ボタン（ページ２カ所に配置）を押すと「家族招待メール送信」ページへ遷移する。
- 「家族招待メール送信」ページで、招待したい家族（未登録ユーザー）のメールアドレスを入力して、「送信する」ボタンを押すと、入力したメールアドレス宛にメール送信される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/7ddaefd4-bea1-ccd0-5eb0-7ceb97a2ad44.png)

### 未登録ユーザー（招待される側）の操作

- 受信したメールの「家族ユーザー登録」リンクを押すと、家族招待用の登録画面にアクセスできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/f728bc07-f952-6db0-a1b4-98b4e660c945.png)

# 基本設計

各画面、機能、データについて、順番にご説明します。

## 基本設計-1. 家族ユーザー招待ボタン

「家族設定」ページに「家族を招待する」ボタンを２カ所配置する。

- 「家族設定」ページ上部
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/69fcd123-2330-90bc-fc41-3b2f0be0e972.png)

- 「家族一覧」下部
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/1b957b38-db06-2c21-b0cf-83c2ef3194df.png)


#### 機能

- 「家族設定」ページ上部にボタンを設置する。
    - 「＋招待する」ボタンを押すと、 「家族招待メール送信フォーム」ページに遷移する。
    - メッセージを表示する。メッセージ内容は「家族を招待しよう」「子どもの絵本を読んだ記録を簡単に共有できます」
- 「家族一覧」下部に「＋家族を招待する」ボタンを設置する。
    - 「招待する」ボタンを押すと、 「家族招待メール送信フォーム」ページに遷移する。

## 基本設計-2. 家族招待メール送信フォーム

家族招待メール送信フォームは、一般ユーザーとゲストユーザーで分けます。ゲストユーザーとは、ゲストログイン機能でログインしたユーザーです。

### 2-1. 一般ユーザー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/00d7af34-484e-7914-b085-c3289efddc5e.png)
#### 機能
- 招待したい家族（未登録ユーザー）のメールアドレスを入力して、「送信する」ボタンを押すと、入力したメールアドレス宛にメール送信される。
- メールを送信するためのツール、サービスは下記を利用する。
    - 開発環境では MailHog（開発者向けのメールテストツール） を利用する。
    - 本番環境では SendGrid（メール配信サービス）を利用する。
        
- 招待メール用のトークンを発行して、メールに表示するリンクURLに利用する。

#### データ
「家族ユーザー招待」機能で利用するテーブルの定義は以下の通りです。

| カラム名 | データ型 | 役割・備考 |
| --- | --- | --- |
| id | INTEGER | 招待メール発行を管理するID |
| family_id | INTEGER | 招待した側のファミリーID |
| email | VARCHAR(255) | 招待された側のメールアドレス |
| token | VARCHAR(16) | 招待メールのトークン |
| created_at | TIMESTAMP | 作成日時 |
| updated_at | TIMESTAMP | 更新日時 |

### 2-2. ゲストユーザー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/922cd97e-90f4-006f-1d6f-19e28afed63b.png)

#### 機能

- ゲストユーザーの場合、メール送信できないようにする。
    - メールアドレスを入力できないようにする。
    - 「送信する」ボタンを表示せず、代わりに戻るボタンを表示する。

### 2-3. 家族招待メール送信フォーム（送信完了）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/84a8ea1b-ba1f-308b-a7a1-1b240c490bb5.png)
#### 機能
- 「メール送信が完了しました。」と表示する。
    - バリデーションエラーの場合、エラーメッセージを表示する。

## 基本設計-3. メール文

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/de60fc04-c461-3005-4b94-d6cd3cb2e3b7.png)

#### 機能
- デフォルトのHTMLメールではなく、テキストメールにする。
- 家族ユーザー登録用の新規登録フォームへ遷移するためのURLを表示する。

## 基本設計-4. 新規登録フォーム（家族招待用）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527226/9f750157-1461-ef20-5ba0-973f2704e969.png)
#### 機能
- 「メールアドレス」は、招待した際のメールアドレスをそのまま利用する（変更できないようにする）。
- 「ユーザーネーム」、「パスワード」の入力を求める。
    - 入力されたデータのバリデーションをする。
- プライバシーポリシーの同意チェックボックスを設置する。
- 「登録」ボタンを押すと、家族ユーザーとしての新規登録が完了する。

# おわりに

今回は、 **ユーザー招待機能の概要と基本設計** について投稿しました。
次回は、 **[ユーザー招待機能の詳細設計と実装(1) 招待メール送信フォーム](https://qiita.com/ryamate/items/a1d0a5b1db9d11a69671)** についてです。

ありがとうございました。

## 参考資料

- MailHog, SendGridを利用したメール送信機能実装についての参考教材
    
https://www.techpit.jp/courses/11

- 招待機能の詳細設計についての参考ページ
    
https://laraveldaily.com/laravel-auth-make-registration-invitation-only/