クレコ » Geolocation http://creco.net East or west, home is best. Fri, 27 Nov 2009 13:26:56 +0000 ja hourly 1 http://wordpress.org/?v=3.0 iPhone OS 3.0 のブラウザから使えるようになったGPS現在位置情報をTwitterに投稿するJavaScript http://creco.net/2009/06/17/iphone-os-3_with_w3c_geolocation_api/ http://creco.net/2009/06/17/iphone-os-3_with_w3c_geolocation_api/#comments Wed, 17 Jun 2009 13:09:47 +0000 inagaki http://creco.net/2009/06/17/iphone-os-3_with_w3c_geolocation_api/ iphone

Google Maps API V3 と Gears Geolocation API 使って Android のブラウザで現在位置情報を取得する | クレコ では、Androidのブラウザで現在位置情報取得してTwitterにポストするというJavaScriptを作りました。

今回は、それのiPhone版です。要 iPhone OS 3.0以上なので、まだアップデートされてない方は本日のアップデートを楽しみに待ちましょう。


iPhone OS 3.0 のブラウザ Mobile Safari でGPS現在位置情報が取得できるようになった

Mobile Safari の W3C Geolocation API 対応

ついに iPhone Safari ブラウザから位置情報を取得できるようになります – Cirius Lab. ブログ から知ったのですが、iPhone OS 3.0 に標準搭載されているブラウザ Mobile Safari が W3C の Geolocation API に対応して、ブラウザから JavaScript を用いることによって、GPSの現在位置情報を取得することが可能になりました。

これによって、いままでネイティブアプリでしかできなかったことが、簡単に敷居なく実装することが可能です。

W3CのGeolocation API って？

Geolocation API Specification
W3Cで標準化を進めている、位置情報を取得するためのAPI使用のことです。

位置情報を取得するメソッドには、getCurrentPosition() と watchPosition() があり、前者は現在の位置情報を取得するメソッド、後者は連続した位置情報を取得するメソッドとなっています。

つまり、従来の携帯電話ではできなかった、連続した位置情報を扱うGPSトラッキングなどもJavaScriptを記述するだけで実現できるのです！

実際に現在位置情報をTwitterへポストするJavaScriptを作ってみた

JavaScript ソース

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>GeoPo : Mobile Safari</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

/*
 * GeoPo Encode in JavaScript
 * @author : Shintaro Inagaki
 * @param location (Object)
 * @return geopo (String)
 */
function geopoEncode(location){
    // 64characters (number + big and small letter + hyphen + underscore)
    var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_";

    var geopo = new String();
    var lat = parseFloat(location.lat); // Parse as float
    var lng = parseFloat(location.lng); // Parse as float
    var scale = parseInt(location.scale); // Parse as int

    // Change a degree measure to a decimal number
    lat = (lat + 90) / 180 * Math.pow(8, 10);
    lng = (lng + 180) / 360 * Math.pow(8, 10);

    // Compute a GeoPo code from head and concatenate
    for(var i = 0; i < scale; i++) {
        geopo = geopo + chars.substr(Math.floor(lat / Math.pow(8, 9 - i) % 8) + Math.floor(lng / Math.pow(8, 9 - i) % 8) * 8, 1);
    }
    return geopo;
}

var lat;
var lng;
var latLng;
var geocoder = new google.maps.Geocoder();
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
var watchId;

function update(position) {
    lat = position.coords.latitude;
    lng = position.coords.longitude;
    latLng = new google.maps.LatLng(lat,lng);

    if(!map){
        var options = {
            zoom: 15,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), options);
    } else{
        map.set_center(latLng);
    }

    if(!marker){
        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: "現在地",
        });
        google.maps.event.addListener(marker, 'click', function() {
            stopUpdate()
            geocoding();
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
            startUpdate()
        });
    } else{
        marker.set_position(latLng);
    }
}

function geocoding() {
    // geopo
    var location = new Object();
    location.lat = lat;
    location.lng = lng;
    location.scale = 7;
    var geopo = geopoEncode(location);

    geocoder.geocode({'latLng': latLng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var geocodeAddress;
            for(i=1; i<results.length; i++){
                if (results[i].types.length >= 2 && results[i].types[1] == "political") {
                    if(results[i].formatted_address.indexOf("日本") != -1){
                        geocodeAddress = results[i].formatted_address.substring(2);
                    }else{
                        geocodeAddress = results[i].formatted_address;
                    }
                    break;
                }
            }
            if(geocodeAddress){
                infowindow.set_content('<strong>現在地：</strong><br /><span style="font-size:80%">' + geocodeAddress + '</span><hr /><a href="http://twitter.com/home?status=' + encodeURIComponent(' L:' + geocodeAddress + ' http://geopo.at/' + geopo) + '" target="twitter"><img src="icon_twitter.gif" width="14" height="16" border="0" align="bottom" hspace="5" />TwitterにPOSTする</a>');
                infowindow.open(map, marker);
            } else {
                alert("現在地が取得できませんでした＞＜");
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}

function startUpdate() {
    watchId = navigator.geolocation.watchPosition(update);
}

function stopUpdate() {
    navigator.geolocation.clearWatch(watchId);
}

startUpdate();

</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>

前回の数倍丁寧に解説

前回のAndroid版では説明が省略されすぎて、説明になってなかった反省を踏まえて丁寧に解説。

HTML

前回と同様、Google Maps API V3 を使います。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

これは、iPhoneのためのmeta要素です。地図上でピンチイン、ピンチアウトを使った拡大縮小できるように、user-scalableはnoにして、HTMLでの拡大縮小はできなくしてます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Google Maps API V3のJavaScript読み込みですが、位置情報を取得できるデバイスではsensorパラメータをtrueにします。

<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>

divタグで地図を表示する領域を作成、めいっぱいにするため、縦横100%にし、bodyタグでは余白をなしにするCSS。

うん、丁寧な説明ですね。

GeoPoエンコードライブラリ

ジオポ – 位置情報を短縮して使いやすく

GeoPo（ジオポ）というのは、私が作成したWebサービスで。

ジオポは位置情報を表す緯度・経度を短縮したURLに変換し、受け取る側のブラウザに合わせた地図を表示するウェブサービスで、会員登録なしに誰でも無料で利用できます。

という、Twitterに位置情報を付加したいときに使うといいよ！的なサービス。詳しくは、ジオポの特徴 や 開発者向け情報 を見てね。よかったら、実装してください。

ソース上では、

/*
 * GeoPo Encode in JavaScript
 * @author : Shintaro Inagaki
 * @param location (Object)
 * @return geopo (String)
 */
function geopoEncode(location){
    // 64characters (number + big and small letter + hyphen + underscore)
    var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_";

    var geopo = new String();
    var lat = parseFloat(location.lat); // Parse as float
    var lng = parseFloat(location.lng); // Parse as float
    var scale = parseInt(location.scale); // Parse as int

    // Change a degree measure to a decimal number
    lat = (lat + 90) / 180 * Math.pow(8, 10);
    lng = (lng + 180) / 360 * Math.pow(8, 10);

    // Compute a GeoPo code from head and concatenate
    for(var i = 0; i < scale; i++) {
        geopo = geopo + chars.substr(Math.floor(lat / Math.pow(8, 9 - i) % 8) + Math.floor(lng / Math.pow(8, 9 - i) % 8) * 8, 1);
    }
    return geopo;
}

という GeoPoエンコード ライブラリ部分と、

    // geopo
    var location = new Object();
    location.lat = lat;
    location.lng = lng;
    location.scale = 7;
    var geopo = geopoEncode(location);

呼び出し部分。

lat：緯度、lng：経度、scale：縮尺を渡して、geopoというジオポコードの文字列が返ってくる。

位置情報の取得制御

W3CのGeolocation APIを使って、現在位置情報を取得する。

function startUpdate() {
    watchId = navigator.geolocation.watchPosition(update);
}

function stopUpdate() {
    navigator.geolocation.clearWatch(watchId);
}

startUpdate();

ここでは、watchPosition() を使う。というのも、iPhoneでは getCurrentPosition() がうまく動かなかった。また、最初の1回だけの位置情報取得では位置情報の精度がかなり荒いので、連続して取得し精度が高くなった段階で、その位置情報を採用するという形にしたかったというのもある。

ここで、startUpdate() と stopUpdate() とわざわざ関数にしているのは、後々に取得動作の制御したいためです。

位置情報の加工と地図の表示

位置情報が取得できたときに呼ばれる update() では、位置情報を加工して、地図を表示するようにします。

var lat;
var lng;
var latLng;
var geocoder = new google.maps.Geocoder();
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
var watchId;

function update(position) {
    lat = position.coords.latitude;
    lng = position.coords.longitude;
    latLng = new google.maps.LatLng(lat,lng);

    if(!map){
        var options = {
            zoom: 15,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true,
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), options);
    } else{
        map.set_center(latLng);
    }

    if(!marker){
        marker = new google.maps.Marker({
            position: latLng,
            map: map,
            title: "現在地",
        });
        google.maps.event.addListener(marker, 'click', function() {
            stopUpdate()
            geocoding();
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
            startUpdate()
        });
    } else{
        marker.set_position(latLng);
    }
}

position.coords.latitude には緯度、 position.coords.longitude には経度

  interface Coordinates {
    readonly attribute double latitude;
    readonly attribute double longitude;
    readonly attribute double altitude;
    readonly attribute double accuracy;
    readonly attribute double altitudeAccuracy;
    readonly attribute double heading;
    readonly attribute double speed;
  };

他にも、altitude：高度、accuracy：水平方向の精度、altitudeAccuracy：垂直方向の精度、heading：方向、speed：速度 といった属性があります。iPhone 3G S では、コンパスによって方向なども取得できるかもしれません。iPhone 3Gでは、方向には null値、速度には 0 が入るようです。

map や marker は、初回はインスタンスを生成し、2回目以降の呼び出しでは地図は中心地への移動、マーカーは位置情報取得値への書き換えを行います。

marker の初回で、イベントリスナーを作成。上のイベントは、マーカーをクリックしたら位置情報取得動作を止めて情報ウィンドウ（ geocoding() で現在位置の住所やTwitterへポストするアンカーを記載）の表示、下のイベントは、情報ウィンドウを閉じたら位置情報取得動作の再開。

ここで、位置情報の取得動作を操作してるのには次の理由があります。

  1. 情報ウィンドウが表示されるときに、位置情報が更新されて地図表示が移動されたりすると使い勝手が悪い。
  2. 位置情報の取得のたびに情報ウィンドウの中身を更新すると大変（逆ジオコーディングとか）。
情報ウィンドウの更新（逆ジオコーディング）

現在位置の住所取得（逆ジオコーディング）とジオポコードの作成、Twitterへポストするためのアンカーを情報ウィンドウの中に書き込むための処理を geocoding() でやります。

function geocoding() {
    // geopo
    var location = new Object();
    location.lat = lat;
    location.lng = lng;
    location.scale = 7;
    var geopo = geopoEncode(location);

    geocoder.geocode({'latLng': latLng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var geocodeAddress;
            for(i=1; i<results.length; i++){
                if (results[i].types.length >= 2 && results[i].types[1] == "political") {
                    if(results[i].formatted_address.indexOf("日本") != -1){
                        geocodeAddress = results[i].formatted_address.substring(2);
                    }else{
                        geocodeAddress = results[i].formatted_address;
                    }
                    break;
                }
            }
            if(geocodeAddress){
                infowindow.set_content('<strong>現在地：</strong><br /><span style="font-size:80%">' + geocodeAddress + '</span><hr /><a href="http://twitter.com/home?status=' + encodeURIComponent(' L:' + geocodeAddress + ' http://geopo.at/' + geopo) + '" target="twitter"><img src="icon_twitter.gif" width="14" height="16" border="0" align="bottom" hspace="5" />TwitterにPOSTする</a>');
                infowindow.open(map, marker);
            } else {
                alert("現在地が取得できませんでした＞＜");
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}

前回のAndroid版とほぼ同じです（多少変えたってこと）。

逆ジオコーディングした結果で、郵便番号や道路名ってのをフィルタリングし、formatted_address には「日本」という文字が入るのが気にくわないので、「日本」を取り除いてやる。という内容。

実装して iPhone OS 3.0 で動作させてみる

実際に動作させてみる。

GeoPo : Mobile Safari ＠inagaki.co.uk に作ったものをおいたので、自由に試してみてください。ソースコードも自由に使ってください。

iPhoneでの位置情報利用の確認

1 2

初回のみSafariでの位置情報利用と、ドメイン単位での位置情報利用の確認があります。

#これ、ドメイン単位の位置情報利用確認ってリセットする方法あるんですかね？

地図と情報ウィンドウの表示

3 4

ブックマークなどからURLを読み出せば、そのまま現在位置を取得して地図を表示するという一連の動作ができます。

そして、この地図はスマートフォンに最適化された Google Maps API V3 で作成していますので、まるでネイティブアプリのような感覚でシームレスなスクロールが可能。

マーカーをクリックすることで、情報ウィンドウを表示。このときに、位置情報取得動作をストップさせて、逆ジオコーディングを行い住所を取得。

住所表示の下にある、アンカーをクリックすることで別ウィンドウが立ち上がりTwitterへ現在地情報のついたポストが行えます。

情報ウィンドウの右上の×印をクリックすれば、情報ウィンドウは非表示になり、位置情報取得取得動作を再開させます。現在地が移動した場合はリロードしなくても、情報ウィンドウの開閉だけで位置情報取得のコントロールができます。

Twitterへ現在地情報の投稿

5 6

アンカーをクリックするとTwitterの投稿のために新しいウィンドウが立ち上がります。このときに、Twitterへログインされてない場合は、ログイン画面となるので、ログインを行ってください。

また、iPhoneからTwitterを使用する場合、デフォルトではモバイル版の画面表示となっています。しかし、モバイル版の画面表示ですと、アンカーをクリックした際に伝える住所やジオポURLが反映されないので、ページ下部にある「スタンダード版で見る」をクリックし、スタンダード版でTwitterを表示させてください。

#これ、回避方法を知ってる方いましたら教えてください

スタンダード版では、いまなにしてる？のテキストエリアの中に、住所とジオポURLが反映されている状態となります。そこから、メッセージを加えたり、ジオポURLの縮尺精度変更操作を行うことができます。

感想、まとまらないまとめ

連続した位置情報が取得できるのは熱いですね！！でも、iPhoneも熱くなります ＞＜

位置情報を連続取得させるのは非常にバッテリーを消費します、ほどほどにしましょう。

今までGPSロガーなどがないとGPSトラッキングできなかったのですが、それがJavaScriptだけで実現できるのは魅力的です。私もiPhone単体でできるGPSトラッキングサービスを早速作りたいと思っていますよ。

また、すでにあるGPSトラッキングサービスでも簡単（上のソースを数行いじるだけ）に実現できるので、今ココなう！(β) などの人気のあるサービスが対応すれば一気に対応端末が増えるようになるんじゃないでしょうか？位置情報を使うことの面白さがいろんな人に伝わってくれるとうれしいですね。

]]> http://creco.net/2009/06/17/iphone-os-3_with_w3c_geolocation_api/feed/ 4 Google Maps API V3 と Gears Geolocation API 使って Android のブラウザで現在位置情報を取得する http://creco.net/2009/06/11/google_maps_api_v3_with_gears_geolocation_api/ http://creco.net/2009/06/11/google_maps_api_v3_with_gears_geolocation_api/#comments Thu, 11 Jun 2009 07:49:48 +0000 inagaki http://creco.net/2009/06/11/google_maps_api_v3_with_gears_geolocation_api/ 先日のGoogle Developer Day 2009 にて、GoogleさんからAndroid携帯である GDD Phone をいただいたので、早速Androidライフを楽しんでる毎日です。素敵なオモチャをありがとうございます！

ネイティブアプリの地図でGoogle Latitudeをいぢりたおしたりしてるんですが、地図大好きっ子としては自分で位置情報を活用したいところ。

そんな折、ジークルーの佐々木さんから

@shinagaki 自分が今日どこを歩いたかが履歴でMapに表示されるAndroidアプリって知らない？

って遠まわしに作れって言われた気がしたので、Android界隈の位置情報について調べてみる。

Androidで位置情報を取得するにはどうすんの？

調べてみたけど、ネイティブアプリでの情報しかなくて、実装が楽にできそうなブラウザでのAPI動作状況についてのサンプル例がなかった。

ネイティブアプリでは、Maps External Library – Google Projects for Android に情報あるから、ネイティブアプリ作る人は見るといいよ。僕も、あとで見る。

Androidの搭載しているブラウザに、iPhone OS 3.0 のSafariブラウザみたくW3CのGeolocation APIをサポートして、ブラウザからGPS位置情報を取得できることを期待してたんですが、結果から言うとダメ。

ですが！Androidのブラウザ「Chrome Lite」はGoogle Gearsを搭載しているため、ひょっとしたらGearsのGeolocation API使えるかも！？ と思って実験。

Google Gears での位置情報取得

Geolocation API – Gears API – Google Code

サンプルのとおりに、 gears_init.js をおいて、

<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var geo = google.gears.factory.create('beta.geolocation');

function updatePosition(position) {
  alert('Current lat/lon is: ' + position.latitude + ',' + position.longitude);
}

function handleError(positionError) {
  alert('Attempt to get location failed: ' + positionError.message);
}

geo.getCurrentPosition(updatePosition, handleError);
</script>

と書くだけで、位置情報取得できた！簡単。

Google Maps API V3 を使って地図表示

それに、Google Maps API V3 を組み合わせる。

The Google Maps API V3 – Google Maps JavaScript API V3 – Google Code

Google Maps API V3 ってのは、今までのMaps APIで効率が悪かったり、スマートフォンに最適化されてなかった部分を改善するため、一から書き直したAPIで、今までのMaps APIと書き方が異なる。

んでも、やってることは同じだし、まだ V3のほうができることが少ないので理解は早いと思います。

サンプルとしては、

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

これで、全画面の地図表示。

  • APIキーがいらない → Open Socialなアプリ作る場合に問題だった、ドメインごとにAPIキー発行する手間がなくなる。
  • スマートフォンに対応 → iPhoneとAndroidのUIにあわせてコントローラーを配置してくれるし、地図の描画までが早い！

だから、iPhoneのネイティブアプリ作ってて地図周りだけ、UIWebView使ってるっていう人も恩恵あるんじゃないかな？

実際に現在位置をTwitterにPOSTするJavaScriptを作ってみた

Google Maps API V3 with Gears Geolocation API ＠inagaki.co.uk

実際にAndroidで試してみてください。

中身はコチラ。

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API V3 with Gears Geolocation API</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">

/*
 * GeoPo Encode in JavaScript
 * @author : Shintaro Inagaki
 * @param location (Object)
 * @return geopo (String)
 */
function geopoEncode(location){
    // 64characters (number + big and small letter + hyphen + underscore)
    var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_";

    var geopo = new String();
    var lat = parseFloat(location.lat); // Parse as float
    var lng = parseFloat(location.lng); // Parse as float
    var scale = parseInt(location.scale); // Parse as int

    // Change a degree measure to a decimal number
    lat = (lat + 90) / 180 * Math.pow(8, 10);
    lng = (lng + 180) / 360 * Math.pow(8, 10);

    // Compute a GeoPo code from head and concatenate
    for(var i = 0; i < scale; i++) {
        geopo = geopo + chars.substr(Math.floor(lat / Math.pow(8, 9 - i) % 8) + Math.floor(lng / Math.pow(8, 9 - i) % 8) * 8, 1);
    }
    return geopo;
}

var geo = google.gears.factory.create('beta.geolocation');

function displayMap(position) {
    var geocoder = new google.maps.Geocoder();
    var latLng = new google.maps.LatLng(position.latitude,position.longitude);
    var options = {
        zoom: 15,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), options);

    var geocodeAddress;

    var infowindow = new google.maps.InfoWindow();

    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title:"You are here."
    });

    // geopo
    var location = new Object();
    location.lat = position.latitude;
    location.lng = position.longitude;
    location.scale = 7;

    var geopo = geopoEncode(location);

    if (geocoder) {
        geocoder.geocode({'latLng': latLng}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                for(i=1;i<results.length;i++){
                    if (results[i].types.length >= 2 && results[i].types[1] == "political") {
                        if(results[i].formatted_address.indexOf("日本") != -1){
                            geocodeAddress = results[i].formatted_address.substring(2);
                        }else{
                            geocodeAddress = results[i].formatted_address;
                        }
                        break;
                    }
                }
                if(geocodeAddress){
                    infowindow.set_content('<strong>現在地：</strong><br /><span style="font-size:80%">'+geocodeAddress+'</span><br /><strong>GeoPo：</strong><br /><span style="font-size:80%">http://geopo.at/'+geopo+'</span><hr /><a href="http://twitter.com/home?status='+encodeURIComponent(' L:'+geocodeAddress+' http://geopo.at/'+geopo)+'" target="twitter">TwitterにPOSTする</a>');
                    infowindow.open(map, marker);
                } else{
                    alert("現在地が取得できませんでした＞＜");
                }
            } else {
                alert("Geocoder failed due to: " + status);
            }
        });
    }

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

function handleError(positionError) {
    alert('Attempt to get location failed: ' + positionError.message);
}

geo.getCurrentPosition(displayMap, handleError);

</script>
</head>
<body style="margin:0px; padding:0px;">
  <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>

 

こんな風に現在位置が取れるよ

１．さきほどのURLにアクセスする

device01

すると、Gearsで「現在地情報にアクセス」しますかというメッセージがでるので、OKを押してください。ドメインごとの許可ですかね？

２． 現在地の地図を表示

device02

Gearsからの位置情報をMaps API V3で地図表示。ちゃんと、拡大縮小コントローラーもAndroidなUIになってる。

そして、Maps API V3の逆ジオコーディングを使って、現在住所を取ってくる。

ついでに、GeoPoのエンコードもしてるよ！

一番下のリンクがTwitterにポストするためのリンク。

３．TwitterにPOST内容を渡す

device03

http://twitter.com/home/?status=[ポスト内容] で渡すことができるから、単純に URLエンコードしたものを渡してるだけ。

ただ、このようなTwitterのパラメータ渡しは、Twitterの表示モードがモバイルになってると無効になるみたいなので、あらかじめスタンダードに変更しておいてください。

ブラウザでのGeolocation APIについて

実は、Google Gearsに対応していれば、ChromeとかFirefox（要アドオン）でも上記のURLで現在地の位置情報が取得できる。

正確にいうと、IPから推測した位置情報なので正しくはないかもしれないけど、JavaScriptだけの実装で簡易的に位置情報が取れるのは素敵ですね。

将来的には、W3CのGeolocation APIが載って、開発者側はハードウェア、ソフトウェアの差異を何も考えなくて位置情報を使ったコンテンツに注力できるっていう世界になってくれると幸せです。

Windows 7 では、OSレベルにGeolocation APIがあるそうなので、そちらも楽しみ… その前にIEをなんとかしてｋ（ｒｙ

]]> http://creco.net/2009/06/11/google_maps_api_v3_with_gears_geolocation_api/feed/ 4