コンテンツにスキップ

バリエーションマスタ管理機能仕様書

機能概要

バリエーションマスタ管理機能は、ECサイトで扱う商品のバリエーション（サイズ、色等）を管理するための管理画面機能です。バリエーションマスタの作成、編集、削除、一覧表示、並び替えなどの操作が可能です。

URL: /admin/product-var-msts ナビゲーション: 商品管理グループ（ソート順: 5） 技術スタック: Filament v4, Livewire v3

画面構成

一覧画面（List Product Var Msts）

バリエーションマスタの一覧を表示し、検索、ソート、並び替え、削除などの操作が可能です。

画面レイアウト

  • ヘッダーアクション: 新規作成ボタン（スライドオーバー表示、幅: Small）
  • テーブル: バリエーションマスタ一覧
  • ツールバー: 一括削除、フィルター、ページネーション

テーブルカラム

カラム名 表示内容 検索 ソート 表示/非表示
バリエーション名 variation_name ✅ ✅ 常時表示
バックエンド用名称 backend_name ✅ ✅ 常時表示
表示順序 sort_order - ✅ デフォルト非表示
作成日時 created_at - - 常時表示
更新日時 updated_at - - 常時表示

機能詳細

検索機能 - バリエーション名（variation_name）とバックエンド用名称（backend_name）で検索可能 - リアルタイム検索（入力と同時にフィルタリング）

ソート機能 - デフォルトソート: sort_order 昇順 - バリエーション名、バックエンド用名称、表示順序でソート可能

並び替え機能 - ドラッグ&ドロップで表示順序を変更可能 - sort_order カラムの値を自動更新 - 並び替え後は自動的にテーブルをリフレッシュ

ページネーション - デフォルト表示件数: 50件 - 表示件数オプション: 10, 20, 30, 40, 50, 100, 150, 200件

フィルター - モーダル表示（スライドオーバー） - モーダル幅: 4XL（FourExtraLarge）

一括削除 - 複数レコードを選択して一括削除可能 - 削除確認ダイアログ表示

レコードアクション - 編集 - 削除

作成画面（Create Product Var Mst）

新しいバリエーションマスタを作成するためのフォーム画面です。

フォーム項目

項目名 フィールド名 必須 最大文字数 説明
バリエーション名 variation_name ✅ 255 バリエーション名（サイズ、色等）
バックエンド用名称 backend_name ✅ 255 バックエンド用名称（size、color等、ユニーク）
表示順序 sort_order ✅ - 表示順序（数値、デフォルト: 0）

レイアウト構成

┌─────────────────────────────────────────┐
│ バリエーション名 | バックエンド用名称    │
│ 表示順序（全幅）                         │
└─────────────────────────────────────────┘

バリデーション

項目 ルール
バリエーション名 必須、最大255文字
バックエンド用名称 必須、最大255文字、ユニーク（product_var_mstsテーブル内）
表示順序 必須、数値

作成後の動作

  • 作成成功後、編集画面にリダイレクト
  • 成功通知を表示

編集画面（Edit Product Var Mst）

既存のバリエーションマスタを編集するためのフォーム画面です。

フォーム項目

作成画面と同じフォーム項目を使用します。

バリデーション

作成画面と同じバリデーションを適用します。ただし、バックエンド用名称のユニークチェックでは現在編集中のレコードを除外します。

ヘッダーアクション

  • 削除

保存後の動作

  • 保存成功後、編集画面にリフレッシュ（リダイレクトなし）
  • 成功通知を表示

バリエーション値管理（Relation Manager）

編集画面から、バリエーションマスタに紐づくバリエーション値を管理できます。

画面レイアウト

  • テーブル: バリエーション値一覧
  • ヘッダーアクション: 新規作成ボタン
  • ツールバー: 一括削除、ページネーション

テーブルカラム

カラム名 表示内容 検索 ソート 表示/非表示
バリエーション値 variation_value ✅ ✅ 常時表示
表示順序 sort_order - ✅ 常時表示
作成日時 created_at - - 常時表示
更新日時 updated_at - - 常時表示

機能詳細

検索機能 - バリエーション値（variation_value）で検索可能 - リアルタイム検索（入力と同時にフィルタリング）

ソート機能 - デフォルトソート: sort_order 昇順 - バリエーション値、表示順序でソート可能

並び替え機能 - ドラッグ&ドロップで表示順序を変更可能 - sort_order カラムの値を自動更新 - 並び替え後は自動的にテーブルをリフレッシュ

ページネーション - デフォルト表示件数: 50件 - 表示件数オプション: 10, 20, 30, 40, 50, 100, 150, 200件

一括削除 - 複数レコードを選択して一括削除可能 - 削除確認ダイアログ表示

レコードアクション - 削除

作成画面（Create Variation Value）

新しいバリエーション値を作成するためのフォーム画面です。

フォーム項目

項目名 フィールド名 必須 最大文字数 説明
バリエーション値 variation_value ✅ 255 バリエーション値（S、M、L等）
表示順序 sort_order ✅ - 表示順序（数値、自動設定: 最大値+1）

作成時の処理

  1. product_var_mst_idを自動設定（親レコードのID）
  2. sort_orderを自動設定（最大値+1）
  3. バリエーション値レコードを作成

バリデーション

項目 ルール
バリエーション値 必須、最大255文字、ユニーク（同一バリエーションマスタ内）
表示順序 必須、数値

バリデーション

フォームバリデーション

フィールド ルール エラーメッセージ
variation_name required, max:255 バリエーション名は必須です / バリエーション名は255文字以内で入力してください
backend_name required, max:255, unique:product_var_msts,backend_name,{id} バックエンド用名称は必須です / バックエンド用名称は255文字以内で入力してください / このバックエンド用名称は既に使用されています
sort_order required, numeric 表示順序は必須です / 表示順序は数値で入力してください
variation_value required, max:255, unique:product_var_mst_vals,variation_value,NULL,id,product_var_mst_id,{product_var_mst_id} バリエーション値は必須です / バリエーション値は255文字以内で入力してください / このバリエーション値は既に使用されています

エラーハンドリング

一般的なエラー

  • バリデーションエラー: フォーム内にエラーメッセージを表示
  • データベースエラー: エラーログに記録し、ユーザーにエラー通知を表示

削除時のエラー

  • 削除失敗: エラーログに記録し、ユーザーにエラー通知を表示

技術仕様

使用技術

  • Filament v4: 管理画面フレームワーク
  • Livewire v3: リアクティブコンポーネント
  • Alpine.js: クライアント側インタラクション（Livewireに同梱）

ファイル構成

app/Admin/Resources/ProductVarMsts/
├── ProductVarMstResource.php              # メインリソースクラス
├── Pages/
│   ├── ListProductVarMsts.php             # 一覧ページ
│   └── EditProductVarMst.php               # 編集ページ
├── Schemas/
│   ├── ProductVarMstForm.php               # フォームスキーマ
│   └── ProductVarMstValForm.php            # バリエーション値フォームスキーマ
├── Tables/
│   ├── ProductVarMstsTable.php             # テーブルスキーマ
│   └── VariationValuesTable.php            # バリエーション値テーブルスキーマ
└── RelationManagers/
    └── ValsRelationManager.php             # バリエーション値リレーションマネージャー

app/Models/
├── ProductVarMst.php                       # バリエーションマスタモデル
└── ProductVarMstVal.php                    # バリエーション値モデル

モデル機能

ProductVarMst（バリエーションマスタ） - vals(): hasMany(ProductVarMstVal::class) - このバリエーションマスタに属するバリエーション値

ProductVarMstVal（バリエーション値） - productVarMst(): belongsTo(ProductVarMst::class) - このバリエーション値のバリエーションマスタ

ページネーション設定

デフォルト表示件数: 50件（config/ecspoke.pagination.default_per_page）

表示件数オプション: 10, 20, 30, 40, 50, 100, 150, 200件（config/ecspoke.pagination.per_page_options）

UI/UX仕様

スライドオーバー表示 - 作成画面: スライドオーバー表示、幅: Small

モーダル表示 - フィルター: モーダル表示（スライドオーバー）、幅: 4XL

リレーションマネージャー - 編集画面内にバリエーション値管理テーブルを表示 - インライン編集可能

関連機能

商品管理機能との連携

  • 商品編集画面から商品バリエーションを管理可能
  • バリエーションマスタとバリエーション値を組み合わせて商品バリエーションを作成

商品バリエーション管理

  • 商品バリエーション（SKU）は商品編集画面から管理
  • バリエーションマスタとバリエーション値を組み合わせて商品バリエーションを作成

参照資料