--- title: OpenStreetMap Sound Demoの話 tags: #openstreetmap author: [Taro Matsuzawa aka. btm](https://docswell.com/user/smellman) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/2JVVNX8XJQ.jpg?width=480 description: OLL Award 2025受賞スピーチ published: May 28, 26 canonical: https://docswell.com/s/smellman/ZJW86J-2026-05-28-oll-awards-2025 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/2JVVNX8XJQ.jpg) OpenStreetMap Sound Demo の話 Taro Matsuzawa (@smellman) OSGeo.JP/OSMFJ/jus/Geolonia Inc. 2026/05/28 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/5EGLKV5RJL.jpg) 自己紹介 ● 松澤 太郎 (Taro Matsuzawa / @smellman) ● 一般社団法人 OpenStreetMap Foundation Japan (OSMFJ) 理事 ● 一般社団法人 OSGeo 日本支部(OSGeo.JP) 理事 ● 日本 UNIX ユーザ会 副会長 ● UNOpenGIS/7 lead enginner ● 株式会社 Geolonia GIS エンジニア ● かつてもじら組という組織の代表だったこともある OSS Stupid Program 2025 2 / 21 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/4JQYN6ZY7P.jpg) OpenStreetMap Sound Demo とは # Page. 4 ![Page Image](https://bcdn.docswell.com/page/K74WG43ZE1.jpg) OpenStreetMap Sound Demo ● URL: https://smellman.github.io/osm-sound-demo/ ● OpenStreetMap の建物を音楽に合わせて上下させる ネタアプリ ● 楽曲の周波数スペクトルで 3D ビルの高さがリアルタイムに変化 ● 楽曲は Otherman Records (CC BY-NC 2.1 JP) を全曲利用 ● 109 リリース分のトラック・アルバムを API 経由で取得 ● 元ネタは Mapbox の sound example、それを OSM で再構築 OSS Stupid Program 2025 4 / 21 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/LJ1YD41DEG.jpg) デモ画面（東京駅周辺） OSS Stupid Program 2025 5 / 21 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/GJWGYX8872.jpg) About モーダル OSS Stupid Program 2025 6 / 21 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/4EZLX68973.jpg) OpenStreetMap とは # Page. 8 ![Page Image](https://bcdn.docswell.com/page/Y76W42PD7V.jpg) OpenStreetMap (OSM) ● 世界中のマッパーが作る 自由に編集・再配布できる 世界地図 ●「地図版 Wikipedia」と呼ばれることも ● 2004 年に Steve Coast が英国で開始 ● データは ODbL (Open Database License) で配布 ● 道路・建物・店舗・水路・地形などあらゆる地物を含む ● 日本では OpenStreetMap Japan 及び OpenStreetMap Foundation Japan (OSMFJ) が活動 OSS Stupid Program 2025 8 / 21 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/G75MQ2K874.jpg) OpenStreetMap での僕の役割 ● OpenStreetMap Foundation Japan (OSMFJ) で理事 ● tile.openstreetmap.jp の管理人 ● openstreetmap.jp の再構築担当 ● Open Source Conference などに OpenStreetMap Japan コミュニティとして出 展 ● マッパーの一人、主に 千葉市若葉区 を中心にマッピング OSS Stupid Program 2025 9 / 21 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/9J29P4WVER.jpg) OSM には建物の高さも入っている ● 建物には height / building:levels などのタグが付与可能 ● 都市部はマッパーが地道に入力しており、高さデータが豊富 ● これがあるおかげで 3D ビル としてレンダリングできる ● 今回のデモはこの 建物の高さ を音楽に合わせて動かしている ● つまり OSM のデータがなければ成立しない遊び OSS Stupid Program 2025 10 / 21 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/DEY45MLQJM.jpg) 仕組み # Page. 12 ![Page Image](https://bcdn.docswell.com/page/VJNYNW4278.jpg) 技術スタック ● MapLibre GL JS — 3D ビルの fill-extrusion 描画 ● PMTiles — 単一ファイルでベクトルタイル配信 ● 地図スタイル/タイル: tile.openstreetmap.jp の planet.pmtiles ● Web Audio API — AnalyserNode で FFT 解析 ● TypeScript + Vite — ビルド ● Bootstrap 5 — UI（About モーダルなど） OSS Stupid Program 2025 12 / 21 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/YE9PRXQDJ3.jpg) 建物の高さはどう動かしているか ● AnalyserNode の fftSize = 32 → 16 ビン の周波数データ ● 建物を render_height で 16 段階 に分割し、 それぞれ別レイヤとして fill-extrusion を追加 ● 各フレームで dataArray[i] を取り、 レイヤ 3d-buildings-i の fill-extrusion-height を更新 ● 平均振幅で setLight の HSL 色相と intensity を変化 ● requestAnimationFrame でぐるぐる OSS Stupid Program 2025 13 / 21 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/GE8DW2G5ED.jpg) VJ モード ● PC のスピーカー出力をそのまま音源として取り込むモード ● getUserMedia({ audio: true }) で仮想入力デバイスから取得 ● Linux: PipeWire の module-remap-source で仮想マイクを作成 ● macOS: Loopback.app で出力 → 仮想入力にルーティング ● DJ アプリでも YouTube でも、何を流しても建物が踊る OSS Stupid Program 2025 14 / 21 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/LELMN2G37R.jpg) Archive.org の CORS 問題 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/4JMYX8QMJW.jpg) Otherman Records の音源は Archive.org 配信 ● Otherman Records の楽曲ファイルは archive.org に置かれている ● ブラウザから直接 fetch すると一部（というか大半）で CORS エラー ● crossOrigin = 'anonymous' を付けても通らないリソースが多数 ● そのままでは Web Audio API に MediaElementSource として渡せない ● → ストリーミング再生ができない OSS Stupid Program 2025 16 / 21 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/PJR9N58L79.jpg) VPS 上に Proxy を建てた ● GitHub: https://github.com/smellman/archive-org-proxy ● FastAPI + httpx で書いた小さなプロキシ ● proxy.smellman.org/proxy/{host}/{path} で archive.org を中継 ● CORSMiddleware で * 許可、ブラウザから普通に取得可能に ● Range ヘッダを透過転送 → シーク再生 / ストリーミングが動く ● host.endswith('archive.org') のみ許可（Open Proxy 化の防止） OSS Stupid Program 2025 17 / 21 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/PEXQNKL6JX.jpg) Proxy 実装のポイント ● httpx.AsyncClient(follow_redirects=True) で 302 を辿る ● StreamingResponse で aiter_bytes() を流すだけのシンプル実装 ● Content-Type / Content-Length / Content-Range / Accept-Ranges を返す ● Docker / docker-compose で VPS に常駐させて運用 ● ネタアプリのために本気のインフラが組み上がっていく OSS Stupid Program 2025 18 / 21 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/3EK9N5LGED.jpg) 開発遍歴 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/L73WVK3575.jpg) ここまでの道のり 1. 最初は mp3 をリポジトリに直置き 2. ストリーミング非対応で、Open Source Conference 等のデモで 通信エラーが頻 発 した 3. Otherman Records に楽曲情報の API があることに気づき、 勝手にスクレイピン グ する実装に変更 4. archive.org の楽曲が CORS 問題 で再生できず、 VPS に Proxy を実装して回避 5. 最後に VJ モード を実装して完成 OSS Stupid Program 2025 20 / 21 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/87DK834YJG.jpg) まとめ ●「地図と音を合わせたら面白そう」だけで作ったネタアプリ ● MapLibre の fill-extrusion + Web Audio AnalyserNode の素直な組み合わせ ● CORS 回避のためだけに VPS にプロキシを建てる というアホなインフラ ● VJ モードで DJ アプリ流しながら街が踊る、いつでもどこでも DJ 気分 ● ソース: https://github.com/smellman/osm-sound-demo OSS Stupid Program 2025 21 / 21