Browser-Based Route Cinema

国土地理院地図を、4Kの地図動画へ。

GPX / KMZ / KML を読み込み、地図上で再生し、そのまま 4K mp4 に書き出せます。 地図動画づくりに必要な調整を、ひとつの画面にまとめたブラウザアプリです。

Preview Window
gaso GSI Movie Maker のプレビューウインドウ
Features

4つの特徴。

01

データをアップロードせずに使える

入力ファイルや軌跡データを外部へ送信せずに扱え、変換処理は使用する端末の中で完結します。

02

ログイン不要ですぐに使える

ブラウザで開けば、すぐに操作を始められます。会員登録やアカウント作成は不要です。

03

国土地理院の地図で 4K 動画を作れる

地理院地図を使った高解像度の地図動画制作が可能です。日本の地図に特化したソフトウェアです。

04

権利関係を確認しやすい

国土地理院の利用方針に沿って、YouTube やWebページ、放送などで使いやすい地図動画にできます。

Sample Videos

サンプル動画。

サンプル 1: 地図固定モード

サンプル 2: 軌跡追跡モード

Workflow

使い方

01 / 軌跡

移動ログを用意する

実際に移動して記録する方法と、地図ソフトでルートを作って軌跡化する方法があります。

GPSロガー(移動経路を記録)
地図ソフトから生成
Google Mapsのルート情報を含むKML/KMZは権利確認が必要です。
02 / 動画

地図動画に変換する

移動ログ(GPX / KMZ / KML )を読み込み、mp4形式の地図動画を生成します。

このソフトウェア
類似ソフト例
Rights & Use

動画制作で使いやすい、権利整理のしやすさ。

国土地理院の地図を使って4K動画を作れることは、このソフトの大きなメリットです。都道府県名・市区町村名の表示に使う生成済みデータ、山岳地形で使う標高タイル、使用ライブラリの出典とライセンスも整理しているため、公開前の確認を進めやすくなります。

Google Maps

Google Maps は、公式サイト画面をキャプチャーして動画にすることは可能ですが、地図タイルなどを取得して動画素材として保存・出力する使い方は利用条件として認められていません。そのため、Google Maps上に GPS 軌跡を表示して mp4 化するアプリが作成できない課題があります。

国土地理院

地理院地図は、国土地理院コンテンツ利用規約と出典記載ルールに従い、必要な出典を記載して利用できます。出典を示す前提で、商用利用を含む配信・放映における動画素材として扱いやすいのが利点です。この点が、Google Maps と比べたときの大きな違いです。

権利表記の方法

利用の目安
個人での YouTube 利用であれば、ほとんどの場合に生成した動画をそのまま利用できます。
詳しくは 利用条件利用規約 をご確認ください。
表示される権利表記
次の権利表記がデフォルトで表示されます。
地図データ:国土地理院 地理院タイルを加工して利用 数値データ:国土交通省 国土数値情報(N03・P05)       政府統計の総合窓口(e-Stat)を加工して利用 生成ソフト:gaso GSI Movie Maker
Specs

仕様

主な仕様

入力形式
GPX / KMZ / KML
出力形式
mp4 (H.264)
解像度
3840 × 2160
フレームレート
60fps
ビットレート
20 - 100 Mbps の範囲で調整

利用環境と配慮事項

推奨環境
Chrome 系デスクトップブラウザ
動作方式
ブラウザアプリケーション
処理速度
プレビューや書き出しの速度は、利用する PC の CPU / GPU / メモリ性能やブラウザ環境に依存します。
地図ベース
国土地理院ベクトル地図をベースに利用
動作の仕組み 興味のある方向けに、読込から4K mp4 保存までの流れ、鉄道路線の重ね表示、山岳地形の扱いを簡潔にまとめています。
  1. 1
    Browser

    起動

    ブラウザでアプリを開き、UI と設定を初期化し、地図描画コンポーネントを準備します。

  2. 2
    Local Input JSZip pako

    ローカルファイル読込

    ユーザーがローカルの GPX / KML/KMZ を選び、軌跡点、時刻、コメントなどをブラウザ内で解析します。KMZ は ZIP 展開して内部 KML を読みます。

    入力ファイルは外部送信せず、ブラウザ内だけで処理します。
  3. 3
    External Resource MapLibre GL JS

    地図リソース取得

    国土地理院の地図表示に必要なデータを実行時に取得し、ベース地図を描画します。山岳地形を有効にした場合は、標高タイルも必要な範囲だけ取得します。

    外部取得があるのは、国土地理院の地図表示用リソースと、山岳地形で使う標高タイルです。
  4. 4
    Generated Data

    生成済みデータ読込

    日本沿岸の補完データ(N03 由来)、市区町村本庁座標(P05 由来)、人口順位データ(e-Stat / 令和2年国勢調査 由来)、日本周辺の広域陸地データなど、公的機関や公開データをもとに作成した生成済みデータを読み込みます。

    これらは実行時の外部取得ではなく、加工済みデータとして同梱されています。一部自治体は公式サイト情報で補完しています。山岳地形の陰影は、この段階では読み込まず、必要時にブラウザ内で生成します。
  5. 5
    Browser

    描画計画生成

    軌跡からカメラ移動を計算し、地図固定モードまたは軌跡追跡モードに応じて表示中心とズームを決定します。あわせて都道府県名・市区町村名、鉄道路線の重ね表示、コメント、クレジットの重ね方を決め、山岳地形が有効な場合は必要な地形タイルの範囲も見積もります。

  6. 6
    Browser

    プレビュー合成

    ベース地図、軌跡、都道府県ラベル、市区町村ラベル、鉄道路線の重ね表示、コメント、クレジットをブラウザ上で合成し、リアルタイムに再生します。山岳地形が有効な場合は、プレビュー用にローカル生成した陰影も重ねます。

  7. 7
    Mediabunny WebCodecs

    mp4 書き出し

    同じカメラと重ね表示の構成で再描画し、ブラウザ側でエンコードして mp4 を生成します。山岳地形が有効な場合は、書き出し前に必要な地形タイルだけを抽出し、ローカルで陰影を生成して使います。鉄道路線が有効な場合は、鉄道路線の詳細データを路線ごとにまとめ直した線を同じ構成で重ねます。

  8. 8
    Local Output

    ローカル保存

    生成した mp4 をローカルへ保存します。入力ファイルも出力動画も、主要な処理はブラウザ内で完結します。

この仕組みで伝えたいこと

  • ユーザーの軌跡データは外部送信しません。
  • 外部取得するのは国土地理院の地図表示用リソースと、山岳地形で使う標高タイルです。
  • 都道府県名・市区町村名の表示や陸地の補完表示には、公的機関や公開データをもとに作成した同梱データを使います。
  • 鉄道路線は地図が元から持つ単純な線をそのまま出さず、鉄道路線の詳細データを路線ごとにまとめ直した重ね表示として描きます。
  • 権利表記保護のため、生成した動画のクレジットを固定しています。
  • 描画と mp4 書き出しはブラウザ上で完結します。

主な生成済みデータと由来

  • 日本沿岸補完ポリゴン: 国土数値情報 N03 由来
  • 市区町村本庁座標: 国土数値情報 P05 由来
  • 人口順位データ: e-Stat / 令和2年国勢調査 由来
  • 一部自治体: 公式サイト情報で補完
  • 日本周辺の広域陸地データ: Natural Earth 50m Land 由来

地図描画エンジンの処理フロー

%%{init: {'flowchart': {'padding': 4}}}%%
flowchart TD
  A["入力と設定"] --> B["地図の表示ルールを準備する"]
  A --> G1["画面づくりに使う情報
軌跡データ
再生時刻
カメラ設定"] B --> C["地図表示の土台を用意する"] C --> D["海と陸の形を準備する
広域の陸地と日本の詳細な陸地を重ね
粗い輪郭を置き換える"] C --> E["地図の表示内容を整理する
不要な要素を消し
道路や県境やラベルの対象を決める"] C --> F["山岳地形を準備する
有効な場合は標高データから陰影を作る"] C --> R["鉄道路線の重ね表示を準備する
鉄道路線の詳細データを路線ごとにまとめ直し
表示したい路線だけを描画対象にする"] G1 --> G["その時点の地図の状態を計算する"] G --> H["その時点の位置と拡大率に地図を合わせる"] H --> I["地図本体を描画する"] D --> Z["画面を描画する"] E --> Z I --> Z F --> Z R --> Z G --> J["地図の上に重ねる情報を準備する
地名ラベル
軌跡表示
補助情報"] J --> Z Z --> O["プレビュー画面または書き出し画像として出力する"]

山岳地形の処理フロー

%%{init: {'themeVariables': {'fontSize': '12px'}, 'flowchart': {'padding': 4}}}%%
flowchart TD
  A["国土地理院の標高タイルを取得"] --> B["標高データを読み込む"]
  B --> C["欠損や空白を埋めて、扱いやすい地形面を作る"]
  C --> D["地形の傾きと向きを調べる
平地か山地かを見分ける"] C --> E["近距離の起伏を作る
細かい尾根や谷の強さを見る"] C --> F["広域の起伏を作る
山塊の大きなうねりを見る"] D --> G["複数方向から光を当てたような陰影を作る
4方向の光を合成する"] E --> H["細かい山地らしさを判定する
細い尾根や谷があるかを見る"] F --> I["大きな山塊らしさを判定する
広い範囲で山が盛り上がっているかを見る"] C --> J["標高の高さを参照する
標高 180〜760m は山地判定に使う
70m 未満は白寄りに抑える"] H --> K["山岳地帯マスクを作る
細かい起伏・広い起伏・傾き・標高を組み合わせる"] I --> K J --> K G --> L["淡い緑の基本色を作る
平地は白寄り
山地だけ色を乗せる"] K --> L G --> M["尾根の白い筋を強調する
尾根らしい細部だけを白くする"] J --> N["高いピークを白点で強調する
標高 650〜1500m のピークを目立たせる"] L --> O["色と陰影を合成する
最後に少しだけぼかしてなじませる"] M --> O N --> O O --> P["1枚の山岳地形タイル画像として出力"]

動画生成処理のフロー

%%{init: {'themeVariables': {'fontSize': '12px'}, 'flowchart': {'padding': 4}}}%%
flowchart TD
  A["入力と設定"] --> B["書き出し条件を決める
動画サイズ
フレームレート
画質と保存先"] B --> C["書き出し前の準備をする"] C --> C1["動画全体の長さとフレーム数を決める"] C --> C2["山岳地形が有効なら
標高データから陰影を事前計算する"] C --> C3["市区町村ラベルが有効なら
表示計画を事前に準備する"] C --> C4["鉄道路線が有効なら
鉄道路線の詳細データを路線ごとにまとめ直す"] C --> C5["動画エンコーダを準備する"] C1 --> D["各フレームの描画処理"] C2 --> D C3 --> D C4 --> D C5 --> D D --> E["その時点の地図の状態を計算する
再生時刻
軌跡位置
カメラ設定"] E --> F["その時点の位置と拡大率に地図を合わせる"] F --> G["地図本体を描画する"] G --> H["必要なら山岳地形を重ねる"] H --> I["地図の上に重ねる情報を描く
地名ラベル
鉄道路線の重ね表示
軌跡表示
補助情報"] I --> J["1フレーム分の画像を完成させる"] J --> K["動画エンコーダへ渡す"] K --> M["全フレーム完了か判定する"] M -->|いいえ| D M -->|はい| N["動画を仕上げる"] N --> O["mp4 ファイルとして保存する"]

使用ライブラリと使用データについて

地図描画や KMZ 展開、山岳地形のローカル生成、mp4 出力には、MapLibre GL JS、JSZip、pako、Mediabunny などのオープンソースライブラリと、WebCodecs、fetch、Canvas 2D などのブラウザ標準機能を利用しています。

使用データとして、国土地理院国土地理院 DEM / 陰影起伏図国土数値情報(N03・P05)e-StatNatural Earth を使用しています。使用データの利用条件確認は利用者責任となります。

Terms

利用条件

個人・教育機関・行政機関の利用

利用と生成動画
個人・教育機関・行政機関による利用では、本ソフトウェアを自由に使用することが可能です。
有料・無料に関わらず生成した動画を自由に使用できます。gaso は生成した動画そのものに新たな権利を主張しません。
注意点
生成動画内に書かれた権利表記は消すことはできません。使用時は権利表記が常に見える状態として、トリミングや塗りつぶし等で権利表記を消さないようにしてください。

法人の利用

利用と生成動画
法人が生成動画を公衆配信または放映する場合は、フォームに法人名と公開する媒体名を入力いただくことで使用できます。
有料・無料に関わらず生成した動画を自由に使用できます。gaso は生成した動画そのものに新たな権利を主張しません。
フォームの入力例
  • YouTube の場合: 動画 URL またはチャンネル名
  • テレビ放送の場合: 番組名
  • 企業サイトで公開する場合: 掲載ページ URL
  • イベント上映の場合: 上映イベント名