プレビューモード | EmDash CMS Everything

EmDash のプレビューは、編集者が未公開コンテンツを安全で期限付きの URL から確認するための仕組みです。リンクは HMAC-SHA256 で署名されたトークンを使うため、下書き全体を晒さずレビュアーと共有できます。

仕組み

管理画面が下書き記事用のプレビュー URL を生成する
URL に有効期限付きの署名済みクエリ _preview が含まれる
EmDash のミドルウェアがトークンを検証し、リクエストコンテキストを設定する
テンプレートは通常どおり getEmDashEntry() を呼ぶ — 下書きが自動的に返る

プレビューは暗黙的です。テンプレートでトークンを扱ったりプレビュー用オプションを渡したりする必要はありません。ミドルウェアとクエリ関数が AsyncLocalStorage 経由で処理します。

セットアップ

環境変数にプレビュー用シークレットを追加します。

EMDASH_PREVIEW_SECRET="your-random-secret-key-here"

安全なランダム文字列を生成してください。このシークレットでトークンを署名・検証します。

以上です。既存のテンプレートはそのままプレビューに対応します。

---
import { getEmDashEntry } from "emdash";

const { slug } = Astro.params;

// 特別な処理は不要 — ミドルウェアが
// _preview トークンを検出し下書きを自動返却
const { entry, isPreview, error } = await getEmDashEntry("posts", slug);

if (error) {
  return new Response("Server error", { status: 500 });
}

if (!entry) {
  return Astro.redirect("/404");
}
---

{isPreview && (
  <div class="preview-banner">
    プレビューを表示しています。このコンテンツは未公開です。
  </div>
)}

<article>
  <h1>{entry.data.title}</h1>
</article>

有効なプレビュートークンで下書きが返るとき isPreview は true です。

プレビュー URL の生成

getPreviewUrl() を使います。

import { getPreviewUrl } from "emdash";

const previewUrl = await getPreviewUrl({
	collection: "posts",
	id: "my-draft-post",
	secret: import.meta.env.EMDASH_PREVIEW_SECRET,
	expiresIn: "1h",
});

絶対 URL には baseUrl、パス規則の変更には pathPattern を指定します（英語版ドキュメントと同じ例）。

トークンの期限

expiresIn に "1h"、"30m"、"1d"、"2w"、秒数など。単位は s / m / h / d / w。

検証

verifyPreviewToken() で URL またはトークン文字列を検証します（戻り値とエラー種別は英語版 API 参照と同じ）。

プレビュー表示の UI

{isPreview && (
  <div class="preview-banner" role="alert">
    <strong>プレビュー</strong> — 未公開のコンテンツを表示しています。
    <a href={Astro.url.pathname}>プレビューを終了</a>
  </div>
)}

ヘルパー

isPreviewRequest、getPreviewToken、parseContentId の使い方は英語版と同じです。

トークン形式

base64url(payload).base64url(signature)、cid / exp / iat、HMAC-SHA256 署名。

完全な例

英語版「Complete Example」と同じ Astro コードで、バナー文言を日本語に差し替えてください（「プレビュー」「このコンテンツは未公開です」「下書き」など）。

API リファレンス

getPreviewUrl(options) → Promise<string>
verifyPreviewToken(options) → VerifyPreviewTokenResult
generatePreviewToken(options) → Promise<string>

オプションと型定義は英語ソース official-docs/src/content/docs/guides/preview.mdx を参照してください。