HTML5 API入門

位置情報を取得し続ける

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
周辺を移動しても現在の位置を取得し続ける方法について学びます。
講師:
07:56

字幕

HTML5を使って 位置情報を取得するには 2つの方法があります ひとつは 一回限りのリクエストをおこなって 現在位置を取得する方法 もうひとつは 一定の期間 現在位置を監視する リクエストをおこなって 常に 現在位置を チェックする方法です このレッスンでは 周辺を移動しても 現在の位置を 取得し続ける 方法について学びます サンプルは WatchingPosition.htmlというファイルです このサンプルは ウェブサーバーを通して 実行する必要があるため ここではローカルホストを通して 実行されるようにしています [現在位置を監視]ボタンを クリックすると ジオロケーションオブジェクトから watchPositionという関数を 呼び出します すると現在位置の監視が始まり 継続的に 現在位置の変化を コールバックします 現在 ウェブページの右側に 位置が表示されています 私はデスクトップPCで このアプリケーションを実行しており 街中を歩いているわけではなく オフィスで椅子に座っています そのため 現在位置は変化していませんし 更新される要素を 確認することもできません しかしこの 同じアプリケーションを スマートフォンなどで実行して 場所を移動すると 現在位置が変化し 継続的に更新されることを 確認できるでしょう ある時点で 現在位置の監視を 停止したい場合があります そのときに呼び出すのが clearWatch関数です この[監視をクリア]ボタンを クリックしたときに 何が起こるのかに 注目してください 先ほど開始した [監視をクリア] 停止できました それでは 実際に どのような実装になっているのか 構造をみてみましょう すでにエディタで このWatchingPosition.htmlを 開いています エディタに切り替わりました 監視を開始するために ボタンをクリックすると 呼び出される関数が 少しスクロールしたところに doWatch関数として 定義されています はじめにブラウザが Geolocation APIを サポートしているかどうかをテストします 次にgeolocationオブジェクト上で watchPosition関数を 呼び出しています 基本的に 位置情報を取得するには 2つの関数があります 一回のリクエストで 現在位置を取得するには getCurrentPosition関数 もうひとつは 一定の期間にわたって 現在位置を監視する このwatchPosition関数です これら2つの関数のパラメータは 同じです ひとつめのパラメータに 現在位置を受け取るための コールバック関数を設定します そして2つめのパラメータには エラーのコールバック関数を 指定します 3つめのパラメータは オプションです この3つめのパラメータでは どのように現在位置の 取得をおこなうか ということを 決めることができます この3つめのパラメータは getCurrentPosition関数 watchPosition関数の どちらでも使うことができます ここでは watchPosition関数に これらのパラメータを渡しました ひとつずつ パラメータを解説していきましょう enableHighAccuracyは 精度を高くするための フラグを示しています デフォルト値はfalseです これをtrueに設定した場合 可能な限り より正確な情報を得るために デバイス上の 位置情報メカニズムを 使用します そのためwifiアクセスポイントのような メカニズムではなく GPSのようなメカニズムを 使う場合があります 反面バッテリの消費は 激しくなるでしょう 二番目のパラメータは timeoutです これは名前のとおり タイムアウトの時間を 設定できます デフォルトでは 無制限です 必要な場合は ミリ秒単位で 上限を設定することができます ここでは 5秒以内に 位置情報が取得できない場合は エラーになるよう 設定しています 最後のパラメータは maximumAgeです デフォルトは0ミリ秒です maximumAgeは 取得された位置情報の 有効期限を指定します 通常 Geolocation APIで 取得した位置情報は まずキャッシュとして 保存されます ここで 有効期限を設定すると キャッシュが存在すれば キャッシュを使って 位置情報を 取得することになります もしキャッシュがなければ 新たに 位置情報を 取得することになります つまりここで より少ない数を指定すると 位置情報の取得が より頻繁になります さて watchPosition関数の 呼び出しには 位置情報を受け取る コールバック関数 エラーを受け取る コールバック関数 そして必要な場合は オプションで 位置情報の 取得情報を調整する オブジェクトを渡すことができる ということがわかりました 一度だけ watchPosition関数を 呼び出せば 現在位置が 変化したときに コールバック関数が 連続で呼び出されます 緯度 経度 タイムスタンプなどの 位置情報を取得すると 画面上に その情報が表示されます エラーの コールバック関数についても ご想像のものと同じです 画面にどのようなエラーかが 表示されます 最後に clearWatch関数について 紹介しましょう 監視をクリアするための関数です 監視を設定するとき watchPosition関数は 監視のためのIDを返します これは単に123という 数字になっています 複数の監視が 同時におこなわれる可能性があるため グローバル変数 ここでは watchIDという変数に これを格納します 監視をクリアするときは クリアしたい監視のIDを 指定する必要があるため この変数を使います [監視をクリア]ボタンを クリックした時に呼び出される doClear関数を 見てみましょう 少し下に スクロールします doClear関数は 監視をクリアする時の関数です geolocationオブジェクト上の clearWatch関数を 呼び出すときに パラメータとして 監視のためのIDを 指定しています クリアが完了したら 実行されている監視がなくなるため watchIDに nullを指定しています このレッスンでは watchPosition関数を 呼び出すことによって 位置情報の 継続的な更新をおこなう方法 または clearWatch関数によって それをクリアする方法を 見てきました またオプションの パラメータによる 位置情報の取得方法の 調整についても学びました

HTML5 API入門

HTML5は今やインタラクティブコンテンツを作るうえでかかせないものです。このコースでは膨大なHTML5の仕様の中からWebアプリケーションを作成するうえで便利な機能を紹介していきます。コミュニケーション系APIの使い方のほか、Web WorkersやWebSocket、モバイル用アプリの制作で使うjQuery Mobileなどについても解説します。

3時間19分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年03月03日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。