はじめに
業務システムや管理画面では、一定時間操作がない場合にトップ画面やログイン画面へ戻したいケースがあります。
本記事では、Laravel + JavaScript を組み合わせて「無操作タイムアウトで特定画面へ遷移する」実装方法を解説します。
想定ケース：
- 共用PCのセキュリティ対策
- 長時間放置による誤操作防止
要件
- 一定時間ユーザー操作がない場合に画面遷移
- 遷移先はLaravelのルートで指定
- 入力・クリック・スクロールなどでタイマーをリセット
実装の全体像
実装の流れはシンプルです。
- JavaScriptでユーザーの操作を検知
- 一定時間操作がなければタイムアウト
- Laravelの指定ルートへ遷移
1. ルートの準備（Laravel）
まず遷移先のルートを用意します。
// routes/web.php
Route::get('/timeout', function () {
return view('timeout');
})->name('timeout');
遷移先のBladeも作成します。
<!-- resources/views/timeout.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>タイムアウト</title>
</head>
<body>
<h1>一定時間操作がなかったためトップへ戻りました</h1>
</body>
</html>
2. 無操作タイムアウトのJS実装
次に、ユーザー操作を監視するJavaScriptを実装します。
<!-- 任意のBlade（例: resources/views/layouts/app.blade.php） -->
<script>
let timeoutId;
const timeoutMs = 300000; // 5分（ミリ秒）
// タイマー開始
function startTimeout() {
timeoutId = setTimeout(() => {
// Laravelのルートへ遷移
window.location.href = "{{ route('timeout') }}";
}, timeoutMs);
}
// タイマーリセット
function resetTimeout() {
clearTimeout(timeoutId);
startTimeout();
}
// 操作イベント一覧
const events = ['click', 'mousemove', 'keydown', 'scroll', 'touchstart'];
events.forEach(event => {
document.addEventListener(event, resetTimeout);
});
// 初期起動
startTimeout();
</script>
ポイント
-
setTimeoutで一定時間後に遷移 - ユーザー操作があれば
clearTimeout→ 再設定 - Bladeの
route()を使うことでURL直書きを回避
3. 特定画面だけ有効にする方法
すべてのページではなく、特定画面のみ有効にしたい場合はフラグを使います。
<input type="hidden" id="timeout_flag" value="1">
if (document.getElementById('timeout_flag')?.value === "1") {
startTimeout();
}
4. ログインセッションタイムアウトとの違い
混同しやすいので整理します。
| 種類 | 制御場所 | 役割 |
|---|---|---|
| セッションタイムアウト | サーバー(Laravel) | 認証失効 |
| 無操作タイムアウト | フロント(JS) | 画面制御 |
本記事の実装はフロント制御です。
ログアウトさせたい場合はLaravelのセッション期限も併用しましょう。
5. 応用：ログアウト画面へ遷移
ログアウトさせたい場合は専用ルートへ遷移させます。
window.location.href = "{{ route('logout') }}";
※POSTログアウトの場合はフォーム送信に変更してください。
6. よくあるハマりポイント
① route() がJS内で動かない
Blade内に記述してください。外部JSファイルでは使用できません。
② モーダル操作でタイマーが止まらない
モーダルのクリックイベントも監視対象に含める必要があります。
document.addEventListener('click', resetTimeout);
まとめ
Laravelで無操作タイムアウトを実装するには、
- JavaScriptでユーザー操作を監視
- setTimeoutで時間経過を検知
- route() を使って安全に画面遷移
という構成がシンプルで実用的です。
管理画面・共有PCなど、実務で非常に使える実装なのでぜひ活用してみてください。
参考
- setTimeout / clearTimeout (MDN)
- Laravel Routing 公式ドキュメント
お知らせ（採用情報）
最後にお知らせとなりますが、AppTime では一緒に働くメンバーを募集しております。
詳しくは採用情報ページをご確認ください。
みなさまからのご応募をお待ちしております。