JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のclearWatchメソッドで進行中のwatchPosition呼び出しをキャンセルする方法

clearWatchメソッドとは

HTML5のGeolocation APIには、clearWatchというメソッドが用意されています。このメソッドを使用すると、watchPosition()で開始した位置情報の継続的な監視処理をキャンセルできます。キャンセルが実行されると、デバイスの現在の地理的位置に関する更新情報の取得が停止されます。

watchPosition()は、呼び出されるたびに一意の監視ID（watchID）を返します。このIDをclearWatchメソッドに引数として渡すことで、対応する監視処理を停止させることができます。

実装サンプルコード

以下は、位置情報の監視を開始し、ボタン操作で停止できる完全なHTMLサンプルです。

<!DOCTYPE HTML>
<html>
   <head>
      <script>
         var watchID;
         var geoLoc;

         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            alert("緯度 : " + latitude + " 経度 : " + longitude);
         }

         function errorHandler(err) {
            if(err.code == 1) {
               alert("エラー：アクセスが拒否されました！");
            }
            else if( err.code == 2) {
               alert("エラー：位置情報を取得できません！");
            }
         }

         function getLocationUpdate(){
            if(navigator.geolocation){
               // タイムアウトは60000ミリ秒（60秒）に設定
               var options = {timeout:60000};
               geoLoc = navigator.geolocation;
               watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
            }
            else{
               alert("申し訳ありませんが、このブラウザは位置情報に対応していません！");
            }
         }

         function stopWatch(){
            geoLoc.clearWatch(watchID);
         }
      </script>
   </head>

   <body>
      <form>
         <input type = "button" onclick = "getLocationUpdate();" value = "監視を開始"/>
         <input type = "button" onclick = "stopWatch();" value = "監視を停止"/>
      </form>
   </body>
</html>

コードの解説

監視の開始（getLocationUpdate関数）
まずnavigator.geolocationが利用可能かどうかをチェックし、対応していない場合はアラートで通知します。対応している場合は、オプションとして60秒のタイムアウトを設定し、watchPosition()を呼び出して監視を開始します。返された監視IDは変数watchIDに保存されます。

監視の停止（stopWatch関数）
保存しておいたwatchIDをclearWatch()に渡すことで、進行中の位置情報の監視をキャンセルします。これにより、不要な位置情報の取得が止まり、バッテリー消費やパフォーマンスへの負荷を軽減できます。

エラーハンドリングについて

サンプルではerrorHandler関数でエラーコードを判定しています。主なエラーコードは以下のとおりです。

  • コード1（PERMISSION_DENIED）：ユーザーが位置情報へのアクセスを拒否した場合
  • コード2（POSITION_UNAVAILABLE）：デバイスの位置を特定できなかった場合
  • コード3（TIMEOUT）：設定した時間内に位置情報を取得できなかった場合

このように、clearWatchメソッドを適切に活用することで、位置情報の監視を必要な期間だけ行い、効率的なアプリケーションを構築することができます。

  1. HTML5 Canvasの変換（トランスフォーム）基本解説

    HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態で単位変換（identity transform）となっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。 主な変換メソッド translate(x, y)：座標原点を指定した位置へ移動します。 rotate(angle)：指定した角度（ラジアン）だけ描画内容を回転させます。 scale(x, y)：横方向・縦方向に拡大・縮小します。 transform(a, b, c, d, e, f)：現在の変換行列に、指定した行列

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ