Ifvisible.js - 色々な場面で役立ちそう。JavaScriptでアイドル状態、タブの状態を管理
Facebookをはじめチャット系のソフトウェアで良くあるのですが、現在のタブでチャットしていると特に何も通知は出ないのに別タブを開いていると音を出したりタイトルを変化させたりする機能があります。 あれはどうやっているのかなと思っていたのですが、Ifvisible.jsを簡単に実現できそうです。ついでに(?)操作せずに放置した場合の感知も可能です。 使い方は簡単で、ifvisible.jsを読み込むだけで良いようです。
<script src="ifvisible.js"></script>
![]()
後は指定時間(デフォルトでは60秒)放置したタイミングでidleがコールされます。
ifvisible.idle(function(){
// 何か処理
});
![]()
アイドル状態になった後マウスを動かしたり、キー入力を行うとwakeupが呼ばれます。
ifvisible.wakeup(function(){
// アイドルが解除
});
![]()
そしてタブ状態は次のコードで取得できます。
ifvisible.on('statusChanged', function(e){
// ステータスが変わった時に。e.statusで取れます。
});
ifvisible.on("blur", function(){
// 別なタブにいった時の処理
});
ifvisible.on("focus", function(){
// 戻ってきた時の処理
});
タブがアクティブになっているか否かで処理を変更したり、アニメーションを停止したりと言った使い分けが簡単にできそうです。アイドル状態になったらネットワークアクセスを止めるようにしたりしてバッテリーの消費を抑えるといった使い方も考えられるでしょう。 特にjQueryなどの外部ライブラリに依存することもないので手軽に使えるのも良いです。 Ifvisible.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Ifvisible.js by serkanyersen ifvisible.js test page serkanyersen/ifvisible.js