はじめに

Voicyでテックリードをしているみっきーです。

本記事は、Qiita Advent Calendar2022のVoicy Advent Calendar 2022に参加した記事です。

弊社では週1回、1時間の時間をとって、エンジニア発表会を開催しています。 Voicyエンジニアが激推しする“エンジニア発表会”って何？〜Voicyテックブランディングへの道〜

発表する時間はとっているものの、発表する準備に色々時間が取られてしまう悩みがあります。特に、スライドを作成する時間がかかります。そこで、今回ご紹介するのは、普段エンジニアが慣れ親しんでいる、Markdownを使ったスライド作成ツールのslidevを使って、スライド作成の生産性向上を提案していと思います！

slidevとは

Markdownで書けるスライド作成ツールです。 Markdownに記述した内容が、即座にブラウザに反映されスライドを閲覧することができます。技術スタックに、Vue/Vite/WindiCSSを使っていて、Markdownの中にiframeを入れたり、CSSで装飾することもできます。

機能は、以下の通りです。

Markdownベース
豊富なテーマ
デベロッパーフレンドリー
Vite/Vue3/WindiCSSを利用して作られており、ブラウザに即時反映される
レコーディングサポート
プレゼンターモード
ナビゲーション
アニメーション
コードのシンタックスハイライト

色々機能がありますが、発表スライドを作るという目的なので必要な機能のみ紹介します。それではまずインストールから始めてみましょう。

slidevのインストール

$ npm install slidev

新規プロジェクトの作成

$ npm init slidev

実行すると３つの選択をします。 Project nameは新規フォルダ slidev が作成されます。 Install and start it now?は、yes Choose the agentは、npm,yarn,pnpmから選べます

✔ Project name: … slidev
✔ Install and start it now? … yes
✔ Choose the agent › npm

インストールが終わると自動でブラウザが立ち上がりスライドが表示されます。 http://localhost:3030/

このスライドは、Projectフォルダの slides.md を見て表示されています。

初期設定

最初に修正するファイルは、slides.md です。これはMarkdown形式のテキストファイルです。テンプレートファイルには色々書かれていますが、これはデモ用でもあるので不要な部分は削除しましょう。

下記はテーマがない真っ白なスライドの状態です。これをベースに必要な情報を追加していくと良いでしょう

---
---
# タイトル

スライドとタイトル

スライドのページ区切りは、--- です。

例：

---
# スライド1ページ目

---
# スライド2ページ目

#をつけること、左上のよくあるタイトルになります。見出しです.

# タイトル

を増やすとフォントの大きさを変えられます。

##　見出し2

中央に文字だけ表示したい場合は、下記のように記述します。

---
layout: center
---

# タイトル

説明文と箇条書き

<br>タグを使うことで改行できます。Markdown内で改行しても反映されません。

〇〇〇〇〇〇〇〇〇〇〇〇
<br>
〇〇〇〇〇〇〇〇〇〇〇〇

箇条書きは、-を使います。

- リスト1
    - ネストリスト1
- リスト2
- リスト3

画像の貼り付けと中央揃え

Markdown記法で書きます。パスは、別途作成したpublicフォルダからの相対パスです。

例: /public/image.png

![image](/image.png)

<img>タグを使うこともできます。

<img src="">

コードのシンタックスハイライト

コードの内容を説明するときに、ハイライトされているわかりやすいですよね。slidevでは、コードハイライトにPrism とShiki を使っています。デフォルトでは、Prismが使用できます。Prismはほとんどのプログラミング言語に対応しています。

prismjs supported languages

こちらはMarkdonwの内容です。goの部分がプログラミング言語の指定になります。

Markdown

スライド表示

コード内の行数は、初期設定部分に記載します。true にすることで行数が表示されます。

---
lineNumbers: true
---
# タイトル

スライド表示

また、特定の行の部分だけ強調することもできるので、今どこのコードの部分を話しているのかわかりやすくすることができます。

Markdown

スライド表示

notes

コメントを書くことで、プレゼンターモードで表示した場合に内容が表示されます。プレゼンターモードは、/presenter でアクセスできます。

例: http://localhost:3030/presenter/1

<!-- ここにnotesが表示されます。 -->

外部ファイルの読み込み

srcを使うことで、別ファイルのソースを読み込めます。この例は、common.md を外部ファイルとして差し込みます。

src: ./common.md

エキスポート

PDFに出力する機能も用意されています。PDFファイルとして出力できるため、そのままSpeaker Deckにアップロードして公開ができます。

$ npm i -D playwright-chromium
$ npx slidev export

出力ファイル

slides-export.pdf

スライドの共有

社内で発表したスライドは、Gitのリポジトリに格納すると良いでしょう。Markdownはテキストファイルなので気に入ったスライドの説明部分をちょっとコピペしてくるのも簡単です。 LTなどで外部に発表する前に、Pull Requestをして、チームメンバーからスライドレビューしてもらうのも良いでしょう。