• #日記
  • #Vue3
  • #Nuxt
  • #oto-archive
  • #フィールドレコーディング
  • #マネタイズ
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分録ってみる(装備の重量・取り回しを体で確認)
  • 庭園マップの座標ズレを手動で修正し、各庭園の入園料・録音可否を埋める

関連記事