OGP画像とファイル出力

SatoriでOGP画像をビルド時に保存する

Browser Renderingを使わず、compileDecks()が返すデッキ情報からSatoriでSVGを、resvgで1200×630のPNGを生成できます。画像生成はNode.js側のビルドスクリプトに置くため、Workerの実行時コードやhono-decks本体に依存を追加する必要はありません。

hono-decks.config.ts

export default defineDecksConfig({
  mountPath: "/decks",
  router: {
    viewer: { openGraph: true },
  },
})

viewer.openGraphを有効にすると、decks.paths(slug).ogImage（既定では/decks/:slug/og.png）の絶対URLを使ったOpen Graph / Twitter Cardタグを生成します。PNGはWrangler Static Assetsへ保存します。

Satori + resvgの実装例を見る →

build.ogpCacheFileはスライド内のリンクカード用キャッシュです。ビューアーのOGP画像とは別に管理されます。

Browser RunでPDF / PNGを書き出す

Cloudflare Browser RunのQuick Actionsをブラウザバインディングから呼び、デッキのprint画面をPDFまたはPNGとして返せます。hono-decksがquickAction("pdf")またはquickAction("screenshot")を呼ぶため、Puppeteer、Playwright、Browser Run用のAPIトークンは不要です。

wrangler.jsonc

{
  "compatibility_date": "2026-07-15",
  "browser": {
    "binding": "BROWSER",
    "remote": true
  }
}

次の例では、先に登録したセッションまたはCloudflare Access検証ミドルウェアがdeckExportAllowedを設定済みとします。

hono-decks.config.ts

// hono-decks.config.ts
import {
  defineDecksConfig,
  type DeckBrowserRunBinding,
} from "hono-decks"

type AppEnv = {
  Bindings: {
    BROWSER: DeckBrowserRunBinding
  }
  Variables: {
    deckExportAllowed: boolean
  }
}

export default defineDecksConfig<AppEnv>({
  mountPath: "/decks",
  router: {
    export: {
      browser: ({ c }) => c.env.BROWSER,
      authorize: ({ c }) => c.get("deckExportAllowed") === true,
      pdf: true,
      png: true,
    },
  },
})

ルート / API	役割
`/:slug/print`	全スライドを並べるBrowser Runの入力画面
`/:slug/export.pdf`	print画面をPDFとしてダウンロード
`/:slug/export.png`	print画面全体をPNGとしてダウンロード

出力リクエストがauthorizeを通過すると、公開オリジン上のprint URLをバインディングへ渡し、返されたファイルを添付ファイルとして応答します。ビューアーの出力ボタンも、同じ認可を通過したリクエストにだけ表示されます。

Bearerトークンを使う場合はvarsへ直書きせず、Wranglerのsecretで管理します。

Cloudflare Browser Run Quick Actionsを確認する →

Browser Runを組み込んだサンプルを見る →