R Markdownで作るベタなプレゼン資料
zombie, uncorrelated
2025/06/03
はじめに
オープンソースの開発ツールのユーザーがプレゼンの道具に求めること
- 数式とグラフを効率よく埋め込める
- 常用するプログラミング言語と連携させて定型処理
- 様々な端末からブラウザーで閲覧できるHTML
- 見栄えがよく無駄にぐりぐり動かせる
(1)と(2)を実現したR Markdownで、(3)と(4)を達成したい
R Markdownとは何か？
- テキスト形式で見出しやリンクなどが簡単に記述できるSNSなどで人気のMarkdown記法
- Markdown記法のファイル（.md）をhtml/PDF/ppt/odtに変化する文書作成ツールのPandoc
- Pandocの設定値の管理やプログラムのコードの実行と結果表示などのための文法を追加したのがR Markdown
- 箇条書きやファイルの埋め込みなどMarkdown記法で簡単なことは簡単にできる
- R（or Rcpp/Python/Julia）で簡単なことは簡単にできる
R Markdownの動作
- R Markdown形式（.Rmd）をKnitrパッケージで.mdに変換
- YAMLフロントマターのoutput:以下に応じてパラメーターをつけてPandocを呼ぶ
- Pandocが.md（と.mdが参照しているファイル）からhtml/pdf/docx/odtを作成
- html出力時は、html/JavaScriptのフレームワークが利用可
R Markdown Format for reveal.js Presentations
- HTMLプレゼン作成フレームワークreveal.js
- 画面サイズに対してスケーラブルな表示で、ケータイでの閲覧も可
- H1タグ（i.e. #）とH2タグ（i.e. ##）ごとになるスライドを、右下の十字ボタンなどで直線的にではなく平面的に推移
- reveal.jsの閲覧操作の詳細は ? を押すと確認できる
- R Markdown Format for reveal.js Presentationsは、reveal.jsを組み込んだhtmlファイルを生成するR Markdownの拡張
- 便利な拡張なのに人気がイマイチなので、利用時に気づいたことを述べて紹介としたい
表示のカスタマイズ
R Markdown Format for reveal.js Presentationsの利用をYAMLフロントマターで指定したあと、お好みで
- 全体の表示を調整
- YAMLフロントマターでオプションを指定
- CSSの設定を変更
- 最初と最後に読み込むhtml部品ファイルにhtmlを書く
- 局所的に表示を調整
- CSSのクラスを作成・見出しの属性で指定
- htmlを書く
する。必須ではない。
YAMLフロントマター
YAMLフロントマターで色々指定できる。もちろんrevealjs::revealjs_presentationの指定は必須。
output:
revealjs::revealjs_presentation:
theme: moon
highlight: tango
center: true
css: styles.cssCSSファイル（e.g. styles.css）も指定できる。なお、Rmdファイルと同じフォルダーに置かないと、CSSで指定した画像ファイルをself-containedできない模様。
theme
- 全体の表示を変える
- 変化がはっきりわかるので、試して把握
- black, white, league, beige, sky, night, serif, simple, solarized, blood, moon
- このスライドはsolarized
- 新たなテーマを作ることもできる
highlight
- リンク色などを変える
- 変化は微妙
- default, tango, pygments, kate, monochrome, espresso, zenburn, haddock, breezedark
- このスライドはtango
center
- 左右ではなく上下で中央に配置するオプション
- なぜデフォルトでFALSE指定なのかが謎
Incremental Bullets
- 一行一行表示する連打癖のある人には無理なオプション
- YAMLフロントマターでincremental: trueを指定
- オン/オフ指定ができる
- … で一時停止
::: incremental
- incremental節は一行一行表示
:::
::: nonincremental
- nonincremental節はまとめて表示
:::スライド番号
slideNumber=TRUEで、右下に小さく番号が入る。よく使いそうだがオプション。
output:
revealjs::revealjs_presentation:
reveal_options:
slideNumber: trueメニュー/検索/スライドに書き込み①
self_cotainedを犠牲に、標準プラグインでできる。
output:
self_cotained: false
revealjs::revealjs_presentation:
reveal_plugins: ["search", "menu", "chalkboard"]chalkboardはキーボードのcで書き込みモードが呼び出せ、bで黒板が呼び出せる。
searchはmやoなどのアルファベットが入ると検索できないので、後述するオーバービューでCTRL+Fで検索した方が確実。
メニュー/検索/スライドに書き込み②
バージョン0.10からchalkboardの左下のアイコンが標準で出なくなった。以下のオプションを追加すれば出てくる。
reveal_options:
chalkboard:
toggleNotesButton: true
toggleChalkboardButton: trueCSSファイルの作成
- YAMLフロントマターでcssファイルを指定
- cssの上書き（e.g. h1.title）
- 新規クラスの作成（e.g. section.smaller）
- hタグに属性をつける（e.g. # 見出し{.smaller}）
全体のフォントサイズを調整
.reveal {
font-size: 200%;
}0.9から0.10にバージョンアップしたら、フォントサイズが大きくなり。
タイトル文字を小さめにする
- 例としてタイトル文字を小さめにする
- スケーラブルな環境なので、サイズ指定の単位は%（親要素の値との比）, vw（表示画面横サイズの1/100）, vh（〃縦〃）, vmin（=min(vw, vh)）, vmax（=max(vw, vh)）が無難
- h2.authorとh3.dateの変更だけで用が足りる可能性大
h1.title {
font-size: 150%;
color: blue;
}スライド本文を左寄せにする
- アスペルガー症候群気味のあなたに
- CSSファイルに以下を記述
section.slide {
text-align: left;
}
section.slide h1, section.slide h2 {
text-align: center;
}- 見出しは中央にしておく
blockquoteを幅広にする
- 背景色も変えて、スクロール表示するようにする
- CSSファイルに以下を記述
section.slide blockquote {
text-align: left;
overflow:auto;
width: 90%;
background-color: rgba(255, 255, 255, 0.4);
}```{r}の背景色
- ```{r}で…をくくったときの色合いが気に入らないので調整する
section.slide blockquote, pre {
text-align: left;
overflow: auto;
width: 90%;
background-color: rgba(255, 255, 255, 0.4);
}
div.sourceCode {
background-color: rgba(255, 255, 255, 0.4);
border: 10px sold black;
}表紙に画像をつける①
- reveal.jsは表紙に画像がつけられる
- html内の最初の
<section>タグに属性を追加
- html内の最初の
- R Markdown Format for reveal.js Presentationsは設定不能の模様
- Pandocが生成したhtmlファイルを書き換えればOK
- テキストエディタで編集は煩雑
- Rを使って正規表現で置換（速度的にsedなどを使う方がよい）
- 外部ファイル参照で、html内に画像データは保持されない
表紙に画像をつける②
example.Rmdの表紙の背景画像にcover.jpgを指定する例
library(rmarkdown)
input <-"example.Rmd"
output <- "example.html"
bgimg <- "cover.png"
intermediate <- sub("\\.[^.]*$", ".temp.html", input)
render(input, run_pandoc=TRUE, output_file=output)
file.rename(output, intermediate)
# localeがutf-8ではない古い処理系のRでテキストとして処理すると未対応文字が消えるので、バイナリ処理
# なおSys.setlocale("LC_ALL", "C")で処理後、Sys.setlocale("LC_ALL", "Japanese")）でも誤魔化せる
binreplace <- function(input, output, pattern, replacement,
maximum=1, buffsize=1024*1024*5, skip=0){ # 5MBを一気読み
istream <- file(input, "rb")
ostream <- file(output, "wb")
v <- readBin(istream, "raw", buffsize)
if(0<skip){
writeBin(v[1:skip], ostream)
v <- v[-c(1:skip)]
}
# raw型のvを連結してcharacter型のjvにする
jv <- paste(v, collapse="")
jps <- paste(pattern, collapse="")
jrs <- paste(replacement, collapse="")
# jvを置換してrvをつくる
rs <- sub(jps, jrs, jv)
# jvを2文字づつ切り出し、hexmode型→raw型と変換してバイナリ出力する
writeBin(as.raw(as.hexmode(
sapply(seq(1, nchar(rs), 2), function(i){
substr(rs, i, i + 1)
})
)), ostream)
close(ostream)
close(istream)
}
binreplace(intermediate, output,
charToRaw("<section"), # 検索文字列
charToRaw(sprintf("<section data-background='url(%s)' data-background-size='cover'", bgimg)) # 置換文字列
)表紙に画像をつける③
- バージョン0.10が使っているreveal.jsはdata-background-sizeを無視してしまう
- バージョン0.9に落とす必要（ただしDT::datatableが動かなくなる）
ヘッダーをつける①
影が薄くて名前を覚えてもらえないあなたに！
- YAMLフロントマターにincludes:after_bodyオプションでhtml部品ファイルを指定する
- html部品ファイルにcssのidかclassを指定したdivタグを並べる
- CSSのpositionとtop/right/bottom/leftを駆使して表示調整
- なお、画像ファイルのデータは生成ファイルに組み込まれる
ヘッダーをつける②
YAMLフロントマターにオプション追加
output:
revealjs::revealjs_presentation:
includes:
after_body: doc_suffix.htmlヘッダーをつける③
html部品ファイル（i.e. doc_suffix.html）にcssのidかclassを指定したdivタグを並べる
<div class="suffix_words">
<div class="suffix_inner">
<!-- 表示する情報 -->
</div></div>
<div class="suffix_image"></div>ヘッダーをつける④
CSSのpositionとtop/right/bottom/leftを駆使して表示調整
div.suffix_words {
position: fixed; top: 0; right: 7vmin;
height: 7vmin;
}
div.suffix_inner {
position: relative; top: 3vmin; right: 1vmin;
font-size: 2vmin;
}次ページに続く
ヘッダーをつける⑤
続き
div.suffix_image {
position: fixed; top: 0; right: 0;
width: 7vmin; height: 7vmin;
background-image: url(icon.png);
background-size: 7vmin 7vmin;
}icon.pngは縦横同じサイズの透過色のある画像
背景画像を設定する
背景画像自体は簡単に設定できるが、文字色の調整も必要
## 背景画像を設定する{
.cat_feeling_terrible
data-background=url(cat_feeling_terrible.jpg)
data-background-size=cover}見出しに属性をセットして、CSSファイルに追記
h1.cat_feeling_terrible, h2.cat_feeling_terrible, .cat_feeling_terrible {
color: white; text-shadow: 0 0 3px black;
}
section.cat_feeling_terrible pre {
background-color: white; color: black; text-shadow: none;
}やらない方が無難。バージョン0.10でdata-background-sizeを読まなくなった。なお、sectionタグの属性で画像ファイル名を指定するためか、画像ファイルの埋め込みはできなかった。
見出し
- Markdown記法通りに入力できる
- H1タグ（i.e. #）とH2タグ（i.e. ##）ごとにスライドをつくる
- H1タグに続くH2タグが紐付けされ、平面的な構造を持つ（いますぐoボタンを押せ！）
- H3（i.e. ###）とH4（i.e. ####）も使えるが、別のスライドにはならない
- 見出しの日本語以外の英数字の部分がかぶると（そのままでは）画面遷移が正常に行なえなくなる
見出しがかぶった場合の対処法
- #idの付与で回避可能
## headline {#id_for_headline}- Pandocのオプションを変更する（効果未確認）
pandoc_args: [
'--from', 'markdown+autolink_bare_uris+tex_math_single_backslash-implicit_figures'
]太字、斜体、取り消し線
- Markdown 記法の通り、太字（**で挟む）、イタリック（*で挟む）、取り消し線（~~で挟む）が使える。
*Annals of Eugenics*は、**1954年**に*Annals of Human Genetics*に
名称変更し~~ている~~た。Annals of Eugenicsは、1954年にAnnals of
Human Geneticsに 名称変更しているた。
箇条書き
- 順序なしと順序付きがある
- 入れ籠構造可能（細目はスペースを順序なしで2つ、順序ありで3つ入れる）
順序なし
- タイプライター時代から使われている表記方法だとか
- Sir Ronald Aylmer Fisher
- Jerzy Neyman
- Edgar Shannon Anderson- Sir Ronald Aylmer Fisher
- Jerzy Neyman
- Edgar Shannon Anderson
順序付き
- 数字は何でもよい
1. Sir Francis Galton
1. Karl Pearson
1. Egon Sharpe Pearson
1. Sir Francis Galton- Sir Francis Galton
- Karl Pearson
- Egon Sharpe Pearson
- Sir Francis Galton
TeX形式の数式の入力
- R Markdown文書とまったく同様
- 実際はPandocがMathJax/MathML/WebTeX/KaTeXのどれかを使うように処理している
インライン
$x^2$と$で挟むとインラインでx2と表示できる。 $x=`r sum(1:10)`$とインラインコードを数式内に挿入すると、x=55と計算され表示される。
ブロック
$$
y = C_1 e^{-\frac{k}{2} t}
\cos{ \Bigg ( t \sqrt{ \omega^2 - \frac{k^2}{4}} \Bigg )}
+
C_2 e^{-\frac{k}{2}t}
\sin{ \Bigg ( t \sqrt{ \omega^2 - \frac{k^2}{4}} \Bigg ) }
$$とブロック要素で書くと、
y=C1e−k2tcos(t√ω2−k24)+C2e−k2tsin(t√ω2−k24)
と表示できる。
改行と=などの位置
$$\begin{align}
y &= \beta_0 + \beta_1 x_1 + \beta_2 x_2 + \cdots + \epsilon \\
y - \beta_1 x_1 &= \beta_0 + \beta_2 x_2 + \cdots + \epsilon
\end{align}$$y=β0+β1x1+β2x2+⋯+ϵy−β1x1=β0+β2x2+⋯+ϵ
alignを使って&で位置あわせができる。
&は=以外の前にもつけられるので、式の途中で折り返しもできる。
引用（blockquote）
- 行の頭に > をつけるだけ
- プログラムのコードなどは ` と ```` を使う方がフォントなどの表記があうので望ましい
> The “intelligence” demanded of the workman, as well as of the director
> of an industrial process, is little else than a degree of facility
> in the apprehension of and adaptation to a quantitatively determined
> causal sequence. – Thorstein Bunde VeblenThe “intelligence” demanded of the workman, as well as of the director of an industrial process, is little else than a degree of facility in the apprehension of and adaptation to a quantitatively determined causal sequence. – Thorstein Bunde Veblen
コードの実行と表示
他のR Markdown文書と同様に、インラインの場合は`r 1+2+3`のように、コードチャンクの場合は
```{r}
1+2+3
```
1+2+3
```
とRのコードを実行し、オプションに応じて結果を表示する。RcppやPythonやJuliaのコードにも対応。
表示オプション
以下を覚えておくと、だいたい困らない。
| コード・ブロックの開始 | 実行 | コード | 出力 | 警告 | メッセージ | ^## |
|---|---|---|---|---|---|---|
| ```{r} | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| ```{r results=“asis” } | ✓ | ✓ | ✓ | ✓ | ✓ | |
| ```{r comment=“” } | ✓ | ✓ | ✓ | ✓ | ✓ | |
| ```{r include=FALSE} | ✓ | ✓ | ✓ | ✓ | ✓ | |
| ```{r eval=FALSE} | ✓ | |||||
| ```{r echo=FALSE, include=FALSE, warning=FALSE, message=FALSE} | ✓ | ✓ |
R Markdown記法のコード表示問題①
- ```の中に```を入れるとコードチャンクが終了してしまうので、R Markdownの説明をR Markdownで上手く書けない
- なぜかpreタグの中の```はコードチャンクとして解釈されないので、コードチャンクだけならばpreタグで回避できる
- しかし`r 1 + 2`や|や$は、preタグの中でも実行/解釈される。だからと言って\でエスケープすると、エスケープ文字ごと表示してしまう
- preタグと同じプロパティを設定したdivタグを用意し、HTMLのエスケープをそれぞれして、見た目を誤魔化そう
<div class="psudopre">`r 1+2+3`</div>R Markdown記法のコード表示問題②
- インライン要素で、冒頭が”r “と”R “のコードは必ず実行する
- e.g. `
R CMD INSTALL`と書くと、CMD INSTALLを実行しようとしてエラーになる
- e.g. `
- `をつけなければ実行されないが、コード表記用のフォントにならない（e.g. R CMD INSTALL）
- Rの文字列表示を上手く使う
- e.g. ``r "R CMD INSTALL"`` →
R CMD INSTALL - 外側の`でコード表記タグにして、内側の`でRのコードとして実行
- e.g. ``r "R CMD INSTALL"`` →
- もしくはpreタグと同じプロパティを設定したspanタグを用意
表の作成
R Markdownとしては普通だが、サイズや配色は調整したくなる。
べた書き
| x | y | z |
| :------: | :---: | :---: |
| `r x[1]` | `r y[1]` | `r z[1]` |
| `r x[2]` | `r y[2]` | `r z[2]` |
| `r x[3]` | `r y[3]` | `r z[3]` |
| :------: | :---: | :---: |
| `r x[1]` | `r y[1]` | `r z[1]` |
| `r x[2]` | `r y[2]` | `r z[2]` |
| `r x[3]` | `r y[3]` | `r z[3]` |
以上のようなコードでパイプ表をつくることもできる。:---が左寄せ、---:が右寄せ、:---:が中央寄せ。
| x | y | z |
|---|---|---|
| 0.97958 | -0.02136 | 0.74908 |
| 0.53461 | -1.43299 | 0.97419 |
| 0.74355 | 2.12452 | 0.48554 |
配色の変更
- デフォルトだと背景と混じるので、CSSで色を指定している
- 奇数行と偶数行で背景色を変えたい場合は、tr:nth-child(odd) tdとtr:nth-child(even) tdにそれぞれ別の色を設定
tr.header {
color: white;
background-color: black;
}
tr {
color: black;
background-color: #F0F0F0;
}表の作成 データフレームを表示
データフレームや行列を表示すると見栄えが悪い。 code chunkのオプションにresult=“asis”かcomment=““が無いと行頭に##をつけてくる。
y x z
1 -0.021358 0.97958 0.7490828
2 -1.432986 0.53461 0.9741856
3 2.124517 0.74355 0.4855368
4 0.991986 0.42325 0.4396802
5 0.463185 0.64565 0.5638545
6 2.277489 0.48074 0.0810543
7 0.314642 0.05991 0.4409182
8 2.218763 0.46857 0.0054586表の作成 knitr::kableで表示
データフレームをパイプ表に変換してくれる。
| y | x | z |
|---|---|---|
| -0.02136 | 0.97958 | 0.74908 |
| -1.43299 | 0.53461 | 0.97419 |
| 2.12452 | 0.74355 | 0.48554 |
| 0.99199 | 0.42325 | 0.43968 |
表の作成 matrixを表示
knitr::kable(matrix(c(1, 23, 19, 7), 2, 2, dimnames=list(c("A", "B"), c("a", "b"))),
align=c("r", "r"), caption="2×2表")| a | b | |
|---|---|---|
| A | 1 | 19 |
| B | 23 | 7 |
表の作成 DT::datatableで表示
なぜかバージョン0.9では動かないので、コードだけ示す。
高機能だが狭い。細かい調整は困難。
推定結果の表示
- 一般化線形モデル(GLM)で間に合う頻度主義者は楽ができる
- stargazerパッケージのhtml出力が使える
- parameters → insightパッケージはhtml/markdownを出力できる
- 表を描いてもそんなんでもない
stargazerパッケージ
- code
chunkのオプションに
results="asis", warning=FALSE, message=FALSEを忘れると困った表示になる
r_lm <- lm(y ~ x + z, data=df01)
library(stargazer, quietly = TRUE)
stargazer(r_lm, type="html", out.header=FALSE, suppress.errors=TRUE)- 情報量が多いので、CSSで表示サイズと配色を設定したほうが無難
stargazerパッケージ用のCSS
- 次のスライドのstargazerパッケージの出力の表示はR Markdownで以下のように属性をつけて
## stargazerの表示{.stargazer}- CSSでフォントサイズと配色を調整している
section.stargazer tr, section.stargazer td {
color: black;
background-color: white;
border: none;
font-size: 75%;
}stargazerの表示
| Dependent variable: | |
| y | |
| x | 1.980*** |
| (0.177) | |
| z | -3.414*** |
| (0.185) | |
| Constant | 1.119*** |
| (0.138) | |
| Observations | 100 |
| R2 | 0.826 |
| Adjusted R2 | 0.822 |
| Residual Std. Error | 0.529 (df = 97) |
| F Statistic | 229.790*** (df = 2; 97) |
| Note: | p<0.1; p<0.05; p<0.01 |
Hlavac, Marek (2022). stargazer: Well-Formatted Regression and Summary Statistics Tables. R package version 5.2.3. https://CRAN.R-project.org/package=stargazer
stargazerパッケージの参照の表示
参照を書いてくれと要請されるので、以下のようにHTMLで書いている。
<div style="margin-top:12px; font-size: 50%;">
Hlavac, Marek (2022). stargazer: Well-Formatted Regression and Summary Statistics Tables.
R package version 5.2.3. https://CRAN.R-project.org/package=stargazer
</div>GLMで済む場合はstargazerで作業時間が一気に減るはずなので、有難くリファレンスかどこかに書いておこう。
parametersパッケージ
プレゼンもしくは最近需要が高くなった信頼区間を考えるとこっちの方がよいかも
| Parameter | Coefficient | SE | CI | CI_low | CI_high | t | df_error | p |
|---|---|---|---|---|---|---|---|---|
| (Intercept) | 1.12 | 0.14 | 0.95 | 0.85 | 1.39 | 8.12 | 97 | 1.47e-12 |
| x | 1.98 | 0.18 | 0.95 | 1.63 | 2.33 | 11.21 | 97 | 3.29e-19 |
| z | -3.41 | 0.18 | 0.95 | -3.78 | -3.05 | -18.46 | 97 | 1.67e-33 |
交差検証（LOOCV）の表示①
自動で表が作られない場合、例えばLOOCVは表をつくる。
library(boot)
frml <- c("y ~ x + z", "y ~ x", "y ~ z")
delta <- matrix(NA, length(frml), 2, dimnames=list(
# TeXの\\はRの文字列の中では\\\\と書かないとエスケープ文字
c("$y = \\beta_0 + \\beta_1 x + \\beta_2 z + \\epsilon$", "$y = \\beta_0 + \\beta_1 x + \\epsilon$", "$y = \\beta_0 + \\beta_2 z + \\epsilon$"),
c("raw", "adjusted")
))
for(i in 1:length(frml)){
delta[i, ] <- cv.glm(df01, glm(formula(frml[i]), data=df01))$delta
}
knitr::kable(delta)| raw | adjusted | |
|---|---|---|
| y=β0+β1x+β2z+ϵ | 0.28694 | 0.28687 |
| y=β0+β1x+ϵ | 1.27485 | 1.27460 |
| y=β0+β2z+ϵ | 0.64750 | 0.64738 |
交差検証（LOOCV）の表示②
パイプ表の中にTeXの数式とインラインコードを入れて表にすることもできる。
| モデル | `r colnames(delta)[1]` | `r colnames(delta)[2]` |
| :--- | ---: | ---: |
| $y = \beta_0 + \beta_1 x + \beta_2 z + \epsilon$ | `r delta[1,1]` | `r delta[1,2]` |
| $y = \beta_0 + \beta_1 x + \epsilon$ | `r delta[2,1]` | `r delta[2,2]` |
| $y = \beta_0 + \beta_2 z + \epsilon$ | `r delta[3,1]` | `r delta[3,2]` |
| :--- | ---: | ---: |
| $y = \beta_0 + \beta_1 x + \beta_2 z + \epsilon$ | `r delta[1,1]` | `r delta[1,2]` |
| $y = \beta_0 + \beta_1 x + \epsilon$ | `r delta[2,1]` | `r delta[2,2]` |
| $y = \beta_0 + \beta_2 z + \epsilon$ | `r delta[3,1]` | `r delta[3,2]` |
| モデル | raw | adjusted |
|---|---|---|
| y=β0+β1x+β2z+ϵ | 0.28694 | 0.28687 |
| y=β0+β1x+ϵ | 1.27485 | 1.2746 |
| y=β0+β2z+ϵ | 0.6475 | 0.64738 |
プロットの表示
- code chunkの中にplot命令を入れる
- code chunkのオプションはfig.align=“center”, fig.width=9, fig.heigth=4のようにつける
- Rのコードでも
par(mar=c(4, 4, 0.1, 0.1))などと表示調整
図（shape）の表示
- 図を取り込む
- 図を描くコードを書く
- Graphviz
- Mermaid.js
図（shape）を取り込む
- 作画ツールでつくったSVGファイルなどを
という風に貼れる - サイズ指定したい場合、表示位置を調整したい場合などはhtmlタグを用いる
<div style="text-align:center;">
<img src="example.svg" width="40%"
style="border: none; box-shadow: none;" alt="It's a shape!">
</div>
図（shape）を描く
- 便利フレームワークを使わずJavaScriptなどで低水準関数で図を描くのは手間暇過ぎる
- 四角3・文字5・矢印4の図で（借りてきたコードを除いて）50行弱
- DiagrammeRパッケージでGraphvizやMermaid.jsを使える
- ただしMermaid.js（verison 0.3.0）は描画されたりされなかったり、描画されても全体のpreタグのスタイルが変化したり挙動不審
Graphvizを使う
Mermaid.jsを何とか使う
revealjsとMermaid.jsは相性が悪そうなので隔離する
- DiagrammeR::mermaidで生成したhtmlwidgetオブジェクトの設定値を上書きして、htmlwidgets::saveWidgetで保存する
- 保存したhtmlファイルにjavascriptを追加する
- YAMLフロントマターでself_contained: falseを指定する
- マークダウン部分にに保存ファイル名を指定したiframeタグを埋め込む
脚注
脚注番号識別子として [^文字列]
を文に挟み、本文中のどこかに [^文字列]: 説明 を書くと、文章の末尾に脚注が付記される。
例えば、
十分原理と弱い条件付け原理を受け入れる者は，尤度原理[^1]を受け入れることになる．
[^1]: パラーメーターθの推論において，データxが観察されたあと･･･と書けばよい。
ハイパーリンクをつけたい
Markdown記法なので
[The R Project for Statistical Computing](https://www.r-project.org/)文字入力で困ったときは
対処法3つ
- HTMLのタグを書く
- HTMLの文字コード入力（数値文字参照）を使う
- 文字の前に\を書く
HTMLのタグとタグの間は、HTMLとして解釈
- 「強敵」と入力するには、「<ruby>強敵<rp>（</rp><rt>トモ</rt><rp>）</rp></ruby>」
- 「
<u>魚心</u>あれば<u>水心</u>」と書けば「魚心あれば水心」とアンダーバーも出せる
特殊文字の入力もHTMLと同様に行なえる
- 「✓ ♨ ♡ ⚑ ① ② ③」と入力するには、「✓ ♨ ♡ ⚑ ① ② ③」
- [ ]を[ \と入力するなどエスケープにも使える
エスケープはC言語の文字列などと同様
- 文字の前に\を書くとエスケープできて、特殊文字もそのまま表示できる。
- `が、\を書いてもエスケープできないケースがあったりするので、`という風に書くことも覚えておくほうが無難。
配布資料
- 【推奨】そのままアップロードして、ケータイなどで見ろと言い放つ
- YAMLフロントマターのrevealjs_presentation関連の記述を消し去り、html_documentの設定をしてhtmlを生成
- アップロードして、ケータイなどで見ろと言い放つ
- 【非推奨】印刷して配る
- revealjsでGoogle
Chromeを通してpdf出力をする
- YAMLフロントマターが
self_contained: falseになっていないと動かない
- YAMLフロントマターが
おわりに
- スケーラブルなので、モバイル対応
- ioslides_presentationより直観的
- 見出しと図表があればプレゼンできる人向けで、官公庁パワポを作りたい人は避けるべし
- 頻繁に定型レポートを書く人にはたぶん便利で、render関数で生成できるので自動化もできる
- CSS, htmlのdivやspanタグをいじらないといけない所が多い
1
R Markdownで作るベタなプレゼン資料
zombie, uncorrelated
2025/06/03
