Laravel6にLaravel-AdminLTEを組み込む

AdminLTE
2019.12.02

デザイントランスメディア 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のデザインに変更されています。

AdminLTE login

下記コマンドを実行すると、/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

AdminLTE dashboard

こんな感じの画面が表示されるかと思います。基本的には、これがページの雛形になります。

言語ファイルの作成と認証周りの日本語化

先ほど作成された言語ファイル(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の内容については、別途記事を投稿したいと思います。 → 書きました。

スポンサーリンク
タイトルとURLをコピーしました