5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Laravel】で、filamentの管理パネルって何?と

Last updated at Posted at 2023-08-20

前提

  • 2.x系の前提
  • 2ミリぐらい調べた人向け
  • filamentの使い方やtipsではなく、そもそもなんだよってのを抽象的に書いていきます

そもそもなにか

alpinejs,livewire,tailwindで作られている最強管理画面生成パッケージFilament

chatGPT引用

Laravel Filamentは、データの表示、編集、削除、検索などの一般的な管理作業をサポートするコンポーネントを提供することが目的です。これにより、開発者は簡単にカスタムの管理ダッシュボードを作成し、アプリケーションの管理業務を効率的に行うことができます。

要は管理画面を効率的にUIと機能セットで作れるもの。

デモページ

filamentの構成

ドキュメントを見た際、恐らく管理パネルってなんだ?という所から始まると思います。
管理パネルとは、filamentそのものを指しています(filament/filament)
管理画面を作る仕組みのようなイメージ

管理パネルの中にそれぞれ独立した

  • フォームビルダー(filament/forms)
  • テーブルビルダー(filament/tables)
  • 通知(filament/notifications)

が内包されています。↓のようなイメージ

管理パネルの各機能内でフォームビルダーやテーブルビルダーが組み込まれています。
ドキュメント内で「管理パネルを使用している場合は〜」という文言は、
管理画面を作る仕組みを使っている場合は〜」という意味合いになります。
主にResources機能を指している場合が多いです。

各パッケージ概要

フォームビルダー

phpプログラムからフォームを生成するライブラリ、バリデーションの指定などもセットで行う

サンプル

Group::make()->schema([
    Card::make()->schema([
        DatePicker::make('date')
            ->label('日付')
            ->required()
            ->default(now()->subDay()->setTime('00', '00')),
        TextInput::make('title')
            ->label('タイトル')
            ->required()
            ->maxLength(255),
        Textarea::make('content')
            ->label('今日の良かった事')
            ->required()
            ->maxLength(65535),
    ])->columnSpan(2),
])->columns(3),

image.png

テーブルビルダー

phpプログラムからテーブルを生成するライブラリ。
独自の検索フィルターが必要な場合はフォームビルダーも必要

サンプル

テーブルビルダー機能のカラムを指定するコード抜粋

テーブル列
TextColumn::make('start_date')->label('日付')->date(),
TextColumn::make('title')->label('タイトル'),
TextColumn::make('content')->label('内容')->limit(50),

image.png

フィルター
Filter::make('keyword')
    ->form([
        TextInput::make('keyword')->label('キーワード')->lazy(),
    ])
    ->query(function (Builder $query, array $data): Builder {
        return $query
            ->when(
                $data['keyword'],
                fn (Builder $query, $keyword): Builder => $query->where('title', 'like',
                    '%'.$keyword.'%')->orWhere('content', 'like', '%'.$keyword.'%')
            );
    })->indicateUsing(function (array $data): ?string {
        return ! empty($data['keyword']) ? 'キーワード: '.$data['keyword'] : null;
    })

image.png

通知

各ロジックの終了後や例外などに応じて差し込み、アラートを右上に数秒表示させる。
管理パネルのAction機能と組み合わせる事が多い。

サンプル

return Notification::make()
    ->success()
    ->title('処理完了')->send();

image.png

Actionとの連携
Action::make('処理')->color('success')
    ->action(function () {
        ...ロジック
        return Notification::make()
            ->success()
            ->title('処理完了')->send();
    })

ダウンロード.gif

まとめ

管理パネル = Resourcesなどの管理画面を作る仕組みの機能の事 で、
Resourcesの作成機能や編集機能内にフォームビルダー、通知などが組み込まれている

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?