何をしたい？
「ログイン、新規登録、パスワード再設定メール前、パスワード再設定メール本文、パスワード再設定ページ」を日本語化したい。
手順
ログインから順に解説していきます。
✅ ログインの場合
Laravelの多言語ファイルを活用していきます。
① 言語のデフォルトを ja に変更
これを設定しておけば、翻訳ファイルの /lang/ja を自動的に読み込みます。
'locale' => 'ja',
② ファイル作成
「lang/ja/auth.php」を作成(まだなかったら)。
③ 翻訳作成
基本ルールとして、「lang/ja/auth.php」のkeyは 「小文字」と「_」で作成する。
<?php
return [
// ログイン画面
'email' => 'メールアドレス',
'password' => 'パスワード',
'login' => 'ログイン',
'remember_me' => '次回から自動ログイン',
'forgot_your_password?' => 'パスワードをお忘れの方はこちら',
④ login.blade.php を編集
③で作成した翻訳のkeyを記載する。
そのkeyの前に翻訳が記載されているファイルであるauthをつける。
# 編集前
<x-input-label for="email" :value="__('Email')" />
# 編集後
<x-input-label for="email" :value="__('auth.email')" />
# 編集前
<x-input-label for="password" :value="__('Password')" />
# 編集後
<x-input-label for="password" :value="__('auth.password')" />
# 編集前
<span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
# 編集後
<span class="ml-2 text-sm text-gray-600">{{ __('auth.remember_me') }}</span>
# 編集前
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</a>
# 編集後
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('password.request') }}">
{{ __('auth.forgot_your_password?') }}
</a>
# 編集前
<x-primary-button class="ml-3">
{{ __('Log in') }}
</x-primary-button>
# 編集後
<x-primary-button class="ml-3">
{{ __('auth.login') }}
</x-primary-button>
結果
✅ 新規登録の場合(1万時間学習記録の際に記載)
① 言語のデフォルトを ja に変更
これを設定しておけば、翻訳ファイルの /lang/ja を自動的に読み込みます。
'locale' => 'ja',
② ファイル作成
「lang/ja/auth.php」を作成(まだなかったら)。
③ 翻訳作成
基本ルールとして、「lang/ja/auth.php」のkeyは 「小文字」と「_」で作成する。
<?php
return [
// 新規登録画面
'name' => '名前',
'confirm_password' => 'パスワード(再確認)',
'already_registered?' => '登録済みの方はこちら',
'register' => '新規登録',
④ register.blade.php を編集
③で作成した翻訳のkeyを記載する。
そのkeyの前に翻訳が記載されているファイルであるauthをつける。
# 編集前
<x-input-label for="name" :value="__('Name')" />
# 編集後
<x-input-label for="name" :value="__('auth.name')" />
# 編集前
<x-input-label for="email" :value="__('Email')" />
# 編集後
<x-input-label for="email" :value="__('auth.email')" />
# 編集前
<x-input-label for="password" :value="__('Password')" />
# 編集後
<x-input-label for="password" :value="__('auth.password')" />
# 編集前
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />
# 編集後
<x-input-label for="password_confirmation" :value="__('auth.confirm_password')" />
# 編集前
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
{{ __('Already registered?') }}
</a>
# 編集後
<a class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" href="{{ route('login') }}">
{{ __('auth.already_registered?') }}
</a>
# 編集前
<x-primary-button class="ml-4">
{{ __('Register') }}
</x-primary-button>
# 編集後
<x-primary-button class="ml-4">
{{ __('auth.register') }}
</x-primary-button>
結果
✅ 「再設定用メール設定ページ」の場合
① 言語のデフォルトを ja に変更
これを設定しておけば、翻訳ファイルの /lang/ja を自動的に読み込みます。
'locale' => 'ja',
② ファイル作成
「lang/ja/auth.php」を作成(まだなかったら)。
③ 翻訳作成
基本ルールとして、「lang/ja/auth.php」のkeyは 「小文字」と「_」で作成する。
今回は文章が長いのでそのまま活用しました。
<?php
return [
// パスワード再設定メール
'Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.' => '「ご登録のメールアドレス」を入力していただければ、<br>パスワード再設定用のリンクをメールでお送りします。',
'email_password_reset_link' => '再設定用メールを受け取る',
④ forgot-password.blade.php を編集
③で作成した翻訳のkeyを記載する。
そのkeyの前に翻訳が記載されているファイルであるauthをつける。
# 編集前
<div class="mb-4 text-sm text-gray-600">
{{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
</div>
# 編集後
<div class="mb-4 text-sm text-gray-600">
{!! __('auth.Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') !!}
</div>
# 編集前
<x-input-label for="email" :value="__('Email')" />
# 編集後(login画面と同じため③を省力しました。)
<x-input-label for="email" :value="__('auth.email')" />
# 編集前
<x-primary-button>
{{ __('Email Password Reset Link') }}
</x-primary-button>
# 編集後
<x-primary-button>
{{ __('auth.email_password_reset_link') }}
</x-primary-button>
結果
✅ 再設定用メールの本文：開発環境
「開発環境」と「本番環境」で設定が異なります。
この章では「開発環境」の解説をしていきます。
「本番環境」の解説は ↓ をクリックしてください。
①Mailpit の導入と設定(開発環境)
① - 1：Mailpit をインストール（Mac）
brew install --no-quarantine mailpit
① - 2：Mailpit を起動
mailpit
↓
起動後：
・SMTPサーバ：localhost:1025
・Web UI：http://localhost:8025
※ 開発中ずっとMailpitを起動しておきたい場合
mailpit --smtp :1025 --web :8025
① - 3：Laravel の .env を編集
MAIL_MAILER=smtp
MAIL_HOST=localhost
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=送り手のメールアドレス(開発環境ならなんでもOK)
MAIL_FROM_NAME="${APP_NAME}"
結果
②メール本文の日本語化
② - 1：Markdown対応の通知クラスを作成
Laravel の通知機能を Markdown メールテンプレート対応で作成するためのコマンドを実行
わかりやすく言うと、「メール通知用クラス」と「メールの見た目（Markdownビュー）」を一発で作る」コマンド ↓
php artisan make:notification CustomResetPassword --markdown=emails.reset-password
👉 以下の2つのファイルが作られます：
・「app/Notifications/CustomResetPassword.php」
通知クラス：通知を送るロジック(件名や本文など)を定義する場所。
・「resources/views/emails/reset-password.blade.php」
メールの見た目を定義するビュー： Markdown 構文で書かれた、メールのテンプレート(デザイン含む)
② - 2：通知クラスを編集(CustomResetPassword.php)
通知クラス = 通知を送るロジック(件名や本文など)を定義する場所。
編集目的：パスワード再設定メールを Markdown テンプレートで送信する通知クラス
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Notifications\Messages\MailMessage;
class CustomResetPassword extends Notification
{
use Queueable; // この通知を「キュー処理(非同期)」で送信できるようにする。
public $token; // 再設定用リンクに必要な「トークン」をインスタンスに保持する変数。
public function __construct($token) // new CustomResetPassword($token)で呼び出されたときに、トークンを $this->token にセットして保持。
{
$this->token = $token;
}
public function via($notifiable) // この通知は「メール(mail)」で送信することを指定
{
return ['mail'];
}
// メールの中身を定義
public function toMail($notifiable)
{
// $resetUrl：トークンとメールアドレスを使ってパスワード再設定用リンクを生成。
$resetUrl = url("/reset-password/{$this->token}?email={$notifiable->getEmailForPasswordReset()}"); // $notifiable：通知される「ユーザー情報」などが入ってる。
// メールの送信内容
return (new MailMessage) // (new MailMessage)：メール送信用オブジェクトを作成。
->subject('【パスワード再設定】のご案内') // ->subject(...)：メールの件名。
->markdown('emails.reset-password', [ // ->markdown(...)：Markdownテンプレートを使ってメールを構成。
'resetUrl' => $resetUrl, // 第一引数：ビューのパス(resources/views/emails/reset-password.blade.php)
'user' => $notifiable, // 第二引数：そのビューに渡す変数($resetUrl と user)
]);
}
}
・resetUrl の例
$resetUrl = url("/reset-password/{$this->token}?email={$notifiable->getEmailForPasswordReset()}");
② - 3： Markdownテンプレートを編集(emails/reset-password.blade.php)
@component('mail::〇〇') は、
resources/views/vendor/mail/html/ 以下にある Blade パーツに対応
@component('mail::message')
# パスワード再設定のご案内
{{ $user->name ?? 'お客' }}様、こんにちは！
パスワード再設定のリクエストを受け付けました。
@component('mail::button', ['url' => $resetUrl])
パスワードを再設定する
@endcomponent
このリンクは60分で無効になります。<br>
心当たりがない場合は、このメールを無視してください。
@endcomponent
⚠️ ↑ コードはインデントを崩さない！(このまま)
Markdownメールテンプレート（@component('mail::message')）では、
インデント（特にスペースや改行）がHTMLに変換されるときに影響してデザイン崩れが発生する。
② - 4： Userモデルで通知を差し替える(app/Models/User.php)
use App\Notifications\CustomResetPassword;
public function sendPasswordResetNotification($token)
{
$this->notify(new CustomResetPassword($token));
}
📝 これでLaravelの標準通知が自分のMarkdown通知に置き換わります！
結果
③ Markdown 対応の通知の footer の copy right を変更
③ - 1：「resources/views/vendor/mail/html/footer.blade.php」を作成
「resources/views/vendor/mail/html/layout.blade.php」がない場合、
↓ ※以下のコマンドで vendor テンプレートを公開します：
php artisan vendor:publish --tag=laravel-mail
↓
実行結果、以下のファイルが生成されます。
・「resources/views/vendor/mail/html/layout.blade.php」
・「resources/views/vendor/mail/html/footer.blade.php」 ← これを編集！
③ - 2：「footer.blade.php」を編集
<tr>
<td class="content-cell" align="center">
© {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
</td>
</tr>
↓
これで完了！
メール通知のフッターが「Laravel」から自分のサイト名に変わります。
※{{ config('app.name') }}は、ここに自分のサービス名を直接入力してもOK
✅ パスワード変更ページの場合
Laravelの多言語ファイルを活用していきます。
① 言語のデフォルトを ja に変更
これを設定しておけば、翻訳ファイルの /lang/ja を自動的に読み込みます。
'locale' => 'ja',
② ファイル作成
「lang/ja/auth.php」を作成(まだなかったら)。
③ 翻訳作成
基本ルールとして、「lang/ja/auth.php」のkeyは 「小文字」と「_」で作成する。
<?php
return [
// PW再設定画面
'new_password' => '新しいパスワード',
'confirm_new_password' => '新しいパスワード(再確認)',
'reset_password' => 'パスワードを再設定する',
];
④ reset-password.blade.php を編集
③で作成した翻訳のkeyを記載する。
そのkeyの前に翻訳が記載されているファイルであるauthをつける。
# 編集前
<x-input-label for="email" :value="__('Email')" />
# 編集後(login画面と同じため③を省力しました。)
<x-input-label for="email" :value="__('auth.email')" />
# 編集前
<x-input-label for="password" :value="__('Password')" />
# 編集後
<x-input-label for="password" :value="__('auth.new_password')" />
# 編集前
<x-input-label for="password_confirmation" :value="__('Confirm Password')" />
# 編集後
<x-input-label for="password_confirmation" :value="__('auth.confirm_new_password')" />
# 編集前
<x-primary-button>
{{ __('Reset Password') }}
</x-primary-button>
# 編集後
<x-primary-button>
{{ __('auth.reset_password') }}
</x-primary-button>
結果
✅ 再設定用メール：本番環境
今回は本番環境で Gmail 経由のメール送信を行う解説をしていきます。
① Gmail 側の準備（アプリパスワード）
Gmail の通常パスワードは使えないので、「アプリパスワード」を使います。
① - 1：2段階認証を有効にする(すでにしていればOK)
Google アカウント
↓
セキュリティ
↓
「2段階認証プロセス」を有効化
① - 2：アプリパスワードを生成
Google アカウント
↓
セキュリティ
↓
検索欄で「アプリパスワード」入力
↓
アプリパスワード
・アプリ名：なんでも良い
例：laravel_app
・生成された16桁のアプリパスワード：コピーする
→これを本番環境の .env に記述する
② .env に Gmail 用の設定を記述(本番環境)
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=あなたのGmailアドレス（例：example@gmail.com）
MAIL_PASSWORD=16桁のアプリパスワード（詰めて入力）
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=あなたのGmailアドレス（メール本文の送信元を決める）
MAIL_FROM_NAME="${APP_NAME}"
③ Laravel 側で反映する
php artisan config:clear
php artisan cache:clear
④ テスト送信(確認方法)
例えばパスワードリセットなどを実行して、実際に Gmail 経由でメールが送られるかを確認。
補足： プロフィールの日本語化
補足： ナビゲーションリンクの日本語化