0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

2025年、生成AIを使ってみてどうだった？
@architectJapan(建築士×ChatGPT コード書けない開発者)

【建築士×GIS】Google Maps上で「雨水の流下経路」を1クリック追跡する“HTML1枚”ツールを作った（国土地理院 標高×道路中心線×Cloudflare Pages）

Last updated at Posted at 2026-01-29

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

001.jpg

📦 ソースコード

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

0. これは何？（一言）

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

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

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

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

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

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

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

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

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

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

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

2.1 基本フロー

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

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

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

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

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

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

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

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

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

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

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

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 標高（国土地理院：標高タイル）

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

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

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

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

5. 使い方（最短）

5.1 ローカルで試す

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

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

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

  1. GitHubにHTMLを置く（1ファイルでOK）
  2. Cloudflare Pagesで「新規プロジェクト」→ GitHub連携
  3. デプロイ完了した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

対策：

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

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

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

7. Cloudflare Pages の料金は？

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

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

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

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

8.1 構造的な限界

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

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

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

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

9. 今後の拡張アイデア

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

10. 最後に

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

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

参考リンク（一次情報）

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?