タグ管理機能仕様書
機能概要
タグ管理機能は、ECサイトで扱う商品タグを管理するための管理画面機能です。タグの作成、編集、削除、一覧表示、並び替えなどの操作が可能です。
URL: /admin/tags
ナビゲーション: 商品管理グループ（ソート順: 4）
技術スタック: Filament v4, Livewire v3
画面構成
一覧画面（List Tags）
タグの一覧を表示し、検索、ソート、並び替え、削除などの操作が可能です。
画面レイアウト
- ヘッダーアクション: 新規作成ボタン（スライドオーバー表示、幅: Small）
- テーブル: タグ一覧
- ツールバー: 一括削除、ページネーション
テーブルカラム
| カラム名 | 表示内容 | 検索 | ソート | 表示/非表示 |
|---|---|---|---|---|
| タグ名 | name |
✅ | ✅ | 常時表示 |
| 枠線色 | border_color |
- | - | 常時表示（カラースウォッチ） |
| 背景色 | bg_color |
- | - | 常時表示（カラースウォッチ） |
| 文字色 | text_color |
- | - | 常時表示（カラースウォッチ） |
| 表示順序 | sort_order |
- | ✅ | デフォルト非表示 |
| 作成日時 | created_at |
- | - | 常時表示 |
| 更新日時 | updated_at |
- | - | 常時表示 |
機能詳細
検索機能
- タグ名（name）で検索可能
- リアルタイム検索（入力と同時にフィルタリング）
ソート機能
- デフォルトソート: sort_order 昇順
- タグ名、表示順序でソート可能
並び替え機能
- ドラッグ&ドロップで表示順序を変更可能
- sort_order カラムの値を自動更新
- 並び替え後は自動的にテーブルをリフレッシュ
ページネーション - デフォルト表示件数: 50件 - 表示件数オプション: 10, 20, 30, 40, 50, 100, 150, 200件
フィルター - モーダル表示（スライドオーバー） - モーダル幅: 4XL（FourExtraLarge）
一括削除 - 複数レコードを選択して一括削除可能 - 削除確認ダイアログ表示
レコードアクション - 編集（スライドオーバー表示、幅: Small） - 削除（モーダル表示）
作成画面（Create Tag）
新しいタグを作成するためのフォーム画面です。
フォーム項目
| 項目名 | フィールド名 | 必須 | 最大文字数 | 説明 |
|---|---|---|---|---|
| タグ名 | name |
✅ | 255 | タグの表示名 |
| 枠線色 | border_color |
- | - | タグの枠線色（HEXカラー） |
| 背景色 | bg_color |
- | - | タグの背景色（HEXカラー） |
| 文字色 | text_color |
- | - | タグの文字色（HEXカラー） |
| 表示順序 | sort_order |
✅ | - | 表示順序（数値、デフォルト: 0） |
レイアウト構成
┌─────────────────────────────────────────┐
│ タグ名 │
│ 枠線色 │
│ 背景色 │
│ 文字色 │
│ 表示順序 │
└─────────────────────────────────────────┘
カラーピッカー機能
枠線色、背景色、文字色 - HEXカラーピッカーを使用 - カラーコードを直接入力可能 - カラーパレットから選択可能
バリデーション
| 項目 | ルール |
|---|---|
| タグ名 | 必須、最大255文字、ユニーク |
| 表示順序 | 必須、数値 |
作成後の動作
- 作成成功後、一覧画面にリフレッシュ
- 成功通知を表示
編集画面（Edit Tag）
既存のタグを編集するためのフォーム画面です。
フォーム項目
作成画面と同じフォーム項目を使用します。
バリデーション
作成画面と同じバリデーションを適用します。ただし、タグ名のユニークチェックでは現在編集中のレコードを除外します。
保存後の動作
- 保存成功後、一覧画面にリフレッシュ（リダイレクトなし）
- 成功通知を表示
削除機能（Delete Tag）
タグを削除する機能です。
削除確認ダイアログ
商品で使用されている場合 - 表示内容: - 「このタグは{N}件の商品で使用されています。タグを削除すると、商品からタグが解除されます。」 - 「よろしいですか？」
商品で使用されていない場合 - 表示内容: 「このタグを削除してもよろしいですか？」
削除時の処理
- タグレコードを削除
- 関連商品のタグ関連付けは解除される（商品本体は削除されない）
- 一覧画面にリフレッシュ
- 成功通知を表示
注意: 商品本体は削除されません。タグ情報のみが解除されます。
バリデーション
フォームバリデーション
| フィールド | ルール | エラーメッセージ |
|---|---|---|
name |
required, max:255, unique:tags,name,{id} |
タグ名は必須です / タグ名は255文字以内で入力してください / このタグ名は既に使用されています |
sort_order |
required, numeric |
表示順序は必須です / 表示順序は数値で入力してください |
エラーハンドリング
一般的なエラー
- バリデーションエラー: フォーム内にエラーメッセージを表示
- データベースエラー: エラーログに記録し、ユーザーにエラー通知を表示
削除時のエラー
- 削除失敗: エラーログに記録し、ユーザーにエラー通知を表示
技術仕様
使用技術
- Filament v4: 管理画面フレームワーク
- Livewire v3: リアクティブコンポーネント
- Alpine.js: クライアント側インタラクション（Livewireに同梱）
ファイル構成
app/Admin/Resources/
├── TagResource.php # メインリソースクラス
└── TagResource/Pages/
└── ListTags.php # 一覧ページ
app/Models/
└── Tag.php # モデルクラス
モデル機能
リレーション
- products(): belongsToMany(Product::class) - このタグに属する商品
スコープ
- active(): is_active = true のタグを取得（現在未使用）
ページネーション設定
デフォルト表示件数: 50件（config/ecspoke.pagination.default_per_page）
表示件数オプション: 10, 20, 30, 40, 50, 100, 150, 200件（config/ecspoke.pagination.per_page_options）
UI/UX仕様
スライドオーバー表示 - 作成画面: スライドオーバー表示、幅: Small - 編集画面: スライドオーバー表示、幅: Small
モーダル表示 - 削除確認: モーダル表示
カラースウォッチ - 枠線色、背景色、文字色をカラースウォッチで表示 - カラーコードを表示
関連機能
商品管理機能との連携
- 商品作成・編集画面でタグを選択可能
- 複数タグを選択可能
- タグ削除時、関連商品のタグ関連付けは解除される（商品本体は削除されない）
フロントエンド表示
- タグはバッジ形式で表示
- 枠線色、背景色、文字色を適用して表示