ryokatsu.dev

Slidevを使ってスライドを作成した。

先日、技育CAMP勉強会というイベントでLTをさせていただきました。発表資料は以下です。

さよならIE　〜IEがない世界線で使えるCSSの紹介〜

上記のスライドを今回は、Slidevというツールで作成したので紹介しようと思います。

Slidevとは

トップページを見るとどういったものか理解できますが、マークダウンで書いたものをスライドにしてくれるツールです。技術スタックとしてはVite+Vue3+WindiCSSとなっておりコードハイライトなども付いています。

レイアウトをCSSで調整できる

他のツールでは、レイアウトがある程度決まってしまうものがほとんどです。しかしSlidevではなんとCSSでスライドのレイアウトを調整できます！具体的にはマークダウンの中にHTMLタグを書いてWindiCSSのプロパティを記述すればOKです！（もちろん<style></style>で囲ってもOK）

<div v-click class="absolute top-12 left-30 text-3xl">つらい</div>
<div v-click class="absolute top-17 right-12 text-3xl">なんか分かんないけど崩れてる</div>
<div v-click class="absolute top-30 left-80 text-3xl">やりたくない</div>
<div v-click class="absolute top-50 right-20 text-3xl">大量のBabelポリフィル</div>
<div v-click class="absolute top-60 left-50 text-3xl">レガシー</div>
<div v-click class="absolute bottom-12 right-30 text-3xl">動作確認したくない</div>
<div v-click class="absolute bottom-30 left-20 text-3xl">Chromeだと崩れてないのに何故。。。</div>
<h1 v-click class="text-8xl">😵</h1>

v-clickを指定すると上から順番に要素を表示してくれます。他のスライドツールだとアニメーションのような機能です。classにWindiCSSのプロパティを指定することで独自のレイアウトを実現できます。結果以下のようなスライドが出来上がりました。

スライド

コードブロック

他のツールで結構大変なのは、コードの表現だと思います。シンタックスハイライトはもちろん、フォントの等幅を揃えたりするのも割と面倒だったりします。Slidevは、標準でシンタックスハイライトが導入されておりマークダウンで普通に記述すれば表現が可能です。またmonaco-editorをサポートしているのでスライド内の文字をその場で編集することも可能なので表現の幅が更に広がります！

コードハイライトのサンプル

Vueのコンポーネントをスライド内に埋め込める！

これはちょっとびっくりしたのですが、Vueのコンポーネントを作成してスライド内に埋め込むことができます。サンプルを見ていただくと分かりますが、カウンターコンポーネントがスライド内に埋め込まれているのが分かります。マークダウンを以下のように書くと呼び出しできます！

<!-- ./components/Counter.vue -->
<Counter :count="10" m="t-4" />

埋め込みはTwitterや、YouTubeの動画も可能です。また当然ながらVideoタグや、audioタグをマークダウンに記述して専用の動画や、音声を再生することも可能です。

その他の機能

他にも色々な便利機能があります！

  • スライドの出力がSPA、PDF、PNGのいずれかに対応している。
  • スライドをダークモードに切り替えできる
  • スライド一覧を表示できる。
  • インカメラ機能
  • テーマ機能のサポート

今回は、テーマ機能としてslidev-theme-geistというVercelのデザインシステムを、ベースにしたものを利用しました。この他にも沢山あるのでお好きなものを選ぶと良いと思います。

使ってみての感想

マークダウンを書いてそのままスライドになってくれるのは、非常に便利でした。技術者であれば、普段マークダウンを書くことが多いと思うので、特に苦戦することなくスライドを作成できると思います。またViteを使っていることもあり、ビルドが一瞬で終わりストレスなく作業できます。

一方で、CSSに凝りだすと作成に時間が、掛かってしまうかなと思いました。レイアウト変更ぐらいであればテーマ機能やなどでできますが、細かいレイアウトに凝りだすとCSSを普通に書くことになるので、その辺は時間に余裕がないと厳しいかなと思いました。

今回はSPAでデプロイしましたが、そのままホスティングしてもOGPが生成されないので、og-imageとかを使う必要があるかなと思いました。