php-laravel-send-mail-mailpit

Laravel で メール機能 を構築したいんだけど、どうすれば良いのかな？

今回は、Laravel で メール機能 を構築し、開発環境でメールを確認できるツール Mailpit を使って、メールを確認する方法まで、ご紹介します。

Laravel や Mailpit の 環境構築がまだの場合 は、下記より Laravel や Mailpit の 環境構築 を行なってください。

Laravel メール送信機能の実装手順

Laravel で メール送信機能を構築する手順 は、以下の通りです。

Laravelでメールの設定
→ .env ファイルで SMTPサーバー や 送信元メールアドレス などを設定 します。
Mailpit の起動
→ 開発中のメール送信をブラウザで確認できるツール です。
Mailable クラスの作成
→ Laravel で メール本文や件名を管理するクラス を作成します。
メールテンプレートの作成
→ Bladeテンプレート で HTMLやテキストのメール本文を作成 します。
フォームテンプレートの作成
→ Bladeテンプレート で メールで送信するフォームテンプレートを作成 します
フォームの表示とメール送信処理のコントローラーの作成
→ フォームの表示 や メールを送信する処理のコントローラを作成 します。
Bladeテンプレート と コントローラーのルーティングの追加
→ 作成した フォームやメールのBladeテンプレートと処理のコントローラーを紐づけるルーティングを追加 する
メールの送信 & Mailpitでメールの確認
→ 実際に Laravel からメールを送信して、Mailpit の管理画面で送信されたメールを開き、件名や本文などメールの設定やテンプレートが正しく動作するか確認します。

※ Gmail で メール送信の確認方法 も補足で載せています

Laravel でメールの設定

最初に、.env ファイルのメール設定を確認し、下記のように設定します
※ 開発環境では実際のメールサーバーではなく、メール確認ツール Mailpit の SMTPサーバー を利用するため、下記のような設定になります。

# .env
MAIL_MAILER=smtp             # メール送信に使用するドライバー（SMTPを使用）
MAIL_SCHEME=null
MAIL_HOST=127.0.0.1          # SMTPサーバーのホスト（Mailpitのサーバー）
MAIL_PORT=1025               # SMTPサーバーのポート番号（Mailpitのデフォルトポート）

MAIL_USERNAME=null           # SMTP認証ユーザー名（Mailpitでは不要）
MAIL_PASSWORD=null           # SMTP認証パスワード（Mailpitでは不要）

MAIL_ENCRYPTION=null         # 暗号化方式（tls / ssl など。Mailpitでは不要）

MAIL_FROM_ADDRESS="hello@example.com"  # 送信元メールアドレス
MAIL_FROM_NAME="${APP_NAME}"          # 送信者名（LaravelのAPP_NAMEを使用）

Mailpit の起動

Mailpit は 開発用のメールテストツール で、実際にメールは送信せず、ブラウザ上で確認することができます。

ブラウザで下記URLの Mailpit管理画面 にアクセス

http://localhost:8025

Mailable クラスの作成

Laravel では Mailableクラス を使って メールを作成 します。
Mailableクラス は、メール本文や件名、送信先などを管理するクラス です。

※ SampleMail はクラス名で自由に変更可能で、作成すると App\Mail 配下にクラスが生成 されます。

生成コマンド

// 通常のLaravel環境
php artisan make:mail SampleMail

// Laravel sail の場合
./vendor/bin/sail artisan make:mail SampleMail

クラスの作成

<!-- App\Mail\SampleMail.php -->
<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Attachment;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;

class SampleMail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * メールデータ
     */
    public function __construct(
        public $subject, // メール件名
        public $body,    // メール本文
        public $name     // 送信者名
    ) {}

    /**
     * メールの基本情報などメタ情報の設定
     */
    public function envelope(): Envelope
    {
        return new Envelope(
            subject: $this->subject // メール件名の設定
        );
    }

    /**
     * メール本文のテンプレート設定
     */
    public function content(): Content
    {
        return new Content(
            view: 'mails.sample' // Bladeのメールテンプレートの設定
        );
    }

    /**
     * 添付ファイルの設定
     */
    public function attachments(): array
    {
        return [];
    }
}

メールテンプレートの作成

Bladeテンプレート で メールアプリで表示されるHTMLやテキストのメールテンプレートを作成 します。

生成コマンド

// 通常のLaravel環境
php artisan make:view mails.sample

// Laravel sail の場合
./vendor/bin/sail artisan make:view mails.sample

テンプレートの作成

{{-- resources/views/mails/sample.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ $subject }}</title>
</head>
<body style="margin:0;background:#f5f5f5;font-family:Arial, Helvetica, sans-serif;line-height:1.6;color:#333;">
    <div style="max-width:600px;margin:40px auto;background:#ffffff;padding:24px;border:1px solid #eee;border-radius:6px;">
        <h2 style="margin-top:0;margin-bottom:16px;">
            件名: {{ $subject }}
        </h2>
        <p>
            <strong>送信者:</strong> {{ $name }}
        </p>
        <div>
            <p style="margin:20px 0 8px;">
                <strong>本文:</strong>
            </p>
            {{-- 本文を改行有りで表示させる --}}
            {!! nl2br(e($body)) !!}
        </div>
    </div>
</body>
</html>

フォームテンプレートの作成

Bladeテンプレート で メールで送信するフォームテンプレートを作成 します

生成コマンド

// 通常のLaravel環境
php artisan make:view mails.form

// Laravel sail の場合
./vendor/bin/sail artisan make:view mails.form

テンプレートの作成

{{-- resources/views/mails/form.blade.php --}}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>メール送信フォーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .container {
            width: 400px;
            margin: 50px auto;
            background: white;
            padding: 20px;
            border: 1px solid #ddd;
        }
        h2 {
            text-align: center;
        }
        label {
            display: block;
            margin-top: 15px;
        }
        input,
        textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            /* はみ出し防止 */
            box-sizing: border-box;
        }
        button {
            width: 100%;
            margin-top: 20px;
            padding: 10px;
            background: #3490dc;
            color: white;
            border: none;
            cursor: pointer;
        }
        .success-message {
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #b8e2c8;
            background: #e8f8ee;
            color: #2f855a;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>メール送信</h2>

        {{-- 送信成功のメッセージ --}}
        @if (session("success"))
            <div class="success-message">
                {{ session("success") }}
            </div>
        @endif

        <form method="POST" action="/send">
            @csrf
            <label>宛先メールアドレス</label>
            <input name="to" type="email" placeholder="example@test.com" required>
            <label>件名</label>
            <input name="subject" type="text" required>
            <label>本文</label>
            <textarea name="body" rows="4" required></textarea>
            <label>送信者名</label>
            <input name="name" type="text" required>
            <button type='submit'>
                送信
            </button>
        </form>
    </div>
</body>
</html>

フォームの表示とメール送信処理のコントローラーの作成

フォームの表示 や メールを送信する処理のコントローラを作成 します。

生成コマンド

// 通常のLaravel環境
php artisan make:controller SampleMailController

// Laravel sail の場合
./vendor/bin/sail artisan make:controller SampleMailController

コントローラーの作成

<!-- app/Http/Controllers/SampleMailController.php -->
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use App\Mail\SampleMail;

class SampleMailController extends Controller
{
    // フォームの表示
    public function showForm()
    {
        return view('mails.form');
    }

    // メール送信処理
    public function sendMail(Request $request)
    {
        $to      = $request->input('to');       // 送信先
        $subject = $request->input('subject');  // 件名
        $body    = $request->input('body');     // 本文
        $name    = $request->input('name');     // 送信者名

        // メールの送信
        Mail::to($to)->send(new SampleMail($subject, $body, $name));

        // メール送信成功のメッセージ表示
        return back()->with('success', 'メールを送信しました！');
    }
}

Bladeテンプレートとコントローラーのルーティングの追加

作成した フォームやメールのBladeテンプレートと処理のコントローラーを紐づけるルーティングの追加 をする

<!-- routes/web.php -->
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SampleMailController;

// フォームの表示
Route::get('/form', [SampleMailController::class, 'showForm']);

// メール送信処理
Route::post('/send', [SampleMailController::class, 'sendMail']);

メールの送信＆ Mailpit でメール確認

実際に Laravel からメールを送信して、Mailpit の管理画面で送信されたメールを開き、件名や本文などメールの設定やテンプレートが正しく動作するか確認します

メールの送信

下記のURLアクセスして、フォーム画面 の各項目を入力後、送信する

http://localhost/form

Mailpit でメール確認

下記のURLにアクセスして、Mailpitの管理画面 を開いて、受信したメールの確認を行う

http://localhost:8025

処理内容

「http://localhost/form」の フォーム画面 の各項目を入力後、送信ボタンをクリック
「http://localhost:8025」の Mailpitの管理画面 を開いて、受信したメールの確認を行う

補足：Gmail でメール送信を確認する方法

Laravel からのメール送信確認に Gmail を使用する場合、通常のGoogleアカウントのパスワードでは認証できない ため、 Gmail の アプリパスワードを作成してSMTP認証に使用する必要 があります。

Gmail アプリパスワードの作成手順

Googleアカウント管理 ページにアクセス
セキュリティとログイン ページに移動
2段階認証プロセスを有効にする
アプリパスワードを作成、管理するから ログインして任意のアプリ名を入力した後に16桁のアプリパスワードが発行 される
下記のように .env ファイルの Gmailアドレス と上記で発行した Gmailのアプリパスワード を変更して、Laravel sail の再起動 or キャッシュの削除 の コマンドを実行

# .env
# Gmail SMTP設定

MAIL_MAILER=smtp # メール送信方法（SMTP）
MAIL_SCHEME=null
MAIL_HOST=smtp.gmail.com # GmailのSMTPサーバー
MAIL_PORT=587 # TLS用ポート

MAIL_USERNAME=your@gmail.com # Gmailアドレス
MAIL_PASSWORD=app password # 発行した Gmailのアプリパスワード

MAIL_ENCRYPTION=tls # 暗号化方式（GmailはTLS）

MAIL_FROM_ADDRESS=your@gmail.com # 送信元メールアドレス(Gmailアドレス)
MAIL_FROM_NAME="${APP_NAME}" # 送信者名

Laravel sail の再起動コマンド

// Laravel sail の 終了 & 起動 (バックグラウンドで起動)
./vendor/bin/sail down
./vendor/bin/sail up -d

// Laravel sail 再起動
./vendor/bin/sail restart

キャッシュの削除コマンド

// configキャッシュ削除
./vendor/bin/sail artisan config:clear

// 主要なキャッシュをまとめて削除
./vendor/bin/sail artisan optimize:clear

// optimize:clear は、下記コマンドと同じ効果
./vendor/bin/sail artisan config:clear
./vendor/bin/sail artisan route:clear
./vendor/bin/sail artisan view:clear
./vendor/bin/sail artisan cache:clear
./vendor/bin/sail artisan compiled:clear
./vendor/bin/sail artisan event:clear