はじめに
皆さんは普段スライド資料をどのように作成しているでしょうか？
最近だとGeminiなどの生成AIもすごくて...簡単なスライド資料は作れてしまうわけですが、個人的にはSlidevが好きでよく使用しています！
-
Gitで管理できる
-
Markdownなので
- 編集（特に一括置換など）が楽！
- 生成AIにチェックや修正も頼みやすい
-
カスタムテーマも簡単に作成できる
そんな素敵なSlidevですが、複数のプレゼンテーションを管理しようとすると少し面倒に感じることがありました。
それが、モノレポで管理しづらいという点。
公式のページを見てみても、特にモノレポに言及するような内容もなく、各プレゼンテーションごとに個別で管理することを想定しているように見えますし、トライされている方も基本的にはワークスペース機能で頑張って管理されている様子。
当初は自分もワークスペースで管理していたのですが、以下のような不便さを感じていました。
開発サーバーの起動のために...
-
プレゼンテーションごとにディレクトリを移動してコマンドを叩く
-
ルートの
package.jsonに大量のscriptsを定義する -
引数を指定して長いコマンドを叩く
ちょっと流石に面倒くさい！と思い、Slidevのモノレポ管理を少しでも楽にするため、Viteプラグイン vite-plugin-slidev-manager を作成しました。
今日はその紹介をしたいと思います。
何ができるのか
このプラグインを導入すると、npm run dev (または vite) を実行した際に、自動的に presentations ディレクトリ（良い命名があれば変えたい）配下のスライドを検出し、以下のようなインタラクティブな選択画面を表示してくれます。
? Select a presentation to run:
# Title ( path/to/your/presentations/xxx )
❯ my-awesome-talk (presentations/my-awesome-talk.md)
lt-slide-vol-1 (presentations/lt-slide-vol-1.md)
conference-2024 (presentations/conference-2024.md)
矢印キーで選択してEnterを押すだけで、選んだスライドのSlidevサーバーが立ち上がります。
また、npm run build (または vite build) を実行した場合は、同様に選択したスライドをPDFとしてエクスポートしてくれます。
主な特徴
-
インタラクティブなCLI: お馴染みのInk を使用しており、直感的に操作できます。
-
ディレクトリ指定オプション: 基本設定は
presentationsディレクトリを対象としていますが、必要に応じてpresentationsDirオプションで変更できます。 -
Dev & Export 対応: 開発サーバーの起動だけでなく、PDFエクスポートもサポートしています。
-
Viteプラグインとして動作: 既存のViteエコシステムに乗っかる形で動作するため、導入が容易です。
-
Slidevのcliを実行: 内部でSlidevのCLIコマンドをNode.jsで直接実行しているため、パッケージマネージャーを問わず動作します（するはず）。
導入方法
1. インストール
npm install -D vite-plugin-slidev-manager
# or
yarn add -D vite-plugin-slidev-manager
# or
pnpm add -D vite-plugin-slidev-manager
2. Viteの設定
プロジェクトルートの vite.config.ts にプラグインを追加します。
import { defineConfig } from 'vite';
import presentationManager from 'vite-plugin-slidev-manager';
export default defineConfig({
plugins: [
presentationManager({
// オプション: スライドを格納するディレクトリ名（デフォルトは 'presentations'）
presentationsDir: 'presentations'
})
]
});
3. ディレクトリ構成
ルートに presentations ディレクトリを作成し、その中に各スライドのディレクトリを配置します。
my-project/
├── package.json
├── vite.config.ts
├── presentations/
│ ├── my-awesome-talk/
│ │ └── index.md
│ └── lt-slide-vol-1/
│ └── index.md
├── themes/ // 自分は自作テーマのワークスペースも作成し、使い回しています
...
4. 実行
package.json の scripts が以下のようになっていれば準備完了です。
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}
-
開発時:
npm run devを実行し、リストからスライドを選択。 -
エクスポート時:
npm run buildを実行し、リストからスライドを選択。
今後の拡張
個人的な使用用途としてプレゼンテーションの表示とPDFエクスポートが主な目的だったため、まずはこの2つの機能に絞って実装しましたが、今後Slidevでサポートしている以下の形式にも対応したいと思っています（予定は未定）。
-
PPTX
-
png
-
Markdown
まとめ
個人的にはSlidevでの発表が簡単になって満足のいくものができました！
また、年を越す前に初めてのnpmパッケージ（Viteプラグイン）を公開できてよかったなと思っています。
もしSlidevで複数のプレゼンテーションを管理していて、モノレポでの運用に困っている方がいれば、ぜひ vite-plugin-slidev-manager を試してみてください！
Discussion