画像・動画・YouTube・Vimeoを一括管理する最高級メディアギャラリープラグイン

📖

マニュアル・設定方法

➔

商品ページの購買体験を劇的に向上させるオールインワンメディアギャラリー

ProductMediaGalleryは、EC-CUBE 4.2.x / 4.3.x の商品詳細ページにECモール品質のリッチメディアギャラリーを導入するプラグインです。
高解像度画像・自社ホスト動画(MP4/WebM)・YouTube(Standard & Shorts)・Vimeo を一元管理し、購買意欲を高める最高級の閲覧体験を提供します。

---

ノーコード設定画面

• 4種類のレイアウトプリセット:サムネイル下配置(Amazon風)/ サムネイル左配置(高級ブランド風)/ スライダー風 / グリッド(カタログ風)
• メインビューアーの高さ(350px〜800px)、テーマカラー、各機能のON/OFFを管理画面から自由にカスタマイズ

多種メディア対応

• 画像(JPG, PNG, GIF, WebP)、動画(MP4, WebM)のアップロード
• YouTube / Vimeo のURL貼り付けだけでサムネイル自動取得&レスポンシブ埋め込み
• 自社動画はHTML5 Canvasによるポスター画像の自動生成に対応

3D拡大鏡ズーム&モバイルスワイプ

• ホバー拡大鏡(3Dガラスレンズ):マウスオーバーで2.5倍・60fpsのスムーズな高精細拡大表示
• モバイルタッチスワイプ:弾性スプリングフィードバック付きの滑らかな指操作
• フルスクリーンLightbox:画像・動画をモーダルで全画面拡大表示。グラスモフィズムキャプション付き

SEO最適化(Schema.org JSON-LD)

• 各メディアにALTテキスト・タイトルを個別設定可能
• ImageObject / VideoObject の構造化データ(JSON-LD)を自動生成
• Google画像検索・動画検索でのリッチスニペット表示を支援

共有メディアライブラリ

• 過去にアップロードしたメディアを全商品横断で再利用(ワンクリック追加)
• ファイル重複なし(Zero Duplication)でサーバー容量を節約
• ファイル名・タイトル・ALT・元商品名でのリアルタイム検索に対応

その他の機能

• SNSシェアボタン(X, Facebook, LINE, Email, リンクコピー)
• EC-CUBEデフォルト商品画像とのマージ表示
• 商品複製時のメディアレコード&ファイル自動引き継ぎ
• CSRF保護・ファイル拡張子/MIMEタイプのダブルチェック

---

設定場所:管理画面 > 商品管理 > メディアギャラリー設定

「商品管理 > メディアギャラリー設定」より、専門知識(CSSやJavaScriptの記述)を一切必要とせず、ショップのブランドイメージや商品ジャンルに合わせた最適なギャラリー表示・動作をノーコードで直感的にカスタマイズできます。

■ 1. 4種類のレイアウトパターン(デザイン切替)

商品ジャンルやショップのテイストに合わせて、ワンクリックでフロント表示レイアウトを切り替え可能です。

• サムネイル左配置(標準縦型): 左側に縦並びのサムネイル、右側にメインビューアーを配置。アパレルやハイブランドECに最適な洗練された王道モダンデザインです。
• サムネイル下配置(横型): メイン画像の下部にサムネイルを横一列スクロールで配置。Amazonや大手ECモールで親しみのある操作しやすいレイアウトです。
• インスタグラム風グリッド配置: 画像や動画を一括でグリッド(タイル状)に配置。SNSライクで視覚的な訴求力が高く、写真集やカタログ形式の魅せ方に最適です。
• タッチスライダー(スワイプ対応): スマホでの閲覧に特化した全画面スワイプスライダー。直感的な指先操作で快適にメディアを切り替えられます。

■ 2. デザイン・サイズ調整

• アクティブ枠線のカラー (HEX): カラーピッカーまたはカラーコード(#2563eb 等)の入力により、選択中のサムネイル枠線をショップのキーカラー・ブランドカラーに統一できます。
• メイン表示エリアの高さ: メイン画像・動画の縦サイズ(標準520pxなど)を調整し、ファーストビューのバランスを最適化します。
• SNSシェアボタンの位置: メイン画像エリア上の配置位置(右上・左上など)をレイアウトに応じて柔軟に変更できます。

■ 3. 機能ON/OFF設定(柔軟な機能コントロール)

• ホバーズーム(拡大鏡)機能: PC閲覧時にマウスを重ねると、高精細な虫眼鏡ズームレンズが出現。生地の質感や細部のディテールをしっかりアピールできます。
• ライトボックス拡大表示: 画像・動画クリック時に画面全体へモーダルポップアップ表示。高解像度での閲覧体験を提供します。
• SNSシェアボタン(5種対応): X(旧Twitter)、Facebook、LINE、メール、URLリンクコピーボタンの表示/非表示を一括切り替え。
• EC-CUBE標準「商品画像」との結合表示: 従来の商品画像をギャラリー末尾に結合してシームレスに表示するか、本プラグインの登録メディアのみを表示するかを選択可能。既存データからの移行時も安心です。

商品登録・編集画面に「メディアギャラリー管理」エリアを自動追加。高画質画像・自社動画・YouTube・Vimeoの登録や並び替え、さらに全商品で素材を使い回せる「メディアライブラリ」により、商品登録作業の効率を劇的に向上させます。

■ 1. 多様なメディア形式に完全対応

• 高画質画像: JPG / PNG / GIF / WebP のドラッグ&ドロップ一括アップロードに対応。
• 自社ホスト動画: MP4 / WebM 動画ファイルを直接アップロード可能(再生用ポスター画像を自動生成)。
• YouTube / Vimeo 埋め込み: 動画のURL(YouTube 通常動画・Shorts、Vimeo)を貼り付けるだけで、サムネイル画像を自動取得してスマートに登録できます。

■ 2. 直感的なドラッグ&ドロップ並び替え&SEO設定

• 直感的な並び替え: 登録済みメディアカードをドラッグ&ドロップするだけで表示順を即座に変更可能(1番目のメディアがメイン画像として表示されます)。
• ALT / タイトル(SEO個別設定): 各メディアの鉛筆アイコンから、画像・動画ごとのALTテキストとタイトルを個別に設定可能。Google画像検索・動画検索(リッチリザルト)での露出を高めます。

■ 3. 共有メディアライブラリ(素材の再利用・容量節約)

• ワンクリック再利用: 「📁 メディアライブラリから選択」ボタンから、過去に別商品でアップロードしたメディアを一覧表示し、複数選択してワンクリックで現在の新商品に追加できます。
• サーバー容量0バイト消費: 実ファイルを二重生成せず同一ファイルを参照するため、サーバーディスク容量を圧迫しません。
• スマート検索: ファイル名・タイトル・ALTテキスト・元商品名でのリアルタイム絞り込み検索に対応。大量の素材の中から目的のメディアを瞬時に見つけ出せます。

■ 4. 商品複製(コピー)機能との完全連動

EC-CUBE標準の「商品を複製」実行時、登録された画像・動画・動画埋め込み情報も自動的に新商品へ引き継がれるため、バリエーション商品の登録もスムーズです。

1. EC-CUBE 4.3系（Symfony 6）でのインストール・有効化エラーの修正
- サービス定義（services.yaml）において Psr\Container\ContainerInterface のエイリアス定義およびコントローラーのタグ設定を追加し、インストール時に発生する Autowire エラー（ContainerInterface missing）を解消しました。

2. データベースマイグレーション処理の安全性向上
- マイグレーション実行時における初期設定データ投入処理のタイミングを最適化し、PostgreSQL環境を含めた各種データベースでのインストール・有効化時の安定性を向上させました。