[Firefox OS][WebAPI]Page Visibility APIの使い方 – onResumeの代わりにできること

 藪下@2課のガジェオタです。

 Firefox Developers Conference 2014 in Kyotoの準備とかその間に滞った作業のリカバリでバタバタしていたのでご無沙汰していました。今週から平常運転に戻します。

 FxOSコードリーディングの運営をお手伝いいただいているひらとりさんとノマドワーキングしてたら面白い質問をもらったので調べてみました。

Q&A

Q.Firefox OSのアプリにはAndroidのライフサイクルでいうところのonResumeがないけどアプリから離れて戻ってきた時に動作したい場合どうしたらいいの?

A.Page Visibility APIを使いましょう。

What is Page Visibility API?

 Page Visibility APIはSafari発祥みたいですね。Page Visibility APIではページが見えているかいないかを知ることができます。
 onblurとかonfocus見たいなハックは見たことありますよね。これらはフォーカスが外れたとき、フォーカスを得たときを検知してくれますがページの可視状態と必ずしも一致しません。Page Visibility APIだとちゃんと見えなくなったり見えるようになったときにvisibilitychangeイベントを呼んでくれるので正しい解決だといえます。
 gaiaだとブラウザやSMS、時計、カメラなどいろいろなところで使っています。

How to

 使い方を見ていきます。

visibilitychangeイベント

 visibilitychangeイベントはDOMイベントです。なのでいつものaddEventListenerでイベントハンドラを登録します。

document.addEventListener("visibilitychange", handler);

function handler() {
    // なんかなんか
}

document.hiddenメソッド

 hiddenメソッドはページが見えていない場合trueを、そうでない場合falseを返します。

if (document.hidden) {
    // 不可視状態
} else {
    // 可視状態
}

document.visibilityStateメソッド

 visibilityStateメソッドは可視性の状態を表す文字列を返します。

  • visible
    • ページは見えています。Page Visibility APIでの「見えている」というのは別のタブを表示していない、最小化されていないということなので、デスクトップなどでは別のウィンドウが上に乗っていてもvisibleになることがあります。
  • hidden
    • ページは見えていません。前述の通りタブの状態や最小化の状態のことを言っているのでhiddenであるということは別のタブを表示しているか最小化されているということです。
  • prerender
    • ページは見えていません。ページはまだプリレンダリングされただけでユーザに見えるように表示されていません。
    • 他の状態からprerenderになることはありません。
if (document.visibilityState == "visible") {
    // 可視状態
} else if (document.visibilityState == "hidden") {
    // 不可視状態
} else if (document.visibilityState == "prerender") {
    // プリレンダリング状態
}

Try on Firefox OS

 Firefox OS上でも試してみます。例のごとくサンプルコードは以下のURLです。

  • https://github.com/aoitan/gcg_labo/tree/master/api_reading/20140430_using_Page_visibility_API

 How toのところで示した使い方で画面に何かしら表示するようにしただけです。
 マニフェストは何も特別なことをしていないので省略します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Page Visibility API Sample</title>
    <script src="index.js"></script>
  </head>
  <body>
    <ul id="output"></ul>
  </body>
</html>
init();

function init() {
  document.addEventListener("visibilitychange", handler);
  var output = document.getElementById('output');
  output.appendChild(outputVisibilityState());
}

function handler() {
  var output = document.getElementById('output');
  output.appendChild(outputVisibilityChange());

  var childUl = document.createElement('ul');
  childUl.appendChild(outputHidden());
  childUl.appendChild(outputVisibilityState());

  output.appendChild(childUl);
}

function outputVisibilityChange() {
  var li = document.createElement('li');
  li.innerHTML = 'event: visibilitychange';
  return li;
}

function outputHidden() {
  var li = li = document.createElement('li');
  if (document.hidden) {
    // 不可視状態
    li.innerHTML = 'document.hidden = hidden';
  } else {
    // 可視状態
    li.innerHTML = 'document.hidden = visible';
  }
  return li;
}

function outputVisibilityState() {
  var li = document.createElement('li');
  if (document.visibilityState == "visible") {
    // 可視状態
    li.innerHTML = 'document.visibilityState = visible';
  } else if (document.visibilityState == "hidden") {
    // 不可視状態
    li.innerHTML = 'document.visibilityState = hidden';
  } else if (document.visibilityState == "prerender") {
    // プリレンダリング状態
    li.innerHTML = 'document.visibilityState = prerender';
  }
  return li;
}

 ホーム押したりホーム長押しから戻ったりしてみました。

using_page_visibility_api

 なんだか検知できてますね!

さいごに

 これでAndroidのライフサイクルイベントをすべて賄えるわけではないんですが、既存のAndroidアプリを移植する上で引っかかる部分の一部は解決できるのではないでしょうか。

[FIrefox OS][FxDevCon] Firefox Developers Conference 2014 in Kyotoの資料

 藪下@2課のガジェオタです。

 Firefox Developers Conference 2014 in Kyoto聴衆多い! 怖い! とか思いながら講演してきました。
 自分の出番が終わったので資料を一般公開です。


 なんかわんくまとかFxOS勉強会名古屋とかスターター向けばっかりやってる気がする。。。
 そろそろなんか狭い濃ゆい話したいなーと思うのでFxOSコードリーディングでもセミナーやろうかなーと思います。

[Firefox OS][シミュレータ]シミュレータにv1.4とv1.5が追加されました

 藪下@2課のガジェオタです。

 さっき気付いたんですが。Firefox OSシミュレータにv1.4とv1.5が追加されてました。

App manager add-ons
https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/

 昨日見た時にはなかったので最近追加されたみたいです。
 v1.4はbeta。v1.5はunstableなのでまあ開発版ですよってことで注意がいるかもですね。
 あとv1.3もいつの間にかstableになってました。

[Firefox OS][お知らせ][イベント情報] Firefox Developers Conference 2014 in Kyotoに登壇します!

 藪下@2課のガジェオタです。

 Mozilla Japan様主催のカンファレンスで登壇することになりました。

Firefox Developers Conference 2014 in Kyoto
http://www.mozilla.jp/events/devcon/2014/kyoto/

 15:30からのセッションを担当します。
 今回は既にバリバリとFirefox OSに邁進している方よりはもう少し外から様子見をしている方々にFirefox OS向けにアプリを書く楽しさをお伝えするのが目的のセッションになります。

 笑顔でワクワクをお届けできるようにがんばりますのでぜひ見にいらしてくださいねー!

[Windows RT][WindowsPhone] タブレットとWindows Phone向けにWindowsが一部無料化ですってよ!

 藪下@2課のガジェオタです。

 以前Windows RTとWindows PhoneでOSが無料化するかも? という噂を書いたんですが、今日のBuild 2014で言及されました。

マイクロソフト、小型タブレットとスマートフォン用Windowsを無料化。IoT用もフリー
http://japanese.engadget.com/2014/04/02/windows-iot/

 更にIoTにも力を入れたいみたいですね。最近AndroidとかTizenとかが元気出てきたと思ってたんですがMSも頑張ってくれるみたいです。
 スマホの時みたいな微妙な感じにならないよう舵取りして欲しいですね。