転職したらスマレジだった件

スマレジのエンジニアやまてのテックブログです。マジレス大歓迎です。

家族ユーザー招待機能 の概要と基本設計 - はじめてのWebアプリ開発を振り返る Part4

こんにちは!

スマレジ・テックファームのWebエンジニアやまてと申します。

はじめに

今回は、Web業界実務未経験での転職活動用にポートフォリオとして作成した『はじめてのWebアプリ開発を振り返る』記事として、オリジナルの機能の一つである「家族ユーザー招待」機能の 概要と基本設計 について投稿します。

Webアプリを作成した期間は、2021年2月末〜7月です。


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

qiita.com


記事を書く目的

今回の記事を書く目的は以下の通りです。

自身の学習の振り返りのため

作成当時、独学なのでフィードバックなし、完成させることを最優先にしたこともあり、自分が作成したWebアプリであるにもかかわらず、技術的な理解が浅い部分があることが課題としてあります。

スマレジの面接のときに、Webアプリの出来については褒めていただいたものの、Webアプリについての技術的質問で「いいね機能について説明してみてください。」というような理解を問う質問に対しては、全く上手く答えられず、

「口頭で説明できるということも仕事では必要なシーンがありますので、その点は今後意識していくといいと思います。」

というアドバイスをいただきました。

「口頭で説明できる」ということは「理解している」状態と言えそうなので、振り返ることで「口頭で説明できる」レベルになることを目指します。

ローカル環境で起動させる手順 - はじめてのWebアプリ開発を振り返る Part1 - 転職したらスマレジだった件


これまで関連記事

これまで関連記事については、下記の記事を書きました。

ryamate.hatenablog.com

ryamate.hatenablog.com

ryamate.hatenablog.com

目次

使用技術、サービスなど

  • PHP 7.4.13
  • Laravel 6.20.20
  • MySQL 8.0.23
  • MailHog(開発者向けのメールテストツール、開発環境)

    github.com

  • SendGrid(メール配信サービス、本番環境)

    sendgrid.kke.co.jp

1. 機能の概要

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

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

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

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

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

家族設定ページのイメージ

1-2. 画面遷移図

登録済みユーザー(招待する側)の操作

  • 「招待する」ボタン(ページ2カ所に配置)を押すと「家族招待メール送信」ページへ遷移する。
  • 「家族招待メール送信」ページで、招待したい家族(未登録ユーザー)のメールアドレスを入力して、「送信する」ボタンを押すと、入力したメールアドレス宛にメール送信される。

登録済みユーザー(招待する側)の操作

未登録ユーザー(招待される側)の操作

  • 受信したメールの「家族ユーザー登録」リンクを押すと、家族招待用の登録画面にアクセスできる。

未登録ユーザー(招待される側)の操作


2. 基本設計

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

2-1. 家族ユーザー招待ボタン

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

「家族設定」ページ上部

「家族一覧」下部

機能

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


2-2. 家族招待メール送信フォーム

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

機能

  • 招待したい家族(未登録ユーザー)のメールアドレスを入力して、「送信する」ボタンを押すと、入力したメールアドレス宛にメール送信される。
  • メールを送信するためのツール、サービスは下記を利用する。

    • 開発環境では MailHog(開発者向けのメールテストツール) を利用する。

      github.com

    • 本番環境では SendGrid(メール配信サービス)を利用する。

      sendgrid.kke.co.jp

  • 招待メール用のトークンを発行して、メールに表示するリンクURLに利用する。

データ

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

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

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

機能

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

2-2-3. 家族招待メール送信フォーム(送信完了)

機能

  • 「メール送信が完了しました。」と表示する。
    • バリデーションエラーの場合、エラーメッセージを表示する。

2-3. メール文

機能

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

2-4. 新規登録フォーム(家族招待用)

機能

  • 「メールアドレス」は、招待した際のメールアドレスをそのまま利用する(変更できないようにする)。
  • 「ユーザーネーム」、「パスワード」の入力を求める。
    • 入力されたデータのバリデーションをする。
  • プライバシーポリシーの同意チェックボックスを設置する。
  • 「登録」ボタンを押すと、家族ユーザーとしての新規登録が完了する。

参考資料

  • 招待機能の詳細設計についての参考ページ

    laraveldaily.com

  • MailHog, SendGridを利用したメール送信機能実装についての参考教材

    www.techpit.jp



3. 詳細設計(次回)

次回、詳細設計について投稿します。


おわりに

今回は、オリジナルの機能の一つである「家族ユーザー招待」機能の 概要と基本設計 について投稿しました。

次回は、「家族ユーザー招待」機能の 詳細設計 を投稿します。

今回の記事は以上です!

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



10月になって急に寒くなってきたので、風邪ひかないようにしたいですね。