Firefox OS 用 Web アプリの作成

Firefox OS のアプリは、HTML、CSS、JavaScript で書かれた単なる Web アプリです。他の一般的な Web サイトを公開するのと同じように Web 上で公開できます。Web サイトを端末に Web アプリとしてインストール可能にするには、それをマニフェストで飾り、以下で説明するようにインストールボタンを追加するだけです。

まず以下の記事を先に読むことをお勧めします。

もちろん、Open Web Apps についてより深く学ぶ のも良いでしょう。

Web アプリのインストール

アプリとマニフェストを Web 上に公開したら、Gecko にそれを認識させる必要があります。インストールの際、Gecko はマニフェストの内容を読み取り、ホーム画面にアイコンを追加するなど必要な処理を行います。

アプリをインストールするには、navigator.mozApps.install API を呼び出します。アプリを自主配布する場合にアプリ内に埋め込めるインストールボタンの例を以下に挙げます。

<button id="install">
  この素晴らしいアプリをあなたのホーム画面にインストールしよう!
</button>
 
<script>
(function(){
  function install(ev) {
    ev.preventDefault();
    // マニフェスト URL を定義
    var manifest_url = "http://my.webapp.com/manifest.webapp";
    // アプリをインストール
    var myapp = navigator.mozApps.install(manifest_url);
    myapp.onsuccess = function(data) {
      // アプリがインストールされたらボタンを削除
      this.parentNode.removeChild(this);
    };
    myapp.onerror = function() {
      // アプリがインストールされなかった場合、this.error.name に情報が含まれています
      console.log('インストール失敗、エラー: ' + this.error.name);
     };
  };
  // ボタンへの参照を取得し、クリック時に install() を呼び出します
  var button = document.getElementById('install');
  button.addEventListener('click', install, false);
})();
</script>

注: インストールボタンは Firefox Marketplace などのアプリマーケットにも置かれるはずですが、あなたのサイトの主要ページ上に「Web アプリとしてインストール」ボタンを設置すれば非常に便利でしょう。

実際に Firefox OS のブラウザアプリであなたのサイトを訪れて、インストールボタンをタップしてみましょう。

Document Tags and Contributors

タグ:
Contributors to this page: ethertank, Yoshino
最終更新者: Yoshino,