待合室通過後の残り時間表示(ダイアログ表示)
PC向け/スマホ向けサイト両対応
概要
待待合室通過後、待合室の通過時刻、15分(2024/7/20現在)の滞在制限時間の有効期限時刻と残り時間を、アラートのダイアログで1度だけ表示します
動作イメージ
※ブックマークレットの登録・利用方法が分からない場合は、基本的な使い方のページを参考にしてください
ブックマークレット文字列
以下の文字列でブックマークレットを登録し、待合室通過後の任意のページで使用してください
ダミー登録用の空ページのリンク15分バージョン (2024/7/20現在の滞在制限時間)
スマホの場合
iPhone Safari / Chrome および Android Chrome など
ブックマークレット文字列
PCブラウザの場合
以下のリンクボタンを、ブラウザのブックマークバーへドラッグ＆ドロップして登録してください(旧)10分バージョン (以前までの滞在制限時間)
スマホの場合
iPhone Safari / Chrome および Android Chrome など
ブックマークレット文字列
PCブラウザの場合
以下のリンクボタンを、ブラウザのブックマークバーへドラッグ＆ドロップして登録してください(カスタマイズ)待合室通過後の制限時間を10分や15分以外の任意の時間に変更する場合
他サイトで利用する場合など、制限時間を任意の時間に変更する場合は、ブックマークレット登録時に文字列の末尾にある「10」「15」の数字部分を書き換えてください(待合室通過後の滞在制限時間は、サイトによって異なります)
使い方
待合室を通過した後の予約サイトの任意のページで、ブックマークレットを呼び出してください
アラートダイアログにて待合室の通過時刻、有効期限の時刻とその時点の残り時間(分/秒)を表示します
有効期限が切れた状態でリロードすると待合室に戻されます
ソースコードおよび処理概要
ブックマークレット化前のソースコードです
ご自身で表示等カスタマイズされたい方はご自由にご利用ください
※ブックマークレット化の方法については記載していません
簡単な解説
- 待合室を通過したことを示すCookieの情報から、通過時刻を取得し15分後の時刻を制限時間としています
- 現在時刻から制限時間までの残り時間を計算して表示します
JavaScriptコード
コピー
javascript: (function (duration_min) {
const dateFormat = (date, format) => {
const _fmt = {
hh: date => { return ('0' + date.getHours()).slice(-2) },
mm: date => { return ('0' + date.getMinutes()).slice(-2) },
ss: date => { return ('0' + date.getSeconds()).slice(-2) },
dd: date => { return ('0' + date.getDate()).slice(-2) },
yyyy: date => { return date.getFullYear() + '' },
MM: date => { return ('0' + (date.getMonth() + 1)).slice(-2) },
};
const _priority = ['dd', 'yyyy', 'MM', 'hh', 'mm', 'ss'];
return _priority.reduce((res, fmt) => res.replace(fmt, _fmt[fmt](date)), format);
};
const getHMS = (total_sec) => {
if (total_sec <= 0) {
return [0, 0, 0];
}
const hours = Math.floor(total_sec / 60 / 60);
const minutes = Math.floor((total_sec - hours * 60 * 60) / 60);
const seconds = Math.floor(total_sec - (hours * 60 + minutes) * 60);
return [hours, minutes, seconds]
};
const acceptedCookie = document.cookie.split('; ').find(row => row.startsWith('QueueITAccepted-'));
if (!acceptedCookie) {
alert('待合室通過の情報が見つかりませんでした');
return;
};
const cookieValue = decodeURIComponent(acceptedCookie.split('=')[1]);
const searchParams = new URLSearchParams(cookieValue);
const qIssueTime = searchParams.get('IssueTime');
if (qIssueTime) {
const issueDate = new Date(Number(qIssueTime * 1000));
let limit_text = `待合室\n通過時刻: ${dateFormat(issueDate, 'hh:mm:ss')}`;
if (duration_min) {
const limitDate = new Date(issueDate.getTime());
limitDate.setMinutes(limitDate.getMinutes() + duration_min);
const remain = limitDate - new Date();
let remain_text = '**期限切れ**';
if (remain > 0) {
const [_, remain_min, remain_sec] = getHMS(remain/1000);
remain_text = `残り: ${remain_min}分${remain_sec}秒`;
}
limit_text += `\n有効期限: ${dateFormat(limitDate, 'hh:mm:ss')} (${remain_text})`;
}
alert(limit_text);
} else {
alert('不明なデータ形式です');
return;
};
})(15);