音アーカイブサイト開発と浅草フィールドレコーディング

TASCAMで録った浅草音源のサイト追加から始まり、音声分析カテゴリの再設計、フォーマット比較、山手線ページのプロトタイプ、マップ機能の拡充と、コンセプトサイトを横断的に触った一日だった。最終的に山手線ページは許諾の壁で没にしたが、得られた知見は多い。

浅草TASCAM音源の追加

Portacapture X6で録った浅草の音源をコンセプトサイトに追加した。既にiPhoneで録ったバージョンがあったので、iPhone版とTASCAM版を並べてカード2枚構成にした。

同じ場所・同じ時間帯の音を録音機材違いで聴き比べられる構成。TASCAM版は低域の解像度が明らかに違い、雷門前の雑踏の空気感がよく録れていた。

PANNs音声分析カテゴリの再設計

前日まで使っていたPANNsの分類カテゴリが浅草の音に合っていなかったので、再設計した。

変更内容

AudioSetの527カテゴリから浅草向けに5カテゴリへ集約:

「音楽」「交通音」といったカテゴリは削除した。浅草寺周辺では交通音はほぼ聞こえないし、音楽もBGMとして商店カテゴリに含めたほうが実態に合う。場所ごとにカテゴリを最適化するのが正解だと分かった。

AAC/WAV A/B比較の検証と撤去

聴き比べ用のA/Bトグル機能を実装して、WAV原音とAAC圧縮版を切り替えられるようにした。

結果として、AAC 192kbpsとWAVの違いは環境音ではほぼ聴き分けられなかった。ヘッドフォンで注意深く聴いても差が分からないレベル。Web配信でWAVを使うメリットがないため、AAC 192kbpsに統一してA/B機能自体を撤去した。

ファイルサイズは1/5程度になり、R2のストレージコストとCDN転送量の両方で効く。

山手線30駅音響比較ページ

HTMLプロトタイプとして作っていた山手線30駅の音響比較ページをNuxtコンポーネントに変換して実装した。

実装した要素

• 電車スクロールアニメーション: スクロール位置に連動して電車アイコンが路線図上を移動する
• ルートナビバー: 30駅を線状に並べたナビゲーション。現在地をハイライト
• 30駅セクション: 各駅ごとにプレイヤーと音の特徴を記述するセクション

.client.vueのcomposable問題

Nuxtの.client.vueコンポーネント内でVue composableを使ったところ、composable内のonMountedが発火しない問題にはまった。

.client.vueはクライアントサイドでのみレンダリングされるが、コンポーネントのsetup時点ではまだDOMがマウントされていない。composable内のonMountedはsetup中に呼ばないとライフサイクルフックとして登録されない。

// NG: onMounted内でcomposableを呼ぶとフックが登録されない
onMounted(() => {
  const { data } = useMyComposable() // ライフサイクル外
})

// OK: nextTickで1フレーム遅延させる
const { data } = useMyComposable()
await nextTick()

ルートナビバーUIの改善

ナビバー上で2つの駅の点が被る問題があった。駅間隔が狭い区間（日暮里-西日暮里など）で発生。線路風のデザインに変更して、レール2本の間に枕木を描画するスタイルにした。電車アイコンのセンタリングも修正。

スペースキーバグの修正

Player.client.vueにグローバルなkeydownリスナーを登録していたため、プレイヤーのないページでもスペースキーを押すとイベントが発火してスクロールが止まるバグがあった。

mountedフラグを導入して、コンポーネントがマウントされている間だけリスナーが反応するように修正。onUnmountedでフラグをfalseにすることで、ページ離脱後の誤動作を防いだ。

Traces Playerの時刻表示改善

再生中の経過時間表示を、録音時の実時刻(JST)表示に変更した。「0:00 / 45:00」ではなく「14:23 JST」のように、フィールドレコーディングした実際の時刻が分かる形式。

ヘッダーUIも整理した。バージョン表記（v0.1）を削除し、録音日時を目立つ位置に移動。「2026年2月15日 浅草寺周辺」のように場所と日時がすぐ目に入る構成にした。

フィールドワークマップの拡充

Leafletベースのフィールドワークマップを大幅に拡充した。

追加した機能

• ルート表示: OSRMを使って実際の道路に沿ったルートを描画。直線ではなく歩行経路が分かる
• 音フェーズのガントチャート: 工事前/工事中/工事後/定着後の4フェーズで音環境の変化をタイムラインで可視化
• 撮影対象・消滅時期データ: 建物の解体予定や再開発スケジュールを重ねて、「いつまでにこの音を録る必要があるか」を把握

フィールドレコーディングの計画ツールとしての色が強くなってきた。

庭園マップの新規作成

東京の日本庭園15箇所をLeafletでマッピングした。定点撮影と環境音の録音スポットとして整理する目的。

庭園は環境音のバリエーションが豊富で（水音、鳥、風、砂利を踏む音）、かつ周辺の都市騒音が遮断されやすい。録音スポットとしての条件を評価するメモも各地点に付けた。

山手線ページの没判定

一通り実装してから、駅構内での録音に関する許諾の問題を調べた。商用利用を前提にすると、JR各社への許諾申請が必要で、個人での取得はハードルが高い。収益化が見込めないコンテンツにリソースを割く判断はできないため、山手線ページは没とした。

実装で得たスクロール連動アニメーションやルートナビバーの知見は、他の路線や街歩きコンテンツに転用できる。技術的には無駄ではなかった。