設定ファイル

4つのファイルの役割を把握する

hono-decks initは、必須のhono-decks.config.tsとsrc/decks.tsを作ります。ビルド対象、公開パス、実行時の挙動は、この設定ファイルでまとめて管理します。

package.json

ViteまたはWranglerを使う、普段の開発コマンドを定義します。

hono-decks.config.ts

CLIと実行時で共有する必須の設定ファイルです。

decks.ts

生成物とアプリの設定を読み込み、ルーターを作成します。

generated/

コンパイラーが生成するマニフェストとスライドのモジュールです。

コンパイラーを開発フローに組み込む

ViteではhonoDecks()を追加し、Wranglerではカスタムビルドにhono-decks compileを登録します。build.root、build.outDir、mountPathは共通の設定ファイルから読み込みます。

import { honoDecks } from "hono-decks/vite"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [honoDecks()],
})

{
  "scripts": {
    "decks:compile": "hono-decks compile",
    "dev": "vite",
    "build": "vite build"
  }
}

リンクカードのキャッシュ先はbuild.ogpCacheFileで指定します。保存済みデータを更新するときだけ--refresh-ogpを使います。

OGP画像とPDF・PNG出力のレシピを見る →

リクエストごとに変わる値を設定する

defineDecksConfig()を使うと、HonoのBindingsとVariablesも型検査の対象にできます。devを省略した場合は、ViteとWranglerが設定するNODE_ENVから環境を判定します。標準設定では、viteとwrangler devは開発モード、プロダクションビルドとwrangler deployは本番モードとして動作します。boolean値または関数を明示すると自動判定より優先されます。環境を判定できない場合は、安全側に倒して本番モードになります。

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

type AppEnv = {
  Bindings: {
    PRESENTER_ENABLED?: string
  }
  Variables: {
    language: string
  }
}

export default defineDecksConfig<AppEnv>({
  mountPath: "/decks",
  build: { root: "decks", outDir: "src/generated" },
  router: {
    document: {
      lang: ({ c }) => c.get("language"),
    },
    presenter: {
      enabled: ({ c, dev }) => dev || c.env.PRESENTER_ENABLED === "true",
    },
  },
})

c.get("language")を使う例では、HonoのlanguageDetector()を先に登録します。手順はHTMLとセキュリティで確認できます。多言語対応が不要ならlang: "ja"のように固定値を指定します。

設定が上書きされる順序を確認する

設定は、生成時の既定値、アプリの設定、decks.router(overrides)の順に適用されます。入れ子になった設定もcreateDecks(config)が結合します。

// src/decks.ts
import config from "../hono-decks.config"
import { createDecks } from "./generated/decks"

export const decks = createDecks(config)

主な設定項目

mountPath

デッキを公開するパスです。アプリのapp.route()にも同じ値を指定します。

source(source)

生成済みデータの取得方法を差し替えます。R2配信、キャッシュ、独自の画像取得などに使います。

router

HTMLの共通設定、各画面、埋め込み、出力機能など、ルーターの動作を設定します。

defineDecksConfigのAPIを見る →