はじめに
ウェブ デベロッパーは、より魅力的でインタラクティブなウェブページの作成を可能にする新技術に期待を寄せています。WebGL を使用した 3D グラフィックスのそのとおりです。WebAudio の高度なオーディオ機能わかりました。ウェブカメラとマイクを使用したリアルタイム コラボレーション アプリケーションですか。登録する
同様に重要であるものの、注目度は高くありませんが、より効率的に実行され、全体的なユーザー エクスペリエンスを向上させるアプリケーションを構築できるテクノロジーがあります。そこで役立つのが、PageVisibility などの API です。
Page Visibility API は、シンプルながら重要な機能を実行します。ページがユーザーに表示されることをアプリケーションに通知します。この基本的な情報により、閲覧されていないときに異なる動作をするウェブページを作成できます。いくつか例を考えてみましょう。
- サーバーから情報を取得するウェブページは、アクティブに表示されていないときに更新サイクルが遅くなる可能性があります。
- 画像カルーセルや動画/音声コンテンツが回転して表示されるページは、ユーザーがそのページを再度表示するまで一時停止できる
- アプリは、ビューから非表示の場合にのみ、ユーザーに通知を表示するように指定できます。
一見すると、この API はユーザーの使い勝手ほど有用とは思えないかもしれませんが、モバイルウェブ ブラウジングの大幅な増加を考えると、デバイスのバッテリー消費を抑えるのに役立つものは何でもきわめて重要になります。PageVisibility API を使用すると、ユーザーのデバイスの消費電力を抑えて長持ちさせることができます。
API 仕様（この記事の執筆時点では推奨事項候補のステージ）には、ドキュメントの可視性状態を検出するためのプロパティと、可視性の変化に対応するためのイベントの両方が含まれています。
このチュートリアルでは、API の基本について説明し、いくつかの実用的な例に API を適用する方法を紹介します（せっかちな方は、スキップしてかまいません）。
ドキュメントの公開設定プロパティ
現在のバージョンの PageVisibilityAPI 仕様では、ブール値 hidden と列挙型 visibilityState の 2 つのドキュメント プロパティを定義しています。現在、 visibilityState プロパティには hidden、visible、prerender、unloaded の 4 つの有効な値があります。
ご想像のとおり、ドキュメントがまったく表示されない場合、hidden 属性は true を返します。通常、これは、ドキュメントが最小化されている、バックグラウンドのタブに表示されている、OS のロック画面が表示されている、などのことを意味します。ドキュメントの一部が少なくとも 1 つのディスプレイに少なくとも部分的に表示される場合、この属性は false に設定されます。また、ユーザー補助ツールに対応するため、拡大鏡などのツールによってドキュメントが完全に隠されているが、ドキュメントが表示されているときは、hidden 属性を false に設定できます。
ベンダー プレフィックスの処理
ベンダー固有のプレフィックスではなくコードに焦点を合わせるために、ヘルパー関数を使用してブラウザの仕様を分離します。Android 4.4 ブラウザのサポートを終了したらすぐに、この部分を削除して標準名を維持できます。
function getHiddenProp(){
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++){
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
ドキュメント プロパティの例
これで、クロスブラウザ関数 isHidden() を作成して、ドキュメントが表示されているかどうかを確認できます。
function isHidden() {
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
ドキュメントの公開設定をより詳細に確認するには、 visibilityState プロパティを使用します。このプロパティは、次の 4 つの値のいずれかを返します。
hidden: ドキュメントが完全に非表示になっています。visible: ドキュメントが少なくとも 1 つのディスプレイ デバイスに部分的に表示されていますprerender: ドキュメントは画面外に読み込まれ、表示されません（この値は任意です。すべてのブラウザがサポートしているとは限りません）。unloaded: ドキュメントがアンロードされる場合、この値が返されます（この値は省略可能。すべてのブラウザがサポートしているとは限りません）。
VisibilityChange イベント
可視性プロパティに加えて、ドキュメントの表示状態が変わるたびに発生する可視性変更イベントがあります。このイベントのイベント リスナーは、直接ドキュメント オブジェクトに登録できます。
イベントの例
// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(evtname, visChange);
}
function visChange() {
var txtFld = document.getElementById('visChangeText');
if (txtFld) {
if (isHidden())
txtFld.value += "Tab Hidden!\n";
else
txtFld.value += "Tab Visible!\n";
}
}
まとめ
優れたウェブ アプリケーションを構築するには、ユーザーが目で見て操作できる、驚異的な目を引く機能を使用するだけでは不十分です。真に優れたアプリケーションとは、ユーザーのリソースと注意を慎重に利用することであり、Page Visibility API はそのパズルの重要なピースです。リソースを意識したウェブ アプリケーションの構築について詳しくは、その他のパフォーマンス関連の記事をご覧ください。