daily-log
2026年2月18日の開発日記
朝はTASCAMで録った浅草の音源をサイトに載せ、昼過ぎには山手線30駅ページに電車スクロールアニメーションが動いていた。だが法的調査で駅構内録音の商用利用が壁にぶつかり、夜には「消えゆく東京の音風景」への方向転換を決断していた。並行してmdx-playgroundのステレオテストページもVueに移植して仕上げた。
今日やったこと
1. ステレオサウンドテストページの実装(mdx-playground)
ReactのJSXで書いていたステレオテストをVue 3/Nuxtに移植した。StereoWaveCanvasコンポーネントを新規作成し、Web Audio APIでL/Rチャンネルの出し分けテストができるページに仕上げた。
主な成果:
- StereoWaveCanvas.vue — Canvasの波形アニメーションコンポーネント
- stereo-test.vue — 6種類の音源×4つのパンニングモード
- index.vueにサウンドカテゴリのナビカード追加
- Chrome DevTools MCPでUI確認
詳細: ステレオサウンドテストページをVue 3/Nuxtで実装
2. 音アーカイブサイト開発(tokyo-onkei)
コンセプトサイトを横断的に触った。朝のTASCAM音源追加から始まり、山手線ページの実装と没判定、マップの拡充まで。
主な成果:
- TASCAMで録った浅草音源をサイトに追加(iPhone版と並列カード)
- PANNsの分類カテゴリを5種に再設計(群衆/商店/寺院/自然・水/環境音)
- AAC/WAV A/B比較→AAC 192kbpsで十分と判明、A/B機能撤去
- 山手線30駅ページをNuxtで実装(電車スクロールアニメーション、ルートナビバー)
- .client.vueのcomposable問題を解決(nextTickパターン)
- Traces Playerの時刻表示を実時刻(JST)に変更
- フィールドワークマップにルート表示・音フェーズガントチャート・撮影対象データを追加
- 庭園マップを新規作成(東京の日本庭園15箇所)
- 山手線ページは許諾の壁で没判定
詳細: 音アーカイブサイト開発と浅草フィールドレコーディング
3. 音アーカイブの事業戦略(tokyo-onkei)
マネタイズ仮説7つを洗い出し、法的調査でJR駅構内の録音が商用には厳しいことが判明。駅ベースから「消えゆく東京の音風景」への方向転換を決断した。
主な成果:
- 駅構内録音の施設管理権・著作権の問題を整理
- 既存類似サービスの調査(黙認状態だが収益化は別問題)
- YouTubeの環境音チャンネルをベンチマーク調査
- 撮影・録音の装備構成を策定(TASCAM X6 + Sony α7C + スマホ)
- 20-30分歩行 + 15分定点のサイクル案
- 庭園での定点撮影が競合少なく有望と判明
詳細: 音アーカイブの事業戦略 - 法的課題とマネタイズ転換
今日の学び
- .client.vueでVue composableを使うときは、onMounted内ではなくsetupトップレベルで呼ぶ。DOMアクセスが必要ならnextTickを挟む
- AAC 192kbpsとWAVを並べてヘッドフォンで何度切り替えても、違いを指させなかった。A/B比較機能ごと撤去した
- PANNsの分類カテゴリは場所ごとに最適化すべき。汎用カテゴリだと実態と乖離する
- 山手線30駅ページを一日がかりで作り込んだ直後に「施設管理権で商用不可」と知った。30分の法的調査で防げた手戻りだった
- 時間経過で価値が増すコンテンツは、今始めることに意味がある
明日やること
- 都内の日本庭園リスト作成(録音条件の良い場所を選定)
- TASCAM X6 + α7Cを持って近所の公園で20分録ってみる(装備の重量・取り回しを体で確認)
- 庭園マップの座標ズレを手動で修正し、各庭園の入園料・録音可否を埋める