🧑‍💻

Laravel 管理画面 Filamentを速攻で動かす

2022/12/19に公開

💁‍♂️ はじめに

株式会社EGSTOCKの日下繕章です
爆速開発を行うにあたり、Laravel用の管理画面パッケージを検討してた所、Filamentがイケてるということなので検証がてら環境構築し動かしてみた

https://filamentphp.com/

公式サイト:https://filamentphp.com/
ドキュメント:https://filamentphp.com/docs/2.x/admin/installation
デモ:https://demo.filamentphp.com/login
GitHub:https://github.com/filamentphp/filament

🎯 filamentphpの特徴

  • 純粋なLivewireコンポーネントで構成されたシンプルな基盤
  • Alpine.jsに大きく依存した強力なフォームとテーブルビルダーを搭載
  • UIは Tailwind CSS v2を使用して構築されている
  • テーブルメタデータからの自動生成機能がある
  • 執筆時点(2022/12)でも活発に更新が行われている
  • MITライセンスである

🔧 準備

爆速で作りたいので既存テーブルのメタデータから画面を自動生成するところまで準備してみる

検証環境

php8.0
Laravel9
MySQL8.0
Nginx1.20
※前提としてLaravelが動作する状態であること

1) インストール

composer require filament/filament:"^2.0"

2) 管理画面ユーザ作成

php artisan make:filament-user
 Name:
 > [ユーザ名]

 Email address:
 > [メールアドレス]         

 Password:
 > [パスワード]

Success! [メールアドレス] may now log in at http://localhost/admin/login.

 Would you like to show some love by starring the repo? (yes/no) [yes]:
 > [任意] // yesでhttps://github.com/filamentphp/filamentページがopen

※ちなみに作成した管理画面ユーザはUsersテーブルに格納される模様

これだけで下記URLで管理画面にアクセスできるようになっているので、作成した管理画面ユーザでログイン
http://localhost/admin/login

ダッシュボード画面にログインできるようになってますが、何もまっさらの状態なので引き続き画面も追加していく

3) doctrine/dbalパッケージインストール

既存テーブルのメタデータから画面を生成するために必要らしいのでインストール

composer require doctrine/dbal --dev

4) 画面生成

既に存在するUsersテーブルから画面を生成してみる

php artisan make:filament-resource User --generate

Usersテーブルがメニューに追加され、一覧と編集画面からレコード操作が可能になっている

その他設定

設定ファイル公開

設定ファイルは公開しておくと後々良い

php artisan vendor:publish --tag=filament-config
php artisan vendor:publish --tag=forms-config
php artisan vendor:publish --tag=tables-config

日本語化

英語のままだったりするので設定を調整する

多言語設定をlang以下に展開

php artisan vendor:publish --tag=filament-translations

config/app.phplocaleを日本語設定に変更

    'locale' => 'ja',

以上で画面が日本語化された状態で表示される

日付フォーマット変更

デフォルトだとFormとTableの日付が下記のような(M j, Y H:i:s)フォーマットで表示されてしまうので調整

Table Builderの日付フォーマットを変更

config/tables.php
-   'date_format' => 'M j, Y',
-   'date_time_format' => 'M j, Y H:i:s',
+   'date_format' => 'Y年m月d日',
+   'date_time_format' => 'Y年m月d日 H:i:s',
    'time_format' => 'H:i:s',

Form Builderの日付フォーマットを変更

config/forms.php
        'date_time_picker' => [
            'first_day_of_week' => 1, // 0 to 7 are accepted values, with Monday as 1 and Sunday as 7 or 0.
            'display_formats' => [
-               'date' => 'M j, Y',
-               'date_time' => 'M j, Y H:i',
-               'date_time_with_seconds' => 'M j, Y H:i:s',
+               'date' => 'Y年m月d日',
+               'date_time' => 'Y年m月d日 H:i',
+               'date_time_with_seconds' => 'Y年m月d日 H:i:s',
                'time' => 'H:i',
                'time_with_seconds' => 'H:i:s',
            ],
        ],

管理画面ユーザにアクセス権限を追加

https://zenn.dev/egstock_inc/articles/8e5ca678e80cf2

管理画面の新規カスタマイズページ

https://zenn.dev/egstock_inc/articles/07eb86105f8001

管理画面の部分カスタマイズ

https://zenn.dev/egstock_inc/articles/e9adfcdc20cf33

感想

既存のLaravel動作環境に対して30分も掛からず管理画面の基盤を設置し日本語化設定を済ませた状態で動作させることができた
執筆時点では日本語情報が乏しいが、設定もシンプルで直感的に理解しやすいものが多い印象

EGSTOCK,Inc.

Discussion

ログインするとコメントできます