ページの表示・非表示状態を取得するPage Visibility API

HTML5 Advent Calendarの1日目です。
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、「HTML5」がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください。

http://atnd.org/events/21987

私は、とりあえず1日目なので軽く、堅くPage Visibility APIというマイナーな仕様について解説したいと思います！

Page Visibility APIとは
Page Visibility APIは、ページの表示状態を取得するAPIです。document.hidden のプロパティから表示状態(false)、非表示状態(true)を確認することができます。以下の場合に非表示状態になります。

• ウィンドウが最小化された場合
• 同じウィンドウの他のタブを見ている場合
• OSのロック画面中の場合（Chrome15で確認したところ状態は変わらず）

どんなときに使うかと言うと。
例えば、メールを定期的にチェックする処理があるとして、表示状態のときは頻繁にチェックし、非表示状態のときにはたまにチェックするのみにするような場合に利用できます。もしくは、非表示状態のときは一切動かす必要がないものもあるかもしれません。
表示・非表示状態の変更の検知は、visibilitychangeイベントを使います。以下は、Chromeでのサンプルコードです。

// for chrome
document.addEventListener('webkitvisibilitychange', function(){
  if ( document.webkitHidden ) {
    // 非表示状態
  } else {
    // 表示状態
  }
}, false);

非常に単純で簡単ですね！ちなみに最近のブラウザは、バックグラウンドタブの1秒以下の間隔のsetTimeoutã‚„setIntervalに何もしなくても自動的に遅延が掛かるので注意です。（詳細は、モダンブラウザのタイマー処理の制限をWebSocketを使って突破する(WebWorkersについて追記あり)）
2011年12月1日現在では、以下の対応ブラウザでベンダープリフィックス付きでアクセスできます。

対応ブラウザ
Chrome 13+	Firefox 10	IE 10

デモ
既に秀逸なデモがあったので、それを紹介します。:p

Internet Explorer 10 Test Drive - Page Visibility API -
表示・非表示の状態をタイムラインで表示するデモです。

http://www.samdutton.com/pageVisibility/

Using the Page Visibility API
非表示の状態のときに動画の再生をストップし、再表示された際に再生をリスタートするデモです。タブのアイコンで再生マーク、一時停止マークがつくのが面白いです。

http://www.samdutton.com/pageVisibility/

APIリファレンス
Properties

プロパティ	説明
document.hidden	ページ表示状態（false: 表示、true: 非表示）
document.visiblityState	ページ表示状態の詳細（PAGE_HIDDEN("hidden"): 非表示、PAGE_VISIBLE("visible"): 表示、PAGE_PRERENDER("prerender"): ページのレンダリング完了前）

Events

イベント	説明
visibilitychange	ページの表示状態が変化した際に発生する

W3Cの仕様書はこちら。

W3C Working Draft - Page Visibility -
http://www.w3.org/TR/2011/WD-page-visibility-20110602/

まとめ
特に面白いことを書いているわけではないですが、とりあえず「こんなAPIもあるよ」ということでマイナーなPage Visibility APIを紹介してみました。HTML5は、他にも細かい仕様がどんどん追加されていて追っかけるのが大変ですね。また機会があれば他のAPIも紹介していきたいと思います！