開発者のためのプレゼンスライド OSS「Slidev」を使ってみた＆中身を読んでみた

こんにちは！スマートキャンプで Web アプリケーションエンジニアとして働いている中川です。

突然ですが、みなさんは普段スライドを作っていますか？

私はそこまで頻度高くはないものの、全社イベントでプレゼンするためであったり、他部署交流のための自己紹介、あとは LT 会などのためにスライドを作ることがあります。

Twitter で見かけたこちらのツイートから、Slidevという Markdown からスライドを作成できる OSS を知り、実際に使ってみたところ非常に感触がよかったので、今回の記事では Slidev の簡単な使い方や、なかはどうなっているのかなど紹介していきたいと思います！

🚀 Slidev v0.9.0 Released

🤹 Animations / Motion by @vueuse's motion package
📰 Textual diagrams by Mermaid.js

👇 Play the demo here!https://t.co/ZdsakWBIwG pic.twitter.com/DHPDjWO05j
— Slidev (@Slidevjs) 2021年5月11日

Slidev とは
なかを覗いてみる
- どうやってスライドを生成しているのか
- エクスポート機能はどう実現しているのか
まとめ

Slidev とは

開発者のためのプレゼンテーションスライドを作成する OSS です。

公開 7 日で GitHub リポジトリにはすでに 7000 を超えるスターがついており、発起人は VueUse など Vue 界隈の OSS 活動で知られる Anthony Fu 氏です。

百聞は一見に如かずということで、以下の動画もしくは公式サイトのトップページにある GIF を一度見ていただくのが分かりやすいかと思いますが、簡単に言えば Markdown からプレゼンテーション用のスライドを作成できるものになっています。

youtu.be

その他の特徴を簡単にまとめると...

スライドに CSS 形式のスタイルを適用できる

以下のように、<style>タグを記述することによってスライドにスタイルを適用することができます。

# This is Red

<style>
h1 {
  color: red
}
</style>

---

# Next slide is not affected

また、この<style>タグは記述したスライドにのみ適用される scoped なものです。

反対に、あるスタイルを全スライドに適用することもでき、その場合は./style.cssもしくは{project-root}/styles/index.{css,js,ts}に記述します。

https://sli.dev/custom/directory-structure.html#style

前述した通り全スライドに適用するスタイルを記述できるほかに、テーマ機能を有しており、公開されているテーマを使用したり、そのテーマを改造したり、また自分のテーマを作成することも出来ます。

テーマ機能はプレゼンテーションスライド作成ツールにおいて標準的な機能かとは思いますが、一風変わっているのはテーマを npm 経由でインストールする点で、開発者向けのものであることが伝わってきます。

https://sli.dev/themes/use.html

Web の技術で作られている

後のセクションで詳しく見ていきますが、Slidev はなかで Vite や Vue 3、Windi CSS が動いています。また、各ソースファイルや Vue コンポーネントにおける Script は TypeScript です。

Slidev はスライド形式にレイアウトされた HTML を出力し、それらスライドを操作できるビルトインのプレゼンテーションツールを提供することで、プレゼンテーションのためのスライドツールを実現しています。

ひとつひとつのスライドは HTML であるため、スライドの中で API リクエストしたり、iframe を埋め込んだり、スライド自体を共同編集することも容易です。

Vue コンポーネントをスライドに直接埋め込むことができる

強烈な機能ですが、前述した通り Slidev 自体が Vue 3 で作られていること、HTML として吐き出していることから Vue コンポーネントをスライドに埋め込むことが出来るようになっています。

これは、{project-root}/components/*.{vue,js,ts,jsx,tsx}と配置することでスライド中に独自コンポーネントを埋め込むことが出来ます。例えば、Hoge.vue を components 配下に配置すれば、スライドからは<Hoge></Hoge>として呼び出すことが可能です。

また、組み込みコンポーネントもいくつか用意されており、Youtube.vue では<YouTube id="luoMHjh-XcQ" />として Youtube の動画を埋め込めたり、Tweet.vue では<Tweet id="20" />としてツイートを埋め込めたりします。（現段階ではおそらく変更が激しいので、どのような組み込みコンポーネントがあるのかは直接リポジトリのこのディレクトリを確認することが推奨されています）

おそらく、スライドで動的な要素を実現するために Vue コンポーネントを埋め込むシーンが出てくるかと思いますが、こうして好きにコンポーネントを埋め込めることは非常に拡張性が高く、これまでのプレゼンテーションスライドツールには無かったものなので、例えば LT 中にコードを紹介したあとで、その次のスライドで実際に動いているコンポーネントを見せられるなど、いろいろおもしろい使い方ができそうです。（もちろんスライド作成者が Vue コンポーネントを作れることが前提にはなってしまいますが）

https://sli.dev/custom/directory-structure.html?#components

その他

その他にも、WebRTC を使った画面録画やカメラ投影機能や、PDF,PNG などへのエクスポート機能などが存在しており、詳細はこのページにまとめられています。

簡単な Slidev の紹介は以上です。

注意点として、2021/05/13 現在 Slidev は Public Beta であるため、公式サイトのトップにSlidev is still under heavy development. API and usages are not set in stone yet.といった表示がされている通り、直近は破壊的な変更もありえる想定で使うべきものとなっています。

なかを覗いてみる

ここからは、OSS として公開されている Slidev の中を見ながら、いくつか気になった・面白い点をピックアップしていきます。

どうやってスライドを生成しているのか

Slidev には独自の Markdown パーサが内蔵されています。

パッケージのルート直下にparserディレクトリが存在しており、このなかの特にcore.tsでパース処理を行っています。コンポーネント埋め込みなどある種の Markdown 拡張構文が用意されている手前、このパース処理は今後複雑性が増していきそうだなと読んでいて胃が痛くなりました。

そして、Markdown のファイルパスを投げることでパース結果を返すload関数がfs.tsにあり、loader.tsのhandleHotUpdate関数によって呼び出されることで、Markdown をスライドとして成形・スタイリングしてサーバーが返却する流れのようです。

（他にもテーマの書き出しや Markdown をフォーマットするためにも呼ばれている様子でした。）

エクスポート機能はどう実現しているのか

前述した通り、Slidev には PDF や PNG としてスライドをエクスポート出来る機能が備わっています。

これを実現しているのがexport.tsです。

マイクロソフト製の軽量なライブラリである playwright から chromium のヘッドレスブラウザを使用して、ローカルサーバー上の各スライドページにアクセスし、PDF 生成や PNG のスクリーンショット撮影を行っています。

個人的な感想ですが、なかで Vue が動いていることもあり、ビルド結果を読み込んでエクスポート先の各ファイルを生成するような方法が取られているのかと推測していたため、ヘッドレスブラウザで該当のページを表示して PDF 生成やスクリーンショットを撮影するといった E2E テスト的な手法を使ってエクスポート機能を実現しているのは驚きでした。