📖 OSM Road Viewer + いつもナビ スクショ — 操作マニュアル

1. システム概要

ツール役割
OSM Road Viewer (osm_roads_map.html)OpenStreetMap の道路データを Google Maps に重ねて表示。スクショモードで道路を均一色で表示し、グリッド単位で連続撮影する
いつもナビ スクショ（Chrome拡張）いつもナビ地図を緯度経度グリッドで自動巡回しながら連続スクリーンショット・保存する

どちらも同じ緯度経度グリッドを共有して使うことを想定しています。

2. ディレクトリ構成

リポジトリ（Cloudflare にアップするフォルダ）

新規アプリ/
├─ osm_roads_map.html      ← メインサイト（OSM Road Viewer）
├─ MANUAL.md               ← マニュアル
└─ dl/                     ← Chrome拡張のダウンロード用ファイル
    ├─ manifest.json
    ├─ background.js
    ├─ panel.html
    ├─ panel.js
    └─ README.md
注意
dl/ フォルダは元の「ダウンロード用」フォルダの内容をそのまま入れてください。
osm_roads_map.html 内のダウンロードボタンは dl/ を参照しています。

Chrome拡張をインストールするときのフォルダ

ダウンロードした5ファイルを 1つのフォルダ にまとめます（例: itsmo-extension/）。

itsmo-extension/
├─ manifest.json
├─ background.js
├─ panel.html
├─ panel.js
└─ README.md

スクショ保存先（Chrome の Downloads 以下）

Downloads/
└─ i_<保存先フォルダ名>/
    ├─ i_<フォルダ名>0-19/       ← グループフォルダ（列0〜19）
    │   ├─ 0/
    │   │   ├─ 1.png
    │   │   └─ ...
    │   └─ 19/
    ├─ i_<フォルダ名>20-39/
    └─ ...

3. Cloudflare Pages へのデプロイ

  1. Cloudflare Dashboard にログイン
  2. Workers & Pages → Pages → 「プロジェクトを作成」
  3. 「直接アップロード」 を選択
  4. 新規アプリ/ フォルダ全体をドラッグ＆ドロップ（または ZIP でアップ）
  5. デプロイ完了後、発行された URL でアクセス
dl/ フォルダも一緒にアップすることで、サイト上の「拡張ファイルを一括DL」ボタンが機能します。

4. OSM Road Viewer の使い方

4-1. 初回セットアップ

  1. ページを開く
  2. 上部「API Key」欄に Google Maps API キーを入力して 「読込」 を押す
  3. 地図が表示されたら準備完了

4-2. 範囲の指定

  • 地図を右クリック → 左上→右下の順にクリックして範囲指定（自動でコピーもされる）
  • または左上の入力欄に 緯度, 経度 を直接入力
枠意味
青枠スクリーンショットを撮る範囲
赤枠OSMデータを取得する範囲（青枠より少し広い）

4-3. OSMデータの取得

  1. 「取得」 ボタンを押す
  2. ステータスバーに進捗が表示される
  3. 道路が地図上に描画される
  4. 🔄 ボタンでキャッシュをクリアして再取得

4-4. タイル（グリッド）の設定

  1. 「敷き詰め」 ボタンを押すと青枠内にグリッドが表示される
  2. OSMデータがないマスは自動で赤（スキップ）になる
  3. マスをクリックで手動スキップ切り替え、Shift+クリック で範囲選択
項目デフォルト説明
緯度0.0013°1マスの縦幅
経度0.0031°1マスの横幅

4-5. スクショモード

「スクショモード」をONにすると道路の表示が切り替わります：

種別色対象
メイン道路赤（変更可）幹線道路・一般道など
サブ道路青歩道・路地・農道・自転車道など
  • 太① スライダー：メイン道路の太さ
  • 太② スライダー：サブ道路の太さ
  • 交差点が自動表示される

4-6. スクリーンショット撮影

  1. スクショモードをONにする（推奨）
  2. 「📷 順番にSS」 を押す
  3. フォルダ選択ダイアログ → 保存先を選ぶ
  4. 画面共有の許可ダイアログ → タブを選択して「共有」
  5. 自動で巡回撮影が始まる
項目説明
待機（ms）各タイルで地図ロード後の待機時間
一括（列×行）一度に撮影するタイル数（最大2×2）。大きいほど速いが精度が落ちる
グループ（列ごとにフォルダ）何列ごとに上位フォルダをまとめるか（デフォルト20）

保存フォルダ構成（OSM Road Viewer）

選択したフォルダ/
├─ <フォルダ名>_0-19/
│   ├─ 0/
│   │   ├─ 1.jpg
│   │   ├─ 2.jpg
│   │   └─ ...
│   ├─ 1/ ... 19/
│   └─ coord.js          ← このグループの先頭座標（JS形式）
└─ <フォルダ名>_20-39/
    └─ ...

coord.js の内容例：

window.OSM_COORDS = {
  "groupName": "Sapporo_0-19",
  "firstCol": 0, "lastCol": 19, "groupSize": 20,
  "topTile": {
    "col": 0,
    "center": { "lat": 43.4361, "lng": 141.8159 },
    "bounds": { "north": 43.4367, "south": 43.4354,
                "west": 141.8143, "east": 141.8174 }
  },
  "fixLat": 0.0013, "fixLng": 0.0031,
  "generatedAt": "2026-05-01T..."
};

途中再開： 停止すると「ここから再開」欄に再開列番号が自動セットされる。「ここから再開」ボタンで指定列の先頭から再開。

5. Chrome拡張のインストール

  1. OSM Road Viewer の 詳細設定 → 「📥 拡張ファイルを一括DL」 を押す
  2. ダウンロードされた5ファイルを1つのフォルダにまとめる
  3. Chrome で chrome://extensions を開く
  4. 右上の 「デベロッパーモード」 をONにする
  5. 「パッケージ化されていない拡張機能を読み込む」 をクリック
  6. 作成したフォルダを選択 → インストール完了
ツールバーにアイコンが表示されない場合はパズルアイコン（拡張機能）→ピン留めで固定できます。

6. Chrome拡張（いつもナビ スクショ）の使い方

6-1. パネルを開く

ツールバーのアイコンをクリック → コントロールパネルが新しいタブで開く

6-2. 座標の入力

「左上（緯度, 経度）」欄に Google Maps でコピーした座標を貼り付け → 自動でいつもナビ座標（東京測地系）に変換される

オフセット: 緯度 -0.003239°、経度 +0.003221°

6-3. 各設定項目

項目説明備考
保存先フォルダ名Downloads 以下に i_<名前> で作成日本語可
列グループ幅何列ごとにフォルダをまとめるかデフォルト20（OSM Viewer と合わせる）
開始列途中から再開する列番号0始まり
ウィンドウ幅/高さ地図ウィンドウのサイズキャプチャ解像度に影響
地図描画待機 ms地図ロード後の待機時間2000ms 推奨

6-4. トリミング設定

撮影画像内の切り出し範囲をピクセル座標で指定します。

注意: Chrome DevTools Protocol でのキャプチャは devicePixelRatio 倍の解像度になります。最初の数枚で実際の座標を確認して調整してください。

6-5. カラーマップ（色変換）

  1. 「カラーマップ画像（元本.png）」でマッピング画像を読み込む
  2. 以後の撮影時に自動で色変換が適用される
  3. 「リセット」で変換なしに戻す

6-6. 撮影の開始と停止

  1. 「開始」 ボタンを押す → 別ウィンドウでいつもナビが開いて自動巡回が始まる
  2. 中断するときは 「停止」 ボタン
  3. 再開するときは「開始列」に再開列番号を入れて「開始」

7. スクショ保存フォルダ構成

ツールファイル名形式
OSM Road Viewer<行番号>.jpg (1始まり)JPEG (75%)
いつもナビ拡張<連番>.png (通し番号)PNG

8. 運用フロー（推奨手順）

① OSM Road Viewer でエリアを設定
     │
     ├─ 「取得」で道路データを取得
     ├─ 「敷き詰め」でグリッドを生成
     ├─ スクショモード ON
     └─ 「📷 順番にSS」で撮影開始
           └─ <保存先>/<フォルダ名>_0-19/ に保存（coord.js も生成）

② いつもナビ スクショ拡張で同じエリアを撮影
     └─ Downloads/i_<名前>/ に保存

③ 両方の画像を照合・活用

9. よくあるトラブル

OSM データが取得できない

  • エラー: Failed to fetch → ネットワーク・ファイアウォールの問題
  • エラー: HTTP 429 → Overpass API のレート制限。数分待ってから再試行
  • 🔄 ボタンでキャッシュをクリアして再試行

スクリーンショットが撮れない

  • 画面共有のダイアログで「このタブ」を選択しているか確認
  • 待機時間（ms）を増やす（地図のロードが間に合っていない可能性）

Chrome拡張が読み込めない

  • 5ファイルすべてが同じフォルダに入っているか確認
  • manifest.json が壊れていないか確認
  • デベロッパーモードがONになっているか確認

いつもナビの地図が正しい位置に表示されない

WGS84→東京測地系の変換が必要。OSM Viewer の座標をそのまま使わず、パネルの「WGS84入力欄」に貼り付けて自動変換する。

途中から再開したい（OSM Viewer）

  1. 停止すると「列」欄に再開列番号が自動セットされる
  2. 「ここから再開」ボタンを押す

途中から再開したい（Chrome拡張）

  1. パネルの「開始列」欄に再開したい列番号を入力
  2. 「開始」を押す

最終更新: 2026-05-01

Google Maps API Key を入力して「読込」を押してください
📋 座標をコピーしました