slidev-export

Slidev プレゼンテーションのエクスポート

このスキルでは、PDF、PPTX、PNG、Markdown へのエクスポートと、さまざまな設定オプションを含む Slidev のすべてのエクスポート方法を扱います。

このスキルを使用する場面

• Slidev を実行せずにプレゼンテーションを共有する
• PDF の配布資料を作成する
• プレゼンテーションをアーカイブする
• スライドを印刷する
• PowerPoint に変換する

エクスポート方法

ブラウザーエクスポーター（推奨）

v0.50.0 以降では、組み込みのブラウザーエクスポーターを使用します。

1. プレゼンテーションを実行します：npm run dev
2. ナビゲーションバーからエクスポートパネルを開きます
3. または、次の URL にアクセスします：http://localhost:3030/export
4. 形式とオプションを選択します
5. 「エクスポート」をクリックします

CLI エクスポート

playwright-chromium が必要です。

npm install -D playwright-chromium

次に、以下を実行します。

npx slidev export

エクスポート形式

PDF エクスポート

ブラウザーを使用する方法：

1. /export を開きます
2. 「PDF」を選択します
3. オプションを設定します
4. ダウンロードします

CLI を使用する方法：

npx slidev export

出力先：./slides-export.pdf

PPTX エクスポート

ブラウザーを使用する方法：

1. /export を開きます
2. 「PPTX」を選択します
3. ダウンロードします

CLI を使用する方法：

npx slidev export --format pptx

出力先：./slides-export.pptx

注：スライドは画像としてエクスポートされ、発表者ノートも含まれます。

PNG エクスポート

CLI を使用する方法：

npx slidev export --format png

出力先：./slides-export/ ディレクトリ内の個別の PNG ファイルです。

Markdown エクスポート

npx slidev export --format md

PNG 画像を埋め込んだ Markdown をコンパイルします。

CLI オプション

基本オプション

オプション	説明
--format	エクスポート形式：pdf、pptx、png、md
--output	出力ファイル／ディレクトリ名
--dark	ダークモードでエクスポートします
--with-clicks	クリックごとに個別のページとしてエクスポートします
--range	特定のスライドをエクスポートします

例

出力名を指定する：

npx slidev export --output my-presentation

ダークモードでエクスポートする：

npx slidev export --dark

クリックごとにエクスポートする：

npx slidev export --with-clicks

アニメーションの各ステップを個別のページとして作成します。

特定のスライドを指定する：

npx slidev export --range 1,4-5,8

スライド 1、4、5、8 をエクスポートします。

詳細オプション

タイムアウトの設定

アニメーションを含む複雑なスライドの場合：

npx slidev export --timeout 60000

タイムアウトを 60 秒に延長します。

コンテンツの読み込みを待つ

npx slidev export --wait 10000

エクスポートを開始する前に 10 秒待ちます。

ページ読み込みの戦略

npx slidev export --wait-until networkidle

オプション：none、load、domcontentloaded、networkidle

目次

npx slidev export --with-toc

スライドのタイトルを含む PDF のアウトラインを生成します。

背景を透明にする（PNG）

npx slidev export --format png --omit-background

デフォルトの白い背景を取り除きます。

フロントマターでの設定

エクスポートするファイル名

---
exportFilename: my-awesome-presentation
---

ダウンロードボタン

---
download: true
---

プレゼンテーションにダウンロードボタンを表示します。

ソースとともにエクスポートする

---
download: 'https://example.com/slides.pdf'
---

事前に生成した PDF へのリンクを設定します。

クリックアニメーションの扱い

--with-clicks を指定しない場合

各スライドの最終状態のみがエクスポートされます。

--with-clicks を指定する場合

クリックごとの状態が個別のページになります。

• スライド 1、クリック 0 → ページ 1
• スライド 1、クリック 1 → ページ 2
• スライド 1、クリック 2 → ページ 3
• スライド 2、クリック 0 → ページ 4
• など

配布資料での推奨設定

読者が展開の流れを確認できるよう、配布資料には --with-clicks を使用します。

エクスポート品質

PDF の解像度

npx slidev export --scale 2

スケールを上げると品質が高くなり、ファイルサイズも大きくなります。

PNG の解像度

npx slidev export --format png --scale 2

package.json のスクリプト

便利なスクリプトを追加します。

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export",
    "export:pdf": "slidev export --format pdf",
    "export:pptx": "slidev export --format pptx",
    "export:png": "slidev export --format png",
    "export:dark": "slidev export --dark"
  }
}

エクスポートの問題への対処

フォントが表示されない

1. Web フォント（Google Fonts）を使用します
2. または、フォントをスタイルに埋め込みます

コードがハイライトされない

1. エクスポート前に Shiki が読み込まれることを確認します
2. --wait オプションを使用します

画像が表示されない

1. 絶対 URL を使用します。または
2. public/ ディレクトリに配置します

アニメーションが動作しない

エクスポートにはアニメーションが含まれません。 状態を記録するには --with-clicks を使用します。

タイムアウトエラー

npx slidev export --timeout 120000 --wait 5000

メモリーの問題

大規模なプレゼンテーションの場合：

NODE_OPTIONS="--max-old-space-size=4096" npx slidev export

エクスポートとビルドの比較

	エクスポート	ビルド
出力	PDF/PPTX/PNG	静的ウェブサイト
インタラクティブ性	なし	あり
アニメーション	静止画として記録	動作する
サイズ	小さい	大きい
共有方法	メール／Drive	ウェブホスティング

ベストプラクティス

1. 早い段階でエクスポートをテストする

プレゼンテーション当日まで待たないでください。

npm run export

2. PDF をしっかり確認する

以下を確認します。

• すべてのスライドが含まれている
• コードが読みやすい
• 画像が表示される
• 色が正しい

3. アスペクト比を統一する

標準は16:9です。プレゼンテーションの途中で変更しないでください。

4. エクスポートしやすいようにシンプルにする

一部の機能は正しくエクスポートされません。

• 動画 → スクリーンショットを使用します
• iframe → スクリーンショットを使用します
• 複雑なアニメーション → シンプルにします

5. PPTXに発表者ノートを含める

PPTXのエクスポートには、ノートが自動的に含まれます。

6. エクスポートにバージョンを付ける

npx slidev export --output presentation-v1.2

エクスポートのワークフロー

カンファレンスへの提出用

# High-quality PDF
npx slidev export --with-toc --scale 2

配布資料用

# Include all click states
npx slidev export --with-clicks

ソーシャルメディア用

# Individual images
npx slidev export --format png

アーカイブ用

# Multiple formats
npm run export:pdf
npm run export:pptx
npm run export:png

出力形式

エクスポート時：

# EXPORT COMMAND:
npx slidev export [options]

# OPTIONS USED:
--format [pdf|pptx|png|md]
--output [filename]
--with-clicks (if needed)
--dark (if needed)
--range [slide numbers]
--timeout [ms]
--wait [ms]

エクスポート前のチェックリスト：

• すべてのスライドが正しくレンダリングされる
• コードブロックが読みやすい
• 画像が正しく読み込まれる
• フォントが正しい
• エクスポートコマンドが動作することを確認する

出力ファイル：

• PDF：./[name].pdf
• PPTX：./[name].pptx
• PNG：./[name]/