Webアプリケーションを開発していると、ついつい「ブラウザが表示されていること」を前提に考えてしまいます。
しかし実際には、ユーザーは別のタブを開いたり、別のアプリケーションに切り替えたり、スマートフォンの画面を閉じたりしています。
特にSPA（Single Page Application）では、一度ページを読み込んだ後もJavaScriptが継続して動作し続けるため、
ブラウザが表示されていない状態を意識した設計が重要になります。
今回は、ブラウザが非表示になったことを検知する仕組みである
document.visibilitychange と document.hidden
を中心に、その活用方法について考えてみたいと思います。
SPAは見えなくなっても動き続ける
従来のWebサイトでは、
ページ遷移のたびに
画面が再読み込みされるため、
ユーザーが別ページへ移動すると
処理も終了することがほとんどでした。
しかしSPAでは、一度ロードされた
JavaScriptがブラウザ上で動き続けます。
そのため、ユーザーが別タブへ移動したとしても、
タイマー処理やAPI通信、アニメーションなどが
裏側で継続している場合があります。
例えばチャットアプリやダッシュボードシステムでは、
定期的にサーバーへアクセスして最新情報を取得しているケースもあります。
ユーザーが実際には画面を見ていないにも関わらず通信を続けていると、
不要なサーバー負荷やクライアント側のリソース消費につながります。
SPAだからこそ、
「今ユーザーは本当にこの画面を見ているのか？」
ということも設計に含めなければいけません。
最では、AIエージェントでコーディングする、非エンジニアなども多いようですが、
AIは、ちゃんと支持しないと、こんなお作法は持っていません。
実際にアプリを作ったけど、端末側での処理負荷が高くて使い物にならないと評価されないために、
バックグラウンド設計はしっかりとするようにしましょう。
visibilitychangeイベントで状態変化を検知する
ブラウザには、ページの表示状態が変化したことを検知するための
visibilitychange イベントが用意されています。
例えばユーザーが
別タブへ移動した場合や、
ブラウザを最小化した場合などにイベントが発生します。
document.addEventListener("visibilitychange", () => {
console.log("表示状態が変わりました");
});
このイベントを利用することで、
画面が見えなくなったタイミングや、
再び表示されたタイミングで必要な処理を実行することができます。
例えば
動画再生を一時停止したり、一定間隔で実行している
処理を停止したりといった制御が可能になります。
SPAでは様々な非同期処理が動いているため、このイベントを上手く活用することで無駄な処理を減らすことができます。
もちろん、止めてもいい処理と止めてはいけない処理などを、事前に設計できていないと、
この停止処理などを入れて、想定外のバグが発生することもあるので、気をつけましょうね。
document.hiddenで現在の状態を確認する
イベントだけではなく、
現在の表示状態を取得したい場合には
document.hidden を利用するといいでしょう。
if (document.hidden) {
console.log("ページは非表示です");
} else {
console.log("ページは表示されています");
}
true であればページは非表示、
false であれば表示中
という意味になります。
※hidden状態のBoolenが返ります。
実際には
visibilitychange と組み合わせて利用することが多く、
例えば以下のような実装になります。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
stopPolling();
} else {
startPolling();
}
});
こうすることで、
ユーザーが画面を見ていない間は
定期通信を停止し、
画面に戻ってきたら再開するといった制御が実現できます。
表示処理が頻繁に行われるゲーム系や、バックグラウンド処理が深く行われるリアルタイム処理などの場合は、
意識していないと、ユーザーがそのページ（アプリ）を裏で立ち上げているだけで、CPUがガンガン使われて、
ノートPCであれば、バッテリーがドンドン減っていく状態になるでしょう。
そんな、システムは、誰も良い評価してくれませんよね.
実際の運用で考えたいこと
ブラウザが非表示になったからといって、
すべての処理を停止すれば良いわけではありません。
例えばチャットアプリであれば
通知用の通信は継続したいかもしれませんし、
業務システムであれば
セッション維持のための通信は必要かもしれません。
一方で、
アニメーション描画や頻繁なデータ取得などは停止しても問題ないケースが多くあります。
重要なのは、「ユーザーが見ていない間に実行する価値がある処理なのか」を考えることです。
SPAが高機能になるほど
裏側で動く処理も増えていきます。
そのため、表示状態を意識した設計は
パフォーマンス改善だけでなく、
サーバーコスト削減にもつながります。
利用できるブラウザチェック
よほど古いブラウザじゃない限り、どちらもちゃんと動作するようです。
visibilitychange
document.hidden
マーケティング利用の思考
HTML4の時には無かった機能を見ると、
「企業ホームページでこれを使って何かマーケティングに役立つツールが作れないか？」
と、自分はよく考えてしまいます。
機能停止する処理はどうでも良いのですが、
フォアグラウンドか、バックグラウンドかという判定で、ページを開いている時の閲覧時間などを計測する時に、
フォアグラウンドの場合の時だけ計測対象にするとより、正確な時間が取得できそうですね。
また、読み物ページや、頻繁に他のアプリなどと行き来するようなツールの場合、
PVという概念ではなく、「開いた状態で他のアプリと何回行き来したか」の数値が計測できるようになるでしょう。
また、行き来する時の時間計測をして、ツールの利用頻度と割合など、これまでGAなどでは正確に計測できなかったような数値を取得することが可能です。
不動産の賃貸物件検索サイトなどで、他のページ比較などもされているケースが多い場合、ヒートマップと、再表示割合と時間などを組み合わせると、
ユーザー訴求も今と違った事ができるかもしれませんね。
あとがき
SPA開発では、
画面が表示されている状態ばかりに目が向きがちです。
しかし実際のユーザーは、
複数のタブを行き来したり、スマートフォンを
スリープ状態にしたりしながら利用しています。
そんな現実的な利用シーンを考えると、
今回紹介したdocument.visibilitychange や document.hidden を使うことは、非常に便利な仕組みだと思います。
「見えていない時は休む、見えたら再開する」
人間にとっても理想的な働き方ですが、SPAにとっても同じことが言えそうです。
少しだけユーザーの視線を意識することで、
より賢く、より効率的なWebアプリケーションを作ることができるでしょう。
個人的には、無駄アプリや、ゴミアプリ、駄目アプリ、物足りないアプリ、こんなのを使うことも嫌いではないのですが、
できればせっかく作ったシステムをより良くしたいのが、制作者としての本望ですからね。
あと、マーケティング案は、実はもっと他にもあったりもするので、企業マーケターの人で興味がある方いらっしゃいましたら、
お気軽にご相談くださいませ。
0 件のコメント:
コメントを投稿