Blazy
bLazy、Intersection Observer API、またはブラウザネイティブの遅延読み込みを使用してメディアの遅延読み込みを提供し、帯域幅とサーバーリクエストを最適化します。
blazy
インストール
composer require 'drupal/blazy:^3.0'
概要
Blazyは、Drupal向けの包括的なメディア遅延読み込みソリューションです。bLazyライブラリ、Intersection Observer API、およびブラウザネイティブの遅延読み込みと統合し、画面下部の画像が必要になるまで読み込みを遅延させます。これにより帯域幅を節約し、サーバーリクエストを削減することで、ユーザーの読み込み時間を短縮します。
このモジュールは、コア画像、レスポンシブ画像、ローカルおよびリモート動画、SVGファイル、iframeなど、幅広いメディアタイプをサポートしています。遅延読み込み付きでメディアを表示するためのField formatter、グリッドレイアウト（CSS3 Columns、Flexbox、Native Grid）、およびColorbox、Magnific Popup、PhotoSwipe、組み込みのBlazybox/Flybox lightboxとの統合を提供します。
Blazyは、Slick、Splide、GridStack、Masonなど多くの他のDrupalモジュールの基盤として機能し、メディア処理、グリッド表示、lightbox機能のための統一されたAPIを提供します。
Features
- Intersection Observer APIまたはブラウザネイティブ遅延読み込みを使用した画像、レスポンシブ画像、動画、iframe、SVGの遅延読み込み
- マルチブレークポイントCSS背景サポートによるマルチサービング遅延読み込み画像
- Image、Media、Entity Reference、File/SVG、OEmbed、TextフィールドのField formatter
- グリッドレイアウト：CSS3 Columns、Grid Foundation、Flexbox、CSS3 Masonry付きNative Grid
- Lightbox統合：Colorbox、Magnific Popup、PhotoSwipe、および組み込みのBlazyboxとFlybox
- ショートコードサポート付きテキストコンテンツ内のインライン画像とiframe用Blazy Filter
- Blazy Gridスタイルプラグインと、FileおよびMedia用Viewsフィールドを含むViews統合
- クライアントサイドおよびlocalStorageキャッシュオプション付きBlurプレースホルダーエフェクトを含む画像エフェクト
- 1pxプレースホルダー最適化によるレスポンシブ画像サポート
- インラインレンダリングとサニタイズ付きSVGサポート（enshrined/svg-sanitizeライブラリが必要）
- 古いブラウザ用polyfill付きWEBPサポート
- 流動的および固定比率のアスペクト比サポート
- 静的/アーカイブサイト（AMP、Tome、HTTrack）向けJavaScriptなしで動作
- 任意のImage formatterでBlazyを有効にするサードパーティformatter設定
- フィールド設定可能なlightboxキャプション付きキャプションサポート
Use Cases
遅延読み込み画像ギャラリー
複数値画像フィールドでBlazy Image formatterを使用して遅延読み込み画像ギャラリーを作成します。「メディアスイッチャー」オプションでlightbox（Colorbox、Magnific Popup、PhotoSwipe）を有効にします。自動レスポンシブギャラリーレイアウトのため、希望するグリッドタイプ（Native Grid、Flexbox、CSS Columns）で「Blazy Grid」スタイルを選択します。
ポスター画像付き動画/メディアギャラリー
Mediaを指すエンティティ参照フィールドでBlazy Media formatterを使用します。「メディアスイッチャー」を「画像からiframe」として構成し、クリック時にビデオプレイヤーに切り替わるポスター画像を表示します。カスタムポスター画像用にVideoおよびRemote videoバンドルにfield_media_imageを追加します。
レスポンシブ画像最適化
Blazy UI設定で「レスポンシブ画像1pxプレースホルダー」を有効にし、Blazy formatterでレスポンシブ画像スタイルを選択します。これは1px data URIプレースホルダーを使用して、レスポンシブ画像の動作を維持しながらフォールバック画像のダウンロードを防ぎます。
Blurプレースホルダーエフェクト
Blazy UI設定の画像エフェクトで「blur」を選択します。blurプレースホルダーサイズ用にformatterでThumbnailスタイルを構成します。最適なパフォーマンスのため「クライアントサイドblurを使用」と「blurをlocalStorageに保存」を有効にします。
Lightbox付きViewsグリッド表示
FormatでBlazy Gridスタイルプラグインを使用してViewを作成します。Blazy formatter（blazy_fileまたはblazy_media）でViewsフィールドを追加します。formatterでlightboxを構成します。グリッドはlightboxギャラリーナビゲーションのためアイテムを自動的にグループ化します。
インラインコンテンツ遅延読み込み
希望するテキストフォーマットで/admin/config/content/formatsからBlazy filterを有効にします。高度な機能にはショートコードを使用：グリッド用に[blazy grid="nativegrid:2-3-4"]..images..[/blazy]、またはエンティティメディアフィールドをインライン埋め込みするには[blazy data="node:44:field_media" /]。
メディア背景付きLayout Builder
Blazy Layoutサブモジュールを有効にします。Layout BuilderでBlazy Layoutセクションを追加します。Media Library（Media library form elementモジュールが必要）を使用するか、Blazy formatterと「CSS背景を使用」を有効にしたContentブロックフィールドを追加してリージョン背景を構成します。
インラインレンダリング付きSVG
Composer経由でenshrined/svg-sanitizeライブラリをインストールします。SVGアップロード用にFileフィールドタイプを使用します。サニタイズ付き直接SVGレンダリングのため、インラインSVGオプションを有効にしたBlazy File formatterを適用します。
Tips
- 互換性の問題を避けるため、BlazyとそのサブモジュールSlick、Splideなど）のモジュールバージョンを一致させてください - DEVにはDEV、安定版には安定版。
- Views結果全体での自動lightboxギャラリーグループ化のため、「Blazy formatter」フィールドでBlazy Grid Viewsスタイルを使用してください。
- パフォーマンスのため、ブラウザネイティブ遅延読み込みのみを使用しblurエフェクトやCSS背景が不要な場合は、Blazy UIの「JavaScriptなし > Lazyload」を有効にしてください。
- blazy()ヘルパー関数はプロシージャルコードでBlazyManagerサービスへの素早いアクセスを提供します。
- hook_blazy_settings_alter()を使用して、blazies css.ratio値を設定することでインラインパディングスタイルなしでカスタムアスペクト比を追加できます。
- Blazy Filterショートコードはエンティティ埋め込みをサポート：[blazy data="node:123:field_media" /]はノードのメディアフィールドをインラインでレンダリングします。
- 開発時は、デバッグ情報を公開する「blazy」オブジェクトをブラウザコンソールで確認してください。
- BlazyはCspSubscriberイベントサブスクライバーを通じてContent Security Policyを自動的に処理します。
- 複数値フィールドから特定のメディアアイテムを異なるLayout Builderリージョンにマッピングするには、formatterの「By delta」オプションを使用してください。
Technical Details
Admin Pages 1
/admin/config/media/blazy
遅延読み込み動作、画像エフェクト、polyfill、およびIntersectionObserver APIオプションのグローバルBlazy設定を構成します。
権限 1
Hooks 9
hook_blazy_attach_alter
カスタムライブラリ、drupalSettings、またはJSテンプレートを追加するためにBlazyアタッチメントを変更します。
hook_blazy_lightboxes_alter
formatter設定のMedia switch選択で利用可能なlightboxオプションを変更します。
hook_blazy_alter
カスタムlightboxをサポートしたり画像/ビデオレンダリングを変更するために個々のBlazyアイテム出力を変更します。
hook_blazy_build_alter
ラッパー、プレフィックスを追加したり、グリッドコンテナを変更するためにBlazy出力全体を変更します。
hook_blazy_base_settings_alter
すべてのformatterにカスタムオプションを追加するためにblazy関連のformatter基本設定を変更します。
hook_blazy_settings_alter
すべての子要素に継承されるblazy設定を変更します。formatterおよびViewsで呼び出されます。
hook_blazy_item_alter
ミックスメディアコンテンツのカスタマイズに便利な個々のblazyアイテム設定を変更します。
hook_blazy_form_element_alter
最終化前にblazy関連のformatterフォーム要素を変更します。新しいフォーム項目を追加するのに最適な場所です。
hook_blazy_complete_form_element_alter
最終化後にblazy関連のformatterフォーム要素を変更します。既存の要素を変更するのに便利です。
Troubleshooting 7
スクロールコンテナ（モーダル、パララックス）を使用しているか確認してください。Blazy UI設定の「スクロールコンテナ」にコンテナCSSセレクターを追加してください。IO設定の「切断」のチェックを外してみてください。画像に適切な寸法またはアスペクト比が構成されていることを確認してください。
「Blazy設定」セクションのBlazy UI設定で「非表示を読み込み」オプションを有効にして隠し要素を読み込みます。
Viewsのサニタイズがdata:image URIを除去します。Blazy UIの「プレースホルダー」フィールドに、Drupal webルートに配置したblank.svgまたはblank.gifファイルへのURLパスを構成してください。
formatter設定でThumbnail画像スタイルが構成されていることを確認してください。「Blur最小幅」が高すぎる値に設定されていないか確認してください。画像の崩壊を防ぐためアスペクト比が構成されていることを確認してください。
Viewsを使用する場合、スタイル設定の「フィールドテンプレートを使用」のチェックを外してください。これにより、Blazyはフィールドごとのギャラリーではなく単一のギャラリーにアイテムをグループ化できます。
SVG Sanitizerライブラリをインストール：composer require enshrined/svg-sanitize。インストール後にキャッシュをクリアしてください。
DOMPurifyライブラリをインストール：composer require npm-asset/dompurify。/libraries/dompurify/dist/purify.min.jsに配置してください。これがないと、基本的なサーバーサイドサニタイズのみが適用されます。
Security Notes 5
- 「administer blazy」権限は「restrict access: true」とマークされています - 信頼できる管理者にのみ付与してください。
- SVGインラインレンダリングにはXSS保護のためenshrined/svg-sanitizeライブラリが必要です。
- LightboxのHTMLキャプションは、ユーザー生成コンテンツのクライアントサイドサニタイズのためDOMPurifyライブラリを使用すべきです。
- Blazy Filterの「Trust data URI」オプションにはセキュリティ上の影響があります - 信頼できるコンテンツエディターに対してのみ有効にしてください。
- テキストコンテンツで[blazy data="..."]ショートコードを使用する場合、テキストフォーマットが信頼できるユーザーに制限されていることを確認してください。