通常のサイト、いわゆるホームページを作成するときにはあまり意識しないですが、Webアプリケーションやブラウザ駆動のアプリケーションを作る時には意外と知っておく必要があります。
まずは、JavaScript（jQuery含む）ではブラウザで現在表示しているタブを非アクティブにすることを「blur」、非アクティブ状態から戻ってタブを開いた状態を「focus」という言葉で表現すると押さえておくと理解が早まり、より分かりやすくなります。
通常のホームページでも、タブを切り替えた時に埋め込んだ動画が止まっちゃうけど、再表示したときに自動再生されるようにしたい時などに重宝します。
「focus」とうのはその言葉のとおり、フォーカスが当たることを意味します。一方「blur」はぼんやりするという意味もありますが、どちらかというと「陰る（かげる）」という意味合いの方が適切でしょう。タブの切り替えによって、当該タブは別のタブに陰ると考えるとスッキリします。
JavaScriptで”focus”, “blur”を使う王道方法
簡単です。が、最近の（2022年6月22日段階）Google Chromeだと何か、不安定（？）みたいで、数回に1回くらい「focus」「blur」が動作しないことがあります。詳しい理由が分かり次第共有いたしますね。ただ、Firefoxだとほぼほぼ動作しているので何とも使いどころが難しいかもしれません。
// タブがアクティブな（フォーカスされた）場合
window.addEventListener('focus', function(){
console.log('focus test 01');
}, false);
// タブが非アクティブになった（ブラーされた）場合
window.addEventListener('blur', function(){
console.log('blur test 01');
}, false);試しにこのページでデベロッパーツールを開いて、コンソールを見つつ、タブを切り替えてみてください。「’focus test 01’」「’blur test 01’」のログが出るはずです。筆者は出ています。
jQueryで”focus”, “blur”を判別する方法
jQueryでもfocus, blurは保証されています。jQueryが使える環境で手っ取り早くやってしまいたい方はこちらの方がオススメかもしれません。
$(window).focus(function(){ // タブアクティブ
console.log('focus test jQuery');
});
$(window).blur(function(){ // タブ非アクティブ
console.log('blur test jQuery');
});なんとスッキリコード。アンチjQueryでなければこっちでやっちゃった方が分かりやすいですかね。
こちらもこのページでデベロッパーツールを開いて、コンソールを見つつ、タブを切り替えてみてください。「’focus test jQuery’」「’blur test jQuery’」のログが出るはずです。これも筆者は出ています。
まとめ
JavaScriptで書いてもjQueryで書いても結果は同じですが、これだけのためにjQueryを読み込もうとするのは感心出来ません。既にjQueryが動いているサイトではjQueryバージョンを使った方が楽な気がします。最近のPCやスマホは性能が良いので、jQueryだから動作が遅いとか、あんまり無いようなきがしています。
簡単ですが、focusとblurで、ブラウザのタブ切り替えを検知するプログラムのご紹介でしたー！ではでは。
