mcpField
F
filament-pro

filament-pro

github.com/marcelorodrigo開発191.2k 回インストール8 週間前に更新
リポジトリ

filament-pro について

Filament v5は、宣言的なPHP APIでサーバー駆動の管理パネルを構築するLaravelフレームワークです。CRUD画面やダッシュボードを作るチーム向けで、Livewire v4によるリアクティブな操作をJavaScriptなしで実現します。

主な機能

  1. 01Eloquentモデル向けCRUDリソース
  2. 02スキーマベースのフォームとテーブル
  3. 03Livewire v4のリアクティブコンポーネント
  4. 04ダッシュボードウィジェットとチャート
  5. 05モーダルやウィザードを使うアクション
  6. 06認可とマルチテナントに対応

活用シーン

  1. 01アプリケーションの管理画面の構築
  2. 02CMSまたはCRM画面の作成
  3. 03製品、注文、在庫の管理
  4. 04マルチテナントSaaS管理パネルの開発

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/marcelorodrigo/agent-skills --skill filament-pro

インストール後、Claude Code で/filament-proを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
actions.md
authorization.md
examples.md
forms.md
infolists.md
notifications.md
resources.md
schemas.md
tables.md
testing.md
widgets.md

詳細

Filament v5

Schemas と Livewire v4 のリアクティビティを備えた、Filament v5 のサーバー駆動型 UI を使用して強力な Laravel 管理パネルを構築できます。

概要

Filament v5 は、宣言型の PHP API を通じて、完全な CRUD インターフェース、フォーム、テーブル、ダッシュボードコンポーネントを提供する Laravel 管理パネルフレームワークです。Livewire v4 を基盤としており、JavaScript を記述せずにリアルタイムのリアクティビティを実現します。

主な概念
  • PanelProvider：管理パネルを定義する中心的な設定クラス
  • Resources：Eloquent モデル用の自動 CRUD インターフェース
  • Schemas：宣言型の UI コンポーネント（フォーム、テーブル、情報リスト）
  • Actions：モーダルとバックエンドロジックを備えたインタラクティブなボタン
  • Widgets：データ可視化用のダッシュボードコンポーネント
システム要件
  • Laravel 11.28+
  • PHP 8.2+
  • Livewire v4
  • Node.js 18+
  • Tailwind CSS v4.1+

インストール

Composer から Filament をインストールし、パネルをスキャフォールドします。

composer require filament/filament:"^5.0" -W
php artisan filament:install --scaffold
npm install && npm run dev
php artisan make:filament-user

これにより、パネルプロバイダー、ディレクトリ構成、構築を始めるために必要なアセットが作成されます。

ディレクトリ構成
app/
  Filament/
    Resources/          # CRUD resources with forms and tables
    Pages/              # Custom pages
    Widgets/            # Dashboard widgets
  Providers/
    Filament/
      AdminPanelProvider.php

主な概念

パネル設定

PanelProvider は管理パネルのエントリーポイントです。以下を設定します。

  • 識別情報：ID、パス、ブランディング（名前、ロゴ、色）
  • 検出：リソース、ページ、ウィジェットの自動検出
  • ミドルウェア：セッション、認証、カスタムミドルウェア
  • テナント管理：SaaS アプリケーション向けのマルチテナント設定
リソース

リソースは以下を通じて、完全な CRUD インターフェースを提供します。

  • フォーム：20 種類以上のフィールドタイプを備えたスキーマベースのフォーム（TextInput、Select、DatePicker、FileUpload、RichEditor など）
  • テーブル：列、フィルター、並べ替え、アクションを備えたデータテーブル
  • ページ：List、Create、Edit、View ページの自動生成
  • リレーション：モデル間のリレーションを扱うリレーションマネージャー
フォーム

フォームでは、フィールドを PHP オブジェクトとして宣言するスキーマベースのアプローチを使用します。

  • 入力フィールド：テキスト、セレクト、チェックボックス、トグル、日付／時刻ピッカー
  • メディア：バリデーション付きのファイルと画像のアップロード
  • 複合フィールド：リッチテキストエディター、リピーター、ビルダー
  • レイアウト：グリッド、セクション、タブ、ウィザード
  • バリデーション：Laravel の組み込みバリデーションルール
テーブル

テーブルでは、幅広いカスタマイズが可能なデータを表示できます。

  • 列：テキスト、バッジ、アイコン、画像、色
  • フィルター：セレクト、三値、カスタムのフィルターロジック
  • アクション：行ごとのアクション、一括アクション、ヘッダーアクション
  • 機能：検索、並べ替え、ページネーション、グループ化
アクション

アクションは、以下を実行するインタラクティブなボタンです。

  • モーダル：データ収集用のフォームダイアログ
  • 確認：破壊的なアクションの確認
  • ウィザード：複数ステップのプロセス
  • 通知：完了後のユーザーフィードバック
ウィジェット

ダッシュボードウィジェットには以下があります。

  • 統計概要：傾向とスパークラインを備えた指標カード
  • チャート：Chart.js を使用した折れ線、棒、円のチャート
  • テーブル：最近のレコードを表示するデータテーブル
テスト

Filament は、Livewire のテストヘルパーと Pest PHP を使用します。

  • ページテスト：一覧、作成、編集、表示ページの機能
  • フォームテスト：バリデーション、状態管理、送信
  • テーブルテスト：検索、フィルター、並べ替え、アクション
  • 認可テスト：アクセス制御と権限
認可

以下を通じてアクセスを制御します。

  • パネルアクセス：パネルレベルのアクセスを制御する FilamentUser コントラクト
  • ポリシー：リソースレベルの権限を制御する Laravel ポリシー
  • フィールドの表示制御：ユーザーロールに応じたフィールドの表示／非表示
  • マルチテナント：SaaS アプリケーション向けのテナント分離

アーキテクチャパターン

サーバー駆動型 UI

Filament は、バックエンドがスキーマを通じて UI 構造を定義するサーバー駆動型のアプローチを採用しています。PHP コードでフォーム、テーブル、レイアウトを記述すると、Filament がそれらを Livewire コンポーネントとしてレンダリングします。

スキーマシステム

スキーマは、以下を定義する PHP 設定オブジェクトです。

  • フォームフィールドとそのバリデーションルール
  • テーブル列とその書式設定
  • レイアウトコンテナー（グリッド、セクション、タブ）
  • アクションの定義とその動作
Livewire との統合

すべてのコンポーネントは Livewire コンポーネントとしてマウントされ、以下の機能を利用できます。

  • ページの再読み込みなしでリアルタイムにリアクティブに動作
  • 状態の自動管理
  • イベント処理と AJAX による更新
  • 即時フィードバック付きのフォーム検証
リソースファーストの設計

このフレームワークでは、リソースファーストのアプローチが推奨されています。

  1. Eloquent モデルを定義します
  2. それらのモデルに対応するリソースを作成します
  3. 各リソースのフォームとテーブルを設定します
  4. 必要に応じてアクションとウィジェットを追加します

コマンドリファレンス

コマンド目的
filament:install --scaffoldパネルのスキャフォールディングを含めて Filament をインストール
make:filament-resourceCRUD リソースを作成
make:filament-pageカスタムページを作成
make:filament-widgetダッシュボードウィジェットを作成
make:filament-panel追加のパネルを作成
make:filament-user管理者ユーザーを作成
make:filament-relation-managerリレーションマネージャーを作成
filament:cache-components本番環境向けにキャッシュ

詳細ドキュメント

リファレンスガイド

各コンポーネントの包括的なドキュメントです。

  • フォーム - すべてのフォームコンポーネント、検証ルール、レイアウト、条件付きロジック
  • テーブル - カラムの種類、フィルター、アクション、テーブル設定
  • リソース - CRUD リソース、リレーションマネージャー、インフォリスト、グローバル検索
  • インフォリスト - 読み取り専用のデータ表示コンポーネント（TextEntry、ImageEntry、IconEntry）
  • ウィジェット - 統計の概要、チャート、テーブルウィジェット
  • アクション - モーダルアクション、通知、アクショングループ、ウィザード
  • 通知 - フラッシュメッセージ、データベース通知、ブロードキャスト通知
  • スキーマ - スキーマシステム、レイアウト、コンポーネントの構成
  • テスト - リソース、フォーム、テーブル、認可のための Pest テストパターン
  • 認可 - アクセス制御、ポリシー、ロール、マルチテナント
コード例

examples.md では、以下を含む、動作する完全なコード例を確認できます。

  • リソースの完全な実装
  • フォーム設定
  • テーブル設定
  • ウィジェット設定
  • テストスイート
  • 認可パターン

ベストプラクティス

パフォーマンス
  • getEloquentQuery() を使ってリレーションを事前読み込みし、N+1 クエリを防止します
  • filament:cache-components を使って本番環境でコンポーネントのキャッシュを有効にします
  • ページネーションの選択肢を制限し、大規模なデータセットには遅延読み込みを使用します
  • ウィジェット内のコストの高い計算をキャッシュします
セキュリティ
  • パネルのアクセス制御には、必ず FilamentUser コントラクトを実装します
  • リソースレベルの認可には Laravel ポリシーを使用します
  • 適切なフォームルールですべての入力を検証します
  • 本番環境では認可を決して省略しません
  • マルチテナントアプリケーションでは、適切なテナント分離を実装します
コードの構成
  • 機能ごとに構成します：app/Filament/Admin/Resources/
  • 複雑なフォームとテーブルは別のクラスに切り出します
  • よく使うパターンには再利用可能なフォームコンポーネントを作成します
  • リソースの責務を単一に保ちます
  • CRUD 以外の機能には専用ページを使用します
テスト
  • 各リソースのすべての CRUD 操作をテストします
  • 複数のシナリオでフォームの検証ルールを確認します
  • テーブル機能（検索、フィルター、並べ替え、アクション）をテストします
  • さまざまなユーザーロールで認可を確認します
  • ファクトリーを使って現実的なテストデータを作成します

Filament を使用する場面

Filament は以下に最適です。

  • 管理パネル：アプリケーションデータを管理するためのバックオフィスインターフェース
  • CMS：高度な編集機能を備えたコンテンツ管理システム
  • CRM：顧客関係管理ツール
  • E コマース：商品、注文、在庫の管理
  • SaaS アプリケーション：マルチテナントの管理インターフェース
  • 社内ツール：業務プロセス管理とデータ入力

Additional Resources

Version: 1.0.0
License: MIT
Compatibility: Laravel 11+, PHP 8.2+, Livewire v4

コメント

Markdown 対応