HTML5 API入門

位置情報を取得する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Geolocation APIを使って現在位置を取得するための具体的な実装について紹介します。
講師:
08:27

字幕

このレッスンでは、Geolcation API を使って、 現在位置を取得するための、 具体的な実相について紹介します。 現在開いているサンプルは、 GettingCurrentPosition.html というファイルです。 このサンプルは、ウェブサーバーを通して 実行する必要があるため、 ここではlocalhostを通して、 実行されるようになっています。 「現在位置を取得」ボタンをクリックしたとき、 Javaスクリプトによって、Glocation APIが 呼び出され、 ブラウザはリクエストを保留し、 続けるかどうかを尋ねられます。 ボタンをクリックしてみましょう。 リクエストが保留され、 続けるかどうかを訊いてきました。 それでは、拒否ボタンを押したときに、 何が起こるかを見てみましょう。 この場合、エラーメッセージが 出力されましたが。、 このメッセージ内容は、アプリケーションによって 多少差があります。 ここでは、ユーザーが現在地を取得するのを拒否した というメッセージになっています。 いったん許可、あるいは拒否を選択しても、 クロームの場合は、アドレスバー上のボタンから、 後ほど選択を変更することができます。 アドレスバーにある、現在地を示すアイコンを クリックし、 これらの設定を消去して、「次回以降に適応しない」 を選択します。 そして、F5キーを押してページを再読み込みすると 一度アクセスを拒否した、 という設定が削除され、再度、許可、 拒否を選択することができます。 ここでは、許可をクリックして、 緯度、経度、精度が表示されました。 またこの時、使われているブラウザや、 デバイスに依存して、 方角、速度、高度、高度の制度、タイムスタンプを 取得できることもあります。 それではこの例で、コードがどのような 実装になっているのかを見てみましょう。 EditorでこのHtmlを開きます。 Htmlの中で、実際にブラウザーで表示されている 部分までスクロールします。 113行目に、div要素があります。 これは、全ての位置情報を表示する、 ウェブページの右側に表示されるdivです。 ブラウザーで示すと、この部分になります。 Editorに戻ります。 そしてdivは、その内部にいくつも テキストボックスを持っています。 最初の三つは、基本的な情報を 示しています。 先ほども表示された、緯度、経度、そして その精度です。 そしてオプションの情報を表示するためのものが 残りのテキストボックスです。 上から、方角、速度、高度、高度の制度、 タイムスタンプです。 それでは、ウェブページ上で、「現在位置を取得」ボタンを クリックしたときに実行される、 コードを見てみましょう。 それは上のほうの、42行目付近にあります。 これは、「現在位置を取得」ボタンをクリックしたときに、 実行されるハンドラです。 doGetという名前が付けられています。 ボタンがクリックされたときに、まず行うことは、 使っているブラウザが、 Geolocation APIをサポートしているかどうかを 判断することです。 そしてこれが、その判断を行う方法です。 navigatorオブジェクトを取得し、Geolocationプロパティの 有り無しをテストします。 使っているブラウザがこのプロパティを持っている場合、 Geolocation APIをサポートしています。 その場合「Geolocation APIをサポートしている」 というメッセージをブラウザに表示します。 そしてこの行で、実際に現在位置を取得する リクエストを行っています。 Geolocationオブジェクトを取得し、 getCurrentPositionメソッドを実行します。 このメソッドは、位置情報を取得できるタイミングが 、非常に遅くなる場合がありますので、 非同期に実行されます。 そのため位置情報は、このgetCurrentPositionを 実行したら、すぐに返されるわけではありません。 そのためには、二つのコールバック関数を用意します。 リクエストが成功したときのコールバック関数と、 エラーが発生したときのコールバック関数です。 それでは一つ目のコールバック関数を見てみましょう。 少し下にスクロールして、62行目あたりを 確認します。 このコールバック関数は、ポジションオブジェクトを 受け取ります。 ポジションオブジェクトは、現在位置に関する 全ての座標情報が含まれている、 coordsプロパティを持っています。 coordsプロパティはさらに、緯度、経度、精度などを含む プロパティを持っています。 これらのいくつかは、nullかもしれません。 それはお使いのブラウザや、デバイスに依存します。 位置情報が実際に取得できた、タイムスタンプについても 取得できます。 さらに76行目で、念のためのチェックを行っています。 これは、Geolocation APIから緯度、または経度が nullとして戻ってきた時のためです。 その場合、あなたのブラウザは、Geolocation APIを サポートしているものの、 「現在は使えません。」というメッセージを表示します。 このようなメッセージにすることで、ユーザーが後で もう一やってみよう、という気持ちになるでしょう。 緯度または経度が正常に取得できた場合は、 先ほどブラウザで確認したように、 情報を表示します。 これが位置情報を表示するコールバック関数です。 次にエラー処理のためのコールバック関数を見てみましょう。 さらに少し下にスクロールします。 Geolocation APIで何かがうまくいかなかった場合、 このコールバック関数が呼び出されます。 この関数は、エラーオブジェクトを受け取ります。 エラーオブジェクトは、コードプロパティを持っています。 このコードプロパティには、位置情報の取得が拒否された、 位置情報を利用できない、 タイムアウトになった、いづれかをあらわす値が入っています。 例えば、PERMISSION_DENIEDは、 ユーザーが位置情報の取得を拒否した場合です。 位置情報が一時的に利用できない場所にいる時などは、 POSITION_UNAVAILABLEになります。 タイムアウトが発生した場合は、TIMEOUTです。 これで、位置情報を取得するための解説は すべてになります。 このレッスンでは、ブラウザがGeolocation APIを サポートしているかをテストする方法、 Geolocationオブジェクトから、getCurrentPositionメソッドを 実行して、 現在位置を取得する方法、 そして発生する可能性のあるエラーを処理するための コールバック関数の設定について学びました。

HTML5 API入門

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

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

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

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

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