ブランド管理機能仕様書
機能概要
ブランド管理機能は、ECサイトで扱う商品ブランドを管理するための管理画面機能です。ブランドの作成、編集、削除、一覧表示、並び替えなどの操作が可能です。
URL: /admin/brands
ナビゲーション: 商品管理グループ（ソート順: 1）
技術スタック: Filament v4, Livewire v3
画面構成
一覧画面（List Brands）
ブランドの一覧を表示し、検索、ソート、並び替え、削除などの操作が可能です。
画面レイアウト
- ヘッダーアクション: 新規作成ボタン（スライドオーバー表示）
- テーブル: ブランド一覧
- ツールバー: 一括削除、フィルター、ページネーション
テーブルカラム
| カラム名 | 表示内容 | 検索 | ソート | 表示/非表示 |
|---|---|---|---|---|
| ブランド名 | name |
✅ | - | 常時表示 |
| ロゴ | logo_image |
- | - | 常時表示 |
| スラッグ | slug |
✅ | - | 常時表示 |
| 有効/無効 | is_active |
- | - | 常時表示（アイコン） |
| 表示順序 | sort_order |
- | ✅ | デフォルト非表示 |
| 作成日時 | created_at |
- | ✅ | デフォルト非表示 |
| 更新日時 | updated_at |
- | ✅ | デフォルト非表示 |
機能詳細
検索機能
- ブランド名（name）とスラッグ（slug）で検索可能
- リアルタイム検索（入力と同時にフィルタリング）
ソート機能
- デフォルトソート: sort_order 昇順
- 表示順序、作成日時、更新日時でソート可能
並び替え機能
- ドラッグ&ドロップで表示順序を変更可能
- sort_order カラムの値を自動更新
- 並び替え後は自動的にテーブルをリフレッシュ
ページネーション - デフォルト表示件数: 50件 - 表示件数オプション: 10, 20, 30, 40, 50, 100, 150, 200件
フィルター - モーダル表示（スライドオーバー） - モーダル幅: 4XL（FourExtraLarge）
一括削除 - 複数レコードを選択して一括削除可能 - 削除確認ダイアログ表示
レコードアクション - 編集（スライドオーバー表示） - 削除（モーダル表示）
作成画面（Create Brand）
新しいブランドを作成するためのフォーム画面です。
フォーム項目
| 項目名 | フィールド名 | 必須 | 最大文字数 | 説明 |
|---|---|---|---|---|
| ブランド名 | name |
✅ | 255 | ブランドの表示名 |
| スラッグ | slug |
✅ | 255 | URL用スラッグ（ユニーク） |
| ロゴ画像 | logo_image |
- | - | ブランドロゴ画像（単一） |
| 有効 | is_active |
✅ | - | 有効/無効トグル（デフォルト: true） |
| 表示順序 | sort_order |
✅ | - | 表示順序（数値、デフォルト: 0） |
| ブランド画像（複数） | images |
- | - | ブランド画像（最大10枚） |
| ブランド説明 | description |
- | - | リッチエディタ対応の説明文 |
レイアウト構成
┌─────────────────────────────────────────┐
│ 1行目: ブランド名 | スラッグ │
├─────────────────────────────────────────┤
│ 2行目: ロゴ画像 | 有効/表示順序（2列） │
├─────────────────────────────────────────┤
│ 3行目: ブランド画像（複数、全幅） │
├─────────────────────────────────────────┤
│ 4行目: ブランド説明（全幅） │
└─────────────────────────────────────────┘
画像アップロード機能
ロゴ画像
- 保存先: public/brands/
- ディスク: public
- プレビュー高さ: 100px
- 単一画像のみ
ブランド画像（複数）
- 保存先: public/brands/
- ディスク: public
- 最大ファイル数: 10枚
- 並び替え可能（ドラッグ&ドロップ）
- プレビュー高さ: 100px
- レイアウト: グリッド表示
リッチエディタ機能
ブランド説明欄では、以下の機能を持つリッチエディタを使用します。
ツールバーボタン - テキスト装飾: 太字、斜体、下線、取り消し線、上付き、下付き、リンク、コード - 見出し: H1, H2, H3 - 配置: 左揃え、中央揃え、右揃え、両端揃え - リスト: 箇条書き、番号付きリスト、引用、コードブロック - 書式: クリア、ハイライト、文字色、リード、スモール - 詳細: 折りたたみ、水平線、グリッド、グリッド削除 - テーブル: テーブル作成、列追加、行追加、セル結合、セル分割、ヘッダー行切り替え、テーブル削除 - ファイル: ファイル添付、HTML編集 - 操作: 元に戻す、やり直し
ファイル添付
- 保存先: public/brands/
- ディスク: public
最小高さ: 300px
バリデーション
| 項目 | ルール |
|---|---|
| ブランド名 | 必須、最大255文字 |
| スラッグ | 必須、最大255文字、ユニーク（brandsテーブル内） |
| 有効 | 必須 |
| 表示順序 | 必須、数値 |
作成後の動作
- 作成成功後、一覧画面にリダイレクト
- 成功通知を表示
編集画面（Edit Brand）
既存のブランドを編集するためのフォーム画面です。
フォーム項目
作成画面と同じフォーム項目を使用します。
バリデーション
作成画面と同じバリデーションを適用します。ただし、スラッグのユニークチェックでは現在編集中のレコードを除外します。
特別な確認ダイアログ
有効から無効への変更時 - 条件: 現在の状態が「有効」で、新しい状態が「無効」、かつ商品で使用されている場合 - 表示内容: 「このブランドは{N}件の商品で使用されています。無効にして良いですか。」 - 確認ボタン: 「保存」
保存後の動作
- 保存成功後、一覧画面にリフレッシュ（リダイレクトなし）
- 成功通知を表示
削除機能（Delete Brand）
ブランドを削除する機能です。
削除確認ダイアログ
商品で使用されている場合 - 表示内容: - 「このブランドは{N}件の商品で使用されています。削除後、これらの商品のブランド情報は空になります。」 - 「よろしいですか？」
商品で使用されていない場合 - 表示内容: 「このブランドを削除してもよろしいですか？」
削除時の処理
- 関連商品の
brand_idをNULLに設定 - ブランドレコードを削除
- 一覧画面にリフレッシュ
- 成功通知を表示
注意: 商品本体は削除されません。ブランド情報のみが空になります。
バリデーション
フォームバリデーション
| フィールド | ルール | エラーメッセージ |
|---|---|---|
name |
required, max:255 |
ブランド名は必須です / ブランド名は255文字以内で入力してください |
slug |
required, max:255, unique:brands,slug,{id} |
スラッグは必須です / スラッグは255文字以内で入力してください / このスラッグは既に使用されています |
is_active |
required |
有効フラグは必須です |
sort_order |
required, numeric |
表示順序は必須です / 表示順序は数値で入力してください |
ビジネスロジックバリデーション
有効から無効への変更 - 商品で使用されているブランドを無効化する場合、確認ダイアログを表示 - ユーザーが確認した場合のみ無効化を実行
エラーハンドリング
一般的なエラー
- バリデーションエラー: フォーム内にエラーメッセージを表示
- データベースエラー: エラーログに記録し、ユーザーにエラー通知を表示
- ファイルアップロードエラー: アップロード失敗時はエラーメッセージを表示
削除時のエラー
- 外部キー制約エラー: 関連商品がある場合でも削除可能（
brand_idをNULLに設定） - 削除失敗: エラーログに記録し、ユーザーにエラー通知を表示
技術仕様
使用技術
- Filament v4: 管理画面フレームワーク
- Livewire v3: リアクティブコンポーネント
- Alpine.js: クライアント側インタラクション（Livewireに同梱）
ファイル構成
app/Admin/Resources/
├── BrandResource.php # メインリソースクラス
└── BrandResource/Pages/
├── ListBrands.php # 一覧ページ
└── CreateBrand.php # 作成ページ（BaseCreateRecordを継承）
app/Models/
└── Brand.php # モデルクラス
モデル機能
リレーション
- products(): hasMany(Product::class) - このブランドに属する商品
スコープ
- active(): is_active = true のブランドを取得
削除時の処理
- deletingイベントで関連商品のbrand_idをNULLに設定
ファイル保存
画像保存先
- ロゴ画像: storage/app/public/brands/
- ブランド画像: storage/app/public/brands/
- リッチエディタ添付ファイル: storage/app/public/brands/
ディスク設定
- 使用ディスク: public
- シンボリックリンク: php artisan storage:link で作成済み
ページネーション設定
デフォルト表示件数: 50件（config/ecspoke.pagination.default_per_page）
表示件数オプション: 10, 20, 30, 40, 50, 100, 150, 200件（config/ecspoke.pagination.per_page_options）
UI/UX仕様
スライドオーバー表示 - 作成画面: スライドオーバー表示 - 編集画面: スライドオーバー表示 - フィルター: スライドオーバー表示（幅: 4XL）
モーダル表示 - 削除確認: モーダル表示 - 有効→無効変更確認: モーダル表示
画像プレビュー - 高さ: 100px - グリッドレイアウト（ブランド画像複数時）
リッチエディタ - 最小高さ: 300px - 全機能付きツールバー
関連機能
商品管理機能との連携
- 商品作成・編集画面でブランドを選択可能
- ブランド削除時、関連商品の
brand_idが自動的にNULLに設定される - ブランド無効化時、確認ダイアログで商品数を表示
フロントエンド表示
- 有効なブランド（
is_active = true）のみフロントエンドで表示 - 表示順序（
sort_order）に基づいてソート表示