Views Bootstrap
Drupal Views に Bootstrap 5 コンポーネントスタイルを提供し、View の結果をアコーディオン、カード、カルーセル、グリッド、タブ、テーブルなどの Bootstrap UI コンポーネントとして表示できるようにします。
views_bootstrap
インストール
composer require 'drupal/views_bootstrap:^5.3'
概要
Views Bootstrap モジュールは、Bootstrap 5 コンポーネントを Drupal Views と統合し、サイトビルダーがカスタムコードを書くことなく、一般的な Bootstrap UI パターンを使用して View の結果を出力できるようにします。このモジュールは、Bootstrap の CSS フレームワークコンポーネントを使用してコンテンツをレンダリングする追加のスタイルプラグインで Views を拡張します。
View の結果を単純なリストやテーブルとして表示する代わりに、このモジュールを使用すると、インタラクティブなアコーディオン、レスポンシブなカードレイアウト、画像カルーセル/スライドショー、ドロップダウンメニュー、レスポンシブグリッド、リストグループ、画像とテキストを含むメディアオブジェクト、タブインターフェース、Bootstrap のテーブルクラスを使用したスタイル付きテーブルとしてコンテンツを表示できます。
各スタイルプラグインは Views UI 内に設定フォームを提供し、View フィールドをコンポーネントパーツ（カードタイトル、カルーセル画像、アコーディオンヘッダーなど）にマッピングしたり、コンポーネントの動作（アニメーション効果、レスポンシブブレークポイント、スタイリングオプション）をカスタマイズしたりできます。モジュールは、JavaScript 機能のための適切な CSS クラスとデータ属性を持つ正しい Bootstrap 5 マークアップを生成します。
このモジュールは、グリッドレイアウト用の Bootstrap 5 のレスポンシブブレークポイントシステム（xs、sm、md、lg、xl、xxl）をサポートし、適切な ARIA 属性によるアクセシビリティ機能を提供し、ユーザー生成コンテンツの XSS 保護を含んでいます。
Features
- Bootstrap Accordion スタイルプラグイン - View の結果を折りたたみ可能なアコーディオンパネルとして表示し、開閉状態の設定、フラッシュボーダーオプション、フィールド値によるコンテンツのグループ化をサポート
- Bootstrap Cards スタイルプラグイン - オプションの画像、タイトル、本文コンテンツを持つ Bootstrap カードコンポーネントとしてコンテンツをレンダリングし、card-group とグリッドベースのレイアウトの両方をサポートし、行ごとのカラム数を設定可能
- Bootstrap Carousel スタイルプラグイン - ナビゲーションコントロール、インジケーター、自動再生オプション、フェード/スライドエフェクト、ホバー時の一時停止、マルチカラムサポート、レスポンシブキャプションを備えた画像スライドショーを作成
- Bootstrap Dropdown スタイルプラグイン - カスタマイズ可能なボタンテキスト、ボタンスタイル（primary、secondary、success、warning、danger など）、適切な ARIA メニューロールを持つドロップダウンメニューとして View の結果を表示
- Bootstrap Grid スタイルプラグイン - ブレークポイントごとのカラム幅設定（xs から xxl）を持つ Bootstrap のレスポンシブグリッドシステムでコンテンツを出力し、等幅、auto-fit、または特定のカラム数をサポート
- Bootstrap List Group スタイルプラグイン - オプションのアイテムタイトルとカスタム CSS クラスを持つ Bootstrap リストグループとしてコンテンツをレンダリング
- Bootstrap Media Object スタイルプラグイン - 見出しと本文テキストの横に画像を配置してコンテンツを表示し、画像の配置（左/右）と垂直方向の配置（上/中/下）を設定可能
- Bootstrap Tabs スタイルプラグイン - タブまたはピルナビゲーション、複数の位置オプション（上、左、右、下、両端揃え、スタック）、フェードエフェクト、タブへのコンテンツグループ化をサポートするタブインターフェースを作成
- Bootstrap Table スタイルプラグイン - レスポンシブラッパー、ボーダー付き/ボーダーなし、コンパクト、ホバー、ストライプ行スタイルなどの Bootstrap テーブルクラスでコア Views テーブルを拡張
- View ごとおよび Display ごとのテンプレートオーバーライド用のテーマ提案システム（例：views_bootstrap_accordion__my_view__block_1.html.twig）
- thumbnail から cards、panel から cards への変換を含む、古いモジュールバージョンからの自動マイグレーション
Use Cases
カルーセルを使用した画像ギャラリー
コンテンツ画像を Bootstrap カルーセルとして表示する画像ギャラリー View を作成します。View で Bootstrap Carousel スタイルを使用するよう設定し、画像フィールドをカルーセル画像にマッピングし、オプションでタイトルと説明のキャプションを追加します。ユーザー操作のためにナビゲーションコントロールとインジケーターを有効化します。自動再生間隔を設定するか、手動ナビゲーション用に自動再生を無効化します。
カードレイアウトのチームメンバー
チームメンバープロフィールをレスポンシブグリッドの Bootstrap カードとして表示します。ユーザーまたはチームコンテンツの View を作成し、Bootstrap Cards スタイルを選択し、プロフィール写真をカード画像に、名前をカードタイトルに、自己紹介をカードコンテンツにマッピングします。モバイルでスタックするグリッドレイアウト用にカラムを 3 または 4 に設定します。
アコーディオンを使用した FAQ セクション
アコーディオンスタイルを使用して FAQ ページを構築します。FAQ コンテンツタイプの View を作成し、Bootstrap Accordion スタイルを選択し、質問フィールドをパネルタイトルにマッピングします。動作を「すべてのアイテムを閉じる」に設定して、ユーザーが必要なものだけを展開できるようにします。ページデザインとのシームレスな統合のためにフラッシュボーダーを有効化します。
タブを使用したカテゴリナビゲーション
カテゴリ分けされたコンテンツのタブナビゲーションを作成します。カテゴリ/タクソノミーフィールドをタブフィールドとして Bootstrap Tabs スタイルを使用します。各カテゴリタブの下にすべてのコンテンツを集約するために tab_output を「grouped」に設定します。サイドバーナビゲーション用にピルスタイルと垂直左位置を選択します。
レスポンシブデータテーブル
ソート可能でレスポンシブなテーブルで構造化データを表示します。responsive を有効にした Bootstrap Table スタイルを使用します。タブレットや携帯電話で水平スクロールを有効にするために responsive_size を「medium 画面まで」に選択します。読みやすさを向上させるためにストライプとホバースタイルを追加します。
メディアオブジェクトとしてのニュースアイテム
メディアオブジェクトレイアウトを使用して、サムネイル画像付きのニュースティーザーを表示します。アイキャッチ画像を image フィールド、見出しを heading、要約を body として Bootstrap Media Object スタイルを設定します。従来のニュースレイアウト用に画像配置を左に設定します。
レスポンシブカラムを持つ商品グリッド
レスポンシブカラム幅を持つ商品一覧を作成します。Bootstrap Grid スタイルを使用し、col_sm を 2 カラム（幅 6）、col_md を 3 カラム（幅 4）、col_lg を 4 カラム（幅 3）に設定します。商品は各画面サイズで最適なカラム数で表示されます。
アクションメニュードロップダウン
管理インターフェース用のクイックアクションドロップダウンを構築します。アクションリンクの View を作成し、Bootstrap Dropdown スタイルを使用し、ボタンテキストを「Actions」に、btn-primary スタイルに設定します。各 View の結果がドロップダウンメニューアイテムになります。
Tips
- テーマに Bootstrap 5 の CSS と JavaScript が含まれている必要があります - モジュールは Bootstrap マークアップを生成しますが、Bootstrap ライブラリ自体は含まれていません
- View ごとのテンプレートカスタマイズにはテーマ提案を使用してください：ベーステンプレートをコピーし、views-bootstrap-[style]--[view-id]--[display-id].html.twig にリネームします
- アコーディオンとタブの「grouped」出力モードでは、コンテンツを集約するために Views フォーマット設定でグループ化フィールドを設定する必要があります
- カードレイアウトは一貫した画像アスペクト比で最も効果的に機能します - 画像スタイルを使用して寸法を強制してください
- カルーセルテンプレートの {{ attach_library('views_bootstrap/components') }} を通じて自動的にアタッチされるカルーセル JavaScript ライブラリを有効化します
- マルチカラムカルーセルは適切に表示するためにアイテム数がカラム数で割り切れる必要があります
- テーブルスタイルは Drupal のコアテーブルスタイルのすべてのオプションを継承し、Bootstrap 固有の拡張機能を追加します
- ほとんどのコンポーネントには row_class とカスタムクラスオプションを通じてカスタム CSS クラスを追加できます
Technical Details
Hooks 1
hook_theme_suggestions_HOOK_alter
すべての Views Bootstrap テンプレートに View 固有および Display 固有のテンプレート提案を追加し、View ごとのテンプレートオーバーライドを可能にします
Troubleshooting 7
テーマが Bootstrap 5 の CSS と JavaScript ライブラリを読み込んでいることを確認してください。モジュールは Bootstrap マークアップを生成しますが、Bootstrap 自体は含まれていません。アコーディオン、カルーセル、タブなどのインタラクティブコンポーネントには bootstrap.bundle.min.js が読み込まれていることを確認してください。
Bootstrap 5 は data-bs-* 属性を必要とします（data-* ではありません）。Bootstrap 4 ではなく Bootstrap 5 を使用していることを確認してください。更新後にキャッシュをクリアしてください。ブラウザコンソールで JavaScript エラーを確認してください。
モジュールの JavaScript はアイテムが 1 つしかない場合にコントロールを非表示にします。View が複数の結果を返すことを確認してください。スタイル設定でナビゲーションとインジケーターオプションが有効になっていることを確認してください。
card-group モードを使用していない場合、カードは Bootstrap のグリッドシステムを使用します。テーマのコンテナに適切な Bootstrap グリッド構造があることを確認してください。カラム設定が期待と一致しているか確認してください。
カラム設定は小さいブレークポイントから継承されます。col_sm が設定されていて col_md が「none」の場合、medium 画面は small の設定を使用します。異なる動作が必要な各ブレークポイントで明示的な値を設定してください。
「grouped」出力モードを使用する場合、View が期待されるすべての結果を返すことを確認してください（ページャー設定を確認）。グループ化はレンダリングされた結果に対して行われ、データベースレベルではありません。
テンプレート提案は views_bootstrap_[style]__[view_id]__[display_id] のパターンに従います。ファイル名がダブルアンダースコアで正確に一致していることを確認してください。テーマレジストリキャッシュをクリアしてください。
Security Notes 4
- モジュールは、限定された HTML タグセットを許可する Drupal の Xss::filter() を使用して、アコーディオンとタブタイトルのユーザー生成コンテンツに XSS フィルタリングを適用します
- ドロップダウンテンプレートは、リンクと画像を保持しながらメニューアイテムでの XSS を防ぐために striptags フィルターを使用します
- カスタム CSS クラスは CSS インジェクションを防ぐために Html::cleanCssIdentifier() を使用してサニタイズされます
- すべての HTML 属性は適切なエスケープのために Drupal の Attribute クラスを通じて処理されます