各種デバイスの読み取り
2009-08-09 (日) 20:19:00 (1016d)

lifebuoy.png iPhone/iPod touch搭載のMobileSafariがサポートするタッチ入力や画面回転の検出を行う情報をまとめます

タッチイベントの取得 　

AddEventListener?によるイベント追加 　

  • まずタッチイベントを対象となるオブジェクトに対して追加します。ここではdocument.bodyに追加してみましょう。 
    document.body.addEventListener('touchstart', touchHandler, false);
document.body.addEventListener('touchmove', touchHandler, false);
  • イベントハンドラーって何？という方もいるでしょうが、タッチイベントが起こった時に呼ばれる関数を登録するのだと思っていただいたらいいでしょう。

タッチ判定 　

  • イベント追加すれば、後は指定したイベントハンドラー（関数）でイベントを受け取り各種判定を行います。 
    function touchHandler(e) {
	touch = e.touches[0];
	if (e.type == "touchstart") {
		oX = touch.pageX;
	} else
	if (e.type == "touchmove") {
		nX = touch.pageX;
		XX = (nX > oX) ? nX-oX : oX-nX ;
		if(XX > 80) {
			//イベント処理記述
		}
	}
}
  • e.typeにはイベント種類、ここでは先ほど追加しておいた「touchstart」と「touchmove」が発生しますのでそれぞれ発生した時の処理を記述しています。
  • 後は、タッチ開始してからタッチ終了するまでの座標変化（ここではx座標）を読み取り、その数値を元に次の処理を行うかどうかの判定を行っています。

実際の処理 　

  • ここでは、フリック的な操作を想定して「タッチ開始から終了までx座標が80以上変化した場合」に処理を行うようにしています。実際にはコントロールの高さや幅を考慮した判定が必要になってくるでしょう。
  • 単純にタッチを待って何かを表示する処理であれば、touchstart処理だけで良いということになります。その際に座標を取得することで、例えば画面上に3×3の合計9マスに描画したあるとして、「どのマスが押されたか？」という判定が行えるということです。
  • もちろん、iPhoneの特徴はマルチタッチやそれを活かしたジェスチャー操作にこそありますので、それを活かさない手はないでしょう。複数のタッチ処理やジェスチャーについては、マルチタッチの活用を参照ください。

画面の向きの取得 　

  • onorientationChangeイベントを利用することで、画面角度の変化が把握できます。 
    onorientationchange="UpdateOrientation();"
function UpdateOrientation() {
	$("rotation").innerHTML=window.orientation;
}
  • イベントハンドラで指定した処理内で、window.orientationプロパティで取得すれば現在の画面角度がわかります。
    0Portrait orientation 縦表示（デフォルト状態）
    90Landscape orientation with the screen turned clockwise. 横表示（ホームボタンが右側）
    -90Landscape orientation with the screen turned counterclockwise. 逆横表示（ホームボタンが左側）
    180currently not supported
  • なお画面の向きによってCSSを切り替えたい場合は、CSSをportrait用、landscape用の2つを用意しておき、window.orientationで角度を把握した後で「document.body.setAttribute("class","landscapeLeft");」などと設定すれば良いでしょう。

GPS情報の取得 　

  • OS 3.0のMobileSafariからGeolocation APIを使ったGPS位置情報の取得が可能になりました。
  • 次のように記述することで、例の位置情報取得許可ダイアログが表示されます。

    navigator.geolocation.getCurrentPosition?(successCallback, errorCallback);
    navigator.geolocation.watchPosition(successCallback, errorCallback);
    　※一度きりのGPS取得はgetCurrentPosition?を、連続して取得する場合はwatchPositionを使用します。
    　※第3パラメータのオプションは無いようです。

  • コールバック関数の記述例 
    function successCallback(e) {
alert("Lat:" + e.coords.latitude + " Long:" + e.coords.longitude);
}
  • エラーハンドラの記述例 
    function errorCallback(error) {
alert( "errcode:" + error.code);
}

パラメータ 　

  • コールバック関数では、次のような指定により各種数値を読み取ることができます。
    e.coords.latitude緯度
    e.coords.longitude経度
    e.coords.altitude高度
    e.coords.accuracy緯度経度の精度（単位:m）
    e.coords.altitudeAccuracy高度の精度（単位:m）
    e.coords.heading方角
    e.coords.speed対地速度
    ※緯度・経度は、世界測地系(WGS84)。
    ※方角は3G Sのみ
  • エラーコード値は次のとおりです。
    0UNKNOWN_ERROR（1～3以外のエラー）
    1PERMISSION_DENIED（ユーザーによるGPS利用許可に失敗）
    2POSITION_UNAVAILABLE（位置情報取得エラー）
    3TIMEOUT（タイムアウト）
    ※本来であれば第3パラメータに指定された値を超えた場合。恐らくデフォルト待ち時間以上の場合。
    参考）Safari Web Content Guide: Getting Geographic Locations



スポンサード　リンク