Laravel Filamentを使ってみた


:::note info
前提
+ 過去記事「[Laravel Breezeをインストールしてみた](https://qiita.com/AKFJ21/items/c0037b1a0efc3ea74b40)」の状態
:::

参照
+ [Filament Documentation](https://filamentphp.com/docs)

---------------------------------------
管理画面を簡単に作れるFilamentって言うのがあるようなので使ってみました。

## インストール手順

:::note warn
+ example-appと書かれた箇所は、インストール済Laravelアプリの名前に読み替えてください。
+ /home/appと書かれた箇所は、あなたの既存ディレクトリに読み替えてください。
:::

:::note alert
+ セキュリティ対策は自己責任でお願いします。
:::

1\. Ubuntuのコンソール画面を開く（以下はコンソール画面での操作です。）
2\. カレントディレクトリ設定
  ```shell:例：
  cd /home/app/example-app
  ```
3\. Filamentのパネル機能のインストール
  ```shell:コマンド
  ./vendor/bin/sail composer require filament/filament:"^3.2" -W
  ./vendor/bin/sail php artisan filament:install --panels
  ```
管理画面のURLになる'localhost/\*\*\*\*/login'の****部分のIDをどうするか聞いてきます。
  ```shell:コンソール画面
 ┌ What is the ID? ─────────────────────────────────────────────┐
 │ admin                                                        │
 └──────────────────────────────────────────────────────────────┘
   ```
   とりあえずadminのままにしました。

  ```shell:コンソール画面
 ┌ All done! Would you like to show some love by starring the Filament repo on GitHub? ┐
 │ ● Yes / ○ No                                                                        │
 └─────────────────────────────────────────────────────────────────────────────────────┘
  ```
 スターマークを付けて愛を示したいところですがNoにしておきます。ですが感謝、感謝です。
  
4\. 管理者アカウント作成
```shell:コマンド
 ./vendor/bin/sail php artisan make:filament-user
```
 
```shell:コンソール画面
 ┌ Name ────────────────────────────────────────────────────────┐
 │                                                              │
 └──────────────────────────────────────────────────────────────┘
```
アカウントの名前を入力します。

```shell:コンソール画面
 ┌ Email address ───────────────────────────────────────────────┐
 │                                                              │
 └──────────────────────────────────────────────────────────────┘
```
アカウントのメールアドレスを入力します。

```shell:コンソール画面
 ┌ Password ────────────────────────────────────────────────────┐
 │                                                              │
 └──────────────────────────────────────────────────────────────┘
```
アカウントのパスワードを入力します。


5\. WEBブラウザで管理者画面にログインしてみる
 [http://localhost/admin/login](http://localhost/admin/login)
![filament_login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3886350/89ce9480-c87b-302c-29bb-2181245f4cec.png)

 
6\. Userモデルの管理者画面を作ってみる
 ```shell:コマンド
./vendor/bin/sail php artisan make:filament-resource -G User
 ```
Filament Documentationの「Getting started」には-G(enerate)オプションについて示されていませんでしたが、-hでヘルプ表示を見ると-Gオプションがありましたので使ってみました。
-Gオプションを入れないとメールアドレスや名前などの項目表示箇所を自分で設定する必要がありますが、このオプションを使うことで、デフォルトで各項目の表示・編集が出来ます。
なお、この場合、生成されるポリシーファイルの設定が必要になります。
とりあえず、今回はポリシー設定は無にしたいので、以下のようにしておきました。
```shell:/home/afujiwara/mottoaru/app/Policies/MessagePolicy.php
class MessagePolicy
{
    /**
     * Determine whether the user can view any models.
     */
    //  public function viewAny(User $user): bool
    //  {
    //      //
    //  }

    /**
     * Determine whether the user can view the model.
     */
    //  public function view(User $user, Message $message): bool
    //  {
    //      //
    //  }

    /**
     * Determine whether the user can create models.
     */
    //  public function create(User $user): bool
    //  {
    //      //
    //  }

    /**
     * Determine whether the user can update the model.
     */
    //  public function update(User $user, Message $message): bool
    //  {
    //      //
    //  }

    /**
     * Determine whether the user can delete the model.
     */
    //  public function delete(User $user, Message $message): bool
    //  {
    //      //
    //  }

    /**
     * Determine whether the user can restore the model.
     */
    //  public function restore(User $user, Message $message): bool
    //  {
    //      //
    //  }

    /**
     * Determine whether the user can permanently delete the model.
     */
    //  public function forceDelete(User $user, Message $message): bool
    //  {
    //      //
    //  }
}
```

7\. WEBブラウザで表示している管理者画面を再読み込み
ダッシュボード画面：
![filament_dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3886350/e0d9900f-45e1-6c71-6ce8-312fdec2925f.png)

「Users」インデックス画面：
![filament_user_index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3886350/d1395e09-4fe3-146d-9817-20972bdc435d.png)

「Users」編集画面：
![filament_user_edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3886350/094f1bae-b806-1060-62ff-41b1cda483b8.png)

8\. 環境設定ファイル（.env）のAPP_LOCALE変数をenからjaに変更すると画面の一部が日本語になりました。


9\. アクセス制限設定をする。
このままだとログイン認証された全てのアカウントが管理者用パネルにアクセスできてしまうので制限設定をします。

App\Models\UserクラスをFilamentUserのimplementsとし、アクセス可能とするアカウントを指定します。
ここでは、adminパネルにアクセスできるのはアカウントの末尾がadmin@mydomain.comの場合のみとしました。
```shell:App\Models\User.php（設定後）
use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
class User extends Authenticatable implements FilamentUser
{
    // ...

    public function canAccessPanel(Panel $panel): bool
    {
        if ($panel->getId() === 'admin') {
            return str_ends_with($this->email, 'admin@mydomain.com');
        }
 
        return true;
    }
```