「この敷地の雨水、結局どこへ流れるの？」
側溝？水路？河川？
――地形図と等高線と現地勘で殴りがちな“あの作業”を、クリック1回で可視化したくて作りました。

📦 ソースコード

本記事で作成したツールのソースコード一式は、GitHubで公開しています。

0. これは何？（一言）

Google Maps上で起点をクリックすると、雨水が流れそうな経路を自動で追いかけ、河川／水域で止めるための、1HTML（単一ファイル）アプリです。

既存のGISソフトやハザードマップではカバーできない、「敷地単位の初動検討」に特化しています。

✅ インストール不要（ブラウザでHTMLを開くだけ）
✅ 国土地理院の標高タイルで「下りっぽさ」を評価
✅ 国土地理院の道路中心線（experimental_rdcl）をグラフ化して経路探索
✅ 河川中心線 + 水域ポリゴン（waterarea）で「到達」を判定
✅ Cloudflare Pages に置けば社員配布もラク（無料枠で十分動作）

1. なぜ作った？（建築の実務あるある）

既存ツールの「帯に短し襷に長し」問題

排水計画を立てる際、既存のツールには以下の課題がありました。

QGIS / ArcGIS（プロ向け）
- 重すぎる。 DEMデータを用意し、Fill Sinks→Flow Direction→Flow Accumulation...と解析すれば正確ですが、「営業中の車内でスマホで確認」はできません。
ハザードマップ（行政向け）
- 広域すぎる。 街ごとの浸水想定は分かりますが、「目の前の敷地の水が、右の側溝に行くか左の側溝に行くか」は分かりません。

目指したのは「初動の当たり」をつける道具

敷地の排水先の“ざっくり当たり”を、30秒で掴みたい
造成・排水計画の打合せで、 「たぶんこの方向に落ちます」 をその場で視覚的に説明したい
現地調査・水路管理者協議の前に、仮説を作りたい

※これは厳密な水理解析ではありません。
しかし、「当たりを付ける道具」があると、現場の意思決定が劇的に速くなります。

2. できること（機能一覧）

2.1 基本フロー

地図を開く（Google Maps）
起点をクリック
アプリが裏でデータ取得して「流下っぽい経路」を計算
水域（川・池など）に入ったら停止（または最大ステップで停止）
ルートを線で表示、ログ表示

2.2 画面の“パラメータ”が減った理由

以前より設定項目が少なく見えるのは、運用上つまずくポイントを減らすために、既定値で成立する範囲を増やしたからです。

よく触る設定だけ表に出す（例：探索の粗さ、最大ステップ、タイル取得範囲）
それ以外は内部の既定値に寄せて、まず動くことを優先

“全部調整できる”より、“誰でも迷わず動く”を優先しました。

※ すぐに試したい方は 5. 使い方へ飛んでください。

3. どういうロジック？（なぜQGISより実用的か）

「重力」ではなく「インフラ」に従う

一般的な水文解析（QGIS等）は「地形（重力）」に従って低い方へ水を流します。しかし、日本の市街地では水は地形に逆らってでも「道路側溝」等のインフラに沿って流れます。

そのため、このツールは以下のロジックを採用しました。

道路中心線ネットワーク上で経路探索する（側溝・管渠のメタファー）
そのネットワーク上で、標高が下がる方向を好むようにコストを付ける
水域に入ったら停止する

3.1 疑似コード（イメージ）

start = clickedPoint

G = buildGraphFromRoadCenterlineTiles(around=start)

for step in 1..maxSteps:
  candidates = neighbors(currentNode)
  
  // 次のノードを選択
  // 基本は距離コストだが、「上り勾配」には強いペナルティ(uphillPenalty)を課す
  choose nextNode that minimizes:
      cost = distance + uphillPenalty * max(0, elev(next)-elev(cur))
  
  append to path

  // 水域または河川中心線に到達したら終了
  if intersectsWaterArea(pathSegment) or nearRiverCenterline(cur):
      stop

4. 使っているデータ（一次情報リンク）

「水路とか川とか標高データとか、どこのデータを持ってきて決めてるの？」
→ ここが一番大事なので、出典をまとめます。

4.1 標高（国土地理院：標高タイル）

標高タイル（PNG） を読み、RGBから標高(m)へ変換して使います
仕様（RGB→標高の計算式）：
https://maps.gsi.go.jp/development/demtile.html
サンプル（標高を求めるプログラム）：
https://maps.gsi.go.jp/development/elevation.html

4.2 道路中心線（国土地理院 GitHub：experimental_rdcl）

道路中心線をズーム16のGeoJSONタイルで提供する実験
https://github.com/gsi-cyberjapan/experimental_rdcl

4.3 河川中心線（国土地理院 GitHub：experimental_rvrcl）

河川中心線をズーム16のGeoJSONタイルで提供する実験
https://github.com/gsi-cyberjapan/experimental_rvrcl

4.4 水域ポリゴン（国土地理院：ベクトルタイル提供実験 / waterarea）

国土地理院のベクトルタイル提供実験の説明
https://maps.gsi.go.jp/development/vt.html
提供実験のリポジトリ（位置づけ・注意）
https://github.com/gsi-cyberjapan/gsimaps-vector-experiment

4.5 出典表示（国土地理院：地理院タイル一覧）

“出典の明示”の扱い（タイル利用時の案内）
https://maps.gsi.go.jp/development/ichiran.html

5. 使い方（最短）

5.1 ローカルで試す

HTMLファイルをダウンロードして開く
APIキーを設定（後述）
地図が出たら起点クリック → ルート描画

※ iPhone等で file:// 直開きだと、外部importが制限されて動かない（CORSエラー等の）場合があります。その場合は Cloudflare Pages等で https 配信にしてください。

5.2 Cloudflare Pages に置いて社内配布（おすすめ）

GitHubにHTMLを置く（1ファイルでOK）
Cloudflare Pagesで「新規プロジェクト」→ GitHub連携
デプロイ完了したURLを社員へ配布

【重要】セキュリティ上の注意
HTML内にGoogle Maps APIキーを直書きする場合、GitHubのパブリックリポジトリにそのままPushしないよう厳重に注意してください。
プライベートリポジトリを使うか、APIキーにHTTPリファラ制限（後述）を必ずかけてください。

6. Google Maps APIキー（必須）と“ハマりどころ”

6.1 よくあるエラー：RefererNotAllowedMapError

Cloudflare PagesのURLを HTTPリファラ制限に入れてないと起きます。
公式のエラーメッセージ解説：
https://developers.google.com/maps/documentation/javascript/error-messages

対策：

Google Cloud Console → 認証情報 → APIキー
「アプリケーションの制限：HTTP リファラ（ウェブサイト）」をON
https://xxxx.pages.dev/* を許可リストに追加

6.2 料金は？（公式を参照）

料金体系は変更されやすいため、必ず公式Pricingを確認してください。

価格表（Pricing）：
https://mapsplatform.google.com/pricing/
課金体系の説明（Usage & Billing）：
https://developers.google.com/maps/documentation/javascript/usage-and-billing

7. Cloudflare Pages の料金は？

静的配信（Pages）中心なら Free Plan でかなり回せます。

Pages（公式）：
https://pages.cloudflare.com/
Pagesの制限（Limits）：
https://developers.cloudflare.com/pages/platform/limits/

Workers（Functions）を使う場合はWorkers側の課金体系に乗ります：

Workers 料金：
https://developers.cloudflare.com/workers/platform/pricing/

8. このツールの限界と注意点（重要）

実務で使用する際は、以下の「割り切り」と「リスク」を理解する必要があります。

8.1 構造的な限界

道路中心線 ≠ 側溝の流下方向
道路勾配、管渠、暗渠は考慮されません。あくまで「道路に沿って低い方へ」という推測です。
精度の限界（Zoom 16）
使用しているタイルデータの精度上、水平位置で数メートル（2m〜5m程度）の誤差を含みます。現況測量図レベルの微地形は反映されません。
私有地の通過
ネットワーク近似の結果、ルートが私有地を貫通して見えることがありますが、実際の水がそこを通るわけではありません。

8.2 実務上のリスク（雨水浸透）

「流して良いか」は別問題
このツールは「もし流れるならこっち」を示しますが、 「そこに流す許可が降りるか」 は別です。近年は雨水浸透施設の設置義務化が進んでおり、そもそも敷地外への放流が制限される地域もあります。

結論：
初動の仮説作りには最強ですが、現地調査・管理図確認・役所協議・排水同意の代わりにはなりません。

9. 今後の拡張アイデア

“河川到達”の判定を、中心線ではなく 水面ポリゴン優先に統一
流域面積の推定（グリッドで集水）
役所協議用に、ルート＋根拠ログをPDF出力
レイヤ差し替え（自治体公開の水路データ等が使えるなら最強）

10. 最後に

建築の現場って、 「正解を出す前に、まず当たりを付ける」 場面が多いです。
そこに HTML1枚×GIS は相性が良い。

「同業で使ってみたい」「データ差し替えたい」「ロジックを強化したい」などあればコメントください。

参考リンク（一次情報）

国土地理院：標高タイル仕様
https://maps.gsi.go.jp/development/demtile.html
国土地理院：道路中心線（experimental_rdcl）
https://github.com/gsi-cyberjapan/experimental_rdcl
Google Maps Platform：Pricing
https://mapsplatform.google.com/pricing/
Cloudflare Pages：Documentation
https://developers.cloudflare.com/pages/