ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」
2010年06月21日-
スポンサード リンク
Idle Checker : by Kevin Lint
ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」。
ユーザがブラウザ上で操作しているうちはいいのですが、席をたったりした場合にログアウトを発生させたいようなケースがありますね。
会社なんかで画面をそのままにして席をたった後、ログイン状態のままだと誰かに操作されてしまう危険性がありますが、自動でログアウトを実装する仕組みがこのプラグインで実現出来ます。
デモページを見ると、ページ内でいる時間数がどんどん上がっているのが確認できます。クリックするとリセットされます。
プラグインのメソッドに、タイムアウト秒数や、ログアウトURLをパラメータとして渡しておくことで、指定した時間がくればログアウトURLに移動するようなことが簡単に実装出来ます。
ログアウトした際の例
使い方は以下のようにオプション数は多いものの比較的簡単です。
var options = {
Cookie:"IdleCheckerTimeOut",
CookieExpires:1,
CookiePath:"/",
CookieDomain:"kevinlint.com",
CookieSecure:false,
TimeOutAfter: 10000,
CountDownFor: 5000,
CheckInterval: 1000,
logoutUrl: "idleCheckerLogout.xxx",
logoutUrlParams: "?msg=you were logged out",
keepAliveUrl: "idleCheckerKeepAlive.xxx",
windowTitle:"myapplication"
}
$.IdleChecker(options);
それほど面倒ではないにしても、いざ実装するとそれなりに大変なこの機能。サクっと実現できるので覚えておいてもよさそうですね。
関連エントリ
ユーザがアイドル状態になったかどうか確認できるjQueryプラグイン「IdleChecker」。
ユーザがブラウザ上で操作しているうちはいいのですが、席をたったりした場合にログアウトを発生させたいようなケースがありますね。
会社なんかで画面をそのままにして席をたった後、ログイン状態のままだと誰かに操作されてしまう危険性がありますが、自動でログアウトを実装する仕組みがこのプラグインで実現出来ます。
デモページを見ると、ページ内でいる時間数がどんどん上がっているのが確認できます。クリックするとリセットされます。
プラグインのメソッドに、タイムアウト秒数や、ログアウトURLをパラメータとして渡しておくことで、指定した時間がくればログアウトURLに移動するようなことが簡単に実装出来ます。
ログアウトした際の例
使い方は以下のようにオプション数は多いものの比較的簡単です。
var options = {
Cookie:"IdleCheckerTimeOut",
CookieExpires:1,
CookiePath:"/",
CookieDomain:"kevinlint.com",
CookieSecure:false,
TimeOutAfter: 10000,
CountDownFor: 5000,
CheckInterval: 1000,
logoutUrl: "idleCheckerLogout.xxx",
logoutUrlParams: "?msg=you were logged out",
keepAliveUrl: "idleCheckerKeepAlive.xxx",
windowTitle:"myapplication"
}
$.IdleChecker(options);
それほど面倒ではないにしても、いざ実装するとそれなりに大変なこの機能。サクっと実現できるので覚えておいてもよさそうですね。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ