├── sub
    ├── change-model-name.md
    ├── redirect.md
    ├── add-search.md
    ├── easiest-way.md
    ├── add-sort.md
    ├── user-resource-sample.md
    └── add-custom-page.md
└── README.md


/sub/change-model-name.md:
--------------------------------------------------------------------------------
 1 | # 表示されているモデル名を好きな名前に変えたい
 2 | 初期の状態では左のメニューバーやモデル一覧画面のタイトルにはLaravelで作成したモデルのファイル名の表示がされてます<br>
 3 | 例：app/Models/Post.php → 表示名：Post<br><br>
 4 | これを「ブログ記事」のように変えたい場合の修正箇所は下記になります
 5 | 
 6 | ```vim
 7 | app/Filament/Resources/PostResource.php
 8 | ---before---
 9 | class PostResource extends Resource
10 | {
11 |     protected static ?string $model = Post::class;
12 | 
13 |     protected static ?string $navigationIcon = 'heroicon-o-collection';
14 | 
15 |     public static function form(Form $form): Form
16 | ------------
17 | ↓
18 | ---after---
19 | class PostResource extends Resource
20 | {
21 |     protected static ?string $model = Post::class;
22 | 
23 |     protected static ?string $navigationIcon = 'heroicon-o-collection';
24 | 
25 |     protected static ?string $modelLabel = 'ブログ記事'; //ここを追加
26 | 
27 |     public static function form(Form $form): Form
28 | 
29 | -----------
30 | ```
31 | 
32 | 修正後は下記のような感じで表示されます：
33 | 
34 | ### before
35 | <img width="1353" alt="model_name_before" src="https://user-images.githubusercontent.com/7894265/190347767-8562ca44-4300-469f-b783-e81b49908244.png">
36 | 
37 | ### after
38 | <img width="1353" alt="model_name_changed" src="https://user-images.githubusercontent.com/7894265/190346558-b364b436-96f1-48b5-bcec-12db780a3b71.png">
39 | 
40 | あら便利💕
41 | <br><br>
42 | 詳しくはオフィシャルドキュメントを参照👉 [Model Labels - Filament](https://filamentphp.com/docs/2.x/admin/resources/getting-started#model-labels)
43 | 


--------------------------------------------------------------------------------
/sub/redirect.md:
--------------------------------------------------------------------------------
 1 | # データ作成/更新時にリダイレクト先を変えたい
 2 | 該当のファイルに作成時や更新時のリダイレクトURLを指定することで動作を変更できます<br>
 3 | ここではPostモデルの例を記載します<br><br>
 4 | 他のモデルの時は<br>
 5 | `app/Filament/Resources/(モデル名)Resource/`<br>
 6 | にファイルパスを置き換えたファイルを変更してください
 7 | 
 8 | ## データ作成時のリダイレクト先変更方法
 9 | ```vim
10 | app/Filament/Resources/PostResource/Pages/CreatePost.php
11 | ---before---
12 | class CreatePost extends CreateRecord
13 | {
14 |     protected static string $resource = PostResource::class;
15 | }
16 | ------------
17 | ↓
18 | ---after---
19 | class CreatePost extends CreateRecord
20 | {
21 |     protected static string $resource = PostResource::class;
22 | 
23 |     // ここを追加します
24 |     protected function getRedirectUrl(): string
25 |     {
26 |         return $this->getResource()::getUrl('index');
27 |     }
28 | }
29 | -----------
30 | ```
31 | 
32 | ## データ更新時のリダイレクト先変更方法
33 | ```vim
34 | app/Filament/Resources/PostResource/Pages/EditPost.php
35 | ---before---
36 | class EditPost extends EditRecord
37 | {
38 |     protected static string $resource = PostResource::class;
39 | 
40 |     protected function getActions(): array
41 |     {
42 |         return [
43 |             Actions\DeleteAction::make(),
44 |         ];
45 |     }
46 | }
47 | ------------
48 | ↓
49 | ---after---
50 | class EditPost extends EditRecord
51 | {
52 |     protected static string $resource = PostResource::class;
53 | 
54 |     protected function getActions(): array
55 |     {
56 |         return [
57 |             Actions\DeleteAction::make(),
58 |         ];
59 |     }
60 | 
61 |     protected function getRedirectUrl(): string
62 |     {
63 |         return $this->getResource()::getUrl('index');
64 |     }
65 | }
66 | -----------
67 | ```
68 | 
69 | より詳しい情報はオフィシャルドキュメントを読もう👉 
70 | [Customizing form redirects - Filament](https://filamentphp.com/docs/2.x/admin/resources/creating-records#customizing-form-redirects)


--------------------------------------------------------------------------------
/sub/add-search.md:
--------------------------------------------------------------------------------
 1 | # 検索機能の追加
 2 | 
 3 | 管理画面で登録データの項目データを検索したい場合、Filamentでは手軽に機能を追加することができます
 4 | 
 5 | ```vim
 6 | app/Filament/Resources/PostResource.php
 7 | ---before---
 8 | public static function table(Table $table): Table
 9 | {
10 |     return $table
11 |         ->columns([
12 |             Tables\Columns\TextColumn::make('title')->label('タイトル'),
13 |             Tables\Columns\TextColumn::make('body')->label('本文'),
14 |         ])
15 | ------------
16 | ↓
17 | ---after---
18 | public static function table(Table $table): Table
19 | {
20 |     return $table
21 |         ->columns([
22 |             Tables\Columns\TextColumn::make('title')->label('タイトル')->searchable(), //ここにsearchableを追加
23 |             Tables\Columns\TextColumn::make('body')->label('本文')->searchable(), //ここにsearchableを追加
24 |         ])
25 | -----------
26 | ```
27 | 
28 | ## before
29 | <img width="1353" alt="before-search-feature" src="https://user-images.githubusercontent.com/7894265/190614892-9c3580cc-fabc-40be-8471-9453c08b6876.png">
30 | 
31 | ## after
32 | <img width="1353" alt="after-search-feature" src="https://user-images.githubusercontent.com/7894265/190614940-06f6bc1a-f16b-4ad3-9a4d-6cf4363b24aa.png">
33 | 
34 | ## ソートと併用可能
35 | 検索対象に加えて[こちらのページ](/sub/add-sort.md)に記載したソート機能も下記の様にsortableを付け加えるだけでソート対象にすることも可能
36 | 
37 | ```vim
38 | app/Filament/Resources/PostResource.php
39 | ---before---
40 | public static function table(Table $table): Table
41 | {
42 |     return $table
43 |         ->columns([
44 |             Tables\Columns\TextColumn::make('title')->label('タイトル')->searchable(),
45 |             Tables\Columns\TextColumn::make('body')->label('本文')->searchable(),
46 |         ])
47 | ------------
48 | ↓
49 | ---after---
50 | public static function table(Table $table): Table
51 | {
52 |     return $table
53 |         ->columns([
54 |             Tables\Columns\TextColumn::make('title')->label('タイトル') //見やすくするため改行追加
55 |                 ->searchable()->sortable(), //ここにsortableを追加
56 |             Tables\Columns\TextColumn::make('body')->label('本文') //見やすくするため改行追加
57 |                 ->searchable()->sortable(), //ここにsortableを追加
58 |         ])
59 | -----------
60 | ```
61 | 
62 | 
63 | あら便利💕
64 | <br><br>
65 | 詳しくはオフィシャルドキュメントを参照👉 [Columns - Table Builder - Filament](https://filamentphp.com/docs/2.x/tables/columns#searching)
66 | 


--------------------------------------------------------------------------------
/sub/easiest-way.md:
--------------------------------------------------------------------------------
 1 | # 凄く楽する方法
 2 | Filamentのリソース作成時には自動生成オプションが用意されています[(オフィシャルドキュメントへのリンク)](https://filamentphp.com/docs/2.x/admin/resources/getting-started#automatically-generating-forms-and-tables)<br>
 3 | この方法を使うとモデルの持つ項目を基に一覧画面の表示部分やCRUD(作成、表示、更新、削除)機能画面を自動生成してくれます👍
 4 | 
 5 | ## やり方
 6 | 
 7 | ここでは[トップページ](/README.md)の**Postモデルのファイルを作成し、マイグレーションを実施した直後の前提**で話を進めます
 8 | 
 9 | ### 必要なパッケージのインストール
10 | 
11 | 自動生成には `doctrine/dbal` パッケージが必要なので事前にインストールします
12 | 
13 | ```sh
14 | composer require doctrine/dbal
15 | ```
16 | 
17 | ### モデルを基にしたリソースの自動生成コマンド
18 | 
19 | 次のコマンドでPostモデルを対象としてFilamentのリソースを自動生成させます
20 | 
21 | ```sh
22 | php artisan make:filament-resource Post --generate
23 | ```
24 | 
25 | ## 管理画面にアクセスして動作確認
26 | 
27 | 管理画面にアクセスすると次のような状態になっています
28 | <img width="1332" alt="ez1" src="https://user-images.githubusercontent.com/7894265/191151444-ecba137f-d024-4d81-9708-65a83c338e10.png">
29 | 
30 | New Post(作成)をクリックすると次のような新規データ作成画面に（テキストはダミーです）
31 | <img width="1332" alt="ez2" src="https://user-images.githubusercontent.com/7894265/191151553-085dcf6d-c4e5-4bb4-9d1e-b499ee23f6c1.png">
32 | 
33 | 保存してPostデータ一覧に戻るとデータが追加されています
34 | <img width="1332" alt="ez3" src="https://user-images.githubusercontent.com/7894265/191151597-153c92d4-c4e0-437a-860b-1afb29c648ba.png">
35 | 
36 | 何これめっちゃ楽🤯💕<br><br>
37 | なお、自動生成されたファイルは`app/Filament/Resources/`配下に保存されているので、更にカスタマイズが必要な場合にはそれらのファイルを弄ることで好き勝手に出来ます👍
38 | 
39 | ## Userモデルの場合
40 | 
41 | ユーザモデルでも自動生成が使えますが、ユーザ情報更新の際のパスワードのような部分はdehydrate処理を使わないと上手くいかないので、[詳しくはこちらの説明](/sub/user-resource-sample.md)を参照してください
42 | 
43 | ### Userリソース作成
44 | 
45 | ```sh
46 | php artisan make:filament-resource User --generate
47 | ```
48 | 
49 | ### Userリソース管理画面サンプル画像
50 | 
51 | <img width="1332" alt="ezuser1" src="https://user-images.githubusercontent.com/7894265/191151630-ba887fac-8996-4154-9114-ea1c49d1673f.png">
52 | 
53 | Editをクリック後の画面
54 | <img width="1332" alt="ezuser2" src="https://user-images.githubusercontent.com/7894265/191151635-a3eaecc2-d396-496f-a8a7-a570c663269b.png">
55 | 
56 | 上記のまま"Save Changes"をクリックするとPasswordが必須項目と警告が出る（正しくないというか、好ましくない動作）
57 | <img width="1332" alt="ezuser3" src="https://user-images.githubusercontent.com/7894265/191151643-d1d2f949-5be8-4d70-8b8c-9113b7377715.png">
58 | 
59 | **Userモデルの場合**にも書きましたが、対処方法については[こちらの説明](/sub/user-resource-sample.md)を参照してください
60 | 


--------------------------------------------------------------------------------
/sub/add-sort.md:
--------------------------------------------------------------------------------
 1 | # 並び替え機能の追加
 2 | 
 3 | 管理画面で登録データの並び替えしたい場合、Filamentでは手軽に機能を追加することができます
 4 | 
 5 | ```vim
 6 | app/Filament/Resources/PostResource.php
 7 | ---before---
 8 | public static function table(Table $table): Table
 9 | {
10 |     return $table
11 |         ->columns([
12 |             Tables\Columns\TextColumn::make('title')->label('タイトル'),
13 |             Tables\Columns\TextColumn::make('body')->label('本文'),
14 |         ])
15 | ------------
16 | ↓
17 | ---after---
18 | public static function table(Table $table): Table
19 | {
20 |     return $table
21 |         ->columns([
22 |             Tables\Columns\TextColumn::make('title')->label('タイトル')->sortable(), //ここにsortableを追加
23 |             Tables\Columns\TextColumn::make('body')->label('本文')->sortable(), //ここにsortableを追加
24 |         ])
25 | -----------
26 | ```
27 | 
28 | ## before
29 | <img width="1353" alt="before-sort" src="https://user-images.githubusercontent.com/7894265/190680657-3ade9e50-5c37-4df4-9ada-8779725a69c8.png">
30 | 
31 | 
32 | ## after
33 | <img width="1353" alt="after-sort" src="https://user-images.githubusercontent.com/7894265/190680671-f18c41f1-81a3-4a0c-8eec-ae55be24d502.png">
34 | 
35 | ## タイトルでソート時
36 | <img width="1353" alt="title-sort" src="https://user-images.githubusercontent.com/7894265/190680977-17678bf5-07ef-43ef-9428-bc4809da067f.png">
37 | 
38 | 
39 | ## 検索と併用可能
40 | ソート対象に加えて[こちらのページ](/sub/add-search.md)に記載した検索機能も下記の様にsearchableを付け加えるだけで検索対象にすることも可能
41 | 
42 | ```vim
43 | app/Filament/Resources/PostResource.php
44 | ---before---
45 | public static function table(Table $table): Table
46 | {
47 |     return $table
48 |         ->columns([
49 |             Tables\Columns\TextColumn::make('title')->label('タイトル')->sortable(), //ここにsortableを追加
50 |             Tables\Columns\TextColumn::make('body')->label('本文')->sortable(), //ここにsortableを追加
51 |         ])
52 | ------------
53 | ↓
54 | ---after---
55 | public static function table(Table $table): Table
56 | {
57 |     return $table
58 |         ->columns([
59 |             Tables\Columns\TextColumn::make('title')->label('タイトル') //見やすくするため改行追加
60 |                 ->sortable()->searchable(), //ここにsearchableを追加
61 |             Tables\Columns\TextColumn::make('body')->label('本文') //見やすくするため改行追加
62 |                 ->sortable()->searchable(), //ここにsearchableを追加
63 |         ])
64 | -----------
65 | ```
66 | 
67 | あら便利💕
68 | <br><br>
69 | 詳しくはオフィシャルドキュメントを参照👉 [Columns - Table Builder - Filament](https://filamentphp.com/docs/2.x/tables/columns#sorting)
70 | 


--------------------------------------------------------------------------------
/sub/user-resource-sample.md:
--------------------------------------------------------------------------------
  1 | # ユーザモデル管理画面作成例
  2 | ユーザモデルはメールアドレスのユニーク制限やパスワードのハッシュ化、ユーザ情報更新時のパスワード情報等の取り扱いに癖があるので、ここではFilamentでのそれらの情報の扱い方を解説
  3 | 
  4 | ## まずはUser用リソースを作成
  5 | 下記コマンドを実行してUserモデル用のFilamentリソースファイルを作成してください
  6 | ```sh
  7 | php artisan make:filament-resource User
  8 | ```
  9 | 
 10 | ## 次にリソース編集部分を作成
 11 | 作成されたFilamentのリソースファイルを下記のように変更します
 12 | 
 13 | ```vim
 14 | app/Filament/Resources/UserResource.php
 15 | ---before---
 16 | public static function form(Form $form): Form
 17 | {
 18 |     return $form
 19 |         ->schema([
 20 |             //
 21 |         ]);
 22 | }
 23 | 
 24 | public static function table(Table $table): Table
 25 | {
 26 |     return $table
 27 |         ->columns([
 28 |             //
 29 |         ])
 30 |         ->filters([
 31 |             //
 32 |         ])
 33 | ------------
 34 | ↓
 35 | ---after---
 36 | public static function form(Form $form): Form
 37 | {
 38 |     return $form
 39 |         ->schema([
 40 |             //名前
 41 |             Forms\Components\TextInput::make('name')->required()->label('名前'),
 42 | 
 43 |             //メアド：編集保存時にメアドのユニーク制限でエラーにならないようにignoreRecordをtrueにする
 44 |             Forms\Components\TextInput::make('email')->required()->label('メールアドレス')
 45 |                 ->unique(ignoreRecord: true),
 46 | 
 47 |             //パスワード：パスワードのハッシュ化や、編集時に都度再入力を求められないようにdehydrateを使う
 48 |             Forms\Components\TextInput::make('password')
 49 |                 ->password()
 50 |                 ->dehydrateStateUsing(fn ($state) => Hash::make($state))
 51 |                 ->dehydrated(fn ($state) => filled($state))
 52 |                 ->required(fn (string $context): bool => $context === 'create')
 53 |                 ->same('password_confirmation')
 54 |                 ->label('パスワード'),
 55 | 
 56 |             //パスワード確認フィールド
 57 |             Forms\Components\TextInput::make('password_confirmation')
 58 |                 ->password()
 59 |                 ->required(fn (string $context): bool => $context === 'create')
 60 |                 ->dehydrated(false)
 61 |                 ->label('パスワード確認')
 62 |         ]);
 63 | }
 64 | 
 65 | public static function table(Table $table): Table
 66 | {
 67 |     return $table
 68 |         ->columns([
 69 |             Tables\Columns\TextColumn::make('name')->label('名前'),
 70 |             Tables\Columns\TextColumn::make('email')->label('メールアドレス'),
 71 |         ])
 72 |         ->filters([
 73 |             //
 74 |         ])
 75 | ------------
 76 | ```
 77 | 
 78 | ## 作成された画面例
 79 | - 一覧画面
 80 | <img width="1328" alt="user1" src="https://user-images.githubusercontent.com/7894265/190982447-aa9e44a0-92c1-4e3e-ba68-dae02eb2d769.png">
 81 | 
 82 | - ユーザ新規作成
 83 | <img width="1328" alt="user2" src="https://user-images.githubusercontent.com/7894265/190982487-fbb53265-f70e-4a9d-8230-b822abc2005f.png">
 84 | 
 85 | - 作成すると右上に成功メッセージ
 86 | <img width="1328" alt="user3" src="https://user-images.githubusercontent.com/7894265/190982519-ea7b4088-052a-4816-8242-8106e9d0148c.png">
 87 | 
 88 | - 作成後の一覧画面
 89 | <img width="1328" alt="user4" src="https://user-images.githubusercontent.com/7894265/190982561-f95e200e-7d4c-412b-9b71-59b9ae47c793.png">
 90 | 
 91 | - 編集画面（名前：sample -> sample123に変更）
 92 | <img width="1328" alt="user5" src="https://user-images.githubusercontent.com/7894265/190982589-0de294d3-2016-48a8-8587-cafe7b8c6393.png">
 93 | 
 94 | - 保存すると右上に成功メッセージ。パスワードは何も入力しない時は既存のパスワードが温存される動き
 95 | <img width="1328" alt="user6" src="https://user-images.githubusercontent.com/7894265/190982765-9880af8d-af57-4f8b-9002-06d8f3498890.png">
 96 | 
 97 | - 編集後の一覧画面
 98 | <img width="1328" alt="user7" src="https://user-images.githubusercontent.com/7894265/190982832-8abb924b-d29b-437d-b218-613923e40038.png">
 99 | 
100 | 
101 | ## オフィシャルドキュメント
102 | 詳しくはオフィシャルドキュメントを見よう<br>
103 | 👇
104 | - [uniqueについて](https://filamentphp.com/docs/2.x/forms/validation#unique)
105 | - [パスワードのハッシュかや編集時のTIPS](https://filamentphp.com/tricks/password-form-fields)
106 | - [Dehydrationについて](https://filamentphp.com/docs/2.x/forms/advanced#dehydration)
107 | 


--------------------------------------------------------------------------------
/sub/add-custom-page.md:
--------------------------------------------------------------------------------
  1 | # カスタムページの作り方
  2 | Filamentでは個別ページを作成する機能も用意されています
  3 | 
  4 | ## カスタムページの作成
  5 | 下記のコマンドを実行してカスタムページを作ってみましょう
  6 | ```bash
  7 | php artisan make:filament-page Imports
  8 | 
  9 |  (Optional) Resource (e.g. `UserResource`):
 10 |  >   （ここは何も入れずにEnterキーをおします）
 11 | ```
 12 | 実行すると下記の2つのファイルが作成されます
 13 | - `app/Filament/Pages/Imports.php`
 14 | - `resources/views/filament/pages/imports.blade.php`
 15 | 
 16 | ダッシュボードにアクセスすると何も無いブランクページが作成されています
 17 | 
 18 | <img width="1148" alt="image" src="https://user-images.githubusercontent.com/7894265/197438835-70849a2e-7f92-442e-be71-ebbb66c2d9a1.png">
 19 | 
 20 | ## カスタムコンポーネントを読み込ませてみよう
 21 | ブログ記事用のPostモデルにCSVファイルからデータを読み込ませるカスタムコンポーネントをこのページに設定してみましょう
 22 | 
 23 | ### コンポーネントパッケージのインストール
 24 | 手前味噌ですが、Livewireを使用してお手軽にCSVデータをインポートするパッケージを作ってありますので、こちらを本Laravelプロジェクトにインストールします
 25 | ```bash
 26 | composer require askdkc/livewire-csv
 27 | ```
 28 | インストール後、下記のコマンドを実行し必要なセットアップを実行します
 29 | ```bash
 30 | php artisan livecsv-setup
 31 | 
 32 | Preparing Livewire-CSV necessary migrations / 必要なマイグレーションを準備します
 33 | Publishing migration... / マイグレーションファイル準備中
 34 | Migration Jobs created successfully / Jobsテーブル作成
 35 | Migration Job Batches created successfully / Job Batches テーブル作成
 36 | Migration Csv Imports created successfully / Csv Importsテーブル作成
 37 | Adding Japanese Validation file... / 日本語のバリデーションファイルを作成します
 38 | Done! / 完了!
 39 | 
 40 |  Would you like to run the migrations now? / マイグレーションを実行しますか? (yes/no) [no]:
 41 |  > yes  ←ここはyesと入力してください
 42 | 
 43 | Running migrations... / 実行中...
 44 |    INFO  Running migrations.  
 45 | 
 46 |   2022_10_24_023104_create_jobs_table .............................. 10ms DONE
 47 |   2022_10_24_023105_create_csv_imports_table ........................ 2ms DONE
 48 |   2022_10_24_023106_create_job_batches_table ........................ 1ms DONE
 49 | 
 50 |  Would you like to star our repo on GitHub? 
 51 |  GitHubリポジトリにスターの御協力をお願いします🙏 (yes/no) [no]:
 52 |  > yes ← よかったらGitHubリポにスターをお願いします
 53 | 
 54 | ```
 55 | 
 56 | ### コンポーネントをカスタムページに設定する
 57 | それではインストールされたLivewireコンポーネントをカスタムページに読み込ませてみましょう
 58 | 
 59 | ```vim
 60 | resources/views/filament/pages/imports.blade.php を開いて編集します
 61 | 
 62 | ---before---
 63 | <x-filament::page>
 64 | 
 65 | </x-filament::page>
 66 | ------------
 67 | ↓
 68 | ---after---
 69 | <x-filament::page>
 70 | <x-csv-button>データインポート</x-csv-button>
 71 | 
 72 | <livewire:csv-importer :model="App\Models\Post::class"
 73 |                         :columns-to-map="['id','title', 'body']"
 74 |                         :required-columns="['title', 'body']"
 75 |                         :column-labels="[
 76 |                             'id' => 'ID',
 77 |                             'title' => 'タイトル',
 78 |                             'body' => '本文',
 79 |                         ]" />
 80 | </x-filament::page>
 81 | -----------
 82 | 
 83 | ```
 84 | 
 85 | ダッシュボードに追加されたImportsにアクセスし直すと下記のような表示になります
 86 | 
 87 | <img width="1148" alt="image" src="https://user-images.githubusercontent.com/7894265/197439825-0d63e370-15cf-40aa-8ed5-749bbf6d21ef.png">
 88 | 
 89 | `データインポート`をクリックするとインポート用ウィンドウが画面右側からにょっきり生えてきます
 90 | <img width="1449" alt="image" src="https://user-images.githubusercontent.com/7894265/197439973-82fcacad-aed1-4d2c-a568-56f4ec81c35b.png">
 91 | 
 92 | ただし、Filamentのデフォルトのスタイルと相性が悪くてインポート用のボタンが見えません
 93 | ![image](https://user-images.githubusercontent.com/7894265/197440187-650a99cd-c221-42c5-80e9-eeda59912b79.png)
 94 | 
 95 | ### コンポーネントのカスタマイズ
 96 | インポート用のLivewireコンポーネントのViewファイルを`vendor:publish`してカスタマイズします
 97 | 
 98 | ```bash
 99 | php artisan vendor:publish --tag=livewire-csv-views
100 | 
101 | 
102 |    INFO  Publishing [livewire-csv-views] assets.  
103 | 
104 |   Copying directory [vendor/askdkc/livewire-csv/resources/views] to [resources/views/vendor/livewire-csv]  DONE
105 | 
106 | ```
107 | 
108 | 続いて `resources/views/vendor/livewire-csv/livewire/tailwindcss/csv-importer.blade.php` を開いて編集します
109 | 
110 | ```vim
111 | Filamentのカラーテーマはカスタムカラーを使っているので、そちらに合わせます(indigo→primary)
112 | 
113 | ---before---
114 | <button type="submit" class="ml-4 ...(中略)... bg-indigo-600 （後略） }}>{{ __('Import') }}</button>
115 | ------------
116 | ↓
117 | ---after---
118 | <button type="submit" class="ml-4 ...(中略)... bg-primary-600 （後略） }}>{{ __('Import') }}</button>
119 | -----------
120 | ```
121 | 
122 | 再度ダッシュボードからImportsのページを開き、データインポートをクリックすると下記のようにボタンの色が変わっています
123 | <img width="1449" alt="image" src="https://user-images.githubusercontent.com/7894265/197443383-8bba7a3f-d7ee-4bad-aa81-9a19a7e8d6d6.png">
124 | 
125 | 
126 | ### データインポートの準備
127 | データインポート用のコンポーネントはユーザモデルにCSVインポート機能を追加する必要があります
128 | `app/Models/User.php` を編集して必要な機能をモデルに付与します
129 | 
130 | ```vim
131 | app/Models/User.php
132 | 
133 | ---before---
134 | （略）
135 | use Illuminate\Notifications\Notifiable;
136 | use Laravel\Sanctum\HasApiTokens;
137 | 
138 | class User extends Authenticatable
139 | {
140 |     use HasApiTokens, HasFactory, Notifiable;
141 |     
142 | （略）
143 | ------------
144 | ↓
145 | ---after---
146 | （略）
147 | use Illuminate\Notifications\Notifiable;
148 | use Laravel\Sanctum\HasApiTokens;
149 | use Askdkc\LivewireCsv\Concerns\HasCsvImports; // 追加
150 | 
151 | class User extends Authenticatable
152 | {
153 |     use HasApiTokens, HasFactory, Notifiable, HasCsvImports; // 追加
154 | 
155 | （略）
156 | -----------
157 | ```
158 | 
159 | また、CSVファイルのインポート時にはLaravelのキューワーカー(Queue Worker)機能を使うので`.env`ファイルの`QUEUE_CONNECTION`を変更します
160 | 
161 | ```vim
162 | .env
163 | 
164 | ---before---
165 | QUEUE_CONNECTION=sync
166 | ------------
167 | ↓
168 | ---after---
169 | QUEUE_CONNECTION=database
170 | -----------
171 | ```
172 | > *ワンポイントアドバイス**
173 | > 
174 | > QUEUE_CONNECTIONのdatabase設定は開発時の試験用には便利ですが、本番運用時にはRedisを使うのがオススメです
175 | 
176 | ### CSVファイルを準備してインポート
177 | 下記のようなCSVファイルを作成し、ダッシュボードのImportsからファイルをアップロードして読み込ませます
178 | | id  | title  | body                                           |
179 | |---|---|-------------------------------------------------------|
180 | |  1 | サンプルタイトル1 | サンプルブログ記事です。        |
181 | |  2 | サンプルタイトル2 | この辺はサンプルなので適当に入力します |
182 | |  3 | サンプルタイトル3 | テストテスト |
183 | 
184 | CSVファイルの準備が出来たら、Laravelでキューワーカーを起動させます
185 | 
186 | ```bash
187 | php artisan queue:work
188 | 
189 |  INFO  Processing jobs from the [default] queue. 
190 | ```
191 | 
192 | ### CSVファイルのアップロードと更新確認
193 | 下記のような感じでCSVファイルをアップロードして動作を確認してみてください
194 | 
195 | ![csvimport](https://user-images.githubusercontent.com/7894265/197445787-12ce50c0-f02a-4bea-b34d-8a2f9a9438f1.gif)
196 | 
197 | 
198 | ## 以上、Filamentの便利なカスタムページの紹介でした👏
199 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Filamentの使い方
  2 | 
  3 | ## 各項目（初めての人は一通りの使い方ガイドを読んでね）
  4 | - [一通りの使い方ガイド](#filament一通りの使い方ガイド)
  5 | - [リソース管理画面の自動生成方法](sub/easiest-way.md)
  6 | - [データ追加編集時のリダイレクトについて](sub/redirect.md)
  7 | - [メニューのカスタムラベル](sub/change-model-name.md)
  8 | - [ソート機能追加方法](sub/add-sort.md)
  9 | - [検索機能追加方法](sub/add-search.md)
 10 | - [Userモデルのリソースページ作成方法](sub/user-resource-sample.md)
 11 | - [カスタムページの追加方法と応用例](sub/add-custom-page.md)
 12 | 
 13 | # Filament：一通りの使い方ガイド
 14 | 
 15 | ## 新規のLaravelプロジェクト作成
 16 | ```sh
 17 | % laravel new filavel
 18 | % cd filavel
 19 | % touch database/database.sqlite
 20 | % vi .env
 21 | ```
 22 | 
 23 | .envの編集
 24 | ```vim
 25 | ---before---
 26 | DB_CONNECTION=mysql
 27 | DB_HOST=127.0.0.1
 28 | DB_PORT=3306
 29 | DB_DATABASE=filavel
 30 | DB_USERNAME=root
 31 | DB_PASSWORD=
 32 | -------------
 33 | ↓
 34 | ---after---
 35 | DB_CONNECTION=sqlite
 36 | -----------
 37 | ```
 38 | 
 39 | ## Filamentのインストール
 40 | ```sh
 41 | % composer require filament/filament:"^2.0"
 42 | ```
 43 | 
 44 | ## サンプルモデル作成
 45 | ```sh
 46 | % php artisan make:model -m Post
 47 | % php artisan make:model -m Tag
 48 | ```
 49 | 
 50 | ### モデルのマイグレーション作成
 51 | ```vim
 52 | database/migrations/yyyy_mm_dd_hhmmss_create_posts_table.php
 53 | --------
 54 | public function up()
 55 | {
 56 |     Schema::create('posts', function (Blueprint $table) {
 57 |         $table->id();
 58 |         $table->timestamps();
 59 |     });
 60 | }
 61 | --------
 62 | ↓
 63 | --------
 64 | public function up()
 65 | {
 66 |     Schema::create('posts', function (Blueprint $table) {
 67 |         $table->id();
 68 |         $table->string('title');	//追加
 69 |         $table->text('body');	//追加
 70 |         $table->timestamps();
 71 |     });
 72 | }
 73 | --------
 74 | ```
 75 | 
 76 | ```vim
 77 | database/migrations/yyyy_mm_dd_hhmmss_create_tags_table.php
 78 | --------
 79 | public function up()
 80 | {
 81 |     Schema::create('tags', function (Blueprint $table) {
 82 |         $table->id();
 83 |         $table->timestamps();
 84 |     });
 85 | }
 86 | --------
 87 | ↓
 88 | --------
 89 | public function up()
 90 | {
 91 |     Schema::create('tags', function (Blueprint $table) {
 92 |         $table->id();
 93 |         $table->string('name')->unique();	//追加
 94 |         $table->timestamps();
 95 |     });
 96 | }
 97 | --------
 98 | 
 99 | ```
100 | 
101 | ## モデルリレーションシップテーブル作成
102 | ```sh
103 | php artisan make:migration create_post_tag_table
104 | ```
105 | 
106 | ## リレーションシップのマイグレーション作成
107 | ```vim
108 | database/migrations/yyyy_mm_dd_hhmmss_create_post_tag_table.php
109 | --------
110 | public function up()
111 | {
112 |     Schema::create('post_tag', function (Blueprint $table) {
113 |         $table->id();
114 |         $table->timestamps();
115 |     });
116 | }
117 | --------
118 | ↓
119 | --------
120 | public function up()
121 | {
122 |     Schema::create('post_tag', function (Blueprint $table) {
123 |         $table->id();
124 |         $table->unsignedInteger('post_id');
125 |         $table->unsignedInteger('tag_id');
126 |         $table->foreign('post_id')->references('id')->on('posts')->cascadeOnDelete();
127 |         $table->foreign('tag_id')->references('id')->on('tags')->cascadeOnDelete();
128 |         $table->unique(['post_id','tag_id']);
129 |         $table->timestamps();
130 |     });
131 | }
132 | --------
133 | ```
134 | 
135 | 
136 | ## マイグレーション実行
137 | ```sh
138 | % php artisan migrate
139 | ```
140 | 
141 | ## Postモデルの設定
142 | ```vim
143 | app/Models/Post.php
144 | ------
145 | class Post extends Model
146 | {
147 |     use HasFactory;
148 |     protected $fillable = ['title', 'body'];  //追加
149 |     
150 |     //下記も追加
151 |     public function tags() 
152 |     {
153 |         return $this->belongsToMany(Tag::class);
154 |     }
155 | }
156 | ------
157 | ```
158 | 
159 | ## Tagモデルの設定
160 | ```vim
161 | app/Models/Tag.php
162 | ------
163 | class Tag extends Model
164 | {
165 |     use HasFactory;
166 |     protected $fillable = ['name'];  //追加
167 | }
168 | ------
169 | ```
170 | 
171 | 
172 | ## Filament用管理ユーザ作成
173 | ```sh
174 | % php artisan make:filament-user
175 | 
176 |  Name:
177 |  > admin (管理者ユーザの名前入力)
178 | 
179 |  Email address:
180 |  > admin@localhost (管理者ユーザのメアド入力)
181 | 
182 |  Password:
183 |  >  (管理者ユーザのパスワード入力)
184 | 
185 | Success! admin@localhost may now log in at http://filavel.test/admin/login.
186 | 
187 |  Would you like to show some love by starring the repo? (yes/no) [yes]:
188 | → Filamentを気に入った時は yes と入力すると GitHub のリポに飛ぶので、スター押してね
189 | ```
190 | 
191 | ## Filamentにログイン
192 | ```sh
193 | % php artisan serve
194 | ```
195 | 
196 | ブラウザで http://localhost:8000/admin/login にアクセスする
197 | 
198 | ログイン認証画面が現れるので、管理ユーザ作成で入力したメールアドレスとパスワードでログインする
199 | ![8AF46A54-3446-4781-9153-649518B5964F](https://user-images.githubusercontent.com/7894265/189489414-bc295030-d4d8-4c0a-9831-83370be4340f.png)
200 | 
201 | 
202 | ## Filament用管理リソースを作成する
203 | Filamentの管理画面でモデルのデータが扱えるようにリソースを作成します。
204 | 
205 | > **ちなみに**  
206 | > 基本を飛ばして自動生成機能で楽したい人は[こちらをご確認ください](/sub/easiest-way.md)
207 | 
208 | リソース作成の基本を見たい人は、このまま👇の手順を進めてください
209 | 
210 | ```sh
211 | % php artisan make:filament-resource Post
212 | % php artisan make:filament-resource Tag
213 | ```
214 | 
215 | PostResource.phpファイルを編集します
216 | ```vim
217 | app/Filament/Resources/PostResource.php
218 | ---before---
219 | public static function form(Form $form): Form
220 | {
221 |     return $form
222 |         ->schema([
223 |             //
224 |         ]);
225 | }
226 | 
227 | public static function table(Table $table): Table
228 | {
229 |     return $table
230 |         ->columns([
231 |             //
232 |         ])
233 |         ->filters([
234 |             //
235 |         ])
236 |         ->actions([
237 |             Tables\Actions\EditAction::make(),
238 |         ])
239 |         ->bulkActions([
240 |             Tables\Actions\DeleteBulkAction::make(),
241 |         ]);
242 | }
243 | -----------
244 | ↓
245 | ---after---
246 | public static function form(Form $form): Form
247 | {
248 |     return $form
249 |         ->schema([
250 |             // ここに編集したい項目を追加する
251 |             Forms\Components\TextInput::make('title')->required()->label('タイトル')
252 |                 ->hint("ブログのタイトル入力"),
253 |             Forms\Components\Textarea::make('body')->required()->label('本文')
254 |                 ->helperText('本文を入力します')
255 |                 ->columnSpan('full'),
256 |         ]);
257 | }
258 | 
259 | public static function table(Table $table): Table
260 | {
261 |     return $table
262 |         ->columns([
263 |             // ここに表示したい項目を追加する
264 |             Tables\Columns\TextColumn::make('title')->label('タイトル'),
265 |             Tables\Columns\TextColumn::make('body')->label('本文'),
266 |         ])
267 |         ->filters([
268 |             //
269 |         ])
270 |         ->actions([
271 |             Tables\Actions\EditAction::make(),
272 |         ])
273 |         ->bulkActions([
274 |             Tables\Actions\DeleteBulkAction::make(),
275 |         ]);
276 | }
277 | -----------
278 | ```
279 | 
280 | TagResource.phpファイルを編集します
281 | ```vim
282 | app/Filament/Resources/TagResource.php
283 | ---before---
284 | public static function form(Form $form): Form
285 | {
286 |     return $form
287 |         ->schema([
288 |             //
289 |         ]);
290 | }
291 | 
292 | public static function table(Table $table): Table
293 | {
294 |     return $table
295 |         ->columns([
296 |             //
297 |         ])
298 |         ->filters([
299 |             //
300 |         ])
301 |         ->actions([
302 |             Tables\Actions\EditAction::make(),
303 |         ])
304 |         ->bulkActions([
305 |             Tables\Actions\DeleteBulkAction::make(),
306 |         ]);
307 | }
308 | -----------
309 | ↓
310 | ---after---
311 | public static function form(Form $form): Form
312 | {
313 |     return $form
314 |         ->schema([
315 |             // ここに編集したい項目を追加する
316 |             Forms\Components\TextInput::make('name')->required()->label('タグ')
317 |                 ->hint("タグ名を入力"),
318 |         ]);
319 | }
320 | 
321 | public static function table(Table $table): Table
322 | {
323 |     return $table
324 |         ->columns([
325 |             // ここに表示したい項目を追加する
326 |             Tables\Columns\TextColumn::make('name')->label('タグ'),
327 |         ])
328 |         ->filters([
329 |             //
330 |         ])
331 |         ->actions([
332 |             Tables\Actions\EditAction::make(),
333 |         ])
334 |         ->bulkActions([
335 |             Tables\Actions\DeleteBulkAction::make(),
336 |         ]);
337 | }
338 | -----------
339 | ```
340 | 
341 | 
342 | ### 管理画面の変更確認
343 | 管理画面にアクセスすると作成した各モデルリソースが表示されている(まだデータは無い)
344 | 
345 | ![149305F4-7BA3-4255-89AD-A46B215669D5](https://user-images.githubusercontent.com/7894265/189489440-5203ec0a-e782-4e85-8d86-7e058c75b4da.png)
346 | 
347 | こちらはTagモデル（まだデータは無い）
348 | ![A5428CCF-E8B2-4261-B7FE-3AE63BEAA388](https://user-images.githubusercontent.com/7894265/189489448-c1e4937b-592c-42d1-a97b-21d7f5890736.png)
349 | 
350 | 
351 | Postsリソースの右側の”New Post”をクリックして新規データを作成してみよう
352 | 
353 | ![59CCB38C-1F02-412F-808A-E0826D998B47](https://user-images.githubusercontent.com/7894265/189489463-84ce7afb-6372-46c7-86cb-d757ac6c8be7.png)
354 | 
355 | タイトルと本文を入力して”Create”をクリック
356 | ![9CFE0CF3-5736-45EF-9168-8BCBE4BA4EB5](https://user-images.githubusercontent.com/7894265/189489470-06531dde-4942-4a33-9baa-56711229a71e.png)
357 | 
358 | 右上に”Created”と表示されたら作成成功（保存時に一覧画面に戻りたい場合は[こちら](/sub/redirect.md)）。左側のメニューのPostsをクリックして作成されたデータを見てみよう
359 | ![435AB861-0F33-4E78-AA68-13579A31524F](https://user-images.githubusercontent.com/7894265/189489480-55146922-1930-4e14-b528-9ea60db95f3b.png)
360 | 
361 | 作成したデータが一覧に表示される（項目でソートしたい場合は[こちら](sub/add-sort.md)）
362 | ![800B4CDA-56A0-4190-9E08-DAE863783CA7](https://user-images.githubusercontent.com/7894265/189489502-f62acb32-6d0c-46d7-b8de-e835bcd2ec95.png)
363 | 
364 | ちなみにここでモデル名の箇所をLaravelのモデル名じゃなく、日本語で適切な名前を表示したい場合には[こちら](/sub/change-model-name.md)を参照
365 | 
366 | 
367 | ## Filamentメニューの日本語化
368 | そのままだとFilamentの各種メニューは英語表記なので、configを修正して日本語化しましょう
369 | ```vim
370 | config/app.php
371 | ---before---
372 |     'locale' => 'en',
373 | ------------
374 | ↓
375 | ---after---
376 |     'locale' => 'ja',
377 | -----------
378 | ```
379 | 
380 | 再度管理画面にアクセスするとメニューが日本語に変わっています。ちなみに項目の検索機能をつけたい方は 👉[こちら](sub/add-search.md)
381 | ![6F7D2D95-F8BC-497E-A346-B53B76E303C2](https://user-images.githubusercontent.com/7894265/189489522-f4346846-d3aa-43f2-88a6-06a52b793003.png)
382 | 
383 | 作成ボタンをクリック後も各種ボタンやラベルが日本語表記になります
384 | ![470FAB7A-C36C-4158-AE78-A603B63ED084](https://user-images.githubusercontent.com/7894265/189489531-5ab48d33-a783-40fd-bd1d-33e1a9d67a77.png)
385 | 
386 | >**ちなみに自分の方でFilamentのリリース[v2.15.29の#3716、#3717、#3718](https://github.com/filamentphp/filament/releases/tag/v2.15.29)のPRとリリース[v2.16.13の#4152、#4153、#4154](https://github.com/filamentphp/filament/releases/tag/v2.16.13)のPR、リリース[v2.16.17の#4202、#4203](https://github.com/filamentphp/filament/releases/tag/v2.16.17)、リリース[v2.16.19の#4294](https://github.com/filamentphp/filament/releases/tag/v2.16.19)で日本語化に貢献してます😏**
387 | 
388 | ## Filamentリレーションリソースの追加
389 | ```sh
390 | % php artisan make:filament-relation-manager PostResource tags name
391 | ```
392 | 
393 | ### PostモデルからTagの新規作成＆割当を可能にするボタン追加
394 | ```vim
395 | app/Filament/Resources/PostResource/RelationManagers/TagsRelationManager.php
396 | ---before---
397 | public static function table(Table $table): Table
398 | {
399 |     return $table
400 |         ->columns([
401 |             Tables\Columns\TextColumn::make('name'),
402 |         ])
403 |         ->filters([
404 |             //
405 |         ])
406 |         ->headerActions([
407 |             Tables\Actions\CreateAction::make(),
408 |         ])
409 |         (省略)
410 | }    
411 | ------------
412 | ↓
413 | ---after---
414 | public static function table(Table $table): Table
415 | {
416 |     return $table
417 |         ->columns([
418 |             Tables\Columns\TextColumn::make('name'),
419 |         ])
420 |         ->filters([
421 |             //
422 |         ])
423 |         ->headerActions([
424 |             Tables\Actions\CreateAction::make(),
425 |             Tables\Actions\AttachAction::make()->preloadRecordSelect()->label('タグ追加'), //追加
426 |         ])
427 |         (省略)
428 | }    
429 | -----------
430 | ```
431 | 
432 | 
433 | ### PostResourceにTagとのリレーションシップを追加
434 | ```vim
435 | app/Filament/Resources/PostResource.ph
436 | ---before---
437 | public static function getRelations(): array
438 | {
439 |     return [
440 |         //
441 |     ];
442 | }
443 | ------------
444 | ↓
445 | ---after---
446 | public static function getRelations(): array
447 | {
448 |     return [
449 |         PostResource\RelationManagers\TagsRelationManager::class, //追加
450 |     ];
451 | }
452 | ------------
453 | ```
454 | 
455 | ### 管理画面にアクセスし動作確認
456 | Tagの右側にある作成をクリック
457 | ![9E7534FC-6B64-4FE4-B178-C6A852C9571C](https://user-images.githubusercontent.com/7894265/189489554-cf72439f-8402-4f56-b0cf-5bc090032778.png)
458 | 
459 | 作成ウィンドウが開くのでタグ名を入力し作成をクリック
460 | ![11307C25-7A35-426F-8BA4-8475080720EB](https://user-images.githubusercontent.com/7894265/189489563-5e976a91-28a7-4975-9b58-33fe5bca831f.png)
461 | 
462 | Postデータに新規に作成されたTagデータが紐づきます
463 | ![14A98190-BA8F-4288-BAA0-C6C2C9A45485](https://user-images.githubusercontent.com/7894265/189489569-3b0f6cea-71ea-41e2-88d7-456a7291d334.png)
464 | 
465 | ### 既存データの追加
466 | 他のタグが存在する場合「タグ追加」ボタンから、既存のタグを付与することもできます。
467 | ![46084205-C9AE-400E-BBED-AEC4526898CE](https://user-images.githubusercontent.com/7894265/189489582-10076f3a-dd49-4df6-bd92-c5d84eb3455d.png)
468 | 
469 | Postデータから編集をクリックし、表示された編集画面のTagの右端にある「タグ追加」ボタンをクリック
470 | ![D32E255A-CB34-4B5F-9766-FFE2A1FF3D4B](https://user-images.githubusercontent.com/7894265/189489594-9a7c9f63-3fc4-45ca-be31-dc2d7d263631.png)
471 | 
472 | 表示されるタグ追加ウィンドウから既存のデータがドロップダウンや検索機能による絞り込みで選べます
473 | ![4D1AD9C1-A8BA-4661-B518-D6B5D14636DD](https://user-images.githubusercontent.com/7894265/189489602-e9a95317-70b0-4fc6-a877-4402113d225d.png)
474 | 
475 | ## リレーションシップの付け替えについて
476 | ちなみにこの画面の削除ボタンをクリックするとリレーションシップが外れるのではなく、sampleタグ自体が削除されてしまいます😱
477 | <img width="1020" alt="スクリーンショット 2022-09-12 15 41 23" src="https://user-images.githubusercontent.com/7894265/189590935-836cafa2-79e6-4f6a-88f4-323503b69412.png">
478 | 
479 | 
480 | これを防ぐには TagsRelationManager.php を以下のように変更します
481 | 
482 | ```vim
483 | app/Filament/Resources/PostResource/RelationManagers/TagsRelationManager.php
484 | ---before---
485 | public static function table(Table $table): Table
486 | {
487 |     return $table
488 |         ->columns([
489 |             Tables\Columns\TextColumn::make('name'),
490 |         ])
491 |         ->filters([
492 |             //
493 |         ])
494 |         ->headerActions([
495 |             Tables\Actions\CreateAction::make(),
496 |             Tables\Actions\AttachAction::make()->preloadRecordSelect()->label('タグ追加'),
497 |         ])
498 |         ->actions([
499 |             Tables\Actions\EditAction::make(),
500 |             Tables\Actions\DeleteAction::make(),
501 |         ])
502 |         ->bulkActions([
503 |             Tables\Actions\DeleteBulkAction::make(),
504 |         ]);
505 | }
506 | ------------
507 | ↓
508 | ---after---
509 | public static function table(Table $table): Table
510 | {
511 |     return $table
512 |         ->columns([
513 |             Tables\Columns\TextColumn::make('name'),
514 |         ])
515 |         ->filters([
516 |             //
517 |         ])
518 |         ->headerActions([
519 |             Tables\Actions\CreateAction::make(),
520 |             Tables\Actions\AttachAction::make()->preloadRecordSelect()->label('タグ追加'),
521 |         ])
522 |         ->actions([
523 |             Tables\Actions\EditAction::make(),
524 |             Tables\Actions\DetachAction::make(),  //ここをDeleteからDetachにしたよ
525 |         ])
526 |         ->bulkActions([
527 |             Tables\Actions\DeleteBulkAction::make(),
528 |         ]);
529 | }
530 | -----------
531 | ```
532 | 
533 | これで一安心😄
534 | 
535 | <img width="1020" alt="スクリーンショット 2022-09-12 15 45 18" src="https://user-images.githubusercontent.com/7894265/189591027-5d71cf14-d680-4557-a6b8-7995555a1c42.png">
536 | 
537 | 
538 | ## Userモデルの管理画面
539 | 
540 | ユーザモデルは新規登録時のメールアドレスのユニーク制限やパスワードのハッシュ化等、色々と考えるべきことが多いので、[こちらの別枠ドキュメント](/sub/user-resource-sample.md)を参考願います
541 | 
542 | ## カスタムページの追加
543 | 
544 | Filamentではリソースコンポーネントだけではなく、個別のカスタムページを作成して追加することも出来ます。詳しくは[こちらをご覧ください](/sub/add-custom-page.md)
545 | 
546 | ## 追加情報
547 | より詳しい情報はオフィシャルドキュメントを読もう👉 
548 | [Installation - Admin Panel - Filament](https://filamentphp.com/docs)
549 | 
550 | 
551 | ![visitors](https://visitor-badge.laobi.icu/badge?page_id=askdkc.filament-howto.visitor-badge)
552 | 


--------------------------------------------------------------------------------