HTML5 とハートブレイク・カフェ(geolocation)

Article
06/02/2011

最近、Visual Web Developer 2010 を使って JavaScript を記述していくデモをする機会が増えてきたので、せっかくだから HTML5 とか CSS3 という「キテる感」満点の技術を盛り込んだデモを作っておこう、と思い立ち架空の喫茶店のページを作っています。

喫茶店の名は、「ハートブレイク・カフェ」。

お店のコンセプトは、簡単にいうと「休憩所」。格好つけていうと「傷ついた街の天使が羽根を休める場所」。

香り高いコーヒーと、美味しいお食事、そして厳選した音楽で皆様のお越しを、…..ってことはどうでもよくて、今現在実装してある HTML5 と CSS3 を使用した機能についてメモがてら書いて行こうと思います。

ちなみに、こんな感じのページです。

図 : トップページ

図 : メニューページ

図 : 所在地ページ

図 : 現在位置の表示

デモページは、1 個の HTML ファイルで完結していますが、jQuery UI のタブコントロールを使用して表示を分割しています。

使用されている Web 技術 (?) は以下の通りです。

タイトル文字	–––	Web フォント (CSS3)
メニューバーの装飾	–––	radius (CSS3)
タブによる表示分割	–––	tab (jQuery UI)
スライドするメニュー	–––	slideToggle (jQuery)
現在位置の取得と地図の表示	–––	geolocation API(HTML5) + BingMap API

で、今回はこの中から Web フォントについて書こうかと思ったのですが、ついつい Twitter で「HTML5 の geolocation と BingMap API を組み合わせたサンプル…」とつぶやいてしまったので、geolocation について書きたいと思います。

HTML5 の geolocation

HTML5 には、現在の位置情報を取得するための geolocation API が用意されています。

この位置情報は、PC、携帯電話のようなクライアント・デバイスからではなく、接続しているルーター等のネットワーク機器から取得(※)するため GPS などが付属していない PC でも使用することができます。

(※) 取得されるのは、あくまでも「ネットワーク機器の位置情報」ですので、位置情報が返すネットワーク機器が離れた場所にあると、当然のことながら全然違う位置取得されます。

HTML5 をサポートしている Web ブラウザーでは、geolocation はおなじみの navigator オブジェクトから提供されます。

メソッドは、現在のところ getCurrentPosition、watchPosition、clearWatch が用意されています。

各メソッドのインターフェースについては、W3C に解説があるのでそちらをご覧ください。

W3C - Geolocation interface
https://dev.w3.org/geo/api/spec-source.html#geolocation_interface

geolocation を使用した位置情報の取得

geolocation を使用して位置情報を取得するには、geolocation の持っている getCurrentPosition メソッドを呼出し、その引数として指定したコールバック・ルーチンに入ってくる引数で取得します。

以下は取得した緯度、経度を alert で表示する JavaScript のサンプルです。

function getLocation() {
     //位置情報の取得
     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(currentLocation);
     }
     else {
         alert("Geolocationがサポートされていません。");
     }
}

//コールバックルーチン
function currentLocation(position) {
//緯度と経度を表示
alert(position.coords.latitude + ", " + position.coords.longitude);
}

これで緯度、経度取得できますが、実際のところ人間にとってはただの数値データにすぎませんので、「で、この数字どうすんの？」ということになります。

そこで私がオヌヌメ、ちがった、オススメしたいのが BingMap API です。

BingMap API とは？

BingMap API は、名前のとおり BingMAP の機能をプログラムから利用するためのライブラリーです。

BingMap API の現在の最新バージョンは 7.0 ですが、リファレンス的には、6.3 のほうがサンプルのソースが見れるのでお気に入りです。

Maps AJAX Control 7.0 ISDK
https://www.bingmapsportal.com/ISDK/AjaxV7

Bing Maps Interactive SDK for AJAX v6.3.
https://www.microsoft.com/maps/isdk/ajax/

一見すると、使うのが面倒そうな BingMap API ですが、ぜんぜんそんなことはなくて、たとえば前述の geolocation で取得した位置情報を 3D 地図表示するコードは以下のようになります。表示モードの指定をしなければ、BingMap API の部分はわずか 3 行の記述で OK です。

//BingMap API の参照
<script src="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5&mkt=ja-jp"
        type="text/javascript"></script>
<script type="text/javascript">
//位置情報の取得
function getLocation() {
     if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(currentLocation);
      }
      else {
           alert("Geolocationがサポートされていません。");
       }
}

function currentLocation(position) {
     //VEMap のコンストラクタに地図を表示する <div> タグの ID を指定
     map = new VEMap('currentMap');
    //取得した緯度と経度を VELatLong 関数の引数に指定
     map.LoadMap(new VELatLong(position.coords.latitude, position.coords.longitude), 18);
    //3D 表示の指定。2D で良ければ書かなくても OK
     map.SetMapMode(VEMapMode.Mode3D);
     map.AddPushpin(map.GetCenter());
}
</script>

<div id='currentMap'></div>

BingMap API には、単純に地図を表示する以外にもさまざまな機能がありますので、HTML5 の geolocation API と組み合わせていろいろ作成してみてください。

■

次回は Web フォントについて書きたいとおもいます。

Clicky

HTML5 とハートブレイク・カフェ(geolocation)

Additional resources