2026年2月14日の開発日記

Tokyo Soundscapeプロジェクトにほぼ丸一日を使った日。サイト構築、分析ダッシュボード、収録カレンダー、市場調査と、プロジェクトの基盤を一気に整えた。mdx-playground側ではBlogCalendarのカテゴリ整理も実施。

今日やったこと

1. サウンドアーカイブサイトの構築・デプロイ

Nuxt 3 + Nuxt Contentでサウンドアーカイブのウェブサイトを構築し、Cloudflare Pagesにデプロイ。モックHTMLをベースに、ランディングページ、商品詳細ページ、定点観測スポット、機材情報、利用規約（日英）など全ページを実装した。

主な成果:

全11ページをNuxt 3で実装、Chrome DevToolsで動作確認
Nuxt 4のコンポーネント命名規則問題を解消（LibraryLibraryCard → LibraryCard）
PowerShellデプロイスクリプト作成（bash版はWSLが起動する問題があった）
OGP/SEO設定、favicon SVG作成、otoarchive.comドメイン設定
機材ページにAmazon商品画像を背景表示するカードコンポーネント

詳細: Nuxt 3でサウンドアーカイブサイトを構築してCloudflare Pagesにデプロイした

2. YouTube動画分析ダッシュボード

yt-dlpで散歩系YouTubeチャンネルの全動画メタデータ約1,500件を取得し、Vite + Vue 3 SPAで分析ダッシュボードを構築。最終的にMiller Columnレイアウトに全面移行した。

主な成果:

yt-dlpでのデータ取得（cp932エンコーディング対処、Firefox Cookie利用）
Chart.jsでOverview/Trends/Locations/Videosの4ページ構成
Miller Columnレイアウトに全面移行（mdx-playgroundの理科コンテンツ実装をベースに）
YouTube Data APIでTop 100動画のコメント9,859件を取得・分析
10バッチ並列処理で100動画の日本語コメント分析を実施

詳細: YouTube動画分析ダッシュボード構築

3. 年間収録カレンダー・スポット管理

GPS座標の公開リスク対策を行い、年間収録カレンダーを実装。桜スポット4箇所も追加した。

主な成果:

GPS座標・録音スケジュールを公開ページから完全削除（publicSpotsエクスポートでtree-shaking対応）
年間一覧表（縦=日付、横=月）＋イベント列＋スケジュールルールサイドバー
桜スポット4箇所追加（浅草寺、千鳥ヶ淵、目黒川、上野公園）
年間サマリー自動計算（163セッション、163時間生録音、約49時間編集後）

詳細: 収録カレンダーとスポット管理の実装

4. BlogCalendarのカテゴリ整理

mdx-playgroundのBlogCalendarにdiaryカテゴリを新設し、開発日記を独立フィルタとして管理できるようにした。

主な成果:

FilterTypeにdiary追加、log削除
既存34件のdiaryファイルのcategory一括変更（dev→diary）
make-diaryスキルに著作権・プライバシー保護ルールを追加（書籍名のぼかし等）

詳細: BlogCalendarのカテゴリ整理

5. フィールドレコーディング市場の競合分析

都市環境音・フィールドレコーディング市場のプレイヤー分析と、空間音響素材のニッチ市場を発見した。

主な成果:

主要プレイヤーのプロファイル可視化（HTML、円換算、横断比較チャート）
空間音響（Ambisonic）素材がブルーオーシャンであることの発見
少量コンテンツで長期販売可能なビジネスモデルの知見
録音機材の調査・検討

詳細: フィールドレコーディング市場の競合分析と空間音響素材のニッチ発見

今日の学び

Nuxt 4のコンポーネント自動インポートは、ディレクトリ名とファイル名の重複プレフィックスを除去する
yt-dlpのYouTubeボット検出はFirefox Cookieで回避できる（Chrome/Edgeは使えなかった）
GPS座標の公開は録音者の行動パターン特定リスクがある → tree-shakingで内部データを分離する設計が有効
Miller Columnは階層データの探索UIとして非常に相性がよい
空間音響素材は競合が少なく、少量のコンテンツでも長期的に価値を持つ

明日やること

サイトのモバイルレスポンシブ確認
ダッシュボードの最終調整・ドキュメント整備
収録カレンダーのスケジュール詳細詰め
Ambisonicレコーダーの使い方調査

関連記事