自転車アイテムというよりは、動画編集ツールの話です。
サイクリングロードの撮影の効率化とドラレコ代わりでアクションカム「SONY HDR-AS50」を購入し、試し撮りを何回かしていますが、撮影した映像に地図と速度を表示出来たら面白いと思いまして。
AS50はGPSが無いのでソニーの「Action Cam Movie Creator」で位置情報を利用できません。
なのでスマートフォンて取ったGPSログを利用できないかと調べたら、フリーの動画編集ソフト「aviutl」とプラグイン「VSD for GPS」で可能みたいです。
YouTubeやニコニコ動画に投稿はしないのですが、動画に地図貼り付けを試しにやってみました。
地図を表示させない場合はガーミンの動画編集ソフト「VIRB Edit」がマウス操作のみで出来て簡単です。ガーミン製品を持っていなくても利用できます。
AviUtlのインストール
インストールと言っても作者のサイトからダウンロードしてZIPファイルを解凍するだけです。
解凍したフォルダの中の「aviutl.exe」を実行するだけで使えますが、例えば「ダウンロード」フォルダの中だとごちゃごちゃするので、整理しやすい場所に移動させます。
僕の場合は、色々なフリーソフトを使ってるので「フリーソフト」というフォルダの中に入れてます。
AviUtlのプラグイン「VSD for GPS」の導入
VSD for GPSをダウンロードします。作者サイトの「ダウンロードはこちら」のリンクから「vsd_filter_gps_r994.exe」※バージョンは2020年8月27日現在。
VSD for GPSを実行。
「WindowsによってPCが保護…」表示され場合は「詳細情報」をクリックして【実行】。

【OK】
AviUtlをインストールしているフォルダを選択して【インストール開始】
ffdshowのインストール画面が別ウインドウで表示される。
ffdshowをインストール。基本「次へ」で進むだけ。

VSD for GPSのインストールが完了。
AviUtlを開き、【設定】に【VSDメーター合成の設定】が表示されたらこのプラグインを使えます。
その他入れておくと便利なプラグイン
MP4形式の動画ファイルをAviUtlに読み込むプラグイン。
「ds_input.aui」をAviUtlのフォルダの中に入れる。
H264形式で動画を出力するプラグイン。
動画投稿サイトやTwitterに動画を上げる時にも使えます。
サイドバーの「いろいろ」からダウンロードできます(Googleドライブにアクセスしてダウンロードする)。
x264guiexプラグインのインストールは、実行ファイルを開きAviUtlをインストールしているフォルダを指定してインストールします。

AviUtlで動画の取り込みとGPSログ(GPX)を読み込む
AviUtlの【ファイル】>【開く】で動画を選択して取り込みます。
また動画ファイルをドラックしても取り込めます。
【設定】>【VSDメーター合成の設定】を選択。

GPSログの【開く】から走行データのGPSログ「GPXファイル」を読み込む。
スマートフォンのGPSログを取れるアプリは、「GPS経路ロガー」や「GPS Logger」などがあります。
「Strava」の走行データもパソコンからStravaにログインしてGPXファイルをインポートで来ます。
GPS経路ロガーのGPSログを読み込むと実際の速度より速く表示されますが、修正については後述します。
GPSログを取り込む前に「半自動同期」にチェック入れると、動画の撮影日時とGPSログの時間から位置を同期します。
カメラ内蔵時計との時間ズレから「GPSログ位置調整」で細かい位置を調整します。調整は、発進する時や停止するときの映像とGPS速度を目安にすると合わせやすいかとおみます。
映像の左下に映像の日時とGPSログの日時が表示される。細かい位置調整は、信号待ちなどの停止や発進の速度と映像の変化を見比べながら調整します。
GPSと映像の位置ズレの修正が難しい。それっぽく見えればいいかな。
GPSログと動画の撮影日時の同期は、HDR-AS50の場合はカメラから直接AviUtlに取り込んだ動画は撮影時の時間ですが、Action Cam Movie Creatorなどでパソコンに取り込んだ動画ファイルを使うとパソコンに取り込んだ日時になるので、VSDの地図情報・速度と映像の発進・停止などから手動で位置を調整する必要があります。
VSD for GPSでスキンを変更して地図と速度を表示
GPSログと映像の位置調整が終わったらスキンを変更します。

左上の地図が表示されませんが、AviUtlのシークバーを1コマ動かすとちゃんと表示されます。
地図と速度を表示するのは以下のスキンです。
- OpenStreetMap.js
- google_maps.js ※Google Maps Platformの登録が必要
Googleストリートビューを表示させるスキンもありますが、GPSログの移動と連動してストリートビューも動きながら表示するので省略。
OpenStreetMap.jsで地図と速度の表示

OpenStreetMapは走行経路も表示します。
デフォルトだと色々と情報が多いので、OpenStreetMap.jsファイルを修正してマップと速度のみ表示させました。
「取得できません」が何を指してるのか分からない。最初は地図を上手く読み込めないのかと思いましたが、経度・緯度以外の何らかの情報かしら。まあ、マップと速度以外の情報は消すのでいいか。
マップ周りの半透明の縁を消して、マップの縮尺も拡大しました。

ダウンロード:OpenStreetMap2.js ※「vsd_plugins」の中に入れてください。
google_maps.jsで地図と速度の表示

google_maps.jsも色々と情報が多いので、google_maps.jsを修正してマップと速度のみ表示させました。
同じく、マップ周りの半透明の縁を消して、マップもの縮尺も拡大しました。

ダウンロード:google_maps2.js ※「vsd_plugins」の中に入れてください。
Googleマップを使う(API登録)
Googleマップを使うにはGoogleマップのAPIを使う必要があり、Google Maps Platformの登録が必要になります。
APIの利用はクレジットカードの登録が必要になります。クレジットカードが利用できるかのチェックでVISAデビットの場合は200円引き落としされますが、直ぐに決済のキャンセルで戻ってきます。
クレジットカードは持って無いので分からないですが、チェックだけの直ぐにキャンセルなので何も起こらないと思います。
APIは200ドル分まで無料で利用できるみたいです。無料でマップの読み込み回数に上限があるか、地図表示以外の機能が有料なのかは、僕もいまいちわかっていません。
多分、アプリ開発などで多くのアクセスになる場合以外、自分だけなら気にしなくてもいい気がします。
Google Maps Platform登録時に「200$分に近くなったら通知する」のチェック項目があるのでチェックしておくといいでしょう。
まあ、僕も詳しくないのでこの辺りを参考に…

VSDの「_user_config.js」ファイルをテキストエディタで開きGoogle Maps Platformで取得したAPIを指定の場所にコピペします。
Windows付属のメモ帳でも開けると思いますが、サクラエディタなどのテキストエディタが無難です。
GoogleAPIKeyの[“”]で囲まれてる中に貼り付けます。貼り付けた「ここにAPIコードを入力する」はAPIの代わりです。
OpenStreetMapならGoogle Maps Platformのように登録は必要ないので、有料が気になるならこっちを使うといいでしょう。
マップ表示サイズと縮尺を変更する
マップの表示サイズと縮尺も変更できます。
修正箇所は「OpenStreetMap2.js」「google_maps2.js」共通です。テキストエディタで編集します。
マップ表示サイズの変更
縦横をピクセルサイズで変更します。
縮尺の変更
編集行の1行上のコメント「ズームレベル」の段階で変更できます。数字が大きいほど拡大された地図になります。
StravaよりGPS経路ロガーの方が速度が安定してる。ただし、VSDの設定ファイル修正必要
StravaのGPSログを利用すると速度が速くなったり遅くなったりで荒ぶり最高速度も異常に速いので、GPS経路ロガーの方が速度が荒ぶることなく安定しているようです。
ただし、実際の速度よりも速く表示されます。

これには理由があり、GPSログ(GPXファイル)に速度を記録する場合は一般的に「m/s」で記録しますが、GPS経路ロガーは「km/h」で記録されてます。時速25km/hなら「25.0」のように。
GPSログに記録される速度の情報は数字のみで単位まで記録されない。
[m/s]を3.6倍すると[km/h]に変換でき、VSDでは3.6倍に変換された速度になるのでGPS経路ロガーで生成されたGPSログを使うと、実際の速度より速く表示されてしまいます。
GPS経路ロガーをVSDで使う場合は「gpx.js」を修正する
GPS経路ロガーの速度を正常なのにするため、VSDの「gpx.js」を編集します。
修正したファイルを作ったので、ここからダウンロードできます。
VSDプラグインのフォルダから【vsd_plugins】>【_log_reader】の中に「gpx.js」を入れます。そのままだと上書きされるので、元の「gpx.js」は別の名前に変更します。
元の3.6倍にGPS経路ロガー用を加えてるだけです。ストラバなど他のGPSログを利用する際はDLした「gps.js」を、それぞれコメントアウトしてください
GPS経路ロガーのGPSログを使用する場合
// Speed がある場合は Array 作成
if( Point.match( /<speed>([\d\.]+)/ )){
//Log.Speed[ Cnt ] = 3.6 * RegExp.$1; //[m/s]
Log.Speed[ Cnt ] = 1 * RegExp.$1; //GPS経路ロガー用[km/h]
}
ストラバなどのGPSログを使用する場合
// Speed がある場合は Array 作成
if( Point.match( /<speed>([\d\.]+)/ )){
Log.Speed[ Cnt ] = 3.6 * RegExp.$1; //[m/s]
//Log.Speed[ Cnt ] = 1 * RegExp.$1; //GPS経路ロガー用[km/h]
}
「Log.Speed[ Cnt ]…」行の先頭に「//」を入れてコメント文にしてます。
「gps.js」 を自分で修正する
自分で修正する場合はテキストエディタで「gpx.js」開いて以下の行を修正します。
// Speed がある場合は Array 作成
if( Point.match( /<speed>([\d\.]+)/ )){
Log.Speed[ Cnt ] = 3.6 * RegExp.$1;
}
この行の「3.6」を「1」に変更します。
// Speed がある場合は Array 作成
if( Point.match( /<speed>([\d\.]+)/ )){
Log.Speed[ Cnt ] = 1 * RegExp.$1;
}