• 書き手は内容だけを書く
• 文字の大きさと配置は lispresen が決める
• できた HTML ファイル一つで発表できる

1. lispresen とは
2. デッキを書く
3. レイアウトはツールが決める
4. 発表する
5. 見た目を選ぶ
6. 出力と始め方

1. lispresen とは
2. デッキを書く
3. レイアウトはツールが決める
4. 発表する
5. 見た目を選ぶ
6. 出力と始め方

1. 読めない文字を出さない
   • 収まらないスライドは、文字を縮めずにエラーにする
2. スライドのコードを動かす
   • Lisp、Scheme、Clojure をその場で編集して実行する
3. どこで描画しても同じ出力
   • インタプリタ、JVM、WASM、SBCL が同じバイト列を書く

• 差分をコードと同じようにレビューできる
• 構造が明示される
  • インデントに意味を持たせない
  • 見えないスタイルがない
• プログラムで生成したデッキもただのリスト

トップレベルのフォームを一つずつ read する。

• マクロも #. も使えない
• どのバックエンドでも同じ言語になる
• 信頼できないデッキも安全に描画できる

1. lispresen とは
2. デッキを書く
3. レイアウトはツールが決める
4. 発表する
5. 見た目を選ぶ
6. 出力と始め方

slide の中に、ブロックを上から順に並べる。

(slide :title "段落と箇条書き"
  "文字列だけでも段落になる。"
  (ul "ul は記号付きの箇条書き"
      (li "入れ子は" (ul "二段まで")))
  (ol "ol は番号付き" "7 項目からは警告する")
  (notes "発表者ウィンドウにだけ出る。"))

文字列だけでも段落になる。

• ul は記号付きの箇条書き
• 入れ子は
  • 二段まで

1. ol は番号付き
2. 7 項目からは警告する

装飾もフォームで書き、段落の中に並べる。

(lead "lead は控えめな色の段落")
(p (b "太字") "、" (i "italic") "、" (tt "(code)") "、"
   (mark "マーカー") "、" (accent "アクセント色") "、"
   (link "https://github.com/making/rontolisp" "リンク"))

lead は控えめな色の段落

太字、italic、(code)、マーカー、アクセント色、リンク

行はセルのリスト。数値だけの列は右に揃う。

(table :header ("種類" "フォーム" "数")
       :row-header t :align (:left :left :right)
       :caption "デッキの要素は、どれもリストとして書く"
  ("図と数式" (tt "flow cells bars columns lines pie math") "7")
  ...
  ((cell :colspan 2 "合計") "34"))

source はスライドの下端に出典を一行で置く。

(quote :cite "Alan J. Perlis"
  "A language that doesn't affect the way ...")
(source "Alan J. Perlis, " (i "Epigrams on Programming")
        ", SIGPLAN Notices 17(9), 1982")

文字列の共通の字下げは取り除く。console はシェルの記録として描く。

(code :lang "lisp" :run nil "
  (defun square (x)
    (* x x))")
(code :lang "console" "
  $ lispresen/check.sh
  ok   interpreter")

(defun square (x)
  (* x x))

$ lispresen/check.sh
ok   interpreter
ok   jvm
skip native: the jar carries no precompiler for this platform (linux-x86_64)

:lang が java、python、bash、sql、json などなら、その言語の規則で色を付ける。動かせるのは Lisp、Scheme、Clojure だけ。

(code :lang "java" "
  long square(long x) {
    return x * x; // ...
  }")

続けて書いた column が横に並ぶ。前後のブロックは全幅になる。

(lead (b "問題") " ... → " (b (accent "解決")) " ...")
(column
  (code :lang "lisp" :run nil "..."))
(column
  (ul "コードの列は ..." "残りを ..."))

指す先を say で包む。コードの中は :at の文字列で指す。

(li "日本語の改行は "
    (say "BudouX のモデルで決める" (mark "文節ごと")))
(say "n が 2 未満なら n を返す" :at "(< n 2)"
  (code :lang "lisp" :run nil "..."))

• 置き場所は lispresen が探す
• 日本語の改行は 文節ごと

(defun fib (n)
  (if (< n 2) n (+ (fib (- n 1)) (fib (- n 2)))))

箱を左から右へ矢印でつなぐ。:at で箱の一つを指せる。

(lead "lispresen の処理の流れ")
(say "テンプレートもここで展開する" :at "parse"
  (flow "read" "parse" "segment"
        "layout" "lint" "emit"))

lispresen の処理の流れ

経路を -> で並べる。同じ文字の箱は一つの箱になり、label は矢印に付く。

(say "check.sh で比べる" :at "同じ HTML"
  (flow (-> (tt "cli.lisp") "インタプリタ" "同じ HTML")
        (-> (tt "cli.lisp") "コンパイル" "JVM" "同じ HTML")
        (-> "コンパイル" "WASM" "同じ HTML")
        (-> (tt "cli.lisp") (label "基準") "SBCL" "同じ HTML")))

cells はリストを箱と矢印で描く。ドット対も描ける。

(column
  (say "car はセルの下に描く" :at "slide"
    (cells '(slide :title "t" (p "x")))))
(column (cells '((a . 1) (b . 2))))

値は整数か、文字列で書いた小数。単位は書いたとおりに付く。

(lead "コンパイルした CLI の大きさ")
(say "JVM なしで動く" :at "ネイティブ"
  (bars :unit " KB" ("JVM (jar)" 297) ("WASM" 788)
        ("WASM component" 796) ("ネイティブ" "6,700")))
(source "2026-10-22, macOS arm64 で測定")

コンパイルした CLI の大きさ

:series で系列に名前を付けると、凡例が付き、系列ごとに色が変わる。:step :series は系列を一つずつ見せる。

(lead "例: 四半期ごとの発表数")
(columns :series ("2025" "2026") :step :series
  ("Q1" 3 5) ("Q2" 4 (say "最多" 8))
  ("Q3" 2 6) ("Q4" 5 7))

例: 四半期ごとの発表数

目盛りは 1、2、5 の 10 のべき倍で刻む。値が 0 から離れていれば 0 を含めない。

(lead "例: 応答時間")
(lines :series ("p50" "p99") :unit " ms"
  ("1月" 12 40) ("2月" 11 38) ("3月" 10 55)
  ("4月" "9.5" 33) ("5月" 9 31))

例: 応答時間

pie は全体に占める割合を、:stack t は系列を積み上げた合計を描く。:axis t は値の代わりに目盛りを付ける。

(column
  (say "半分を超える" :at "eval"
    (pie :donut t ("read" 2) ("eval" 9) ("print" 1))))
(column
  (bars :series ("read" "eval") :stack t :axis t
    ("小" 2 9) ("大" 4 20)))

前置記法の木がそのまま数式になる。段落の中でも、ブロックとしても書ける。

(p "計算量は " (math (O (* n (log n)))) " で済む")
(math (= (fib n)
         (cases (n (< n 2))
                ((+ (fib (- n 1)) (fib (- n 2))) "otherwise"))))
(say "上下に範囲が付く"
  (math (= (sum (= i 1) n (^ i 2)) (/ (* n (+ n 1) (+ (* 2 n) 1)) 6))))

計算量は で済む。分数や添字も や のように行の中に収まる。

画像は残りの場所に収まる。--embed で HTML に埋め込む。

(say "--embed で HTML に埋め込んだ"
  (image "pipeline.png"
         :alt "read から emit までの六段階"
         :caption "PNG はテーマの色に従わない"))

題も本文もなく画像だけを置くと、画像で画面を覆う。次のスライドが表示例。

• :fit :contain なら切り取らず、全体を背景の上に収める
• 写真の上に文字は置かない。ページ番号も出さない

(slide (image "photo.svg" :alt "夕暮れの山並み"))

:layout :image-left か :image-right で、画像を画面の端まで広げる。

(slide :title "画像と文章を並べる" :layout :image-right
  (ul "画像は上下と横の端まで届く" ...)
  (image "photo.svg" :alt "夕暮れの山並み" :share 1/3))

動画は画像と同じ場所に収まる。--embed で HTML に埋め込む。

• :autoplay t なら、スライドに入ると再生し、出ると止める
• クリックかタップで再生と一時停止を切り替える
• 印刷と一覧には :poster の画像が出る

(video "demo.mp4" :alt "REPL で fib を呼ぶ"
       :poster "demo-poster.png" :autoplay t :muted t :loop t)

frame はウェブページをスライドの中で動かす。次のスライドはマインスイーパー。

• ページは :zoom 倍に拡大する。既定は 2
• スライドを開いたときに読み込む。一覧と発表者ウィンドウには名前だけが出る
• ページをクリックするとキーはページに渡る。外をクリックすると戻る

(frame "https://making.github.io/rontolisp/minesweeper/"
       :alt "マインスイーパー" :zoom 1)

define で名前を付け、使う所を本体で置き換える。評価はしない。

(define side (head &rest points)
  (column (p (b head)) (ul points)))

(side "インタプリタ" "起動が速い" "eval が完全")
(side "コンパイラ" "実行が速い" "成果物が一つ")

1. lispresen とは
2. デッキを書く
3. レイアウトはツールが決める
4. 発表する
5. 見た目を選ぶ
6. 出力と始め方

スライドごとに、収まる最大の段を選ぶ。

1. どのスライドも 1920 x 1080 (:aspect :4x3 なら 1440 x 1080) で組み、画面に合わせて拡大する
2. 本文は 56px から始め、必要なときだけ 40px まで下げる
3. 40px でも収まらなければ、縮めずにエラーとして報告する

題を付けずに段落を一つだけ置くと、大きな文字で中央に置く。次のスライドが表示例。

(slide "読みやすさは、書き手ではなくツールが守る。")

$ java -jar lispresen.jar talk.lisp --check
talk.lisp:42: warning: slide 7 "比較": a list with 8 items is hard to follow; keep it to 6

• 診断には行番号が付く。--strict なら警告でも失敗する
• 文字色と背景のコントラストも検査する

発表するマシンのフォントは、lispresen が幅を測ったフォントと違うことがある。

• 開いたときに、各スライドの高さを測る
• はみ出す所だけ、段を一つずつ下げる
• URL に ?check を付けると、下げた所を一覧する

1. URL の末尾に ?check を付けて開き直す
2. 右上に runtime check: no corrections と出れば、補正はない

1. lispresen とは
2. デッキを書く
3. レイアウトはツールが決める
4. 発表する
5. 見た目を選ぶ
6. 出力と始め方

1. ← で一枚戻り、→ で戻ってくる
2. O で一覧を開き、矢印で選んで Enter で開く
3. F で全画面にし、もう一度 F で戻る
4. URL の末尾を #5 にして開き直す

P で開く。どちらのウィンドウで送っても、もう一方が付いてくる。

(notes "このノートは発表者ウィンドウにだけ出る。")

• 今のスライドと次のスライド
• スライドの話者ノート
• タイマー (クリックで 0 に戻る)
• Start で、もう一つのディスプレイに全画面で映す

1. P を押す
2. このスライドのノートを読む
3. → で送り、こちらのウィンドウも進むことを確かめる

ページ送りのたびに一つずつ見せる。隠れている間も場所を取る。

(ol :step t "リストの項目" "コードの行"
    (li (say "項目の後に出る" :step t "吹き出し")))
(code :steps ((1 2) "(fib 20)") ...)

1. リストの項目
2. コードの行
3. 吹き出し

→ で順に出し、← で一つずつ戻す。(deck :callouts :step) ならどの吹き出しも送りで出る。

段落、画像、動画、表、引用、図、数式、コード、列も :step t で送りの一つになる。

(bars :step t :unit " KB" ...)
(lead :step t "結論は最後に出す")

図と表は一度に全体が出る。吹き出しは包んだブロックと一緒に出る。

測った値を見せてから、結論を出す。

→ 配るなら jar が一番小さい

Lisp、Scheme、Clojure のコードはスライドの上で動く。

(say "Run で 6765 が出る" :at "(fib 20)" :step t
  (code :file "fib.lisp" :lines (4 6)
        :steps ((1 2) "(fib 20)")))

• クリックか E で編集し、Ctrl+Enter か Run で実行する
• Reset でデッキに書いたコードに戻す
• 出力はスライドに重ねて開く。↑ ↓ でスクロールし、× か Esc で閉じる

同じ言語のコードは定義を共有する。前のスライドで Run してから実行する。

(mapcar #'fib '(1 2 3 4 5 6 7 8 9 10))

:morph t のスライドに入ると、前のスライドの最初のコードから変わる。

(slide :title "..." :morph t
  (code :lang "lisp" "
    ;; ループで書き直す
    (defun fib (n)
      (loop for a = 0 then b
            and b = 1 then (+ a b)
            repeat n
            finally (return a)))"))

共通のトークンは移動し、消えるものは薄れ、増えるものは現れる。

:timeout 秒で止める。:fresh t は新しいインタプリタで、:stdin を標準入力にして動かす。

(code :lang "clojure" :timeout 5 "...")
(code :lang "scheme" :fresh t :stdin "3 4" "...")

ランタイムは rontolisp のブラウザ版で、約 35 MB ある

• :runtime :hosted 開いたときにネットワークから読む (既定)
• :runtime "runtime/" デッキの横から読む
• :runtime :none コードを動かさずに表示する

$ cp web/dist/rontoplayground.js* talk/runtime/
$ jwebserver -d "$PWD/talk"

1. lispresen とは
2. デッキを書く
3. レイアウトはツールが決める
4. 発表する
5. 見た目を選ぶ
6. 出力と始め方

組み込みは :light、:dark、:high-contrast、:midnight。個々の色は名前で差し替える。

(deck :theme :midnight)
(deck :theme (theme :base :dark :accent "#ff9f43"))
(deck :theme (theme :base :light :code :dark))

文字色はどれも、背景とのコントラスト比 4.5:1 以上を検査する。

このデッキは :light を基に、コードの色だけ :dark にした

(list "string" :keyword 42 nil) ; a comment

本文の tt、マーカー、アクセント色 も同じテーマの色で描く。

--theme midnight を付けて描き直すと、このデッキが紺と金になる。

表紙、目次、題の上の小見出し、進み具合はデッキの冒頭で決める。

(deck :title "lispresen" :author "rontolisp"
      :logo (image "logo.svg" :alt "rontolisp")
      :url "https://github.com/making/rontolisp"
      :agenda "話の流れ" :kicker :section
      :progress t :page-numbers t)
(slide :kicker "試す" ...)
(slide :kicker nil ...)

1. Home で表紙に戻り、ロゴと URL の QR コードを見る
2. 節の始まりの目次では、今の節が強調される
3. 題の上の小見出しは節の題。:kicker で変えられる
4. 下端のバーとページ番号が今の位置を示す

目次は表紙の次に入る。(agenda) を置くと、その位置に入る。

(deck :title "lispresen" :agenda "話の流れ")
(slide :title "S式のデッキから HTML を一つ作る" ...)
(agenda)
(section "lispresen とは")

• (agenda) より前のスライドと節は目次に載らない
• 目次を出すには :agenda も要る

1. Home で表紙に戻る
2. → で進むと、表紙の次は (agenda) より前に書いたスライド
3. もう一度 → で目次。最初の節は (agenda) の後に書いた「lispresen とは」

1. lispresen とは
2. デッキを書く
3. レイアウトはツールが決める
4. 発表する
5. 見た目を選ぶ
6. 出力と始め方

(lispresen:render source &key theme runtime read-file embed page-image)
;; => (values html diagnostics image)

• 入出力をしないので、CLI からもブラウザからも呼べる
• 整数だけで計算するので、どこでも同じバイト列になる

• render を書き出す WASM モジュールにコンパイルする
• ページは入力のたびに呼び、描いたデッキを隣に出す
• 描画はブラウザの中で終わる。サーバーはいらない

(deck :title "lispresen"
      :description "S式で書くプレゼンテーション"
      :page-url "https://example.com/talk.html"
      :page-image "talk.png"
      :page-image-font ("r.ttf" "b.ttf"))

• head に og:title や og:image の meta タグを書く
• 表紙を 1200 x 675 の PNG に描き、HTML の隣に書く
• 画像の文字は TrueType フォントで描く

1. このデッキの URL を SNS の投稿欄に貼る
2. プレビューに表紙の画像と題、説明が出る
3. intro.png を開くと、描いた画像そのものを見られる

JVM も rontolisp も要らない実行ファイルを、リリース lispresen-0.1.0-SNAPSHOT で配布している。

• 実行権を付け、PATH の通ったディレクトリに lispresen の名前で置く
• macOS でブラウザからダウンロードしたファイルは隔離され、起動すると止められる

$ BASE=https://github.com/making/rontolisp/releases/download
$ curl -fLO $BASE/lispresen-0.1.0-SNAPSHOT/lispresen-darwin-arm64
$ chmod +x lispresen-darwin-arm64
$ sudo mv lispresen-darwin-arm64 /usr/local/bin/lispresen
$ lispresen --version
{"version": "0.1.0-SNAPSHOT", "gitCommit": "3b9b214"}

curl と wget で取得したファイルは隔離されない。ブラウザでダウンロードしたファイルは xattr -d com.apple.quarantine で隔離を外す。

lispresen serve はデッキを HTTP で配り、保存するたびに描き直す。

• ブラウザで開いたページは、見ていたスライドのまま読み込み直す
• 診断はターミナルと、スライドに重ねたパネルに出る
• 画像と動画はデッキの横から配るので、--embed は要らない

$ lispresen serve talk.lisp
lispresen: built talk.lisp: 0 errors, 0 warnings

1. http://127.0.0.1:8000/ をブラウザで開く
2. デッキを書き換えて保存し、ページが追従するのを見る
3. Ctrl-C で止め、lispresen talk.lisp --embed --strict で HTML を書く

lispresen DECK [-o OUT] [--theme NAME] [--runtime URL|hosted|none]
               [--embed] [--check] [--strict]
lispresen new FILE [--lang ja|en] [--force]
lispresen serve DECK [--port N] [--host ADDR] [--theme NAME]
                     [--runtime URL|hosted|none]
lispresen --version

• - で標準入力から読み、標準出力に書く
• --embed で画像を埋め込み、ファイル一つで完結させる
• --version は版とビルドしたコミットを JSON で出す
• 終了コードは 0 が成功、1 がエラー、2 が使い方の誤り

$ lispresen new talk.lisp
$ lispresen serve talk.lisp
$ lispresen talk.lisp --embed --strict

• new は、主なフォームにコメントで説明を添えた雛形を書く。--lang en なら英語
• 診断には行番号が付く。その行を直して保存すると、ページが描き直る
• 見本はこのデッキ、lispresen/examples/intro.lisp