✨

シンプルでかっこいいプレゼン資料をVSCodeで作ってみる

ryana

2023/07/07に公開

きっかけ

情シスにいるといろんな質問を受けるのですが、ある時「社内向けにプレゼンするんですけど資料は何で作ったらいいですか？」と質問されたことがあり、その時は「パワポかGoogleスライドがいいんじゃないでしょうか」と回答しました。
内心（それわざわざ質問するかな・・・）と思っていたものの、なんとなく引っかかっていたので調べてみたら世の中「パワポかGoogleスライド」だけじゃないことを（今更）知ることとなり、、中でも強く印象に残ったのがVSCodeでプレゼン資料を作れる拡張機能vscode-revealでした。

VSCodeは以前Pythonの入門レベルを触ってみたときに使ったことがあって抵抗がなかった
Zennで記事を書く時に使っているマークダウン記法で作成できる

ということもあり、vscode-revealを試してみることにしました。

VSCodeとは

（エンジニアの方は読み飛ばしてください）正式名称はVisual Studio Codeで、Microsoftが提供している無料のコードエディタです。
非エンジニアの私は昔、よく知らないままメモ帳がわりに使おうとインストールして「なんじゃこりゃ」と思った記憶が・・。何年か前にPythonを触ってみた時に使ってみて初めて「これ使いやすい！」と思いました。

vscode-revealとは

vscode-revealは、reveal.jsというオープンソースのHTMLプレゼンテーションフレームワークのVSCode向け拡張機能です。無料でインストールできます。

公式サンプルのスライドはこんな感じです。

日本語でも作れます。（公式と同じテーマを使っていますが背景色を変えてみました）

vscode-revealの何に惹かれたか

テキストだけのシンプルなスライド構成でもかっこいい仕上がりになる
テキストだけをちゃちゃっと書いてフォントサイズを少々調整しただけのスライドだとパワポでは味気なくて寂しい感じになりますが、vscode-revealで書くとそれだけでも洗練された印象になります。
ポイントごとにスライドを階層化できる
基本は横向き（右から次のスライドが来る）に遷移しますが、途中で縦に遷移させることもできます。
最初にプレゼンの骨格となるスライドを横向きにざっと作り、肉付けしたい内容のスライドをそれぞれのスライドの下に縦向きに作るようにすると、スライドが増えてもポイントを把握しやすく全体像が見やすいです。時間配分や相手によって省略するスライドが異なる場合は、省略する可能性のあるスライドは項目ごとにそれぞれ縦に作っておいて見せたい時だけ縦に遷移させる、といった使い方もできるんじゃないかと思いました。
HTMLで出力できる
HTMLファイルに出力すれば、画面遷移やアニメーションなどもブラウザで表示した時と同じように動きます。PDFでも出力できますが、文字列のフェードイン等の動的な設定がある場合はその設定ごとにページが分かれて出てくるので、出力後に不要なページを削除する等の調整が必要です。
非エンジニアでもちょっと頑張れば書ける
基本的な部分はマークダウン記法を使って書くので非エンジニアでもとっつきやすいです。制作者が公開している公式サンプルファイルもとても参考になります。作ってプレビュー見るだけでも頑張ってよかった！と思えるので、是非チャレンジしていただきたいです。

vscode-revealを使えるようにする

1. VSCodeをインストール

以下のページでVisual Studio Code をインストールするをクリックし、利用する環境を選択してダウンロードし、環境に応じてインストール

2. VSCodeを起動して拡張機能をインストール

VSCodeを起動したら、画面左側（アクティビティバー）にあるExtensionのアイコンをクリックし、表示される検索ウィンドウでvscode-revealと入力すると表示されるのでインストール
（アクティビティバーにvscode-revealのロゴが表示されればOK）

拡張機能の説明は下記ページでも公開されています。

公式サンプルを見てみる

1. サンプルファイルを開いてコピーする

下記サンプルファイルのURLをクリックするとブラウザのタブで開くので、テキストをコピー
（拡張機能の説明部分や上記ページ内にもURLが記載されています）

2.　.mdファイルとして保存

VSCodeでエクスプローラーから新しいファイルを開き、適当な名前で拡張子を.mdにして保存したら（例：public_sample.md）、上でコピーしてきたテキストをペーストして保存

3. 公式サンプルをブラウザで開く

アクティビティバーにあるvscode-revealのロゴをクリック後、プライマリサイドバー上部にあるアイコンの中からウィンドウに上向きの矢印が付いているアイコンをクリック

4. プレゼン資料の見方

設定された順番通りに見ていく場合：スペースキー
任意の順番で見る場合：画面右下の「＞」をクリック（遷移可能な方向に「＞」が表示される）

作り方

1. ヘッダー

上記2の手順で別の新しい.mdファイルを作成し、公式サンプルの.mdファイルのヘッダー部分から必要な部分をコピペ

---
theme: "night"
transition: "slide"
highlightTheme: "monokai"
slidenumber: false
title: "VSCodeでプレゼン資料を作る"
---

テーマは何種類か用意されています。
（参考までに、執筆時点で設定可能なテーマのリストです↓）
テーマによっては見出しでアルファベットを使った時に全て大文字になるものもあるので、大文字と小文字の表記を区別したい場合は見出しがどのように表示されるか確認してみるといいと思います。

2. スライド

ヘッダーの下にスライドを書きます。横向きはハイフン3つ---、縦向きはハイフン2つ--です。

スライド2枚目が横に移動

---
1-1
---
2-1
---

スライド2枚目が縦に移動

---
1-1
--
1-2
---

3. 基本的な書き方

よく使いそうなものを書き出してみました。

見出し
シャープとスペースを見出しの文字列の前に入力します。見出し1が一番大きい文字になります。

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

太字
アスタリスク2つで文字列を挟みます。スペースは入れません。

**太字**

小さめの文字
フォントサイズを小さくしたい文字列を、<small>と</small>の間に入れます。

<small>小さくしたい文字列をここに入れる</small>

箇条書き
アスタリスク or マイナスとスペースを文字列の前に入力します。さらに下に箇条書きを書く場合はTabで移動した先で入力します。

* 箇条書き
	- 箇条書き（子）

段落番号
箇条書きのナンバリングバージョンです。（こちらは特別な書き方ではなく至って普通です）

1. ひとつめ
2. ふたつめ

改行
普通に改行しても反映されますが、見出し文字を途中で改行したい時などに使ったりします。

途中で</br>改行する

4. 文字や背景の色を変更する場合

どちらもカラーネームかRGBのカラーコード（6ケタ）で指定します。サクッと変えたい時はカラーネーム、こだわりたい時はカラーコードと使い分けるのもいいと思います。
カラーコードで指定するときはカラーコードの前に#をつけます。

文字の色を変更
<font color="***">と</font>の間に色を変更したい文字列を入れます。***にはカラーネーム or カラーコードが入ります。下記サンプルはどちらも同じ色です。

カラーネームの場合

<font color="cadetblue">色を変更したい文字を入れる</font>

カラーコードの場合

<font color="#5f9ea0">色を変更したい文字を入れる</font>

背景の色を変更
スライドの先頭（---か--の直下の行）に

を入力（***には希望のカラーネーム or カラーコードを入力）すると、そのスライドのみ背景の色を変更できます。下記サンプルはどちらも同じ色です。