Bootstrap Library
Bootstrap CSSフレームワークをDrupalサイトに統合し、ローカルファイルまたはCDNから読み込み可能なライブラリとしてBootstrapを登録します。
bootstrap_library
インストール
composer require 'drupal/bootstrap_library:^2.0'
概要
Bootstrap Libraryは、人気のBootstrap CSSフレームワークをDrupalサイトに統合するモジュールです。サイトビルダーは、ライブラリ定義を手動で設定することなく、Bootstrapのレスポンシブグリッドシステム、コンポーネント、JavaScriptプラグインをDrupalテーマに簡単に追加できます。
このモジュールは柔軟な読み込みオプションを提供します。複数のBootstrapバージョン（2.xから5.xまで）をサポートするCDN（コンテンツデリバリーネットワーク）から読み込むか、ローカルにインストールされたファイルから読み込むかを選択できます。ローカルインストールの場合、デバッグ用の開発（ソース）ファイルまたは本番用の圧縮ファイル、およびComposerでインストールしたパッケージから選択できます。
さらに、このモジュールは詳細な表示制御を提供し、特定のテーマやURLパスでBootstrapの読み込みを有効または無効にできます。これは、Bootstrapをフロントエンドでのみ読み込み、管理エリアでは読み込まない場合や、すでにBootstrapを含むテーマを使用している場合に特に便利です。
Features
- ローカルファイルまたはCDNからBootstrap CSSおよびJavaScriptフレームワークを読み込み
- 2.x、3.x、4.x、5.xシリーズを含む複数のBootstrapバージョンをサポート
- 圧縮版（本番用）、ソース版（開発用）、またはComposerでインストールしたライブラリバリアントから選択可能
- 特定のテーマでのみBootstrapを読み込むためのテーマベースの表示制御
- 特定のページを除外または含めるためのURLパスベースの表示制御
- CSSファイルのみまたはJavaScriptファイルのみを選択的に読み込むオプション
- URLパラメータ（?bootstrap=no）でBootstrapを動的に無効化
Use Cases
カスタムテーマにBootstrapを追加する
Bootstrapを含まないカスタムDrupalテーマがある場合、このモジュールを使用してBootstrap機能を追加できます。モジュールをインストールし、Bootstrapを/libraries/bootstrapにダウンロードし、カスタムテーマでのみ読み込むようにモジュールを設定します。これにより、Bootstrapのグリッドシステム、コンポーネント、JavaScriptプラグインにアクセスできます。
パフォーマンス向上のためCDNからBootstrapを読み込む
CDNキャッシュの利点を活用したいサイトでは、CDNからBootstrapを読み込むようにモジュールを設定します。ドロップダウンから希望のBootstrapバージョンを選択すると、モジュールは自動的に適切なCDN（Bootstrap 5.xはjsDelivr、Bootstrap 4.xはStackPath、Bootstrap 3.xおよび2.xはMaxCDN）からCSSとJavaScriptを読み込みます。
管理ページからBootstrapを除外する
独自のスタイリングを持つ管理テーマ（ClaroやGinなど）を使用している場合、競合を避けるために管理ページからBootstrapを除外したい場合があります。URLの表示設定を使用して、「admin*」「node/add/*」「node/*/edit」などのパスをBootstrapの読み込みから除外します。デフォルト設定にはすでにこれらの除外が含まれています。
テーマ固有のBootstrap読み込み
複数のテーマを持つサイト（例：異なるセクションに異なるテーマ）では、特定のテーマでのみBootstrapを読み込むように設定します。テーマの表示設定を使用して、Bootstrapをアタッチするテーマを正確に指定し、独自のBootstrapバージョンを含むテーマとの競合を防ぎます。
開発とデバッグ
開発中は、デバッグを容易にするために非圧縮（ソース）版のBootstrapファイルに切り替えます。非圧縮ファイルにより、ブラウザの開発者ツールで問題を追跡しやすくなります。本番環境では圧縮ファイルに戻してください。
Tips
- URLパラメータ?bootstrap=noを使用すると、任意のページでBootstrapを一時的に無効化してデバッグできます
- このモジュールはjQuery（core/jquery）に依存しており、Bootstrapライブラリと共に自動的に読み込まれます
- CDN経由のBootstrap 5.xの場合、モジュールはドロップダウンとツールチップに必要なPopper.jsライブラリも読み込みます
- Composerインストール方法を使用する場合は、composer require twbs/bootstrapでtwbs/bootstrapパッケージがインストールされていることを確認してください
- デフォルト設定では、競合を防ぐために一般的な管理パスとAJAXパスがBootstrapの読み込みから除外されています
Technical Details
Admin Pages 1
/admin/config/development/bootstrap_library
サイトでのBootstrapフレームワークの読み込み方法を設定します。ソース（CDNまたはローカル）、バージョン、テーマおよびURLパスの表示設定を含みます。
Hooks 2
hook_page_attachments
設定に基づいてBootstrap CSSおよびJavaScriptライブラリをページにアタッチします。アタッチする前にテーマとURLの表示ルールをチェックします。
hook_library_info_build
設定で選択されたCDNバージョンに基づいて、bootstrap-cdnライブラリ定義を動的に構築します。
Troubleshooting 5
Bootstrapファイルが/libraries/bootstrapディレクトリに正しくインストールされていることを確認してください。モジュールのテーマとURL表示設定が現在のテーマまたはページを除外していないか確認してください。設定変更後はDrupalキャッシュをクリアしてください。
Bootstrap Library設定ページに移動し、「リストされたページを除くすべてのページ」が選択された状態で、URL表示セクションに管理パスがリストされていることを確認してください。デフォルトの除外にはadmin*、node/add/*、node/*/editが含まれます。
サーバーが外部CDN URLにアクセスできることを確認してください。外部リソースをブロックする可能性のあるContent Security Policy（CSP）ヘッダーを確認してください。CDNがブロックされている場合は、ローカル読み込みへの切り替えを検討してください。
テーマの表示設定を使用して、Bootstrapベースのテーマをモジュールの読み込みから除外します。「リストされたテーマを除くすべてのテーマ」を選択し、Bootstrapテーマをリストに追加します。
任意のURLに?bootstrap=noを追加すると、そのページでBootstrapの読み込みを一時的に無効化できます。これはスタイルの競合をデバッグする際に便利です。