スターターパッケージ on ララジャパン

Laraスターター - Bootstrap 5

Mon, 14 Mar 2022 04:10:32 +0900

以前に「Laravelへの移行」と称してLaravelのスターターパッケージを２つ紹介しました。スターターパッケージとはすでにある程度デザインや機能が揃っていて、時間がかかる最初のプロジェクトの立ち上げをかなり減少してくれるものです。そからまだ２年も経過していないのですが、その間Bootstrapは4から5になるし、Tailwindが知られてくるようになりつつあり、フロントエンドのフレームワークの更新の時期となりました。今回は、それらを簡単にインストールできるLaraスターターの紹介です。

Laraスターターのインストール

早速インストールしてみます。

Laravelのプロジェクトをインストールします。以下でLaravel 8.x、Laravel 9.xのインストールの説明あります。認証のパッケージのインストールはLaraスターターに含まれているのでインストールの必要はないです。
Laravel 9.xのインストール
Laravel 8.xのインストール
Laraスターターのパッケージをインストールします。
```
$ composer require laraveldaily/larastarters --dev
```
Laraスターターのインストールを実行します。
```
$  php artisan larastarters:install
```
この実行では以下のような選択が問われます。最初の質問は、「どのスターターキットを使用しますか？」今回は手堅くLaravel UI (Bootstrap)を選択します。次の質問は、「どのテーマーを使用しますか？」 Bootstrap 5使用のvoltを選びます。
npmのパッケージをインストールします。
```
$ npm install && npm run dev
```

Volt

インストールが完了したらブラウザで見てみます。

なかなかいいデザインですね。

Laraスターターで使用されているのは以下の無料版です。スターターのためにこれをLaravelのブレードとしてくれました。感謝です。

https://github.com/themesberg/volt-bootstrap-5-dashboard

有料版は以下で69ドルで販売されています。

https://demo.themesberg.com/volt-pro/index.html

無料版と有料版は何が違うというと、

コンポーネントの数が1000でなく100ですね。しかしたいていはそれくらい事足ります。

最後に

Laraスターターを作成したお方は、Laravel業界では誰でも御存知のLaravel DailyのYouTuberです。

https://www.youtube.com/c/LaravelDaily

昔はLaravelのブログを毎日書くことから始め、現在は毎日You Tubeのビデオを作成しています。１週間に１回ブログを書けるかどうかの私にはとても真似ができません。ちなみに、彼（Povilas Korop）はリトアニア (Lithuania)の人です。昔はドイツやロシアに占領されたもののソビエトの崩壊後民主主義のEU加盟国です。

Laravelへの移行（３）管理画面のスターターパッケージ　Laravel-AdminLTE

Sun, 06 Sep 2020 01:17:16 +0900

前回に引き続いて、Laravelを使用したBootstrapの管理画面のスターターパッケージの紹介です。いかに新規のプロジェクトの管理画面を速く立ち上げるかが目的です。前回は、Core UIをベースにしたパッケージでしたが、今度は、Admin LTEをベースにしたものです。両方ともBootstrapのバージョン４をもとにしています。

インストール

Laravel Boilerplateでは、Laravelそのものも含むzipファイルをダウンロードしてインストールという形式でしたが、Laravel-AdminLTEでは、まずLaravelのプロジェクトをコマンドラインで作成してから、Laravel-AdminLTEのパッケージjeroennoten/laravel-adminlteをcomposerでプロジェクトにインストールします。その際には、依存するパッケージalmasaeed2010/adminlteもインストールされます。 almasaeed2010/adminlteのパッケージがAdmin LTEの無料版のCSSフレームワークで、jeroennoten/laravel-adminlteのパッケージがLaravelのプロジェクトにおいて、管理画面のbladeファイル、レイアウト設定やメニューなどの機能を提供します。

ルック

残念ながらLaravel-Admin LTEのデモサイトがないのですが、以下のような感じです。

ログイン画像

管理画面画像

config/app.phpで設定が必要ですが、日本語も対応しています。

Admin LTEに関しては、こちらでいろいろなUIを閲覧できます。

設定

Laravel Boilerplateと比べて、デフォルトでインストールされている機能は少ないですが、以下のベーシックなレイアウトの設定が独自のconfig/adminlte.phpのファイルから簡単にできます。

タイトル
ファビコン
ロゴ画像
ユーザーメニュー
これは、画面右上のログインしたユーザー名（ここではkenji）をクリックしたときの表示。

レイアウト

例えば、上の画面の設定では、固定のナビバーとフッターを指定しています。

  'layout_topnav' => null,
  'layout_boxed' => null,
  'layout_fixed_sidebar' => false,
  'layout_fixed_navbar' => true,
  'layout_fixed_footer' => true,

認証の画面表示のCSSクラス
body、content、sidebar、topnavなどのcssクラス
サイドバーのルック
ユーザーのプロフィールやダッシュボードやログアウトなどのURL
Laravel MIXの使用
サイドバーのメニューの指定
配列で指定できます。階層もOKです。以下は上のメニューの設定の一部。
```
                                    
```
style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;">'menu' => [ [ 'text' => 'search', 'search' => true, 'topnav' => true, ], [ 'text' => 'blog', 'url' => 'admin/blog', 'can' => 'manage-blog', ], [ 'text' => 'pages', 'url' => 'admin/pages', 'icon' => 'far fa-fw fa-file', 'label' => 4, 'label_color' => 'success', ], ['header' => 'account_settings'], [ 'text' => 'profile', 'url' => 'admin/settings', 'icon' => 'fas fa-fw fa-user', ], [ 'text' => 'change_password', 'url' => 'admin/settings', 'icon' => 'fas fa-fw fa-lock', ], [ 'text' => 'multilevel', 'icon' => 'fas fa-fw fa-share', 'submenu' => [ [ 'text' => 'level_one', 'url' => '#', ], style="color:#f92672">...


サイドバーのメニューのフィルター。権限によりメニューのオン・オフが可能となります。
プラグイン。datatablesやselect2などのjsの指定。


これら設定は、以下の場所で詳細がドキュメントされています。
https://github.com/jeroennoten/Laravel-AdminLTE#6-configuration
採用できそう？
気に入ったのは、基本的な設定が簡単にconfigファイルで行えることです。また、Laravel Boilerplateと違って、独立したパッケージとして提供されているので、将来のパッケージの更新の面では管理しやすいと思います。



Laravelへの移行（２）管理画面のスターターパッケージ　Laravel Boilerplate
Sun, 30 Aug 2020 09:32:09 +0900
前回ではセッションを共有することで、現行の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のスターターパッケージ（？）を見てみます。

スターターパッケージ on ララジャパン

Laraスターター - Bootstrap 5

Laraスターターのインストール

Volt

最後に

Laravelへの移行（３）管理画面のスターターパッケージ Laravel-AdminLTE

インストール

ルック

設定

採用できそう？

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

デモ

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

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

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

Laravelへの移行（３）管理画面のスターターパッケージ　Laravel-AdminLTE

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