OSM Roads on Google Maps

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

目次
1. システム概要 2. ディレクトリ構成 3. Cloudflare Pages へのデプロイ 4. OSM Road Viewer の使い方 5. Chrome拡張のインストール 6. Chrome拡張（いつもナビスクショ）の使い方 7. スクショ保存フォルダ構成 8. 運用フロー（推奨手順） 9. よくあるトラブル

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 へのデプロイ

Cloudflare Dashboard にログイン
Workers & Pages → Pages → 「プロジェクトを作成」
「直接アップロード」 を選択
新規アプリ/ フォルダ全体をドラッグ＆ドロップ（または ZIP でアップ）
デプロイ完了後、発行された URL でアクセス

dl/ フォルダも一緒にアップすることで、サイト上の「拡張ファイルを一括DL」ボタンが機能します。

4. OSM Road Viewer の使い方

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

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

4-2. 範囲の指定

地図を右クリック → 左上→右下の順にクリックして範囲指定（自動でコピーもされる）
または左上の入力欄に 緯度, 経度 を直接入力

枠	意味
青枠	スクリーンショットを撮る範囲
赤枠	OSMデータを取得する範囲（青枠より少し広い）

4-3. OSMデータの取得

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

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

「敷き詰め」 ボタンを押すと青枠内にグリッドが表示される
OSMデータがないマスは自動で赤（スキップ）になる
マスをクリックで手動スキップ切り替え、Shift+クリック で範囲選択
「skip出力」 で、赤いマスの列番号・点番号を JSON として保存できる

項目	デフォルト	説明
緯度	0.0013°	1マスの縦幅
経度	0.0031°	1マスの横幅

4-5. スクショモード

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

種別	色	対象
メイン道路	赤（変更可）	幹線道路・一般道など
サブ道路	青	歩道・路地・農道・自転車道など

太① スライダー：メイン道路の太さ
太② スライダー：サブ道路の太さ
交差点が自動表示される

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

スクショモードをONにする（推奨）
「📷 順番にSS」 を押す
フォルダ選択ダイアログ → 保存先を選ぶ
画面共有の許可ダイアログ → タブを選択して「共有」
自動で巡回撮影が始まる

項目	説明
待機（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拡張のインストール

OSM Road Viewer の 詳細設定 → 「📥 拡張ファイルを一括DL」 を押す
ダウンロードされた6ファイルを1つのフォルダにまとめる
Chrome で chrome://extensions を開く
右上の 「デベロッパーモード」 をONにする
「パッケージ化されていない拡張機能を読み込む」 をクリック
作成したフォルダを選択 → インストール完了

ツールバーにアイコンが表示されない場合はパズルアイコン（拡張機能）→ピン留めで固定できます。

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. カラーマップ（色変換）

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

6-6. スキップ連携

OSM Road Viewer の 「skip出力」 で JSON を保存する
Chrome拡張の 「スキップ連携」 にその JSON を読み込む
読み込んだ列・点は撮影せず、同じファイル名で skip 画像を保存する

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

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

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

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

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

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

② いつもナビ スクショ拡張で同じエリアを撮影
     ├─ 「スキップ連携」に skip JSON を読み込み
     └─ Downloads/i_<名前>/ に保存

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

9. よくあるトラブル

OSM データが取得できない

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

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

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

Chrome拡張が読み込めない

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

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

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

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

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

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

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

最終更新: 2026-05-01

選択範囲

左上 NW

右下 SE

地図右クリックでポイント指定 / コピー

■ 青枠: 写真を撮影する範囲
■ 赤枠: OSMデータを取得する範囲

マスをクリックでスキップ（灰色）

DL拡張の「スキップ連携」で読み込み

待機 800 ms

一括 × マス/回

グループ列ごとにフォルダ

列

スクショモード

道路の太さ

×2

接続性

交差点を表示

凡例クリックで切替

▼

詳細設定 ▸

交差点の大きさ

1マスのサイズ

緯度 °

経度 °

Chrome拡張ダウンロード

SS サイズ

横 px

縦 px

Google Maps API Key を入力して「読込」を押してください

📋 座標をコピーしました

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