【Laravel 8】Jetstreamを使用したログイン機能を日本語化する方法について
使用環境
・Windows10
・PHP 7.3.7
・Laravel 8.32.1
はじめに
laravel8.0からJetstreamというパッケージが使用されています。
Jetstreamを使用したログイン機能を日本語化させる方法について記載します。
Jetstreamパッケージからビューをコピーする
Jetstreamが提供するHTMLを直接変更できるように、パッケージ内にあるビューをLaravel側へコピーします。
php artisan vendor:publish --tag=jetstream-views
ログイン時に正しく入力されなかった場合のエラー文を日本語化する
resources/views/vendor/jetstream/components/validation-errors.blade.php
を編集します。
@if ($errors->any())
<div {{ $attributes }}>
<!-- 下記を変更 -->
<div class="font-medium text-red-600">エラーが発生しました!</div>
<ul class="mt-3 list-disc list-inside text-sm text-red-600">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
言語パッケージをダウンロードする
Laravel-Lang
上記のリンク内の「Code」⇒「Download ZIP」からzipファイルをダウンロードします。
ダウンロード先はどこでもいいので、lang-master/locales内の「ja」フォルダを自分の開発中Laravelフォルダ内の resources/lang フォルダ内にコピーします。
エラーメッセージを修正
resources/lang/ja/validation.phpを以下のように変更する。
<?php
return [
// 省略
'attributes'=> [
'name' => '名前',
'email' => 'メールアドレス',
'password' => 'パスワード'
],
];
ログインフォームを日本語化する
resources/views/auth/login.blade.phpを以下のように変更します。
<x-guest-layout>
<x-jet-authentication-card>
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
<x-jet-validation-errors class="mb-4" />
@if (session('status'))
<div class="mb-4 font-medium text-sm text-green-600">
{{ session('status') }}
</div>
@endif
<form method="POST" action="{{ route('login') }}">
@csrf
<div>
<x-jet-label value="メールアドレス" />
<x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>
<div class="mt-4">
<x-jet-label value="パスワード" />
<x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
</div>
<div class="block mt-4">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox" name="remember">
<span class="ml-2 text-sm text-gray-600">次回から省略</span>
</label>
</div>
<div class="flex items-center justify-end mt-4">
@if (Route::has('password.request'))
<a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
パスワードを忘れましたか?
</a>
@endif
<x-jet-button class="ml-4">
ログイン
</x-jet-button>
</div>
</form>
</x-jet-authentication-card>
</x-guest-layout>
ユーザー登録フォームを日本語化する
resources/views/auth/register.blade.phpを以下のように変更します。
<x-guest-layout>
<x-jet-authentication-card>
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
<x-jet-validation-errors class="mb-4" />
<form method="POST" action="{{ route('register') }}">
@csrf
<div>
<x-jet-label value="名前" />
<x-jet-input class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus autocomplete="name" />
</div>
<div class="mt-4">
<x-jet-label value="メールアドレス" />
<x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')" required />
</div>
<div class="mt-4">
<x-jet-label value="パスワード" />
<x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
</div>
<div class="mt-4">
<x-jet-label value="パスワード(確認)" />
<x-jet-input class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
</div>
<div class="flex items-center justify-end mt-4">
<a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
アカウントを持っていますか?
</a>
<x-jet-button class="ml-4">
登録する
</x-jet-button>
</div>
</form>
</x-jet-authentication-card>
</x-guest-layout>
ログインフォーム(2段階認証)を日本語化する
resources/views/auth/two-factor-challenge.blade.phpを下記のように変更する。
<x-guest-layout>
<x-jet-authentication-card>
<x-slot name="logo">
<x-jet-authentication-card-logo />
</x-slot>
<div x-data="{ recovery: false }">
<div class="mb-4 text-sm text-gray-600" x-show="! recovery">
認証アプリが発行するコードを入力してください。
</div>
<div class="mb-4 text-sm text-gray-600" x-show="recovery">
リカバリーコードを入力してください。
</div>
<x-jet-validation-errors class="mb-4" />
<form method="POST" action="/two-factor-challenge">
@csrf
<div class="mt-4" x-show="! recovery">
<x-jet-label value="Code" />
<x-jet-input class="block mt-1 w-full" type="text" name="code" autofocus x-ref="code" autocomplete="one-time-code" />
</div>
<div class="mt-4" x-show="recovery">
<x-jet-label value="リカバリーコード" />
<x-jet-input class="block mt-1 w-full" type="text" name="recovery_code" x-ref="recovery_code" autocomplete="one-time-code" />
</div>
<div class="flex items-center justify-end mt-4">
<button type="button" class="text-sm text-gray-600 hover:text-gray-900 underline cursor-pointer"
x-show="! recovery"
x-on:click="
recovery = true;
$nextTick(() => { $refs.recovery_code.focus() })
">
リカバリーコードを使う
</button>
<button type="button" class="text-sm text-gray-600 hover:text-gray-900 underline cursor-pointer"
x-show="recovery"
x-on:click="
recovery = false;
$nextTick(() => { $refs.code.focus() })
">
認証コードを使う
</button>
<x-jet-button class="ml-4">
ログイン
</x-jet-button>
</div>
</form>
</div>
</x-jet-authentication-card>
</x-guest-layout>
ここまで変更すれば基本的な範囲は日本語化できていると思います。
参考記事
Author And Source
この問題について(【Laravel 8】Jetstreamを使用したログイン機能を日本語化する方法について), 我々は、より多くの情報をここで見つけました https://qiita.com/wataru5326842/items/613b439945730c50e016著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .