Html 5のDeviceOrientation特性
27256 ワード
デバイス位置決めAPI
W 3 CにおけるデバイスポジショニングAPIの仕様記述を参照すると、このAPIは、ホストデバイスに関連する物理的な向きと運動状態情報を提供することを目的とした複数の新しいDOMイベントを定義していることが分かる.APIによって提供されるデータは、デバイス上のジャイロ、加速計、コンパスなどを含む複数のソースから生成される.デバイスに搭載されているデータソースによって異なり、搭載されているセンサのタイプによって異なります.
このAPIはW 3 C Working Draftに属しており、つまり関連仕様が最終的に確定されていないため、将来的にはその具体的な内容がある程度変動する可能性がある.さらに、APIは、複数のブラウザおよびオペレーティングシステム上で不一致であることが知られていることに留意されたい.たとえば、BlinkレンダリングエンジンベースのChromeおよびOperaブラウザでは、このAPIはWindows 8システムがdeviceorientationイベントを生成する互換性と競合します.別の例は、APIのinterval属性がOpera Mobileバージョンで一定の定数ではないことである.
実際の使用
このAPIによって表示される3つのイベントはすべて、デバイスの位置付けに関する情報を提供するために使用される.
• deviceorientation
• devicemotion
• compassneedscalibration
これらのイベントはwindowオブジェクトで実行されます.つまり、windowオブジェクトにプロセッサを追加する必要があります.次に、この3つの事件を一つ一つ分析してみましょう.
この仕様を実装するユーザエージェントは、
ユーザエージェントは、windowオブジェクト上の
このイベントは、方向が大きく変化したときにトリガーされるべきである.このコンテキストで大きな変更の定義は実装によって与えられる.また、このイベントの新しいリスナーを登録する場合、実装は、十分な新しい情報を取得した後、直ちにイベントをトリガーするべきである.
本イベントの
地球座標系は、ユーザーの位置にある「東、北、上」系です.1984年の世界測地システムのspheriodのユーザの位置に地面が接する3つの軸を有する.東(X)は地面にあり、北軸に垂直で、東に向かって正である. 北(Y)地上で、真北に向かって正(北極を指す). 上(Z)は地面に垂直で、上を正とする.
電話やタブレットなどのモバイルデバイスの場合、デバイス座標系は画面の標準方向に関連して定義されます.これは、キーボードのようなスライド要素が展開されず、ディスプレイのような選択要素がデフォルトの位置に折り畳まれていることを意味します.デバイスがスライドキーボードを回転または展開したときに画面の方向が変化した場合、デバイスの座標系の方向には影響しません.ユーザは、これらの画面方向の変化を得るために、既存の xは、スクリーンまたはキーボード平面上で、スクリーンまたはキーボードの右側が正です. yは、画面またはキーボードの画面で、画面またはキーボードの上が正です. zは、画面またはキーボード画面に垂直であり、画面またはキーボードから離れて正である.
地球座標系から設備座標系への遷移は以下のシステムに従って変換しなければならない.
回転は右手の規則を使用しなければなりません.つまり、軸の方向から時計回りに回転するように1つの軸に沿って回転します.2つの系が重なることから、回転には次のルールが適用されます.は装置座標系z軸を軸とし、 は、機器座標系x軸を軸とし、 設備座標系y軸を軸とし、 File:Http://www.w3.org/TR/orientation-event/start.pngデバイスの初期位置は、地球(XYZ)がデバイス(zyz)座標系と重なる.
File:Http://www.w3.org/TR/orientation-event/c-rotation.png装置はz軸を軸とし、alpha度を回転させ、元座標x、y軸をx 0、y 0と表示する.
File:Http://www.w3.org/TR/orientation-event/a-rotation.png装置はx軸を軸とし、beta度を回転させ、原座標y、z軸をy 0、z 0と表示する.
File:Http://www.w3.org/TR/orientation-event/b-rotation.png装置はy軸を軸とし、beta度を回転させ、原座標x、z軸をx 0、z 0と表示する.
したがって、
3つの角度絶対値を提供できない実装の場合、代替として、任意の方向に対する相対値を提供することができる.この場合、
すべての3つの角度を提供できない実装では、未知の角度の値をnullに設定する必要があります.角度が指定されている場合は、
compassneedscalibrationイベント
この仕様を実装したユーザエージェントは、DOM Leve 2イベント仕様に定義された
ユーザエージェントは、windowオブジェクト上の
このイベントは、ユーザエージェントが方向データを取得するためのコンパスがキャリブレーションを必要とすると判断したときにトリガーされる必要があります.さらに、ユーザエージェントは、較正コンパスがdeviceorientationイベントで得られるデータの精度を向上させることができる場合にのみ、イベントをトリガーしなければならない.
このイベントのデフォルトの動作は、コンパスのキャリブレーション方法をユーザーに提示することです.イベントは、Webサイトに代替のキャリブレーションインタフェースを提供できるように取り消す必要があります.
义齿
この仕様を実装するユーザエージェントは、
ユーザエージェントは、windowオブジェクト上の
重力の影響を排除できない加速データの実装(例えばジャイロが欠けている)については、代替として、重力の影響を受ける加速データを提供することができる.これは多くのアプリケーションでは使いにくいが、これらの情報を提供することは、最大限のサポートを提供することを意味する.この場合、
すべての属性を指定できない実装では、位置の属性の値をnullに設定する必要があります.インプリメンテーションが移動情報を提供できない場合、イベントがトリガーされると、すべてのプロパティがnullに設定されます.
サポート機能の検出
ブラウザまたはユーザーエージェントが前述した2つのイベント、すなわちdeviceorientationとdevicemotionをサポートしているかどうかを検出することは、それ自体が非常に簡単であり、わずかなステータス宣言を追加するだけでよい.次のコード・クリップを参照してください.deviceorientationイベントのサポート能力を検出します.
if (window.DeviceOrientationEvent) {
// We can listen for change in the device's orientation...
} else {
// Not supported
}
compassneedscalibrationイベントをテストするには、次のコードクリップを使用します.
if (!('oncompassneedscalibration' in window)) {
// Event supported
} else {
// Event not supported
}
W 3 CにおけるデバイスポジショニングAPIの仕様記述を参照すると、このAPIは、ホストデバイスに関連する物理的な向きと運動状態情報を提供することを目的とした複数の新しいDOMイベントを定義していることが分かる.APIによって提供されるデータは、デバイス上のジャイロ、加速計、コンパスなどを含む複数のソースから生成される.デバイスに搭載されているデータソースによって異なり、搭載されているセンサのタイプによって異なります.
このAPIはW 3 C Working Draftに属しており、つまり関連仕様が最終的に確定されていないため、将来的にはその具体的な内容がある程度変動する可能性がある.さらに、APIは、複数のブラウザおよびオペレーティングシステム上で不一致であることが知られていることに留意されたい.たとえば、BlinkレンダリングエンジンベースのChromeおよびOperaブラウザでは、このAPIはWindows 8システムがdeviceorientationイベントを生成する互換性と競合します.別の例は、APIのinterval属性がOpera Mobileバージョンで一定の定数ではないことである.
実際の使用
このAPIによって表示される3つのイベントはすべて、デバイスの位置付けに関する情報を提供するために使用される.
• deviceorientation
• devicemotion
• compassneedscalibration
これらのイベントはwindowオブジェクトで実行されます.つまり、windowオブジェクトにプロセッサを追加する必要があります.次に、この3つの事件を一つ一つ分析してみましょう.
deviceorientationイベントこの仕様を実装するユーザエージェントは、
deviceorientationという新しいDOMイベントを提供する必要がある.対応するイベントのタイプはDeviceOrientationEventであり、windowオブジェクト上でトリガーされる必要があります.deviceorientationイベントの登録およびトリガは、DOM Level 2イベントのデフォルト動作、[DOMEVENTSに従う必要があります.ユーザエージェントは、windowオブジェクト上の
ondeviceorientationというイベント処理関数IDL属性[HTML5]も提供しなければならない.このイベント処理関数のタイプはDeviceOrientationEventでなければなりません. interface DeviceOrientationEvent : Event {
readonly attribute double? alpha;
readonly attribute double? beta;
readonly attribute double? gamma;
readonly attribute boolean absolute;
void initDeviceOrientationEvent(in DOMString type,
in boolean bubbles,
in boolean cancelable,
in double? alpha,
in double? beta,
in double? gamma,
in boolean absolute);
}
このイベントは、方向が大きく変化したときにトリガーされるべきである.このコンテキストで大きな変更の定義は実装によって与えられる.また、このイベントの新しいリスナーを登録する場合、実装は、十分な新しい情報を取得した後、直ちにイベントをトリガーするべきである.
本イベントの
alpha,beta,gammaの属性は、地球に固定された座標系から装置に固定された座標系への変換として表現される装置の方向を示さなければならない.座標系は以下の説明に従って調整する必要があります.地球座標系は、ユーザーの位置にある「東、北、上」系です.1984年の世界測地システムのspheriodのユーザの位置に地面が接する3つの軸を有する.
電話やタブレットなどのモバイルデバイスの場合、デバイス座標系は画面の標準方向に関連して定義されます.これは、キーボードのようなスライド要素が展開されず、ディスプレイのような選択要素がデフォルトの位置に折り畳まれていることを意味します.デバイスがスライドキーボードを回転または展開したときに画面の方向が変化した場合、デバイスの座標系の方向には影響しません.ユーザは、これらの画面方向の変化を得るために、既存の
orientationchangeイベントを使用することができることを望む.ラップトップコンピュータの場合、デバイスの座標系は統合キーボードとして定義されます.地球座標系から設備座標系への遷移は以下のシステムに従って変換しなければならない.
回転は右手の規則を使用しなければなりません.つまり、軸の方向から時計回りに回転するように1つの軸に沿って回転します.2つの系が重なることから、回転には次のルールが適用されます.
alpha度回転する.alphaのスコープは[0,360]です.beta度回転する.betaの役割ドメインは[-180,180).gamma度回転する.gammaの役割ドメインは[-90,90].
File:Http://www.w3.org/TR/orientation-event/c-rotation.png装置はz軸を軸とし、alpha度を回転させ、元座標x、y軸をx 0、y 0と表示する.
File:Http://www.w3.org/TR/orientation-event/a-rotation.png装置はx軸を軸とし、beta度を回転させ、原座標y、z軸をy 0、z 0と表示する.
File:Http://www.w3.org/TR/orientation-event/b-rotation.png装置はy軸を軸とし、beta度を回転させ、原座標x、z軸をx 0、z 0と表示する.
したがって、
alpha、beta、およびgammaは、Z−X′−Y′式の固有のTait−bryan角度のセットを構成する.[[EULERANGLES]ここで角度の選択は数学的慣例に従うことに留意されたいが、これは、alphaがコンパスの指向とは逆であることを意味する.これはまた、これらの角度が車両動力学におけるroll−pitch−yaw慣例と一致しないことを意味する.3つの角度絶対値を提供できない実装の場合、代替として、任意の方向に対する相対値を提供することができる.この場合、
absolute属性をfalseとしなければならず、そうでなければabsolute属性をtrueとしなければならない.すべての3つの角度を提供できない実装では、未知の角度の値をnullに設定する必要があります.角度が指定されている場合は、
absoluteプロパティを適切に設定する必要があります.インプリメンテーションが方向情報を提供できない場合は、イベントをトリガーするときにすべてのプロパティをnullに設定する必要があります.compassneedscalibrationイベント
この仕様を実装したユーザエージェントは、DOM Leve 2イベント仕様に定義された
compassneedscalibrationインターフェース[DOMEVENTSを使用するEventという新しいDOMイベントを提供する必要がある.このイベントは、windowオブジェクト上でトリガーする必要があります.deviceorientationイベントの登録およびトリガは、DOM Level 2イベントのデフォルト動作、[DOMEVENTSに従う必要があります.ユーザエージェントは、windowオブジェクト上の
oncompassneedscalibrationというイベント処理関数IDL属性[HTML5]も提供しなければならない.このイベント処理関数のタイプはEventでなければなりません.このイベントは、ユーザエージェントが方向データを取得するためのコンパスがキャリブレーションを必要とすると判断したときにトリガーされる必要があります.さらに、ユーザエージェントは、較正コンパスがdeviceorientationイベントで得られるデータの精度を向上させることができる場合にのみ、イベントをトリガーしなければならない.
このイベントのデフォルトの動作は、コンパスのキャリブレーション方法をユーザーに提示することです.イベントは、Webサイトに代替のキャリブレーションインタフェースを提供できるように取り消す必要があります.
义齿
この仕様を実装するユーザエージェントは、
devicemotionという新しいDOMイベントを提供する必要がある.対応するイベントのタイプはDeviceMotionEventであり、windowオブジェクト上でトリガーされる必要があります.devicemotionイベントの登録およびトリガは、DOM Level 2イベントのデフォルトの動作に従う必要があります.ユーザエージェントは、windowオブジェクト上の
ondevicemotionというイベント処理関数IDL属性[HTML5]も提供しなければならない.このイベント処理関数のタイプはDeviceMotionEventでなければなりません. [Callback, NoInterfaceObject]
interface DeviceAcceleration {
readonly attribute double? x;
readonly attribute double? y;
readonly attribute double? z;
}
[Callback, NoInterfaceObject]
interface DeviceRotationRate {
readonly attribute double? alpha;
readonly attribute double? beta;
readonly attribute double? gamma;
}
interface DeviceMotionEvent : Event {
readonly attribute DeviceAcceleration? acceleration;
readonly attribute DeviceAcceleration? accelerationIncludingGravity;
readonly attribute DeviceRotationRate? rotationRate;
readonly attribute double? interval;
void initAccelerometerEvent(in DOMString type,
in boolean bubbles,
in boolean cancelable,
in DeviceAcceleration? acceleration,
in DeviceAcceleration? accelerationIncludingGravity,
in DeviceRotationRate? rotationRate,
in double? interval);
}
acceleration属性は、宿主装置の地球座標系に対する加速情報を提供しなければならない.単位はm/s 2でなければならない.重力の影響を排除できない加速データの実装(例えばジャイロが欠けている)については、代替として、重力の影響を受ける加速データを提供することができる.これは多くのアプリケーションでは使いにくいが、これらの情報を提供することは、最大限のサポートを提供することを意味する.この場合、
accelerationIncludingGravity属性は、宿主装置の加速情報を提供し、加速度が等しい方向と逆の反重力加速度を加えなければならない.加速情報の単位はm/s 2でなければならない.rotationRate属性は、ホストデバイスが空間で回転する速度を提供しなければならない.単位はdeg/sでなければならない.interval属性は、ハードウェアからデータを取得する間隔を提供しなければならない.単位はミリ秒でなければならない.Webアプリケーションによるデータのフィルタリングを簡素化するために、定数である必要があります.すべての属性を指定できない実装では、位置の属性の値をnullに設定する必要があります.インプリメンテーションが移動情報を提供できない場合、イベントがトリガーされると、すべてのプロパティがnullに設定されます.
サポート機能の検出
ブラウザまたはユーザーエージェントが前述した2つのイベント、すなわちdeviceorientationとdevicemotionをサポートしているかどうかを検出することは、それ自体が非常に簡単であり、わずかなステータス宣言を追加するだけでよい.次のコード・クリップを参照してください.deviceorientationイベントのサポート能力を検出します.
if (window.DeviceOrientationEvent) {
// We can listen for change in the device's orientation...
} else {
// Not supported
}
compassneedscalibrationイベントをテストするには、次のコードクリップを使用します.
if (!('oncompassneedscalibration' in window)) {
// Event supported
} else {
// Event not supported
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title> </title>
<script type="text/javascript">
window.onload=function(){init();}
var SHAKE_THRESHOLD=3000;//
var last_update=0;//
var x=y=z=last_x=last_y=last_z=0;// x、y、z
function init(){
//
if(window.DeviceMotionEvent){
//
window.addEventListener('devicemotion',deviceMotionHandler,false);
}else{
alert('not support mobile event');
}
}
//
function deviceMotionHandler(eventData){
//
var acceleration=eventData.accelerationIncludingGravity;
var curTime=new Date().getTime();//
var diffTime=curTime-last_update;
if(diffTime>100){
last_update=curTime;//
x=acceleration.x;// X
y=acceleration.y;// Y
z=acceleration.z;//
var speed=Math.abs(x+y+z-last_x-last_y-last_z)/diffTime*10000;//
if(speed>SHAKE_THRESHOLD){
alert(" ， ");
var media=document.getElementById("musicBox");//
media.setAttribute("src","http://192.168.1.125/mohe/upload/audio/20140930/20140930114522_485.mp3");
media.load();//
media.play();//
}
//
last_x=x;
last_y=y;
last_z=z;
}
}
</script>
</head>
<body>
<p> </p>
<audio id="musicBox" controls="true" src=""/>
</body>
</html>