コミュニケーションの主役は、電子メールからチャットアプリへと変わりつつありますが、マスプロモーションや保存性のある通知手段として、今でも電子メールは一定の役割を果たしています。

現在主流となっているほとんどのメーラはHTMLメールをサポートしており、HTMLタグとスタイルシートを組み合わせることでレスポンシブデザインをはじめとする高度な表現が可能となっていますが、ブラウザのHTMLとは違った独特の癖や制約があり、メール用のHTMLを直接コーディングすることは大きな苦痛を伴います。

今回紹介するLaravel MJMLというライブラリを利用することで、コンポーネント化されたタグを組み合わせるだけで、レスポンシブかつ洗練されたデザインのHTMLメールを簡単に送信することができます。

MJMLそのものの説明はこちら
https://mjml.io/

前提条件

PHP7.1以上
Laravel 5.6以上
npmがインストールされていること

Laravel MJMLライブラリのインポート

composer create-project --prefer-dist laravel/laravel nicemail "5.8.*"
cd nicemail
composer require asahasrabuddhe/laravel-mjml
php artisan vendor:publish
( Tag: laravel-mailを選択)
npm install --save mjml

テスト用コマンドの生成

php artisan make:command MailTestCommand

空のテンプレートを作成

touch resources/views/mail.blade.php

設定ファイルを作成

touch config/mjml.php

下記の内容をコピー
(この手順は公式ページには記載がありませんが、私の環境ではこれを実行しないと動作しませんでした)

<?php
/**
 * Configuration for Laravel MJML Package.
 */
return [
    'auto_detect_path' => true,
    /*
     * The path to the MJML binary
     */
    // 'path_to_binary' => '',
];

ここまで用意ができましたら、

にアクセスして、送りたいメールのレイアウトを作成します。
（特になければ、一旦デフォルトで表示されている内容そのままでもいいです）

作成したMJMLをコピーして、上で作成したmail.blade.phpに貼り付けます。

mail.blade.php

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>

        <mj-divider border-color="#F45E43"></mj-divider>

        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

テストメールを作成

php artisan make:mail TestMail

上で作成したファイルに下記の内容をコピー

<?php

namespace App\Mail;

use Asahasrabuddhe\LaravelMJML\Mail\Mailable;
use Illuminate\Bus\Queueable;
use Illuminate\Queue\SerializesModels;

class TestMail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->mjml("mail");
    }
}

実行用コマンドを作成

php artisan make:command MailTestCommand

<?php

namespace App\Console\Commands;

use App\Mail\PurchaseReportMail;
use App\Mail\TestMail;
use Illuminate\Console\Command;
use Illuminate\Support\Facades\Mail;

class MailTestCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'test:mail';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'MJML test';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return mixed
     */
    public function handle()
    {
        Mail::to("changeme@example.com")->send(new TestMail());
    }
}

("changeme@example.com"の部分は、ご自身のメールアドレスに変更してください)

上記設定後
php artisan test:mail
でコマンドを実行することで、"Test Mail"という件名のメールが送られるはずです。

変数埋め込み等Bladeの機能を利用することができるため、非常に強力かつ使いやすいライブラリだと思います。
HTMLメールを送る必要があるときは、ぜひ利用をご検討ください。

Laravel MJMLをレスポンシブなメールをサクッと送る