MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

注記: Quickstart セクションは新しく、Firefox OS アプリの基礎 にフォーカスしたものに更新されていて、以前の Quickstart 記事とは置き換わっています。古い記事よりも使いやすく学びやすくなったドキュメントになっているでしょう。

Open Web Apps は、Web 開発者が何年も望んでいた HTML / CSS / JavaScript だけで作られたインストール可能なアプリに対応しているクロスプラットフォーム (Open Web Apps のための Firefox OS などの) を提供します。このガイドは、素晴らしいアプリを作成するために基本アーキテクチャですぐに動作させる方法とビルド手順を紹介します。

このガイドに沿って作業したい場合、クイックスタートアプリテンプレート をダウンロードしてください。これに含まれているものについての詳細は、アプリテンプレート ガイドをご覧ください。

アプリ構造

パッケージ型 vs. ホスト型アプリ

パッケージ型とホスト型の 2 つの Open Web Apps のタイプが存在します。パッケージ型アプリは、アプリケーションのすべてのアセット (HTML / CSS / JavaScript / 画像 / マニフェストなど) が含まれる zip ファイルです。ホスト型アプリは、与えられたドメインでサーバー上から起動するアプリです。両方のアプリのタイプはマニフェストを利用します。Firefox Marketplace でアプリが一覧に表示される際に、アプリは zip ファイルとしてアップロードするか、ホスト型アプリとして存在する URL が提供する必要があります。

Made in partnership with Treehouse: Check them out!

このガイドの目的は、localhost アドレスに存在するホスト型アプリを作成することです。アプリを Firefox Marketplace に表示する準備ができると、パッケージ型もしくは、ホスト型として起動するかを選択することができます。

アプリマニフェスト

すべての Firefox アプリはアプリのルートに配置する manifest.webapp ファイルが必要です。manifest.webapp はアプリのバージョン、名前、説明、アイコン、ロケール、インストールすることのできるドメインなど多くの重要な情報を提供します。必須項目はアプリの名前と説明だけです。アプリテンプレート内にある簡単なマニフェストの例は以下のようなものになります:

{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Your new awesome Open Web App",
  "launch_path": "/app-template/index.html",
  "icons": {
    "16": "/app-template/app-icons/icon-16.png",
    "48": "/app-template/app-icons/icon-48.png",
    "128": "/app-template/app-icons/icon-128.png"
  },
  "developer": {
    "name": "Your Name",
    "url": "http://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "http://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "http://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}

Made in partnership with Treehouse: Check them out!

 

基本的なマニフェストは整いました。マニフェストに関するもっと詳しい情報は App Manifset の記事をご覧ください。

アプリのレイアウトと設計

様々な端末上で画面解像度が増えるにつれ、レスポンシブデザインはますます重要になっています。アプリのメインターゲット端末が Firefox OS のようなモバイルプラットフォームでも、他の端末でも同じようにアクセスできます。CSS メディアクエリ を使用すると、レイアウトを端末に適応することができます。以下に、スケルトン CSS の例を示します:

/* The following are examples of different CSS media queries */

/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
  /* styles */
}

/* Traditional iPhone width */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* styles */
}

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}

多くの JavaScript と CSS のフレームワークは、レスポンシブデザインとモバイルアプリ開発に役立ちます(Bootstrap など)。アプリや開発スタイルに最も適したフレームワークを選んでください。

Web API

JavaScript API は端末と同様に次々と作成され拡張されています。Mozilla の WebAPI は数十もの標準モバイル機能の JavaScript API へ影響を与えました。WebAPI のページで、端末のサポートとステータスの一覧を確認できます。以下に例のような JavaScript の機能検知はまだベストプラクティスです:

// If this device supports the vibrate API...
if('vibrate' in navigator) {
    // ... vibrate for a second
    navigator.vibrate(1000);
}

以下の例では、端末のバッテリ状態の変化に基づいて <div> の表示スタイルが変更されます。

// Create the battery indicator listeners
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

  if(battery) {
    indicator = document.getElementById('indicator'),
    indicatorPercentage = document.getElementById('indicator-percentage');

    // Set listeners for changes
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Update immediately
    updateBattery();
  }

  function updateBattery() {
    // Update percentage width and text
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Battery: ' + level;
    // Update charging status
    indicator.className = battery.charging ? 'charging' : '';
  }
})();

上記のコード中では、Battery API を一度サポートしているか確認してから、chargingchange levelchange のリスナーを追加して、要素の表示を更新しています。以下のクイックスタートテンプレート追加して、動作しているか確認することが出来ます。

WebAPI のページで、最新のデバイス API のステータスを確認してください。

インストール API 機能

クイックスタートアプリのテンプレートサンプルでは、アプリを標準的な Web ページとして表示したときに、クリックできるインストールボタンを実装していています。クリックすると Firefox OS にアプリとしてインストールします。ボタンのマークアップに特別なことはしていません:

<button id="install-btn">Install app</button>

このボタンの機能はインストール API (install.jsをご覧ください) を使用して実装されています:

var manifest_url = location.href + 'manifest.webapp';

function install(ev) {
  ev.preventDefault();
  // define the manifest URL
  // install the app
  var installLocFind = navigator.mozApps.install(manifest_url);
  installLocFind.onsuccess = function(data) {
    // App is installed, do something
  };
  installLocFind.onerror = function() {
    // App wasn't installed, info is in
    // installapp.error.name
    alert(installLocFind.error.name);
  };
};

// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
var button = document.getElementById('install-btn');

var installCheck = navigator.mozApps.checkInstalled(manifest_url);

installCheck.onsuccess = function() {
  if(installCheck.result) {
    button.style.display = "none";
  } else {
    button.addEventListener('click', install, false);
  };
};

簡単に何をしているのかを見ていきます。

  1. インストールボタンを参照して、button 変数にそれを格納します。
  2. navigator.mozApps.checkInstalled を使用して、http://people.mozilla.com/~cmills/location-finder/manifest.webapp マニフェストファイルに定義されたアプリが既に端末にインストールされているかを確認します。この検証結果は installCheck 変数へ格納します。
  3. 確認が成功したら、成功イベントが発火し、installCheck.onsuccess = function() { ... } が実行されます。
  4. installCheck.result が存在するかを if 文で確認します。もし存在する場合、アプリはインストール済みを意味するため、ボタンを非表示にします。インストールボタンは既にインストール済みであれば不要です。
  5. アプリがインストールされていない場合、ボタンクリック時に install() 関数が実行されるように、ボタンにリスナーを追加します。
  6. ボタンがクリックされ install() 関数が実行されると、manifest_url と呼ばれる変数にマニフェストファイルのロケーションを格納し、navigator.mozApps.install(manifest_url) を使用してアプリをインストールして、インストールの参照を installLocFind 変数へ格納します。インストールも成功 / 失敗のイベントを受け取ることができるので、成功 / 失敗の時のアクションを実行することが出来ます。

最初にインストール可能な Web アプリに遭遇した時、API の実装状況 を検証したいでしょう。

注記: インストール可能な Open Web Apps は "1つのオリジンに対して1つのアプリ" のセキュリティポリシーがあります。基本的に、1つのオリジンで1つ以上のインストール可能なアプリをホスティングすることはできません。これはちょっとトリッキーなテストになりますが、アプリごとのに異なるサブドメインを作ったり、Firefox OS シミュレータを使ってテストをしたり、デスクトップにインストール可能なWeb Apps をインストールすることになりますが、Firefox Aurora/Nightly のインストール機能を使うなどの回避手段は存在します。
オリジンについての更なる情報はアプリマニフェストについてのFAQ をご覧ください。

WebRT API (パーミッションベース API)

利用可能な WebAPI は数多くありますが、機能を有効にするためのパーミッションが必要です。アプリは以下のように manifest.webapp ファイルにパーミッションを登録しなくてはなりません。

// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}

パーミッションには、以下のように3つのレベルが存在します。

  • Normal — アクセスパーミッションを記載する必要のないAPI群
  • Privileged — アプリ開発者が自身のアプリのためにマニフェストファイルへパーミッションを記載していたり、信頼されたソースを通して配布している場合に利用可能なAPI群
  • Certified — 電話やメッセージサービスなどの端末のクリティカルな機能を制御するAPI群。これらは一般的にサードパーティーが開発する時には利用することが出来ません。

パーミッションレベルの更なる情報については、パッケージ型アプリの種類を参照してください。どのAPIがパーミッションが必要で、どのパーミッションが必要なのかは、アプリの許可設定をご覧ください。

Firefox OS シミュレータではすべてのWeb API は実装されていない点については注意してください。

ツールとテスト

モバイル端末をサポートするときテストは非常に重要になってきます。インストール可能なOpen Web Apps のテストのオプションは多く存在します。

Firefox OS シミュレータを含むWebIDE

WebIDE と呼ばれるテストツールの新参者があります。このツールはデスクトップ版Firefox とUSB 経由の互換端末(または、Firefox OS シミュレータ)と接続し、アプリを直接端末へインストールしたり、アプリの検証をしたり、端末上で動作させながらデバッグすることが出来ます。

ユニットテスト

ユニットテストは、異なる端末でのテストするときやビルドするときにとても価値のあるものになります。 jQuery のQUnit はクライアントサイドのテストユーティリティとして人気がありますが、あなたが望むほかのテストツールを使っても構いません。

端末にFirefox OS をインストールする

Firefox OS はオープンなプラットフォームなので、あなたの端末にFirefoxOS をインストールしたり、ビルドするためのコードやツールは入手可能です。ビルドとインストール説明や、同じように端末へインストール可能かどうかの注意書きについては、MDN から見つけ出すことが出来ます。

Firefox OS 開発者プレビュー専用のデバイスは入手可能です。更なる情報については我々の開発端末ページをご覧ください。

アプリの提出と公開

一度アプリが完成すると、標準的なウェブサイトまたはアプリ(更なる情報は、アプリの自主配布をご覧ください)としてホスティングすることが出来ます。または、Firefox マーケットプレイス提出することが出来ます。アプリのマニフェストは検証され、どの端末でアプリをサポートするかを選択することが出来ます(例:Firefox OS、デスクトップ版Firefox、モバイル版Firefox、タブレット版Firefox)
一度検証されると、アプリについての追加情報(スクリーンショット、説明、価格など)を加えることが出来ます。そして、公式に提出されたアプリとしてマーケットプレイスにリスト化されます。一度承認を得ると、アプリは全世界から購入・インストールすることが可能になります。

マーケットプレイスと表示情報についての更なる情報

  1. Firefox OS マーケットプレイスにアプリを提出する
  2. マーケットプレイスのレビュー基準
  3. アプリ提出までのビデオ

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: yoko0827, chrisdavidmills, dskmori, jsx, mantaroh, stingray
 最終更新者: yoko0827,