ユーザー登録の画面
認証の画面
それぞれ英語になっているので、日本語化してみます。
試したときの環境
- macOS 11.2.3
- PHP 8.0.3
- Laravel 6.20.20
Laravel 6の環境設定
こちらの手順と同じです。
Laravel 6のインストール
“testapp”というプロジェクトにします。
composer create-project --prefer-dist laravel/laravel testapp "6.*"Laravel Debugbar をインストール
cd tasks
composer require barryvdh/laravel-debugbar --dev
php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"laravel/ui と Auth をインストール
composer require laravel/ui="1.*" --dev
php artisan ui vue --auth
npm install && npm run devデータベースの接続設定
SQLiteを使います。
データベースを作成
touch database/database.sqlite.env を編集
DB_CONNECTION=sqliteconfig/database.php を編集
'default' => env('DB_CONNECTION', 'sqlite'),マイグレーションと動作確認
php artisan migrate
php artisan serve冒頭の画面が表示されればOKですね。
出来上がったファイルを確認する
ユーザー登録と認証の画面のテンプレートはこちら
- resources/views/auth/register.blade.php
- resources/views/auth/login.blade.php
それぞれ、内容を確認します。
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Register') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
@if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
@endif
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
日本語化してみる
単に英語の部分を日本語にするだけでしたら、例えば、
<div class="card-header">{{ __('Register') }}</div>となっているところを
<div class="card-header">会員登録</div>に変えれば良さそうなものですが、Laravelには「多言語化」という機能があるので、それを使ってみます。
6.x 多言語化 Laravel
readouble.com
ロケールを日本語にする
config/app.phpでロケールが英語になっているのを日本語に変えます。
// 'locale' => 'en',
'locale' => 'ja',翻訳用のJSONファイルを作成する
resources/lang/ja.jsonを作成します。
{
}ここにヘルパ関数（__()）の引数に指定されている英語と翻訳したい日本語を対にして書いていけばいいです。
{
"Register": "会員登録"
}作ってみたJSONファイルがこちら。
{
"Login": "ログイン",
"Register": "会員登録",
"Name": "お名前",
"E-Mail Address": "E-mailアドレス",
"Password": "パスワード",
"Confirm Password": "パスワード再入力",
"Remember Me": "ログイン情報を記憶しておく",
"Forgot Your Password?": "パスワードを忘れた方はこちら"
}表示確認
configファイルを書き換えたときには、キャッシュをクリアしないと表示が変わらないことがあるので、下記のコマンドを実行しておきます。
php artisan config:cacheこのように表示されればOKですね！😃
