Firefox OSでサンプル作ってみた

実機の話も出始めたFirefox OSを触ってみて、簡単なサンプルを作ってみました。
既にいくつか記事も出ていますので、基礎知識とか通常のウェブアプリについてはそちらにお任せして、端末用のAPIとかを調べてみました。

通常のウェブアプリではなくて、実機専用のAPIとなると、

アラーム
デスクトップ通知
カメラ
加速度センサー
住所録

とかになると思いますが、何しろ情報がどこにあるのか分からなかったです。

まずアプリケーションのパーミッションの一覧があるとの事なので、それを見てみる事にしました。
「Main API endpoints」を見ると、それっぽいメソッドが書いてありました。
「特権を付与された（Privileged）パッケージ型アプリ」は「Marketplaceでのレビューを受けたパッケージ型アプリ」との事で、現状では使えないかなと判断して、「ホスト型アプリ（Installed Web App）」で使えそうな

Alarm API
desktop-notification

を試してみる事にしました。

デスクトップ通知

先にAlermを試したんですが、こっちは動作するサンプルがあったので。

manifest.webapp

{
  "name": "サンプル4",
  "description": "通知アプリ",
  "launch_path": "/index.html",
  "icons": {
    "256": "/img/icon-256.png"
  },
  "developer": {
    "name": "zebevogue",
    "url": "http://d.hatena.ne.jp/zebevogue/"
  },
  "default_locale": "ja",
}

index.html

navigator.mozNotification.createNotification()で通知を作成し、notification.show()で表示させます。
Displaying notifications (deprecated) - Archive of obsolete content | MDN

<!doctype html>
<html>
<head>
  <title>Desktop Notifications Example</title>
  <script type="text/javascript">
    function showNotification() {
      var notification = navigator.mozNotification.createNotification(
              "Hey, check this out!", "This is a notification posted by " +
              "Firefox 4. You should take some action. Right now!");
      
      /* watch for events on the notification */
      
      notification.onclick = function() {
        var e = document.createElement("p");
        e.innerHTML = "<strong>The notification was clicked.</strong>";
        document.body.appendChild(e);
      };
      notification.onclose = function() {
        var e = document.createElement("p");
        e.innerHTML = "<strong>The notification was closed.</strong>";
        document.body.appendChild(e);
      };
      
      /* show the notification */
      
      notification.show();
    }
  </script>
</head>
<body>
  <p><a href="javascript:showNotification()">Click here</a> to show a notification.</p>
</body>

起動画面

デスクトップ通知の許可を求められます。

通知が表示されました。

上部に通知がある事がアイコン表示されています。

アラーム

こっちは上手くできませんでした。調査不足かな。
まずはnavigator.mozAlarmsオブジェクトを出力してみました。

add()があるので、調べてみまると以下が見つかりました。
WebAPI/AlarmAPI - MozillaWiki

index.html

<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>alermアプリ</title>
</head>
<body>
<h1>alermセット</h1>
<script>

var alarmId2;
var request = navigator.mozAlarms.add(new Date((new Date()).getTime() + 10000), "honorTimezone", { mydata: "foo" });
request.onsuccess = function (e) { alarmId2 = e.target.result; };
request.onerror = function (e) { alert(e.target.error.name); };
alert(request);
</script>

ただし、これはどちらのalert()も行われません。
また、時刻指定が過去、もしくは直近過ぎる場合、requestがinvalidStateErrorになってしましました。

どこに保存されるのか？

上記アプリですが、シミュレータで動かしていますが、ディレクトリ的には以下に格納されているようです。

~/Library/Application Support/Firefox/Profiles/******.default/extensions/r2d2b2g@mozilla.org/profile/webapps

また、以下のディレクトリにはテンプレートアプリが入っていました。

~/Library/Application Support/Firefox/Profiles/*****.default/extensions/r2d2b2g@mozilla.org/resources/r2d2b2g/data/template