← ユースケース

ライブ通知と編集ロックのある Filament パネル

コマンドひとつで、すぐ更新される通知ベル、在室表示、編集ロック、自動で更新されるテーブル。

Filament のパネルは、注文、チケット、コンテンツ、承認など、チームが一日を過ごす場所です。標準ではパネルはポーリングで変更を知るため、通知ベルは最大 30 秒遅れ、テーブルは古いまま、ふたりが互いの変更を上書きすることもあります。Filament はもともと Laravel Echo で Pusher 互換サービスにつながり、私たちの hibira-io/filament プラグインはそれをコマンドひとつで有効にします。Filament 3、4、5 に対応し、WebSocket サーバーの運用も npm でのビルドも要りません。

チームにとっての価値

• 通知がデータベースに保存された瞬間にベルが更新されます。アプリが今送っているすべての通知が対象です。
• 同じページを見ている人のアバターと、ひとつのレコードを一度にひとりだけが編集できる編集ロック。
• パネル、キューのジョブ、API のどこで変更されても、テーブル、リレーション、レコードページが自動で更新されます。
• インポートとエクスポートの進捗バー、チームチャットのページ。

使う機能

• hibira-io/laravel の hibira 接続による Laravel Broadcasting。
• プラグインが Hibira に向ける Filament 組み込みの Laravel Echo。
• 通知、テーブル、レコードにはプライベートチャンネル、在室表示と編集ロックにはプレゼンスチャンネル。
• ロックを移す前に誰がまだレコードを開いているかをサーバーが確かめる Channels HTTP API。

ステップ 1：コマンドひとつでインストール

composer require hibira-io/filament
php artisan hibira:filament

このコマンドは .env に設定を追加して App ID、キー、シークレットを尋ね、ブロードキャスト認可ルートを有効にし、通知テーブルを作成し、パネルプロバイダーにプラグインを追加します。最後に接続と各パネルを確認します。何度実行しても、足りないものだけを追加します。ブラウザーが接続できるよう、アプリページの Allowed origins にサイトのアドレスを追加してください。

ステップ 2：通知がすぐ届く

コードの変更は不要です。isEventDispatched: true を付けていない通知も含め、すべてのデータベース通知が保存された時点でベルを更新します：

Notification::make()
    ->title('Order #1024 shipped')
    ->success()
    ->sendToDatabase($user);

Filament は通知をキューから保存するので、php artisan queue:work を動かし続けるか、開発中は QUEUE_CONNECTION=sync を使ってください。

ステップ 3：在室表示と編集ロック

アバターは hibira:filament で有効になっています。編集ロックは、編集ページにトレイトをひとつ追加します：

class EditPost extends EditRecord
{
    use InteractsWithHibiraLock;

    protected static string $resource = PostResource::class;
}

最初にレコードを開いた人がロックを持ち、ほかの人は閲覧してリクエストできます。持っている人が離れると、ハートビートのポーリングなしで、数秒以内に次の人がロックを受け取ります。

ステップ 4：ライブテーブルとレコードページ

liveTables() と liveRecords() を有効にすると、テーブルとレコードページは開いている全員の画面で更新されます。1,000 行のインポートのような連続した変更も、1 行ごとではなくリクエストやキューのジョブごとに 1 回だけ送られます。編集ページは誰が変更したかを表示し、変更された項目だけを読み込むので、未保存の編集は残ります。

モデルイベントが発生しないクエリビルダーでの一括更新のあとは、自分でテーブルに印を付けます：

Order::query()->where('paid', false)->update(['status' => 'cancelled']);

app(\Hibira\Filament\LiveTables::class)->touch(Order::class);

ステップ 5：パネルにさらに

• ->importProgress() は各インポートとエクスポートの進み具合をチャンクごとに表示します。
• ->chat() はパネルのユーザー向けにチャットページを追加します。
• AI エージェントも在室表示に現れ、人と同じように編集ロックを取れます。Filament ガイドをご覧ください。
• 共同編集のリッチテキストエディター、AI ツール承認の受信箱、AI ライブチャットサポートも同じプラグインの上に作られています。

Reverb やポーリングからの移行

パネルがすでに Reverb や Pusher で Echo を使っている場合、プラグインは自分が入っているパネルの filament.broadcasting.echo 設定を置き換え、独自のイベントやチャンネルのルールはそのまま動きます。パネルが今ポーリングしている場合、->databaseNotifications() がポーリングを止めます。予備として残すなら polling: '60s' を渡してください。確認する項目は移行ページにあります。

ヒント

• 環境（ローカル、ステージング、本番）ごとにアプリを作れば、テストのイベントが実際のユーザーに届きません。
• 独自のガードでサインインするパネルは、そのガードでブロードキャストのルートを登録する必要があります。必要なときは hibira:filament が知らせます。
• 連続した変更はリクエストやキューのジョブごとに 1 メッセージで送られるので、使用量を抑えられます。各プランの内容は料金をご覧ください。