Presenter

Obsidian上でMarkdownノートから直接美しいスライド資料をプレビュー・プレゼンテーションできるプラグインです。

AI（LLM）で生成したMarkdownノートの文章構成（# H1 を表紙、## H2 を各スライドの区切り）を崩さずにそのまま活かし、直感的なフロントマター配色設定、マルチカラム（2カラム・3カラム）表示、そして高精細なPDFエクスポートを可能にします。

主な特徴 (Features)

• リアルタイムプレビュー (Split Pane Preview):
  • エディタの隣にスライドプレビューを表示し、執筆しながらレイアウトやデザインを即時確認。
  • カーソル位置に自動追従して該当スライドを表示（ピン留め固定も可能）。
  • 入力中は250msのデバウンスで滑らかなタイピング体験を維持。
• 自然な文章構造によるスライド化:
  • # H1: プレゼンテーション全体の「表紙スライド」
  • ## H2: 各スライドの「タイトル（改スライド）」
  • ### H3 / #### H4: スライド内の小見出し・セクション
  • （--- による明示的なスライド分割もサポート）
• 柔軟なデザイン・カラー設定 (Settings & Frontmatter):
  • プラグイン設定画面（Settingsタブ）で基本配色やヘッダーをあらかじめ設定可能。
  • フロントマターなし（ゼロ記述）ですぐにスライド化でき、ノートごとに上書きしたい項目のみ記述できます。
• マルチカラム（グリッドレイアウト）:
  • 標準Markdown互換のHTMLコメント記法（<!-- columns 2 --> や <!-- columns 3 -->）で、横並びのレイアウトを素早く構築。
  • Obsidian以外のMarkdownビューア（GitHubやVS Code等）ではコメントが非表示になり、普通の文書として違和感なく読めます。
  • 背景色・枠線ありの「カードスタイル」と、背景なしの「プレーンスタイル（<!-- columns 2 plain -->）」を自在に選択可能。
• ラベル／バッジ自動装飾:
  • [重要] や [STEP 1] のように記述するだけで、アクセントカラーが適用されたバッジとして自動装飾。
• ObsidianネイティブのMarkdown完全対応:
  • 表（テーブル）、コードブロック、画像、数式、Callout、リストなどをそのまま美しく描画。
• ヘッダー・フッター・ロゴ表示:
  • スライド上部にタイトルやロゴ、下部に著作権やページ番号（X / Y）を表示。
• 発表者ノート & カンペ表示 (Speaker Notes):
  • Obsidian標準Callout > [!note] を記述すると、スライド大画面からは自動で非表示になり、発表者カンペ（N キーまたはツールバーでトグル）として手元確認可能。
• 配布用ハンドアウト (SlideDoc) 印刷:
  • 印刷ボタンから「Print handout with notes」を選択すると、A4用紙1枚につき「スライド ＋ 詳細解説」が綺麗にレイアウトされた非エンジニア向けの配布資料を出力。
• 単一HTMLエクスポート (ポータブル配布ファイル):
  • コマンド「Export presentation as standalone HTML」で、Obsidian不要・ブラウザだけで動く単一の自己完結HTMLを出力。
  • 受取手はブラウザ上で [ 🖥 スライド表示 ] と [ 📄 配布資料（解説付き）表示 ] をワンクリックで切り替え可能。
• PDFエクスポート (印刷機能):
  • Cmd + P またはツールバーの印刷ボタンから、高品質なスライドPDF / ハンドアウトPDFを出力可能。
• スライドはみ出し検知 & 自動フィット (Overflow Detection & Auto-fit):
  • スライドカードの枠線からはみ出してしまう長文をリアルタイムに検知し、ツールバーに警告バッジ（⚠ N）を表示。
  • プラグイン設定（Layout & grid → Auto-fit overflowing slides）またはフロントマター（fit: auto）を有効にすると、フォントサイズ・行間・余白をカード枠内に収まるよう自動縮小（下限70%まで視認性を担保）。
  • 70%縮小でも収まらない場合は、スライド内の2つ目のH3見出し（###）の前でワンクリック分割（Undo可能）できるインスペクションモーダルを提供。
• レスポンシブ拡大縮小:
  • 16:9 または 4:3 の比率を保ちながら、ウィンドウや画面サイズに合わせて自動スケーリング。

インストール方法 (Installation)

手動インストール (Manual Installation)

1. 最新のリリースファイル（main.js, manifest.json, styles.css）をダウンロードします。

2. Obsidian の Vault 内に以下のフォルダを作成します：

   <Vault>/.obsidian/plugins/markdown-presenter/
   

3. 作成したフォルダに main.js, manifest.json, styles.css を配置します。

4. Obsidian の 設定 → コミュニティプラグイン を開き、プラグイン一覧を再読み込みして「Presenter」を有効化します。

使い方 (Usage)

1. スライドノートを書く

フロントマターは省略可能（ゼロ設定）です。ノート固有でヘッダーや配色を変えたい場合のみ、必要な項目を数行記述します。

---
# 必要な項目のみ上書き指定可能（未指定時は設定画面のデフォルトが適用されます）
header: "2026年度 提案資料"
accentColor: "#38bdf8"
---

# 新規事業提案書
AIを活用したナレッジワークの革新

発表者: 山田 太郎
日付: 2026-09-27

## 背景と課題

AIツールの普及により情報量は増加していますが、社内共有の形式化に時間がかかっています。

- スライド作成のオーバーヘッド
- デザイン調整による時間の浪費
- 情報の鮮度低下

## 提案するソリューション

<!-- columns 2 -->
### Markdownドリブン
- 普段のメモがそのままスライド化
- AI生成のアウトラインを直接活用

### 高速プレビュー & PDF
- ワンクリックでプレゼン表示
- 印刷から商談用PDFを一発出力
<!-- /columns -->

## まとめ

Markdownによるスライド作成で、思考からプレゼンまでのリードタイムをゼロにします。

2. リアルタイムプレビューを表示する

編集しながら横でスライドプレビューを確認できます。

• エディタタブヘッダー: ノート右上の「TV」アイコンをクリック
• コマンドパレット: Cmd + P (Mac) / Ctrl + P (Win) を押し、「Presenter: Open slide preview」または「Presenter: Toggle slide preview」を実行
• リボンアイコン: 左サイドバーの「TV」アイコンをクリック

[!TIP]

• カーソル追従: エディタでカーソルを置いている行のスライドが自動表示されます。プレビュー上部の「ピン留めボタン（locate）」を押すと追従を一時停止し、現在表示中のスライドを固定できます。
• 全画面移行: プレビュー上部の「プレゼンテーション開始ボタン」を押すと、プレビュー中のスライド位置から即座に全画面プレゼンテーションへ移行できます。

3. プレゼンテーションを開始する (全画面)

• リボンアイコン: 左サイドバーのプロジェクター画面アイコンをクリック
• コマンドパレット: Cmd + P (Mac) / Ctrl + P (Win) を押し、「Presenter: Start presentation」を実行

ショートカットキー一覧 (Keyboard Shortcuts)

カラム（グリッドレイアウト）の書き方

1. 基本記法（HTMLコメントディレクティブ）

Obsidian Presenter では、標準Markdownの仕様を崩さないよう HTMLコメント（<!-- columns N -->） を使ってマルチカラムを指定します。 Obsidian以外のMarkdownビューア（GitHub、VS Code等）ではコメントが非表示になり、見出しが縦に並ぶ通常のドキュメントとしてそのまま読めます。

2カラムの記述例

<!-- columns 2 -->

### 左カラム
左カラムの内容（リスト、画像、テキストなど）

### 右カラム
右カラムの内容

<!-- /columns -->

見出し（H3など）を並べるだけで自動的に各カラムに分割されます。 見出しを伴わない任意の文章を区切りたい場合は、<!-- column --> を挟むことも可能です：

<!-- columns 2 -->
左カラムの任意のテキスト
<!-- column -->
右カラムの任意のテキスト
<!-- /columns -->

3カラムの場合は <!-- columns 3 --> を使用します。

2. カラムの背景色スタイル（Card vs Plain）

カラムには、枠で囲むカードスタイル（既定）と、背景色・枠線のないプレーンスタイルの2種類があります。

ブロック個別指定の例（プレーンスタイル）

<!-- columns 2 plain -->

### 自由度の高いテキスト配置
スライド背景と同化し、余白のみで美しく並列配置されます。

### 右カラム
余分な枠線や背景色を排したい時に最適です。

<!-- /columns -->

スライド全体またはVault全体での設定

• 特定ノート全体でプレーンを標準化: フロントマターに columnStyle: plain を指定
• Vault全体でプレーンを標準化: Obsidianの 設定 → Presenter → Default column style で Plain (transparent & borderless) を選択

3. ホットキー・コマンドによるクイック挿入

カラムの開始・終了コメントを手入力する手間を省くため、コマンドパレット（Cmd + P / Ctrl + P）および 設定 → ホットキー に割り当て可能な挿入コマンドを用意しています。

[!TIP]

• 未選択時: 開始・終了コメントを挿入し、真ん中の空行に自動でカーソルが移動します。
• テキスト選択時: 選択中の見出しやリストの前後を自動的に <!-- columns N --> と <!-- /columns --> で囲みます。

ラベル／バッジ記法 (Labels & Badges)

[xxx] テキスト の形式で記述すると、アクセントカラーが反映された視覚的なバッジ（ラベル）として自動的に装飾されます。

- [重要] 締切は来週水曜日までとなります
- [課題] プレゼン資料作成の効率化
- [STEP 1] 要件定義と構成の策定

見出しや段落、リスト項目内など、任意の場所で使用できます。 ※ 通常のMarkdownリンク [テキスト](URL) や内部リンク [[ノート]]、タスクチェックボックス - [ ] は通常通り処理され、誤判定されることはありません。

発表者ノート & 資料配布（非エンジニア向け連携）

標準Markdownを崩さずに、「プレゼン投影して話す」と「非エンジニア向けに詳細資料を配る」を両立できます。

1. 発表者ノート・補足解説の書き方

Obsidian標準のCallout記法（> [!note]）を書くだけです。

## 提案するソリューション

- **Markdownドリブン**: 普段のメモがそのまま資料化
- **高速プレビュー**: 執筆しながらリアルタイム確認
- **ワンクリック配布**: 非エンジニアにも見やすく共有

> [!note] 補足・背景解説
> ここに書いた文章は、発表本番の大画面スライドからは自動で隠れ、発表者の手元カンペになります。
> 一方で、後述のHTMLエクスポートやハンドアウト印刷時には、スライド直下に「詳細解説」として自動展開されます。

• プレゼン投影中:
  • 大画面上はスッキリした要点スライドのみが表示されます。
  • ツールバーの「📝 ノート」ボタン、またはキーボードの N キーで、画面下部に手元カンペ（Speaker notes）をいつでも展開できます。

2. 非エンジニア向け単一HTMLエクスポート

Obsidianを使っていない同僚やクライアントへ資料を渡す場合、単一の自己完結HTMLとして出力できます。

• コマンドパレットから「Presenter: Export presentation as standalone HTML」を実行します。
• ノートと同じ場所に <ノート名>-presentation.html が出力され、自動でダウンロードされます。
• 相手はブラウザでダブルクリックするだけで開くことができ、右上の切り替えスイッチで：
  • [ 🖥 スライド表示 ]: 矢印キーでめくれる全画面プレゼン
  • [ 📄 配布資料（詳細解説）表示 ]: スライドと詳細解説が縦スクロールで通読できるドキュメント を相手の好みに合わせて自由に切り替えて読めます（外部サーバー不要・完全オフライン対応）。

3. ハンドアウト（SlideDoc）印刷・PDF出力

• プレゼン画面の「🖨 印刷」ボタンから「Print handout with notes」を選択します。
• A4用紙1ページにつき「スライド（要点） ＋ その詳細解説」がセットになった、報告書形式の高品質PDFを出力できます。

スライドはみ出し検知と自動フィット (Overflow & Auto-fit)

スライドに文章やリストを書きすぎてカード枠からはみ出してしまった場合、本番投影時に文字が切れたりスクロールバーが出たりするトラブルを防ぐ機能です。

1. はみ出しの自動検知と警告バッジ

• プレビュー画面やプレゼン画面のツールバーに、はみ出しが発生しているスライド件数（⚠ N）がリアルタイムに表示されます。
• スライドジャンプ画面（スライドアラート一覧）でも、該当スライドの横に ⚠ バッジが表示され、問題のあるスライドへ一発でジャンプできます。
• 警告ボタンをクリックすると、「Slide overflow inspection」モーダルが開き、各スライドのはみ出し率（例: +20% overflow）や対処アクションを確認できます。

2. 自動フィット (Auto-fit)

文字量に応じて、CSSのフォントサイズや行間、余白を自動でスケールダウン（下限70%まで）してカード内に収めます。

• プラグイン全体で有効化: 設定 → Layout & grid → Auto-fit overflowing slides をONにします。
• ノート個別で指定: フロントマターに fit: auto（または fit: none）を記述します。

---
fit: auto # このノート内のあふれたスライドを自動で最大70%まで縮小フィット
---

[!NOTE] スライド縮小の下限は 70%（0.70） にクランプされています。文字が小さくなりすぎてプレゼンで読めなくなることを防止します。

3. スライドのワンクリック分割 (Split slide)

文章量が多すぎて70%縮小でも収まらない場合、スライド内に複数のH3見出し（###）が存在すれば、インスペクションモーダルの「Split slide」ボタンから、2つ目のH3見出し直前に --- を自動挿入して2枚のスライドへ綺麗に分割できます（エディタの Cmd + Z でいつでも元に戻せます）。

コマンドパレットから「Presenter: Check slide overflow」を実行することでも、いつでも検査モーダルを呼び出せます。

設計書ドキュメント (Design Documents)

本プラグインの内部構造や詳細仕様については、以下の設計書をご参照ください：

• システムアーキテクチャ設計書 (architecture.md)
• 機能仕様書 (specification.md)
• UI/UX・スタイリング設計書 (ui-ux.md)

開発・ビルド (Development)

# 依存関係のインストール
npm install

# 開発用ビルド (watch mode)
npm run dev

# 本番ビルド (型チェック & バンドル)
npm run build

# リンター実行
npm run lint

ライセンス (License)

MIT License