W3C

Page Visibility — ページ可視性(第2版)

W3C 勧告 2013 年 10 月 29 日

このバージョン:
http://www.w3.org/TR/2013/REC-page-visibility-20131029/
最新バージョン:
http://www.w3.org/TR/page-visibility/
前のバージョン:
http://www.w3.org/TR/2013/REC-page-visibility-20130514/
編集:
Jatinder Mann, Microsoft Corp., <>
Arvind Jain, Google Inc., <>

この文書に対する公式の修正も含まれ得る 正誤表 も参照されたし。 Please refer to the errata for this document, which may include some normative corrections.

各国語の 翻訳 See also translations.

Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.

要約

この仕様は、サイト開発者が電力と CPU の面で効率的なウェブアプリケーションを開発できるようにするために,ページの現在の可視性状態をプログラムから判別するための方法を定義する。 This specification defines a means for site developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient web applications.

この文書の位置付け

この節では、発行時点における… 【 以下、この節の内容の一部は W3C 日本語訳 共通ページ に委譲 】

これは "Page Visibility (Second Edition)" W3C 勧告( Recommendation )です。 2013 年の勧告候補の段階で作成された, Page Visibility テストスイート に基づく 実装報告 も入手できます。 This is the W3C Recommendation of "Page Visibility (Second Edition)". An implementation report, produced during the Candidation Recommendation phase in 2013, is available based on the Page Visibility test suite.

初版から第2版に加えられた唯一の変更点は、 4.3 節における visibilitychange イベント名の誤記の修正のみです。 The only change in the Second Edition is to fix a typo in the name of the visibilitychange event in section 4.3.

コメントがあれば、件名の先頭に [PageVisibility] と記した上で public-web-perf@w3.org (archived) 宛まで送られるよう願います。 Please send comments to public-web-perf@w3.org (archived) with [PageVisibility] at the start of the subject line.

Page Visibility 仕様に利用されている列挙型をサポートする update of idlharness.js の更新に伴い, Web IDL に関する安定性は、ディレクターから承認が得られています。 ディレクターは、この仕様が, HTML5 仕様 による Document インタフェース — それ自身も DOM4 による Document インタフェース定義を拡張している — の部分的インタフェース( "partial interface" )定義による拡張*に依存することも注記しています。 そのインタフェースは DOM Level 3 勧告 にも定義されています。 拡張*それ自体は,本質的に Document インタフェースの他の部分に変更を加えない純粋な拡張なので、 Page Visibility の実装は DOM4 の変更からは影響されないものと見られています。 これらの参照の特質に鑑み、現時点の仕様が十分に独立したものであり、ディレクターにより W3C 勧告に昇格されてよいものと決定されました。 With the update of idlharness.js to support for the enumeration type used by the Page Visibility specification, the Director was satisfied by the evidence of stability of the Web IDL portions. The Director also noted that the specification relies on the partial interface definition of Document from the HTML5 specification, itself extending the Document definition provided in DOM4. This interface is also defined in the DOM Level 3 Recommendation. The nature of the extension itself as a pure extension that does not modify other portions of the Document interface and implementations of Page Visibility would not be impacted by changes in DOM4. The Director has determined that, due to the nature of these references, the current specification is sufficiently independent that it may advance to W3C Recommendation.

この文書は Web Performance Working Group により制作されました。 Web Performance Working Group は W3C Interaction DomainRich Web Clients Activity の一部門です。 This document is produced by the Web Performance Working Group. The Web Performance Working Group is part of the Rich Web Clients Activity in the W3C Interaction Domain.

1. 序論

この節は参考である。 This section is non-normative.

Page Visibility 仕様は、サイト開発者のために,プログラムが文書の現在の可視性状態を判別したり, 可視性状態が変化した際に通知を受けられるようにするための方法を定める。 ページの可視性状態の判別機能が無い間、ウェブ開発者たちは,ウェブページを常に可視と見なして設計してきた。 これは、マシンのリソースをより多く消費するのみならず、ウェブ開発者たちが,ページが利用者から可視であるかどうかに基づいて,実行時のふるまいを変えることも難しくしている。 ウェブページの設計を,その可視性について判別可能な下で行えるなら、利用者体験とサイトの効率性を向上させられるようになる。 The Page Visibility specification defines a means for site developers to programmatically determine the current visibility of a document and be notified of visibility changes. Without knowing the visibility state of a page, web developers have been designing webpages as if they are always visible. This not only results in higher machine resource utilization, but it prevents web developers from making runtime decisions based on whether the webpage is visible to the user. Designing web pages with knowledge of the page visibility will allow for improved user experiences and power efficient sites.

このインタフェースにより、ウェブアプリケーションは,利用者から可視かどうかに基づいて ふるまいを変えられるようになる。 例えば、ページが可視でなくなった時点で仕事量を減らす用途に,このインタフェースを利用できる。 より具体的には,ウェブ上のメールクライアントにおいて、可視の間は,数秒ごとに新たなメッセージの着信をサーバに確認しに行き、隠されている間は,数分ごとに確認するなど。 このインタフェースは、電力管理に関係ない所でも,より快適な利用者体験を提供する用途に利用できる。 例えばパズルゲームであれば,利用者から見えなくなっている間は ゲームを停止させたり、利用者から可視でない間,広告の更新を停止させるのにも利用できる。 With this interface, web applications may chose to alter behavior based on whether they are visible to the user or not. For example, this interface can be used to scale back work when the page is no longer visible. If a web based email client is visible, it may check the server for new messages every few seconds. When hidden it might scale checking email to every few minutes. This interface can also be used to provide better runtime user experience decisions not related to power management. For example, a puzzle game could be paused when the user no longer has the game visible. Further, this interface can be used by advertisers to not charge for ads that are not visible to users.

次のスクリプトに、ページの可視性が判別できない下で,新たなメッセージの確認を数秒ごとに行う,ウェブ上の仮想のメールクライアントを示す: For example, the following script shows a theoretical web based email client checking for new messages every second without knowledge of the Page Visibility:

<!DOCTYPE html>
<html>
 <head>
  <script>
   var timer = 0;
   var PERIOD = 1000;

   function onLoad() {
       timer = setInterval(checkEmail, PERIOD);
   }

   function checkEmail() { 
       // 新たなメッセージの着信をサーバに確認しに行く
   }

  </script>
 </head>
 <body onload="onLoad()">
 </body>
</html>

スクリプトは、ページが可視でなく,利用者が能動的にページを見ていなくても,数秒ごとにメッセージの到着を確認しに行くことになる。 これはリソース管理の効率が悪い例になる。 The script will always check for messages every second, even if the user is not actively viewing the page because it is not visible. This is an example of poor resource management.

Document インタフェースの hidden 属性,および visibilitychange イベントの利用により、ページが可視でない間は,着信メッセージの確認頻度を数分ごとに落とせるようになる。 Using the hidden attribute of the Document interface and the visibilitychange event, the page will be able to throttle checking messages to every minute when the page is no longer visible.

次のスクリプトに、ページが可視の間は1秒ごとに, 可視でない間は1分ごとに,新たなメッセージの確認を行う、ウェブ上の仮想のメールクライアントを示す: The following script show the theoretical web based email client checking for new messages every second when visible and every minute when not visible:

<!DOCTYPE html>
<html>
 <head>
  <script>
   var timer = 0;
   var PERIOD_VISIBLE = 1000;
   var PERIOD_NOT_VISIBLE = 60000;

   function onLoad() {
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
       if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
   }

   function visibilityChanged() {
       clearTimeout(timer);
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
   }

   function checkEmail() { 
       // 新たなメッセージの着信をサーバに確認しに行く
   }

  </script>
 </head>
 <body onload="onLoad()">
 </body>
</html>

2. 適合性 要件

【 この節の内容は W3C 日本語訳 共通ページ に委譲 】

3. 語法

【 この節の内容は W3C 日本語訳 共通ページ に委譲 】

【日本語訳に固有の表記規約】

記述を簡潔にするため、この訳では:

4. ページ可視性

4.1. 概要

この節は参考である。 This section is non-normative.

この仕様は、ウェブアプリケーションが,プログラムからページの現在の可視性を判別し,可視性の変化の通知を受けられるようにする機能を提供するインタフェースを導入する。 This specification introduces an interface that provides Web applications with the means to programmatically determine the current visibility of a page and be notified of visibility changes.

4.2. Document インタフェースに対する拡張

この仕様は HTML5 仕様 [HTML5] にて定義される Document インタフェースを拡張する: The HTML5 specification defines a partial Document interface [HTML5], which this specification extends:

enum VisibilityState { "hidden", "visible", "prerender", "unloaded" };

partial interface Document {
  readonly attribute boolean hidden;
  readonly attribute VisibilityState visibilityState; 
};
閲覧中のブラウザでこれらの属性の

hidden 属性

hidden 属性の被取得時には:

トップレベル文書について,その全体が可視でないときは true が、1つ以上のスクリーンにおいてどこか一部でも可視であるときは false が返されなければならない On getting, the hidden attribute MUST return true if the Document contained by the top level browsing context (root window in the browser's viewport) [HTML5] is not visible at all. The attribute MUST return false if the Document contained by the top level browsing context is at least partially visible on at least one screen.

その文書の defaultView が null である場合は true が返されなければならない If the defaultView of the Document is null, on getting, the hidden attribute MUST return true.

概して,full screen でありつつ, ページのビューも表示するようなアクセシビリティツールに適応する目的においては【*】、適用可能であれば, UA が最小化されてはいないが,他のアプリケーションに完全に覆われているときには、 false が返されてもよい To accommodate accessibility tools that are typically full screen but still show a view of the page, when applicable, this attribute MAY return false when the User Agent is not minimized but is fully obscured by other applications.

【 どの様な状況が想定されているのかよくわからない( “full screen” の対訳は普通は “全画面” になるが、“ページのビューも表示” と辻褄が合わないような)。 “完全に遮蔽” の意味にも思われるが、“アクセシビリティツール” はどの様に関わる? 】

注記

例として, hidden 属性は次のようなときに true を返す: As examples, on getting, the hidden attribute returns true when:

  • UA が最小化されている。 【アイコン化, 等】 The User Agent is minimized.
  • UA は最小化されてはいないが,ページが背後のタブ上にある。 The User Agent is not minimized, but the page is on a background tab.
  • UA がページの unload に取りかかっている。 The User Agent is about to unload the page.
  • UA が別のセッション履歴エントリへ向けて辿りにかかっている The User Agent is about to traverse to a session history entry.
  • OS が表示中のスクリーンをロックしている。 The Operating System lock screen is shown.

同様に、例として, hidden 属性は次のようなときに false を返す: Likewise, as examples, on getting, the hidden attribute returns false when:

  • UA は最小化されてなく, かつ ページが前面のタブ上にある。 The User Agent is not minimized and the page is on a foreground tab.
  • UA は拡大鏡などのアクセシビリティツールにより完全に覆われているが,ページのビューは見えている。 The User Agent is fully obscured by an Accessibility Tool, like a magnifier, but a view of the page is shown.

visibilityState 属性

visibilityState 属性の被取得時には、次のいずれかの DOMString, または 4.5. ベンダ接頭辞 にて定められるベンダ接頭辞付きの DOMString が返されなければならない On getting, visibilityState attribute MUST return one of the following DOMStrings or a vendor prefixed DOMString as defined in 4.5 Vendor Prefixes:

  • "hidden"
  • "visible"
  • "prerender"
  • "unloaded"
hidden

トップレベル文書がどのスクリーンでも可視でない場合、 "hidden" が返されなければならない On getting, the visibilityState attribute MUST return the DOMString hidden if the Document contained by the top level browsing context is not visible at all on any screen.

その文書の defaultView が null である場合、 "hidden" が返されなければならない If the defaultView of the Document is null, on getting, the visibilityState attribute MUST return the DOMString hidden.

概して,full screen でありつつ, ページのビューも表示するようなアクセシビリティツールに適応する目的においては、適用可能であれば, UA が最小化されてはいないが,他のアプリケーションに完全に覆われているときには、 "hidden" の代わりに "visible" が返されてもよい To accommodate accessibility tools that are typically full screen but still show a view of the page, when applicable, on getting, the visibilityState attribute MAY return the DOMString visible, instead of hidden, when the User Agent is not minimized but is fully obscured by other applications.

注記

例えば次のような場合、 visibilityState 属性は "hidden" を返すことになるであろう: For example, in the following cases the visibilityState attribute would return the DOMString hidden:

  • UA が最小化されている。 The User Agent is minimized.
  • UA は最小化されていないが,ページは背後のタブ上にある。 The User Agent is not minimized, but the page is on a background tab.
  • OS が表示中のスクリーンをロックしている。 The Operating System lock screen is shown.
visible

トップレベル文書が,1つ以上のスクリーンにおいてどこか一部でも可視である場合、 "visible" が返されなければならない。 これは hidden 属性が false にされているときと同じ条件である。 On getting, the visibilityState attribute MUST return the DOMString visible if the Document contained by the top level browsing context is at least partially visible at on at least one screen. This is the same condition under which the hidden attribute is set to false.

概して,full screen でありつつ, ページのビューも表示するようなアクセシビリティツールに適応する目的においては、適用可能であれば, UA が最小化されてはいないが,他のアプリケーションに完全に覆われているときには、 "visible" が返されてもよい To accommodate accessibility tools that are typically full screen but still show a view of the page, when applicable, on getting, the visibilityState attribute MAY return the DOMString visible when the User Agent is not minimized but is fully obscured by other applications.

prerender

トップレベル文書がオフスクリーンに読み込まれていて,可視でない場合、 "prerender" が返されてもよい。 UA による visibilityState 属性の返り値 "prerender" のサポートは任意選択である。 On getting, the visibilityState attribute MAY return the DOMString prerender if the Document contained by the top level browsing context is loaded off-screen and is not visible. User Agent support of the prerender return value of the visibilityState attribute is optional.

unloaded

UA が トップレベル文書unload に取りかかっている場合、 "unloaded" が返されるべきである。 UA による visibilityState 属性の返り値 "unloaded" のサポートは任意選択である。 On getting, the visibilityState attribute SHOULD return the DOMString unloaded if the User Agent is to unload the Document contained by the top level browsing context. User Agent support of the unloaded return value of the visibilityState attribute is optional.

4.3. visibilitychange イベント

UA は トップレベル文書の可視性の変化を検知したとき、その文書に対し visibilitychange イベントを発火しなければならない The User Agent MUST fire the visibilitychange event at the Document when the User Agent determines that the visibility of the Document contained by the top level browsing context has changed.

閲覧中のブラウザでこのイベントの取得を

(イベントがサポートされていれば、開始後,[ タブの切替, ウィンドウ最小化, 別ページへ進む → 戻る ]等の操作により,可視性が切り替わる度に document の hidden, visibilityState 属性の取得結果が表示されます — 未サポートの場合は何も起きません)

4.4. 処理モデル

UA は トップレベル文書の可視性の変化が検知されたとき、次の手続きを実行しなければならない When the User Agent determines that the visibility of the Document contained by the top level browsing context has changed, the User Agent MUST run the following steps.

トップレベル文書が,1つ以上のスクリーンにおいてどこか一部でも可視になったとき: If the Document contained by the top level browsing context is now at least partially visible on at least one screen,

  1. セッション履歴エントリ 向けて辿りにかかっているときは、 pageshow イベントを発火する手続きに入る前に, 可視 告知アルゴリズム を実行する。 If traversing to a session history entry, run the now visible algorithm before running the step to fire the pageshow event.

  2. 他の場合、 可視 告知アルゴリズム を実行するタスクを待ち行列に入れる。 Otherwise, queue a task that runs the now visible algorithm.

他の場合(トップレベル文書が不可視になった場合,または UA が その文書の unload に取りかかっている場合): Else if the Document contained by the top level browsing context is now not visible or if the user agent is to unload the Document,

  1. UA がその文書を unload するときは, unloading document visibility change steps の間に 不可視 告知アルゴリズム を実行する。 If the user agent is to unload the Document, run the now hidden algorithm during the unloading document visibility change steps,

  2. 他の場合、 不可視 告知アルゴリズム を実行するタスクを待ち行列に入れる。 Otherwise, queue a task that runs the now hidden algorithm.

可視 告知アルゴリズム は次の手続きを同期的に実行する: The now visible algorithm runs the following steps synchronously:

  1. hidden 属性を false にする。 Set the hidden attribute to false.

  2. visibilityState 属性を visible にする。 Set the visibilityState attribute to visible.

  3. 文書に向けて、[ 浮上する, かつ 取消不可である, かつ 既定動作を持たない ]ような,名前 visibilitychange の単純イベントを発火する。 Fire a simple event named visibilitychange that bubbles, isn't cancelable, and has no default action, at the Document.

不可視 告知アルゴリズム は次の手続きを同期的に実行する: The now hidden algorithm runs the following steps synchronously:

  1. hidden 属性を true にする。 Set the hidden attribute to true.

  2. visibilityState 属性を "hidden" にする。 UA が文書の unload に取りかかるときは、任意選択で, visibilityState 属性を "hidden" の代わりに "unloaded" にすることもできる。 Set the visibilityState attribute to hidden. If the user agent is to unload the Document, set the visibilityState attribute to unloaded. Setting visibilityState attribute to unloaded instead of hidden is optional.

  3. 文書に向けて、[ 浮上する, かつ 取消不可である, かつ 既定動作を持たない ]ような,名前 visibilitychange の単純イベントを発火する。 Fire a simple event named visibilitychange that bubbles, isn't cancelable, and has no default action, at the Document.

4.5. ベンダ接頭辞

ベンダ固有のプロプライエタリ UA 拡張は推奨されない。 例えば,試験的な目的でその種の拡張が必要になった場合、ベンダは次の拡張の仕組みを利用しなければならない Vendor-specific proprietary user agent extensions are discouraged. If such extensions are needed, e.g., for experimental purposes, vendors MUST use the following extension mechanisms:

ベンダが,試験的な可視性状態のために visibilityState 属性の返り値に対する拡張が必要になった場合、 UA は,その VisibilityState 列挙型を更新する際に,次の規約に従う DOMString を用いなければならない If an extension to the visibilityState attribute return value is needed for an experimental visibility state, User Agents MUST update the VisibilityState enum with a DOMString that uses the following convention:

"[ベンダ接頭辞]-[名前]" [vendorprefix]-[name]

ここで Where,

  • [ベンダ接頭辞] は、ベンダを識別する,非大文字の名前とし, [vendorprefix] is a non-capitalized name that identifies the vendor,
  • [名前] は、可視性状態に付けられる,非大文字の名前とし, [name] is a non-capitalized name given to the visibility state,
  • これらの名前に利用する文字は ASCII に限るとする。 and the above names are in ASCII.

5. プライバシー

Page Visibility API は、ウェブページ上の第三者主体による内容からも, トップレベル文書の可視性を( focusblur イベントなどの既存の仕組みよりも詳細に)判別できるようにする。 しかしながら,実用的な見地からは、この追加の公開が プライバシーに大きく響くものとは考えられていない。 The Page Visibility API enables third party content on a web page to determine the visibility of the Document contained by the top level browsing context with higher precision compared to existing mechanisms, like focus or blur events. However, for practical considerations, the additional exposure is not substantial.

6. 参照文献

[RFC 2119]
Key words for use in RFCs to Indicate Requirement Levels, Scott Bradner, Author. Internet Engineering Task Force, March 1997. Available at http://www.ietf.org/rfc/rfc2119.txt.
[HTML5]
HTML5, Robin Berjon et al., Editors. World Wide Web Consortium, December 2012. This version of the HTML5 is available from http://www.w3.org/TR/html5/. The latest editor's draft of HTML5 is available at http://www.w3.org/html/wg/drafts/html/CR/.
[Web IDL]
Web IDL, Cameron McCormack, Editor. World Wide Web Consortium, April 2012. This version of the Web IDL specification is available from http://www.w3.org/TR/2012/CR-WebIDL-20120419/. The latest version of Web IDL is available at http://www.w3.org/TR/WebIDL/.

謝辞

この仕事に対する,次の方々による寄与に謝意を:

We would like to sincerely thank Karen Anderson, Nic Jansma, Alex Komoroske, Cameron McCormack, James Robinson, Jonas Sicking, Kyle Simpson, Jason Weber, and Boris Zbarsky to acknowledge their contributions to this work.