Current

dek sample　2026.09.25　12 min

台本から、
発表まで

dek は、喋る台本を先に書き、そこからスライドを組み立てる道具です。この資料は発表のスライドであり、そのまま読める配布資料でもあります。

  1. 1後回しになっていること尺、見た目の確認、次の発表
  2. 2dek が前に持ってくる方法台本、骨格、ビート、測る lint
  3. 3人とエージェントの仕上げ方同じ基準、同じループ

いまのスライド作りでは、三つのことが後回しになる

テンプレートを選び、枠を並べ、中身を埋め、最後に喋ってみる。この順番だと、確かめる機会はすべて最後の一歩に集まります。

いつもの順番

  1. 1テンプレートを選ぶ
  2. 2枠を並べる
  3. 3中身を埋める
  4. 4最後に喋ってみる

01

尺

喋って初めて長さがわかる。

二十分の枠に三十分ぶん。
気づくのは前日の夜。

02

見た目の確認

はみ出し、読めない色は、目で探すしかない。

見落としは、
本番のスクリーンで見つかる。

03

次の発表

作り込んだ部品は、そのトークでしか使えない。

次はまた、
ゼロから作る。

dek は、台本を最初に書く

順番を入れ替えます。台本を書いた時点で尺がわかり、画面はそのあとに組み立て、見た目は機械が測ります。

dek の順番

  1. 1

    台本を書く

    script.md

  2. 2　もう後回しにしない

    尺がわかる

    dekc ls

  3. 3

    画面を組み立てる

    slides/*.html

  4. 4　もう後回しにしない

    見た目を測る

    dekc lint --visual

台本から決まるもの

台本がいちばん上にある。スライド側で決めることは、見た目だけ。

18枚
スライドの枚数　## の数
01–18
並び順　見出しが並ぶ順
17ビート
画面を進める位置　### の数

数字はこの資料の script.md から（dekc ls why-dek）。

ひとつの発表は、ひとつのディレクトリ

dek では、ひとつの発表をデッキと呼び、ひとつのディレクトリにまとめます。

デッキの外にあるものは、何も参照しない。リモートの URL も、../ で親を指す道も lint が止めます。ディレクトリごとコピーすれば、何年後に開いても同じように描画されます。

decks/why-dek/

  • script.md台本喋る言葉、順番、尺。いちばん上。
  • slides/スライド18 枚ぶんの HTML と、必要な CSS・TS
  • theme.css見た目クラスとトークン。このデッキ専用のコピー
  • assets/画像スライドが読むファイルはすべてここ
  • voice/音声読み上げを付けるときだけ
HTML
18
CSS
18
TS
3
画像
2
外への参照
0
  • https://cdn…/logo.pngDEK020
  • ../../assets/photo.jpgDEK022

構成と数は、この資料 sample/decks/why-dek の実物（slides/ と assets/ のファイル数）。

台本は、普通の Markdown で書く

覚える書き方は三つだけです。

  1. ##スライド一枚波かっこの id が、ファイル名 slides/later.html になる。
  2. ###ビート喋りの区切り。矢印キーはまずビートを進め、使い切ると次のスライドへ。
  3. ¶ >段落は喋る言葉、引用はト書き段落だけが尺と読み上げに数えられる。持ち時間は先頭の duration に。
script.mdこの資料の冒頭から抜粋---
title: 台本から、発表まで
…
duration: 12m 持ち時間
---

## 台本から、発表まで {#cover} スライド　cover

こんにちは。今日は、dek というスライドの道具を紹介します。… 喋る言葉

> 落ち着いて始める。目次は読み上げない。 ト書き

## いまのスライド作りでは、三つのことが後回しになる {#later} スライド　later
…
### 尺 {#later-time} ビート　later-time

ひとつめは尺です。喋って初めて長さがわかるので、…

保存すると、骨格のスライドができる

台本を保存すると、見出しごとに骨格ができます。見出しがタイトルに、ビートが箇条書きになります。どの行がどのビートで出るかも、最初から決まっています。

保存した直後骨格のまま、通しで練習できる

later の骨格。見出しと、尺・見た目の確認・次の発表の三行だけ

slides/later.html　dekc sync が書いた 8 行。枚数、順番、尺は本番と同じ。

仕上げた後仕上げても、台本は変わらない

同じ later を仕上げた一枚。いつもの順番の軸と、三つの問題のカード

HTML 37 行 と CSS 106 行 を書いた。script.md は一文字も変えていない。

左はこの資料の写しから later.html を消して dekc sync、右はこの資料の later.html を、どちらも dekc shot で撮影。

一枚のスライドは、小さなファイル

仕上げの単位は一枚です。直すときに開くのは同じ名前の数ファイルだけなので、差分がそのまま読め、書き間違えても崩れるのはその一枚だけです。

  • timing.html構造section がひとつ。テーマのクラスだけで書く
  • timing.css装飾その一枚だけで使う飾り。自動でその一枚に閉じる
  • timing.ts動き数え上げやグラフ。t から描く
いちばん長い HTML
97行　motion.html
この資料の slides/
39ファイル
HTML 18・CSS 18・TS 3

slides/ の行数htmlcssts

  1. coverhtml10css71ts—
  2. laterhtml37css106ts—
  3. orderhtml40css107ts—
  4. deckhtml30css126ts—
  5. scripthtml31css51ts—
  6. skeletonhtml18css23ts—
  7. fileshtml40css173ts14
  8. beatshtml42css67ts—
  9. motionhtml97css106ts29
  10. timinghtml42css171ts32
  11. measurehtml51css94ts—
  12. linthtml81css132ts—
  13. agentshtml56css124ts—
  14. refshtml38css104ts—
  15. themeshtml28css92ts—
  16. outputshtml43css86ts—
  17. starthtml36css54ts—
  18. recaphtml27css53ts—

この資料の slides/*.html・*.css・*.ts を wc -l で数えたもの（このスライド自身も含む）。

いつ出すかは台本、どう出すかはテーマ

段階的に見せる仕組みも、役割を分けています。スライドの HTML は、要素がどのビートで出るかを data-step で書くだけです。

script.md　いつ

### いつは、台本のビート {#beats-when}
いつ出すかは、喋りの都合です。…

### どうは、テーマの CSS {#beats-how}
どう出すかは、見せ方の都合です。…

slides/beats.html　結ぶ

<span class="bracket is-when"
  data-step="beats-when">
  <strong>いつ：台本が決める</strong>…
</span>

<span class="bracket is-how"
  data-step="beats-how">
  <strong>どう：テーマが決める</strong>…
</span>

theme.css　どう

.slide.is-current [data-step] {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: … var(--step-transition);
}
.slide.is-current [data-step].is-shown {
  opacity: 1;
  transform: none;
}
いつ：台本が決めるビートの id で結ぶ。喋りの都合で順番を変えても、HTML はそのまま。 どう：テーマが決めるランタイムは is-shown を付けるだけ。アニメーションの独自記法はない。

三つの抜粋は、このスライドとこの資料の theme.css の実物。

動きは、時間の関数として書く

CSS で書けない動きは slides/<id>.ts に書きます。約束はひとつ。経過時間 t を受け取って、その瞬間の画面を描くこと。

slides/motion.ts抜粋const MS = 1200;

function paint(frame: Element, t: number) {
  // t だけから棒の高さを決める
  …
}

export default {
  motion: { "0": MS },
  draw(slide, { t }) {
    for (const frame of frames(slide)) {
      paint(frame, Number(frame.dataset.t));
    }
    const live = slide.querySelector("[data-live]");
    if (live) paint(live, t);
  },
} satisfies DekSlide;

同じ t を渡せば、必ず同じ画面になる

t = 0始まり
t = 0半分
t = 0動き終わり
t = 0ライブ：発表中はここが動く
発表
t を 0 から 1200 まで、画面の更新ごとに進める。滑らかに動く。
PDF・スクリーンショット
最後の t で一度だけ描く。動き終わった姿が写る。
動画
t をコマごとに送る。実時間を待たず、正確に記録される。

左の三枚は data-t の値で、右端は再生中の t で、同じ paint() が描いている。

尺は、書いているうちにわかる

台本があれば、尺はその場で見積もれます。十二分の持ち時間は、各スライドの文章量に応じて割り振られます。

日本語
300文字 / 分
英語
130語 / 分

引用はト書きなので数えない。速さは dek.toml で変えられる。

この資料の見積もり

11:28/ 12:00

スライド見積もり / 割り当て

  1. cover0:32 / 0:35
  2. later1:00 / 1:00
  3. order0:29 / 0:29
  4. deck0:34 / 0:42
  5. script0:49 / 0:50
  6. skeleton0:46 / 0:47
  7. files0:37 / 0:41
  8. beats0:37 / 0:38
  9. motion0:40 / 0:42
  10. timing0:32 / 0:33
  11. measure0:38 / 0:38
  12. lint0:43 / 0:43
  13. agents0:50 / 0:55
  14. refs0:37 / 0:40
  15. themes0:34 / 0:34
  16. outputs0:33 / 0:35
  17. start0:24 / 0:26
  18. recap0:33 / 0:33

見積もり持ち時間から割り当てた尺

bunx dekc ls why-dek --json（2026-09-25、script.md 確定版）の estimateSeconds と budgetSeconds。

見た目は、描画して測る

見た目の確認も、目に頼りません。dekc lint --visual は、スライドを実際のブラウザで描画し、すべてのビートで測って、答えを数字で返します。

DEK030はみ出しは、何ピクセルかまで

41px 
{
  "id": "DEK030",
  "data": {
    "box": "p.lede[data-step=\"slow\"]",
    "text": "https://example.com/docs/…",
    "edges": { "right": 41 },
    "origin": "content",
    "steps": ["slow", "vague"]
  },
  "hint": "shorten it, or let it wrap …"
}

DEK031読みにくい色は、比で返す

1.5: 1

基準 4.5 : 1
大きな文字は 3 : 1
24px・太字 18.66px〜

{
  "id": "DEK031",
  "data": {
    "box": "p.faint[data-step=\"vague\"]",
    "text": "補足：この注釈は薄すぎて読めません",
    "ratio": 1.5,
    "threshold": 4.5,
    "fg": "#c8c4ba",
    "bg": "#f3f1ec",
    "origin": "slide",
    "steps": ["vague"]
  }
}

捨てデッキに dekc lint --visual --json をかけた実際の出力から、id と data を抜粋（severity・message・path・slug・hint は省略）。

規約は、すべて lint が確かめる

使ってよいクラス、トークン経由の値、デッキの中の画像。書いておくだけでは守られない規約を、dek はすべてルールにしました。エラーがひとつもなければ完成です。

39ルール　五つの層

構造14

台本と slides/ の対応

  1. DEK001節に HTML がない
  2. DEK002HTML に節がない
  3. DEK003data-step の迷子
  4. DEK004id の重複
  5. DEK005data-morph の重複
  6. DEK006data-slug の不一致
  7. DEK007section がない
  8. DEK008読まれないキー
  9. DEK009section が二つ
  10. DEK024読めない見出し
  11. DEK025番号で指す data-step
  12. DEK027読めない台本
  13. DEK028相手のない morph
  14. DEK044# と #### の見出し

語彙11

テーマの言葉だけで書いているか

  1. DEK010未定義のクラス
  2. DEK011style・script の直書き
  3. DEK012外へ届くセレクタ
  4. DEK013クラスが多すぎる
  5. DEK014トークン外の生の値
  6. DEK015必須トークンがない
  7. DEK016動かないスクリプト
  8. DEK017t 以外に依存する描画
  9. DEK018theme.css がない
  10. DEK019未定義のレイアウト
  11. DEK026三枚で同じ宣言

素材4

デッキの中で閉じているか

  1. DEK020リモート URL
  2. DEK021ファイルがない
  3. DEK022デッキの外を指す道
  4. DEK023assets/ 外の参照

描画5

ブラウザで描いて測る

  1. DEK029隠して測らない文字
  2. DEK030はみ出し
  3. DEK031コントラスト
  4. DEK032おかしな draw
  5. DEK033文字の重なり

音声5

読み上げと尺

  1. DEK040辞書にない英単語
  2. DEK041持ち時間から外れた尺
  3. DEK042喋らないビート
  4. DEK043行き先のない [beats]
  5. DEK045読めない音声の設定

エラー：完成を止める警告：報告するが、止めない

src/core/diagnostic.ts の RULES 表（39 件）を、docs/reference/lint.md の条件で五つの層に分けたもの。

エージェントとも、同じループを回す

完成の基準がはっきりしているので、AI エージェントも人と同じ手順で、一枚ずつ仕上げられます。

読む 書く 測る 直す dekc show HTML・CSS dekc check もう一度測る

測ると直すの往復は、人が画面を確かめる前に片付く。

1一枚ぶんを、まとめて読む

$ dekc show why-dek timing

script台本のその節8 行
htmlslides/timing.html42 行
cssslides/timing.css171 行
tsslides/timing.ts32 行
themeこのスライドが使う規則だけ220 行 / 全体 518 行

2描いて、測って、直す

$ dekc check objection --shot --json捨てデッキ{
  "ok": false,
  "slug": "objection",
  "diagnostics": [{
    "id": "DEK030",
    "hint": "shorten it, or let it wrap with overflow-wrap: …",
    "data": { "edges": { "right": 41 }, "steps": ["slow", "vague"] }
  }, { "id": "DEK031", … }],
  "shot": ".cache/shots/objection~vague.b5ae5c96.png"
}

直して、もう一度{ "ok": true, "slug": "objection", "diagnostics": [] }

行数は dekc show why-dek timing --json の各部の行数。JSON は dekc check の実際の出力の抜粋。

ほかの人の発表からも、学べる

dekc ref は、GitHub に公開されている dek のデッキを、版を固定して手元に取ってきます。取ってきたデッキは読むだけ。使いたい部分は、自分のテーマで書き直します。

  1. 1　公開されているデッキ

    GitHub

    hajimism/dek/why-dek

    owner/repo/deck の名前で指す。

  2. 2　版を固定する

    dek.toml

    [refs] "…/why-dek" = "<commit>"

    版はコミットで止まる。動かすときは、もう一度 dekc ref。

  3. 3　読み取り専用で置く

    refs/

    lsshowthemeshot

    gitignore される写し。消しても、次に読むとき取り直す。

  4. 4　自分のデッキ

    decks/

    自分のテーマで書き直して取り込む。ref を指す道は、デッキの外なので DEK022。

できること構成と尺を見る。一枚の作りを読む。描画して確かめる。

しないことref を書き換える。自分のデッキから ref を参照する。lint も build も refs/ を見ない。

使い方docs/guide/structure.md より$ bunx dekc ref hajimism/dek/why-dek
$ bunx dekc show hajimism/dek/why-dek timing

テーマはコピーして、そのまま凍らせる

新しいデッキを作ると、プロジェクトのテーマがそのデッキにコピーされます。共有ではなくコピーなので、秋にテーマを直しても、春に話したデッキの見た目は変わりません。

2026.04 06 09 プロジェクトの theme.css 9 月、テーマを直す dekc new 2026-04-vite decks/2026-04-vite/theme.css　4 月のまま、凍結 dekc new 2026-09-dek decks/2026-09-dek/theme.css

変わらない終わった発表は、終わったときの姿のまま残る。

戻すときは手でcp decks/2026-09-dek/theme.css theme.css

本番に持っていくのは、HTML がひとつ

dekc build が、テーマも画像も動きも含めて、発表をひとつの HTML ファイルにまとめます。会場にサーバもネットワークも要りません。

dist/why-dek.html

322KiB

  • スライド18 枚
  • テーマtheme.css と各スライドの CSS
  • 画像2 枚を data URI で埋め込み
  • 動きslides/*.ts の 3 本
  • プレイヤービート送り、スライド一覧、発表者ビュー

  1. 同じファイルから

    発表

    ブラウザで開けば、そのまま発表できる。

    open dist/why-dek.html

  2. 発表者ビュー

    台本、次のビート、経過時間。二つ目の窓がついてくる。

    ?presenter　または　p キー

  3. 同じ台本から

    配布用 PDF

    一枚一ページ、すべてのビートを出した姿で。

    dekc pdf

  4. 動画 MP4 + 字幕 VTT

    音声合成で台本を読み上げ、ビートに合わせて記録する。

    dekc video

bunx dekc build why-dek が書いた dist/why-dek.html の実測 330,127 バイト（2026-10-01）。

始めるのに要るのは、Bun だけ

プロジェクトを作り、台本を書き、開発サーバを立ち上げる。配るときは build。

最初は骨格のままで構わない。通しで喋れるようになってから、必要なスライドだけを仕上げる。

必要なものBun1.4 以降。ほかは dek が入れる。

  1. 1 プロジェクトを作る bunx @hajimism/dek init my-talks 最初のデッキと theme.css、AGENTS.md ができる。
  2. 2 dek の版を固定する cd my-talks
    bun add -d @hajimism/dek     以後 bunx dekc は、このプロジェクトの dek を動かす。
  3. 3 台本を書き、開発サーバで見る bunx dekc 保存するたびに骨格ができ、lint が走る。
  4. 4 配る bunx dekc build dist/ に、ひとつの HTML。

コマンドは docs/guide/getting-started.md より（一部省略）。

持ち帰ってほしい、三つのこと

最後に、三つだけ持ち帰ってください。

  1. 1

    台本が
    いちばん上

    順番も、喋る言葉も、尺も、台本が持っている。スライドはそこから生まれる。

    → 順番　台本　尺

  2. 2

    一枚は、
    小さなファイル

    一枚ずつの HTML と、隣の CSS と TS。人もエージェントも、一枚ずつ直せる。

    → ファイル　ビート　エージェント

  3. 3

    測れるものは、
    lint が決める

    規約はすべて lint が確かめる。この資料も、診断ゼロで出来上がっている。

    → 測る　lint

  4. ご清聴ありがとうございました。sample/decks/why-dek/script.md

この資料そのものが、上の三つで作られています。台本は右下のファイルに。

sスライド一覧p発表者ビュー