デザイントランスメディア Advent Calendar 2019 2日目の記事です。
AdminLTEがバージョン3になりましたね。
いつなったのかは、分かりませんが。。。
今回は、Laravel6にAdminLTEを組み込んで、管理画面のデザインの雛形を作ります。
やり方は、Laravel5の時と大きく変わらないとおもいますが、紹介していきたいと思います。
動画で見る
前提
前提として、Laravel6のインストールとユーザー認証を実装済みです。
実装方法は、前の記事を参考。
jeroennoten/Laravel-AdminLTEのインストール
composerを使ってLaravel-AdminLTEをインストールします。
composer require jeroennoten/laravel-adminlte
インストールすると、artisan adminlte が使えるようになります。
php artisan adminlte:install
実行すると、configフォルダにadminlte.phpが作成され、resources/langフォルダに、言語ファイルが作成されます。
※残念ながら日本語の言語ファイルはありません。
認証用のViewの作成
下記コマンドで、認証用のViewを作成します。
php artisan adminlte:install --only=auth_views
resources/views/authフォルダの中身が、AdminLTE用のViewに書き換えらえます。
下記は、ログインテンプレートのファイルの中身です。
resources/views/auth/login.blade.php
@extends('adminlte::login')
この行だけになっているかと思います。
実際には、vendor/jeroennoten/laravel-adminlte/resources/views/login.blade.phpのファイルが参照されています。
実際にログイン画面やユーザー登録画面などが、AdminLTEのデザインに変更されています。
下記コマンドを実行すると、/resources/views/vendor/ 下にadminlteのベースが作成されます。
基本的には、/config/adminlte.phpで結構制御が可能ですが、どうしてもベースに修正をかけたい場合は、下記コマンドでベースをview配下に持ってきて、修正をかけます。
php artisan adminlte:install --only=main_views
サンプルページの作成
ログイン後にhome.balde.phpが参照されるので、laravel-AdminLTEのREADMEにあるサンプルに書き換えます。
resources/views/home.blade.php
@extends('adminlte::page')
@section('title', 'Dashboard')
@section('content_header')
<h1>Dashboard</h1>
@stop
@section('content')
<p>Welcome to this beautiful admin panel.</p>
@stop
@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
@stop
@section('js')
<script> console.log('Hi!'); </script>
@stop
こんな感じの画面が表示されるかと思います。基本的には、これがページの雛形になります。
言語ファイルの作成と認証周りの日本語化
先ほど作成された言語ファイル(resources/lang/vendor/adminlte)に、jaが無いのでenのフォルダをコピーしてjaを作成します。
jaを作成したら、adminlte.phpファイルを日本語に変更します。
adminlte.php
return [
'full_name' => '名前',
'email' => 'メールアドレス',
'password' => 'パスワード',
'retype_password' => 'パスワード(再入力)',
'remember_me' => '入力内容を保存する',
'register' => '登録',
'register_a_new_membership' => '新規登録',
'i_forgot_my_password' => 'パスワードを忘れた方',
'i_already_have_a_membership' => 'すでに登録済みの方はこちら',
'sign_in' => 'ログイン',
'log_out' => 'ログアウト',
'toggle_navigation' => 'Toggle navigation',
'login_message' => 'ログイン',
'register_message' => '登録情報を入力してください',
'password_reset_message' => 'パスワード再設定',
'reset_password' => 'Reset Password',
'send_password_reset_link' => 'パスワードリセットメールを送信する',
'verify_message' => 'Your account needs a verification',
'verify_email_sent' => 'A fresh verification link has been sent to your email address.',
'verify_check_your_email' => 'Before proceeding, please check your email for a verification link.',
'verify_if_not_recieved' => 'If you did not receive the email',
'verify_request_another' => 'click here to request another',
];
一部まだ英語を残していますが、とりあえずはこのままで。
config/app.phpファイルの言語指定を変更します。
config/app.phpの一部抜粋
/*
|--------------------------------------------------------------------------
| 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',
configで言語設定をjaにしたので、esources/langフォルダにjaフォルダを作成して、言語ファイルを配置すると、jaフォルダの言語ファイルが読み込まれます。
もし、言語ファイルが存在しない場合は、configのfallback_localeに設定されている言語のファイルが読み込まれます。
今回、configを変更するようにしていますが、.envにlocalを記載して読み込みをさせても良いかと思います。
config/adminlte.phpの設定
config/adminlte.phpの設定については、別記事にまとめたので下記を参照してください。
ここまでで、Laravel6にAdminLTEの基本的な組み込みが完了しました。
ちょっと、言語ファイルが中途半端だったりしますが、必要に応じて変更していただければと思います。config/adminlte.phpの内容については、別途記事を投稿したいと思います。 → 書きました。