家族ユーザー招待機能 の詳細設計と実装(4) - はじめてのWebアプリ開発を振り返る Part8

こんにちは！

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

はじめに

今回は、Web業界実務未経験での転職活動用にポートフォリオとして作成した『はじめてのWebアプリ開発を振り返る』記事です。

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

qiita.com

実装したオリジナルの機能の一つである「家族ユーザー招待」機能について、記事にします。

概要と基本設計

ryamate.hatenablog.com

詳細設計と実装

(1) 家族招待メール送信フォームの作成

(2) マイグレーションファイルからのテーブル作成

(3) 家族招待メール(テキスト版)の送信処理の作成

(4) 家族招待メール(テキスト版)のテンプレートの作成【今回】

(5) ユーザー登録フォームと登録処理の作成

今回は、 家族招待メール(テキスト版)のテンプレートの作成手順です。

目次

使用技術、サービスなど

• フロントエンド
  • HTML 5 / CSS 3
    • Bootstrap 4.5.0
  • JavaScript
    • Vue.js 2.6.11
    • jQuery 3.5.1
• バックエンド
  • PHP 7.4.13
  • Laravel 6.20.20
  • MySQL 8.0.23
• メール関連

  • MailHog（開発者向けのメールテストツール、開発環境）

    github.com

  • SendGrid（メール配信サービス、本番環境）

    sendgrid.kke.co.jp

1. 家族招待メール(テキスト版)のテンプレートの作成

メールのテンプレートを作成します。メールは以下のような内容にします。

1-1. Bladeの作成・編集

メールのテンプレートにも Blade が使用できるため、 backend/resources/views/emails/ ディレクトリに invite.blade.php を作成し、編集します。

• 作成・編集：backend/resources/views/emails/invite.blade.php

---------------------------------------------------------------------------------

このメールは【よんで】より自動的に送信されています。

お心当たりの無い場合や、ご不明な点がありましたら

お問い合わせフォームよりご連絡をお願いいたします。

---------------------------------------------------------------------------------

あなたのご家族より、家族ユーザーの招待メール送信を受付し、送信しています。

こちらのURLにアクセスし、家族ユーザー登録を行ってください。

{{ $url }}

*URLの有効期間は24時間です。

◇お問い合わせは【お問い合わせフォーム】にて承ります。

メール、お電話などによるお問い合わせは受け付けておりません。

---------------------------------------------------------------------------------

よんで

{{ url(config('app.url')) }}

Copyright 2021 Ryuzo Yamate All Rights Reserved.

---------------------------------------------------------------------------------

HTML メールではなく、テキストメールとするので、 Blade でも HTML タグは使用しません。

• 変数 $url には、「新規登録フォーム（家族招待用）」画面へのURLがセットされています。
• url(config('app.url')) の部分は、メール送信元である Web サービスの URL を表示します。

なお「*URLの有効期間は24時間です。」とメール文中に書いていますが、こちらは実はダミーで、処理としては有効期間は設定できていません。本来は有効期間が過ぎた場合にトークンを利用できなくする処理をする必要がありますが、未実装です。

1-2. 参考

変数 $url

{{ $url }}

変数 $url には、下記のメソッドから値が渡されている。

• 確認：backend/app/Notifications/InvitationFamilyNotification.php

<?php

// 省略

public function toMail($notifiable)
    {
        return $this->mail
            ->from(config('mail.from.address'), config('mail.from.name'))
            ->to($notifiable->email)
            ->subject('[よんで] 家族招待')
            ->text('emails.invite')
            ->with([
                'url' => route('register.invited.{token}', [
                    'token' => $notifiable->token,
                ]),
            ]);
    }

• register.invited.{token} のルーティングは、以下のとおり。

    +--------+-----------+-----------------------------------+--------------------------------+-------------------------------------------------------------------------------+------------------------------------------------------+
    | Domain | Method    | URI                               | Name                           | Action                                                                        | Middleware                                           |
    +--------+-----------+-----------------------------------+--------------------------------+-------------------------------------------------------------------------------+------------------------------------------------------+
    // 略
    |        | GET|HEAD  | register/invited/{token}          | register.invited.{token}       | App\Http\Controllers\Auth\RegisterController@showInvitedUserRegistrationForm  | web,guest                                            |
    // 略
  

config 関数

{{ url(config('app.url')) }}

config('app.url') では、 config 関数を使って config/app.php の url の値を取得している。

参考：config() - Laravel公式

• 確認：backend/config/app.php

<?php

return [
// 略
    'url' => env('APP_URL', 'http://localhost'),
// 略
];

上記の通り、 env 関数を使って環境変数 APP_URL の値を取得する。（ env 関数の第二引数は、第一引数の環境変数が存在しない場合のデフォルト値）

• 確認：backend/.env

APP_URL=http://localhost

config('app.url')は、'http://localhost'という値になる。

本番サーバーでの環境変数 APP_URL については、 'http://localhost' ではなく、サービスのインターネット上のURLを設定する。

url 関数

{{ url(config('app.url')) }}

url 関数は、引数として渡されたパスを完全な URL に変換する。

• サービスの URL が例えば http://example.com だった場合、不足する部分を補う。
  • url('aaa/bbb') は、 http://example.com/aaa/bbb に変換
• 不足する部分が何もない場合は、以下のように補わない。
  • url('http://example.com')は、http://example.comに変換

今回の変換は以下の通り。

config('app.url')は、'http://localhost'

→ url(config('app.url'))は、url('http://localhost')

→ 'http://localhost'

参考：url() - Laravel公式

2. メールテストツール MailHog の準備

メールの送信を行うにあたり、メールテストツール MailHog を利用します。

MailHog では、実際にメール送信することなく、どのようなメールが送信されるかを確認できます。

github.com

参考記事

下記の記事を参考に MailHog を導入しました。

qiita.com

2-1. docker-compose.yml の編集

メールテストツール MailHog を Docker 環境に導入するため、 docker-compose.yml を編集します。

• 編集：docker-compose.yml

services:
  mail:
    image: mailhog/mailhog
    ports:
      - 8025:8025

mail サービスの設定を services 配下に追記します。

MailHog 公式の Docker イメージを利用します。

hub.docker.com

2-2. Docker コンテナの破棄

Docker コンテナを一度、破棄します。

$ docker compose down

2-3. Docker コンテナの作成・起動

コンテナを作成して、起動します。

$ docker compose up -d

2-4. Laravelの環境変数の設定

次に、backend/ ディレクトリの .env のMAIL_から始まる環境変数の値について、以下の通り変更します。

なお、MAIL_FROM_NAMEとMAIL_FROM_ADDRESSはもともと存在しないので、追加します。

• 編集後：backend/.env

# MailHog
MAIL_DRIVER=smtp
MAIL_HOST=mail
MAIL_PORT=1025
MAIL_USERNAME="${APP_NAME}"
MAIL_PASSWORD=password
MAIL_ENCRYPTION=null
MAIL_FROM_NAME="${APP_NAME}"
MAIL_FROM_ADDRESS=no-reply@example.com

• 参考（編集前）：backend/.env

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

ここまでの設定により、 Laravel から MailHog に対して、メールが送信できるようになります。

3. 家族招待メール(テキスト版)の送受信テスト

家族招待メール(テキスト版)の送信処理と、メールのテンプレートの作成が完了したため、 MailHog の準備が完了したので、送受信テストをします。

3-1. 家族招待メール(テキスト版)のテスト送信

メールアドレスを入力して、送信ボタンを押します。

送信ボタンを押すと、メール送信の処理が実行されます。

3-2. MailHog の受信ボックスの確認

ブラウザで MailHog の受信ボックスを確認します。

正しくメール送信処理が実行されていれば、受信ボックスにメールが届いています。

おわりに

今回の記事は以上です！

次回も、詳細設計と実装の続きについて書きます。

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

これまでの関連記事

これまでの関連記事です。

ryamate.hatenablog.com

ryamate.hatenablog.com

ryamate.hatenablog.com

#本日の自習 11/8　3h
✅#独学エンジニア 動画視聴 44.14 ビューの整備
✅#ミノ駆動本 読書 2 設計の初歩
✅Webアプリ作成
AmazonLinux2のベースイメージでLAMP環境のDocker関連ファイル作成着手。
アプリ作成したら見てくれる先生が現れたので、優先度高めで取り組んでいく！

— やまて｜Webエンジニア2年目 (@r_yamate) 2022年11月8日

コードレビューを受ける環境が急遽、手に入りました。楽しみです。