「こんなスライドじゃ我々の研究の素晴らしさが伝わらないだろ？ もっとシッカリしたのを作り直してくれ給えよ」
「…… （ポスドクの雇用期間が切れて明日から無職になる俺を、よくまあ最後までコキ使ってくれるな。この老害ボスが）」
はじめに
スライドを使ったプレゼンテーションと言えば、ここ20年近くパワーポイントを使うものと相場が決まってしまっていた感がありますが、今やウェブページを使って同様のことができるのです。
HTMLで「スライド」を作成・発表するためのツールとしてよく知られているのがreveal.jsです。
これに加えて今回紹介したいのは、拙作の軽量マークアップmarkgaabと、それをHTML化するperlベースのツールWini.pmです。さらに、reveal.jsとmarkgaabを結びつけるツールとしてreveal.plというツールも導入します。
これらにより更に簡便なスライド作成を実現します。
HTML+JavaScriptで「スライド」表示を実現するreveal.js
HTMLソースの一部を示します。
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>reveal.jsとパワーポイントの比較</h2>
</section>
<section>
<h3>reveal.jsの長所</h3>
<ul>
<li>ウェブベース
<ul><li>使用するデバイスを選ばない</li><li>公開・共有が容易</li><li>慣れれば編集も容易</li></ul>
</li>
<li>カスタマイズ性に優れる</li>
<li>レスポンシブデザインの実現が容易</li>
<li>オープンソースである</li>
</ul>
</section>
こんな雰囲気のHTMLファイルを作成して適当なウェブサイトにあげれば、ブラウザを通して世界に発信できるという訳です。
上記のソースのフルセットをnetlifyにアップしてみました。
REVEAL.JSとパワーポイントの比較
HTMLのかわりに「軽量マークアップ言語」でコンテンツを作る
このように簡単にスライドが出来上がることには感動を禁じえないわけですが、こうなったらなったで、さらに欲が出てきます。
「HTMLも書くの結構面倒くさくない？」
実はreveal.jsはテキストをmarkdownで作ることもできるようになっています。広く普及しているので皆さんもご存知でしょうが、とてもシンプルで直感的に書け、お手軽です。しかし、表現力には限度があるのも確か。
そこで、markgaabです。これは、簡易マークアップの便利さを踏まえつつも、もう少し凝った表を簡単に作りたいという欲求を切っ掛けとして開発に至ったものです。今のところmarkgaabに対応しているのはセットで公開しているmarkgaab-HTML変換ツールWini.pmのみですが、逆にWini.pmさえあれば最新の仕様に準拠した高レベルのHTMLデータを簡単に作成できます。
これらをreveal.jsに応用すれば、立派なスライドセットが簡易に作り出せるはずです。
スライド作成ツールreveal.pl
markgaabベースの「プレゼンテーションシナリオ」を作成し、それをreveal.plに与えることでreval.js対応のHTMLファイルを生成します。
$ perl reveal.pl input.txt output.html
input.txtは以下に説明するようにスライドの内容を書き記したテキストファイルで、これをシナリオファイルと呼んでおくことにしましょう。実行すると結果がoutput.htmlに出力され、これをブラウザで読み込めば「スライドの表示」となります。
シナリオファイル
まずは実例を示します。タイトルと、目的をまとめた一枚のスライドのみからなるシナリオです。
//config//
lang: ja
output: reveal_sample_slide
//title//
perlとJavaScriptとHTMLで超手軽にスライドを作る
さらばパワーポイント
南野誰平^^{*}・Hannes {{A%}}ngstr{{o:}}m^^{**} ・松本ふじみ^^{**}
^^{*}中洲産業大学・^^{**}国際信州学院大学
////
!! この発表の目的
* 従来の方法よりもさらに効率的なスライド作成方法を提案する。
* reveal.jsとmarkgaabの有用性をもっと世に知らしめる。
各々のスライドは////で始まり、次のスライド定義か、ファイル末尾で終わります。
これらのスライドの内容はHTMLで書いても良いのですが、基本的にはmarkgaab記法で書けます。markgaabの処理は、reveal.pl内でモジュールとして呼び出されるWini.pmの仕事です。このmarkgaabインタープリターはHTMLコードを素通しにするので、両者を混ぜ書きしても問題ありません。
markgaab記法の例：
| markgaab | html | |
|---|---|---|
| イタリック | {{i|ita}} |
<span style="font-style:italic;">ita</span> |
| ボールド | {{b|bold}} |
<span style="font-weight:bold;">bold</span> |
| 上付き文字 | 100cm^^{2} |
100cm<sup>2</sup> |
| 下付き文字 | H__{2}O |
H<sub>2</sub>O |
特別なスライドとして、//title//があります。
これは、プレゼンの最初に映写されるタイトルスライドに特化しています。「タイトル」・「副タイトル」・「発表者」・「所属」をこの順番でそれぞれ一行で書きます。
さらに//config//を置くと、その次の行から各種設定記述となります。『Reveal.js | 初期設定 #reveal.js』で説明されているReveals.initalizeの各項目を項目名： 値の形式で書きます。
これに加えて、以下のパラメーターを設定できます。
| 項目名 | 説明 | 既定値 |
|---|---|---|
| theme | reveal.js書式テーマ | beige |
| lang | 言語設定 | ja |
| font | テキストのフォント | "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif |
| color | テキストの色 | black |
| bgcolor | 背景の色 | white |
使用法
最後に使用方法をまとめます。
インストール・セットアップ
- reveal.jsをダウンロードする。適当なディレクトリにアーカイブを展開する。
- Winiをダウンロードする。
- ダウンロードしたWiniパッケージ中のWini.pmを、PATHをひいたディレクトリにコピーする。
- 同じWini.pmを
perl -le 'print for @INCで出力されるディレクトリにいずれかにコピーする。 - utils/reveal.plをPATHを引いたディレクトリにコピーする。
スライド作成
- reveal.js一式を展開したディレクトリ（index.htmlがおいてあるディレクトリ）に移動し、上記の要領に沿ってシナリオファイルを作成する。
-
$ reveal.pl input.txt output.html実行。
注意
作ったスライドを他のマシンあるいはUSBメモリなどに移動したい場合は、reveal.jsを展開したディレクトリ全体をコピーしてください。
シナリオファイルおよび作成したスライドをPDF化したものを私のグーグルドライブで公開しています。
おわりに
スライド作成って、私が大学院生だったころは本っっっ当に面倒で時間のかかる作業だったのです。ここで示したレベルのスライドだって初心者が作ろうとすれば半日コースです。臭さと戦いながら（アンモニア水によるジアゾ反応でフィルムを発色させるので、本当に臭かったのです）、カスみたいなスライドをやっと作っていたあれは何だったのか……。
HTMLもCSSも日々進化しており、ちょっと目を離していると「こんなことまで出来るようになってるの?」と驚かされることもしばしばです。テキスト処理に長けているperlを組み合わせることで、まだまだ面白いシステムが組めると思います。私の今の目標は、追い付け追い越せLaTeXです。