前提
- 過去記事「Laravel Breezeをインストールしてみた」の状態
参照
管理画面を簡単に作れる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
6. Userモデルの管理者画面を作ってみる
./vendor/bin/sail php artisan make:filament-resource -G User
Filament Documentationの「Getting started」には-G(enerate)オプションについて示されていませんでしたが、-hでヘルプ表示を見ると-Gオプションがありましたので使ってみました。
-Gオプションを入れないとメールアドレスや名前などの項目表示箇所を自分で設定する必要がありますが、このオプションを使うことで、デフォルトで各項目の表示・編集が出来ます。
なお、この場合、生成されるポリシーファイルの設定が必要になります。
とりあえず、今回はポリシー設定は無にしたいので、以下のようにしておきました。
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ブラウザで表示している管理者画面を再読み込み
ダッシュボード画面:
8. 環境設定ファイル(.env)のAPP_LOCALE変数をenからjaに変更すると画面の一部が日本語になりました。
9. アクセス制限設定をする。
このままだとログイン認証された全てのアカウントが管理者用パネルにアクセスできてしまうので制限設定をします。
App\Models\UserクラスをFilamentUserのimplementsとし、アクセス可能とするアカウントを指定します。
ここでは、adminパネルにアクセスできるのはアカウントの末尾がadmin@mydomain.comの場合のみとしました。
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;
}