Slidev入門：Markdownでプレゼンテーションを作成する

著者

2022年8月4日

0 分で読めます

開発者アドボケイトとして、経験を共有し、開発者仲間に知識を伝えるために人前で話す機会が多く、そのためプレゼンテーションの作成にも多くの時間を費やしています。配色や見栄えのよいレイアウト、ストーリー展開などを考える必要があり、これは手間のかかる作業です。しばらくして、開発者にとって使いやすい体験を制作プロセスに取り入れる方法を見つけたいと思うようになりました。

幸い、スライドをより効率的かつプログラマブルに作成する方法があります。プレゼンテーションをコードで作成できるオープンソースプロジェクト、Slidevです。

スライド作成アプリとコードで作るプレゼンテーション

Keynote、Google Slides、Slides.comでスライドを作成してきましたが、それぞれに次のような課題がありました。

Keynoteはあまり移植性が高くなく、共有するにはスライドをPDFに書き出す必要があります。
Google Slidesは必要に応じて共同編集でき、Snykの統一されたスライドテーマのおかげで、見た目の調整に時間を取られずに済みます。ただし、Google Slidesにはテキストアニメーション機能がありません。コードの変更をアニメーションで見せるには便利な機能です。また、Google Slidesを問題なく使うにはオンラインである必要があります。カンファレンス会場のWi-Fiがどれほど遅いかは、誰もが知っています。
Slides.comは、才能あるHakim El Hattabが開発したオープンソースのReveal.jsプロジェクトを基盤に作られています。シンプルなウェブベースのプレゼンテーションサービスとして気に入っていますが、テーマ機能がなく、無料版の上限を超えてしまうことがよくあります（有料版でも超えることがあります）。

こうした点を踏まえると、プレゼンテーションをコードで作成するメリットには次のようなものがあります。

コードベースのバージョン履歴を利用できる。
GitHubはオープンソースであるため、スライドを簡単に共有し、ほかの人と共同作業できます。

GitHubでSlidevを使ってプレゼンテーションを作成する

Slidevの説明に入る前に、スライドをコードで作成するという考え方は新しいものではないことをお伝えしておきます。「DevOpsの父」としても知られるPatrick Deboisは、さまざまな「as code」の概念を分析したブログ記事で、この考え方を取り上げています。Reveal.jsやMDXも、以前から存在するプロジェクトの例です。

まず、Slidevの概要とその背景をご紹介します。SlidevはVue.jsをベースにしたオープンソースプロジェクトで、Anthony Fuが開発しました。Markdown構文を基盤にスライド作成をシンプルにしながら、独自のコンポーネントを作成できるようにして、既存の機能を拡張することを目指しています。

まず、新しいフォルダーでSlidevプロジェクトを初期化します。

1npm init slidev

スライドのタイトルやフォルダー名など、いくつかの項目について質問されます。完了すると、簡単なコンポーネントのサンプルと、スライド全体を含むメインファイルslides.mdを備えたプロジェクトが生成されます。

フォルダー構成とスライドファイルは、次のようになります。

Visual Studio Codeに、Slidevのプロジェクトフォルダーと、テーマ、背景、タイトル、ナビゲーションの設定を含むプレゼンテーションのソースファイルslides.mdが表示されています。

slides.mdファイルの内容を確認してみましょう。

このMarkdownファイルにはYAML Frontmatter形式の設定が含まれており、特定のスライドやスライド全体をカスタマイズできます。冒頭と末尾を---で囲みます。
Markdownファイルの各タイトルには# Title heading 1という記法を使い、スライドのタイトルとメイン見出しを指定します。その下にコンテンツを記述します。
スライド上のボタンやビジュアルをさらにカスタマイズするには、<div>や<span>などのDOM要素をHTMLで記述します。

デフォルトのスライドに変更を加えたら、次のコマンドでSlidevプロジェクトをホットリロードモードで実行できます。

1npm run dev

コンテンツが自動的にウェブページとしてビルドされ、localhost:3030で配信されます。また、ブラウザーウィンドウが開き、次のように表示されます。

Liran Talによる「現実世界でReactアプリケーションがどのようにハッキングされるか」と題したプレゼンテーションを表示するブラウザーウィンドウ。

実際のコンテンツの書き方は、READMEのMarkdownを書くのと同じくらい簡単です。多くの開発者にはおなじみでしょう。箇条書きのスライドの例を見てみましょう。

1---
2
3# What is Slidev?
4
5Slidev is a slide deck maker and presenter designed for developers, and consists of the following features
6
7- 📝 **Text-based** - focus on the content with Markdown, and then style them later
8- 🎨 **Themable** - theme can be shared and used with npm packages
9- 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
10- 🤹 **Interactive** - embedding Vue components to enhance your expressions
11- 🎥 **Recording** - built-in recording and camera view
12- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
13- 🛠 **Hackable** - anything possible on a webpage
14
15<br>
16<br>
17
18Read more about [Why Slidev?](https://sli.dev/guide/why)
19
20<!--
21You can have a `style` tag in markdown to override the style for the current page.
22Learn more: https://sli.dev/guide/syntax#embedded-styles
23-->
24
25<style>
26h1 {
27  background-color: #2B90B6;
28  background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
29  background-size: 100%;
30  -webkit-background-clip: text;
31  -moz-background-clip: text;
32  -webkit-text-fill-color: transparent;
33  -moz-text-fill-color: transparent;
34}
35</style>

このコードの各部分が、スライドのどの要素にあたるのか見ていきましょう。

---で新しいスライドページを開始し、そのスライドに必要な設定を行います。この例では、Slidev固有のカスタマイズは必要ありませんでした。
# What is Slidev?というMarkdownの見出しで、対応するスライドのタイトルを設定します。
スライドの本文はタイトルの後に続き、ほかのMarkdownと同じ構文で記述します。<br>を使ったHTMLの改行や、スライドの最後に絵文字やMarkdown形式のリンクを追加できる点にも注目してください。
HTMLコメントブロックはスライドには表示されず、発表者用ノートとして使われます。コンテンツ内に考えを書き留めておくのに便利です。
インラインのstyleタグを使うと、テーマのタイトル見出しのスタイル（この場合は白い文字色）を上書きし、グラデーションカラーを適用できます。

このスライドのレイアウトがどのように表示されるか、スクリーンショットをご覧ください。

「Slidevとは？」というタイトルと機能の箇条書きが表示された、暗色テーマのSlidevプレゼンテーションスライドが映るブラウザーウィンドウ。

私のように、脆弱なコードやセキュリティのベストプラクティスについて説明する際にソースコードを見せる機会が多い場合、コードのハイライト機能があると便利です。

次のSlidevコードを見てみましょう。

1---
2layout: image-right
3image: https://source.unsplash.com/collection/94734566/1920x1080
4---
5
6# Code
7
8Use code snippets and get the highlighting directly![^1]
9
10ts {all|2|1-6|9|all}
11interface User {
12  id: number
13  firstName: string
14  lastName: string
15  role: string
16}
17
18function updateUser(id: number, update: User) {
19  const user = getUser(id)
20  const newUser = { ...user, ...update }
21  saveUser(id, newUser)
22}
23
24<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1">
25
26[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)

このスライドでは、YAMLブロックの冒頭と末尾の---で指定した個別のカスタマイズを行っています。レイアウトで右側に画像を表示するよう設定し、その画像のURLを指定しています。

次にスライドのタイトルとコンテンツを記述し、コードのハイライト機能を使います。コードスニペットはマウスクリックに反応し、次のパターンでアニメーションします。

最初にSlidevは、コードブロックの冒頭にあるts {all}ディレクティブの指定どおり、コード全体をハイライトします。
スライドのアニメーションを進めるためにマウスをクリックするたびに、コードの特定箇所がハイライトされます。2行目、次に1～6行目、続いて9行目がハイライトされ、最後に再び全体がハイライトされます。
次に<arrow>コンポーネントを使い、x座標とy座標でコードの行を指し示します（正直、少し使いにくい方法です）。この表示は、v-click=”3”属性で指定したとおり、3回目のクリックで実行されます。
最後に脚注を追加します。画像のクレジットや、スライド内で参照した資料を示すのに便利です。

次のスクリーンショットは、このスライドの実際の表示です。

山の湖の写真の横にコードスニペットが表示された「Code」スライドを映すダークモードのブラウザーウィンドウ。

入門ガイドの締めくくりに、SlidevはVue.jsフレームワークをベースにしているため、テーマからインポートしたものも含め、任意のVueコンポーネントをスライドのMarkdown構文内で直接定義して使用できることをお伝えします。SlidevのVueコンポーネントについて詳しくは、ドキュメントガイドをご覧ください。

Slidevのエクスポート、テーマ、その他のスライド機能

SlidevとMarkdownの使い始め方をご紹介しました。Slidevにはほかにも多くの機能が備わっており、人前で話す際に役立つものをこれから試すのが楽しみです。特に期待している機能をいくつかご紹介します。

Slidevのテーマとライトモード・ダークモードの切り替え

時間をかけてスライドを作り込んだのに、会場の照明が想定と違うことに気づいた場面を想像してみてください。多くのコンテンツが読めないとわかりながら発表せざるを得ません。つらいですよね。

Slidevなら解決は簡単です。スライドツールバーのダークモード切り替えボタンを使えば、ライトモードとダークモードを切り替えられるため、照明や読みやすさの心配を減らせます。この機能が使用中のテーマで利用できることを確認してください。Slidevのデフォルトテーマや、私が使ったほかのいくつかのテーマには備わっていました。テーマの開発者がこの機能を取り入れているのは、とてもよいことだと思います。

「Code」セクションにTypeScriptのコードスニペットが表示され、その横に山あいの湖の写真が配置されたスライド。画面下部にはプレゼンテーションの操作項目が並んでいます。

Slidev Themesのドキュメントページには、厳選されたテーマがすでにいくつか掲載されています。さらに探すには、npmレジストリでslidev-themeタグが付いたパッケージを検索できます。

Slidevで簡単にプレゼンターモードを使う

もう1つ便利な機能が、特定のURLにアクセスして使えるプレゼンターモードです。プレゼンターモードがアプリに組み込まれたプレゼンテーション表示の切り替え機能になっているスライドアプリとは異なり、Slidevではブラウザーからプレゼンターモードにアクセスできます。モバイル端末やタブレットでリンクを開けば、ノートや次のスライドを確認できます。

Slidevからエクスポートするか、プレゼンテーションをオンラインで公開する

SlidevのプレゼンテーションをPDFやPNGにエクスポートするには、Playwrightを使ってレンダリングします。これは基本的に、ヘッドレスブラウザーの画面をキャプチャする処理です。

見た目ほど複雑ではなく、かなり簡単に行えますが、その仕組みを知っておくとよいでしょう。Slidev Exportのドキュメントページでは、スライドのライトモードとダークモードの切り替えや、クリックアニメーションを含め、詳細が説明されています。

ただし、Slidevのスライドを次の手順で共有する方法を考えています。

スライドをGitHubリポジトリでホストします。
コミットごとにCIを実行し、静的なウェブサイトを生成してVercelまたはNetlifyにデプロイします。
同じCIでビルド時にSlidevのPDFもエクスポートし、GitHub Actionsのアーティファクトとして保存します。ただし、アーティファクトの保存期間は90日間のみなので、別の方法が必要です。生成したPDFファイルをGitHubリポジトリにコミットする方法が考えられます。

Slidevでプレゼンテーションをコードで作成する

以上です。Slidevでプレゼンテーションをコードで作成する方法について、最後までお読みいただきありがとうございました。この記事が、同じ方法を試したり、プログラマブルでカスタマイズ可能なスライドを作るさらによい方法を考えたりするきっかけになれば幸いです。