2026年2月15日の開発日記

今日はtokyo-onkeiプロジェクトに集中した1日。音アーカイブのコンセプトサイト構築が大きく進み、フィールドワークマップのUI改善も一通り完了した。夕方にはEurekapuのNuxt 4移行プロジェクトも始動。

今日やったこと

1. 音アーカイブ 2031コンセプトサイト構築

既存のotoarchive.comが5年後にどう進化しているかを示すビジョンサイトをNuxtで構築した。

主な成果:

ブランド名を「oto archive」（小文字）に決定、既存サイトのトンマナ（波形背景、コンセプトセクション）を移植
Netflix風の横スクロールカルーセル（新着/人気/季節のおすすめ）を実装
188地点マスターデータ + ライブラリ生成関数で5,850件のアイテムを自動生成
個別詳細ページにLeaflet + CartoDB Dark Matterタイルで地図を統合
11,732ルートのSSGプリレンダリング成功（135秒）
シーン×ライブラリのデータ統合（subScene導入、データ駆動化）
Cloudflare Accessによるメール認証の調査、フィールドワーク統合計画の策定

詳細: oto archiveの2031年コンセプトサイトをNuxtで構築した

2. フィールドワークマップ（インタラクティブ地図）

東京再開発×音のフィールドワークマップをLeaflet.jsで大幅にUI改善した。

主な成果:

ポップアップ式 → カード常時表示 → 左右優先配置と段階的に改善
巨大青ピン問題の原因特定と解決（#overlay svgのCSS干渉）
優先度フィルタ（5段階）+ 自動ズーム + ナビゲーション機能
Unsplash画像 → Wikimedia Commonsの実際の場所写真に全41件差し替え
detailパネルにExcel由来データ（竣工予定、ルート計画、月別アクション）を追加
黒背景でのテキスト視認性改善

詳細: Leaflet.jsで東京再開発フィールドワークマップを構築した

3. Eurekapu Nuxt 4移行プロジェクト始動

Vue 2製の学習プラットフォームをNuxt 4に移行するプロジェクトを開始した。

主な成果:

既存の移行計画ドキュメントをNuxt 4.3ベースに更新
Codex CLI（GPT-5.3）でドキュメントレビュー → 9件の指摘を修正
Phase 1: Nuxt 4.3.1プロジェクト作成、Vuetifyを試して撤退
Scoped CSS方式（外部ライブラリ非依存）に方針転換
SSG前提、Firebase認証廃止、重要ページから段階的移行の方針決定

詳細: Eurekapu Nuxt 4移行プロジェクト始動

今日の学び

Leaflet.jsで#overlay svgのようなグローバルなCSSルールがSVGアイコンに意図せず干渉する問題は、要素のスコープを限定することで解決できる
5,850件×2（HTML + payload）= 11,732ルートのSSGも135秒で完了。Nuxtのプリレンダリングは相当スケールする
Vuetifyは見た目の統一感があるが、独自デザインを追求するならScoped CSSの方が自由度が高い
Codex CLIのドキュメントレビューは、URL戦略やロールバック手順など見落としがちな点を指摘してくれて有用

明日やること

音アーカイブ: フィールドワークマップデータのconceptサイトへの統合実装
音アーカイブ: Cloudflare Accessのメール認証設定
Eurekapu: Phase 2（主要ページの移行開始）

関連記事