インストール
composer require 'drupal/modal_page:^5.1'
composer require 'drupal/modal_page:^5.0'
概要
Modal Pageは、サイト管理者がCMSインターフェースのみでモーダルダイアログ（ライトボックス）を作成・管理できる包括的なDrupalモジュールです。豊富なカスタマイズオプションを備えた柔軟な設定エンティティシステムを提供します。
モーダルは複数の方法でトリガーできます：ページ読み込み時に自動表示、一定時間後に表示、特定のスクロール位置に達した時、または指定したHTML要素をクリックした時。各モーダルはロールベースのアクセス制御、多言語フィルタリング、指定した日時での自動公開・非公開のスケジューリングに対応しています。
モジュールはモーダル表示にBootstrap 3または5と統合されており、ヘッダー、フッター、ボタン、スタイル、動作に関する豊富なカスタマイズオプションを含みます。Cookie管理による「次回から表示しない」機能により、ユーザーはモーダルを永久に非表示にできます。
Features
- 管理UIからコード不要で無制限にモーダルを作成
- ワイルドカード対応のパスパターンで特定ページにモーダルを表示
- URLパラメータ（?modal=値）でモーダルを表示
- ページ読み込み時にモーダルを自動表示（秒単位の遅延オプション付き）
- スクロール位置（ピクセルまたはパーセンテージ）でモーダルをトリガー
- カスタムCSSセレクタ（クラスまたはID）のクリックでモーダルをトリガー
- Bootstrap 3およびBootstrap 5対応（自動読み込み検出機能付き）
- カスタマイズ可能なモーダルサイズ（小・中・大）
- モーダルヘッダーの完全制御：タイトル表示、水平線、閉じるボタン（X）、最大化ボタン
- モーダルフッターの完全制御：OKボタン、閉じるボタン、「次回から表示しない」チェックボックス
- Cookieベースの「次回から表示しない」機能（有効期限カスタマイズ可能）
- セッションごとに1回のみ表示するオプション
- 指定秒数後にモーダルを自動非表示
- ロールベースのアクセス制御で特定のユーザーロールにモーダルを制限
- 多言語対応：特定の言語にモーダルを制限
- スケジューリング：指定した日時でモーダルを自動公開・自動非公開
- モーダル本文でのYouTube動画埋め込み対応
- OKボタンクリック後にURLへリダイレクト
- モーダル、ヘッダー、フッター、すべてのボタンにカスタムCSSクラスを設定可能
- モーダルを閉じる動作：ESCキーと外側クリックを設定可能
- Entity APIによるプログラムでのモーダル作成
- モーダルの変更と送信イベント処理用のフック
- cronベースのスケジューリング用Drushコマンド
- サジェストパターンによるテーマテンプレート上書き対応
Use Cases
初回訪問者へのウェルカムメッセージ
ホームページ（<front>）に自動表示を有効にしたモーダルを作成します。「1回のみ表示」を有効にして、再訪問者には表示されないようにします。人気コンテンツへのリンクを含むフレンドリーなウェルカムメッセージを使用します。
Cookie同意通知
「次回から表示しない」オプションを有効にしたモーダルを作成します。すべてのページに表示されるよう設定（ページフィールドを空のままに）。コンプライアンスのため短いCookie有効期限（例：365日）を設定します。スタイリング用のカスタムCSSクラスを追加し、リダイレクトリンク機能でプライバシーポリシーにリンクします。
ニュースレター購読ポップアップ
30秒の遅延または50%スクロール後にトリガーされるモーダルを作成します。本文に埋め込みフォームまたはiframeでニュースレター登録フォームを含めます。「1回のみ表示」を有効にして、再訪問者を煩わせないようにします。
特定ページでの動画チュートリアル
YouTubeフィールドを使用して説明動画を埋め込みます。モーダルを特定のドキュメントページまたは機能ページに表示するよう設定します。最大化ボタンを有効にして、ユーザーがフルスクリーンモードで視聴できるようにします。
スケジューリング付きプロモーションキャンペーン
セールやイベント用に特定の公開・非公開日時を設定したプロモーションモーダルを作成します。ロール制限を使用して認証済みユーザーにのみ表示します。ユーザーがOKをクリックした時にプロモーションページに直接移動するようリダイレクトリンクを設定します。
会員限定のお知らせ
特定のロール（例：認証済みユーザー、プレミアム会員）に制限したモーダルを作成します。多言語のお知らせには言語制限機能を使用します。期間限定コンテンツには自動公開・非公開をスケジュールします。
クリックトリガーによる商品詳細モーダル
自動表示を無効にし、「この要素をクリックしてモーダルを開く」に".product-quick-view"のようなCSSクラスを設定します。このクラスをサイトの商品カードに追加します。モーダルはページ遷移なしで詳細な商品情報を表示します。
離脱意図の代替手段
90%スクロール位置でトリガーされるモーダルを作成します。これはコンテンツのほとんどを読んだユーザーをキャッチします。離脱前にアクションを促すメッセージや購読オファーを表示します。
Tips
- パスワイルドカードを戦略的に使用：/products/*はすべての商品ページに、/blog/*はすべてのブログコンテンツにマッチします
- 異なるモーダルメッセージのA/Bテストには、同じ設定で異なるコンテンツの複数のモーダルを作成し、それぞれを特定のユーザーロールに制限します
- ブラウザの開発者ツールを使用してモーダルHTMLを検査し、テーマにカスタムCSSオーバーライドを追加します
- テンプレートサジェストによりモーダルごとのテンプレートが可能：カスタムデザイン用にmodal-page--[modal-id].html.twigを作成します
- プログラムでのモーダル作成には、各プロパティのセッターと共に\Drupal::entityTypeManager()->getStorage('modal')->create()を使用します
- modal_submitフックは、ユーザーがモーダルを操作した時のアナリティクスイベント追跡に最適です
- スクロールトリガーのモーダルと特定のページパスを組み合わせて、ユーザーがコンテンツに関与した時に表示されるコンテキストに応じたプロンプトを作成します
Technical Details
Admin Pages 4
/admin/structure/modal
すべてのモーダルを一覧表示し、追加・編集・削除の操作ができます。モーダルのタイトル、タイプ、ページ/パラメータ、公開ステータスを表示します。
/admin/structure/modal/add
垂直タブで整理されたすべての設定オプションで新しいモーダルを作成するフォームです。
/admin/config/user-interface/modal-page/settings
Modal Pageモジュールのグローバル設定。
/admin/modal/help
モジュールのドキュメントと管理ページへのリンクを含むヘルプページ。
権限 1
Hooks 3
hook_modal_alter
モーダルが表示される前に変更を加えることができます。現在のページに表示されるすべてのモーダルに対して呼び出されます。
hook_modal_ID_alter
マシン名で特定のモーダルを変更できます。IDをモーダルのマシン名に置き換えてください。
hook_modal_submit
ユーザーがモーダルのOKボタンをクリックした時にAJAX経由でトリガーされます。ログ記録、リダイレクト、データ処理などのカスタムアクションに使用します。
Drush Commands 1
drush modal_page:cron
Modal Pageスケジューラを実行してスケジュール済みの公開・非公開操作を処理します。Drupalの完全なcronを実行せずに、より頻繁なスケジューリングに使用します。
Troubleshooting 5
モーダルが公開されていること、現在のパスが設定されたページと一致すること（先頭のスラッシュを確認）、ロール制限が有効な場合は現在のユーザーが必要なロールを持っていることを確認してください。ブラウザコンソールでJavaScriptエラーを確認してください。
グローバル設定で「必要に応じてBootstrapを自動で検出・読み込み」を有効にしてください。テーマがすでにBootstrapを読み込んでいる場合、モジュールのバージョンと競合していないか確認してください。設定でBootstrap 3と5を切り替えてみてください。
ブラウザでCookieが有効になっていることを確認してください。Cookie有効期限が正しく設定されていることを確認してください（0はセッションのみを意味します）。ブラウザのCookieをクリアして再度テストしてください。「1回のみ表示」が「次回から表示しない」と競合していないか確認してください。
Drupalのcronが定期的に実行されていることを確認してください。より正確なスケジューリングには、Modal Page cronエンドポイント（/modal-page/cron/{cron-key}）またはDrushコマンド（drush modal_page:cron）を使用した専用のcronジョブを設定してください。
モーダル設定のパスパターンを確認してください。ワイルドカード（*）はパスの末尾にある必要があります。ホームページには<front>を使用してください。パスは大文字小文字を区別せず、パスエイリアスと比較されます。
Security Notes 4
- 'administer modal page'権限は制限されたアクセスとしてマークされています - 信頼できる管理者にのみ付与してください
- モーダル本文コンテンツはDrupalのテキストフォーマットシステムで処理され、選択したフォーマットに基づいてXSS保護が提供されます
- モーダルコンテンツで許可されるHTMLタグはグローバル設定で構成可能で、機能性とセキュリティのバランスを取れます
- スケジューリングcronエンドポイントは認証にサイトのcronキーを必要とします