reveal.js＋markdownで発表スライドを作成する

powerpointで資料を作成すると、見た目や体裁を整える時間がかかるので、
内容だけに集中するために、reveal.jsとmarkdownを使った資料作成方法を紹介する。

reveal.js

reveal.jsはオープンソースのプレゼンテーション作成のフレームワークである。
作成したプレゼンテーションは、Webブラウザで確認することができる。

インストール方法

インストールはzipを展開するだけでOK。
公式サイトへアクセスして、左のペインから「Installation」を選択する。
その後、Basic Setupの1.に記載のURLをクリックしzipを任意の場所に保存する。

動作確認

ダウンロードしたzipを展開し、「demo.html」を開くと下画像のような画面がブラウザで開く。
スライドの移動は、進むときは「＞」、戻る「＜」をクリックする。

markdownでスライドを作成する

htmlでもスライドを作成することができるが、今回は見た目を整える時間を減らすことが目的であるので、markdownを使用してスライドを作成することにする。

フォルダ構成

ダウンロードしたzipの解凍後は、以下のようなフォルダ構成になっている。
(assets/imageフォルダは後で使用する画像を格納するため作成しておく。)

事前準備

ダウンロードしたzipの直下にあるindex.htmlを使用して実際にスライドを作っていく。
まずは、あらかじめ書かれているコードを消去し下記の状態にする。(19,20行目を消去する。)

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/black.css">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<!-- <section>Slide 1</section>
				<section>Slide 2</section> -->
			</div>
		</div>

		<script src="dist/reveal.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script>
			// More info about initialization & config:
			// - https://revealjs.com/initialization/
			// - https://revealjs.com/config/
			Reveal.initialize({
				hash: true,

				// Learn about plugins: https://revealjs.com/plugins/
				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
			});
		</script>
	</body>
</html>

<!doctype html>

<html>

<head>

<title>reveal.js</title>

</head>

<body>

<!-- <section>Slide 1</section>

<section>Slide 2</section> -->

</div>

// More info about initialization & config:

// - https://revealjs.com/initialization/

// - https://revealjs.com/config/

Reveal.initialize({

hash: true,

// Learn about plugins: https://revealjs.com/plugins/

plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]

});

</script>

</body>

</html>

以降は消去した箇所にコードを追加する。
reveal.jsでは、<section>〜</section>までがスライド1枚となる。

体裁を整える-1

スライド全体が真ん中寄せになっているので、左に寄せる。
css/reveal.scssを開き、text-align:centerをコメントアウトする。

.reveal .slides {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	pointer-events: none;

	overflow: visible;
	z-index: 1;
	//text-align: center;
	perspective: 600px;
	perspective-origin: 50% 40%;
}

.reveal .slides {

position: absolute;

width: 100%;

height: 100%;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

pointer-events: none;

overflow: visible;

z-index: 1;

//text-align: center;

perspective: 600px;

perspective-origin: 50% 40%;

}

修正後はgulpコマンドでコンパイルが必要。コンパイル時に、
Error: Cannot find module ‘colors’というエラーが出たので、npm install colorsも実行しておく。
(ここではgulpの説明は割愛する。)

体裁を整える-2

見出しの上の余白が狭いため、margin-topを調整する。

.reveal h3 {font-size: $heading3Size; margin-top: 2.5rem;}

1	.reveal h3 {font-size: $heading3Size; margin-top: 2.5rem;}

スライドを作成する

体裁を整え終わったら、markdownを使ってスライドを作成する。
見出し(ex. ## 連絡事項)、順序なしリスト(ex. – 研修1)、画像(ex. ![画像](〜)など
markdownの記法をそのまま使用することができる。
(markdownについての詳細は割愛)

<div class="reveal">
  <div class="slides">
    <section data-markdown>
      <textarea data-template>
        ## 連絡事項

        ### お知らせ
        - 研修１
        - 研修２

        ### その他
        - 会議１
        - 会議２
      </textarea>
    </section>
    <section data-markdown>
      <textarea data-template>
        ## 画像
        ![画像](./assets/image/sample.jpeg)
      </textarea>
    </section>
  </div>

## 連絡事項

### お知らせ

- 研修１

- 研修２

### その他

- 会議１

- 会議２

</textarea>

</section>

## 画像

![画像](./assets/image/sample.jpeg)

</textarea>

</section>

</div>

縦方向にスライドを配置する

reveal.jsでは、左右以外にも上下にスライドを配置することができる。
sectionタグに、data-separator-vertical属性を追加することで、下方向にスライドを追加できる。
区切り文字は任意で設定が可能である。

<section data-markdown
         data-separator-vertical="vvv$">
  <textarea data-template>
    ## 連絡事項

    ### お知らせ
    - 研修１
    - 研修２

    ### その他
    - 会議１
    - 会議２
    vvv
    ## 連絡事項2

    ### お知らせ2
    - 研修3
    - 研修4

    ### その他2
    - 会議3
    - 会議4
  </textarea>
</section>

<section data-markdown

data-separator-vertical="vvv$">

## 連絡事項

### お知らせ

- 研修１

- 研修２

### その他

- 会議１

- 会議２

vvv

## 連絡事項2

### お知らせ2

- 研修3

- 研修4

### その他2

- 会議3

- 会議4

</textarea>

</section>

右下に「∨」が表示されていることがわかる。

スライド1(下)から「＞」をクリックし、スライド2に遷移することができる。

まとめ

今回はreveal.js+markdownでスライドを作成する方法を紹介した。
powerpointでは、文章のインデントや画像の位置調整など、本筋ではないところで多大な時間を要していた。また、デザインの知識がないと要素の配置に頭を悩ませていた。
しかし、今回の方法では、毎回同じクオリティでスライドを作成できる。
一定のクオリティが担保できるという意味では、デザインの知識がない人ほどぜひ使って欲しい
スライド作成のフレームワークであると感じた。