機能が豊富な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テキストを元に変換したスライドを表示するという手元で動かすタイプ。

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


slidevはプレゼンター用のページも用意されている(クリックで拡大)

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

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

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

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


{2,3}で2、3行目を強調するよう指定 

スライドでコードの2、3行目が強調されている

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


強調する箇所を複数指定して、順に切り替える(動画)

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

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


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

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

開発活動が活発

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

こちらの記事もオススメです!
HTMLとMarkdownで手早く発表用スライドを作れる reveal.js
HTMLとMarkdownで手早く発表用スライドを作れる reveal.js を初めて使ってみました。
RedMica(Redmine互換のオープンソースウェア)のユーザーズガイドを作りました
RedMicaの管理機能のリファレンス「RedMica ユーザーズガイド」を公開しました。
スマートフォン2台持ちになりました
2台のスマホを使い分けることで、よりスマホを安全に使える安心感を得られます。
AWS Amplify のサンドボックスを試してみた
AWSアカウント無しで利用できる、AWS Amplifyのサンドボックスを試してみました。
2020年2月にシンガポールの海底ケーブル陸揚げ局を見に行った
インターネットを支える海底ケーブル陸揚げ局の外観を見ることができました。
ファーエンドテクノロジーからのお知らせ(2021/06/09更新)
【6/18開催】Redmine 4.2 / RedMica 1.3 新機能解説セミナー
Redmineの最新バージョンRedmine 4.2 / RedMica 1.3 の新機能を紹介するセミナーを開催します。
プロジェクト管理ツール「RedMica」バージョン 1.3をリリース
今日使える明日のRedmine「RedMica」の最新バージョン1.3をリリースしました。
プロジェクト管理サービス『My Redmine』の契約件数が1000社を突破
Redmineのクラウドサービス『My Redmine』の契約件数が2021年5月に1000社を突破しました。
「FAREND NEWS」2021年第2号 発行
広報紙「FAREND NEWS」2021年第2号を発行いたしました。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け