Laravel パスワードリセットメールのデザイン変更

##はじめに
今回の記事はLaravelにある
パスワードリセット機能、こちらのメール部分の編集方法を
忘れないようにメモを残しておきます。

パスワードリセットメール

まず、デフォルトの画面をみてみましょう

はい。見事に英語ですね
おまけに、上の方にLaravelのロゴ入りです

これだとメールが届いたユーザーが困惑してしまうので
メールの文章を編集していきましょう

vendor/laravel/framework/src/Illuminate/Auth/Notifications/ResetPassword.php
vendor/laravel/framework/src/Illuminate/Notifications/resources/views/email.blade.php

上記の２ファイルがパスワードリセットメールの箇所なので確認していきましょう

ResetPassword.php

まずこちらのファイルからいきましょう

    protected function buildMailMessage($url)
    {
        return (new MailMessage)
            ->subject(Lang::get('Reset Password Notification'))
            ->line(Lang::get('You are receiving this email because we received a password reset request for your account.'))
            ->action(Lang::get('Reset Password'), $url)
            ->line(Lang::get('This password reset link will expire in :count minutes.', ['count' => config('auth.passwords.'.config('auth.defaults.passwords').'.expire')]))
            ->line(Lang::get('If you did not request a password reset, no further action is required.'));
    }

上記のように記載されているクラスのreturnの中の文章を見てみると

先ほどメールに送られてきた文章と一致していることがわかります。

つまり、この文章をmailのbladeに渡して表示しているということがわかりました。

直接ResetPassword.php内を編集しても文字の変更もできますが

「vendor」配下は汚さないのが一般的なので

英語を日本語に変換するという形で対応していきましょう

変換ファイルの作成

まず、始めに
config/app.php　の下記の箇所を書き換えてください。

   - 'locale' => 'en',
   + 'locale' => 'ja',

   -'faker_locale' => 'en_US', 
   +'faker_locale' => 'ja_JP', 

次に
resources/lang の配下に

ja.jsonというファイルを作成します

中身は

{
    "Hello!": "ご利用ありがとうございます。",
    "Regards":"よろしくお願いいたします。",
    "Reset Password Notification": "パスワード再設定のお知らせ",
    "Reset Password":"パスワードの再設定を行う",
    "You are receiving this email because we received a password reset request for your account.": "あなたのアカウントでパスワード再設定のリクエストがありました",
    "This password reset link will expire in :count minutes.": "このリンクの有効期限は受信してから、:count 分です。",
    "If you did not request a password reset, no further action is required.": "内容にお心当たりがない場合は、本メールは破棄して頂けるようお願いいたします。"
}

※日本語訳は、自由に設定してください

上記のように変更して、パスワードリセットメールを送ってみると。。。

日本語になっています！！

email.blade.php

次に編集するファイルです
laravelではおなじみのbladeファイルですね

@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level === 'error')
# @lang('Whoops!')
@else
# @lang('Hello!')
@endif
@endif

{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}

@endforeach

{{-- Action Button --}}
@isset($actionText)
<?php
    switch ($level) {
        case 'success':
        case 'error':
            $color = $level;
            break;
        default:
            $color = 'primary';
    }
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@endisset

{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}

@endforeach

{{-- Salutation --}}
@if (! empty($salutation))
{{ $salutation }}
@else
@lang('Regards'),<br>
{{ config('app.name') }}
@endif

{{-- Subcopy --}}
@isset($actionText)
@slot('subcopy')
@lang(
    "If you're having trouble clicking the \":actionText\" button, copy and paste the URL below\n".
    'into your web browser:',
    [
        'actionText' => $actionText,
    ]
) <span class="break-all">[{{ $displayableActionUrl }}]({{ $actionUrl }})</span>
@endslot
@endisset
@endcomponent

上記のようになっているかと思います。

こちらも「vendor」配下のファイルになりますので直接変更をするのは、やめておきましょう

なので、bladeを編集するために下記のコマンドを実行します

 php artisan vendor:publish --tag=laravel-notifications 

すると、同じ内容のファイルが下記のディレクトリに複製されています。

resources/views/vendor/Notifications /email.blade.php

下記のコマンドも実行してください！
logoマークやデザインを変更する際に必要になるので！

 php artisan vendor:publish --tag=laravel-notifications 

resources/views/vendor/にmailフォルダが出来たと思います。

これで準備は終わりです。レイアウトを変更していきましょう

###logoの変更

メールにあったLaravelのlogoを変更するには

先ほど複製したmailフォルダのhtml配下にあるheader.bladeを編集すれば
logoを変えたり、非表示にしたりできます。

###footerの変更

コピーライトは
message.bladeの24行目にあるのでこちらを変更するなり削除するなりしましょう！

##デザインの変更

最後にデザインの変更です。
ボタンの色や背景の色の変更方法です。

編集するファイルの場所は、先ほどのコマンドで作成した

resources/views/vendor/mail/html/themes　配下にある

default.cssです！

例えば背景色を変更したいなら

/* Body */

.body {
    -premailer-cellpadding: 0;
    -premailer-cellspacing: 0;
    -premailer-width: 100%;
    background-color: #edf2f7;
    border-bottom: 1px solid #edf2f7;
    border-top: 1px solid #edf2f7;
    margin: 0;
    padding: 0;
    width: 100%;
}

上記箇所のbackground-colorを変えるなど

このCSSファイルを変更することで
デザインを変更することができます！

長くなりましたが以上になります。