Reveal-Hugoで授業スライドを作る

授業スライドをいい感じに管理したい

パワポでの管理もいいけど、なんだか飽きたのと、使い込んでも楽になる感じがないので別のツールを使うことにする。パワポは当初の学習曲線は低いのだが、その先の使いこなし術があまりないなあという印象だ。

設定メモ

ppt、pptxからRevealへの以降

公式サイトのプラグインリストにパワーポイント資料をマークダウンに修正してくれるツールが紹介されている。こちらをインストール（pip install pptx2md）して、資料を一つずつ変換するとよい。

パワーポイントは資料のアウトラインを見ることができないのが一番面倒なところ。僕はスライド資料を階層化して管理したい。

以下で変換できる。なお、自動で改ページ（—）を入れてくれるオプションもあるのだが、僕の環境ではうまく動かなかった。

> pptx2md.bat ソースファイル -o 出力ファイル名  --disable-wmf

パワポで使用している画像ファイルは手動でコピーする。スライドファイル（.md）を収録しているフォルダにimagesというフォルダを作成して画像用に使用する。まず、スクリプトが画像をimages以下に出力してくれるので、これを作成したimagesフォルダに移動しておく。

以上で、できたファイルを以下の条件に従って処理すると、いい感じになる。

- # （半角スペース） → --- （改行２つ）# （半角スペース）
- <span style="color:#202124"> → - 
- </span> → 削除
- img%5C → images/

Revealのカスタマイズ

Reveal-hugoの設定とは別に、Reveal.jsの設定も変更可能だ。

hugo.tomlに以下のような感じで記載する。細かい設定情報は公式サイトにある。公式サイトの説明では設定がjsonになっているので注意。

公式サイトで、「設定項目: xxx」となっているものを、「設定項目 = xxx」と修正する必要がある。また、イコール以降は場合によってはダブルクオーテーションで囲む必要があるかもしれない。

[params.reveal_hugo]
theme = "sky"
highlight_theme = "solarized-dark"
slide_number = true
center =  false
showNotes = false
transitionSpeed = 'high'

CSSのカスタマイズ

cssは、ルート/static/stylesheets/におく。

cssを読み込む設定は、ルート/layouts/partials/layout/に、reveal-hugoのtheme.htmlをコピーして設定する。コピー元は、ルート/themes/reveal-hugo/layouts/partials/layout/にある。

なお、ルート/themes/以下を手動で修正するといろいろめんどうなことになるので絶対に触らない。これらを修正する場合はここで書いたように、ファイルをルート以下の適切なフォルダにコピーしてから修正する。多くのテーマはファイルを直接修正するよりも、オプションの設定で、テーマの挙動を修正できるようになっている。

コピーしたファイルの一番最後の行に、以下を追加しておく。なおこの設定は、cssのファイル名がcustom.cssにしたばあいである。

<link rel="stylesheet" href="/stylesheets/custom.css">

印刷資料

URLに?print-pdfをつけると印刷用の画面になるので、ブラウザの機能を利用して印刷する。

配布用資料に全ページを含む必要はないので、出力されたPDFから不要なページを削除して配布することにしている。

http://localhost:1313/classinfo/cfl/c3/?print-pdf#/

スピーカー用画面、スライドメモ・ノート

プレゼン時にはスピーカー用画面を見ることが多いと思う。

僕はプレゼン中には必ずスピーカー用画面を使用する。PCの設定を２画面にして利用している。一つの画面にプレゼン資料をフルスクリーンで表示する。もう一つの画面に、スピーカー用画面を表示する。プロジェクターにはプレゼン用画面を表示する。

スピーカー用画面は、プレゼン用画面でsを押せば表示される。

スピーカー用画面には、スライドのメモも表示される。該当するスライドに以下のように書いておく。

｛｛% note %｝｝
無理に最後までやろうとせずに、初回は４５分程度にとどめること。
｛は実際は半角で書く。
｛｛% /note %｝｝

ノートは、プレゼン画面に表示されるように模で設定できる（showNotes）ようだが、よくわからない。

プラグイン

プラグインの設定方法は、Reveal-hugoの公式サイトにある。

プラグインの設定の場合、カッコが二重になっているのがポイント。一重で試しても動かなかった。なぜ二重なのかはよくわからない。

パスの設定はreveal.js-plugins/からはじめないと動かない。公式サイトではプラグイン名からの指定だけで動いている。とにかくパスに注意。

ここにプラグインへのオプションも追加できる。

[[params.reveal_hugo.plugins]]
name = "RevealChalkboard"
source = "reveal.js-plugins/chalkboard/plugin.js"
css = "reveal.js-plugins/chalkboard/style.css"

動いたプラグイン
- ChalkBoard
- Menu
動かなかった
- TableOfContents（目次を自動挿入してくれる）

TableOfContentsプラグインが動かないのは、Revealでの処理とHugoの処理がぶつかるからかもとも思う。