R Markdownとは何か？

• テキスト形式で見出しやリンクなどが簡単に記述できるSNSなどで人気のMarkdown記法
• Markdown記法のファイル（.md）をhtml/PDF/ppt/odtに変化する文書作成ツールのPandoc
• Pandocの設定値の管理やプログラムのコードの実行と結果表示などのための文法を追加したのがR Markdown
• 箇条書きやファイルの埋め込みなどMarkdown記法で簡単なことは簡単にできる
• R（or Rcpp/Python/Julia）で簡単なことは簡単にできる

YAMLフロントマター

YAMLフロントマターで色々指定できる。もちろんrevealjs::revealjs_presentationの指定は必須。

output:
    revealjs::revealjs_presentation:
        theme: moon
        highlight: tango
        center: true
        css: styles.css

CSSファイル（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"]

searchはmやoなどのアルファベットが入ると検索できないので、後述するオーバービューでCTRL+Fで検索した方が確実。

CSSファイルの作成

• YAMLフロントマターでcssファイルを指定
• cssの上書き（e.g. h1.title）
• 新規クラスの作成（e.g. section.smaller）
• hタグに属性をつける（e.g. # 見出し{.smaller}）

タイトル文字を小さめにする

• 例としてタイトル文字を小さめにする
• スケーラブルな環境なので、サイズ指定の単位は%（親要素の値との比）, 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>タグに属性を追加
• 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)) # 置換文字列
)

ヘッダーをつける①

影が薄くて名前を覚えてもらえないあなたに！

• 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は縦横同じサイズの透過色のある画像

見出しがかぶった場合の対処法

• #idの付与で回避可能

## headline {#id_for_headline}

• Pandocのオプションを変更する（効果未確認）

pandoc_args: [
  '--from', 'markdown+autolink_bare_uris+tex_math_single_backslash-implicit_figures'
]

順序なし

• タイプライター時代から使われている表記方法だとか

- 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

1. Sir Francis Galton
2. Karl Pearson
   1. Egon Sharpe Pearson
3. Sir Francis Galton

インライン

$x^2$と$で挟むとインラインで\(x^2\)と表示できる。 $x=`r sum(1:10)`$とインラインコードを数式内に挿入すると、\(x=55\)と計算され表示される。

表示オプション

以下を覚えておくと、だいたい困らない。

べた書き

以上のようなコードでパイプ表をつくることもできる。:---が左寄せ、---:が右寄せ、:---:が中央寄せ。

配色の変更

• デフォルトだと背景と混じるので、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=““が無いと行頭に##をつけてくる。

head(df01, 8)

         y        x       z
1  0.63324 0.215204 0.13667
2 -0.59059 0.860133 0.97310
3  1.53518 0.640434 0.22503
4  0.75884 0.046674 0.23908
5  0.64060 0.692636 0.55664
6 -1.89472 0.189462 0.97329
7  0.52616 0.707381 0.47604
8  0.12010 0.808363 0.70775

表の作成 knitr::kableで表示

データフレームをパイプ表に変換してくれる。

knitr::kable(head(df01, 4))

表の作成 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表")

stargazerパッケージ用のCSS

• 次のスライドのstargazerパッケージの出力の表示はR Markdownで以下のように属性をつけて

## stargazerの表示{.stargazer}

• CSSでフォントサイズと配色を調整している

section.stargazer tr, section.stargazer td {
    color: black;
    background-color: white;
    border: none;
    font-size: 75%;
}

図（shape）を取り込む

• 作画ツールでつくったSVGファイルなどを![It's a shape!](example.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を使う

DiagrammeR::grViz("example.gv", width=1024, height=384)

Mermaid.jsを何とか使う

revealjsとMermaid.jsは相性が悪そうなので隔離する

1. DiagrammeR::mermaidで生成したhtmlwidgetオブジェクトの設定値を上書きして、htmlwidgets::saveWidgetで保存する
2. 保存したhtmlファイルにjavascriptを追加する
3. YAMLフロントマターでself_contained: falseを指定する
4. マークダウン部分にに保存ファイル名を指定したiframeタグを埋め込む

詳細はDiagrammeR/Mermaid.jsで描いた図をreveal.jsに何とか埋め込む方法を参照

特殊文字の入力もHTMLと同様に行なえる

• 「✓ ♨ ♡ ⚑ ① ② ③」と入力するには、「✓ ♨ ♡ ⚑ ① ② ③」
• [ ]を[ \と入力するなどエスケープにも使える

エスケープはC言語の文字列などと同様

• 文字の前に\を書くとエスケープできて、特殊文字もそのまま表示できる。
• `が、\を書いてもエスケープできないケースがあったりするので、`という風に書くことも覚えておくほうが無難。