音アーカイブ コンセプトサイト開発 - ラベル重複解消、音の字幕、GeoJSON軽量化

前日に持ち越していたBLDGラベル重複問題の解消から始まり、音の字幕（Audio Captions）機能の計画・実装、GeoJSONの軽量化、GPXデータ整理、カレンダー機能の移行と、コンセプトサイトを多方面にわたって整備した。

BLDGラベル重複の解消

前日のOSM建物オーバーレイで、permanent tooltipが104個表示されてラベルが重なりまくっていた問題を解消した。

やったこと

• ラベルを104個から10個にフィルタリング: ランドマーク建物のみに絞り、POI系のノードラベルは非表示に変更
• OSM名称の表記ゆれ修正: 「沙竭羅龍王像」の「龍」が「竜」になっていたケースなど、OSMデータ由来の表記ゆれを修正
• get_permanent_label関数の分離: POI用とBLDG用で別の関数に分離し、建物ラベルとPOIラベルの表示ロジックを独立させた

Codexによるコードレビューも実施して、ラベル周りのロジックが整理できたことを確認した。

BLDGボタンのUI改善

建物オーバーレイのトグルボタンを画面右上に移動し、シアン色で統一した。地図の操作UIと馴染みつつ、目立つ位置に配置することで視認性を上げた。

音の字幕（Audio Captions）機能

この日のメインの作業。プレイヤーで再生中の音声に合わせて、画面下部に字幕を表示する機能を実装した。

計画

環境音を聴いているだけでは「何の音か」がわかりにくい場面がある。歩行者の位置と時間に紐づいた字幕を表示することで、音風景の体験をガイドする狙い。

キャプションデータ

JSON形式でキャプションデータを定義した。各エントリに開始・終了時刻とテキストを持たせるシンプルな構造。

MGS風HUDでの表示

Traces Playerの画面下部に、MGS（メタルギアソリッド）の無線通信風のHUDとして字幕を表示するようにした。既存のMGSソリトンレーダー風UIとトーンを揃えた。

Playwrightでスクリーンショットを撮りながら調整

キャプションの表示タイミングとウォーカー（歩行者マーカー）の位置関係を確認するために、Playwrightでスクリーンショットを撮りながら修正を繰り返した。「雷門を通過」のキャプションが実際に雷門付近で表示されるか、といった位置合わせの作業。

trace-captureスキルも作成して、この撮影→確認→修正のサイクルを効率化した。

GeoJSONの軽量化

建物データのGeoJSONファイルが大きかったので段階的に軽量化した。

最終的な方針は「建物ポリゴンは全部表示するが、名前ラベルはランドマーク建物にだけ付ける」という形に落ち着いた。軽量化したGeoJSONはR2にもアップロードした。

GPXデータの整理

GPXファイルにTrack1（2/14の経路）とTrack2（2/15の録音区間）が結合されていたのを、Track2（13分22秒）だけに切り出した。プレイヤーで使うのは録音区間だけなので、不要なTrack1を除去してデータをすっきりさせた。整理後のGPXはR2に再アップロード。

concept.localhost サブドメイン対応

ローカル開発環境で localhost:3100 にアクセスした場合に concept.localhost:3100 へリダイレクトするミドルウェアを追加した。サブドメインベースのルーティングに合わせて、URLの一貫性を保つための対応。

カレンダー機能のconcept移行

site側（本体サイト）に仮置きしていたカレンダー機能をconcept側に移行した。ページ、コンポーネント、画像ファイルをまとめて移動し、site側からは削除。

キャプションJSONのR2アップロード

本番環境（concept.otoarchive.com）でキャプションが表示されない問題が発生。原因はキャプションJSONがローカルにしかなかったため。R2にアップロードして解決した。

ナビゲーション表記の変更

サイトのナビゲーションに表示していた「音アーカイブ コンセプト」を「OTO ARCHIVE CONCEPT PAGE」に変更。英語表記に統一して、ブランドのトンマナを揃えた。

ふりかえり

ラベル重複は「全部出す」から「選んで出す」への方針転換で一気に解決した。地図UIでは情報量の制御が見やすさに直結する。

音の字幕機能はPlaywrightでスクリーンショットを撮りながらの位置合わせが地味に手間だったが、trace-captureスキルを作ったおかげで後半は効率が上がった。字幕があると環境音の体験が段違いにわかりやすくなるので、他のトレースにも展開したい。

GeoJSONの軽量化は「何を描画して何にラベルを付けるか」を分けて考えることで、データ量と見やすさの両立ができた。