2026年2月16日の開発日記

Tokyo Soundscape（oto archive）プロジェクトに集中した一日。朝7時から夜まで、浅草寺のフィールドレコーディングを題材に、サウンドスケーププレイヤーの開発・インフラ整備・地図データの拡張を一気に進めた。

今日やったこと

1. 浅草寺サウンドスケーププレイヤーの開発

GPXデータによる歩行ルート表示と、録音した環境音のリアルタイム解析・可視化を統合したプレイヤーを完成させた。

主な成果:

JSXデモからHTMLデモへの変換（Leaflet + GPXトラック + 音声再生の統合）
Python音声解析パイプライン構築（librosa + PANNsで527カテゴリの音分類）
MGSソリトンレーダー風UIの実装（回転スキャンライン、ソナーリング、人声検出連動）
コックピットレイアウト（地図2/3 + 計器パネル1/3）
スペクトログラム・サウンドレイヤータイムラインの全体プリレンダリング+カーソル方式
音声シーク問題の解決（Blob URL方式）
Nuxt 3のVueコンポーネント（Player.client.vue）への移植とデプロイ

詳細: 浅草寺サウンドスケーププレイヤーの開発

2. プロジェクトインフラの整備とビルド高速化

コンセプトサイトのアクセス制限、ビルド時間の劇的な短縮、動画書き出し手法の検討を実施。

主な成果:

Cloudflare Accessでメール認証を設定（パスワード不要、ワンタイムPIN方式）
ライブラリデータをR2に移行し、プリレンダーを5,850ルート→38ルートに削減
ビルド+デプロイが約1分10秒に短縮
R2のCORS設定とカスタムドメイン（assets.otoarchive.com）の構築
動画書き出し方法の検討 → OBS 4K録画（NVENC H.264, CQP 18）に落ち着いた

詳細: Cloudflare AccessとR2でコンセプトサイトのインフラを整備した

3. OSM建物オーバーレイとGPXトレース修正

地図上に浅草寺周辺の建物やPOIを重ねて表示する機能を追加。GPXの精度問題も修正した。

主な成果:

GPXトレースの本堂内通過問題を発見・修正（南側境界にクリッピング）
Overpass APIで1,400棟の建物データを取得、ランドマーク11棟を選別
仲見世通りの店舗236件、寺社POI 176件もオーバーレイ
BLDGトグルボタンでレイヤーのON/OFF切り替え
ラベル重複問題を発見 → 計画作成して明日以降に持ち越し

詳細: OSM建物オーバーレイとGPXトレース修正

今日の学び

PANNsは527カテゴリの音分類ができるが、Windows環境ではwgetがないためモデルDLに一工夫必要
python -m http.serverはHTTP Range Requestsに非対応。音声シークにはBlob URL方式が有効
SSGで5,000ページ超をプリレンダーするとビルドが重い。R2+SPAで配信すればビルドが劇的に速くなる
Cloudflare Accessの無料枠は50ユーザーまで。51人目から$7/user/monthに跳ね上がる
OSMのOverpass APIは建物ポリゴンだけでなく、彫像・モニュメント・店舗などノード情報も取得可能
GPSはビルの谷間（アーバンキャニオン）で精度が落ちる。建物内通過はGPS誤差の典型的なパターン

明日やること

ラベル重複解消の実装（厳選 + 配置制御）
conceptサイトの本番確認（Cloudflare Access経由）
動画書き出しの実際のテスト（OBS録画 → Premiere音声合わせ）

関連記事