Laravel Ver8で認証・認可を実装したけど、もうちょっとログイン周りをそれっぽくしたいよね。
今回はこんなことをしてみるよ。
・サイトのTOP画面をログイン画面にする
今はLaravelのTOP画面が表示されているが、これをいきなりログイン画面が表示されるように変更する。
・日本語化する
メニューとかメッセージを日本語化してみる。
そいじゃー今回もれっつ ららべる！
サイトのTOP画面をログイン画面にする。
TOP画面への遷移は、web.phpの中で設定されている。
Route::get('/', function () {
return view('welcome');
});
'/'で来た時、てことはTOPを指定するってことなので、この指定を変えてやれば、最初に表示する画面を設定できる。ログイン画面は/views/auth/login.blade.phpなので、これを指定してやればいい。
Route::get('/', function () {
return view('auth/login');
});
そうすると、こんな風に表示できる。
 |
|---|
ただ、これだと新規で登録できるところがない。
元々のTOP画面にあったRegisterをここに引っ越しさせよう。
<div class="flex items-center justify-end mt-4">
/* この行を追加 */
<a href="{{ route('register') }}" class="flex-1 ml-4 text-sm text-gray-700 hover:text-gray-900 underline">Register</a>
/* ここまで追加 */
@if (Route::has('password.request'))
<a class="flex-1 underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</a>
@endif
<x-jet-button class="ml-4">
{{ __('Login') }}
</x-jet-button>
</div>
表示させる文字の位置を変更するので、classにflex-1を追加しているよ。
そうするとRegister画面に戻るボタンとかもつけたくなるけど、とりあえず放っておこう。これでこのテーマはコンプリートだ！
日本語化する
これからはやっぱグローバル化っすよね！バイリンガルってか、トリプリンガルとかなんとかもう何でもかんでも他国化っすよね！
てな訳できょうび多言語化はすごくやりやすくなっている。laravelだとこんな感じで設定していくよ。
まずはconfig系を日本設定にしてしまう
app/config/app.phpは各種設定が定義されている。ここにlaravel日本化計画のネタがあるんだね。
まずは時刻表示を日本化しよう。お題に直接関係ないけどね。
/*
|--------------------------------------------------------------------------
| Application Timezone
|--------------------------------------------------------------------------
|
| Here you may specify the default timezone for your application, which
| will be used by the PHP date and date-time functions. We have gone
| ahead and set this to a sensible default for you out of the box.
|
*/
'timezone' => 'Asia/Tokyo', /* ←Asia/Tokyoに変えよう */
その下にあるlocale、これが言語の設定だ。これをjaにしてしまおう。
/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by the translation service provider. You are free to set this value
| to any of the locales which will be supported by the application.
|
*/
'locale' => 'ja', /* ←これをjaに変える */
ちなみにこの次にあるfallback_locale、これはlocaleで設定した言語に変換できなかったときに使う言語の設定なので、enのままにしておく。
その次にあるfaker_localeは、fakerでテストデータを作るときの言語の指定になる。これも日本化してしまおう。
/*
|--------------------------------------------------------------------------
| Faker Locale
|--------------------------------------------------------------------------
|
| This locale will be used by the Faker PHP library when generating fake
| data for your database seeds. For example, this will be used to get
| localized telephone numbers, street address information and more.
|
*/
'faker_locale' => 'ja_JP',
これで設定は完了だ。
日本語化ファイルを作成する
configだけ設定すれば日本語になってくれればとても楽ちんなんだけど、結局日本語の値を設定しなければならないところが、所詮コンピューター。
日本語の情報は、label.phpというファイルに設定するよ。だってラベルを日本語化するから。マニュアルだとmessage.phpになっているけど、どんな名前でも平気だよ。
label.phpは/app/resources/langの下にjaフォルダを作成して、その下に入れておく。langフォルダの下にはデフォルトでenフォルダがあるけど、MS Codeなんかでフォルダを見るとlang/enみたいにつながって表示されて、うっかりenの下にjaフォルダ作ったりしちゃうので、気を付けてね。
<?php
return [
'Email' => 'メールアドレス'
];
今回は試しなので、ひとつだけ設定するよ。
この例でいうと、'Email'がキーとなる項目、その後ろの'メールアドレス'が変換後に表示される文字列だよ。
bladeファイルを修正する
さて、label.phpでキー項目として設定する文字列って、いったい何のこと？
実は、私たちが無意識に設定しているbladeの中に、キー項目が潜んでいたのだ！ががーん！！
<div>
<x-jet-label for="email" value="{{ __('Email') }}" /> /* ←これ */
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>
{{ ('Email') }}と設定すると、ラベルに「Email」って表示されてたよね。なんとなく文字列を表示するためだけの設定みたいに思っていたけれど、実は（アンダーバー2個）が関数だったのだ！
ただ、そのままでは何の変換もしない。変換したい場合は、キー項目の前に、変換データを設定したファイル名（今回はlabel）を設定しないとならない。こんな風に。
<div>
<x-jet-label for="email" value="{{ __('label.Email') }}" /> /* ←こんな風に */
<x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>
これでログイン画面を表示すると、こうなる。
今まで「Email」って表示されていた見出しに「メールアドレス」と日本語が表示された！やったね！
さて、それじゃあ全部日本語の設定書きますか…日本語化できるようになったのに、なんか悲しい気持ちになるね。勇気のある人は、「('」を「('label.」でreplaceしちゃえ。
エラーメッセージを日本語化する
ここまで理屈がわかってしまえば、メッセージを日本語化するのもお茶の子さいさいだね。ところで、「お茶の子」って、なに？「さいさい」って、なに？うーん、謎だ。誰かチコちゃんに聞いてくれ。
パスワードを間違えると、こんなメッセージが出る。
こいつは、/app/resource/lang/en/auth.phpに設定してある。何で知っているかって？検索かけたから知っているのさ。
<?php
return [
/*
|--------------------------------------------------------------------------
| Authentication Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are used during authentication for various
| messages that we need to display to the user. You are free to modify
| these language lines according to your application's requirements.
|
*/
'failed' => 'These credentials do not match our records.',
'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
];
これを、そのままjaフォルダの下にコピーして、中身を日本語にしてしまおう。
あ、メッセージのところだけね。
<?php
return [
/*
|--------------------------------------------------------------------------
| Authentication Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are used during authentication for various
| messages that we need to display to the user. You are free to modify
| these language lines according to your application's requirements.
|
*/
'failed' => '入力されたユーザーは登録されていませんよ',
'throttle' => 'エラー回数が規定値を超えました。しばらくしてからまた来てね',
];
それでまたパスワード間違えると、こんな画面になる。
一番上の「Whoops!Something went wrong.」が残ったね。これって、どこにある？検索に次ぐ検索をして、ようやく場所がわかったよ。
/vendor/laravel/jetstream/resources/views/components/validation-errors.blade.phpだ。長げー。
@if ($errors->any())
<div {{ $attributes }}>
<div class="font-medium text-red-600">{{ __('Whoops! Something went wrong.') }}</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
この際だから、カスタマイズしちゃえ。
・「Whoops!Something went wrong.」を「whoops」というキーで設定する。
・resources/lang/en/auth.phpとresources/lang/ja/auth.phpに「whoops」キーでメッセージを設定する。
・enは今のメッセージそのまま出すよ。
まずはvalidation-errors.blade.phpだ。
@if ($errors->any())
<div {{ $attributes }}>
<div class="font-medium text-red-600">{{ __('auth.whoops') }}</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
<?php
return [
/*
|--------------------------------------------------------------------------
| Authentication Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are used during authentication for various
| messages that we need to display to the user. You are free to modify
| these language lines according to your application's requirements.
|
*/
'failed' => 'These credentials do not match our records.',
'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
'whoops' => 'Whoops!Something went wrong.',
];
一旦これでメッセージ出してみる。
英語で出たね。では、日本語も設定してみよう。
<?php
return [
/*
|--------------------------------------------------------------------------
| Authentication Language Lines
|--------------------------------------------------------------------------
|
| The following language lines are used during authentication for various
| messages that we need to display to the user. You are free to modify
| these language lines according to your application's requirements.
|
*/
'failed' => '入力されたユーザーは登録されていませんよ',
'throttle' => 'エラー回数が規定値を超えました。しばらくしてからまた来てね',
'whoops' => 'やべ！エラーあるよ',
];
これでもう一度エラーにしてみる。
日本語になった！これでおいらもバイリンガーさ！
これで何でもできそうな気分になったね。システム開発って、そういう気分が大切さ。
何かにはまったらまた記事にするよ。それまで、あでゅー！あみ！