はじめに
2年ほど前にインターフェースオフ会の発表資料を作成した時にpandoc + reveal.jsを使ったが、使い方をまとめていなかったので思い出しがてらまとめる。
ただ、この時の発表では会場でノートPCが壊れて起動しないという散々な状況だったので、私としては苦い思い出。
環境の作成
ディレクトリ構成
reveal.jsのディレクトリとスライドのマークダウンは同じフォルダに置いておく。
work ├── input.md └── reveal.js
イメージがある場合はこんな感じにしておくと便利だと思う。
work ├── input.md ├── images │ └── imagefile.jpg └── reveal.js
reveal.jsのダウンロード
$ git clone https://github.com/hakimel/reveal.js.git
スライドの生成
マークダウンを置いたディレクトリでpandocを実行する。
$ pandoc -s -t revealjs -o slide.html input.md
とりあえず何か作ってみる
次の内容をinput.mdとして作成する。
% スライドのテスト % Yusuke Mitsuki (発表者) % 2019/4/1(発表年月日) # 見出し1 本文本文本文本文本文本文本文本文 ## 見出し2 本文本文本文本文本文本文本文本文 ### 見出し3 本文本文本文本文本文本文本文本文
作ったものを見る
上記のpandocを実行すると、slide.htmlが作成されている。
これをブラウザで開くとスライドが見れる。
とりあえず、方向キーの左右で進んだり戻ったりできる。
表示効果
マークダウンの構文でいろいろできる。
箇条書きや番号付きリスト、画像の挿入などはそのまま使用できる。
ポーズ
. . .で本文中にポーズを挟むことができる。
まえ . . . うしろ
発表者ノート
スライドには表示されない、発表者向けのノートを入れることができる。
<div class="notes"> これはノートです。 - リストのような - Markdownも含めることができます。 - ノート本文と1行空けて下さい。 </div>
スライド表示中にsを押すと、発表者ノート表示用のポップアップが表示される。
これは現在時刻と開始からの経過時間なども一緒に表示されるので便利。
スライドレベル
--slide-levelオプションを使用すると見出しの階層によってスライドをネストすることができる。
指定した数より上の階層には本文が入れられない(無視される)。例えばスライドレベル2であれば見出し1の下の本文が無視される。
$ pandoc -s -t revealjs -o slide.html input.md --slide-level=2
2以上であれば、縦方向にもスライドするようになる。
個人的には２あれば十分。
テーマの変更
-V theme:テーマで使用するテーマを変更することができる。
| テーマ | 概要 |
|---|---|
| beige | ベージュ色の背景、暗い色の文字、茶色のリンク |
| black | 黒い背景、白い文字、青いリンク (既定のテーマ) |
| blood | 黒い背景、白い文字、赤いリンク |
| white | 白い背景、黒い文字、青いリンク |
| league | 灰色の背景、白い文字、青いリンク (3.0.0以前のreveal.jsの既定のテーマ) |
| moon | 暗い青の背景、ベージュの文字、青いリンク |
| night | 黒い背景、太く白い文字、オレンジ色のリンク |
| serif | カプチーノ色の背景、灰色の文字、茶色のリンク |
| simple | 白い背景、黒い文字、青いリンク |
| sky | 青い背景、細い暗い色の文字、青いリンク |
| solarized | クリーム色の背景、暗い緑の文字、青いリンク |
キーバインド
とりあえず次のような事ができる。
| キー | 機能 |
|---|---|
| f | 全画面 |
| o | アウトライン表示 |
| n | 次のページ |
| p | 前のページ |
| b | 黒画面 |
| s | ノートの表示(ポップアップ) |
| h | 左のページ |
| j | 下のページ |
| k | 上のページ |
| l | 右のページ |
テーマの追加
テーマを追加したい場合はreveal.js/css/themeにcssを追加すれば良い。
今回は既存のテーマをベースに新しいテーマmy-theme.cssを作成する。
$ cp reveal.js/css/theme/moon.css reveal.js/css/theme/my-theme.css
次のように変更する。
--- reveal.js/css/theme/moon.css 2019-04-01 13:34:34.249863370 +0900 +++ reveal.js/css/theme/my-theme.css 2019-04-01 15:01:48.082784565 +0900 @@ -20,7 +20,7 @@ .reveal { font-family: "Lato", sans-serif; - font-size: 40px; + font-size: 36px; font-weight: normal; color: #93a1a1; } @@ -54,18 +54,18 @@ font-weight: normal; line-height: 1.2; letter-spacing: normal; - text-transform: uppercase; + text-transform: none; text-shadow: none; word-wrap: break-word; } .reveal h1 { - font-size: 3.77em; } + font-size: 2.5em; } .reveal h2 { - font-size: 2.11em; } + font-size: 1.6em; } .reveal h3 { - font-size: 1.55em; } + font-size: 1.3em; } .reveal h4 { font-size: 1em; }
ベースのテーマのフォントサイズが気に入らない場合などはこのようにすると便利。 もちろん全く新規にテーマを作成しても良い。
pandocでは次のようにテーマを指定する。
$ pandoc -V theme:my-theme -s -t revealjs -o slide.html input.md --slide-level=2
pdf出力及び印刷
ブラウザのアドレスバーにあるスライドのURLに?print-pdfを追加する。
その後、ブラウザの印刷機能で印刷する。
PDF出力はブラウザがpdf出力できる場合はそれで行なう。
まとめ
pandocとreveal.jsを使用すると、スライドの作成が簡単になる。
おまけ
機能確認用に作ったinput.md。
% スライドのテスト % Yusuke Mitsuki (発表者) % 2019/4/1(発表年月日) # 見出し1 本文本文本文本文本文本文本文本文 <div class="notes"> これはノートです。 </div> ## 見出し2 本文本文本文本文本文本文本文本文 <div class="notes"> スライドには表示されません。 - 箇条書き - もできます。 </div> ### 見出し3 本文本文本文本文本文本文本文本文 <div class="notes"> ノート画面は意外と便利 </div> # 画面効果 ## リスト - item1 - item2 - item3 ## リスト(*) * item1 * item2 * item3 ## 番号付きリスト 1. item1 1. item2 4. item3 4. item4 ## ポーズ まえ . . . うしろ ## イメージ  ## テーブル キー 機能 --------- --------------------------------------- f 全画面 o アウトライン表示 n 次のページ p 前のページ b 黒画面 5行程度が限界かも。
