xaringanで快適RMarkdownスライドショー
ち ょっとした資料をスライド形式で提示する必要が出てきた時、データから生成した図表や数式が簡単に埋め込めると便利である。
PowerPointなどのツールだと、数式や図表の埋め込みが面倒である。また、テキストベースだと、差分の管理や使い回しもしやすいように思われる。
そこで、RMarkdownを使ってスライドを作成してみることにしたのだが、そのためのパッケージが何種類か存在する：
ioslides：RMarkdownに標準搭載。Google I/O 2012用に作られたwebベースのスライドテンプレートを元にしたもの。シンプルで見栄えは良いが、カスタマイズ性が乏しいslidy：RMarkdownに標準搭載。beamer：RMarkdownに標準搭載。ブラウザベースではなく、TeXをバックエンドにしてPDFを生成する。revealjs：高機能だがやや記述が冗長。xaringan：個人が作成したもので、RMarkdownに組み込まれている上の2つと比べると開発の持続性は怪しいし、マイナーだが、高機能でインストールするだけでMathJaxの数式などもまともに使える。内部的にremark.jsを使用している。
それぞれ試した結果、xaringanを使ってみることにしたが、マイナーで使い方についての資料が少ないので自分なりのbest practiceを備忘録としてここにまとめておく。
執筆環境
R + RStudioを使用する。RStudioのMarkdown記法の入力支援は乏しいので、地の文が多い場合は別のMarkdownエディタを使うほうが良いかもしれない。
> install.packages('xaringan')- RStudio Addinから
Infinite Moon Readerをインストールする。 - RStudioのNew R MarkdownのFrom TemplateペインでNinja Presentationを選ぶと、ドキュメンテーションスライドと同じ内容の新規ファイルが生成される
※macOSの環境ではcairoがうまく読み込めずグラフィックデバイスsvgが使えなかったのでsvgliteパッケージを入れて、図表はdev=svgliteをつけて出力した。
xaringan::inf_mr()を実行しておくと、auto compileが利用でき、手動でKnitしなくてもセーブする度に再コンパイルしてくれる。また、localhost:4321にhttpサーバーが動いてそこでスライドのhtmlをホストしてくれるので、ブラウザでプレビューが可能になる。
表記法
YAML frontmatter
例えばこんな感じで記述する。
title: スライドのタイトル
subtitle: "<small>サブタイトル</small>"
author: My Name
date: "2020/08/25"
output:
xaringan::moon_reader:
lib_dir: libs
css: ["default", "fonts.css"]
nature:
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
ratio: 16:9
natureの中にremark.jsの設定オブジェクトが書ける。
基本的な書き方
remark.jsのFormattingに倣って記述する。
地の文にはMarkdown記法とhtmlが使えるが、このパースはremark.jsがやっていることに注意が必要。
# Title
- Item 1
- Item 2
--
- Item 3
???
Slide note
---
# New Slide
1. Numbered Item 1
1. Numbered Item 2
---
class: center, inverted
Foo!
- スライド区切りは
--- - 順に表示するときは、
--で区切ると、その下は新たなスライドとして追加されていく（前のスライドがtemplateになる） - スライドノート：
???で区切るとその下はノートになり、発表者画面で表示できる - Slide property：スライドについての属性
class：スライドに適応されるcssクラス。デフォルトではleft, center, right, top, middleがある。テーマに定義されているものがあれば、それも使えるし、自分でカスタムcssで新しいものを定義することもできる。template：雛形を指定する。そのスライドの本文は、雛形の後に書かれているものとして扱われる。name：templateで指定できるように名前をつけるlayout：trueにすると、それ自体はレンダリングされず、以降のスライドのtemplateに自動で指定される。falseにすると、以降のスライドのテンプレートはdefaultに戻る。exclude：trueにするとそのスライドがレンダリングされなくなるcount：falseにするとページ番号に含まれない- 背景関連：
background-image,background-size,background-position,background-repeatが指定できる。内容はcssのそれと同じ。
- Content class：本文の一部にcssクラスを指定する記法
- 数式はMathJaXがデフォルトで使える。
$で囲んでinline style、$$で囲んでdisplay styleが使える。デリミタの周りは空白文字である必要があることに注意。
画像
Markdown記法だとサイズの指定ができないので、htmlのimgタグを使って幅を指定することが多い。
スライドいっぱいに表示するときは、背景としてbackground-imageに指定して、background-size: coverとするのが楽。
Rの図
R Markdownのcode chunkで図を出力する。
グラフはdev=svgあるいはdev=svgliteとするとSVGで出力されるので望ましい。
```{r echo=T, eval=T, out.width='100%', fig.height=2.7, dev='svglite'}
ggboxplot(iris, x='Species', y='Sepal.Length', add='jitter', color='Species') %>%
ggpar(legend='none')
```
表
knitr::kable()やDTパッケージを使うのがよい。DTの使い方は、xaringan公式ドキュメントスライドを参照。
コード
Markdownのcode blockで記述する。
実行して結果を埋め込みたいときはR Markdownのcode chunkとして記述する。
カスタマイズ
カスタムcssの読み込み デフォルトのcssだとCJK文字が中華フォントになってしまうので、スライド内に日本語も入っているならfrontmatterで読み込ませるカスタムcssでfont-familyを日本語フォントを含むものにする。
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans CJK JP", "BIZ UDGothic", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
}
スライドショーの操作
remark.jsを用いたプレゼンテーションとしてコンパイルされるので、当然のことながら、スライドショーはremark.jsの機能に準じている。
- 'p'：発表者画面の切り替え
- 'f'：フルスクリーンの切り替え
- 数字+Enter：特定のスライド番号に移動
- '?', 'h'：ヘルプを表示