アプリセンター

データを収集し変更する

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

Open Web Appsは、ファイル、デバイスハードウェアやサービスデバイスの位置情報や向きを含む端末に格納されたか、または公開されたデータにアクセスすることができます そのような多くのデータを検索することによって、 一緒にサードパーティのサービスにアクセスする、アプリにリアルタイム通信や同期、監視、位置情報の認識、明るさや新しい種類のジェスチャーといった最先端の機能を追加することができます。

この記事ではホスティング·デバイスと対話するWebアプリケーションを構築するための推奨事項、最も一般的な使用ケースを実施するツール、よくある質問、より詳細な情報が必要な場合のチュートリアルおよび実世界の例、位置情報API、端末の向き情報API、および多くのAPIを使用する方法について提供します。

データ収集ワークフロー

次のフローチャートは、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();
       }
    }
};

Note: これらのAPIがJavaScript APIであっても、データは時々HTML要素(例えばHTML Media Captureで)またはCSS Media Query(例えばScreen Orientation API)経由で検索されます。

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を使用することを検討してください。

Note: Open Web Appsはまた、REST APIまたはRSSフィードをのような公開されているサードパーティのサービスからデータを収集することができます

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

取得したデータでは、その他の種類のデータと結びつけたり、端末に保管したり、計算に使用したり、何かをレンダリングしたりできます。例では 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);
}

Note: We would recommend using Object Oriented Programming when rendering your app, in order to make the code reusable.

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

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);
    };
}

Note: Not every API fires events to handle changes in data: for example the Geolocation API provides the Geolocation.watchPosition method, used to register a handler function that will be called automatically each time the position of the device changes.

レンダリングを更新する

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

JS API Name Gather data Monitor changes
Geolocation API

navigator.geolocation
.getCurrentPosition()

navigator.geolocation
.watchPosition()

 
チュートリアルの例
リファレンスと互換性

Orientation

CSS Media Feature Gather data and monitor changes
orientation media feature @media orientation
JS API Name Gather data Modify data Monitor changes
orientation media feature screen.orientation screen.lockOrientation()
screen.unlockOrientation()
screen
.onorientationchange
JS API Name Gather data and monitor changes
Device Orientation API window.ondeviceorientation
チュートリアルの例
リファレンスと互換性

Motion

JS API Name Gather data and monitor changes
Device Orientation API window.ondevicemotion
チュートリアルの例
リファレンスと互換性

Ambient

JS API Name Gather data and monitor changes
Ambient Light API window.ondevicelight
window.onlightlevel
チュートリアルの例
リファレンスと互換性

Battery

JS API Name Gather data Monitoring changes
Battery Status API

navigator.battery.level
navigator.battery.charging
navigator.battery.chargingTime
navigator.battery.dischargingTime

navigator.battery.onlevelchange
navigator.battery.onchargingchange
navigator.battery.onchargingtimechange
navigator.battery.ondischargingtimechange

チュートリアルの例
リファレンスと互換性

Camera

HTML attribute Gather data
capture <input capture />
JS API Name Gather data
getUserMedia navigator.getUserMedia()
JS API Name Gather data
Camera API navigator.mozCameras.getCamera()
navigator.mozCameras.getListOfCameras()
チュートリアルの例
リファレンスと互換性

Proximity

JS API Name Gather data and monitor changes
Proximity API window.ondeviceproximity
window.onuserproximity
チュートリアルの例
リファレンスと互換性

From device services

Network

JS API Name Gather data Monitor changes
Network Information API navigator.connection.type navigator.connection.onchange
チュートリアルの例
リファレンスと互換性

Contacts

JS API Name Gather data Monitor changes
Contacts API navigator.mozContacts mozContact.oncontactchange
チュートリアルの例
リファレンスと互換性

Files

JS API Name Gather and modify data
FileHandle API window.indexedDB
リファレンスと互換性

Storage

JS API Name Gather and modify data
Device Storage API navigator.getDeviceStorage()
リファレンスと互換性

Firefox OS Services

JS API Name Gather and modify data
Web Activities new MozActivity()
チュートリアルの例
リファレンスと互換性

From third party services

Twitter

JS API Name Gather data Modify data Monitor changes
Twitter REST API GET search/tweets POST statuses/update GET statuses/user_timeline
チュートリアルの例

Weather

RSS Feed Name Gather data and monitor changes
Yahoo Weather RSS Feed http://weather.yahooapis.com/forecastrss?w=location
チュートリアルの例

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.

チュートリアル

リファレンス

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

 このページの貢献者: Uemmra3, T.Ukegawa
 最終更新者: Uemmra3,