jh-presentation

jh-presentation

AI にプレゼンテーションを実際のウェブページとして作成させましょう。 jh-presentation は、MCP サーバーと依存関係のない小さなスライドエンジンです。AI クライアント（Claude Desktop、Claude Code、VS Code など）がコンテンツを作成し、jh-presentation がそれを、図のライブ表示、段階的なアニメーション、その場での編集、PDF エクスポートに対応した自己完結型の単一 HTML ファイルに変換します。また、レイアウト監査やスクリーンショットを使って、AI が自分の作業を確認できるようにします。

API キーは不要です。思考は、すでにお使いの AI クライアントが行います。

日本語の説明はこちら

PowerPoint ではなく HTML を使う理由

AI モデルは PPTX を操作するよりも、HTML／CSS／JS の作成がはるかに得意です。そのため、スライドツールでは難しいことが可能になります。

• 矢印に沿ってデータが流れ、段階的に組み上がる図
• クリックして拡大し、内部の構成要素を表示できるシステム概要図
• データから生成されるER 図やシーケンス図
• アニメーションするグラフ、行ごとにハイライトされるコード、実際に動作するデモ
• オフラインで動作する1 つの HTML ファイルにすべてを収録。メールで送ったり、共有フォルダーに置いたり、ブラウザーでプレゼンテーションしたりできます

ボックスをクリックして内部を拡大表示	テーブルをクリックして関連と結合キーを強調表示
拡大アニメーションと凡例の切り替えに対応したグラフ	レイヤー構造のアーキテクチャを 3D で展開

機能

• 単一ファイルのスライドデッキ — エンジン、テーマ、ブランド、画像を埋め込みます。ビルド手順や CDN は不要で、file:// から動作します
• 図のコンポーネント（データを入力すると、動きが出力されます） — フロー図／ズームマップ、ER 図、シーケンス図、グラフ（棒、折れ線、円、ドーナツ）、3D レイヤースタック、ビフォー／アフタースライダー、ターミナル再生に対応しています。AI が JSON を作成すると、レイアウト、アニメーション、クリック操作、PDF 用の静的表示は自動で処理されます
• 階層マップ — 大規模なシステム図をレベルごとにクリックして見ていけます（パンくずリスト、境界ボックス、レベルごとにまとめられた矢印）。レベルをまたいで名前付きデータフローをたどったり、DB ボックス内のテーブルや外部キーを開いたり、ステートマシンをクリックしてたどったりできます
• マップドキュメント — スライドを使わず、同じマップを単一ファイルのドキュメントとして表示します。折りたたみ可能な目次、検索、共有可能な URL、パン／ズーム／ミニマップ、テーマピッカー、レベルごとに 1 ページの印刷に対応しています
• ステップ — 矢印キーでコンテンツを 1 ステップずつ表示し、コンポーネントも同じステップ機能を利用します
• テーマ — 5 種類の組み込みテーマ（default、dark、corporate、pop、mono）、ライブテーマギャラリー、AI が生成するカスタムテーマ
• ブランディング — ヘッダー／フッターの帯に、名前、ロゴ、ラベル（例：DRAFT）を表示します
• AI による自己チェック — audit_deck は、はみ出し、切り抜き、テキストの重なり、コントラスト不足、画像の欠落、外部リクエストを検出します。screenshot_deck はスライド画像を返し、AI が確認して修正できるようにします
• AI を使わずに編集 — テキストボックスをダブルクリックしてその場で編集し、Ctrl+S を押すとファイルに直接保存できます（置き換えられるのは編集したテキストだけです）
• プレゼンテーション — ノート、次のスライド、タイマーを備えたプレゼンタービュー、概要表示、ブラックアウト、全画面ウィンドウに対応しています
• 安全な保存 — アトミック書き込み、同時編集に対するリビジョンチェック、復元可能な 20 バージョンの履歴
• リクエストテンプレート — 技術講演、ライトニングトーク、進捗報告、技術提案（MCP プロンプトとして提供）

必要条件

• Node.js 20 以降
• Google Chrome または Microsoft Edge（監査、スクリーンショット、PDF エクスポートに使用します。通常とは異なる場所にインストールされている場合は、CHROME_PATH を設定してください）

クイックスタート

Claude Desktop

Settings → Developer → Edit Config を開き、次を追加します。

{
  "mcpServers": {
    "jh-presentation": {
      "command": "npx",
      "args": ["-y", "jh-presentation"],
      "env": { "JH_PRESENTATION_HOME": "C:/Users/you/Documents/decks" }
    }
  }
}

トレイアイコンから Claude Desktop を終了し、再起動します。次のように依頼してみてください。

Git のブランチ戦略を説明する、図解と段階的な表示を含む15分のスライド資料を作成してください。

Claude Code

claude mcp add jh-presentation -e JH_PRESENTATION_HOME=~/decks -- npx -y jh-presentation

VS Code (.vscode/mcp.json)

{
  "servers": {
    "jh-presentation": {
      "command": "npx",
      "args": ["-y", "jh-presentation"],
      "env": { "JH_PRESENTATION_HOME": "${userHome}/Documents/decks" }
    }
  }
}

スライド資料の保存先は、呼び出しごとに決まります。別の場所に保存するために MCP の設定を変更する必要はありません。

1. ツールに指定する dir（「このプロジェクトの slides フォルダーに作成」など）。
2. AI クライアントの現在のワークスペースにある decks/ フォルダー（Claude Code、VS Code、および MCP ルートを報告するその他のクライアント）。
3. ワークスペースを持たないクライアント（Claude Desktop など）の場合は、JH_PRESENTATION_HOME（デフォルトは ~/jh-presentation）または --workspace <dir> で指定するワークスペース。

ワークスペースには、すべてのプロジェクトで共有するブランド、カスタムテーマ、リクエストテンプレートも保存されます。プロジェクト独自の brand/ または themes/ フォルダーがある場合は、そちらが優先されます。 --decks-dir <name>（JH_PRESENTATION_DECKS_DIR）で decks/ の名前を変更でき、--no-roots（JH_PRESENTATION_ROOTS=off）を指定すると、常にワークスペースに保存されます。

AI ができること（MCP ツール）

分野	ツール
ガイド	get_guide — 作成ルール、コンポーネントカタログ、ワークフロー
テーマ	list_themes、open_theme_gallery、preview_themes、get_theme_guide、create_theme
テンプレート	list_templates（MCP プロンプトとしても公開）
スライド資料	list_decks、create_deck、read_deck、write_deck、replace_slide、add_asset、upgrade_deck、list_history、restore_history、repair_deck
マップ	create_map、read_map（全体、outline、または単一の node）、write_map（全体、または単一の node + part）
チェック	audit_deck、screenshot_deck（スライド資料とマップ）
出力	open_deck（全画面表示も可能）、export_deck（PDF）

プレゼンテーション

キー	操作
→ / Space / Enter	次へ（ステップを含む）
←	前へ
S	発表者ビュー（ノート、次のスライド、タイマー）
E / ボックスをダブルクリック	テキストをその場で編集（Ctrl+S で保存、Esc または「✕」で終了）
O	概要
F	全画面表示
B	画面を黒くする
数字 + Enter	スライドに移動
?	ヘルプ

ブラウザーの「ページを別名で保存…」は使わないでください。レンダリング済みのページが保存され、スライド資料が壊れます。スライド資料内で Ctrl+S を使ってください。誤って保存してしまった場合は、repair_deck で復元できます。

このリポジトリでの作業

npm install
npm run dev        # http://localhost:4000 — deck list, theme gallery, feature sample
npm test

コマンド	説明
npm run dev	ライブリロード対応のプレビューサーバー（ローカルのみ、127.0.0.1）
npm run new -- <name> "Title" [--theme <t>] [--brand footer] [--fullscreen]	decks/ に新しいスライド資料を作成
npm run upgrade [-- <name>]	最新のエンジン、テーマ、ブランドを再埋め込み
npm run pdf -- <name>	PDF を dist/ にエクスポート
npm run repair -- <name>	ブラウザーの「ページを別名で保存」で壊れたスライド資料を修復
npm run gallery	テーマギャラリーをビルド
npm run mcp	MCP サーバーを起動（ワークスペース .workspace/）

機能サンプルは examples/sample.html です。AI による作成ルールは CLAUDE.md（Claude Code）、AGENTS.md（Codex、Cursor、その他のエージェント）、および docs/authoring-guide.md に記載されています。ホストアプリケーション向けの編集プロトコルは docs/edit-protocol.md をご覧ください。

作成ガイド、テンプレート、ツールの説明は、現在日本語で記述されています。チャットで使う言語にかかわらず、LLM はこれらに従って処理できます。また、スライド資料はどの言語でも作成できます。

セキュリティ

すべての処理はお使いのマシン上で実行されます。テレメトリーや外部へのリクエストはなく、プレビュー／保存サーバーは 127.0.0.1 のみで待ち受け、ファイルはワークスペース内にのみ書き込まれます。スライド資料には AI クライアントが作成した JavaScript が含まれ、ブラウザーで実行されます。SECURITY.md をご覧ください。

ライセンス

MIT。各スライド資料の生成セクションには、埋め込みエンジン、コンポーネント、テーマの MIT 表記が含まれるため、そのまま共有できます。スライドの内容はお客様のものです。

---

日本語

AI にプレゼンを「Web ページ」として作らせる MCP サーバーです。Claude Desktop・Claude Code・VS Code などの AI クライアントが内容を書き、jh-presentation が1 ファイルの HTML デッキにします。動く図・段階表示・その場での文字編集・PDF 出力に対応し、AI は検査とスクリーンショットで自分の出来を確認して直せます。API キーは不要です (考えるのは普段使っている AI クライアント)。

• 動く図の部品: 関連図・ズームマップ・ER 図・シーケンス図・グラフ・3D 分解図・ビフォー・アフター・ターミナル再生 (AI は JSON を書くだけ)
• 階層マップ: 大きなシステムの関連図をクリックで何段でも中へ。階層をまたぐデータの流れ、DB の中のテーブルと外部キー、状態遷移図 (遷移させて確かめる)
• マップ文書: スライドなしで全体から細部へたどって読む 1 ファイルの資料 (開閉できる目次・検索・URL での共有・拡大縮小・テーマの切り替え・階層ごとの印刷)
• テーマ 5 種 + 自作テーマ、名前・ロゴの帯、依頼文テンプレート (技術解説・LT・進捗報告・技術提案)
• 枠をダブルクリックして文字を直し、Ctrl+S で元のファイルに保存 (ブラウザの「名前を付けて保存」は使わない)
• 発表者ビュー・一覧・全画面、保存履歴と復元、壊れたデッキの復旧

使い方 (Claude Desktop)

設定 → 開発者 → 「構成を編集」で次を追加し、タスクトレイから終了して再起動します。

{
  "mcpServers": {
    "jh-presentation": {
      "command": "npx",
      "args": ["-y", "jh-presentation"],
      "env": { "JH_PRESENTATION_HOME": "C:/Users/you/Documents/decks" }
    }
  }
}

あとは「jh-presentation で、Git のブランチ戦略を 15 分で説明するプレゼン資料を、図とステップ表示を多めに作って」のように頼むだけです。 依頼の書き方 (道具の名前を書くべきクライアント・依頼文に入れるとよいこと・直し方) は docs/usage.md にまとめています。 詳しい設定 (Claude Code・VS Code) は mcp/README.md を参照してください。 このリポジトリで AI に作業させる場合のルールは CLAUDE.md (Claude Code) / AGENTS.md (Codex・Cursor など)、スライドの書き方は docs/authoring-guide.md にあります。

ライセンスは MIT です。デッキには埋め込んだエンジン・部品・テーマの MIT 表記が自動で入るので、そのまま配布できます。スライドの内容は作成者のものです。