• Home
• コーポレートブログ
• 機能が豊富なMarkdownベースのスライド作成ツール「Slidev」を紹介

今回のブログ担当は石川です。最近新しくベータ版がリリースされたSlidevというMarkdownベースのスライド作成ツールを紹介します。

※ Slidev公式サイトにSlidev is still under heavy development. API and usages are not set in stone yet.と明記されているとおりSlidevはまだベータ版で、このブログに書いてある内容についても仕様が変わる可能性があります。

Slidevとは？

Markdown記法で書いたテキストをスライドに変換するツールです。
こういったツールは他にもいろいろありますが、Slidevはnpx slidevコマンドで起動した状態でhttp://localhost:3030にブラウザでアクセスすると、slides.mdファイル内のMarkdownテキストを元に変換したスライドを表示するという手元で動かすタイプ。

• プレゼンテーションを助ける機能が豊富
• http://localhost:3030/presenter にアクセスするとKeynoteやPowerpointのようにプレゼンター用のページがあり、残り時間やコメントを確認することができる
• PDFやPNG、シングルページアプリケーション(SPA)としてのExportも可能(試してみたところ、特にレイアウトが崩れること無く作成できた)
• ブラウザ上で動くためHTMLやCSS、Vue Componentsなどを埋め込むことができ、割と何でもできちゃう
• mermaidやLaTeX記法も使える

かなりカスタマイズ性が高いので、「Markdownから簡単にスライドを作る」という使い方だけで無く 「Gitでバージョン管理できるテキストファイルによって凝ったスライドを作る」 という使い方もできるんじゃないでしょうか。

中でもいいなと思ったところ

1. シンタックスハイライト & 行の強調表示

シンタックスハイライターとしてPrismとShikiの両方をサポートしていて、好きな方を選べます。

また、次のようにコードブロックを書くと、指定した一部の行を強調することができます。 コードの意図や動きを一つ一つ説明していくときに使えそうです。

{all|1-3|4-5}のようにパイプ(|)でつなげれば、最初は全体を強調、次は1〜3行目を強調、次は4〜5行目を強調というように分割することもできて便利。
(これを一般的なプレゼンテーションツールでやろうとすると、3枚のコードの画像をそれぞれ独立したページとして表示して切り替える必要があります。)

2. iframe埋め込みもそのまま動く

iframeを埋め込んだときもそのまま動くため、Youtubeの動画やTwitterのつぶやき、CodePenの埋め込みまでできます。いろいろ遊べそうですね。

ちなみに、YoutubeやTwitterについては<Tweet/> や <Youtube/>などの記法でも使えます。 <Youtube id="<動画のid>" />

3. 画面・音声収録機能

プレゼンテーションを開始してから終了するまでの

• スライド画面 + マイクの音声
• インカメラの映像(ワイプに使うため)

を収録し、出力することができます。

最近はオンラインセッションなどでも事前に録画した映像を提出することがありますが、音声と映像を別の機能で撮った場合タイミングを合わせるのに手間がかかります。 この機能なら、同じタイミングで収録を開始するので組み合わせて1つの動画にするのも簡単ですね。

4. ワイプ表示機能

収録機能でインカメラの映像も収録できると書きましたが、スライド上にリアルタイムでインカメラの映像を表示する機能まであります。

5. Windi CSSで用意されたユーティリティを利用できる

基本はMarkdownですが、HTMLやCSSなどを書くことで凝ったレイアウトにもできるようになっています。
とはいえ、せっかくならシンプルに書きたいですよね。SlidevにはWindi CSSが標準で組み込まれているため、Windi CSSで用意されているクラスを利用することができます。

特にグリッド関係は便利そうです。
https://windicss.org/utilities/grid.html

6. VSCodeの拡張機能

VSCode上でMarkdownを書き、それをVSCode上でプレビューしたりページを切り替えたりできる拡張機能も開発されています。 VSCodeユーザーなのでこれも嬉しいです。
https://marketplace.visualstudio.com/items?itemName=antfu.slidev&ssr=false#overview

プレビューについても、カーソルの位置に合わせてページを追従する機能もあります。

その他

ローカルに置いてある画像の埋め込みのやり方がわからず困った

サンプルを見ると <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true"> のようなタグで画像を埋め込んでいる。
試しにsrcのところを画像ファイルを示す相対パスや絶対パスに置き換えてみたが... [vite]: Rollup failed to resolve import "image.png" from "../../../../../@slidev/slides/1.md"でビルドに失敗した。

→ publicディレクトリを作り、そこにイメージを置けばdistディレクトリにコピーされてslides.mdから指定できるようになることがわかった。 public/image.pngのような画像ファイルを配置したとき、slides.mdでは<img src="/issue.png">のようにルートパスで書く。

参考情報:
https://sli.dev/custom/directory-structure.html#public
https://vitejs.dev/guide/assets.html#importing-script-as-a-worker

使っていて気になったところ

• Slidevという名前が検索性能が悪い。Googleで検索する場合"slidev"のようにダブルクォーテーションで囲ってあげないとslideに補正されちゃう
• リアルタイムでMarkdownファイルを書き換えてもスライドに反映する仕組みである以上仕方ないですが、時折うまく反映されなくなって起動し直さないといけなくなる。(これはベータ版なのでそのうち改善されていきそう)

開発活動が活発

開発がとても活発で勢いがあります。(最近のリリース履歴を見てもほぼ毎日複数のリリースが作られている)
まだベータ版でも使っていてとても楽しめるツールなので、今後が楽しみです。