開発日記: 2026年1月11日 - 用語集ページとブログタグ機能
今日の作業
テスラジオのバリュー「難しくて専門的な話を面白く身近に」を体現する用語集ページを新規作成しました。さらに、ブログにタグフィルタリング機能を追加し、エピソードページから用語集への導線も整備しました。
用語集ページの新規作成
番組で登場する専門用語・キーワードを解説する用語集ページを作成しました。
収録内容:
- イーロン・マスク関連、テスラ製品・技術、AI・テクノロジー、EV・エネルギー、宇宙開発、ビジネス・投資、テスラジオ用語の7カテゴリ
- 計40以上の用語を収録
機能:
- キーワード検索
- カテゴリフィルター
- 関連用語リンク（クリックで検索を実行）
- URLハッシュ対応（
/glossary#spacexで直接アクセス） - リンクコピーボタン（特定用語のURLを共有可能）
- ハイライトアニメーション
ブログにタグフィルタリング機能を追加
ブログ一覧ページにタグフィルター機能を実装しました。
- 各記事のフロントマターにtagsを定義
- ページ上部にタグフィルターボタンを配置
- URLパラメータ（
?tag=xxx）で状態を保持・共有可能 - 記事詳細ページでもタグをクリック可能なバッジとして表示
エピソードページに用語集への誘導バナーを追加
「専門用語がわからない？用語集で40以上のテック用語を解説中」というメッセージで視聴者を用語集へ案内するバナーを追加しました。エピソードページのヒーローセクション下に配置し、視認性を確保しつつ邪魔にならないデザインに。
用語集に新しいテック用語を追加
最新のテック用語を5個追加しました：
- DOGE（政府効率化省）
- Powerwall
- ChatGPT
- Anthropic
- ハルシネーション
学んだこと
- 用語IDの設計: 日本語を含む用語IDは正規表現でURLに安全な文字のみを許可する必要がある
- ハッシュナビゲーション:
window.location.hashとhashchangeイベントを組み合わせることで、ブラウザの戻る/進むにも対応できる - タグフィルタリング: JSON.stringifyでdata属性に配列を保存し、JSON.parseで取り出すことでクライアントサイドでフィルタリング処理が可能
- コンテンツスキーマ: Astroの
z.array(z.string()).optional()でタグをオプショナルな配列として定義できる
次にやりたいこと
- エピソードの説明文に含まれるキーワードを用語集へ自動リンクする機能
- タグクラウド（人気タグを大きく表示）の実装
- 視聴者からの用語リクエストを受け付ける仕組み
- 用語の読み上げ音声機能の検討
この記事はClaude Codeによって自動生成されました。
