0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Laravel Filamentを使ってみた

Last updated at Posted at 2024-09-16

前提

参照


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

インストール手順

  • example-appと書かれた箇所は、インストール済Laravelアプリの名前に読み替えてください。
  • /home/appと書かれた箇所は、あなたの既存ディレクトリに読み替えてください。
  • セキュリティ対策は自己責任でお願いします。

1. Ubuntuのコンソール画面を開く(以下はコンソール画面での操作です。)
2. カレントディレクトリ設定

例:
cd /home/app/example-app

3. Filamentのパネル機能のインストール

コマンド
./vendor/bin/sail composer require filament/filament:"^3.2" -W
./vendor/bin/sail php artisan filament:install --panels

管理画面のURLになる'localhost/****/login'の****部分のIDをどうするか聞いてきます。

コンソール画面
┌ What is the ID? ─────────────────────────────────────────────┐
│ admin                                                        │
└──────────────────────────────────────────────────────────────┘

とりあえずadminのままにしました。

コンソール画面
┌ All done! Would you like to show some love by starring the Filament repo on GitHub? ┐
│ ● Yes / ○ No                                                                        │
└─────────────────────────────────────────────────────────────────────────────────────┘

スターマークを付けて愛を示したいところですがNoにしておきます。ですが感謝、感謝です。

4. 管理者アカウント作成

コマンド
 ./vendor/bin/sail php artisan make:filament-user
コンソール画面
 ┌ Name ────────────────────────────────────────────────────────┐
 │                                                              │
 └──────────────────────────────────────────────────────────────┘

アカウントの名前を入力します。

コンソール画面
 ┌ Email address ───────────────────────────────────────────────┐
 │                                                              │
 └──────────────────────────────────────────────────────────────┘

アカウントのメールアドレスを入力します。

コンソール画面
 ┌ Password ────────────────────────────────────────────────────┐
 │                                                              │
 └──────────────────────────────────────────────────────────────┘

アカウントのパスワードを入力します。

5. WEBブラウザで管理者画面にログインしてみる
http://localhost/admin/login
filament_login.png

6. Userモデルの管理者画面を作ってみる

コマンド
./vendor/bin/sail php artisan make:filament-resource -G User

Filament Documentationの「Getting started」には-G(enerate)オプションについて示されていませんでしたが、-hでヘルプ表示を見ると-Gオプションがありましたので使ってみました。
-Gオプションを入れないとメールアドレスや名前などの項目表示箇所を自分で設定する必要がありますが、このオプションを使うことで、デフォルトで各項目の表示・編集が出来ます。
なお、この場合、生成されるポリシーファイルの設定が必要になります。
とりあえず、今回はポリシー設定は無にしたいので、以下のようにしておきました。

/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

「Users」インデックス画面:
filament_user_index.png

「Users」編集画面:
filament_user_edit.png

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

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

App\Models\UserクラスをFilamentUserのimplementsとし、アクセス可能とするアカウントを指定します。
ここでは、adminパネルにアクセスできるのはアカウントの末尾がadmin@mydomain.comの場合のみとしました。

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;
    }
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?