今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
位置情報を取得し続ける
HTML５を使って 位置情報を取得するには ２つの方法があります ひとつは 一回限りのリクエストをおこなって 現在位置を取得する方法 もうひとつは 一定の期間 現在位置を監視する リクエストをおこなって 常に 現在位置を チェックする方法です このレッスンでは 周辺を移動しても 現在の位置を 取得し続ける 方法について学びます サンプルは WatchingPosition.htmlというファイルです このサンプルは ウェブサーバーを通して 実行する必要があるため ここではローカルホストを通して 実行されるようにしています [現在位置を監視]ボタンを クリックすると ジオロケーションオブジェクトから watchPositionという関数を 呼び出します すると現在位置の監視が始まり 継続的に 現在位置の変化を コールバックします 現在 ウェブページの右側に 位置が表示されています 私はデスクトップPCで このアプリケーションを実行しており 街中を歩いているわけではなく オフィスで椅子に座っています そのため 現在位置は変化していませんし 更新される要素を 確認することもできません しかしこの 同じアプリケーションを スマートフォンなどで実行して 場所を移動すると 現在位置が変化し 継続的に更新されることを 確認できるでしょう ある時点で 現在位置の監視を 停止したい場合があります そのときに呼び出すのが clearWatch関数です この[監視をクリア]ボタンを クリックしたときに 何が起こるのかに 注目してください 先ほど開始した [監視をクリア] 停止できました それでは 実際に どのような実装になっているのか 構造をみてみましょう すでにエディタで このWatchingPosition.htmlを 開いています エディタに切り替わりました 監視を開始するために ボタンをクリックすると 呼び出される関数が 少しスクロールしたところに doWatch関数として 定義されています はじめにブラウザが Geolocation APIを サポートしているかどうかをテストします 次にgeolocationオブジェクト上で watchPosition関数を 呼び出しています 基本的に 位置情報を取得するには ２つの関数があります 一回のリクエストで 現在位置を取得するには…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。