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

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

Source: https://hibira.io/ja/use-cases/filament

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

## チームにとっての価値

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

![編集ロック：Mei さんが記事を編集中のため、ほかの人は保存できず「編集をリクエスト」ボタンが表示される](https://hibira.io/portal/articles/filament-lock-ja-light.webp)

## 使う機能

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

```text
flow: アプリはリクエストやジョブの終わりに変更を Hibira に送り、そのページを開いているパネルがすぐ更新される
Laravel|保存、通知、インポート --リクエストごとに 1 メッセージ--> *Hibira|ws.hibira.io --WebSocket--> Filament パネル|ベル、テーブル、レコードページ
== 誰が受信できるか
Filament パネル|`POST /broadcasting/auth` --canAccessPanel()--> Laravel|チャンネルのルール --署名--> *Hibira
```

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

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

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

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

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

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

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

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

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

```php
class EditPost extends EditRecord
{
    use InteractsWithHibiraLock;

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

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

![持っている人にリクエストが届き、保存してから渡せる](https://hibira.io/portal/articles/filament-lock-request-ja-light.webp)

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

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

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

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

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

![美咲さんの編集中に健太さんが記事を保存：ページに表示され、「変更を読み込む」で彼が変えた項目だけを取り込める](https://hibira.io/portal/articles/filament-live-record-ja-light.webp)

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

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

![1,000 行のインポート：チャンクごとにカードが進み、テーブルが埋まっていく](https://hibira.io/portal/articles/filament-import-ja-light.webp)

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

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

## ヒント

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