Above & Beyond

日々のアウトプット記録

VS Codeでプレゼン資料を書く

はじめに

みなさんはプレゼン資料作成、何でやっていますか? 自分は最近、VS Codeで作ってます。 なんでPowerPointではなく、VS Codeで作成するようになったか。 今日はそんな話を書きたいと思います。

f:id:kabukawa:20210124172159p:plain:w300

目次

VS Codeで書くようになる前

もちろん自分も、最初からVS Codeで書いていたわけではないです。

最初期 PowerPoint

最初は普通にPowerPointで書いてました。2018年頃の話です。 Officeのライセンスも持っていたし、スライド書くならこれ、という先入観だけで使っていたんですけど、 逆に言うと、スライド書くのには何の問題もありませんでした。

ただ、PowerPointで書くと、勉強会でプレゼンをするときにそのファイルをPCに置いておかないといけないわけです。 ファイルが壊れて開けないとか、そういうトラブルがあったら嫌だよなと思って、ファイルをGoogleDriveに置くようになったのですが、そこではたと気づきました。 「だったらGoogle Slidesでよくね?」

覚醒期 Google Slides

ということで2019年になるとGoogle Slidesでスライドを書くようになりました。 使い慣れると、スライドを書くには十分な機能を持っているし、デザインも結構あってよかったです。 なにより、PCじゃなくてもスライドを書けるというのは結構良いなって思いました。

これはこれで良かったのですが、こんな事を思ったのです。 「スライド、バージョン管理したいよね」

発展期

VS CodeMarkdownのドキュメントをたくさん書くようになっていたので、Markdownでスライドかけたら良いよねと思っていたら、去年参加した勉強会でこんな拡張があることを知りました。

marketplace.visualstudio.com

そうです。VS Codeで作成したMarkdownのドキュメントが、スライドになるんですね。 VS Code上でそのままプレゼンもできるし、HTMLとかPDFにエクスポートも可能。 これ、良いじゃないですか?

というわけで vscode-reveal

Markdownで書くと良いこと、実は結構あります。

  • 作成するのはMarkdownなので、新しいことを覚えなくても始められる
  • テキストファイル(Markdown)なのでGitHub等でバージョン管理して、差分の確認も簡単
  • Markdownドキュメントとして読めるので、特別なソフトウェアがなくても内容を確認可能
  • 見出し一覧を最初に作って、構成を固めてから肉付けをしていくという作成の進め方ができる
  • 画像やURL等ももちろん使用できる

デザインやアニメーションで他のプレゼン用ツールのような凝ったことをしようとすると大変だけど、 伝えたいことを纏めて発表するための資料作り、と考えれば vscode-reveal は必要十分な機能を持っていると思います。

ちなみに似たような機能を持っているものとして marp-vscode というのもあります。

marketplace.visualstudio.com

機能的には marp-vscode も同じ様なことができますし最初は marp-vscode を使ってみたのですが、テーマ指定の仕方がいまいち分からなかったので vscode-reveal を使うことにしました。 たぶんどっちを採用しても自分のような使い方なら困ることはそんなに無いんじゃないかと思います。

使用例

取り敢えず、Markdownドキュメントの最初にこんな感じの指定を入れておくと、テーマやタイトルの指定ができます。

---
title : "プレゼンのタイトル"
theme : "white"
---

組み込みテーマはここで確認できます。ここで書かれている名前を "theme :" に指定すればそのテーマが適用されます。 自分でテーマを作りたい場合はcssを書けば使えるようです。

revealjs.com

あとは本文を書くだけです。

見出しは 普通のMarkdownの見出しを指定すれば、スライドのページ見出しになります。

# 見出し1
## 見出し2
### 見出し3

列挙項目もMarkdownのリストと同様です。

* リスト1
* リスト2
    * 小リスト1
    * 小リスト2

1. 番号付きリスト1
2. 番号付きリスト2
    1. 番号付き小リスト1
    2. 番号付き小リスト2

ページ区切りは "---" です。水平線と被るので、そこだけは注意が必要です。

---

自分の作成したファイルを以下に置いています。 特に難しいことは何もしていないので、逆に「拡張機能を入れるとこんなシンプルなものでプレゼン資料を作成できるのか」と思ってもらえるのではないかと思います。

github.com

共同で発表する資料を作成するといったユースケースだと、プルリク出して修正みたいな使い方もできると思うので、悪くないかなと思います。

まとめ

今回は vscode-reveal という拡張機能を使って、VS Codeでプレゼン資料を書くという話を書きました。 同じようなことで悩んでいる人の参考になったら嬉しいです。