Views Infinite Scroll
Drupal Views向けの無限スクロールページャープラグインを提供し、ユーザーがスクロールするか「もっと読み込む」ボタンをクリックすることでシームレスにコンテンツを読み込めます。
views_infinite_scroll
インストール
composer require 'drupal/views_infinite_scroll:^2.0'
composer require 'drupal/views_infinite_scroll:8.x-1.9'
概要
Views Infinite Scrollは、Viewsモジュールを拡張し、無限スクロール機能を実装する代替ページャータイプを提供する強力なDrupalモジュールです。番号付きページの従来のページネーションの代わりに、ユーザーがページをスクロールダウンすると自動的に、またはカスタマイズ可能な「もっと読み込む」ボタンをクリックすると手動で、コンテンツを動的に読み込むことができます。
このモジュールはDrupalのAJAXシステムとシームレスに統合され、ページをリロードせずに既存のビューに新しいコンテンツを追加します。動的トークンを含むカスタムボタンテキスト、スクロール時の自動コンテンツ読み込み、より良いディープリンクサポートのために要求されたページ番号までのすべてのページを最初に読み込む機能など、様々な設定をサポートしています。
Views Infinite Scrollは、ページ、ブロック、Entity View Attachment（EVA）ビューを含むあらゆるViewsディスプレイタイプで動作します。適切なキャッシュコンテキストを維持し、Viewsの公開フィルターをサポートしながら、大量のコンテンツコレクションを閲覧するためのスムーズなユーザー体験を提供します。
Features
- 標準のViewsページネーションを継続的なコンテンツ読み込みに置き換える無限スクロールページャープラグイン
- カスタマイズ可能なボタンテキストと動的トークンサポートを備えた手動「もっと読み込む」ボタンモード
- 設定可能なしきい値（下端から200px）でスクロール位置によってトリガーされる自動コンテンツ読み込み
- ボタンテキストでの動的トークンサポート：@next_page_count（次のページのアイテム数）、@remaining_items_count（残りの総数）、@total（総アイテム数）
- ディープリンクサポートのための全ページ初期読み込みオプション（要求されたページ番号までのすべてのコンテンツを読み込み）
- ページリロードなしのAJAX駆動コンテンツ追加
- Views AJAXシステムとの統合および適切なキャッシュコンテキスト処理
- Entity View Attachment（EVA）モジュールのビューサポート
- カスタムJavaScript統合用のjQueryイベントトリガー'views_infinite_scroll.new_content'
- 無限スクロールページャーを使用するビューでAJAXが有効になっていない場合の自動検証警告
Use Cases
ブログやニュース一覧の無限スクロール
無限スクロールを有効にした記事やブログ投稿を表示するページビューを作成します。訪問者がスクロールダウンすると、ソーシャルメディアフィードのようにページを更新せずに自動的に記事が読み込まれ、シームレスな閲覧体験を提供します。「コンテンツを自動読み込み」を有効にして設定し、items_per_pageでバッチサイズを制御します。
手動読み込みの商品カタログ
ユーザーが「さらに商品を読み込む」をクリックして追加アイテムを表示するEコマース商品一覧を構築します。ボタンテキストでトークンサポートを使用し、「さらに@next_page_count件の商品を読み込む（残り@remaining_items_count件）」のように、読み込まれる商品数と残りの数を正確に表示します。
ディープリンク対応の検索結果
ユーザーが検索結果の3ページ目へのリンク（例：?page=2）を共有した際に、先行するすべての結果も読み込まれるよう、検索結果ページで「すべてのページを最初に読み込む」を有効にします。これにより、ユーザーは完全なコンテキストを得て、スクロールアップして以前の結果を見ることができます。
遅延読み込みの画像ギャラリー
自動無限スクロールを備えたメディアギャラリービューを作成します。ユーザーが画像を閲覧すると、新しいバッチがシームレスに読み込まれます。大量の画像コレクションで最適なパフォーマンスを得るために、遅延読み込み画像モジュールと組み合わせます。
コメントやフォーラムスレッドのページネーション
フォーラムトピックや長いコメントスレッドの従来のコメントページネーションを無限スクロールに置き換えます。ユーザーは現在位置を失うことなく、ページ読み込みを待つことなく、継続的にディスカッションをスクロールできます。
カスタムJavaScript統合
'views_infinite_scroll.new_content' jQueryイベントをリッスンして、新しいコンテンツが読み込まれたときにカスタムJavaScriptをトリガーします。例えば、画像ギャラリーの初期化、新しい要素へのイベントハンドラーのアタッチ、読み込まれたコンテンツのアナリティクストラッキングのトリガーなどです。
Tips
- 無限スクロールページャーを使用する場合は、必ずビューの詳細設定で「AJAXを使用」を有効にしてください - モジュールが機能するために必要です
- ボタンテキストで@remaining_items_countトークンを使用して、ユーザーに残りのコンテンツ量を表示し、期待を設定するのに役立てます
- 多くのページがあるビューでは、ディープリンクが重要な場合にのみ「すべてのページを最初に読み込む」を有効にしてください。初期ページ読み込み時間が増加する可能性があります
- 'views_infinite_scroll.new_content' jQueryイベントはクローンされた要素を渡すため、DOMに影響を与えずに検査できます
- スクロールパフォーマンスとビューポートサイズが大きく異なるモバイルデバイスで無限スクロール動作をテストしてください
- トラブルシューティング時は、ブラウザのネットワークタブを確認して、追加ページを取得するAJAXリクエストが行われていることを確認してください
- 200pxのスクロールしきい値はプリロードとパフォーマンスの良いバランスを提供します。ユーザーが下端に到達する直前にコンテンツが読み込まれます
Technical Details
Hooks 4
hook_preprocess_views_infinite_scroll_pager
Views無限スクロールページャーテンプレート用の変数を前処理します。次のページリンクを計算し、キャッシュコンテキストを設定し、自動読み込みデータ属性を含むページャー属性を設定します。
hook_preprocess_views_view
無限スクロールページャーがアクティブな場合、ビューの行ラッパー要素にデータ属性とCSSクラスを追加します。このラッパーは、JavaScriptが新しいコンテンツを追加する場所を識別するために不可欠です。
hook_preprocess_eva_display_entity_view
Entity View Attachment（EVA）コントリビュートモジュールを通じてレンダリングされるビューに対して、hook_preprocess_views_viewと同じ前処理ロジックを適用します。
hook_form_view_edit_form_alter
無限スクロールページャーを使用するビューを編集する際に、AJAXが有効になっているかを検証します。無限スクロールにはAJAXが必要なため、AJAXが無効な場合は警告メッセージを表示します。
Troubleshooting 6
ビューディスプレイでAJAXが有効になっていることを確認してください。ビュー設定に移動し、詳細設定で「AJAXを使用」を有効にします。無限スクロールページャーを使用している場合にAJAXが無効だと、モジュールは警告を表示します。
スクロールしきい値はページャー要素の下端から200ピクセルに設定されています。コンテンツの高さが大きく変わる場合は、代わりに手動「もっと読み込む」モードを使用するか、しきい値を調整するカスタムJavaScriptを実装することを検討してください。
エンティティ内にビューを埋め込む場合は、EVA（Entity View Attachment）モジュールをインストールして使用してください。モジュールはhook_preprocess_eva_display_entity_view()を通じてEVAビューを特別にサポートしています。
ボタンテキストが正しい形式でトークンを含んでいることを確認してください：@next_page_count、@remaining_items_count、または@total。トークンは大文字小文字を区別し、@プレフィックスを含める必要があります。
新しいコンテンツは.views-infinite-scroll-content-wrapperコンテナ内に追加されます。CSSセレクターがこのラッパー内の要素をターゲットにしていることを確認してください。フロートベースのレイアウトを処理するために'clearfix'クラスが自動的に追加されます。
すべてのライブラリ依存関係が正しく読み込まれていることを確認してください。モジュールはDrupal coreのjQuery、Drupal.once、Drupal.debounce、views.ajaxライブラリを必要とします。他のモジュールとのJavaScriptの競合を確認してください。