reveal.jsでパワポ要らずのスライド作り

プレゼンテーションで使うスライドを作るとき、多くの人はPowerPointやGoogle スライドを使うと思いますが、マウスをカチカチしながらレイアウトを組むのは少し面倒です。

レポートと同じようにスライドもMarkdownで作りたいと思い調べてみると、reveal.jsというものがあるようです。今回はこちらを紹介していきます。

reveal.jsとは

reveal.jsはHTMLでスライドを作ることのできるフレームワークです。もちろんMarkdownにも対応しています。

公式HPの最上部に埋め込まれているスライドを見れば、どのような機能があるかはだいたい分かります。アニメーションやLaTeX形式での数式の埋め込みにも対応しています。

reveal.js以外にもMarpやremark.jsなど似たものはあるのですが、軽く触った感じだとreveal.jsが一番シンプルに求めるものを実現してくれそうでした。

ちなみに、Markdownで作りたいと上で書いたばかりですが、レイアウトの関係もあって結局HTMLで作っています。Markdownだと本当に簡単なスライドしか作れません。

最低限の使い方だけ紹介します。凝ったスライドを作りたい方は公式のドキュメントも見てみると良いでしょう。

GitHubからcloneし、index.htmlを書き換えるだけです。以下の部分のsectionタグがそれぞれスライドになります。

<div class="reveal">
    <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
    </div>
</div>

テーマも色々ありますが、どれも微妙なのでwhiteをベースにして自作しました。Flexboxを使ったレイアウト用のクラスも作ってあります。

f:id:yurkth:20200907012719p:plain

それぞれの要素に色を付けるとこんな感じです。CSSさえ用意してしまえば後はかなり楽にレイアウトを組めるようになりました。

f:id:yurkth:20200907012728p:plain

テーマを作っているときに知ったんですが、CSSにも変数ってあるんですね。スライドごとにHTMLから変数を上書きして色を変えることもできるのでいい感じです。

Markdownを使うにはsectionタグにdata-markdown属性をつけると良いようです。外部ファイルを読み込むこともできます。詳しくは下を見てください。

レイアウトがろくにいじれないのでおすすめしません。HTMLで書いたほうが幸せになれます。

sectionタグ内でasideタグを使うことでスピーカーノートを追加することもできます。スピーカーノートはSキーを押すと別ウィンドウで表示されます。

<aside class="notes">
    カンペ
</aside>

URLにprint-pdfクエリを追加し、Ctrl+Pで印刷するときの送信先を「PDFに保存」にすることでスライドをPDFで出力できます。ChromeとChromiumしか対応していないようです。

クエリを追加した段階だとレイアウトが崩れていることがありますが、PDFにすると問題ないはずです。

GitHub Pagesで公開しましょう。プライベートリポジトリにしてGitHub Pagesを有効にすると、URLを知っている人だけがスライドを閲覧できるようになるので便利です。

reveal.jsでパワポを使わずにいい感じのスライドを手軽に作れるようになりました。しかし、複数人で作業するときには結局パワポやGoogle スライドを使うことになりそうですね…

以前の記事でWordを、今回の記事でPowerPointを使わないようにしたので次回はExcelといきたいところですが、先の2つと比べると乗り換える必要をあまり感じません。

もし乗り換えるとしたらJupyter Notebookあたりでしょうか。ちなみに最近はExcelよりも共有が楽なGoogle スプレッドシートを使うことが多いです。