File Entity Browser
Entity BrowserとEntity Embed APIを基盤に、MasonryグリッドレイアウトとDropzoneJSアップロードを使用して、Drupalに美しくモダンなメディアライブラリ体験を提供します。
file_browser
インストール
composer require 'drupal/file_browser:^2.0'
概要
File Entity Browserモジュールは、Drupalのコンテンツ編集者に直感的なファイルブラウジング体験を提供します。ファイルをレスポンシブなグリッドベースのMasonryレイアウトで表示し、画像やその他のファイルの閲覧、アップロード、選択を簡単に行えます。
主な目標は、Entity BrowserやEntity Embedなどのモダンなドrupal APIを活用しながら、Drupal 7のMedia Libraryの使いやすい体験を再現することです。このモジュールはドラッグ＆ドロップファイルアップロード用にDropzoneJSを統合し、カーディナリティ対応のスマートなアイテム選択にBackbone.jsを使用しています。
iframeとモーダル両方の表示モードですぐに使える事前設定済みのEntity Browserと、ブラウザインターフェース用に最適化されたカスタム画像スタイルを提供します。
Features
- 自動画像読み込み検出機能付きのレスポンシブMasonryグリッドレイアウトでファイルを閲覧
- 対応ファイルタイプ検証付きドラッグ＆ドロップファイルアップロードのためのDropzoneJS統合
- iframe（幅100%、高さ768px）とモーダル（1100x650px）表示モードを備えた事前設定済みEntity Browser
- フィールドのカーディナリティに基づく単一選択・複数選択対応のBackbone.jsによるスマートファイル選択
- サムネイル表示付きファイルプレビューをレンダリングするカスタムViewsフィールドプラグイン
- 代替テキストと並び替え対応で複数画像を配置するImage Embedブロック
- FileおよびImageフィールドタイプと互換性のあるフィールドウィジェット
- 異なるサイズでファイルを表示するための画像スタイル選択付きプレビューモーダル
- 選択したファイルのサムネイルを表示するマルチステップ選択ディスプレイ
- 柔軟なライブラリパス管理のためのLibrariesモジュールとの統合
- すぐに使えるコンテンツタイプとブロックタイプ設定を提供するサンプルサブモジュール
Use Cases
メディアリッチなコンテンツ編集
コンテンツ編集者は、ノードの作成や編集時に、視覚的でグリッドベースのインターフェースを通じて既存のメディアファイルを簡単に閲覧し、新しいファイルをアップロードできます。Masonryレイアウトは、モバイルからデスクトップまでスケールする、Pinterestのようなモダンなブラウジング体験を提供します。
WYSIWYGエディターでの画像埋め込み
Entity Embed統合を使用して、編集者はCKEditorのテキストエリアに画像を直接挿入できます。エディターツールバーのFile Browserボタンでファイル選択用のモーダルブラウザが開き、異なる画像スタイルでのプレビューをサポートします。
複数画像フィールドの選択
複数の画像を必要とするフィールド（ギャラリー、スライドショー）の場合、選択インターフェースは視覚的インジケーターで選択アイテムを追跡し、ドラッグによる並び替えをサポートし、制限に達した際に視覚的フィードバックでカーディナリティ制限を適用します。
カスタムブロック画像ギャラリー
サイトビルダーはImage Embedブロックプラグインを使用して、設定可能な画像スタイル、アクセシビリティのための代替テキスト、画像のドラッグ＆ドロップ並び替えを備えた画像ギャラリーブロックを作成できます。
サンプルモジュールによるクイックプロトタイピング
開発者はFile Browser Exampleサブモジュールを有効にすることで、File Browserフィールドが設定されたコンテンツタイプとブロックタイプをすぐに利用でき、デモンストレーションやカスタム実装の出発点として便利です。
Tips
- JavaScriptライブラリの自動管理のために、Wikimedia Composer Merge Pluginを使用し、merge-plugin設定にcomposer.libraries.jsonを含めてください
- File Browser Exampleサブモジュールを有効にすると、File Browserでフィールドを設定する方法のデモンストレーションをすぐに確認できます
- モーダル表示（browse_files_modal）は、ページリロードが不要でよりクリーンなユーザー体験を提供するため、ほとんどのユースケースで推奨されます
- ブラウザ内のファイルをダブルクリックすると、自動的に選択されてブラウザが閉じます。単一選択フィールドに便利です
- ファイルブラウザの検索フィールドはデバウンス入力（600ミリ秒遅延）を使用し、入力中の過度なフィルタリングを防ぎます
- 大規模なファイルライブラリでは、パフォーマンスと使いやすさのバランスを取るためにViewsのページャー設定のカスタマイズを検討してください
Technical Details
Admin Pages 1
/admin/file-browser-preview/{file}/{image_style}
モーダルダイアログでファイルのプレビューを表示します。画像ファイルの場合、異なる画像スタイルを選択して様々なサイズで画像をプレビューできます。画像以外のファイルはプレースホルダーSVGを表示します。
Hooks 4
hook_form_alter
Entity Browserフォーム（browse_filesおよびbrowse_files_modalフォーム）にFile Browserライブラリとクラスを追加
hook_preprocess_details
details要素に表示されるファイルブラウザ参照フィールド用にiframe CSSライブラリを追加
hook_library_info_alter
Librariesモジュールと統合し、Backbone、Underscore、imagesLoaded、MasonryのJavaScriptライブラリパスを動的に解決
hook_views_data_alter
Viewsで使用するためにfile_managedテーブルにカスタムfile_browser_previewフィールドを追加
Troubleshooting 5
必要なすべてのJavaScriptライブラリ（Backbone、Underscore、imagesLoaded、Masonry）が正しいフォルダ名で/librariesディレクトリにインストールされていることを確認してください: /libraries/backbone/backbone-min.js、/libraries/underscore/underscore-min.js、/libraries/imagesloaded/imagesloaded.pkgd.min.js、/libraries/masonry/dist/masonry.pkgd.min.js
File Browserウィジェットは既にそれを使用しているフィールドにのみ表示されます（後方互換性）。新規フィールドでは、Entity Browserのウィジェットを使用し、Entity Browserとして「File Browser」または「File Browser (Modal)」を選択してください。
ブラウザコンソールでJavaScriptエラーを確認してください。imagesLoadedライブラリが正しくインストールされていることを確認してください。Masonryの初期化は画像の読み込みを待ってからグリッドレイアウトを計算します。
Webサーバーがpublic://ファイルディレクトリ（通常はsites/default/files）への書き込み権限を持っていることを確認してください。モジュールはインストール時にアイコンファイルを保存します。
Entity Browserとその依存関係が正しくインストールされていることを確認してください。browse_files_modal Entity Browser設定が存在し、JavaScriptライブラリがエラーなく読み込まれていることを確認してください。
Security Notes 3
- ファイルアクセスはDrupalのエンティティアクセスシステムを使用してチェックされます - ユーザーはプレビューを見るためにファイルの「view」権限が必要です
- アップロードウィジェットは設定されたファイル拡張子制限を尊重します（デフォルト: jpg、jpeg、gif、png、txt、doc、xls、pdf、ppt、pps、odt、ods、odp）
- ブラウザを通じてアップロードされたファイルはデフォルトでpublic://に保存されます - 機密ファイルが必要な場合は、Entity Browserウィジェット設定をカスタマイズしてprivate://にアップロードするようにしてください