Collapsiblock
ブロックのタイトルをクリックすることで個別のブロックを折りたたみ可能にし、スムーズなアニメーションとCookieによるオプションの状態保持機能を提供します。
collapsiblock
インストール
composer require 'drupal/collapsiblock:^4.4'
概要
Collapsiblockは、あらゆるDrupalブロックを折りたたみ可能にするユーザーインターフェース拡張モジュールです。有効にすると、ユーザーはブロックのタイトルをクリックして、スムーズなスライドアニメーションでコンテンツを展開または折りたたむことができます。
このモジュールは、比較的シンプルなニーズを持つDrupal初心者のサイトビルダー向けに設計されています。グローバルなデフォルト設定とブロックごとの設定オプションの両方を提供し、どのブロックを折りたたみ可能にするか、またその動作をきめ細かく制御できます。
主な機能には、Cookieベースの状態保持（ページ読み込み時にブロックの折りたたみ/展開状態を記憶）、アクティブリンクを含むメニューブロックのインテリジェントな処理、ダークモードテーマのサポート、およびLayout Builderとの完全な統合が含まれます。また、スクリーンリーダー用のARIA属性やRTL（右から左）言語サポートなどのアクセシビリティ機能も備えています。
Features
- タイトルをクリックすることで任意のブロックを折りたたみ可能にし、スムーズなスライドアニメーションを実現
- 5つの折りたたみ動作オプション: なし、デフォルトで展開、デフォルトで折りたたみ、常に折りたたみ、常に展開
- ページ読み込みやセッション間でユーザーの好みを記憶するCookieベースの状態保持
- アクティブリンクを含むメニューブロックを展開状態に保つインテリジェントなアクティブリンク検出
- グローバルデフォルトを個別のブロックで上書きするためのブロックごとの設定
- Layout Builderコンテキストで折りたたみ可能なブロックを管理するための完全なLayout Builder統合
- テーマカラー切り替え用の設定可能なCSSクラス検出によるダークモードサポート
- 適切な矢印方向を持つRTL（右から左）言語サポート
- 50msから1300msまでの9つのプリセットオプションによる設定可能なアニメーション速度
- Cookieを完全に無効にするGDPR準拠オプション
- 必要に応じてブロックコンテンツが折りたたみを防止できる強制展開クラスのサポート
- スクリーンリーダー用のaria-expanded属性によるアクセシビリティサポート
Use Cases
折りたたみ可能なサイドバーナビゲーション
サイドバーのメニューブロックを折りたたみ可能にすることで、ユーザーは不要なナビゲーションを非表示にし、メインコンテンツ用のスペースを確保できます。アクティブリンク検出により、現在のセクションは常に表示されます。
折りたたみ可能な回答を持つFAQページ
各FAQカテゴリ用のブロックを作成し、デフォルトで折りたたみに設定します。ユーザーは興味のあるセクションのみを展開でき、長いFAQページをより管理しやすくします。
カスタマイズ可能なウィジェットを持つダッシュボード
複数の情報ブロックがあるダッシュボードページで、ユーザーは頻繁に見る必要のないウィジェットを折りたたみ、重要なものは展開したままにできます。Cookieによる保持機能で設定が記憶されます。
モバイルフレンドリーなコンテンツ整理
画面スペースが限られているモバイルデバイスでは、折りたたみ可能なブロックがコンテンツの整理に役立ちます。ユーザーは重要な部分に集中するためにセクションを折りたたみ、必要に応じて展開できます。
ECサイトの商品フィルター
商品一覧のサイドバーにあるフィルターブロックを折りたたみ可能にします。ユーザーは不要なフィルターカテゴリを非表示にし、関連するフィルターに集中しながらインターフェースをすっきり保てます。
GDPR準拠の実装
Cookie使用を最小限に抑える必要があるサイトでは、Cookieの有効期間を-1に設定して状態保持を完全に無効にします。ブロックは引き続き折りたたみ可能ですが、ユーザーデータは保存されません。
Tips
- コンテンツの多いページのサイドバーブロックには「折りたたみ可能、デフォルトで折りたたみ」（オプション3）を使用すると、コンテンツにアクセス可能なまま視覚的な混雑を減らせます。
- 「常に折りたたみ」と「常に展開」オプション（4および5）はCookieを無視するため、ユーザーの好みに関係なく常に特定の状態で開始すべきブロックに最適です。
- アニメーション速度200ms（デフォルト）は、視覚的フィードバックと応答性の良いバランスを提供します。より目立つ効果には増加、よりスナッピーなインタラクションには減少させてください。
- メニューブロックと一緒に使用する場合、アクティブリンク検出は「is-active」クラスを持つリンクで機能します。これはDrupalが現在のページを指すメニューリンクに自動的に追加するクラスです。
- ブロックを開いたままにすべきAJAX更新コンテンツには、更新されたコンテンツに動的に「collapsiblock-force-open」クラスを追加してください。
- このモジュールはブロックレイアウトシステムとLayout Builderの両方で動作するため、サイトのブロック配置の管理方法に関係なく使用できます。
Technical Details
Admin Pages 1
/admin/config/user-interface/collapsiblock
サイト上のすべての折りたたみ可能なブロックに適用されるグローバル設定を構成します。これらの設定は個別のブロックで上書きできるデフォルト値として機能します。
権限 2
Hooks 6
hook_block_view_alter
標準的なブロックレンダリング（非Layout Builder）用にCollapsiblockラッパー要素を追加するためにブロックのrender arrayを変更します。
hook_form_block_form_alter
ブロック設定フォームにCollapsiblock設定フィールドセットを追加し、ブロックごとの折りたたみ動作設定を可能にします。
hook_form_alter
Layout Builderの「ブロックを追加」および「ブロックを更新」フォームにCollapsiblock設定を追加します。
hook_page_attachments_alter
すべてのページにCollapsiblockライブラリをアタッチし、グローバル設定をJavaScriptに渡します。
hook_preprocess_block
Collapsiblockラッパー要素をtitle_prefixおよびtitle_suffixテンプレート変数に注入するためにブロックテンプレートを処理します。
hook_help
ヘルプページでモジュールのヘルプテキストを提供します。
Troubleshooting 5
テーマのブロックテンプレートがブロックタイトルをラップするために{{ title_prefix }}と{{ title_suffix }}変数を使用していることを確認してください。JavaScriptはこれらのラッパー要素を探します。ブロックに表示可能なタイトルがあること（label_displayが有効）、折りたたみ動作が「なし」に設定されていないことを確認してください。
Cookieの有効期間設定を確認してください。-1に設定されている場合、Cookieは無効です。空白の場合、ブラウザを閉じるとCookieが期限切れになります。永続的なCookieには正の数を設定してください。また、折りたたみ動作がオプション2または3に設定されていることを確認してください（オプション4および5はCookieを無視します）。
これはユーザーが現在位置を確認できるようにするための意図的な動作です。アクティブリンクがあっても折りたたみを許可するには、グローバル設定で「アクティブリンクを含むメニューブロックのページ読み込み時の折りたたみを許可」オプションをチェックしてください。
「折りたたみ矢印の色切り替えを有効にする」オプションを有効にし、「カラーモードトリガークラス」フィールドにテーマがダークモードを示すために使用するCSSクラスを指定してください。このクラスはダークモードがアクティブなときにhtmlまたはbody要素に存在する必要があります。
ブロックのコンテンツまたはコンテナにCSSクラス「collapsiblock-force-open」を追加してください。JavaScriptはこのクラスを検出し、ブロックの折りたたみを防止します。表示したままにする必要があるフォームを含むブロックに便利です。