Allied ArchitectsAllied ArchitectsEngineer Blog

iOS7のMobile Safariで「Page Visibility API」を試す

2013/09/25 JavaScript

こんにちは。
iPhone5sを販売初日に手に入れようとApple Store渋谷店に朝4:30から並びましたが、
会社の始業時間が迫っているのにApple Storeの姿を見ることすらできず泣きそうになった長野です。
ちなみに次の日に少し並んだら買えました。

さて、9/18にiOS7が出ましたね!
これでMobile Safariでも(前回紹介した)WebRTCが実装されて
iPhoneからブラウザ越しにストリーム配信ができる!
と思っていたら、実装されませんでした・・・

そのことを書くつもりでしたが、ないものをネタには出来ないので
代わりに新規実装された「Page Visibility API」について書いてみます。

「Page Visibility API」とは、「ページの表示状態、非表示状態を取得するAPI」とあり、
ブラウザのタブ切り替えやウインドウの最小化等、ページを閲覧状態か否かJavaScriptで検知できるAPIです。

PCの主要なブラウザでは既に実装済みであり、PCではこちら
のページで実際の挙動を確認することが出来ます。(動画を再生中にタブを切り替えると、APIが切り替えを検知して動画を一時停止します)

サンプル1 ~動作確認編~

ios7のSafariでページを開き、タブを切り替えようとすると
タイトル部分が「hidden」と言う文字にかわります。

7行目で「visibilitychange」というイベントリスナーを追加して、
ページの閲覧状態がかわったときに8行目の処理が行われます。
ページの状態はdocument[‘visibilityState’]という変数に入り、
隠れた時は「hidden」、表示された時は「visible」の文字列が入ります。
かなりシンプルですがこのような形で使えるようです。

サンプル2 ~応用編~

ページが隠れたときにテキストボックスの中身をサーバーにポストするプログラムです。
タブを切り替える直前のフォームの状態を保存しておきたい時に使えますね!

結構地味なAPIですが、例えばメール受信アプリで別のタブに切り替えた時に状態を保存し、
別のタブから戻った時に最新の状態を同期する・・・等、色々応用出来そうですね。

アライドアーキテクツでは、一緒に働いてくれるエンジニアを募集中です。
興味がある方は、こちらの採用サイトからご応募ください。

nagano
  • nagano
  • Webエンジニア
  • サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。

RELATION ENTRY

Unityを触ってみる3

Unityを触ってみる3

2017/10/11 未分類

はじめに こんにちは。プロダクト開発部兼UGC事業部の長野です。 気づけば3年半振りの投稿です。 本業ではphpやJavaScriptを触っていますが、このブログでは引き続きunityネタで行きます。 今回はunityに今流行のDeepLearningを組み合わせたlisというものを使ってみます...

続きを読む

Unity 4.3を触ってみる2

Unity 4.3を触ってみる2

2014/05/8 JavaScript

こんにちは。システム部の長野です。 今回も前回に引き続きUnityネタで行きます。 今流行の鳥を飛ばして障害物を避けていく某人気ゲームのようなものを作ってみました。 (既に出尽くした感満載ですが、、) サンプル ※閲覧するにはUnity Web Playerのインストー...

続きを読む

naganoの記事一覧へ

ページTOPへ