canvas-present: プレゼンテーションキャンバスビルダー

スライド寸法、ナビゲーションエッジ、レイアウトパターン、カラーコーディングについては ../canvas/references/presentation-spec.md をお読みください。 ノード制限については ../canvas/references/performance-guide.md をお読みください。

---

操作

プレゼンテーションをビルド (/canvas present [topic])

トピック説明からプレゼンテーションキャンバスを完全に作成します。

ワークフロー:

1. コンテキストを収集: ユーザーに以下を確認します:

   • トピック/タイトル(必須)
   • スライド数(デフォルト: 6、推奨: 6～10)
   • スタイル: deck(1200×675 クリーンレイアウト)または storyboard(1920×1080 スクリプト列付き)
   • スライドに画像を生成するか(/bananaが必要)

2. スライド構成を生成: Claude が各スライドのコンテンツを作成します:

   • スライド 1: タイトルスライド(タイトル、サブタイトル、日付)
   • スライド 2: アジェンダ/概要
   • スライド 3～N-2: コンテンツスライド(要点、データ、知見)
   • スライド N-1: 重要なポイント/要約
   • スライド N: 次のステップ/クロージング

3. キャンバスを作成:

   a. presentation テンプレートから開始:

   python3 scripts/canvas_template.py presentation [output_path] \
     --param title="[topic]" --param slide_count=[N]
   

   b. Edit ツールを使用して、各スライドのテキストノードを生成コンテンツで編集します。

   c. 画像がリクエストされた場合: /banana で生成し、スライドグループ内にファイルノードとして追加します。

   d. ストーリーボードスタイルの場合: スクリプト注釈テキストノード(幅=500)を各スライドグループの右側に追加します。

4. スペックに従ってスライドをカラーコード化:

   • タイトル/クロージング: "6"(紫)
   • コンテンツ: "4"(緑)
   • 重要な洞察: "5"(シアン)
   • アクションアイテム: "2"(オレンジ)

5. 検証:

   python3 scripts/canvas_validate.py [output_path]
   

6. 報告: 「[N] スライドのプレゼンテーションを [path] に作成しました。Obsidian で Advanced Canvas で開くと、矢印キーでナビゲートできます。」

---

ノートからビルド (/canvas present from [notes])

既存のマークダウンファイルまたはウィキページからプレゼンテーションを作成します。

ワークフロー:

1. ソースノートを検索: 指定されたファイルを検索します。claude-obsidian vault 内にある場合は wiki/ パスを使用します。それ以外の場合は現在のディレクトリを検索します。

2. コンテンツを抽出: 各ノートを読んで以下を抽出します:

   • H1 見出し → スライドタイトル
   • H2 見出し → スライドセクションマーカー
   • 主要段落 → スライド本文
   • 画像/埋め込み → スライドビジュアル
   • 箇条書きリスト → スライド箇条書き

3. スライドにマッピング: H1 または H2 セクションごとに 1 つのスライド。セクションが長すぎる場合(200 語以上)は複数のスライドに分割します。

4. キャンバスを生成: /canvas present [topic] と同じビルドワークフローを実行し、Claude が生成したコンテンツの代わりに抽出されたコンテンツを使用します。

5. 報告: 「[N] 個のソースノートからプレゼンテーションを作成しました → [M] スライド。」

---

スライドを追加 (/canvas present add slide [content])

既存のプレゼンテーションキャンバスに新しいスライドを追加します。

ワークフロー:

1. 既存のプレゼンテーションキャンバスを読みます。
2. 最後のスライドグループを検索(垂直スタックの場合は最高 y、水平スタックの場合は最高 x)。
3. 次の位置に新しいスライドグループを作成:
   • 垂直: y = last_slide_y + last_slide_height + 100
   • 水平: x = last_slide_x + last_slide_width + 100
4. 新しいスライドグループ内にコンテンツテキストノードを追加します。
5. 前のスライドから新しいスライドへのエッジを追加します。
6. 書き込んで検証します。

---

スライドコンテンツガイドライン

各スライドは 「スライドごとに 1 つの考え」 の原則に従うべきです:

• タイトル: 3～8 語。スライドタイトルには H2(##)を使用します。
• 本文: 2～5 個の箇条書き、または 1～2 個の短い段落。スライドあたり最大 100 語。
• ビジュアル: コンテンツスライドごとに 1 つの画像または図。テキストの右に配置します。
• コールアウト: 強調には Obsidian コールアウトを使用:

  > [!tip] 重要な洞察
  > 主なポイントを 1 文で。
  

スライド内の Mermaid: Mermaid ダイアグラムはテキストノードでネイティブにレンダリングされます。データスライドに最適:

## 収益成長

```mermaid
graph LR
    Q1["Q1: $1.2M"] --> Q2["Q2: $1.8M"]
    Q2 --> Q3["Q3: $2.4M"]
    Q3 --> Q4["Q4: $3.1M"]

---

## メディアスキルとの統合

ユーザーがスライドの画像をリクエストした場合:

1. **banana**: ヒーロー画像、背景、イラストを生成します。
   - プロンプトパターン: 「[スライドトピック]、プレゼンテーションスライドスタイル、クリーン、プロフェッショナル」
   - スライドグループ内にファイルノードとして追加(半幅、右寄せ)

2. **svg**: チャート、ダイアグラム、アイコンを生成します。
   - データビジュアライゼーションスライドに最適
   - viewBox ベースのサイジング付きのファイルノードとして追加

3. **Mermaid**: テキストノード内でネイティブ — 外部スキルは不要。
   - スライド内のフローチャート、シーケンスダイアグラム、ガントチャートに最適

メディアスキルがインストールされていない場合、テキストのみのプレゼンテーションを構築し、「AI で生成したスライド画像を使用するには `/banana` をインストールしてください。」と提案します。