CKEditor Accordion
CKEditor 5にアコーディオンウィジェットを追加し、コンテンツ編集者がクリーンな定義リストマークアップ構造を使用して折りたたみ可能なコンテンツセクションを作成・表示できるようにします。
ckeditor_accordion
インストール
composer require 'drupal/ckeditor_accordion:^2.3'
概要
CKEditor AccordionはDrupalのCKEditor 5テキストエディタに強力なアコーディオンコンポーネントを統合します。このモジュールにより、コンテンツ編集者はWYSIWYGエディタ内で直接展開/折りたたみ可能なコンテンツセクションを作成でき、技術的な知識がなくても長いコンテンツを消化しやすいインタラクティブなセクションに整理することが容易になります。
アコーディオンウィジェットは、基盤となる構造にセマンティックなHTML定義リストマークアップ（<dl>、<dt>、<dd>）を使用し、アクセシビリティと適切なコンテンツ構造を確保します。エディタ内では、ユーザーは明確にラベル付けされたタイトルとコンテンツ領域を持つビジュアル表現を見ることができ、フロントエンドではスムーズなアニメーションを備えた完全にインタラクティブなアコーディオンが表示されます。
このモジュールは設定可能な設定ページを提供し、管理者はタブがデフォルトで折りたたまれるかどうか、複数のタブを同時に開けるかどうか、アニメーション効果、URLハッシュを介した特定のアコーディオンセクションへのアンカーリンクのサポートなど、デフォルトのアコーディオン動作を制御できます。
Features
- アコーディオンウィジェットを挿入するためのAccordionボタンをCKEditor 5ツールバーに追加
- アコーディオンコンテンツの編集時に、行の上下への追加や削除オプションを備えたコンテキストバルーンツールバーが表示
- セマンティックなHTML定義リストマークアップ（dl、dt、dd）を使用し、適切なドキュメント構造とアクセシビリティを確保
- 設定可能なアニメーション設定によるスムーズな開閉トランジション
- 特定のアコーディオンタブへのURLハッシュベースのディープリンクをサポート（例：#FrequentlyAskedQuestions）
- 設定可能なデフォルト状態：折りたたみまたは最初のタブを開く
- 複数のアコーディオン行を同時に開いたままにするか、1つを開くと他を閉じるかのオプション
- テーマ開発者が簡単にオーバーライドできる最小限の青いスタイリング
- アコーディオンが初期化されると'ckeditorAccordionAttached' JavaScriptイベントを発火し、他のフレームワークとの統合が可能
- アコーディオンタブがアクセシブルなリンクとしてレンダリングされる完全なキーボードナビゲーションサポート
- シームレスな移行のための自動化されたCKEditor 4からCKEditor 5へのアップグレードパス
- フロントエンドライブラリがアコーディオンコンテンツを含むすべてのページに自動的にアタッチ
Use Cases
FAQセクションの作成
アコーディオンウィジェットを使用して、各質問が折りたたみ可能なアコーディオンタイトルで、回答が展開可能なコンテンツとなるよくある質問セクションを作成します。'ハッシュでタブを開く'を有効にすると、特定の質問への直接リンクが可能になります（例：yoursite.com/faq#HowDoIResetMyPassword）。
製品機能の説明
製品情報を機能、仕様、互換性、サポート情報の折りたたみ可能なセクションに整理します。ユーザーは長いコンテンツをスクロールすることなく、興味のあるセクションのみを展開できます。
ステップバイステップチュートリアル
各ステップがアコーディオン行となるマルチステップチュートリアルやガイドを作成します。ユーザーはチュートリアルを進めながら個々のステップを展開でき、ページを整理して集中した状態に保てます。
利用規約/法的コンテンツ
長い法的文書、利用規約、プライバシーポリシーをトピックごとに整理したアコーディオン形式で提示します。これにより可読性が向上し、ユーザーは特定のセクションにすばやくナビゲートできます。
複数トピックのドキュメントページ
複数のトピックをカバーするドキュメントやヘルプページを作成します。各アコーディオン行で異なるトピックを扱い、ユーザーは必要な情報のみをすばやく見つけて展開できます。
Tips
- アコーディオンは定義リストHTMLマークアップ（dl、dt、dd）を使用しており、セマンティックな意味を提供します - コンテンツ構造を計画する際にこれを考慮してください
- テーマの.ckeditor-accordion-container CSSクラスをターゲットにしてデフォルトの青いスタイリングをオーバーライドできます
- ユーザーが複数のセクション間でコンテンツを比較したい場合は'アコーディオン行を開いたままにする'を有効にしてください
- 'ハッシュでタブを開く'が有効な場合、ハッシュアンカーとして機能する意味のあるアコーディオンタイトルを使用してください。特殊文字は削除されます（例：'Frequently Asked Questions'は#FrequentlyAskedQuestionsになります）
- カーソルがアコーディオン内にある時にコンテキストツールバーが表示されます - メインツールバーに戻らずに行をすばやく追加または削除するために使用してください
- ネストされたアコーディオンは設計上サポートされていません - モジュールはアコーディオンコンテンツ領域内にアコーディオンを配置することを明示的に防止します
- アニメーション時間は300msでease-in-outタイミング関数で固定されています。必要に応じてJavaScriptまたはCSSをオーバーライドしてカスタマイズしてください
Technical Details
Admin Pages 1
/admin/config/content/ckeditor-accordion
CKEditor Accordionウィジェットを使用して作成されたアコーディオンのデフォルト動作を設定します。これらの設定は、ウェブサイトのフロントエンドでアコーディオンがどのように表示され、動作するかに影響します。
権限 1
Hooks 1
hook_page_attachments_alter
モジュールがaccordion.frontendライブラリをアタッチし、アコーディオン設定をすべてのページ読み込み時にdrupalSettingsに渡すために使用します。
Troubleshooting 6
/admin/config/content/formatsのテキストフォーマット設定でAccordionボタンをアクティブツールバーに追加していることを確認してください。目的のテキストフォーマットを編集し、利用可能なアイテムからアクティブツールバーにAccordionボタンをドラッグしてください。
accordion.frontendライブラリが読み込まれていることを確認してください。Drupalキャッシュをクリアし、ブラウザコンソールにJavaScriptエラーがないことを確認してください。ライブラリはhook_page_attachments_alter経由で自動的にアタッチされるはずです。
/admin/config/content/ckeditor-accordionのモジュール設定で'アンカーリンクまたはページ読み込み時にハッシュでタブを開く'を有効にしてください。アコーディオンタイトルはスペースと特殊文字を削除してハッシュアンカーに変換されることに注意してください。
アニメーションがぎこちない場合は、モジュール設定でアニメーションを無効にしてみてください。多くのアコーディオンがあるページや低速なデバイスではパフォーマンスの問題が発生する可能性があります。
モジュールは最小限のデフォルトスタイリングを提供します。テーマで.ckeditor-accordion-containerおよび関連するCSSセレクターをオーバーライドしてください。モジュールのスタイルをオーバーライドするために必要に応じて!importantを追加してください。
モジュールには自動アップグレードパスが含まれています。アップデートフックが実行されるように、アップグレード後にデータベースアップデートを実行してください。問題が解決しない場合は、テキストフォーマット設定を再保存してください。
Security Notes 3
- 'administer ckeditor accordion'権限は制限付きアクセスとしてマークされており、信頼できる管理者ロールにのみ付与する必要があります
- モジュールはアコーディオンコンテンツをサニタイズしません - XSS保護にはDrupalのテキストフォーマットフィルタリングに依存してください
- 'ハッシュでタブを開く'が有効な場合、インジェクション攻撃を防ぐためにURLハッシュパラメータはURLエンコードされます