Org modeという最強のアウトライナーでプレゼンテーション資料を作成する

プレゼンテーション資料を作成するとき、まず最初に内容の検討と推敲をする。 Google slidesで始めるにしても、まず最初のスライドに箇条書きで構成を書き始めて、その中でプレゼンテーション全体の内容を書き出すことが多い。

プレゼンテーション資料作成のプラクティスとして、いきなり資料を作成し始めない、ということはよく聞くアドバイスじゃないだろうか？

そして先日、Tak.さんの「アウトライン・プロセッシング入門」を読んでアウトライナーでこれをもっと効率よくできる、ということを知った。

アウトライン・プロセッシング入門: アウトライナーで文章を書き、考える技術 Amazonで見る

書籍内で、以下のように黎明期のアウトライナーについて紹介するコラムがある。

そこで紹介されたMOREやGrandViewといった初期の名作アウトライナーたちは憧れの存在でした。

(中略)

MOREはアウトライナーとしての機能の他に、アウトラインをプレゼンテーション用のスライドに変換する機能を持っていました。つまり、今日のプレゼンテーションソフトの元祖(のひとつ)でもありました。

なるほど、それは素晴しい機能だと思った。なぜ誰も提供していないのか不思議なくらいに自然な機能だと思った。

これまでやっていた箇条書きは、アウトライナーで文章を書いているようなものだったのだ。だったらアウトライナーで書いた方がよっぽど検討しやすい。アウトライナーらしい使い方で考えた方がいい。

アウトラインからスライドを生成できる。そう、Org modeならね。

Emacsユーザーの私には最高のアウトライナーがついている。Org modeだ。

Org modeはスライド資料を生成したいという欲求にもちゃんと応えてくれる。 reveal.js を使った枯れたツールたちがちゃんとある。

reveal.js はHTMlベースのスライド資料を作るためのJavaScriptライブラリだ。最近だとReactベースのSpectacleなどがあって、常に一定の需要があるようだ。表現力が高いのでかっこいいスライドが作れるのだが、直接Spectacleなどを使ってスライドを作るのは結構億劫で、実は途中で使うのをやめてしまった過去がある。

しかし今回はOrg modeのテキストから生成するのだ。億劫な作業はほとんどない。こうやって使うべきだった、と過去の自分に教えてやりたい。

私は org-re-reveal を使ってスライド生成をすることにした。あとは、これで必要なスライド表現ができるかどうかがポイントになる。

oer / org-re-reveal · GitLab

Build HTML presentations with reveal.js from Org mode source files. Based on fork...

org-re-revealでできるスライド表現

スライド構成

org-re-reveal では、スライドは各段落と一致している。

ただ、 reveal.js ではスライドを縦横に遷移させる構成を作ることができ、 org-re-reveal では、 HLEVEL でこれを制御できる。詳しくは「The HLevel」章に書かれている。

ある程度段落が深くなるとスライドとして分割されなくなる。もしくはひとつの段落の内容が多すぎると感じるなら、以下のディレクティブで、任意の場所で複数スライドに分割もできる。

1

#+REVEAL: split

もし特定のスライドを隠したい場合は、 data-visibility="hidden" を section タグに付与すればいい。これをOrg mode側で指定するには、 reveal_extra_attr を指定する。

1
2
3
4
5


* Heading
  :PROPERTIES:
  :reveal_extra_attr: data-visitility="hidden"
  :END:
  Some contents.

タイトルスライド

タイトルスライドは特別な調整ができる。特筆すべきは REVEAL_TITLE_SLIDE だ。ここには、HTMLタグを直接記述することができ、タイトルスライドの要素を直接カスタムできる。

1

#+REVEAL_TITLE_SLIDE: <h1>%t</h1><h3>%e</h3>

REVEAL_TITLE_SLIDE ではOrgファイルのメタデータを参照することができる。例えば、 %t は #+TITLE 、 %e は #+EMAIL といった具合だ。詳しくはリポジトリや、test-title-slide.orgなどが参考になる。

TOCは基本的には自動生成してくれる。もし表示位置をカスタムしたいときは、以下のようにTOCを一旦無効にして、

1

#+OPTIONS: toc:nil

挿入したい位置に、以下のような指定をすればいい。 headlines の値を変えることで、TOCにどの段落レベルまでを含めるかを調整できる。

1
2
3
4
5


** Table of Contents
 :PROPERTIES:
 :UNNUMBERED: notoc
 :END:
#+REVEAL_TOC: headlines 1

画像を挿入する (img)

これはOrg modeで画像を挿入する方法とまったく同じだ。

1

[[file:./img/hoge.png]]

画像サイズを調整したい場合は、以下のようにで指定することができる。

1

...

表を挿入する (table)

これも、Org modeで表を扱うのとまったく同じ方法で組むことができる。

1
2
3


| title | value |
| foo   |     1 |
| bar   |     2 |

イラストを描く (ditaa)

イラストを描く、というのは恐らくGoogle Slidesと比較して、アウトライナーツールが最もうまくできないことではないかと思う。 Google Slidesなどは単純に一枚のシステム構成図を描くために利用したりできるくらい、図を描く機能が充実している。

しかし、Org mode+reveal.jsでも図を描くことはできる。例えばグラフやUMLのようなフォーマットの決まった図の場合は、バンドルされているpluginで D3.js や PlantUML を利用して図を描くことができる。

フリーライティングな図については、 p5.js や fabric.js のような方法でcanvasを挿入することもできるが、もっと手軽にちょっとした図を挿入したいなら ditaa がちょうどいい。

ditaa; DIagrams Through Ascii Art

ditaa はascii artで描かれた図を画像にしてくれるツールだ。dot言語も悪くないが、より直感的に図が描けるのでフリーライティングにはもってこいだ。

実はditaaはOrg modeのCode Blockでサポートされている。

1
2
3


(org-babel-do-load-languages
'org-babel-load-languages
'((ditaa . t)))

こんな感じで有効にし、

1
2
3
4
5
6
7


#+BEGIN_SRC ditaa :file images/hello-world.png
+--------------+
|              |
| Hello World! |
|              |
+--------------+
#+ END_SRC

のような感じで図を描ける。 org-re-reveal ではスライドを生成するときに、これらのCode Blockを評価して図を生成してくれるので個別に生成する必要はない。

テーマ

最後にテーマについて触れておく。 reveal.js にはデフォルトで10+くらいのテーマがバンドルされている。好みのものを選んで利用すればいい。

しかし、日本語を扱う場合は、フォントやフォントサイズなどをもう少しカスタムしたくなるかもしれない。その場合は、独自テーマを作成する必要がある。

ちょっとした変更なら、 https://github.com/hakimel/reveal.js/tree/master/css/theme/source 以下のベースにしたいテーマのソースをコピーして、中身を変更するのが簡単だ。テーマのビルド方法は https://github.com/hakimel/reveal.js/tree/master/css/theme/README.md に書かれている。

例えばフォントを変えるだけなら、Google FontからM Plusなどの素晴しい日本語フォントを選んで、同じように @import url() で指定してやればいい。サイズもテーマのソースを編集すれば好きに変更できる。

個々のスライドの背景色を変更したり、背景に画像を利用することもできる。詳細は、 org-re-reveal のREADMEを参照されたい。

まとめ

Org modeの拡張性は素晴しい。古今東西様々なアウトライナーがあるが、恐らく直接プレゼンテーション資料まで生成できるものは少ないのではないだろうか？

アウトライナーであり、ToDo管理ができ、Roamとして使え、プレゼンテーションスライドも作れる。

「ええい、EmacsのOrg modeは化け物か!？」と叫びたくなる、とんでもなく便利なツールである。