• #nuxtjs-i18n
  • #i18n
  • #rebrand
  • #navigation
  • #equipment
  • #cloudflare-pages
  • #tokyo-soundscape
開発tokyo-onkeiメモ

音アーカイブ本番サイトを多言語化・リブランド・ナビ再構成・機材更新した

本番サイト（otoarchive.com）に対して、多言語化、プロジェクト名のリブランド、ナビゲーション構造の見直し、機材情報の更新を一日でまとめて実施した。コンセプトサイト側にも同等の変更を反映してデプロイまで完了。

多言語化（i18n）

@nuxtjs/i18n v10の導入

@nuxtjs/i18n v10を導入して、日本語（ja）・英語（en）・中国語（zh）の3言語に対応した。

設定のポイントは以下のとおり。

  • strategy: 'prefix_except_default' で日本語はプレフィックスなし、英語は /en/、中国語は /zh/ のURL構造
  • ロケールファイルは locales/ja.json, locales/en.json, locales/zh.json に分離
  • 全コンポーネント・ページのハードコードされた日本語テキストを $t() に置き換え
  • <NuxtLink> のパスを localePath() でラップしてロケール対応

コンポーネント変換の作業量

HeroSection、Navigation、Footer、LibraryCard、EquipmentCardなど、テキストを含む全コンポーネントが対象になった。ロケールファイルのキー設計は hero.title, nav.library, equipment.recorder のようにセクション単位でまとめた。

利用規約とプライバシーポリシーは、以前はマークダウンファイルで日英を分けていたが、i18n導入後はVueページ内で $t() を使う方式に統一した。

SSGビルド確認

3言語分のルートを含む82ルート全てがSSGビルドに成功した。言語ごとにプリレンダリングされるので、ルート数は単純に3倍近くになる。

LocaleSwitcher

ヘッダーに言語切り替えUIを配置した。当初はボタン並列だったが、3言語になると横幅を取るので、ドロップダウン式に変更した。現在の言語名を表示し、クリックで他の言語を選べる形式。

ドキュメント整備

CLAUDE.mdにi18nの対応方針を追記し、新しいページやコンポーネントを追加する際のi18n対応手順をメンテナンスガイドとしてまとめた。ロケールキーの命名規則や、翻訳漏れのチェック方法など。

リブランド

「Tokyo Soundscape Archive」から「音アーカイブ / oto archive」にプロジェクト名を全面変更した。

変更範囲

  • ロケールファイル（ja/en/zh）のサイト名・説明文
  • HeroSectionのタイトル・サブタイトル
  • 利用規約・プライバシーポリシーの事業者名表記
  • OGP / SEOメタデータ
  • フッターのコピーライト表記

ドメイン（otoarchive.com）はそのまま使えるので、URLの変更は不要だった。

ナビゲーション再構成

ライブラリの2カテゴリ分割

それまで「ライブラリ一覧」として一覧表示していた音源を、「消えゆく音」と「残り続ける音」の2つのカテゴリに分割した。

  • /library/fading -- 消えゆく音（再開発や環境変化で失われつつある音）
  • /library/enduring -- 残り続ける音（歴史的・文化的に保存されている音）

soundTypeフィールドの配列化

音源データの soundType フィールドを文字列から配列に変更した。ひとつの音源が「消えゆく音」と「残り続ける音」の両方に属するケースがあるため。たとえば歴史ある寺院の鐘の音は「残り続ける音」でありつつ、周囲の環境音は変化し続けている。

// before
soundType: 'fading'

// after
soundType: ['fading', 'enduring']

残り続ける音のサンプルコンテンツ

「残り続ける音」カテゴリの仮コンテンツとして、京都・知恩院の梵鐘を作成した。画像はWikimedia Commonsのパブリックドメイン素材を使用。実際の音源はまだ録音していないので、メタデータとビジュアルのみ。

機材情報（Equipment）の更新

実際に使う機材に合わせてEquipmentページを全面的に見直した。

追加・変更した機材

  • レコーダー: TASCAM Portacapture X6に変更。専用ケース、ウインドスクリーンも追加
  • カメラ: Sony a7C + SEL20F18Gレンズを追加。動画・スチル兼用で、フィールドワーク時の記録用
  • Kestrel 5500気象計: フィールドレコーディングのメタデータ取得用として検討中。温度・湿度・気圧・風速を1台で計測可能。CSV出力に対応しているので、録音メタデータとの紐付けが容易。Amazonリンクを機材ページに追加

削除した機材

  • Cinela Wind Protection: 当面は付属ウインドスクリーンで十分と判断
  • Starter Kitセクション: 個別機材の紹介に統合
  • Sony PCM-D100: Portacapture X6に置き換え
  • MKH 8040 / MKH 30マイク: 高価で優先度が低いため削除。将来的に追加する可能性はあるのでメモに記録
  • GPSロガー: DG-PRO1Sなどをリサーチしたが、スマートフォンのGPSで当面は代替可能と判断。調査結果はメモに記録

Kestrel 5500の調査

フィールドレコーディングでは、録音時の気象条件がメタデータとして重要になる。Kestrel 5500は米軍でも採用されている気象計で、以下の点が魅力的だった。

  • 温度、湿度、気圧、風速、風向をワンストップで計測
  • データロギング機能でCSV出力可能
  • 防水・耐衝撃で屋外使用に適している
  • Bluetooth対応モデルならスマートフォンでリアルタイム確認

購入するかは検討中。まずはスマートフォンアプリの気象データで代替して、精度が必要になったら導入する方針。調査結果はメモに記録した。

デプロイ

本番サイト・コンセプトサイトの両方を更新・デプロイした。SSGビルドは82ルートで問題なく完了。

ふりかえり

i18nの導入は、既存コンポーネントの全テキストを洗い出す作業が大半を占めた。$t() への置き換え自体は機械的だが、ロケールキーの命名を統一的に設計しないと後から破綻する。今回は セクション名.要素名 の2階層で統一したのが良かった。

リブランドとナビ再構成は、i18nと同時にやったことで一回の大改修にまとめられた。個別にやると毎回ロケールファイルの修正が発生するので、まとめて正解だった。

機材ページは「欲しいもの一覧」から「実際に使うもの一覧」に方針転換した。持っていない高価な機材を並べるより、手持ちの機材で何ができるかを示すほうが説得力がある。将来追加する可能性のある機材はメモに残して、実際に購入したらページに追加する運用にした。