コース: WebアプリのためのHTML5 API 講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

位置情報を取得する

位置情報を取得する

このレッスンでは、Geolcation API を使って、 現在位置を取得するための、 具体的な実相について紹介します。 現在開いているサンプルは、 GettingCurrentPosition.html というファイルです。 このサンプルは、ウェブサーバーを通して 実行する必要があるため、 ここではlocalhostを通して、 実行されるようになっています。 「現在位置を取得」ボタンをクリックしたとき、 Javaスクリプトによって、Glocation APIが 呼び出され、 ブラウザはリクエストを保留し、 続けるかどうかを尋ねられます。 ボタンをクリックしてみましょう。 リクエストが保留され、 続けるかどうかを訊いてきました。 それでは、拒否ボタンを押したときに、 何が起こるかを見てみましょう。 この場合、エラーメッセージが 出力されましたが。、 このメッセージ内容は、アプリケーションによって 多少差があります。 ここでは、ユーザーが現在地を取得するのを拒否した というメッセージになっています。 いったん許可、あるいは拒否を選択しても、 クロームの場合は、アドレスバー上のボタンから、 後ほど選択を変更することができます。 アドレスバーにある、現在地を示すアイコンを クリックし、 これらの設定を消去して、「次回以降に適応しない」 を選択します。 そして、F5キーを押してページを再読み込みすると 一度アクセスを拒否した、 という設定が削除され、再度、許可、 拒否を選択することができます。 ここでは、許可をクリックして、 緯度、経度、精度が表示されました。 またこの時、使われているブラウザや、 デバイスに依存して、 方角、速度、高度、高度の制度、タイムスタンプを 取得できることもあります。 それではこの例で、コードがどのような 実装になっているのかを見てみましょう。 EditorでこのHtmlを開きます。 Htmlの中で、実際にブラウザーで表示されている 部分までスクロールします。 113行目に、div要素があります。 これは、全ての位置情報を表示する、 ウェブページの右側に表示されるdivです。 ブラウザーで示すと、この部分になります。 Editorに戻ります。 そしてdivは、その内部にいくつも テキストボックスを持っています。 最初の三つは、基本的な情報を…

目次