open-slideの紹介

open-slideの紹介スライドをopen-slideを使って作ってみました

Transcript

1. open-slide INTRODUCTION Claude Code / Codex にスライドを React で書かせるフレームワーク 2026年10月29日時点の公式ドキュメントと @open-slide/cli 2.0.0 にもとづく
2. AI にスライドを任せると INTRO 「それっぽい文章は出るけれど、 見た目は結局自分で整える」 → スライドもコードとして書かせる open-slide 02 / 20
3. エージェントとフレームワークの役割分担 INTRO FRAMEWORK AGENT エージェントが書く 各ページの React コード open-slide フレームワークが受け持つ 画面サイズの固定 拡大縮小 ホットリロード 発表モード 書き出し 03 / 20
4. 今日話すこと AGENDA 01 02 03 04 05 open-slide とは 仕組み 作る・直す 発表と書き出し 感想と注意点 open-slide 04 / 20
5. とは open-slide とは CH.01 — open-slide 01 02 03 04 05 1920×1080 固定のキャンバスに描画し、表示領域に合わせて均等に拡大縮小 プレビュー・発表・書き出しのどこでも同じ見た目 ページはふつうの React コンポーネント（独自 DSL ではない） エージェントを選ばない（Claude Code、Codex、Cursor、Gemini CLI など） ライセンスは MIT open-slide 05 / 20
6. 導入 CH.01 — open-slide とは bash npx @open-slide/cli init my-slide cd my-slide npm run dev Node.js 20.19 以上 （または 22.12 以上） 開発サーバー http://localhost:5173 open-slide 06 / 20
7. 仕組み ワークスペースの構成 CH.02 — tree my-slide/ ├── slides/ │ └── getting-started/ ├── themes/ ├── assets/ ├── .agents/skills/ ├── .claude/skills/ ├── open-slide.config.ts ├── AGENTS.md ├── CLAUDE.md └── package.json open-slide サンプルのスライド テーマ（共有のデザインルール） 全スライド共通のアセット（@assets/* で参照） 付属のエージェント用スキル へのシンボリックリンク 設定ファイル エージェント向けのルール へのシンボリックリンク # # # # # .agents/skills/ # # # AGENTS.md ← 触るのは主に slides/ 以下 07 / 20
8. 仕組み 1ページ = React コンポーネント CH.02 — デッキは slides/<kebab-case-id>/index.tsx default export はページのコンポーネントの配列（並び順がページ順） 各コンポーネントは親いっぱいに広がる import type { Page, SlideMeta } from '@open-slide/core'; const Cover: Page = () => ( <div style={{ width: '100%', height: '100%', background: '#08090a', color: '#f7f8f8' }}> <h1 style={{ fontSize: 188 }}>Hello, open-slide.</h1> </div> ); export const meta: SlideMeta = { title: 'Hello' }; export default [Cover] satisfies Page[]; open-slide 08 / 20
9. CH.02 — 仕組み AGENTS.md 01 02 03 04 の決まり スライドは slides/<kebab-case-id>/ に置き、入口は index.tsx 画像などはデッキ専用なら slides/<id>/assets/ 、共通なら assets/ package.json 、 open-slide.config.ts 、ほかのスライドには触らない 依存パッケージを追加しない（React と標準の Web API だけ） 被害範囲を slides/<id>/ に閉じ込める open-slide 09 / 20
10. 仕組み 付属の5つのスキル CH.02 — スキル /create-slide /slide-authoring /apply-comments /create-theme /current-slide open-slide 役割 新しいデッキを最初から作る キャンバス、文字サイズ、配色、レイアウトの技術リファレンス ブラウザで付けたコメントをコードに反映する テーマを作る、または既存のデッキから抜き出す 「このページ」「この要素」が何を指すかを特定する 10 / 20
11. CH.03 — 作る・直す /create-slide で作る流れ 頼み方の例 /create-slide for "Q2 launch — 3 chapters, mixed text density, subtle motion, dark aesthetic" 01 テーマの選択 open-slide → 02 4つの質問 → 03 ID と構成 → 04 執筆 11 / 20
12. 作る・直す 書く前に決める4つのこと CH.03 — 01 見た目の方向性 02 お題に合わせて3案 3〜5 / 6〜10 / 11〜20 など 03 04 最小限〜多め 静的 / 控えめ / リッチ 1ページあたりの文字量 open-slide ページ数 動き 12 / 20
13. 作る・直す ブラウザで直接編集する CH.03 — 要素の選択、移動、サイズ変更、回転 テキストはダブルクリックでその場で編集 Format パネルで文字サイズ・太さ・色・行間を変更 Save（ Cmd / Ctrl + S ）でソースコードに書き戻す FIG. open-slide インスペクターで要素を編集している画面 13 / 20
14. 作る・直す コメントで直してもらう CH.03 — 1 ツールバーで Comment を選ぶ（ c キー） 2 要素をクリックしてメモを書く 3 Cmd 4 /apply-comments open-slide / Ctrl + Enter で投稿すると、ソースに @slide-comment マーカーが入る でマーカーごとに修正し、マーカーを消す 14 / 20
15. 作る・直す アセットの保存先 CH.03 — Slide そのデッキ専用 に保存 ./assets/... で読み込む slides/<id>/assets/ open-slide Global 全デッキ共通（会社ロゴなど） ルートの assets/ に保存 @assets/... で読み込む 15 / 20
16. 作る・直す ブラウザから Claude Code / Codex を使う CH.03 — 新しいデッキの作成 質問は選択肢のカードで答える コメントの反映 「Apply with Claude Code」ボタン 選択中の要素の編集 「この見出しを大きく」で通じる slides/ と assets/ の外の操作 パネルで承認 FIG. open-slide エージェントパネルでやり取りしている画面 16 / 20
17. 発表と書き出し 発表と書き出し CH.04 — 発表 PRESENT Present（ f キー）で全画面表示 p キーで発表者ビュー 現在のページ、次のページ、メモ、タイマー open-slide 書き出し EXPORT HTML（アセットがあれば zip） PDF（Safari では使えない） PPTX / 画像 PPTX npm run build で静的サイト 17 / 20
18. 感想と注意点 使ってみた感想 CH.05 — 「便利」 一言でいうと open-slide 出てくるスライドの中身が良い 微調整を UI からその場で直せて、コードと見た目がずれない アセットをアップロードして使える ターミナルとブラウザを行き来せずに済む 18 / 20
19. 感想と注意点 注意点 CH.05 — 01 02 03 04 05 Node.js 20.19+（または 22.12+）が必要。Node 18 では起動しない PPTX の再現度は一度書き出して確認する PDF 書き出しは Safari 非対応 エージェントパネルは信頼できるプロジェクトでだけ開く 開発サーバーを外部に公開しない open-slide 19 / 20
20. まとめ SUMMARY 01 02 03 エージェントが React で書き、キャンバス・表示・発表・書き出しはフレームワークが受け持つ AGENTS.md のルールと5つのスキルで、作業範囲と手順が決まっている 直接編集、コメント、エージェントパネルで「作る → 見る → 直す」がかなり速く回る GitHub Docs github.com/open-slide/open-slide open-slide.dev/docs open-slide 20 / 20