Skip to content

テクニック SCR16:制限時間が切れようとしていることを利用者に警告するスクリプトを提供する

このテクニックについて

このテクニックは 2.2.1: タイミング調整可能 (SCR1: Allowing the user to extend the default time limit) と一緒に十分なテクニック) に関連する。

このテクニックは、スクリプトによって制御された制限時間に適用される。

解説

このテクニックの目的は、インタラクションを完了させるための時間がほとんど無いことを利用者に通知することである。スクリプトによって、時間制限のある機能が提供される場合には、そのスクリプトは利用者に制限時間が迫っていることを警告する機能を含み、より多くの時間を要求するためのメカニズムを提供することができる。制限時間の 20 秒以上前に、そのスクリプトは制限時間が迫っている事を伝え、利用者がさらに時間を必要とするかどうかを尋ねる確認ダイアログを提供する。もし利用者の答えが「はい」の場合、制限時間をリセットする。もし利用者の答えが「いいえ」又は返答がない場合、制限時間の終了を許可する。

このテクニックは、window.setTimeout() メソッドで設定された制限時間に関係する。例えば、60 秒で制限時間が切れる設定の場合、制限時間を 40 秒に設定して、確認ダイアログを表示させることができる。確認ダイアログが表示された時、新しく時間制限が残り 20 秒に設定される。「制限時間の猶予期間」の満了時に、当初の設計では 60 秒の制限時間の満了の時にとられていたであろう処置がとられる。

事例

事例 1

ある株式市場相場ページは最新の統計を利用可能な状態を確保するため 5 分毎にページを更新するスクリプトを使用している。その 5 分間が終了する 20 秒前に、確認ダイアログが表示され、利用者がページを更新する前にもっと時間が必要かどうかを尋ねる。これにより、利用者に更新が差し迫っていることを認識させるとともに、もし希望するならそれを回避できるようにする。

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Stock Market Quotes</title>
   <script>
     function timeControl() {
     // set timer for 4 min 40 sec, then ask user to confirm.
     setTimeout('userCheck()', 280000);
     }

     function userCheck() {
     // set page refresh for 20 sec
     var id=setTimeout('pageReload()', 20000);
     // If user selects "OK" the timer is reset 
     // else the page will refresh from the server.
     if (confirm("This page is set to refresh in 20 seconds. 
       Would you like more time?"))
       {
          clearTimeout(id);
          timeControl();
       }
     }

     function pageReload() {
       window.location.reload(true);
     }

    timeControl();
  </script>
</head>
<body>
   <h1>Stock Market Quotes</h1>
   ...
</body>
</html>

検証

手順

スクリプトによって時間制限を制御されているウェブページにおいて:

  1. ページを読み込み、制限時間より 20 秒少ないタイマーを開始する。
  2. タイマーが切れるとき、間近に迫った時間制限を警告する確認ダイアログが表示されることをチェックする。

期待される結果

  • 2 が真である。
Back to Top