データを収集し変更する

データ収集ワークフロー

次のフローチャートは、Open Web Appsをホストしているデバイスからデータを取得するための一般的なワークフローを示しています:

アプリを起動するたびに、特定の機能（例えば、デバイスの場所）に必要なデータを取得し、または更新されるデータ（例えば、地図上に現在位置）は、表示または記憶します。

提言

以下は、デバイスハードウェア、デバイスサービス、またはサード・パーティーサービスからデータを必要とする機能を実装するための推奨事項とベスト・プラクティスです。これらの機能には:

• リアルタイム通信（WebRTC）
• 同期（例えばネットワークスピードに基づくコンタクトの間に）
• 監視（例えばバッテリーの状態）
• アプリに位置情報を認識させる（位置情報を使用する）
• 光条件への対応（例えば電子書籍リーダーアプリのための）
• 新しい種類のジェスチャーを処理する（ゲームおよび他のアプリのために）

収集データ

Webプラットフォームは、Open Web AppsがデバイスハードウェアまたはサービスからデータにアクセスできるWebAPIとして知られているAPIのセットを提供します。

バッテリーの残量とアプリケーションをホストするデバイスのバッテリーについての他の有用な情報は、Battery Status APIで提供されています。加速度計、ジャイロスコープ、コンパスなどのセンサーから提供されたデータにアクセスするために、Device Orientation APIを使用することができます。アプリケーションの位置情報を取得するためにGeolocation APIを使用することができます。カメラおよびマイク（Navigator.getUserMedia）にアクセスすることができ、周囲の光量（Ambient Light Sensor API）のレベルを知り、オブジェクトが端末とより近いかどうかを検出します（Proximity API）。

各APIは、開発者にJavaScriptのオブジェクトとイベントを提供します。次の例は、navigator.geolocation JavaScriptオブジェクト、Geolocation APIの一部は、Webアプリケーションによって現在の位置情報を取得するために使用する方法を示しています。

var GeolocationManager = {
    /*
    * getCurrentPosition
    * Gets the current position of the device
    * @param {Function} successCallback
    * @param {Function} errorCallback
    * @param {PositionOptions} positionOptions
    */
    getCurrentPosition: function(successCallback, errorCallback, positionOptions) {

       /* If the geolocation object exists in navigator, get the current position of the device */
       if (navigator.geolocation) {
           navigator.geolocation.getCurrentPosition(successCallback, errorCallback, positionOptions);
       }
       else { // if the geolocation API is not supported
           errorCallback();
       }
    }
};

JavaScriptを介して、コンタクトデータベース（Contacts API）、ネイティブファイルシステム（FileHandle API）、またはWebアプリケーション内のファイルシステム（Device Storage API）、ネットワーク状態（Network Information API）を確認する、FirefoxのOSをトリガーとしても「"画像を選ぶ"、"電子メールを送信する"」などのアクション（Web Activities）を繋ぐことができます。

前述のAPIの完全なリストは、以下のリファレンスセクションに記載されています。っ個々のAPIは異なるサポートレベルがあります：そのうちのいくつかは、ブラウザ間でサポートされており、いくつかは動作するためにプレフィックスが必要で、幾つかはFirefoxでのみ動作し、そしていくつかは特別な権限を付与されたFirefox OSのアプリです。アプリでAPIの使用を開始する前に、MDNの各ページの下部にあるブラウザの適合表を見てください。使用したいAPIがブラウザ間で十分にサポートされていないことが判明した場合、Cordovaのようなライブラリにて提供されている非スタンダートのAPIを使用することを検討してください。

アプリをレンダリングする

取得したデータでは、その他の種類のデータと結びつけたり、端末に保管したり、計算に使用したり、何かをレンダリングしたりできます。例では Google Maps API を通じたGoogle Mapのレンダリングや、Yahoo! Weather RSS Feedを通じたホームスクリーンの天気アプリのレンダリングがあります。その他では、端末のハードウェアやサービスからした取得データはサードパーティのサーバサイド操作用のサービスに送ることもできます、たとえばTwitter REST APIを通じてTweetを送るなど。

次のコードは、Google Maps API で getCurrentPosition 関数にて取得した位置データを使ってレンダリングする方法です: showPosition 関数は、上の 収集データ 節 に示した例の successCallback です。

/*
* showPosition
* Show the specified position on the map
* @param {Position} position
*/
showPosition: function(position) {

    /* Retrieve latitude and longitude from Position */
    var plat = position.coords.latitude;
    var plon = position.coords.longitude;
    
    /* Calculate the Google Maps position */
    var gmPosition = new google.maps.LatLng(plat, plon);
    
    /* Set the center of the map */
    this.map.setCenter(gmPosition);
}

データ変更をモニタリングする

Changes in data can be detected via JavaScript events or CSS media queries.

The following example shows how changes in the battery status are monitored in order to update the status bar.

/* Update the battery status bar when the battery status changes */
EnergyManager.handleChangeEvents(BatteryStatusBar.update);

where EnergyManager and BatteryStatusBar are JavaScript objects defined by the application, and the handleChangeEvents method is defined as follows:

/*
* handleChangeEvents
* Registers an handler to every *-change events of navigator.battery
* @param {function} handler
* @returns {undefined}
*/
handleChangeEvents: function(handler) {

    /* Update the battery status bar on battery level change */
    navigator.battery.onlevelchange = function(e) {
       handler(e);
    };
    
    /* Update the battery status bar on battery charging change */
    navigator.battery.onchargingchange = function(e) {
       handler(e);
    };
    
    /* Update the battery status bar on battery charging time change */
    navigator.battery.onchargingtimechange = function(e) {
       handler(e);
    };
    
    /* Update the battery status bar on battery discharging time change */
    navigator.battery.ondischargingtimechange = function(e) {
       handler(e);
    };
}

レンダリングを更新する

When data changes, the app needs to update the rendered view: depending on the app, the rendered view can be updated by refreshing the page, manipulating the DOM, or through an Ajax call if the updated data needs an interaction with the server-side app.

The following example shows how a battery status indicator gets updated by manipulating the DOM.

/*
* updateBatteryStatus
* Updates the battery status bar.
* @param {Event} event
* @returns {undefined}
*/
update: function(event) {

   /* Level */
   var percentage = EnergyManager.getBatteryPercentage();

   /* Color */
   if (percentage < 20) {
       this.batteryLevelDomObj.setAttribute('class', 'low level');
   }
   else if (percentage < 60) {
       this.batteryLevelDomObj.setAttribute('class', 'medium level');
   }
   else {
       this.batteryLevelDomObj.setAttribute('class', 'high level');
   }
}

どんな種類のデータを収集したいですか?

The data you want to collect can be retrieved from the device hardware, device services or third-party services. Depending on the data you want to collect you might have to use a specific Javascript API, CSS Media Feature, HTML element or attribute, RSS Feed or something else.

This section gives a bigger picture of these tools and provides examples, references and compatibility information.

端末のハードウェアから

Location

チュートリアルの例

• Plotting yourself on the map

リファレンスと互換性

• Geolocation API - widely supported

Orientation

チュートリアルの例

• Keep it level: responding to device orientation changes
• Orientation and motion data explained

リファレンスと互換性

• Screen Orientation API - widely supported
• Device Orientation API - widely supported
• gyronorm.js — a polyfill for normalizing the accelerometer and gyroscope data on mobile devices.

Motion

チュートリアルの例

• Keep it level: responding to device orientation changes
• Orientation and motion data explained

リファレンスと互換性

• Device Orientation API - widely supported
• gyronorm.js — a polyfill for normalizing the accelerometer and gyroscope data on mobile devices.

Ambient

チュートリアルの例

• Responding to light conditions with the Ambient Light API

リファレンスと互換性

• Ambient Light Sensor API - supported only by Firefox

Battery

チュートリアルの例

• Retrieving battery status information via the Battery Status API
• Using the battery API

リファレンスと互換性

• Battery Status API - supported only by Firefox

Camera

チュートリアルの例

• Taking webcam photos

リファレンスと互換性

• HTML Media Capture - quite supported
• Navigator.getUserMedia - quite supported
• WebRTC - quite supported
• Camera API - supported only by FxOS

Proximity

チュートリアルの例

• Near or far? Responding to proximity

リファレンスと互換性

• Proximity API - supported only by Firefox

From device services

Network

チュートリアルの例

• Optimizing for high and low network speeds

リファレンスと互換性

• Network Information API - work-in-progress specification

Contacts

チュートリアルの例

• Updating phone contacts from the Web

リファレンスと互換性

• Contacts API - supported only by FxOS

Files

リファレンスと互換性

• FileHandle API - supported only by Firefox

Storage

リファレンスと互換性

• Device Storage API - unknown support

Firefox OS Services

チュートリアルの例

• Introducing Web Activities

リファレンスと互換性

• Web Activities - supported only by FxOS

From third party services

Twitter

チュートリアルの例

• Creating the Area Tweet app

Weather

チュートリアルの例

• Weather app tutorial

例

Responding to light conditions with the Ambient Light API

Ambient light sensors detect the presence and intensity of visible light. If used in a smart way, ambient light sensing optimizes visibility and battery life of portable devices such as tablets, smartphones, and laptops. This article looks at one way to respond to light conditions in the context of Open Web Apps: The Ambient Light API. Using this we can get information on the ambient light level and take actions to improve readability or create special effects depending on light conditions.

Retrieving battery status information via the Battery Status API

This article deconstructs a web application — the Low Energy Messenger — which uses battery status information to turn off high energy functions such as taking pictures when the device's battery is low. This presents a valid real world use case for the Battery Status API, plus an object-oriented JavaScript structure for handling the battery status functions.

Plotting yourself on the map

The Geolocation API, along with services such as Google Maps and OpenStreetMap, provides a great way to gather data about the user's surroundings — where they are, and what they can find nearby. This article gives a detailed account of how to build up a Geolocation application.

Keep it level: responding to device orientation changes

This article explores motion and orientation sensors (detecting when the device is tilted in different directions, for example) and associated W3C specifications, and explains how to makes use of such data in an HTML5 game written for the open web and Firefox OS devices.

Near or far? Responding to proximity

This article explains how the web platform can access the proximity sensors installed on mobile devices and provides an instant messaging and calls demo application that makes use of the Proximity API.

Optimizing for high and low network speeds

Network connectivity is a big issue for mobile apps, and network usage has many costs associated with it: battery life, performance and in some cases actual data transfer costs. These aspects should always be considered when designing and building cross platform Web Apps. This article explores a technology that facilitates optimization for high and low network speeds in the context of Open Web Apps: The Network Information API.

Updating phone contacts from the Web

Open web apps can benefit from integrating with the address books of devices they are installed on, especially on mobile devices in which contacts can be combined usefully with other data such as geolocation for personalised user experiences. This article explains how to build a real-world Firefox OS app that makes use of the API involved in managing phone contacts: the Contacts API.

Creating the Area Tweet app

This article shows how to gather data from third-party services exposing a REST API, the Twitter REST API, to build an app that can show and send tweets, and geolocating the user through the Geolocation API.

Weather app tutorial

This article shows how to gather data from third-party services exposing a RSS Feed, the Yahoo! Weather RSS Feed, to build an app providing information and forecast about the weather.

チュートリアル

• Orientation and motion data explained
• Using device orientation with 3D transforms
• Using the battery API
• Taking webcam photos
• Introducing Web Activities

リファレンス

• WebAPI
• Geolocation API
• HTML Media Capture
• Navigator.getUserMedia
• WebRTC
• Camera API
• Screen Orientation API
• Device Orientation API
• Ambient Light Sensor API
• Battery Status API
• Proximity API
• Network Information API
• Contacts API
• FileHandle API
• Device Storage API
• Web Activities