Google Latitudeの代わりを作ってみた
2013年8月9日をもって、Google Latitudeのサービスが終了しました。
今までは、このサービスを使って、自分がどこにいるのかブログパーツで知らせていました。
GPS内蔵の携帯やスマホを通じて(セキュリティ上から手動で)現在地を更新し、ブログパーツ化したGoogleマップの上にその現在地(最終更新地)が表示されるので、非常に便利でした。
しかし、利用者が少なかったのか、儲からないであろうこの事業からは手を引いたようです。
そこで、何とか代替品を作るべく、とりあえずiPhoneで動く(現在地更新ができる)ことを目標に、立ち上がりました。
まず現在地を取得する方法ですが、最近のブラウザは標準で現在地(つまり緯度・経度など)を取得できるようです。
これはHTML5のGeolocation APIという仕様によるものらしく、パソコンだとIPアドレスなどから取得するので不正確ですが、iPhoneなどではGPSからなので、かなり正確な現在地を取得してくれます。
つまり、iPhoneでブラウザからスクリプトにアクセスすることで、現在地が簡単に取得できます。
後は取得した緯度と経度をGoogleマップに渡してやれば現在地の表示は比較的簡単にできるはず。
表示させると同時に、自分のサーバーに位置情報を書き込む。
ブログパーツではその位置情報を読み込み、毎回Googleマップに渡して表示すれば・・と頭の中で仕様が大体出来上がりました。
それでは早速作ってみましょう。
1.JavaScriptで現在地を取得
現在地取得コードを書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> //現在地情報を取得 function cont_get_current_gps(){ if(!navigator.geolocation){ alert('navigator.geolocation is not defined.'); return; } navigator.geolocation.getCurrentPosition( function(position){ var ido = position.coords.latitude; var keido = position.coords.longitude; document.idokeido.lati.value = ido; document.idokeido.long.value = keido; } , function(){ alert('Error!'); } ); } </script> |
1 |
<input type="button" value="現在地を自動で取得" onclick="cont_get_current_gps();"> |
2.フォームに現在値を渡す
取得した10進数の緯度と経度は、フォームに渡されます。
普通のフォームなので、手動でも位置情報が書けるようになっています。
1 2 3 4 5 |
<form method="post" action="" name="idokeido"> 緯度<input type="text" name="lati" size="10"><br> 経度<input type="text" name="long" size="10"><br> <input type="submit" value="送信"> </form> |
3.データを保存する
フォームに入った緯度と経度は、PHPによりサーバーに保存されます。
今回は簡単なテキストにしましたが、KML形式で出力するとより良いでしょう。
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $lati = $_POST['lati']; $long = $_POST['long']; if ($lati && $long) { $fp = fopen('here.txt', 'w'); fwrite($fp, "{$lati},{$long}"); fclose($fp); echo <<< EOM <iframe id="disp" src="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z=13&output=embed" width="100%"></iframe> EOM; } ?> |
4.データを読み込んで現在地を表示する
表示用PHPが位置情報のテキストを読み込み、マップを開きます。
あとはiframeなどでブログに貼りつければブログパーツとしても使えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php $width = $_GET["width"]; if(!$width){ $width = "100%"; } $height = $_GET["height"]; if(!$height){ $height = "100%"; } $z = $_GET["z"]; if(!$z){ $z = "13"; } $fp = fopen('here.txt', 'r'); $lines = fgets($fp); $arr = explode(",",$lines); $lati = $arr[0]; $long = $arr[1]; fclose($fp); echo <<< EOM <iframe src="http://maps.google.co.jp/maps?ll={$lati},{$long}&z={$z}&output=embed" width="{$width}" height="{$height}" frameborder="0"></iframe><br> <a href="http://maps.google.co.jp/maps?q=loc:{$lati},{$long}&z={$z}">大きな地図で見る</a> EOM; ?> |
上記のまとめはこちらです。
これらのファイルをサーバーの同じ場所に置いてアクセスして下さい。
参考サイト:
http://www.pxt.jp/ja/diary/article/254/index.html
http://ascii.jp/elem/000/000/433/433470/index-3.html
http://blog.fonland.net/2010/06/javascript-iphone-gps.html
http://d.hatena.ne.jp/yatt/20130208/1360316179
http://www.shurey.com/html/googlemaps.html
http://www.phpbook.jp/func/file/index4.html
http://ponk.jp/php/file/write
http://www.php-ref.com/b2api/04_fgets.html
http://phpspot.net/php/man/php/function.explode.html
http://libro.tuyano.com/index3?id=410001&page=3
http://www.geocities.jp/eijispace/2012/0220.html
http://d.hatena.ne.jp/takaxi/20111211/1323575933
Enjoy!
追記:
改造したWebアプリ版をひっそり公開。
iPhoneなどで自分の場所を取得し、その情報を短縮URL化します。
これを使えば、iMessageなどで自分の場所を友達と共有できます。
最近のコメント