Yoshihiro)TweetHTML5は、Webページを作成するための基本的なマークアップ言語HTMLの最新版です。HTML5では、単なるマークアップ言語としての機能だけではなく、JavaScriptで利用できるAPIが大幅に拡充され、アプリケーション開発がより簡単になっているのが特徴です(HTML5について、より詳しくは別連載「今さら聞けないHTML5総おさらい」も参照してください)。本連載では、このHTML5の基本的なテクニックをTIPS形式でまとめていくものです。APIについて紹介します。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。APIはユーザーの現在の位置情報を取得するための命令群です。従来は、デバイスや携帯電話キャリアごとに独自のしくみを提供しており、アプリ開発にもそれぞれの仕様に従ったコードを記述する必要がありました。APIの登場によって、ブラウザの機能のみで、しかも統一した方法で位置情報の取得が可能となります。APIのブラウザごとの対応バージョンは、以下の通りです。001:現在の位置情報を取得する現在の位置情報を取得するには、navigator.geolocationオブジェクトのgetCurrentPositionメソッドを利用します。API経由でユーザーの現在位置を取得し、経度/緯度/方角を表示する例です。API対応ブラウザでアクセスしてください。id="heading"></span></li></ul></body></html>実行結果は、以下の通りです。[●○が物理的な現在地を追跡する許可を求めています]のようなメッセージが表示されたら、[許可]ボタンをクリックしてください。APIが勝手に位置情報を取得することはありません(ただし、一度許可したら、次回以降、許可は求められません)。APIは新しい命令なので、利用する前にまず、ブラウザが対応しているかをチェックしなければなりません。これを行っているのが(1)です。APIには、navigator.geolocationプロパティでアクセスできます。APIに対応していると判断し、以降の処理を行っているわけです(「機能テスト」と言います)。APIが未サポートである場合、サンプルではエラーメッセージをダイアログ表示しています。現在位置は、getCurrentPositionメソッドで取得できます(2)。引数には、位置取得に成功した場合に実行する「成功コールバック関数」(コールバック)を指定します。コールバックの引数posには、取得した位置情報(Positionオブジェクト)が自動的にセットされます。コールバックの中では、一般的に、このPositionオブジェクトを利用して、以降の処理を行うことになるでしょう。サンプルでは、取得した位置情報を表示しています(3)。Positionオブジェクトでアクセスできる情報には、以下のようなものがあります。環境によっては取得できない情報もありますが、その場合、プロパティはnull、NaN、undefinedのいずれかを返します(上の図でも、[方角]の欄が空になっていることが確認できるでしょう)。位置情報(Coordinatesオブジェクト)。WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。