Varbase Media
Drupalサイトのメディアコンテンツとエンティティブラウザを包括的に管理するVarbase機能モジュールです。
varbase_media
インストール
composer require 'drupal/varbase_media:^10.1'
composer require 'drupal/varbase_media:^10.0'
概要
Varbase Mediaは、Varbaseディストリビューションの中核をなすメディア管理モジュールです。画像、動画（ローカル・リモート）、音声、ファイル、ギャラリーなど、多様なメディアタイプを統合的に管理できます。
Entity Browserを活用したメディアライブラリ機能により、コンテンツ編集者は既存のメディアを簡単に再利用したり、新しいメディアをドラッグ＆ドロップでアップロードしたりできます。YouTube、VimeoなどのリモートビデオはURLを貼り付けるだけで埋め込み可能です。
Focal Point（焦点）とCrop API対応により、画像の重要な部分を保持したまま様々なサイズにクロップできます。また、Blazyによる遅延読み込み、Slick Carouselによるギャラリースライダーなど、パフォーマンスとユーザー体験を向上させる機能も統合されています。
CKEditor5との統合により、WYSIWYGエディター内でメディアを直接埋め込み・編集でき、レスポンシブイメージスタイルライブラリにより様々な画面サイズに最適化された画像表示が可能です。
Features
- Image、Remote Video、Video、Audio、File、Galleryの6種類のメディアタイプを提供し、包括的なメディア管理を実現
- Entity Browserによるメディアライブラリブラウザ機能（ライブラリからの選択、URLからの埋め込み、ドラッグ＆ドロップアップロード）
- YouTube、Vimeoなどのリモートビデオ対応（oEmbed統合）とカスタムカバー画像サポート
- Focal Point対応による焦点を考慮した画像クロップ機能
- レスポンシブイメージスタイルライブラリとBootstrap5準拠のブレークポイント定義
- メディアデータの自動入力機能（名前、Alt、Titleの相互同期）
- CKEditor5統合によるWYSIWYGエディター内でのメディア埋め込み・編集
- Slick Carouselによるギャラリースライダー機能
- AI Image Alt Text モジュールとの連携によるAI代替テキスト生成ボタン
- メディアバルクアップロード機能（Dropzone.js対応）
- カスタムoEmbedフォーマッターによるビデオプロバイダー別のカスタマイズ
Use Cases
コンテンツエディターによるメディア管理
コンテンツエディターは、記事やページの編集中にMedia Libraryボタンをクリックしてメディアブラウザを開き、既存のメディアをライブラリから選択するか、新しい画像をドラッグ＆ドロップでアップロードできます。YouTubeやVimeoの動画はURLを貼り付けるだけで埋め込み可能です。
画像の焦点設定とクロップ
画像をアップロード後、Focal Pointを使用して画像の焦点（最も重要な部分）を設定できます。様々なサイズにクロップされる際も、設定した焦点が保持されるため、サムネイルやバナーでも重要な部分が切り取られません。
ギャラリー作成と表示
Galleryメディアタイプを使用して、複数の画像やビデオを含むギャラリーを作成できます。作成したギャラリーはSlick Carouselでスライダー表示され、自動再生、フェードエフェクト、無限スクロールなどの効果が適用されます。
リモートビデオの埋め込みとカバー画像
YouTubeやVimeoのビデオURLを入力すると、自動的にサムネイルが取得されます。さらにカスタムカバー画像を設定でき、ページ読み込み時にはカバー画像が表示され、クリックするとビデオ再生が開始されます。
メディアの一括アップロード
大量の画像やファイルを一度にアップロードする必要がある場合、/admin/content/media/bulk-uploadページからDropzoneを使用して複数ファイルをドラッグ＆ドロップでアップロードできます。
メディアデータの自動入力
画像メディアを作成する際、名前フィールドに入力すると、AltテキストとTitleが自動的に同じ値で入力されます。逆にAltテキストを先に入力すると、名前とTitleに反映されます。これによりSEOとアクセシビリティに配慮したメディア管理が効率化されます。
ソーシャルメディア連携
varbase_media_instagramとvarbase_media_twitterサブモジュールを有効化することで、InstagramやTwitterの投稿をメディアとして埋め込むことができます。URLを貼り付けるだけで自動的に認識され、適切な形式で表示されます。
Tips
- メディアライブラリでは「ライブラリに表示」フィールドを使用して、再利用可能なメディアと一時的なメディアを区別できます
- ギャラリーには最低1つのメディアアイテムが必要です。空のギャラリーは保存できません
- リモートビデオのカバー画像を設定すると、ページ読み込み時のパフォーマンスが向上します（iframeの遅延読み込み）
- メディアビューでBetter Exposed Filtersを使用して、作成日範囲やタイプでフィルタリングできます
- Entity Cloneモジュールを使用すると、既存のメディアを複製して編集できます
- WebP画像形式をサポートしており、より効率的な画像配信が可能です
Technical Details
Admin Pages 2
/admin/content/media
サイト内のすべてのメディアアイテムを一覧表示・管理できるページです。グリッド表示とテーブル表示を切り替え可能で、メディアタイプやキーワードでフィルタリングできます。
/admin/content/media/bulk-upload/{media_bulk_config}
複数のメディアファイルをドラッグ＆ドロップで一括アップロードできるページです。
権限 21
Hooks 6
hook_media_source_info_alter
メディアソースプラグイン定義を変更するフック。Varbase Mediaはこのフックを使用してoEmbed:videoソースにInputMatchInterfaceを追加します。
hook_entity_presave
エンティティ保存前に実行されるフック。Varbase Mediaはリモートビデオメディアの保存時にプロバイダー情報を自動設定します。
hook_preprocess_field
フィールドの前処理フック。varbase_oembedフォーマッターを使用するフィールドにプロバイダー情報を追加します。
hook_theme_suggestions_media_oembed_iframe_alter
oEmbed iframeのテーマサジェスチョンを追加するフック。プロバイダーやビューモードに基づいたテンプレートサジェスチョンを提供します。
hook_form_entity_embed_dialog_alter
Entity Embedダイアログフォームを変更するフック。メディアタイプに応じたフォーム要素の表示/非表示を制御します。
hook_library_info_alter
ライブラリ定義を変更するフック。media_libraryウィジェットにVarbase Media拡張を追加し、CKEditor5メディア機能に必要なライブラリを追加します。
Troubleshooting 5
public://icons ディレクトリに書き込み権限があることを確認してください。権限が不足している場合はファイルシステムの権限を修正するか、手動でアイコンファイルをコピーしてください。
oEmbed設定でYouTubeとVimeoプロバイダーが有効になっていることを確認してください。また、サイトがSSL（HTTPS）で動作していることを確認してください。HTTPサイトではoEmbedが正しく動作しない場合があります。
Entity Browserモジュールが正しくインストールされ、ユーザーに 'access media_browser entity browser pages' 権限が付与されていることを確認してください。
サーバーのアップロードサイズ制限（upload_max_filesize、post_max_size）を確認してください。また、ユーザーに 'dropzone upload files' 権限があることを確認してください。
AI Image Alt Textモジュールがインストールされ、有効化されていることを確認してください。このモジュールはVarbase Mediaと連携して動作します。
Security Notes 4
- メディアの作成・編集権限は、信頼できるユーザーロールにのみ付与してください
- アップロード可能なファイル拡張子は設定で制限されていますが、追加のセキュリティ対策としてサーバーレベルでの制限も推奨されます
- oEmbedを使用したリモートビデオはiframe内で表示され、セキュリティ上の分離が維持されます
- Entity Usage統計へのアクセス権限は、メディアの使用状況を確認する必要があるユーザーにのみ付与してください