この記事は エンペイ Advent Calendar 2023 3日目 の投稿です！昨日は @sanfrecce_osaka さんの「エンペイ Slack チャンネル探訪」でした！
エンジニアの ikuma-t です！今年は弊社が開催に携わったイベント含め、色々と登壇をさせていただきました。
登壇のスライドのいくつかは、MarkdownとVueでスライドを作成することのできるツール「Slidev」を使って作成しています。
いままでも身内LTくらいであればSlidevを使っていたのですが、外部向けの登壇ではFigmaを使ってスライドを作ることが多かったため、社外イベントでの採用は初めてでした。
この記事では今年の登壇を踏まえて、実際にSlidevをどのように利用しているか、使ってみてわかったのびしろをお伝えできればと思います！
- Slidevとは
- Figmaではなく、Slidevで資料を作ろうと思ったわけ
- 本気の登壇を支える技術
- Slidev用リポジトリの運用
- スライド作成を効率化するエディタ拡張機能やツール
- UnoCSSでのスタイリングは valueless-attributify で行う
- Slidevのビルトインコンポーネントを使用する
- 再利用可能なスライドは共通ディレクトリに配置する
- 伸び代ポイント
- Markdownで管理している割に、構想からスライドまでシームレスにいかない
- MarkdownファイルでVueコンポーネントの補完が効かない
- コンポーネントとテンプレートの使い分けをうまくできていない
- スライドアプリケーション形式で求められた際に対応できない
- おわりに
Slidevとは
Slidevは開発者向けのスライド作成ツールです。以下のようにMarkdownで記述することでスライドを作成することができます。
VueやNuxt、Viteのコアチームである antfu 氏が開発されていることもあり、MarkdownだけではなくVue.jsやVueUse、UnoCSSなど、フロントエンド開発と同じような感覚でスライドを作成することができます。
Figmaではなく、Slidevで資料を作ろうと思ったわけ
スライド作成ツールに向き合っている時間にコードにさわれないことが苦痛に感じてきたためです。
昔はスライドデザインを考えてそれをFigmaに起こすだけでも楽しかったのですが、職業エンジニアになって1年が経ち、とうとうコードを書かない時間が苦痛になってしまいました。
これまでは自身の実装力不足や登壇経験不足に起因して、レイアウト調整のためのHTMLやCSSの記述に時間を回しながら期日までにスライドを作成するのが難しいと感じ、Slidevでの資料作成を断念していました。
しかし今の自分であればゴリゴリHTMLを書いてもまあなんとかなるだろうと思えてきたため、スライドもコードを触る時間とするべく、身内イベント以外の本気の登壇でもSlidevを使用することにしました。
本気の登壇を支える技術
ここからは実際にどうやってSlidevを使ったスライド作成を行っているのか、またスライド作成の際に便利だったTipsを紹介します。
Slidev用リポジトリの運用
Slidevには複数のスライドを生成する仕組みがありません。
最初はスライドごとにリポジトリを作成していましたが、SPAをデプロイする際やアセットの再利用で不便が多かったので、npm workspacesを用いて1つのリポジトリとしてまとめることにしました。
リポジトリルートでslidevのnpmをinstallして、各スライドディレクトリ内ではnpm scripts（e.g. "dev": "slidev" ）だけを用意しています。
実際にはsrcディレクトリにはslidevに必要な設定ファイルや使用するコンポーネントが内包されているため、scaffdogを用いて共通部分は自動生成させています。
デプロイパイプライン
変更をGitHubにPushすることでCloudflare Pagesのデプロイが実行され、各スライドディレクトリのbuildコマンドにより生成されたSPAとPDFが公開される仕組みです。
ビルドコマンドを実行する際、Cloudflare Pagesのリダイレクト設定を動的に出力するスクリプト（scripts/redirect.ts）を実行することで、パスにごとにデプロイしています。
例えばKaigi on Rails 2023の資料であれば
- https://talks.ikuma-t.com/kaigi-on-rails-2023 が登壇資料のSPA
- https://talks.ikuma-t.com/kaigi-on-rails-2023.pdf が登壇資料のPDF
- https://talks.ikuma-t.com は https://ikuma-t.com/talks にリダイレクト
となるようにデプロイされます。
Cloudflare Accessによる限定公開プレビュー
公開先のCloudflare Pagesでは、Cloudflare Zero Trustに含まれるCloudflare Accessを利用することで、サイト閲覧に制限を設けることができます。
資料作成中にスマホでざっと練習したい、実際の挙動を確かめたい。しかしまだ公開前なので誰にでも状態にしたくないという場合に、簡単にメールアドレスによる認証をかけられて便利でした。
スライド作成を効率化するエディタ拡張機能やツール
エディタ上（自分の場合はVSCode）で作業することになるので、GitHub CopilotやCode Spell Checkerなどの普段開発で利用しているツールの恩恵を受けることができます。
VSCodeではMarkdownファイルでの補完がデフォルトでオフになっているため、Slidevの作業環境では次の設定を追加して、補完を有効にしておくと便利です。
"[markdown]": {
"editor.quickSuggestions": true,
},さらに効率的にスライドを作成するため、普段の開発のツールにプラスして、Slidevでスライドを生成する際に導入しておくと便利な拡張機能やツールを追加しておきます。
slidev-vscode
Slidevには公式のVSCode拡張があり、スライドのエディタ内プレビュー機能とアウトライン機能を備えています。プレビューがあることでエディタから画面を切り替えることなく、スライド作成作業を行うことができて便利です。
アウトライン部分はクリックすることでそのページが記載されているファイルを開きます。長いスライドの場合は複数のマークダウンファイルに分割して作業をしているので、後から見直す際にこの機能が便利でした。
UnoCSS VSCode拡張
SlidevではUnoCSSと呼ばれる、TailwindCSSのスーパセットとなるAtomic CSSエンジンを利用してスタイリングできます（もちろん通常のCSSも利用可能です）。
UnoCSSはTailwind CSSよりもより短い記法（mx-4はmx4とかける）で記述できたり、Tailwindでは定義されていないクラス（例えばmx-13）でも指定できますが、指定できる幅が広すぎて実際に有効かどうかがわからない時があります。
この拡張機能を入れることで、有効な値についてはHoverヒントが表示されるようになり、書いてみたけどスタイルが当たらない、という事故を防ぐことができます。
また色を伴うプロパティの場合、プロパティ横に色のプレビューが表示されるようになります。この設定は各スライドディレクトリにある uno.config.ts の設定を読み込んでいるため、そのスライドのテーマに合わせた色を確認することができ、効率アップにつながります。
vscode-iconify + Iconify Raycast Extention
UnoCSSの機能の1つとして、 i-<iconifyのアイコンの名称> の形式でHTMLタグに属性を付与すると、アイコンを描画することができます。
Figmaやその他のスライドツールにWYSWIGで画像のレイアウトができないSlidevにおいて、テキストベースでスライドに彩りを加えることのできるアイコンはとても重宝します。
アイコンを使う際にいちいちIconifyのサイトに確認しにいくと効率が落ちるので、RaycastのIconify Extensionでアイコンを検索し、それをVSCode上に貼り付ける形で使用しています。
また長編のスライドになると、別の箇所で使用したアイコンをコピペで使用したいケースもあり、そういった際に vscode-iconifyというVSCode拡張を入れておくと、エディタ上でどんなアイコンかをプレビューできるのでおすすめです。
動画内で使用している背景にアイコンを入れるレイアウトは、以下のようなVueコンポーネントで実装し、使いまわせるようにしています。
<script setup lang="ts">
/**
* カバー画像としてアイコンを表示するコンポーネントです。
* デフォルトではクエスチョンマークのアイコンが表示されます。
*/
defineProps<{
icon?: string;
}>();
</script>
<template>
<div text-30em absolute op5 right--25 top-10>
<div :class="icon ?? 'i-fa6-regular:circle-question'" />
</div>
</template>UnoCSSでのスタイリングは valueless-attributify で行う
SlidevのUnoCSSではAttributify presetというプリセットが使えるようになっており、これにより以下のようにclass属性なしで直接スタイリングできます。
<!-- 通常の場合。Attributify presetと並行して利用可能 -->
<div class="text-xs text-red font-bold" />
<!-- valueless-attributifyを使用。直接属性として指定。 -->
<div text-xs text-red font-bold />
<!-- 同じ属性をまとめることも可能 -->
<div text="xs red" font-bold />継続的に開発が行われるアプリには投入が躊躇われますが、ほぼ使い捨てのスライドデザインにおいては class=”” を省略できることで工数的に助かる面も大きかったです（直前になるとHTMLに的にセマンティックかどうかとかはガン無視で、マッチョなFlexやらGridでゴリ押しすることも多かったので…）。
Slidevのビルトインコンポーネントを使用する
Slidevにはあらかじめ用意されたコンポーネントがいくつかあり、中でもTransformコンポーネントは配置調整でよく使用しています。
そのほかに動画を埋め込むためのSlidevVideoコンポーネントなども使用していますが、一部コンポーネントについてはドキュメントに記載がないため、ソースコードを直接見ると良いかと思います。
再利用可能なスライドは共通ディレクトリに配置する
まだそこまで数は多くありませんが、自己紹介や締めの挨拶などの毎回同じ内容を掲載するページについては、リポジトリ直下の reuse ディレクトリに配置して読み込むようにしています。
---
src: '../../reuse/intro.md'
---ちょっとしたTipsとして、自己紹介用の画像にはGitHubのアイコン取得用URL「 https://github.com/:user_id.png ）を利用しています。
これは自己紹介用の画像を静的アセットとして配置する構成にすると、その画像を毎回スライドディレクトリのpublicディレクトリに配置しないといけないためです。
配信されているリソースに依存するため、スライド投影時にネットワークに繋がっていることが前提になりますが、オフライン環境にいることもあまりないので、管理コストの低いこちらの方法を採用しています。
伸び代ポイント
Markdownで管理している割に、構想からスライドまでシームレスにいかない
私は以下のような順序でスライドを作成しています。
- アウトラインを大小問わず全部書き出す
- アウトラインを並び替えたりこねくり回す
- 全体につながるいい感じのストーリーを考える
- アウトラインの1階層を見出しにスライドに起こす
Slidevのスライド作成は4に相当し、1~3までもテキストファイルです。しかしアウトラインとSlidevのシンタックスが一致するわけではないので、結局アウトラインを横目に1枚ずつ丹精込めてスライドに起こしています。これはなんだか無駄ですね。
所詮はテキストファイルに過ぎないので、適当なスクリプトを書いてアウトラインを自動でスライドに変換できるといいなと思っています。
- 見出し1
- ほげ
- ふが
- ぴよ
- 見出し2
↓
---
# 見出し1
- ほげ
- ふが
- ぴよ
---
# 見出し2さらにいうとアウトラインを作成してこねくり回す部分はこれまでTransnoというツールを使っていたのですが、だいぶ前にサポートが終了してしまったため、ここを含めてVSCode上で完結できないかな、と画策中です。
MarkdownファイルでVueコンポーネントの補完が効かない
Slidev内では独自に作成したVueコンポーネントをMarkdownファイルに埋め込むことができるのですが、そのパッケージ内で定義しているVueコンポーネントは当然ながら補完も効きませんし、コードジャンプもできません。そのためVueコンポーネントを使用する際は定義を見にいくか、都度Copilot頼みになります。
全編Markdownで頑張ればいいんですが、エディタに向かっているとついついコンポーネント化してしまい、一方でずっとスライドを書いていたりするわけでもないのでコンポーネントの使い方を忘れ、補完が効かなくて辛いなあというループを繰り返していました。
解決策として
- Vue用のコンポーネントカタログライブラリ Histoire を導入し、コンポーネントリストを見られるようにしておく
- Volar.jsを使い、Markdown上でVueのLSPが動作するようにする（Vueファイルの読み込み先ディレクトリは限定する必要がある）。
あたりをすればいい感じの体験にできるのではないかと思っていたりするのですが、いずれもまだ試せていません。
コンポーネントとテンプレートの使い分けをうまくできていない
共通のレイアウトが発生した際に、何も考えずにコンポーネントとして実装して、そのコンポーネントに適宜Propsを渡してレイアウトを作っていました。
上図はKaigi on Railsで実際に使用した資料の共通の扉スライドで、実装としては次のようになっています。
<script setup lang="ts">
defineProps<{
title: string;
headline?: string;
description?: string;
color?: string;
icon?: string;
}>();
</script>
<template>
<div flex="~ col" justify-center h-full px-4>
<div v-if="headline" text="md white" font-700 bg-primary w-fit px-3 py-1 rounded>
{{ headline }}
</div>
<div :class="color" text-6xl font-black pt4>
{{ title }}
</div>
<div v-if="description" text-lg pl-1 pt4 font-700 text-slate-500>
{{ description }}
</div>
</div>
<SilhouetteIcon :icon="icon" />
</template>
<!-- 使用する側 -->
<ChapterDoor title="POSTを使ったアップロード ... />一方でSlidevにはLayoutというこれまたVueファイルでレイアウトを定義できる機構があり、Layoutを利用する側はnamed slotを ::<slot name>:: という形式で参照することができます。
---
layout: chapter-door
---
::headline::
Chapter2
::title::
POSTを使ったアップロード
...先のVueファイルに対する補完が効くかどうかにもよりますが、大まかなレイアウトをLayoutとして切り出して、細かいあしらいを都度コンポーネントとして定義して上乗せしていくのが良いかもしれません。
スライドアプリケーション形式で求められた際に対応できない
Slidevでは SPA、PDF、PNG、Markdown形式でのエクスポートはできますが、GoogleスライドやKeynoteなどの形式でエクスポートすることができません。
実際にあった話として、スライドアプリケーション形式が求められていることを認識せずにSlidevでスライドを作ってしまい、直前になって出力したPNGを人力でKeynoteに貼り付けたりしていました。
少し調べてみたところ、例えばGoogleスライドであればmd2googleslidesというツールで変換できそうです（が、 slidev export —format md の実行結果がなぜかpng画像だったので、ここから調整が必要かもしれません…）。
おわりに
今回はスライドをSlidevで作ってみた感想を書きました。
自分の運用が整理しきれておらず、ものすごく効率化できている訳ではありませんが、Hackableなツールなので工夫してより良い発表資料作成環境を整えたいと思います！
来年も登壇していくぞ！！
明日は Kodai Takagi さんが書きます！