授業スライドをいい感じに管理したい
パワポでの管理もいいけど、なんだか飽きたのと、使い込んでも楽になる感じがないので別のツールを使うことにする。パワポは当初の学習曲線は低いのだが、その先の使いこなし術があまりないなあという印象だ。何でもできると言えばできるんだけど、特にセクション周りの扱いが好きになれなかった。Canvaはおしゃれな印象があるけれど、授業のスライドにおしゃれさは別にいらなくて、サクッと作れることのほうが大切だ。
Reveal-hugoを選ぶ理由
最近はMarkdownを使ってスライドを書けるツールがいろいろとあるが、今回はそのなかでReveal-Hugoというツールを選定した。Reveal-Hugoは複数のスライドをまとめて管理できて、一覧を表示するのも簡単だ。講義スライドを作る場合、講義の各回ごとに別スライドを作るので、それらを一括して扱う機能はとても重宝する。つまりは、Markdownを使って、スライドを作るツールはいろいろあるが、Reveal-Hugoが存在するという理由で僕はReveal-Hugoを選択した。
Markdownを使ってスライドを作れるツールは他にも、MarpとかSlidevなどもあるけれど、Revealをなんとなく選択した。Marpはそもそも使ったことがないので、よくわからない。Slidevはデザインがきれいな印象があるが、一プレゼンテーションに一つアプリをデプロイしなければならない。僕のように複数のプレゼンテーションを管理する場合にはあまり望ましくない仕様だ。サーバにインストールすればよいのかも知れないけれど、僕には方法がわからなかった。というわけで、なんとなく使い始めて、使い勝手がそれなりによかったので、Revealを使っている。
Revealにブログツール（Hugo）をくみあわせたReveal-Hugoを使うと、ShortcodeというHugoの機能を使うことができる点が決め手になった。Revealをそのまま使うか、Reveal-Hugoを使うか、悩ましいところで一長一短がある。Reveal-Hugoを使うと、設定は書式設定などが二重になるので、問題が出たときにそれがRevealで出ている不具合なのか、Reveal-Hugo固有の問題なのか、Hugoの問題なのか、わからない。だが、執筆時にShortcodeを使えると、コードの見通しがとても良くなるので、Reveal-Hugoの方が使い勝手がよい印象だ。ただし、将来的に別のツールに移行するかも？というばあいは、素のMarkdownで書いたほうがいい。どっちにしてもMarkdownなので、Shortcodeを使わないとソースが読めないということにはならない。僕の場合は、必要になったらShortcodeを書き換えればいいやと思ってReveal-Hugoにした。
Reveal-Hugoでのこだわり
Reveal-Hugoを使ううちに、それなりに不満も出てきたので、いろいろとカスタマイズしている。カスタマイズが必要なのは使い勝手が悪いというよりも、いろいろと好みに変えられるということで、むしろ良いことなんだと思う。カスタマイズは主にChatGPTが支援してくれるので、そこまで苦労はしない。
設定メモ
インストールはドキュメントがあるのでそちらを参照してもらいたい。
ここでは、細かい調整のみ取り扱うことにする。
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」と修正する必要がある。また、イコール以降は場合によってはダブルクオーテーションで囲む必要があるかもしれない。
本来、hugoの設定は、paramsと全部小文字なのだが、Reveal-hugoのばあい、Paramsと先頭を大文字にしないと認識されないようだ。 これはおそらくバグなんだと思う。
[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の処理がぶつかるからかもとも思う。