こんにちは。
この記事では、VSCodeでReveal.jsを用いてプレゼンテーションスライドを作ってみた体験談を紹介します。
具体的には、下記について紹介しています。
- VScodeでReveal.jsを用いたプレゼンテーションスライドを作る方法
- 作ってみて感じたこと、難易度など
まずは、作成したスライドです。
スライドの内容はテキトーなのでこんなのができるんだな～って感じで流してください。
Reveal.jsとは？
Reveal.jsとは、綺麗なプレゼン資料を簡単に作成できるJavaScriptライブラリです。
HTML形式やMarkdown形式で記述した内容が、PowerPointやGoogleスライドで作成するようなプレゼン資料のような表示で出力されます。
エンジニアの方であれば、コードを書く感覚で資料を作成することができるので、スムーズに楽しく資料作成ができるのではないでしょうか。
VScodeでReveal.jsを用いたプレゼンテーションスライドを作る方法
では、VScodeでReveal.jsを用いたプレゼンテーションスライドを作る方法を簡単に紹介します。
主な手順は以下となります。
- PCにVScodeをインストール
- 拡張機能「vscode-reveal」をインストール
- Markdown形式（.md）で資料を作成
- ブラウザで表示確認
- HTMLやPDFでエクスポート
PCにVScodeをインストール
PCにVScodeをインストールします。
インストール方法と、VScodeを日本語させる方法はこちらの記事を参考すにするとスムーズかと思います。
拡張機能のインストール方法も紹介されているので、参考にしてみていください。
拡張機能「vscode-reveal」をインストール
インストールしたVScodeを起動し、Ctrl + Shift + x を同時押しすると、画面左に拡張機能をインストールすることができるサイドバーが表示されます。
左上の検索パネルに「vscode-reveal」を入力し、拡張機能をインストールします。
Markdown形式（.md）で資料を作成
vscode-revealのインストールが完了すればReveal.jsを使用できる環境は作れたので、実際にMarkdown形式で資料を作成していきます。
今回僕は、「vscode-revealjs」というファイル名と拡張子「.md」でファイルを作成しました。
「.md」がMarkdownの拡張子です。
作成したファイルに、Markdownでスライド内容を記述していきます。
今回作成した上で紹介したスライドの一部のコードを紹介します。
---
theme: simple
transition: fade
slideNumber: false
title: VScode × reveal.js
---
### VScode × Reveal.js
VScodeでReveal.jsを使ったプレゼン資料作成
---
### Reveal.jsとは
綺麗なプレゼン資料を簡単に作成できる、
JavaScriptライブラリです。
---
### 非エンジニアでも簡単
Ctrl＋Shift＋Ｐをクリックし、「Revealjs: Show presentation by side」を入力することで、分割画面でのプレビューを表示することができます。
プレビューを見ながら資料を作成できる便利な機能です。
ブラウザで表示確認
Ctrl＋Shift＋Ｐをクリックし、「Revealjs: Open presentation in browser」を入力することで作成したファイルをブラウザで確認することができます。
スライドの挙動や全体の雰囲気を確認しましょう。
HTMLやPDFでエクスポート
配布するときやHTMLでカスタマイズを行いときなどに、HTMLとPDFでエクスポートすることができます。
Ctrl＋Shift＋Ｐをクリックし、「Revealjs: Export in HTML」を入力することで作成したファイルをHTMLとしてエクスポートすることができ、「Revealjs: Export in PDF」を入力することで作成したファイルをPDFとしてエクスポートすることができます。
エクスポートしたHTML、PDFにも動きが引き継がれるので、そのままプレゼンすることも可能です。
実際に作ってみて感じたこと
今回実際に作ってみて、PowerPointやGoogleスライドにまったく慣れてないけどコードを書くことには慣れているかたで文字ベースで、細かい装飾はいらないという方にはおすすめです。
僕自身PowerPointにもGoogleスライドにも慣れているほうなので、わざわざMarkdown形式で書く必要もないかなと。
ただ、コード書くのは楽しいので、楽しさ重視でLTとかの簡単なスライド作るならよいと思います！
以上、VScodeでReveal.jsを使ってプレゼンスライド作ってみた話でした。
Coment