この翻訳は不完全です。英語から この記事を翻訳 してください。

ネイティブアプリより優れたアプリを作る一つの戦略として、デバイスにインストールするを許可する機能を提供する方法があります。この機能の利点として、オフラインでも動作する事が可能となり、端末のAPIを利用してハードウェアを機能的にアクセスでき、基盤システムとの統合も行いやすくなります。多くの機能はまだ標準機能ではありません、しかし、Google、Mozilla、Tizenなどに影響を与えています。

このセクションでは、アプリマニフェストやインストール機能の記述、デバイスAPIのパーミッション利用などのFirefox OS (そしてAndroidのような他のFirefox サポートプラットフォーム) にインストール可能なアプリを作るための仕様に関するWeb App 開発トピックスの詳細なリファレンスを説明しています。

Note: もしMozilla のOpen Web Apps プラットフォームについての新しく完全なドキュメントが見たい場合は、我々のQuickstart Guide から初めてください。そこでは、Open Web / Firefox OS アプリについての初心者向けガイドが提供され知恵増す。もっと使いやすいスクリーンキャストシリーズも入手可能です。もしビデオを見たい場合は App Basic for Firefox OS を見てください。

Firefox OS

Firefox OS (コードネーム Boot to Gecko または B2G) はMozilla のオープンソースモバイルOS です。これはLinux カーネルベースで、Open Web Apps をインストールして動作可能なGecko ベースのランタムが動作しています。Gecko はFirefox がWeb コンテンツを表示してレンダリングするのに使用しているレンダリングエンジンです。

Firefox  OS はGaia から構成されています。これはFirefox OSのUI レイヤー全体として構成されており、デフォルトのアプリとしての電話や設定、SMSなどもハンドルされています。

Mozilla のOpen Web Apps はFirefox OS ならびにMozilla のWeb ランタイムテクノロジーを利用したFirefox サポートプラットフォーム上でインストール可能です。もっと詳細について知りたい場合はAndroid 向けOpen Web Apps やデスクトップ向けOpen Web Appsをご覧ください。近い将来、このテクノロジーは標準化され、異なったプラットフォームでも動作する事が可能になります。

インストール可能なアプリのワークフロー

インストール可能な Web App は一般的なWeb アプリやWeb サイトととても似ています。これらはHTML / CSS / JavaScript のようなテクノロジーを利用して構築されています。異なる点はFirefox (OS) プラットフォームで利用可能な機能が追加されている点です。以下の図はそのような機能がどのように動作するかを示したフローになります。

  1. 標準的なWeb アプリケーションと同じく始まり、あなたの好きなツールチェインでビルドします。
  2. Web アプリのルートディレクトリに存在するmanifest.webapp にインストール可能なWeb アプリという事を記載します。これは、Camera, Device Storage, BluetoothSMS のような端末にアクセスするために必要なパーミッションのように重要な情報や、ローカライゼーション情報、アイコン、アプリ名などいくつかのものを定義しています。
  3. 特殊なデバイスAPIなどを利用してあなたの必要な機能を作成します。
  4. アイコンのようなアプリに必要なアセットを作成します。
  5. アプリをパッケージ化して、配信します。これは単純にホスト型アプリ(この場合、自身でインストール機能を記載する必要があります)として自身で配布する方法から、パッケージ型としてFirefox Marketplace (インストール機能が提供されてます)に提出する方法などいくつかの手段でする事が可能です。

推奨実装

このセクションではアプリ作成の推奨する手順と、インストール可能なOpen Web Appsを作成するためのベストプラクティスを提供します。

Webアプリのマニフェストファイル

アプリのmanifest.webapp ファイルはアプリのルートディレクトリに配置すべきで、App Manifest リファレンスで詳細に説明されている通り、簡単なJSON 構造が含まれるものです。以下はシンプルなアプリのManifest JSON です。

{
  "name": "My App",
  "description": "My elevator pitch goes here",
  "launch_path": "/index.html",
  "icons": {
    "512": "/img/icon-512.png",
    "128": "/img/icon-128.png"
  },
  "developer": {
    "name": "Your name or organization",
    "url": "http://your-homepage-here.org"
  },
  "default_locale": "en"
}

シンプルなアプリだと、これで十分です。しかし、他に必要となるフィールドがあり、それはこれから説明していきます。

機能性、デバイスAPIとパーミッション

Firefox OS プラットフォームの強さの1つは、電話やNFC, Bluetooth, そしてSMS のような端末の主要なサービスにアクセスできる新しいWeb API を提供している事です。我々のApp Center のビルドセクションには、新しいWeb API 毎の数多くのサンプルが存在していますが、このセクションではあなたが我々と成し遂げるべきタスクのポイントにしぼって説明していきます。共通のタスクカテゴリーには以下のものを含みます。

あるAPIはアクセスする事を制限しているように、異なるAPIはそれぞれ異なるセキュリテリレベルがあります。単純に端末のSMSや電話機能を利用すると宣言しているだけのアプリは危険なことがあるので、これは理にかなっています。以下のように異なるレベルが存在します。

  • 共通: Notification, getUserMedia, IndexedDB, そしてGeolocation のような共通API群は利用するにあたり特別な権限は必要ありません。これらのいくつかのAPIでは、拡張されたセキュリティレベルを持っています。たとえば、getUserMedia またはGeolocation を実行した結果、ユーザーにアプリがGPS または Web カメラにアクセスしてもよいかを確認するための確認ダイアログが表示されます。
  • 特権: 特権付API は共通のそれよりもセキュリティを考慮しており、Firefox マーケットプレイスで検証されたパッケージ型アプリだけが利用できるようになっています(以下参照)。これには、Camera, Browser, Contacts そして TCP Socket APIが含まれます。
  • 認定: 認定API は一般的に端末のセキュリティに関して致命的なもので、Mozilla はたは端末ベンダーがプリインストールしたアプリからのみ利用することが可能です。これには、SMS, Bluetooth, そして Dialer API が含まれます。

制限されたAPI を利用するためにパーミッションを要求するには、マニフェストファイルにpermissions フィールドを含む必要があり、特権API を利用する場合は typeフィールドに特権(privileged)をセットする必要があります。このフィールドは以下のように設定します。

"type" : "privileged",
"permissions": {
  "contacts": {
    "description": "Required for autocompletion in the share screen",
    "access": "readcreate"
    },
  "alarms": {
    "description": "Required to schedule notifications"
  }
}

Note: それぞれのAPI がどのパーミッションを必要としているか正確なものが知りたい場合はアプリの許可設定 をみてください。これには、それぞれのAPI がFirefox OS のどのバージョンからサポートされたかも参照することができます。Firefox OS のそれぞれのバージョンで追加されたAPI を知りたい場合は、Firefox OS 開発者向けリリースノートをご覧ください。

Web activities の利用も同様にtype と、activity フィールドのデータが必要となります。サンプルは以下の通り。

"activities": {
  "share": {
    "filters": {
      "type": [ "image/png", "image/gif" ]
    },
    "href": "foo.html",
    "disposition": "window",
    "returnValue": true
  }
}

最後に、Alarm and Notification API のようなAPI も、どの種類のメッセージをアプリでキャプチャし、どのように処理するかの詳細を記載したmessages フィールドが必要となります。

"messages": [
    { "alarm": "/index.html" },
    { "notification": "/index.html" }
  ]

アイコンとその他のデザインについてのベストプラクティス


The best practices you would use for creating a Firefox OS app are pretty much the same as those you would use for creating any standard web app, in terms of both coding and design.

You should use responsive design techniques to make sure your app layout will work well on a variety of screen sizes, especially media queries and viewport. Because many devices have high resolution screens these days, this should include use of resolution media queries to optimize for different resolutions.

You should take advantage of the building blocks and design patterns we've made available (see our app Design section.)

You should also make sure to optimize your code as much as possible so it is more likely to work on low-memory devices, which many Firefox OS devices are (see our Performance topic).

For the visual design of Firefox apps, you are free to follow your own path, but you could certainly get some useful pointers from our Firefox OS style guide.

For your app icons, you should make sure to include at least a 512x512 icon and a 128x128 icon. Read Icon implementation for Apps for more information.

アプリのパッケージ化、インストール、配布

When an App is ready to be distributed, you have a few options of how to publish them:

  • You can self-publish a hosted app. This requires you to simply upload your app to a web server, just like you would for a normal web site, and include the manifest, icons, etc. that the installable app needs. In addition, you need to include some code to install your app on a Firefox OS device or other device where Firefox is present. This will generally take the form of a <button> element that when pressed invokes the Apps.install method, passing it the URL of the manifest file. Note that hosted apps, even when installed, are always run from the web site they are hosted on, so don't confer the ability to run offline, unless you provide this ability using a technology like AppCache (or soon, Service Workers.)
  • You can self-publish a packaged app. This requires you to zip your app up, and upload your zip to a web server, after making sure you've included included the manifest, icons, etc. that the installable app needs. In addition, you need to include a mini-manifest file in the same directory as the zip to reference the app, and some code to install your app on a Firefox OS device or other device where Firefox is present. This will generally take the form of a <button> element that when pressed invokes the Apps.installPackage method, passing it the URL of the mini-manifest file.
  • You can publish a packaged app on the Firefox Marketplace. The process for doing this is well documented over at our Marketplace zone.

Note: Self-published apps are limited to a single app per origin, and don't have the ability to access privileged APIs, for security reasons.

Note: Another common cause of failure in app installation is incorrect paths in manifests and install code. These paths should be relative to the origin of the server location. So for example, if your example's root is at http://www.mysite.com/myapp/, and your icon is at http://www.mysite.com/myapp/manifest.webapp, the install path would be /myapp/manifest.webapp, not /manifest.webapp.

多言語アプリ

You can create multi-locale apps quite easily. This is done by:

  1. Adding special data-l10n-id attributes to each HTML element that requires localization, the value of which should be an identifier for that string. For example:
  2. <h1 data-l10n-id="app-title">My app</h1>.
  3. Including the l10n.js library in your page using a regular <script> element.
  4. Creating a locales folder inside your app directory containing a folder for each separate locale, then placing an app.properties file inside each one containing that language's translations, each one on a new line. For example app-title = Mon application for French.
  5. Creating a locales.ini file inside the locales folder, which specifies the default locale and the path to each app.properties file. This will look like so:
    @import url(en/app.properties)
    
    [es]
    @import url(fr/app.properties)
  6. Referencing locales.ini from your HTML file using a <link> element, like so:
    <link rel="resource" type="application/l10n" href="locales/locales.ini" />
  7. Updating your manifest file to include a default locale and locales field containing information about your supported locales:
    "default_locale": "en",
    "locales": {
      "fr": {
        "name" : "Mon application",
        "description" : "Mon application description"
      }
    }

For more details, begin with our Getting started with app localization article, then check out the rest of our articles about app localization.

アプリのデバッグ

Mozilla provides a number of tools to help you test Firefox OS apps.

デスクトップ版Firefoxのテスト

The quickest way to test your app's basic functionality is to simply load it in Firefox desktop (open the index.html file in the browser) — this supports most of the features you'll be using to develop your app (with the exception of some of the device APIs.) From here you can use the standard Firefox Toolbox to debug your code, and the Responsive Design View to test responsive/mobile layouts.

Note: To test app installation functionality you'll need to put the files onto a location on your own server that has no other installable web apps on the same origin, otherwise you'll get a MULTIPLE_APPS_PER_ORIGIN_FORBIDDEN error This is because of the "single app per origin" security policy we mentioned earlier.

Firefox OS シミュレーターでのテスト

You can also test the app in a Firefox OS simulator via our App Manager tool (and soon, on our all-new WebIDE tool). This will give you a more realistic idea of how it will look on a real device.

Note: Our new WebIDE tool is currently only available in Firefox Nightly, but will be rolled out across all versions soon. It does everything App Manager does and more, including in-app code editing, creation of new apps, and tools like the Monitor, which enables to track performance across an app's lifespan.

Fiirefox OS デバイスでのテスト

Some device APIs — such as the vibration API — can't be tested successfully on a simulator. To fully test this you'll need to get hold of a real Firefox OS device. If you've got one, you can connect it to your computer and install apps contained on your local drive straight onto it via the App Manager/WebIDE.

Logcat

The Android adb logcat tool is very useful for getting debugging output from a Firefox OS device, if you are comfortable with command line tools. For example, you can get info on dying apps using the following:

adb logcat GeckoConsole:* *:F | grep -vE "parsing value|Unknown property|declaration|invalid source| but found |pseudo-"

複数のFirefox OS のバージョンでサポートする

Note that when developing apps for Firefox OS, you need to bear in mind what platform versions will be available on the devices your customers will have (see our available phones table for a list.) Remember that it is not as simple to update phone platform software as it is desktop software — users tend to be at the mercy of the network providers. You therefore need to develop apps to support these versions. As an example, multiline Flexbox doesn't work on Firefox OS versions below 1.3, so you may need to use a simpler layout method or provide a fallback for older versions.

This issue should go away soon, as more consumer Firefox OS devices appear, equipped with newer versions of Firefox OS out of the box.

The current baseline platform we recommended developing for is Firefox OS 1.1.

Note: MDN's web platform reference pages include browser/platform support information, plus you can find support information for more App-specific technologies on our Apps API Reference.

Examples

You can find many examples throughout the App Center Build section; there are also some examples in our Reference apps section.

チュートリアル

インストール可能アプリの基本

Packaged apps
A packaged app is an Open Web App that has all of its resources contained in a zip file, instead of having its resources on a Web server. In here you'll learn all you need to know about packaged apps.
Hosted apps
A hosted app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest and so on) stored on a Web server. This article will tell you all you need to know about hosted apps.
Packaged or hosted?
Should you make your app hosted or packaged? This article will help you decide.
Self-publishing apps
This guide explains how to write the code that controls publishing apps, should you wish to write it yourself rather than use the Firefox Marketplace.

Advanced topics

Icon implementation for apps
Implementation specifics for implementing Firefox app icons, including different sizes needed.
Updating apps
How app updates are handled.

関連項目

Firefox OS app tools
This page provides a list of useful tools, libraries and examples that are useful for Firefox OS app developers, whether you want an code template to copy, or need help with adding a specific feature to your Firefox OS app.
App manifest
A detailed guide to Open Web App manifest files, and the different options they can contain.
App permissions
Access to device APIs is key to creating many useful apps. Here is what's available and how to access them.

Note: you can use the Firefox OS App Generator to automatically generate and install FxOS apps with particular permissions, message-listeners, types, etc.

Firefox OS API support table
A list of the different APIs available to Firefox OS, and what support is available for them.
App installation and management APIs
A reference for the installation and management APIs that control installation and other functions of installable Open Web Apps.
Platform-specific details of app installation
There are some differences in how apps are installed across the various platforms that support Open Web Apps; this article will help you to understand them.
CSP for open web apps
Unlike traditional web sites, privileged and certified apps enforce a CSP (content security policy) by default. This may cause quite a bit of existing code to break while porting and cause a significant amount of confusion if developers are unaware that the CSP exists. This article explains what the restrictions imposed by the open web app CSP are.

FAQ

App manifests FAQ
Manifest frequently asked questions.
 

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

 このページの貢献者: mantaroh, stephaniehobson, stingray
 最終更新者: mantaroh,