こんにちは。
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」と言う文字にかわります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>demo1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> document.addEventListener("visibilitychange", function(){ document.title = document['visibilityState']; }); </script> </head> <body> <div>demo1です</div> </body> </html> |
７行目で「visibilitychange」というイベントリスナーを追加して、
ページの閲覧状態がかわったときに８行目の処理が行われます。
ページの状態はdocument[‘visibilityState’]という変数に入り、
隠れた時は「hidden」、表示された時は「visible」の文字列が入ります。
かなりシンプルですがこのような形で使えるようです。
サンプル2 ～応用編～
ページが隠れたときにテキストボックスの中身をサーバーにポストするプログラムです。
タブを切り替える直前のフォームの状態を保存しておきたい時に使えますね！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>demo2</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> document.addEventListener("visibilitychange", function(){ if(document['visibilityState'] == "hidden"){ $.post( "/log.php", {"data": $('#textbox').val()} ); } }); </script> </head> <body> <div>demo2</div> <input type="text" id="textbox"> </body> </html> |
結構地味なAPIですが、例えばメール受信アプリで別のタブに切り替えた時に状態を保存し、
別のタブから戻った時に最新の状態を同期する・・・等、色々応用出来そうですね。
アライドアーキテクツでは、一緒に働いてくれるエンジニアを募集中です。
興味がある方は、こちらの採用サイトからご応募ください。
サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。
