Laravelへの移行（２）管理画面のスターターパッケージ　Laravel Boilerplate

前回ではセッションを共有することで、現行のPHPのプログラムと新規のLaravelのプログラムの行き来が可能となりました。もう現行に縛られることはないので、新規の画面のルックも最新のレスポンシブ対応のBootstrapを取り入れてみます。管理画面の移行を前提に、Laravelを使用したBootstrapの管理画面のスターターパッケージをいくつか紹介します。今回はLaravel Boilerplateをご紹介します。

デモ

Laravel Boilerplateは、現在Laravel6.xと7.xの２つのバージョンがあります。

ウェブサイトは、https://laravel-boilerplate.com/index.html

デモサイトがあるので早速見てみましょう。

https://demo.laravel-boilerplate.com/login

以下の情報でログインできます。

管理者:
User: admin@admin.com
Password: secret

ユーザー:
User: user@user.com
Password: secret

ログイン画面は、

管理者としてログインすると管理画面となりますが、以下はそのユーザー管理画面、

とちょっと日本語変だけれど日本語にも対応しています。

ルックは、以下のBoostrapバージョン４対応のCore UIを使用しています。これを見るといろいろなことができそうでワクワクしますね。

追加されたcomposerのパッケージ

インストールして標準装着されている機能をチェックしたいなら、composer.jsonを見るのが手っ取り早いです。

以下は、Laravel 7.xのデフォルトのcomposerのrequireのセクションです。

...
    "require": {
        "php": "^7.2.5",
        "fideloper/proxy": "^4.2",
        "fruitcake/laravel-cors": "^1.0",
        "guzzlehttp/guzzle": "^6.3",
        "laravel/framework": "^7.0",
        "laravel/tinker": "^2.0",
        "laravel/ui": "^2.1"
    },
...

以下は、Laravel boilerplateの同様なセクションです。

...
   "require": {
        "php": "^7.2.5",
        "albertcht/invisible-recaptcha": "^1.9",
        "arcanedev/log-viewer": "7.x",
        "darkghosthunter/laraguard": "^2.0",
        "fideloper/proxy": "^4.2",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^6.3",
        "jamesmills/laravel-timezone": "^1.9",
        "lab404/laravel-impersonate": "^1.6",
        "langleyfoxall/laravel-nist-password-rules": "^4.1",
        "laravel/framework": "^7.22.4",
        "laravel/socialite": "^4.3",
        "laravel/tinker": "^2.0",
        "laravel/ui": "^2.0",
        "livewire/livewire": "^1.0",
        "rappasoft/laravel-livewire-tables": "^0.1",
        "rappasoft/lockout": "^2.1",
        "spatie/laravel-activitylog": "^3.14",
        "spatie/laravel-permission": "^3.11",
        "tabuna/breadcrumbs": "^1.0"
    },
...

いくつか追加されたパッケージを紹介すると、

• arcanedev/log-viewer

  Laravelのログも含めて、作成されたログファイルを管理画面でログのメッセージのレベルにマッチした色付きで閲覧できるようです。

• darkghosthunter/laraguard

  「2ファクタ認証」のパッケージです。最初から必要でないかもしれないですが、オプションとしてあるのはいいですね。

• lab404/laravel-impersonate

  これは管理者があたかもユーザーになりすますためのパッケージです。すでにLaravelにその機能あったような。

• rappasoft/laravel-livewire-tables

  これは以前紹介したjqueryのdatatablesのlivewire版です。

• spatie/laravel-activitylog

  こちらは以前紹介した、DBの変更履歴記録と同様なパッケージです。

• spatie/laravel-permission

  これは上に掲載したユーザー管理の画面において、それぞれのユーザーにロール（役割）を割り当てるためのパッケージです。それにより、ログインした管理者がどの画面にアクセスが可能かを操作します。結構なパッケージです。

• tabuna/breadcrumbs

  このブログでいつか紹介しようと思っていたのですが、パンくず表示のための、とても有名な、https://github.com/davejamesmiller/laravel-breadcrumbsパッケージがありました。しかし、残念なことに作者の都合で今年更新ストップとなりました。しかし、嬉しいことに、違うプログラマがそれをもとに新たなパッケージを作成したのがこれです。まだ使用したことありませんが、いつか紹介したいです。

追加されたnode-jsのパッケージ

今度は、jsのパッケージの方を見てみます。

composerと同様に、laravel 7.xでは、

...
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.11"
    }
...

Laravel Boilerplateでは、

...
    "devDependencies": {
        "@coreui/coreui": "^3.0.0",
        "@coreui/icons": "^1.0.1",
        "@fortawesome/fontawesome-free": "^5.12.1",
        "@popperjs/core": "^2.0.6",
        "alpinejs": "^2.3.5",
        "axios": "^0.19",
        "bootstrap": "^4.5.0",
        "cross-env": "^7.0",
        "jquery": "^3.5.1",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "perfect-scrollbar": "^1.5.0",
        "popper.js": "^1.16.1",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "sweetalert2": "^9.8.2",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
...

こちらも追加されたパッケージを見てみましょう。

• @coreui/coreui、@coreui/icons

  テンプレートとして使用しているCore UIのパッケージです。なるほどnpmで管理するのですね。アイコンも1500以上あるようです。ちなみに、Core UIを使用しているのは、管理者画面の部分のみです。

• @fortawesome/fontawesome-free

  これは非常に有名なアイコンのライブラリです。有料版もありますが、ここでは無料版を使用です。先の、Core UIのアイコンと合わせて膨大な数のアイコンから選択可能となります。

• alpinejs

  こちらはLivewireの作者のjsフレームワークです。日本語のマニュアルもありますね。

• sweetalert2

  こちらは、jsのalert()のベターバージョンのようですね。興味あります。

さて、これ採用できそう？

機能が盛りだくさん、というのが印象です。しかし使いこなすには、彼ら独自のディレクトリの構造（Domainなど）があり、すべて理解する必要あり時間がかかりそうです。かと言って、要らない機能のパッケージを外して簡単化するのは、影響する部分を考えると難しそうだし。

また、resources/viewsのディレクトリの構造やその中のbladeファイルを見ると、コンポーネントとか使用してとてもフレキシブルにしていますが、細分化しすぎの感がありこれまた理解に時間がかかりそうです。また、多言語対応なので、国際的なプロジェクトの作成には良いかもしれませんが、日本語だけしか必要ないとなると複雑すぎです。

あと、管理画面のメニューを管理する機能があればよいのですが、残念ながらありません。

これを採用するかどうかは別として、知らないパッケージがどう使われているかはとても参考になりそうで、時間かけて理解するのは価値はあります。ということで次回は違うLaravelのスターターパッケージ（？）を見てみます。