HTML5の新機能モバイルデバイスAPI

モバイルデバイスへのサービスを向上させるために、HTML5はモバイルデバイス用の一連のAPIを開始しました。

1. Geolocation API

Geolocationインターフェースは、ユーザーの地理的位置を取得するために使用されます。使用する方法は、GPS またはその他のメカニズム (IP アドレス、WIFI ホットスポットなど) に基づいています。

次のメソッドは、ブラウザがこのインターフェースをサポートしているかどうかを確認できます。

if (navigator.geolocation) {    // 支持} else {    //不支持}

1.1 getCurrentPositionメソッド

getCurrentPositionメソッドは、ユーザーの地理的位置を取得するために使用されます。これを使用するには、ユーザーの承認が必要です。ブラウザーは、現在のページで地理的位置の取得を許可するかどうかをユーザーに尋ねるダイアログ ボックスを表示します。 コールバック関数には 2 つの状況を考慮する必要があります。1 つは承認を与える場合、もう 1 つは承認を拒否する場合です。ユーザーが承認を拒否した場合、エラーがスローされます。

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);

上記のコードは、現在のアドレスの場所を処理する 2 つのコールバック関数を指定しています。

(1) 認可に同意する

ユーザーが認可に同意すると、 geoSuccess が呼び出されます。

function geoSuccess(event) {    var coords = event.coords;
    console.log('latitude: ' + coords.latitude);    //纬度
    console.log('longitude: ' + coords.longitude);    //经度
    console.log('accuracy: ' + coords.accuracy);    //精度
    console.log('altitude: ' + coords.altitude);    //海拔
    console.log('altitudeAccuracy: ' + coords.altitudeAccuracy); //海拔精度（单位：米）
    console.log('heading: ' + coords.heading);    //以360度表示的方向
    console.log('speed: ' + coords.speed);    //每秒的速度（单位：米）}

geoSuccess のパラメータはイベントオブジェクトです。 event.coordsattributeは、ユーザーの位置情報、主に次の値を含むオブジェクトを指します:

• coords.latitude: 緯度

• coords.longitude: 経度

• coords.accuracy: 精度

• Coords.altitude：高度

• coods.altitudeaccuracy：メートル単位の高度精度

• Coords.heading：360度の方向

• (2) 認可が拒否されました

ユーザーが認可を拒否した場合、 geoError が呼び出されます。

function geoError(event) {
    console.log('Error code ' + event.code + '. ' + event.message);
}

geoError のパラメータもイベント オブジェクトです。 event.code 属性はエラーのタイプを表し、次の 4 つの値があります:

0: 不明なエラー。ブラウザはエラーの原因を尋ねません。

定数

event.UNKNOWN_ERROR と同等です。

• 1: ユーザーが承認を拒否しました。定数event.PERMISSION_DENIEDに相当します。

• 2: 位置情報が取得されませんでした。GPSまたは他の測位メカニズムが位置を特定できません。定数event.POSITION_UNAVAILABLEに相当します。

• 3: タイムアウト。GPS は指定された時間内に結果を返しません。これは、定数event.TIMEOUTに相当します。

• event.messageはエラーメッセージです。

(3) 位置決め動作を設定する

getCurrentPosition メソッドは、位置決め動作を設定するための 3 番目のパラメーターとしてオブジェクトを受け取ることもできます。

var option = {
    enableHighAccuracy: true,
    timeout: Infinity,
    maximumAge: 0};

navigator.geolocation.getCurrentPosition(geoSuccess, geoError, option);

このパラメータ オブジェクトには 3 つのメンバーがあります:

enableHighAccuracy: true に設定すると、クライアントはより正確な位置情報を提供する必要があり、その結果、測位時間が長くなり、消費電力が増加します。デフォルト設定は false です。

• timeout: クライアントの応答を待機する最大ミリ秒数。デフォルト値は無限です。

• maxinumAge: クライアントが

  データをキャッシュする
ために使用できる最大ミリ秒数。 0 に設定すると、クライアントはキャッシュを読み取りません。無限に設定すると、クライアントはキャッシュのみを読み取ります。

• 1.2 watchPositionメソッドとclearWatchメソッド

watchPositionメソッドは、ユーザーの位置の継続的な変化を監視するために使用できます。使用方法はgetCurrentPositionメソッドと同じです。

var watchID = navigator.geolocation.watchPosition(geoSuccess, geoError);

ユーザーの位置が変わると、コールバック関数が呼び出されます。

リスニングをキャンセルしたい場合は、clearWatchメソッドを使用してください。

navigator.geolocation.clearWatch(watchID);

2. 振動 API

振動インターフェイスは、ブラウザでコマンドを発行してデバイスを振動させるために使用されます。この操作は大量の電力を消費するため、バッテリー残量が少ない場合はこの操作をキャンセルすることをお勧めします。

以下のコードを使用して、インターフェースが利用可能かどうかを確認してください。現在、Android プラットフォーム用の Chrome と Firefox の最新バージョンのみがサポートされています。

navigator.vibrate = navigator.vibrate ||
                               navigator.webkitVibrate ||
                               navigator.mozVibrate ||
                               navigator.msVibrate;if (navigator.vibrate) {    // 支持}

vibrate メソッドはデバイスを振動させることができ、そのパラメータは振動が持続するミリ秒数です。

navigator.vibrate(1000);

上記のコードは、デバイスを 1 秒間振動させます。

vibrate メソッドは、振動モードを表す

array

をパラメータとして受け入れることもできます。偶数の位置にある配列メンバーは振動するミリ秒数を表し、奇数の位置にある配列メンバーは待機するミリ秒数を表します。

navigator.vibrate([500, 300, 500]);

上記のコードは、デバイスが最初に 500 ミリ秒間振動し、次に 300 ミリ秒間待機してから、500 ミリ秒間振動することを示しています。 振動はノンブロッキング操作です。つまり、電話が振動している間、

JavaScript

コードは下向きに実行され続けます。振動を停止するには、vibrate メソッドに 0 ミリ秒を渡すだけです。

navigator.vibrate(0);

3、亮度调节

当移动设备的亮度传感器，感知外部亮度发生显著变化时，会触发devicelight事件。目前，只有Firefox布署了这个API。

window.addEventListener('devicelight', function(event) {
    console.log(event.value + 'lux');
})

下面代码表示，devicelight事件的回调函数，接受一个事件对象作为参数。该对象的value属性就是亮度值。

这种API的一种应用是，我们可以针对亮度的强弱来改网页背景和文字颜色。

以上がHTML5の新機能モバイルデバイスAPIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。