Page Load Progress
時間のかかるタスクを実行するフォーム送信時に画面をロックしてローディングスピナーを表示し、意図しないダブルクリックを防止してユーザー体験を向上させます。
page_load_progress
インストール
composer require 'drupal/page_load_progress:^2.0'
概要
Page Load Progressは、ページ読み込みやフォーム送信時に視覚的なフィードバックを提供するユーザーインターフェース強化モジュールです。ユーザーが送信ボタンをクリックしたり内部リンクで移動したりすると、モジュールは回転するスロッバー付きのフルスクリーンオーバーレイを表示し、タスクが処理中であることを明確に示すことができます。
この動作により、ユーザーがレスポンスを待っている間に複数回クリックすることを防止します。複数回クリックすると、特にWebサービスとの連携や複雑な操作を行う際に、重複送信やタスク実行の失敗を引き起こす可能性があります。画面ロックにより、ユーザーは自分のアクションが処理中であることを理解し、誤って追加のアクションを実行することを防ぎます。
モジュールは、URLパスに基づく表示条件、スピナーを表示するまでの遅延時間の設定、手動でロックを解除するためのESCキー解除オプションなど、スロッバーをいつどこで表示するかをきめ細かく制御できます。
Features
- フォーム送信やページ読み込み時にアニメーションスピナー付きのフルスクリーンオーバーレイを表示
- スロッバー表示までの遅延時間を設定可能（即時、1秒、3秒、または5秒）
- ワイルドカードパターンを使用して特定のページでスロッバーを表示または非表示にするパスベースの表示条件
- フォーム送信に加えて内部リンクナビゲーションにも対応するオプション
- 必要に応じてユーザーが手動でスロッバーを解除できるESCキーサポート
- モーダルや動的コンテンツとの競合を防ぐため、Ajaxベースのフォームや要素を自動的に除外
- リンクが新しいタブで開かれる場合、モーダル内のリンク、またはAjaxハンドラーを持つリンクではロックを回避するスマート検出
Use Cases
長時間実行されるフォーム送信
メール送信、決済処理、レポート生成、外部サービスとの同期など、時間のかかる操作をトリガーするフォームをユーザーが送信する際、スロッバーはアクションが進行中であることを明確に示し、混乱や重複送信を防ぎます。
コンテンツ管理操作
画像処理、タクソノミーの更新、ワークフロー遷移など、複雑な処理を伴うコンテンツの作成または編集中に、ローディングインジケーターがコンテンツ編集者に変更が保存中であることを伝えます。
インポート/エクスポート操作
管理インターフェースを通じてデータのインポート、エクスポート、またはマイグレーションを実行する際、画面ロックにより管理者がプロセス完了前にページを離れたり、重複した操作をトリガーしたりすることを防ぎます。
ECサイトのチェックアウトフロー
決済処理が行われるチェックアウトプロセス中に、スロッバーは顧客が送信ボタンを複数回クリックすることを防ぎ、二重課金や注文作成の失敗を回避します。
外部APIとの連携
フォームが応答時間が変動する可能性のある外部Webサービスと連携する際、ローディングインジケーターはユーザーに適切な期待を持たせ、タイムアウト関連のユーザーエラーを防ぎます。
Tips
- 「Use Page Load Progress」権限は、認証済みユーザーや管理者など、機能の恩恵を受けるロールにのみ付与してください
- 3〜5秒の遅延オプションを使用すると、素早いページ読み込み時にスロッバーが表示されることを避け、よりスムーズな体験を提供できます
- 多くのAjaxインタラクションやモーダルダイアログがあるページを除外するようパスの表示設定を構成してください
- 何か問題が発生した場合にユーザーがエスケープできるよう、ESCキーオプションを有効のままにしておくことをお勧めします
- モジュールはViewsプレビュー機能との競合を防ぐため、Views UIページ（/admin/structure/views/）を自動的に除外します
- 内部リンクオプションを使用する場合、外部リンクやtarget属性を持つリンクは自動的に除外されることに注意してください
- カスタムテーマでCSSをオーバーライドして、オーバーレイの外観やスピナーアニメーションをカスタマイズできます
Technical Details
Admin Pages 1
/admin/config/user-interface/page-load-progress
ローディングスロッバーを表示するタイミング、パスによる表示条件、ユーザーエスケープオプションなど、Page Load Progressモジュールの動作を設定します。
権限 2
Hooks 2
hook_page_attachments
ユーザーが「use page load progress」権限を持ち、表示条件を満たすページにpage_load_progressライブラリとDrupal設定をアタッチするために使用されます。
template_preprocess_input
Ajax対応でない送信ボタンに「page-load-progress-submit」CSSクラスを追加し、JavaScriptがスロッバーをトリガーすべき要素を識別できるようにします。
Troubleshooting 5
ユーザーロールに「Use Page Load Progress」権限があることを確認してください。フォームがAjaxを使用していないか確認してください（モジュールはAjaxフォームを自動的に除外します）。ページパスが表示条件で除外されていないか確認してください。
ユーザーが手動でオーバーレイを解除できるようESCキーオプションを有効にしてください。これは、JavaScriptエラーによりページの再読み込みが妨げられている場合や、サーバーの応答が遅延している場合に発生することがあります。
モジュールはモーダルとの競合を回避しようとしますが、問題が続く場合は、表示条件を使用してモーダル機能を持つページを除外するか、モーダルリンクに通常のリンクと区別するための適切なクラスがあることを確認してください。
Ajax対応リンクに「use-ajax」または「webform-ajax-link」クラスがあることを確認してください。モジュールはこれらのクラスをチェックし、スロッバーのトリガーから除外します。
モジュールは「/」で始まるリンクのみをトリガーします。ただし、一部の絶対内部URLは異なる扱いを受ける可能性があります。相対パスを使用するか、特定のクラスベースの除外を追加することを検討してください。
Security Notes 3
- モジュールはDrupalの権限システムを尊重します。「use page load progress」権限を持つユーザーのみがローディングインジケーターを見ることができます
- 「administer page load progress」権限はサイト全体のモジュール動作の変更を許可するため、慎重に付与してください
- CSSセレクター設定（page_load_progress_elements）は構成管理オーバーライドを通じてのみ変更可能で、UIからは変更できないため、潜在的なインジェクション問題を防ぎます