Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
67
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

これからのプレゼン資料は reveal.js を使おう

概要

プレゼン資料を作ろうと思ったとき、PowerPoint がすぐに思い浮かびますが、使い勝手の面やソース管理との相性が悪いのが課題でした。

かっこいいプレゼン資料を手軽に作りたい!そんな時は reveal.js がおすすめです。

こんな 感じのプレゼン資料がさくっと作れます。

使い方

reveal.js では HTML によるマークアップや markdown での作成に対応していますが、個人的には vscode から作成するのがおすすめです。

以下に簡単な作成手順について紹介します。

1. vscode のインストール

まずは vscode をダウンロードしてインストールします。

2019/10/09 現在、以下のバージョンの vscode で reveal.js が動作することを確認しています。

Version: 1.38.1 (system setup)
Commit: b37e54c98e1a74ba89e03073e5a3761284e3ffb0
Date: 2019-09-11T13:35:15.005Z
Electron: 4.2.10
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Windows_NT x64 10.0.17134

2. 拡張機能のインストール

vscode を起動し、拡張機能を表示します。

検索ボックスに vscode-reveal と入力して拡張機能を検索して Install ボタンでインストールします。

3. vscode-reveal のバージョンの切り替え

2019/10/09 現在、最新バージョンは 4.0.3 ですが、最新バージョンを使うとプレビュー機能が正しく動作しないので少し古いバージョンへ切り替えます。

検索結果の一覧の vscode-reveal にある歯車アイコンをクリックして Install Another Version... をクリックします。
リストから 4.0.2 をクリックします。

バージョンが切り替わると以下のように表示されます。

image.png

reveal.js の環境準備は以上です。

4. markdown によるプレゼン資料の作成

環境準備がととのいましたので、これからはプレゼン資料を作っていきます。
内容は markdown で記載していきます。

任意のフォルダーで sample.md ファイルを新規作成します。

image.png

左側のメニューに vscode-reveal のアイコンが追加されています。
拡張子が md のファイルを開くと自動的に表示されるようになっています。

image.png

sample.md に以下の内容を記載します。

sample.md
---
theme: "black"
transition: "slide"
slideNumber: false
title: "サンプル"
---

# はじめての reveal.js

---

## リスト

* りんご
* みかん
* もも

---

## 効果

大きくする {.fragment .grow}

小さくする {.fragment .shrink}

フェードアウト {.fragment .fade-out}

右フェード {.fragment .fade-right}

上フェード {.fragment .fade-up}

下フェード {.fragment .fade-down}

左フェード {.fragment .fade-left}

vscode-reveal ではファイルの先頭でテーマやタイトルなどの設定を記載するようになっています。

詳しい内容については vscode-reveal のサイトの Reveal.js Options から参照できます。

その下の行からがプレゼン資料の内容になっています。

一般的な markdown の記法に従って記載し、セクション(ページ)の区切りは --- で区切ります。
fragment というクラスを指定することでページに効果を与えることもできます。

それでは vscode でプレビューを見てみましょう。

左側のメニューにある vscode-reveal のアイコンをクリックし、左側の画面の上部にある一番右側の Revealjs: Show presentation by side のアイコンをクリックすると右側の画面にプレビューが表示されます。

image.png

右側の画面の右下にある左右のボタンをクリックするとページを切り替えることができます。

あとはプレビューを確認しながら markdown でかっこいいプレゼン資料を作っていきましょう。

markdown のサンプル sample.md をフォルダーに取り込んでおくと様々な記法の勉強になりますので、参考にしてみてください。

5. Webブラウザーでの表示

プレゼン資料が一通り仕上がったら Web ブラウザーで表示してみます。

左側の画面の上部にある右から2番目の Revealjs: Open presentation in browser のアイコンをクリックすると Web ブラウザーが起動してプレゼン資料が表示されます。

image.png

Web ブラウザーによる表示では左右キーによるページの移動などのキー操作に対応しています。

キー 内容
左ページへ移動
右ページへ移動
B 休憩
S ノートの表示
ESC スライド一覧
F11 全画面表示

その他、左下のペンボタンをクリックすることでスライド上に自由に書き込んだりすることもできます。

ページの移動

lr.gif

休憩

break.gif

ノートの表示

note.gif

スライド一覧

slides.gif

スライドへの書き込み

pen.gif

6. HTML や PDF ファイルでのエクスポート

作成したプレゼン資料は HTML や PDF ファイルとしてエクスポートすることもできます。
資料を配布したい場合にも対応できて便利です。

6-1. HTML エクスポート

左側の画面の上部にある一番左側の Revealjs: Export in HTML のアイコンをクリックするとカレントフォルダーに export フォルダーが作成され、その中に index.html が生成されます。

image.png

export フォルダーを配布すれば vscode を使うことなく Web ブラウザーのみでプレゼン資料を閲覧できるようになります。

6-2. PDF エクスポート

左側の画面の上部にある左から2番目の Revealjs: Export in PDF のアイコンをクリックすると Web ブラウザーの印刷画面が表示されます。

image.png

送信先を PDFに保存 として保存することで PDF ファイルとしてエクスポートできます。
fragment などのフェード効果も正しく表現された状態で保存することができます。

公式サイト

https://github.com/hakimel/reveal.js/
https://marketplace.visualstudio.com/items?itemName=evilz.vscode-reveal

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
67
Help us understand the problem. What are the problem?