開発者のためのスライド作成ツール Slidev がすごい

マークダウン形式のスライド作成ツール Slidev を試したら、とても良かったので紹介です。

Slidevとは？

Slidev はVue UseやType Challengesの作者であり、Vue.js のコアチームメンバーでもあるAnthony Fuが開発しているマークダウン形式でのスライド作成ツールです。
Vite、Vue3、WindiCSSを用いて開発されています。

まだ Public Beta ですが、リリースからわずか数日で 7,000 を超える GitHub スターを集めています。

Slidev is still under heavy development. API and usages are not set in stone yet.とドキュメントに記載されているとおり API にまだ変更はありそうです。ただ現段階でもとても完成度が高く、常用できるレベルです。

https://github.com/slidevjs/slidev

実際にどのようなスライドが作成可能なのかは、Slidev のデモや、作者の Anthony が Slidev を用いてプレゼンした VueDay2021 の資料が分かりやすいです。

• デモ動画

https://www.youtube.com/watch?v=eW7v-2ZKZOU

• VueDay2021 でのプレゼン

https://www.youtube.com/watch?v=IMJjP6edHd0

使い方

任意のディレクトリで以下コマンドを実行するだけで環境は整います。

$ npm init slidev

コマンドを実行するとディレクトリ名の入力や、パッケージマネージャーの選択肢が表示されます。それらを入力した後しばらく待つとブラウザが開き、サンプルのスライドが表示されます。
あとは作成されたディレクトリに移動しslidev.mdを編集すれば OK です。

どんな機能があるの？

Slidev の特徴的な機能を紹介します。

柔軟なマークダウン記法によるスライド作成

reveal.jsやremarkなどのマークダウン形式でのスライド作成ツールとほぼ同様の記法で、スライドを作成できます。大抵のツールでは、ある程度決まったレイアウトになるのですが、Slidev の場合は拡張性がかなり高いです。Vue Component や、WindiCSS でスタイリングすることでページごとに独自のスタイルを当てて自由なレイアウトで構築することも出来きます。

他にも、

• Twitter・YouTube の埋込み
• vite-plugin-icon、Icontify によるアイコンサポート
• KaTeXによる LaTeX 記法のサポート
• Vue、CSS トランジションによるアニメーション
• Mermaid によるダイアグラム

などなどとても柔軟です。

https://sli.dev/guide/syntax.html

視認性の高いコードスニペット & ライブコーディング

開発者が PowerPoint や Keynote でスライドを作るときに大抵苦労するのがコードの埋込みです。シンタックスハイライトを効かせることだったり、Font の幅の調整、可視性を上げるためのアニメーションなど地味に苦労します。Slidev はその部分をとても強力にサポートしています。
いつものマークダウン記法を使えば、シンタックスハイライトが効くことはもちろん、可視性を上げるために行ごとのハイライトも可能です。

さらにブラウザベースのコードエディタであるmonaco-editorをサポートしているため、スライド画面を移しながらライブコーディング的にコードを編集することも可能です。TypeScript の型補完なども表示されるので、コードの説明がとてもやりやすそうです。

https://sli.dev/guide/syntax.html#line-highlighting

多彩な表示モード

ただ画面にスライドを移すだけでなく、Keynote や PowerPoint のようにプレゼンテーションのツールバーに様々な表示モードがあります。
特に、インカメラの表示はリモート環境での LT を考えるとかなり良いですね。

• ダークモードの切り替え
• スライド一覧表示
• プレゼンターモード
• インカメラの表示
• メモ機能

https://sli.dev/guide/presenter-mode.html

テーマ機能のサポート

Slidev ではテーマ機能をサポートしているため、デザインの統一されたスライドを簡単に作成できます。まだテーマの数は少ないですが、ユーザー側での作成も容易にできそうなので今後どんどん増えていきそうですね。

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

プレゼンテーションの録画機能

事前録画の発表の際にとても便利だと思うのですが、プレゼンテーションの録画機能も Slidev 自体でサポートしています。
ただただ凄い。.!

https://sli.dev/guide/recording.html

豊富な出力形式

Slidev は PDF、PNGs、SPA と多数の出力形式を持っています。
SPA として GitHub Pages などに公開も出来るので SNS での共有もとても楽そうです。

https://sli.dev/guide/exporting.html

おわりに

簡単ですが Slidev の紹介でした。
正直プレゼン資料作成はあまり得意ではないのですが、そんな私でも次のプレゼンが楽しみになるくらいワクワクするプロダクトです。
しかも、この豊富な機能でまだ Beta 版です。今後の進化も楽しみですね。