ページ表示

  Visibility API は、Windows 8 の JavaScript を使った Windows ストア アプリでは正常に動作しない可能性があります。

Internet Explorer 10 ではページ表示 API のサポートが導入されました。ページ表示 API では、開発者はプログラミング テクニックを使って、現在のドキュメントの表示を確認したり、表示が変更された場合に通知を受け取ったりすることができます。 ページの表示状態がわからないと、Web 開発者は Web ページが常に表示されていると想定して Web ページを設計しなければなりません。この結果、マシン リソースの使用率が上がるうえ、Web 開発者は Web ページが表示されるかどうかに応じてランタイムを決定することができません。

ページ表示 API

Web ページを設計する際にページが表示されるかどうかがわかれば、ユーザー エクスペリエンスを向上し、電力効率のよいサイトを作成できます。これは、ページ表示 API で実現できます。ページ表示 API は次の 2 つのプロパティで構成されます。

プロパティ説明

document.hidden

ページが表示されるかどうかを説明したブール値。

document.visibilityState

ページの表示状態を返します。値には、PAGE_VISIBLEPAGE_PREVIEW などが含まれます。

 

ページ表示 API には次のイベントもあります。

イベント説明

visibilitychange

ページの表示状態が変更されたときに常に発生するイベント。

 

Web アプリケーションはこの API を使って、ユーザーに表示されるかどうかに基づいて動作を変更することができます。この API を使って、ページが表示されなくなったときに動作のスケール バックを行うことができます。たとえば、Web ベースのメール クライアントが表示されている場合、このクライアントは数秒ごとにサーバーにアクセスして新しいメールをチェックする場合があります。このクライアントが非表示になると、数秒ごとではなく、数分ごとにメールをチェックするようにスケール バックを行います。この API を使って、電源管理とは関係のない状況でより効果的なユーザー エクスペリエンスを提供することもできます。たとえば、パズル ゲームがユーザーに表示されなくなると、このゲームを一時停止することができます。同じように、広告主はこの API を使って、広告がユーザーに表示されないときに、広告に対して請求されないようにできます。

コードの例

次の JavaScript の例は、ページが表示されているかどうかわからない状態でメールをチェックする手法を示しています。ページが表示されていないため、ユーザーがページを積極的に閲覧していないときでも、このコードはメールを常に数秒ごとにチェックします。これは不適切なリソース管理の例です。


<!DOCTYPE html>
<html>
<head>
  <script>
   var timer = 0;
   var PERIOD = 1000;   function onLoad() {
       timer = setInterval(checkEmail, PERIOD);
   }
   function checkEmail() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


ページが表示されていない場合、メールが頻繁にチェックされないので、ページ表示によってリソース管理が改善されます。次のコードは、ページが表示されているときに新しいメールを 1 秒ごとにチェックし、ページが表示されていないときに新しいメールを 1 分ごとにチェックするページ表示を使う手法を示しています。


<!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() { 
       // Check server for new emails
   }
  </script>
</head>
<body onload="onLoad()">
</body>
</html>


API リファレンス

hidden
visibilitychange
visibilityState

Internet Explorer Test Drive デモ

ページ表示 API に関するページ

IEBlog 記事

W3C Web パフォーマンス (パフォーマンスへの投資の継続) に関する記事
W3C 候補勧告に直ちに組み込まれる Web パフォーマンス API に関する記事
1 年間のレビュー (W3C Web Performance Working Group) に関する記事
HTML5 でのコンピューター ハードウェアのより効率的な利用 (新しい Web パフォーマンス API - パート 2) に関する記事

仕様

ページ表示

 

 

表示:
© 2014 Microsoft