revealjs with RStudio

馬場美彦

21 February 2022

RevealJS

  • Markdown で作ることのできる HTML スライド
  • Rmd からは、すべての機能が使えるわけではないようです（工夫すれば可能）。

このスライドのソース

http://124.219.182.167/R/revealjs.Rmd

類似（ライバル）

  • ioslides: demo

  • Slidy

  • RPres

  • Slidify: demo

  • xaringan: demo by Yihui Xie

  • revealjs: 公式 demo

    • reveal.js の遷移は、上下と左右がある
    • plugin で落書きなど他にないものがある

revealjs website

Rmd の書き方

---
title: タイトル
output: revealjs::revealjs_presentation
---
# 見出し1

ここで下に行くと

## 見出し 1.1

ここに来る。さらに下に行くと

## 見出し 1.2

ここに来る。次は右。

# 見出し2

ここに来る。

印刷用

ファイル名?print-pdf にアクセスとすると、縦長のページになる。

http://124.219.182.167/R/revealjs.html?print-pdf

(rpubs ではうまくいかないようです)

追加機能 Plugins

ズームイン

  • Alt キーを押しながら、クリックします。
  • Linux の場合、Ctrl キーとクリック
  • タッチデバイスでは使用できません。

落書きと黒板

  • 左下の鉛筆マークをクリックしてみてください。
  • c を押してみください（タッチデバイスでは使用できません）。
  • b を押してみてください（タッチデバイスでは使用できません）。

検索

  • Ctrl + Shift + F を押します。
  • 例として、c + Enter してみてください。
  • タッチデバイスでは使用できません。

スピーカーノート

  • s を押すと、別ウィンドウが開きます。
  • ポップアップブロックしている場合、何回か試してみてください。
  • タッチデバイスでは使用できません。
  <aside class="notes">
    Shhh, these are your private notes
  </aside>

RStudio + revealjs

インストール

  • CRAN は、revealjs 3.2.0
  • github は、revealjs 4.1.2 (こちらの方が良い)

Console で、以下のようにタイプします。

install.packages("devtools")
library(devtools)
install_github("rstudio/revealjs")

Rmd ファイルを作成

Rmd を作成し、最初の４〜５行目を書き換えます。

---
title: タイトル
author: 馬場美彦
date: 日付
output: 
  revealjs::revealjs_presentation
---

注: これは R のソースではありません。- です。

テーマ

色とフォントを変えることができます。

“default”, “simple”, “dark”, “black”, “sky”, “beige”, “serif”, “solarized”, “blood”, “moon”, “night”, “league”, “white”

---
title: タイトル
author: 馬場美彦
date: 日付
output: 
  revealjs::revealjs_presentation:
    theme: blood # ここに、上記のうち一つを設定する
---

knit

Knit ボタンを押します。

以上

追加機能

---
title: タイトル
author: 馬場美彦
date: 日付
output: 
  revealjs::revealjs_presentation:
    self_contained: false
    reveal_plugins: ["chalkboard", "search", "menu", "zoom"]
    reveal_options:
      slideNumber: 'c/t'
      chalkboard:
        toggleNotesButton: false
---

数式

\(F(x) = \int^a_b \frac{1}{3}x^3\)

ソース

$F(x) = \int^a_b \frac{1}{3}x^3$

Rmd の標準機能（\(\LaTeX\) 形式）が使えます。

レイアウト

２段組

スライドを、右のように書きます。

注：ここではさらに背景色を指定しています。

# レイアウト

<div style="display:inline-block;width:30%;vertical-align:top;">

左側

</div><div style="display: inline-block;width:68%;vertical-align:top;">

右側

</div>

参考: https://blog.atusy.net/2019/08/11/revealjs-2col-inline-block/

効果

  • スペースキーまたは下向きカーソルを押し、進んでいってください。
  • <p> （段落全体）と <span> （特定の単語のみ）で使えるようです。

参考: https://qiita.com/tbpgr/items/765477dfc5eb1debb8fc

Grow/Shrink

大きくする

小さくする

ソース

<p class="fragment grow">大きくする</p>
<p class="fragment shrink">小さくする</p>

Roll-in

回転しながら表示

ソース

<p class="fragment roll-in">回転しながら表示</p>

ブラウザによっては非対応？

fade-out

fade-out フェードアウト

ソース

<p class="fragment fade-out">フェードアウト</p>

only once

一度だけ表示

ソース

<p class="fragment current-visible">visible only once 一度だけ表示</p>

hilight

一度だけ青くする

赤くハイライト

緑にハイライト

青にハイライト

ソース

<p class="fragment highlight-current-blue">一度だけ青くする</p>
<p class="fragment highlight-red">赤くハイライト</p>
<p class="fragment highlight-green">緑にハイライト</p>
<p class="fragment highlight-blue">青にハイライト</p>

fade in/out

フェードイン・フェードアウト

ソース

<p class="fragment fade-in">
    <span class="fragment fade-out">フェードイン・フェードアウト</span>
</p>