ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Facebookをはじめチャット系のソフトウェアで良くあるのですが、現在のタブでチャットしていると特に何も通知は出ないのに別タブを開いていると音を出したりタイトルを変化させたりする機能があります。

あれはどうやっているのかなと思っていたのですが、Ifvisible.jsを簡単に実現できそうです。ついでに(?)操作せずに放置した場合の感知も可能です。

使い方は簡単で、ifvisible.jsを読み込むだけで良いようです。

<script src="ifvisible.js"></script>

デモ。何も操作をしないとタイマーがどんどん進んでいきます。
デモ。何も操作をしないとタイマーがどんどん進んでいきます。

後は指定時間(デフォルトでは60秒)放置したタイミングでidleがコールされます。

ifvisible.idle(function(){
  // 何か処理
});

アイドルになりました。
アイドルになりました。

アイドル状態になった後マウスを動かしたり、キー入力を行うとwakeupが呼ばれます。

ifvisible.wakeup(function(){
  // アイドルが解除
});

マウスを動かすとwakeupがコールされます。右側のログを見ると分かりますが、別タブに切り替えたかどうかも取れています。
マウスを動かすとwakeupがコールされます。右側のログを見ると分かりますが、別タブに切り替えたかどうかも取れています。

そしてタブ状態は次のコードで取得できます。

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2