GPSロガーのデータとデジカメ写真をブログにアップする方法について書いてみます。
最近のツーリングや旅行のブログ等を見ると、回ったルートの軌跡を表示したり、さらに撮影した場所に写真をリンクさせたサイトをよく見かけます。
地図を表示するだけなら、下のように自分のPCで表示した地図を「画面キャプチャ」したものを貼り付けても出来ます。
【事例１ 地図だけを「画像」として表示した例】
でもこれだけだと、地図の縮尺を変えてもっと詳しく見たり、あるいは写真とリンクさせる事は出来ません。
出来ればネットにあるGoogleMapにリンクさせて、地図を拡大したり画面上の撮影ポイントをクリックして写真が見られればもっと便利ですよね。
それを実現した例がこちらです。 ↓
【事例２ GoogleMapにリンクして、写真の撮影場所も表示した例】
（※ 下の地図を左クリックしながらドラッグして見える範囲を動かしたり、左上の「＋」「－」のクリックや、マウスのホイールを回転させて地図の縮尺を拡大・縮小する事が出来ます。 またルート上にある赤いマーカーはデジカメで撮影した場所を示していてクリックすると小さな写真を表示できます）
ここでは、お問い合わせの多かったＧＰＳロガーを使った軌跡表示とデジカメ写真を同期させて、地図上に表示したGoogleマップをブログやホームページにアップする方法を紹介します。
使うGPSロガーは、私のi-gotUだけでなく他の機種や一部のバイクナビや携帯でも、走行軌跡ログが出力できれば同じような作業で公開できると思います。
使うソフトはいくつかの方法があると思いますが、ここでソフトを持っていない方でもタダで入手出来るフリーソフトの中から「轍」というものを利用した方法を紹介しています。
■準備編（１）
・GPSによる走行軌跡データの出力
･･･ ファイル形式はいろいろあり、相互に変換できるものもありますが、ここでは一般的なGPXファイル（*.gpx）を中心に解説します。
・撮影したデジカメ写真
･･･ 必ず撮影日付、時刻を合わせておいてください。
あとでGPSデータで修正もできますが、出来ればカメラの内蔵時計の時刻を電波時計等で合わせておいた方があとの作業が楽です。
・フリーソフト「轍 Wadachi」を取得しておいてください。
･･･ 轍は「サイクル紀行」というサイトに掲載されているソフトで、これだけでGoogleマップに連動させた写真付図を作成する事ができます。
サイトの左側「メインメニュー」の「ダウンロード」からから「カテゴリ：ソフトウェア 轍 Wadachi」の最新版を落すことができます。
ファイルはzip形式ですので解凍して適当なディレクトリーに保存しておきます。
「wadachi.exe」でソフトが起動します。
・Google Maps API キーを取得しておきます。
･･･ 自分のブログやwebサイトにGoogle Maps を掲載するにはここに登録して「API キー」というのを取得しておく必要があります（無料）
まずGoogle アカウントを取得し、次に「Google MAPS API に登録する」から、利用規約の同意をチェックして、アップしたい自分のサイトのurlを入力して「API キーを生成」をクリックすると、
「Thank You for Signing Up for a Google Maps API Key!」 と表示され
「Your key is:」に続けて、
「ABQIAAAA******************************************************************************」
といった長いキーが表示されます。
これをメモ帳などにコピーして保存しておきます。
注）イントラネットや非公開サイト（会員限定サイト、SNSはどうなんでしょう？）に掲載する場合は、Google Maps API Premierへの登録が必要です。
■準備編（２）
・これで作業を始められますが、その前に走行軌跡ログをチェックします。
GPSロガーを起動し、終了した場所はどこでしょうか？
もし自宅だと、ネットの上に自宅の位置を公開してしまう事になってしまいます。
それは困りますので不要な軌跡ログを削除します。
この作業は、GPSロガーに付属の「@trip PC」を使います。
（他の機種をお使いの方はご自分のソフトを確認してください）
「@trip PC」を立ち上げたら「ウイザードをインポートする」から「ファイルからデータをインポートする(*.gpx,*.gpx)でgpxデータを選び、通常どおりマップを作成します。
データを右クリックして「編集」メニューを選びます。
「ウェイポイント」のタグを選び、地図をみながら、削除したい部分のデータを選択して（青くなる）、「選択したウェイポイントを除去する」で削除します。
同様にしてスタート地点、終了地点を修正します。
出来たデータを保存します。
データを「GPXにエクスポートする」で、任意の場所に保存しておきます。
これでデータが揃いました。
■轍によるおおまかな作業の流れ
1. 轍に軌跡データを読み込ませる
2. 写真データを追加する
3. 写真の撮影場所をウェイポイントとして自動登録（地図とマッチング）する
4. 出力したい項目・表・データを選ぶ
5. データをhtmlで保存する
そして、ブログ等にアップするには、
6. そのhtmlファイルと縮小（サムネイル化）されたフォルダーをサイトにアップする
7. 表示したい記事の中に、<frame>形式で埋め込む
以上のようになります。
■轍による作業
1. 轍に軌跡データを読み込ませる
轍を起動し、「メニュー」の「ファイル」から「インポート」で表示したい軌跡（上の、スタート・終了を修正したログデータ）を選びます。
ここでは*.gpx以外にも、
GPXファイル（*.gpx）
ウェイポイントファイル(*.wpt)
ルートファイル（*.rte)
トラックファイル（*.trk)
NMEAファイル（*.log *.rmc *.gps *.nme *.nmea）
をインポートする事が出来ます。
2. 写真データを追加する
「画像」タブから「画像追加…」から、写真のあるフォルダーを探し、取込みたい写真を選択します。
3. 写真の撮影場所をウェイポイントとして自動登録（地図とマッチング）する
ここで「ウェイポイント自動作成」をクリックすれば地図に取込まれます。
出来たら「ウェイポイント」タグをクリックしてみるとちゃんと登録されているのがわかります。
では実際にマップで見てみましょう。
右上の「マッププレビュー」をクリックします。
一見、ちゃんと出来ていそうですが、拡大して見てみます。
実はこの「画像4」というダム名の書かれた岩の前でハーレーを撮った写真ですが、地図の上では「龍泉寺」と交差点の間で撮影したように赤いポイント表示が出ていますが、実際に撮影したのはそこではなくてもっと左の「有間ダム」の角のところで撮影したものです。
なぜこんな事が起きてしまうのでしょうか。
それはデジカメ本体の内蔵時計が正確なら問題ないのですが、数秒から数分程度のズレがあるからなのです。
歩きながら撮影したデータ（数秒程度では位置の変化が少ない場合です）とかなら特に大きな問題にはならないのですが、バイクや自動車で走りながら撮影した写真だと、実際に撮影した場所と地図上で表示される場所が大きくズレてしまう事があります。
例えば交差点に入る前に撮影したのにそのはるか手前やずっと先で撮影したようになってたり、登山のとき、山頂で撮った筈なのにまだその一歩手前！なんて事が起きてしまいます。
でもこれもちゃんと修正する事が出来るのです。
それをやってくれるのが「画像」タブにある右上の「カメラの時刻補正」です。
ここの数字を＋や?、それにずらしたい時間分だけ写真の表示をずらす事ができます。
どれくらいズラしたらいいかは、作成した「ウェイポイント」をすべて削除し、すこしずつ数字を変えてその都度新たに「ウェイポイントの自動作成」「マッププレビュー」で確認します。
今回は、「? １分 ７秒」のズレでした。
修正した結果がこちらです。 ちゃんと撮影場所と一致しました。
次に写真に表示する説明分を修正します。
今のままですと「画像1」「画像2」なので場所の名前もわかりませんし、説明にもなっていません。
「ウェイポイント」タブの中の修正したい画像をクリックします。
「ウェイポイントの編集」画面が開きます。
ここで地点名や説明分を入力します。
4. 出力したい項目・表・データを選ぶ
「出力設定」タブで、表示する項目を選びます。
ここの設定を変えると出力される内容が変わります。
いろいろ試してみて好きな項目を表示させてください。
「マッププレビュー」で確認できます。
デフォルトの設定に「表題」だけ入れるとこんな感じです。
参考までに私の設定はこんな感じの、非常にシンプルなものにしています。
「APIキー」欄には必ず最初に取得した長いキーを入力しておいてください。
5. データをhtmlで保存する
htmlデータを作成します。
メニューの「ファイル」「エクスポート」と選び、「Google Maps HTML…」を選びます。
適当な名前を付けて保存します。（ここでは「20100nagurichichibu」)
そうすると「20100nagurichichibu.html」というファイルと、「20100nagurichichibu_files」という名前のフォルダーが出来ています。
試しにこの「20100nagurichichibu.html」をダブルクリックすると、ブラウザが立ち上がり、サムネイル写真のリンクされたGoogle マップを見ることが出来ます。
6. htmlファイルと縮小（サムネイル化）されたフォルダーをサイトにアップする
作成したデータを自分のサイトで表示出来るようにします。
ブログソフトやＦＴＰソフトを使って、さっきの「20100nagurichichibu.html」というファイルと「20100nagurichichibu_files」を同じデレクトリーにアップします。
私はブログのディレクトリーの中の「archives」に「maps」というディレクトリーを作ってここに保存しています。
7. 表示したい記事の中に、<frame>形式で埋め込む
ブログやｗｅｂサイトの記事の中にさらにhtmlを埋め込むには、表示したいところに、
<iframe src=”http://greenleaf.ddo.jp/wp/wp-content/maps/201007nagurichichibu.html” width=”560″ height=”500″ scrolling=”no” frameborder=”0″></iframe>
これですべてＯＫです。
文章にすると長くなりますが、この通りに一度やってみれば誰にでも出来ますよ。
【関連記事】
※ このブログの「ＧＰＳロガー」に関連する記事は、 コチラ です。
※ 走行ルートを記録するなら「GPSロガー」がお勧めです。
※ バイクでの走行動画なら「GoPro HD HERO」がお勧めです
※ 仲間やタンデムツーリングでの会話なら高音質の「SENAインカム」がお勧めです
ブログランキングに参加中です
気に入ったらポチお願いします
にほんブログ村
バイクランキング
ツイッター、やってます！
Copyright (C) メカ好きおじさんの「バイクと趣味に生きる」 All Rights Reserved.