Laravel5.4.6にAdminLTEを適用

LaravelにAdminLTEを適用させる手順を記載する。

AdminLTEとは、レスポンシブな管理画面用テンプレートで、非常に有用なので、既存のLaravelプロジェクトに導入してみた。

前提：Welcomeページの表示まで完了
CentOS7にLaravel5.3のインストールとWelcomeページ表示

上記の内容まで、できていること前提で進める。

5.4.6にアップグレード

composer.jsonを以下のように修正。

...
...
"laravel/framework": "5.4.*",
...
...

以下、updateコマンドで5.3から5.4にアップグレードできた（と思う）。

$ composer update

バージョンの確認

$ php artisan --version
Laravel Framework 5.4.6

jeroennoten/Laravel-AdminLTE

以下のリンク(github)を参考にAdminLTEの導入です。

jeroennoten/Laravel-AdminLTE

手順は、ほとんどREADME.md通り。（一部英語のまま）

1. Installation

composerを使って、必要なパッケージをインストール:

$ composer require jeroennoten/laravel-adminlte

config/app.phpのprovidersの部分に下記サービスプロバイダーを追加:

JeroenNoten\LaravelAdminLte\ServiceProvider::class,

public assetsを公開:

$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets

2. Updating

jeroennoten/laravel-adminlteパッケージの更新:

$ composer update jeroennoten/laravel-adminlte
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating autoload files
> Illuminate\Foundation\ComposerScripts::postUpdate
> php artisan optimize
Generating optimized class loader
The compiled services file has been removed.

public assetsを公開するためにすでにファイルが存在している場合は--forceオプションで実行:

$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets --force
Copied Directory [/vendor/jeroennoten/laravel-adminlte/resources/assets] To [/public/vendor/adminlte]
Publishing complete.

3. The make:adminlte artisan command

$ php artisan make:adminlte

4. Configuration

設定ファイルの作成:

$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config
Copied File [/vendor/jeroennoten/laravel-adminlte/config/adminlte.php] To [/config/adminlte.php]
Publishing complete.

AdminLTE用の設定ファイル/config/adminlte.phpができあがる。

5. 翻訳（多言語対応）

下記コマンドで、テンプレートの多言語対応用ファイルを準備:

$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=translations

/resources/lang/vendor/adminlte/en
/resources/lang/vendor/adminlte/de
/resources/lang/vendor/adminlte/es
などは自動で生成されるが、日本語用ディレクトリ（ja）は自分で作成。
/resources/lang/vendor/adminlte/ja
内容 ja/adminlte.phpは下記のような感じ:

<?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'           => 'ナビゲーション切り替え',
    'login_message'               => 'サインインしてセッションをスタート',
    'register_message'            => '新規登録',
    'password_reset_message'      => 'パスワードをリセット',
    'reset_password'              => 'パスワードをリセット',
    'send_password_reset_link'    => 'パスワードリセット用のリンクを送る',
];

言語の設定の確認

/config/app.php:

//'locale' => 'en',
'locale' => 'ja',

6.表示

URL/homeにアクセスすると、ログイン画面に飛ばされた。

サインインが窮屈なので、デザインの修正をする。

7. Customize views

viewファイルを詳しくカスタマイズしたいので
If you need full control over the provided views, you can publish them:

$ php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=views

今回は、ログイン画面ということで、下記ファイルを修正:
/resources/views/vendor/adminlte/login.blade.php

                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button style="font-size:12px;" type="submit"
                                class="btn btn-primary btn-block btn-flat">{{ trans('adminlte::adminlte.sign_in') }}</button>
                    </div>
                    <!-- /.col -->

button要素にstyle="font-size:12px;"を追加した。ほんとはCSSでやると良い。