簡単というのは、以前から自作のPythonクライアントを自分のライブトラッキングサーバ用に作っていたので、それを今ココなう！のAPI仕様にあわせるだけだったり。

確認してないですが、Python実行環境を導入して、スクリプトを少し改造さえすればMacやLinuxなどでも使えると思うので、もしよかったら自由にお使いください。
あと、自分のGPSロガーでしか確認していません、ごめんなさい。

ソース

#!/usr/bin/python
# -*- coding: utf-8 -*-

# pySerial + Win32 Extensions(optional)
import sys, os, os.path, serial, urllib, urllib2, socket, thread, time, winsound

# Httpのタイムアウト値
socket.setdefaulttimeout(10)

# シリアルポートの設定
serialPort = 'COM6'

# 今ココなう！のユーザーIDとパスワード
userId = 'USERID'
userPassword = 'USERPASSWORD'

saveFlag = 1
markerType = 0

tryCount = 0
baseTime = 0

# NMEAセンテンスの読み取り
def getNmeaSentence():
    global baseTime

    while True:
        try :
            buffer = ser.read(1000)
        except :
            print "error"
            return "error"

        if int(time.time()) + baseTime - time.time() > 0:
            time.sleep(int(time.time()) + baseTime - time.time() )

        # タイミング調整
        if buffer[0:6] != '$GPGGA':
            time.sleep(0.1)
            if baseTime > 0.9:
                baseTime -= 0.9
            else:
                baseTime += 0.1
            print "clock-timing adjustment...\n"
            return

        # GGAセンテンスの測位時刻の秒一桁が0
        if buffer[12:13] == '0':
            lines = buffer.split("\r\n")

            data = [''] * 12

            for line in lines:
                nmea = line.split(',')

                if nmea[0] == '$GPGGA':
                    data[0] = nmea[1] # 測位時刻
                    data[1] = nmea[2] # 緯度
                    data[2] = nmea[3] # 北緯・南緯
                    data[3] = nmea[4] # 経度
                    data[4] = nmea[5] # 東経・西経
                    data[5] = nmea[6] # GPS測位状態
                    data[6] = nmea[7] # 受信衛星数
                    data[7] = nmea[8] # HDOP
                    data[8] = nmea[9] # 高度
                elif nmea[0] == '$GPRMC':
                    data[9] = nmea[7] # 対地速度
                    data[10] = nmea[8] # 進行方向
                    data[11] = nmea[9] # 測位日付

            # GPSが受信不能
            if data[5] == '0':
                print "not receivable GPS data..."
                winsound.PlaySound("SystemQuestion", winsound.SND_ALIAS)
                return

            args = (data,)
            thread.start_new_thread(putGpsData, args)

# Post
def putGpsData(args) :

    global tryCount

    print "post..."

    gpsTime = time.strftime("%Y-%m-%dT%H:%M:%S", time.localtime())
    gpsLatitudeD = int(float(args[1]) / 100)
    gpsLatitudeM = (float(args[1]) - gpsLatitudeD * 100)
    gpsLatitude = gpsLatitudeD + gpsLatitudeM / 60
    if args[2] == 'S':
        gpsLatitude *= -1
    gpsLongitudeD = int(float(args[3]) / 100)
    gpsLongitudeM = (float(args[3]) - gpsLongitudeD * 100)
    gpsLongitude = gpsLongitudeD + gpsLongitudeM / 60
    if args[4] == 'W':
        gpsLongitude *= -1
    gpsSpeed = float(args[9]) * 1.852 # knotをkm/hに変換

    params = {
        "time" : gpsTime,
        "lat" : gpsLatitude,
        "lon" : gpsLongitude,
        "gpsq" : args[5],
        "gpsn" : args[6],
        "gpsh" : args[8],
        "gpsd" : args[10],
        "gpsv" : gpsSpeed,
        "save" : saveFlag,
        "t" : markerType,
    }

    topLevelUrl = 'imakoko-gps.appspot.com'
    url = 'http://imakoko-gps.appspot.com/api/post'
    passMan = urllib2.HTTPPasswordMgrWithDefaultRealm()
    passMan.add_password(None, topLevelUrl, userId, userPassword)
    authHandler = urllib2.HTTPBasicAuthHandler(passMan)
    opener = urllib2.build_opener(authHandler)
    urllib2.install_opener(opener)

    try:
        urllib2.urlopen(url, urllib.urlencode(params))
    except urllib2.HTTPError, e:
        winsound.PlaySound("Notify", winsound.SND_ALIAS)
        print e
    except urllib2.URLError, e:
        winsound.PlaySound("Notify", winsound.SND_ALIAS)
        print e

    tryCount = tryCount + 1

    print tryCount
    print params
    print "\n"

# シリアル接続
def connect() :
    global ser, baseTime

    try:
        ser = serial.Serial(serialPort, 38400, bytesize=8, parity='N', stopbits=1, timeout=0.9, xonxoff=0, rtscts=0)
    except serial.SerialException, e:
        print e

    baseTime = time.time() - int(time.time());

    while True:
        if getNmeaSentence() == "error":
            ser.close()
            return

    ser.close()

# メインループ
while True:
    connect()
    time.sleep(5)
    print "reconnect..."

解説

導入するもの

• Python実行環境
• pySerial
• Win32 Extension（場合によっては必要ないかも）

やっていること

1. メインでGPS接続試行でぐるぐる
2. GPSにシリアル接続（ボーレートとかは調節してね。なんでタイムアウトが0.9なのかは謎）
3. 1秒ごとにNMEAセンテンスを読み取る。読み取るタイミングを調節
4. 調節がうまくいったら、10秒ごとにGGAとRMCのセンテンスを読み取る
5. BASIC認証で今ココなう！APIにPOSTする

ぼくの場合、自転車での使用を想定していて、メッセージを目視することはできないので、なんらかのエラーが起きた場合に視覚以外で知る必要があります。なので、GPS情報が取得できない場合と、POSTがうまくいかなかった場合はそれぞれサウンドがなるように設定しています。

以上です。

Pythonがある程度わかる人前提なので、そんなに説明することないですね。逆に、なんでこんなシリアル接続パラメーターなのかとか、タイミングの取り方でもっとスマートなやり方とか、スレッド使うときにタプルで引数を渡すのはなんで？とか教えてもらいたかったり。

今ココなう！実装済み環境

• Android Chrome Lite + Google Gears、各種ブラウザ + Google Gearsアドオン
• iPhone Mobile Safari (OS 3.0以上)、Firefox 3.5以上、Safari 3.0以上
• Python New!

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での位置情報利用の確認

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

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

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

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

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

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

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

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

Twitterへ現在地情報の投稿

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

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

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

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

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

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

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

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

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

ネイティブアプリの地図で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にアクセスする

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

２． 現在地の地図を表示

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

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

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

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

３．TwitterにPOST内容を渡す

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をなんとかしてｋ（ｒｙ

緯度経度で場所を指定され、その場所に行けばお宝がGETできるというゲーム、ジオキャッシングに挑戦してみた（＋PeerCastで生中継）。

Yatsuomote mountain

西尾市の北東に位置する八ツ面山の山頂付近にあるキャッシュ。

20080809 西尾ジオキャッシング1 from Inagaki on Vimeo.
自転車で現場へ向かうまで

20080809 西尾ジオキャッシング2 from Inagaki on Vimeo.
八ツ面山でジオキャッシングをする！

The secret base of children

西尾市の市街にある西尾市歴史公園内のキャッシュ。

20080809 西尾ジオキャッシング3 from Inagaki on Vimeo.
八ツ面山のジオキャッシングの続きと歴史公園への移動（途中に寄ったコンビニでは編集をいれてます）

20080809 西尾ジオキャッシング4 from Inagaki on Vimeo.
歴史公園でジオキャッシング！

で。

残念ながら両方ともキャッシュの獲得ならず。本当に悔しい。

でも、経験したことのない・することのない機会を作ってくれるジオキャッシングというゲームは面白いね。西尾にこんなところがあったのかという発見だけでも、十分すぎるほどの収穫です。

次回やる場合は、スコップなどの掘る物・軍手・虫除けは必須。

さて、どこに行こうかな。

ぶっちゃけていうと、素のままではできることが少なく、最初からいろんな関数があたえられてるPHPと比べると大変なんだけど、シンプルさとソースの見やすさから好きになりそうな言語。わかりやすいし。

それで、GPSとのシリアル通信のプログラムなんだけど、
今まで readline() で読んでたところを、timeout値を1秒近辺（後述）にし read() で取ってやるとつまりもなく、非常にスムース

GPSからの出力データは1秒おきにどばっとくる。そこで、timeout値は0.9秒にしてやって、データがシンクロできるようにとPythonの計算時間を考慮して、一定のコンマ秒で read() する時間を逐次調節するように

ソースは以下の通り

#!/usr/bin/python

import sys, os, os.path, serial, urllib, urllib2, socket, thread, time

socket.setdefaulttimeout(10)

serialPort = 'COM6' #EeePC usb
#serialPort = 'COM3' #EeePC bluetooth
url = 'hogehoge'

tryCount = 0
baseTime = 0

def getGprmcSentence():
	global baseTime

	while True:
		try :
			buffer = ser.read(1000)
		except :
			print "error"
			return "error"

		if int(time.time()) + baseTime - time.time() > 0:
			time.sleep(int(time.time()) + baseTime - time.time() )

		if buffer[0:6] != '$GPGGA':
			print 'sync...'+"\n"
			time.sleep(0.1)
			if baseTime > 0.9:
				baseTime -= 0.9
			else:
				baseTime += 0.1

		if buffer[12:13] == '0':
			lines = buffer.split("\r\n")
			data = []

			for line in lines:
				nmea = line.split(',')

				if nmea[0] == '$GPGGA':
					if len(nmea) == 15 and nmea[14][0:1] == '*':
						data.append(nmea[9])
				elif nmea[0] == '$GPRMC':
					if len(nmea) == 13 and nmea[12][1:2] == '*':
						data.append(nmea[3])
						data.append(nmea[5])
						data.append(nmea[7])
						data.append(nmea[8])
						data.append(nmea[9])
						data.append(nmea[1])

			args = (data,)
			print "thread start..."
			thread.start_new_thread(putGpsData, args)

def putGpsData(args) :

	global tryCount

	params = {
	    "date" : args[5],
	    "time" : args[6],
	    "latitude" : args[1],
	    "longitude" : args[2],
	    "altitude" : args[0],
	    "speed" : args[3],
	    "heading" : args[4],
	}

	try:
		urllib2.urlopen(url, urllib.urlencode(params))
	except urllib2.HTTPError, e:
		print e

	tryCount = tryCount+1

	print tryCount
	print args
	print "\n"

def connect() :
	global ser, baseTime

	try:
		ser = serial.Serial(serialPort, 38400, bytesize=8, parity='N', stopbits=1, timeout=0.9, xonxoff=0, rtscts=0)
	except serial.SerialException, e:
		print e

	baseTime = time.time() - int(time.time());

	while True:
		temp = getGprmcSentence()
		if temp == "error":
			ser.close()
			return

	ser.close()

while True:
	connect()
	time.sleep(5)
	print "reconnect..."

んで、あとはGPSのデータから読み取ったデータにおいて10秒おきにスレッドでPUTしてやる。

そのPUTもhttpのタイムアウト値が10秒以上超してしまうと、整合性があわなくなるので、httpのタイムアウト値も10秒に設定

以前は、NMEAフォーマットのRMCセンテンスだけしかとってなかったので高度が取得できなかったけど、GGAセンテンスも読み取って高度をゲットや！

最後に、USBやBluetoothが途中に抜かれたり、通信エラーしても復帰できるように例外処理からsleep()かけて5秒後に復帰処理するように

PHPのほうは、Ajaxによる更新時間とGPSデータの更新時間が近すぎるとタイミングによってデータの2重取得や取得逃しが発生するので、GPSデータの更新時間から5秒後に更新する（実際にはサーバ時間で秒数の一桁が5秒のとき・・・サーバ時間が正しいことが前提だけどね）ように初回Ajax更新時間を調節

いろんなところにいって早く試したいなｗ

面倒なんで、5秒おきにシリアルを受信しにいって、データが取れたら切断するというふうに改良したんだけど、今度はBluetoothでの通信やりとりがせいいっぱいみたいで、GPSロガー本体もオンオフ繰り返して、とっても苦しそう。

次に、POSTする処理をスレッドにすることでシリアル入力を楽にさせよう大作戦を行ったのだが、まったく無意味。

http://ymasuda.jp/python/pyserial/pyserial.html

ヒントを探すためにpySerialのREADMEを見ると、

flushInput() # 入力バッファをフラッシュ

おお、これだ！

今度はいい感じで5秒おきを守ってリアルタイムに動いてくれてる。

まず、最初にドキュメント見るってことを肝に銘じます。

もう、Webカメラってもんじゃないんですね。そのままデジカメ・ビデオカムの代わりとして使ってもいい画質の精細さと、オートフォーカス・光量などの自動調節が素晴らしい。普通、暗いところでカメラ映そうとしても、映らないかISO感度が上がってノイズの乗ったひどい画質になるんだけど、このカメラは余裕で人間の目を同じように捉えてくれる。

こいつをQVGAで200kbpsという申し訳ないエンコードで使ってもったいないように感じるんだけど、動画の動きが激しくないときにコイツの本領が発揮されてるんで、よかったら動画でご確認ください。

今日は暑かったのでエアコン効いてる車で車載動画っていうのをテストとして撮ってみた。バックミラーにWebカメラのクリップを挟むだけで固定できちゃって楽チンすぎる。

一方でGPSのテスト。昨日の夜に作った、

• GPSロガーからの情報をシリアル経由（Bluetoothをシリアルでエミュレート）でPythonでこしらえた実質5行くらいのプログラムでサーバにPOSTしてやり
• サーバ側ではPOSTされたデータを単純に追加書き込みするPHPプログラム（どうせならPythonで作れよｗ）
• 蓄積されたデータをGoogleMapsのPolyLineとMarkerに変換して表示するPHPプログラム（どうせなｒ）

を実際に動いて試す。

んで、思い通りのものが、簡単にできたのでオワリ。

1秒おきのデータはポイント数が大きくなりすぎるとか、自動で更新されないのがダサイとか、アイコンは自転車のアイコンにして進行方向に向いた形にしたい（API見たけど、回転のパラメータないから方向別に用意せなあかん）よねとか あるので、ちょっとずつ面白いものにしていきたいな。

今日はいっぱい通販で買った物が届く日でした、合計4つ。まずはGPSロガーから。

GPSっていうとGARMINとか有名だけど、GPSロガーというガジェットが存在するなんて先日まで知らなかったの。少年時代からGARMINが欲しくて憧れて、代わりにauのGPS携帯をGETして、gpsOneコマンドを解析したりして満足しちゃって、あれだけ欲しかったGARMINは1回も買ってない。

位置情報にはまってたとき、auのGPS携帯のJavaアプリを作って、サーバと連動したリアルタイム位置表示システムを作ったりしたけど、結局電池消費がすごくてどうしようもなかった記憶。それと同じような、GPSログを刻々と記録し続けるのが、このGPSロガー。本体に10万以上のポイントを記録できて単三電池で12時間も動くすごいやつ。

早速つかってみた。 ・・家の中でつかっても面白くもなんともない。

PCとの接続はUSBかBluetoothで疑似シリアルポートとして繋ぐ。ログの転送や変換とか一通り使い勝手を試す。まぁ、これが普通の使い方。やりたかったのは次。

シリアルポート経由でリアルタイムの位置情報が取れる。それによって、カシミールとかでリアルタイムナビができるわけ。この位置情報をネットにアップすれば、以前やってたauのシステムがGPSロガーでもできるだろう。

既に、先人の方がやってて、その方法を試してみた。
GooPsというGPSデータをGoogleEarthに渡すソフトがあるんだけど、そのオプションでGpsGate.com（位置情報を公開するWebサービス）にデータを送る設定があって、それをポチッとすれば簡単に自分の現在位置情報が全世界で見られるようになる。オッケー完璧！

だけど、なんかものたんない。

どうせだから、位置情報をサーバ側で保存したいし、将来的にストリームサーバで動画に位置情報レイヤーを合成するとかもやってみたい。それには、独自でシリアル叩いて、その位置情報を自分のサーバにアップするプログラムが必要なの。

処理的にはたいしたことやらないから、LightWeightなのでサクッと作れて、シリアルのモジュールがあるものってところで検討したところ、

GPSリアルタイムトラッキングしてみた
http://d.hatena.ne.jp/hidep22/20080503/1209815231

おっ、なんかよさそう。Pythonってのがそそる。前に横浜でのGoogleカンファレンスで話をきいたGoogle Map for APIも使えるかも！！

そんなこんなで、現在Pythonの勉強がてら、プログラム作成中。ひさびさにやる気モード。