【Laravel11 + MoonShine】管理画面構築

Laravel

Laravel Newsで紹介されていた、Laravel用の管理画面構築パッケージ「MoonShine」を使って管理画面を構築してみました。

Just a moment...
laravel-news.com

MoonShineとは

「MoonShine」を辞書で引くと

[名]

  1. 1月光（moonlight）
  2. 2たわごと；たわけた考え
  3. 3((米略式))（月夜に作る）密造［密輸入］酒，（南部農村の）密造バーボンウイスキー
goo辞書 > 英和・和英辞書 > 「moonshine」の意味

となっています。

▼MoonShineパッケージの名前の由来

# History of the name

What does MoonShine stand for? It’s not exactly “moonlight”: my idea is the name “moonshine”. Literally, it’s the independent making of a drink under illegal conditions in the dead of night. So I spent my spare time (mostly at night) developing this admin panel, making a quality product with heart, for my own use as well as for friends. Everything is already ready for use in your projects, created documentation describing the order of installation, customization and features. I invite interested users to use and develop MoonShine together.

Welcome | MoonShine

▼自動翻訳

# 名前の歴史
MoonShine は何の略ですか?正確には「月光」ではありません。私のアイデアは「密造酒」という名前です。文字通り、真夜中に違法な条件下で自主的に飲み物を作ることです。そこで、私は空いた時間 (ほとんど夜) を費やしてこの管理パネルを開発し、自分用だけでなく友人のためにも、心を込めて高品質の製品を作りました。すべてがすでにプロジェクトで使用する準備ができており、インストール、カスタマイズ、機能の順序を説明するドキュメントが作成されています。興味のあるユーザーは、一緒に MoonShine を使用して開発することをおすすめします。

つまり、「密造酒」のように、夜な夜な作ったパッケージということです。

泣けてきますね。😂

MoonShine2.xの必用要件

  • PHP8.1以降
  • Laravel10.23以降
  • Composer2.x

当記事の前提条件

  • MoonShine2.13
  • Laravel Framework 11.7
  • PHP8.2以降
  • Composer2.x
  • Ubuntu上で作業を進めていきます
  • DBはSQLiteを使っていきます

これからやること

  • 構築ポリシーの確認
  • Laravel新規プロジェクト作成
  • LaraveJetstreamインストール
  • MoonShineインストール
  • MoonShineユーザー（管理ユーザー）作成
  • 管理画面ログイン
  • 新規ページ作成
  • メニューへのページ追加

構築ポリシーの確認

▼一般ユーザー

  • ◎：/register から登録可能
  • ◎：/login からログイン可能
  • ✖：管理ユーザー登録コマンドでは登録不可
  • ✖：/admin/login からはログイン不可

▼管理ユーザー

  • ✖：/register からは登録不可
  • ✖：/login からはログイン不可
  • ◎：管理ユーザー登録コマンドで登録可
  • ◎：/admin/login からログイン可

Laravel新規プロジェクト作成

新規プロジェクト「moonshine-app」を作成します。

composer create-project laravel/laravel:^11 moonshine-app

プロジェクトフォルダに入ります。

cd moonshine-app

Laravel Jetstreamインストール

一般ユーザーのログイン機構としてLaravel Jetstreamをインストールします。

composer require laravel/jetstream

Laravelで使えるようにします。

php artisan jetstream:install

スタックの選択は好きに選んで構いません。

ここでは、

  • Vue with Inertia
  • API Suport
  • Email Verification
  • PHP Unit

を選択しています。

最後に、マイグレーションをするか訊かれるので

「Yes」を選択します。

一旦、ビルトインサーバーを起動して

ブラウザで動作確認をしてみます。

php artisan serve

Viteも起動します。

npm run dev

WEBブラウザで http://localhost:8000/ にアクセスします。

Laravelのデフォルトページが表示されました。

「Register」からユーザー登録していきます。

適当に入力して「REGISTER」ボタンをクリックします。

登録完了するとダッシュボードに転送されます。

一応、データベースを確認しておきます。

テーブル「users」にレコードが１件作成されました。

MoonShineインストール

では、本題のMoonShineをインストールしていきます。

が、どのファイルが更新されるのかを知るために、

一旦、Gitでコミットしておきます。

git init
git add .
git commit -m "first commit"

MoonShineをインストールします。

composer require moonshine/moonshine

Laravelで使えるようにします。

php artisan moonshine:install

「public/storage」のエラーは無視して構いません。

「Install migrations?」と訊かれるので「Yes」を選びます。

「Create Super User?」と訊かれるので「Yes」を選びます。

先程とは異なるユーザーを登録します。

最後にGithubリポジトリでスターしてくれと頼まれます。

「Yes」か「No」を選んでください。

※後から管理ユーザーを作成する場合は

php artisan moonshine:user

で作成できます。

インストールされたパッケージの確認

Composerによりインストールされた依存パッケージは

次の通りです。

Installing dependencies from lock file (including require-dev)
Package operations: 4 installs, 0 updates, 0 removals
  - Installing openspout/openspout (v4.24.0): Extracting archive
  - Installing rap2hpoutre/fast-excel (v5.4.0): Extracting archive
  - Installing lee-to/laravel-package-command (0.9.1): Extracting archive
  - Installing moonshine/moonshine (2.13.1): Extracting archive
1 package suggestions were added by new dependencies, use `composer suggest` to see details.

作成・更新されたファイルの確認

「app/MoonShine」

「app/Providers/MoonShineServiceProvier.php」

が追加されています。

「bootstrap/providers.php」に追記されています。

「config/moonshine.php」が作成されています。

「lang/vendor/moonshine/」が作成されています。

「public/vendor/moonshine/」が作成されています。

データベースの確認

一応、データベースを確認してみます。

次の４つのテーブルが作成されています。

  • moonshine_socialites
  • moonshine_user_roles
  • moonshine_users
  • notifications

ロールとユーザーだけレコードがあります。

以上から、既存プロジェクトへの導入についても

ほぼ影響なしと思われます。

実際、筆者の別の「密造酒」プロジェクトに追加導入してみたら

既存プロジェクトへの悪影響なく動きました。

管理画面ログイン

WEBブラウザで http://localhost:8000/admin/login にアクセスします。

先程作成した管理ユーザーでログインします。

※「Username」はメールアドレスを入力します。

管理画面のダッシュボードに転送されます。

新規ページ作成

新しい管理ページを作成していきます。

ユーザー一覧を表示する簡単なページを作成してみます。

php artisan moonshine:page

クラス名は「Users」、タイプは「Custom」としました。

「app/MoonShine/Pages/Users.php」が作成されました。

このファイルを編集します。

まずは宣言を追記します。

use App\Models\User;
use MoonShine\Components\TableBuilder;
use MoonShine\Fields\Text;
use MoonShine\TypeCasts\ModelCast;

ページのタイトルは固定の場合はプロパティで定義できます。

    protected string $title = 'Users in the Guild'; 
    protected string $subtitle = '～ The Brave Adventurers ～';

動的な場合は、メソッド内で記述します。

    public function title(): string 
    {
        return $this->title ?: 'CustomPage';
    }
 
    public function subtitle(): string
    {
        return $this->subtitle ?: 'Subtitle';
    }

ページの内容を構成するコンポーネントは

「components()」メソッド内のreturnの配列内で定義します。

    public function components(): array
    {
        return [
            TableBuilder::make(items: User::paginate(5))
                ->fields([Text::make('ID'), Text::make('Name'), Text::make('Email')])
                ->cast(ModelCast::make(User::class))
        ];
    }

完成形は次のような感じです。

<?php

declare(strict_types=1);

namespace App\MoonShine\Pages;

use App\Models\User;
use MoonShine\Pages\Page;
use MoonShine\Components\MoonShineComponent;
use MoonShine\Components\TableBuilder;
use MoonShine\Fields\Text;
use MoonShine\TypeCasts\ModelCast;

class Users extends Page
{
    protected string $title = 'Users in the Guild'; 
    protected string $subtitle = '～ The Brave Adventurers ～'; 

    /**
     * @return array<string, string>
     */
    public function breadcrumbs(): array
    {
        return [
            '#' => $this->title()
        ];
    }

    public function title(): string
    {
        return $this->title ?: 'Users';
    }

    /**
     * @return list<MoonShineComponent>
     */
    public function components(): array
    {
        return [
            TableBuilder::make(items: User::paginate(5))
                ->fields([Text::make('ID'), Text::make('Name'), Text::make('Email')])
                ->cast(ModelCast::make(User::class))
        ];
    }
}

メニューへのページ追加

「app/Providers/MoonShineServiceProvider.php」

の「menu()」メソッド内に追記します。

            MenuItem::make('Users', \App\MoonShine\Pages\Users::make('Users', 'users')),

WEBブラウザの管理ページダッシュボードを再読み込みします。

画面が小さい時は右上のハンバーガーメニューをクリックします。

メニューに「Users」が表示されるのでクリックします。

※Javascript制御のレスポンシブデザインなので、

※ウィンドウの大きさによってレイアウトが変わる。

※画面が大きい時は左のサイドメニューに表示される。

ユーザー一覧が表示されました。

もう少しユーザーを150件程追加して挙動の確認をしてみましょう。

ターミナルでtinkerを起動します。

php artisan tinker

Psy Shellのプロンプトが表示されたら、

次のコマンドを実行します。

use App\Models\User;
User::factory()->count(150)->create();

生成したレコードのモデルが表示されるので、

[q」キーを押してキャンセルします。

WEBブラウザのユーザー一覧画面を再読み込みします。

５件ずつのページネーションが反映されていますね。

今回は以上です。

余談

最初、ドキュメント通りにTableBuilderを実装していたら、

TypeErrorになってしまい、MoonShineのコードを読み解いてみたら

ドキュメント通りの実装になっておらず、

ドキュメントと実装のどちらが正なのか判断つかないので、

面倒だということもあり、とりあえずバグ報告をしたのです。

ところが、ドキュメントが間違っているので直して欲しいと

頼まれたので、面倒だなーと思いつつ修正してPRしたら

ソッコーでマージされました。

Update table builder 20240513 by macocci7 ?? Pull Request #476 ?? moonshine-software/doc
This PR is associated with:moonshine-software/moonshine#944The automatically translated content of the English version h...
github.com

ドキュメントの修正やリファクタリングの

ヒューマンリソースが足りないようなので、

気付いた点があれば、皆さんもどうぞ。

※ドキュメントは英語版とロシア語版のみです。

※ロシア語版は英語版の自動翻訳貼り付けで充分対応できます。

  • 0
  • 0
  • 0
  • 0

コメント

タイトルとURLをコピーしました