本プロジェクトはDBを持たず、microCMSのコンテンツモデルがデータの正となる。

現状のモデル(frontend/src/external/microcms/types.tsのBlog)

export type Blog = {
  id: string;
  title: string;
  content: string;
  eyecatch?: { url: string; width: number; height: number };
  publishedAt: string;
};

モック画面を実現するには、カテゴリ・要約・カード装飾用の情報が不足している。

提案するmicroCMSスキーマ

blogs(既存APIを拡張)

フィールドID 表示名 型 備考
title タイトル テキストフィールド 既存
content 本文 リッチエディタ 既存
excerpt 要約 テキストフィールド 記事の説明文(モックの「ユニオン型と型ガードで、安全で読みやすいコードに。」に相当)。画面には表示せず、記事詳細のmeta description・OGP(openGraph.description)にのみ使う。未入力の場合はルートの既定のdescriptionになる
categories カテゴリ セレクトフィールド(複数選択) フィルタタブ・TOPICSに使用。React / TypeScript / Next.js / CSS / Testing / Git 等。選択肢の文字列はコード側のテーママッピングのキーと一致させる。レスポンスはstring[]
eyecatch アイキャッチ画像 画像 既存(現状カードでは未使用、詳細ページ等で活用余地あり)
publishedAt 公開日時 既存の公開日時 既存

カード装飾(配色・大きな装飾文字)はmicroCMSにフィールドを持たず、カテゴリから実装側で自動導出する方針(先頭カテゴリ→テーマの固定マッピング、装飾文字は先頭カテゴリ名)。記事ごとに手動設定する運用コストを避けるための判断。必要になった場合のみcardTheme等を後から追加する。

カテゴリの管理方法

カテゴリは独立したAPI(コンテンツ参照)にせず、blogsの**セレクトフィールド(複数選択)**で管理する。レスポンスは文字列の配列(["React", "TypeScript"])で、カテゴリ名がそのまま識別子になる(slug・idは持たない)。選択肢の追加時は、コード側のCATEGORIESとテーママッピングにも反映する。カテゴリごとに説明文やアイコンを持たせたくなった場合に、独立APIへの移行を検討する。

profile(新規・必須、オブジェクト形式=1件のみ)

内部プロフィールページ(/profile)の本文が長く、リッチエディタで編集したいため、microCMSのオブジェクト形式(シングルトン)で管理する。サイドバーの著者カードも同じデータを使う。

フィールドID 表示名 型 用途
name 名前 テキスト 著者カード(例: ある Web エンジニア)
role 肩書き テキスト 著者カード(例: フロントエンドエンジニア)
bio 自己紹介(短文) テキストエリア 著者カードの3行程度の紹介文、/profileのメタdescription
avatar アバター画像 画像 著者カードの円形アバター。未設定ならm_ロゴで代替
mainImage メイン画像 画像(任意) /profile上部のメインビジュアル
content プロフィール本文 リッチエディタ /profileの本文(「何をしている人か」「経歴」「スキル」など)
snsLinks SNSリンク 繰り返しフィールド(type: セレクト / url: テキスト) 著者カードのSNSアイコン(GitHub / X など)

about(新規・必須、オブジェクト形式=1件のみ)

内部ページ(/about)の本文を運営者が管理画面から編集できるように、profileと同じくmicroCMSのオブジェクト形式(シングルトン)で管理する。見出しテキスト(「このブログについて」)は変更頻度がほぼゼロのため、profileのh1と同様にpage.tsxに固定で書き、CMS側は本文のみを持つ。

フィールドID 表示名 型 用途
mainImage メイン画像 画像(任意) /about上部のメインビジュアル。profileと同じ扱いで、未設定なら非表示
content 本文 リッチエディタ /aboutの本文(ブログのコンセプト説明)