トリアエズぶろぐ
フリーランスでやってる77世代のWEBプログラマが福岡からのんびりとお送りいたします。
スポンサーサイト


一定期間更新がないため広告を表示しています

<< Flash AS3.0事始め。スライドショーを作ってみた | main | 縮小専用。が400万ダウンロード突破。そしてAdobe AIRアプリとして再デビューします。 >>
iPhone画像から位置情報をぶっこぬいてマッピングするSNAKERSをリリース




iPhone画像から位置情報をぶっこぬいて地図にマッピングしてしまうという、ちょっとアレなサービスをリリースしました。

SNAKERS - スネイカーズと読みます。
2chとかでよく書かれてる「スネークする」という言葉からとってます。
あとは自分が好きなハッカーの映画「スニーカーズ」もちょっと混じってたり。どうでもいいですね。

最初興味本位で作ってみたものの、意外と位置情報ダダ漏れな人がいなくて触ってても面白くなかったんでボツにしてたんですが、自分の靴の裏写真撮ったりして適当にデザインで遊んでたら見栄えが良くなったので晒しちゃいます。

iPhone画像から位置情報がダダ漏れる問題は、自宅などの超プライベート情報とかは困りますが、芸能人の行きつけのショップ写真やロケ写真などはあえてダダ漏れして頂くとファンの方が喜ばれるかと。どうでしょうかね。

(機能的に)地味なサイトですが、位置情報を見て「へー。」って言って頂けるとこれ幸いです。


さて、このサイトを作るにあたってのポイントをざっと上げると、、、

■[PHP] RSS autodiscovery
■[PHP] RSS解析
■[PHP] 画像からEXIF取得
■EXIFの位置情報を世界測地系に変換
■GoogleMapsAPIとPHPでJSON連携
■デザインの参考サイト

です。
ではそれぞれ簡単ですが解説を。

 ■[PHP] RSS autodiscovery

ググると色々見つかりますが、簡単なものを自分で書いてみました。適当です。

/*
 PHPでRSS auto discovery

 $htmlData : ブログのHTMLソース
 $url : HTMLソースを取ったURL(補完してくれるかも)
*/
function getRSSLocation($htmlData, $url=""){

 if (preg_match_all('|<link([^>]+)>|i', $htmlData, $m, PREG_SET_ORDER )){
  foreach($m as $v){
   if (stristr($v[1], 'rel="alternate"') &&
    (stristr($v[1], 'application/xml') || stristr($v[1], 'application/rss+xml') || stristr($v[1], 'text/xml')) &&
    preg_match('|href="([^"]+)"|i', $v[1], $m2)
    ){
     $rssurl = $m2[1];
     if (!stristr($rssurl, 'http')){
      preg_match('|¥://([^/]+)|', $url, $d);
      return 'http://'.$d[1].$rssurl;
     } else {
      return $rssurl;
     }
    }
  }
 }

 return false;

}



■[PHP] RSS解析

いわずもがな、pearのXML_Unserializerですね。


■[PHP] 画像からEXIF取得


exif_read_data()で簡単に取れちゃいますね。らくちんだなぁ。
でもマニュアルにはURLは渡してもダメ、って書いてあるんだけど通りましたよ?なんで?


■EXIFの位置情報を世界測地系に変換

ここでちょっと躓いた。
EXIFの位置情報って

            [GPSLatitudeRef] => N
            [GPSLatitude] => Array
                (
                    [0] => 33/1
                    [1] => 35/1
                    [2] => 1444/100
                )

            [GPSLongitudeRef] => E
            [GPSLongitude] => Array
                (
                    [0] => 130/1
                    [1] => 25/1
                    [2] => 1555/100
                )

            [GPSMapDatum] => WGS-84

みたいになってるわけです。これを、GoogleMapsでおなじみの

    [Lat] => 33.555555
    [Lon] => 130.422222222

みたいな形に変換したい。それにN,E,W,Sでマイナスの値とかになったりするよね?
と思ってググりましたところ、そのものズバリなサイトがあったんですがURLを失念(すみません!)。
ソースはこんな感じになりました。

/*
 画像から世界測地系の緯度経度を抽出
*/
function getExifGeo($url, $cacheDir=NULL){

 $exif = @exif_read_data($url, 'COMPUTED');
 if (!$exif) return false;

 $Lat = $exif['GPSLatitude']; // 経度L
 $Lon = $exif['GPSLongitude']; // 緯度B
 $LatRef = $exif['GPSLatitudeRef'];
 $LonRef = $exif['GPSLongitudeRef'];
 if (!$Lat || !$Lon || !$LatRef || !$LonRef) return false;

 // 緯度経度のプラスとかマイナスとか
 $prefix = array( 'N' => '', 'S' => '-', 'E' => '', 'W' => '-' );

 $result = array();
 if (is_array($Lat)){
  foreach($Lat as $v){
   if (strstr($v, '/')){
    $x = explode('/', $v);
    $result['Lat'][] = $x[0] / $x[1];
   }
  }
  $result['Lat'] = $result['Lat'][0] + ($result['Lat'][1]/60) + ($result['Lat'][2]/(60*60));
 } else {
  $result['Lat'] = $Lat;
 }
 if (is_array($Lon)){
  foreach($Lon as $v){
   if (strstr($v, '/')){
    $x = explode('/', $v);
    $result['Lon'][] = $x[0] / $x[1];
   }
  }
  $result['Lon'] = $result['Lon'][0] + ($result['Lon'][1]/60) + ($result['Lon'][2]/(60*60));
 } else {
  $result['Lon'] = $Lon;
 }

 // 世界測地系に変換 TOKYO to WGS84
 if (stristr($exif['GPSMapDatum'], 'tokyo')){
  $result['Lat'] = $result['Lon'] - $result['Lon'] * 0.00010695  + $result['Lat'] * 0.000017464 + 0.0046017;
  $result['Lon'] = $result['Lat'] - $result['Lon'] * 0.000046038 - $result['Lat'] * 0.000083043 + 0.010040;
 }

 $result['freshData'] = $exif;
 $result['Lat'] = (float)($prefix[$LatRef] . $result['Lat']);
 $result['Lon'] = (float)($prefix[$LonRef] . $result['Lon']);

 return $result;
}



■GoogleMapsAPIとPHPでJSON連携

20. PHPからJSON作成を扱う - PHP TIPS:ITpro
に言われるがままjson.phpをダウンロード。

そして、GoogleMapsAPIをちゃんと勉強しようと色々とやってみるんですが、APIの勉強以前にJavaScriptの基本がいまいち分かってない俺。
もっとオブジェクトっぽいスマートな書き方がある気がするんだけど・・・。

SNAKERSサイトの左の画像をクリックすると、逆ジオコーディングして住所を表示するんですが、これがなぜかSleipnirで動かない。普通のIEやSafariは問題ないんだけどなぁ。だれか教えてえらい人><


■デザインの参考サイト

Watercolor Splatters : A High Res Photoshop Brush Set | Room122
フリーのグランジ風フォントいろいろ - かちびと.net

スポンサーサイト


COMMENT









Trackback URL
http://akihiro.jugem.jp/trackback/266
TRACKBACK