この間のぼんぼり祭りの記事もそうですが、最近日記にあげる写真にジオタギングを施すのがマイブームだったりします。ジオタギングというのは、写真に位置情報をつけられるというあれのことです。写真に位置情報をつけておくと、あとから写真を見返したときにあのときあそこに行ったなぁ・・・とか、ニヤニヤできるので大変オススメなので。
位置情報はiPhoneとかだと、自動でつけてくれて便利なのですが、普通のカメラにはGPSが搭載されていないので何らかの方法で位置情報を付加する必要があります。今日は、自分がジオタグをwordpressで表示するためにとっている方法について書いてみます。
まずは、写真に位置情報をつける必要があります。一番簡単なのはGPS搭載のカメラを利用することですね。iPhoneならGPS搭載ですし、EX-H20G(カシオ)やHX7V(ソニー)、SX230HS(キャノン)などGPS搭載のカメラもあります。一眼レフだとk-r(PENTAX)やk-5(PENTAX)など外付けのGPSユニットを取り付けることができる物もあります。
まあ、すべてのカメラでGPSが搭載されているわけではないので、GPS非搭載のカメラの場合は単体 のGPSロガーを購入する必要があります。これは、自動的にどの位置に何時何分何秒にいたかを記録して、あとから写真を撮った時間と比較して写真にジオタグをつける物です。お値段は1万円ほどですので買ってみるといいでしょう。位置精度もやはりGPSロガーが一番でしょうしね。
ちなみに、自分は単体のGPSロガーは購入せずにAndroidタブレットである「GalaxyTab」にGPSロガーアプリの「MyTracks」を入れてGPSの軌跡情報を旅行中ずっと記録しています。難点としては電池の消耗がそこそこ激しいことと(GalaxyTabだとそれほど気にならない消費量だし、一日は軽く持つけど)、携帯電話のおまけGPSなので精度があまりよくなくて山陽新幹線とかでは記録できないことですかね。
しっかり位置情報を記録してから、家に帰ってきたあとはGPSログを写真の時刻とマッチングしないと行けませんが、そのとき利用してるソフトは「geosetter http://www.geosetter.de/en/」です。これは、MyTracksからエクスポートできるGPS情報を写真に自動的にマッチングしてくれるソフトです。非常に高機能で使いやすくてオススメ、なので。
ちなみに、GPSロギングをしてないときの写真の位置情報は「Picasa」で後から手動でつけたりもしています。
こんな感じで位置情報をつけたら、あとはwordpressにアップロードして記事を書くだけですね。そのとき、wordpressのプラグインとして「GeoTagPhoto http://wordpress.org/extend/plugins/geotagphoto/」というプラグインを利用しています。これは、アップロードされた写真に自動的にgoogleマップへのリンクを張ってくれるという便利なプラグインです。ただし、自分の環境ではうまく動かなかったのでPHPファイルをちょっと修正して使っています。
ちなみに修正点としては2カ所 194行目あたり
$finalpath = str_replace( get_bloginfo(‘home’), ABSPATH, $image);
↓
$finalpath = str_replace( get_bloginfo(‘wpurl’), ABSPATH, $image);
これは、wordpressのURLが本来https://ingaouhou.com/wordpress/なのをhttps://ingaouhou.com でアクセスできるように設定しているのでうまく動かなかったみたいですので、それを正しいパスに書き換えてます。他にも自分のwordpressの設置箇所によってパスを変更しないとうまくいかないかと思います。
244行目あたりに、マーカーを表示する行があるので、そこにマーカーにgooglemapへのリンクを<a>タグで貼り付けるようにしています。なぜかデフォルトではマーカーにURLが張られていないwwwww 244行目だと(248行目も同様)
$content = ereg_replace( $result[0][ $key ], ‘<div style=”padding:14px; position:relative; top:0; left:0; z-index:3;”>
<div style=” margin-left: auto ; margin-right: auto ;padding:0px; position:relative; top:0;
left:0; height:’ . $smallexif[ COMPUTED ][ Height ] . ‘px; width:’ . $smallexif[ COMPUTED ][ Width ] . ‘px; z-index:4;”>
<a href=”‘ . $pathtofull . ‘” class=”thickbox”><img src=”‘ . $image . ‘” ></a>
<div style=”position:absolute; padding:0px; z-index:5;’ . $geotagphoto_icon_pos .'”>
<a href = “http://maps.google.co.jp/maps?q=’ .$lat. ‘,’ .$lon. ‘(Photo Location)&z=17&ie=Shift-JIS”>
<img src=”‘ . $geotagphoto_icon . ‘” ‘ . $Map . ‘onmouseover=”this.style.cursor=’ . $geotagphoto_icon_cur . ‘;” ></a></div></div></div>’, $content );
長い一行ですが、要は ‘http://maps.google.co.jp/maps?q=’ .$lat. ‘,’ .$lon. ‘(Photo Location)&z=17&ie=Shift-JIS’ へのリンクを張っているだけですね。ちなみにこのリンクはq=と書くことでその場所を検索クエリとして投げる、z=17で17段目の拡大倍率で表示する(市街地レベルですね)ie=Shift-JISはクエリの文字コードがShift-JISと言うことを表しているようです。
うまくいっていれば、このように写真の上に位置情報を示すアイコンがつき、アイコンをクリックすると、その写真の場所をgoogle mapで開くことができるかと思います。