第4章：microCMS 設計・プレビュー標準

WordPress のような「自由入力で HTML が崩れる」事態を防ぐため、microCMS のスキーマ設計と下書きプレビュー機能を標準化します。

共通スキーマ設計標準（お知らせ / 事例）

サイトで最も頻出する「お知らせ（News）」と「導入事例 / 研究紹介（Case/Works）」の推奨フィールド構成です。

お知らせ API（エンドポイント: `news` / リスト形式）

フィールド ID	表示名	種類	設定・備考
`title`	タイトル	テキストフィールド	必須
`category`	カテゴリ	セレクト / コンテンツ参照	「重要」「入試」「イベント」等
`publishedAt`	公開日時	日時	ソート・一覧表示用
`eyecatch`	アイキャッチ画像	画像	任意
`content`	本文	リッチエディタ	見出し（h2/h3）、リスト、リンク、画像を許可

TypeScript 型定義とデータ取得

SDK クライアントの初期化と、型安全なフェッチ関数を src/libs/microcms.ts に定義します。

import { createClient, type MicroCMSQueries, type MicroCMSImage } from "microcms-js-sdk";

// microCMSクライアント初期化
export const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_API_KEY,
});

// スキーマ型定義
export interface News {
  id: string;
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  revisedAt: string;
  title: string;
  content: string;
  eyecatch?: MicroCMSImage;
  category?: {
    id: string;
    name: string;
  };
}

// お知らせ一覧取得関数
export const getNewsList = async (queries?: MicroCMSQueries) => {
  return await client.getList<News>({
    endpoint: "news",
    queries,
  });
};

// お知らせ詳細取得関数（下書きプレビュー用のdraftKeyにも対応）
export const getNewsDetail = async (contentId: string, queries?: MicroCMSQueries) => {
  return await client.getListDetail<News>({
    endpoint: "news",
    contentId,
    queries,
  });
};

下書きプレビュー機能の実装

クライアントが「公開ボタンを押す前に見た目をチェックしたい」という要望に応えるための仕組みです。

仕組み

microCMS の管理画面の「画面プレビュー」に以下の URL を設定します。

https://本番ドメイン.pages.dev/news/[id]?draftKey={DRAFT_KEY}

Astro の詳細ページ側で draftKey クエリパラメータが存在する場合は、microCMS の下書き API を叩くように実装します。

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getNewsList, getNewsDetail, type News } from '../../libs/microcms';

// 1. 静的ビルド（SSG）用のパス生成
export async function getStaticPaths() {
  const response = await getNewsList({ fields: ["id"] });
  return response.contents.map((content) => ({
    params: { id: content.id },
  }));
}

const { id } = Astro.params;

// 2. 下書きプレビュー（draftKey）がある場合の取得処理
const url = new URL(Astro.request.url);
const draftKey = url.searchParams.get('draftKey');

let post: News;
try {
  post = await getNewsDetail(id as string, {
    draftKey: draftKey || undefined,
  });
} catch (e) {
  return Astro.redirect('/404');
}
---

<BaseLayout title={post.title}>
  {draftKey && (
    <div class="bg-amber-500 text-white text-center py-2 font-bold sticky top-0 z-50">
      ⚠️ 現在「下書きプレビュー」を表示しています（本番には未反映です）
    </div>
  )}

  <article class="container mx-auto px-4 py-12 max-w-3xl">
    <time class="text-gray-500 text-sm">{post.publishedAt?.substring(0, 10)}</time>
    <h1 class="text-3xl font-bold mt-2 mb-8 text-gray-900">{post.title}</h1>

    <!-- microCMSのリッチエディタ本文を出力（Tailwind Typographyプラグイン等で装飾） -->
    <div class="prose max-w-none" set:html={post.content} />
  </article>
</BaseLayout>

Webhook とビルド連動（自動デプロイ戦略）

記事が更新された際に、不要なビルドが走りすぎないよう以下のルールで運用します。

[microCMSで記事更新]
        │
        ▼ (Webhook発火)
[Cloudflare Pages Deploy Hook] ──► 自動でAstroがSSGビルドを実行（約1〜2分）
        │
        ▼
[世界中のエッジサーバーに即時配信]

「公開（Publish）」および「削除（Delete）」時のみ Webhook をトリガーするように microCMS 側でチェックを入れます。
「下書き保存（Draft Save）」時 はビルドを走らせず、上記のドラフトプレビュー URL で即時確認させます。