出力するプレゼンテーションのフォーマットを指定する
format: pptx
format: revealjs
format: beamer40 Quarto：プレゼンテーション
40.1 プレゼンテーションを作成する
Quartoでは、文書だけでなく、プレゼンテーションを作成することもできます。Quartoで作成できるプレゼンテーションは、Powerpoint、Reveal.js（HTMLのプレゼンテーションを作成するツール）、Beamer（LaTeXを利用し、PDFのプレゼンテーションを作成するツール）の3種類です。それぞれ前章で説明したformat: docx、format: html、format: pdfとほぼ対応していると考えてよいでしょう。
40.1.1 プレゼンテーションのフォーマットを指定する
YAMLにformatを指定することで、上記の3つ（Powerpoint、Reveal.js、Beamer）のうちから出力するフォーマットを選択することができます。
上記のformat以下には、それぞれformat: docx、format: html、format: pdfで出力する場合と同様のYAMLを指定できるようになっていますが、プレゼンテーション特有のYAMLも（特にReveal.jsにはたくさん）準備されています。以下では、主にReveal.jsのプレゼンテーションを作成する手順を説明します。Powerpoint、Beamerについても、以下に説明するスライドの構造についてはほぼReveal.jsと同じように作成することができます。
40.2 スライドの中身を作成する
スライドを作成するときのルールはおおむね以下のようになります。
- 表紙のスライドはYAMLの
titleとauthorから作成されます。 - header1（
# header1）を設定すると、タイトルのスライドを別途設定することもできます。 - header2（
## header2）を設定すると、新しいスライドが作成されます。header2以下にそのスライドの内容を記載します。 - header2を用いずに新しいスライドを作成する場合には、ハイフン3つ（
---）をスライドの区切りに用いることができます。 - chunkは実行されますが、コードは表示されません（デフォルトでは
echo=FALSEになっています）。
上記のルールはReveal.js、Powerpoint、Beamerのいずれでも適用されます。以下にQuartoのGuideに記載されているMarkdownの例と、出力されるプレゼンテーション（Reveal.js）を示します。
Reveal.jsのサンプル
---
title: "Habits"
author: John Doe
format:
revealjs:
controls: true # 左右の矢印を表示する
---
## Getting up
- Turn off alarm
- Get out of bed
## Breakfast
- Eat eggs
- Drink coffee
---
### Lunch
- Eat sandwich
Reveal.jsの埋め込み
上記のようにReveal.jsをQuartoに埋め込む場合には、37章でGoogle mapの埋め込みの際に説明したiframeを用います。
reveal.jsを埋め込む
<iframe class="slide-deck" src="./sample_revealjs/sample.html" width="100%" height="250"></iframe>このとき、Reveal.jsを作成する際には、YAMLで以下のようにスライドの高さを指定するとよいでしょう。
reveal.jsの高さの設定
---
format:
revealjs:
height: 250
---スライドの高さとiframeで指定する高さを揃え、widthには100%など、%表記で指定すると画面の幅に合わせて横幅を調整してくれます。
40.2.1 箇条書きをひとつづつ表示する
プレゼンテーションでは、箇条書きにした項目をひとつづつ順番に表示したい場合があります。箇条書きをひとつづつ表示する場合、:::{.incremental}と:::で箇条書きを囲います。
箇条書きをひとつづつ表示
:::{.incremental}
- Turn off alarm
- Get out of bed
:::40.2.2 箇条書き以外をひとつづつ表示する
また、Reveal.jsでは箇条書きではない項目もひとつづつ表示することができます。この場合には{.incremental}ではなく、コンマをスペースで区切って3つ連ねたもの（. . .）を用います。
箇条書きをひとつづつ表示
Turn off alarm
. . .
Get out of bed40.2.3 複数の列に表示する
スライドに複数列の項目を記載したい場合には、{.columns}と{.column}をネスト（入れ子）にして用います。また、各列の幅は{.column width=40%}と指定することで調整することもできます。
## Getting up
:::{.columns}
:::{.column}
Turn off alarm
:::
:::{.column}
Get out of bed
:::
:::40.2.4 図の表示
図の表示は、37章で説明した通り、で表示させることができます。上の項目で説明した通り、図は{.columns}を用いれば横に並べることができます。また、別途画像を重ねて表示したい場合には、以下のように{.r-stack}を用います。
図を重ねて表示する
:::{.r-stack}
{width=300px height=200px}
{.fragment width=200px height=150px}
{.fragment width=100px height=75px}
:::また、図の位置をスライドの上や左からの距離を数値で指定し、表示する位置やサイズを調整することもできます。図の位置、サイズを設定する場合には、の後ろに{.absolute}で上からの距離（top）、左からの距離（left）、図の幅（width）、図の高さ（height）を以下のように指定します。
図の位置を決めて表示する
{.absolute top=0px left=0px width=200px height=150px}
{.absolute top=10px left=250px width=200px height=150px}
{.absolute top=20px left=500px width=200px height=150px}40.2.5 テーマ（Theme）
Quartoのテーマ（theme、Bootswitchに従います）とは別に、Reveal.jsには専用のThemeが12種準備されています。これらのうち、Quartoでは11種を設定可能と記載されていますが、実際にはdraculaのような記載のないテーマも設定可能です。Themeを設定する場合、YAMLで以下のようにthemeを指定します。
reveal.jsのテーマの設定
format:
revealjs:
theme: draculaテーマはReveal.jsのみ適用できるYAMLです。Powerpointの場合はWordを出力する場合と同様にテンプレートを準備してプレゼンテーションのデザインを指定します。QuartoではBeamerを凝ったデザインで出力することは難しいようです。
40.2.7 項目の多いスライドの表示：smallerとscrollable
1枚のスライドにたくさんの要素を載せたいときの対応方法には2つあります。1つは要素を小さく表示する方法です。要素を小さく表示したい場合、YAMLにsmaller: trueを設定します。ただし、小さくしても表示できる要素の数には限りがあります。
smallerで要素を小さく表示する
format:
revealjs:
smaller: true別の方法としては、画面をスクロールできるようにする方法があります。画面をスクロールできるようにしたい場合、YAMLにscrollable: trueを設定します。上記のsmallerもscrollableと同時に設定することが出来ます。
ただし、smallerもscrollableも、わかりやすいプレゼンテーションのデザインとは言い難いので、極力頼らないようスライドをデザインしたほうがよいでしょう。
scrollableでスライドをスクロールする
format:
revealjs:
scrollable: true40.2.8 スライドを縦に配置する
Reveal.jsでは、スライドを横だけでなく、縦に並べることもできます。縦に並べる場合、YAMLにnavigation-mode: verticalを設定します。navigation-mode: verticalを設定すると、表紙に当たるheader1（# header1）が横に並び、その下にheader2（## header2）として記載したスライドが縦に並ぶことになります。
スライドの縦への配置
---
format:
revealjs:
navigation-mode: vertical
---
# Getting up
## Turn off alarm
# Breakfast
## Eat eggs
# Lunch
## Eat sandwich
# Dinner
## Eat spaghetti
# Going to sleep
## Get in bed40.2.9 スライドを表示しない・隠しスライド
特定のスライドを全く表示させない場合には、header2の後ろに{visibility="hidden"}を指定します。同様に{visibility="uncounted"}を指定すると、プレゼンテーションとしては表示しない、隠しスライドとしてスライドを作成することができます。
スライドの表示の有無
## Breakfast
- Eat eggs
## Lunch {visibility="hidden"}
- Eat sandwich
## Dinner {visibility="uncounted"}
- Eat spaghetti40.2.10 スライドに背景を設置する
Reveal.jsでは、スライドの背景を設定することもできます。背景の設定には、YAMLで設定するタイトルスライドの背景と、個々のスライドに背景を設定する方法の2つがあります。
40.2.10.1 タイトルスライドの背景
タイトルスライドの背景はYAMLで設定します。YAMLにtitle-slide-attributesを設定し、title-slide-attributes以下の項目としてdata-background-image、data-backgroud-size、data-background-opacityを指定します。
data-background-imageには画像ファイルまでのパスを記載します。data-backgroud-sizeには、containやcoverなどを指定します（CSSの画像の設定に従うようです）。data-background-opacityには画像の透明度を指定します。
タイトルスライドの背景
title: budda
title-slide-attributes:
data-background-image: "../image/budda.jpg"
data-background-size: cover
data-background-opacity: "0.8"40.2.10.2 スライドの背景色
各スライドにはそれぞれ背景色を指定することができます。背景色を指定する場合、header2の後ろに{background-color}を指定します。また、{background-gradient}を用いると、背景色にグラデーションを指定することもできます。
色の指定は色の名前、または6桁のカラーコード（#000000など）のいずれかで指定します。色の見本はこちらのサイトなどを参考にするとよいでしょう。
スライドの背景色を設定する
## Getting up {background-color="lightblue"}
- Turn off alarmスライドの背景色（グラジエント）
## Breakfast {background-gradient="linear-gradient(to bottom, black, mistyrose)"}
- Eat eggs40.2.11 スライドの切り替え
スライドの切り替え時、特に設定をしない場合には瞬時に次のスライドへと移行しますが、この切り替えにアニメーションの表現を加えることもできます。スライドの切り替えを設定する場合には、header2の後ろに{transition}を加えます。このtransitionには、fade、slide、convex、concave、zoomの5種類を設定することができます。また、transition-speedをfast、slowにそれぞれ設定すると切り替えのスピードを調整することもできます。
同様に、YAMLにtransition: slideやtransition-speed: slowのように設定すると、プレゼンテーション全体でのスライドの切り替え表示の方法を指定することもできます。
また、スライドが表示される時とスライドから離れる時の切り替えアニメーションを別のものにすることもできます。スライドの表示・離脱時のアニメーションはそれぞれ{transition="fade-in slide-out"}といった形で、-inと-outをつけて設定します。
スライドの切り替えアニメーション
## Getting up (fade) {transition="fade" transition-speed="slow"}
- Turn off alarm
## Breakfast (slide) {transition="slide" transition-speed="slow"}
- Eat eggs
## Lunch (convex) {transition="convex" transition-speed="slow"}
- Eat sandwich
## Dinner (concave) {transition="concave" transition-speed="slow"}
- Eat spaghetti
## Going to sleep (zoom) {transition="zoom" transition-speed="slow"}
- Get in bed40.2.12 スライドの要素のアニメーション
スライド内の要素それぞれにアニメーションを設定することもできます。要素のアニメーションには、{.fragment}を用います。{.fragment}で指定するとスライド切り替え時には表示されず、次のタイミングで瞬時に表示される形となります。
また、アニメーションの種類は{.fragment}内に、.fade-inのような形で指定します。設定可能な項目については、QuartoのGuideを参照してください。
スライドの要素をアニメーションにする
::: {.fragment}
- Turn off alarm
:::
::: {.fragment .fade-out}
- Eat eggs
:::
::: {.fragment .highlight-red}
- Eat sandwich
:::
::: {.fragment .fade-in-then-out}
- Eat spaghetti
:::
::: {.fragment .fade-up}
- Get in bed
:::40.2.13 スライド内のアニメーション
40.2.13.1 auto-animate
.fragmentとは別に、表示させる文字列や図をスムーズにアニメーションさせることもできます。このアニメーションの設定には{auto-animation}を用います。header2、つまりスライドごとに{auto-animation=true}を指定し、指定したスライドの両方に同じような文字列を表示させると、スムーズにアニメーションさせることができます。
auto-animateを設定する
## {auto-animate=true}
::: {style="color: blue;"}
Turn off alarm
:::
## {auto-animate=true}
::: {style="font-size: 3em; color: red;"}
**Turn off alarm**
:::40.2.13.2 auto-animate：コードをアニメーション表示する
同様に、{auto-animation}を用いると以下のようにコードの追記をアニメーションで表示させることもできます。
コードのauto-animate
## {auto-animate="true"}
```r
iris |>
ggplot(aes(x="Sepal.Length", y="Sepal.Width))
```
## {auto-animate=true}
```r
iris |>
ggplot(aes(x="Sepal.Length", y="Sepal.Width)) +
geom_point(size=2)
```
## {auto-animate=true}
```r
iris |>
ggplot(aes(x="Sepal.Length", y="Sepal.Width)) +
geom_point(size=2) +
labs(x="がく片の長さ", y="がく片の幅")
```40.2.13.3 auto-animate：要素を上に追加する
コードの追加に似ていますが、{auto-animation}を用いると文字列を上に追加する表現をアニメーションで行うこともできます。
要素を上に追加するアニメーション
## {auto-animate="true"}
- Eat eggs
## {auto-animate="true"}
- Turn off alarm
- Eat eggs40.2.13.4 auto-animate：図形の変形アニメーション
図形もアニメーションで変形させることができます。ただし、これはやや使いどころが難しいように思います。
図形でアニメーション
## {auto-animate=true auto-animate-easing="ease-in-out"}
::: {.r-hstack}
::: {data-id="box1" auto-animate-delay="0" style="background: #2780e3; width: 200px; height: 150px; margin: 10px;"}
:::
::: {data-id="box2" auto-animate-delay="0.1" style="background: #3fb618; width: 200px; height: 150px; margin: 10px;"}
:::
::: {data-id="box3" auto-animate-delay="0.2" style="background: #e83e8c; width: 200px; height: 150px; margin: 10px;"}
:::
:::
## {auto-animate=true auto-animate-easing="ease-in-out"}
::: {.r-stack}
::: {data-id="box1" style="background: #2780e3; width: 250px; height: 250px; border-radius: 200px;"}
:::
::: {data-id="box2" style="background: #3fb618; width: 150px; height: 150px; border-radius: 200px;"}
:::
::: {data-id="box3" style="background: #e83e8c; width: 50px; height: 50px; border-radius: 200px;"}
:::
:::40.2.14 parallax
スライド移行時に、背景の画像が少し移動するアニメーションを追加する、parallaxもReveal.jsでは指定可能です。parallaxについては、このReveal.jsのデモを確認していただけるとイメージしやすいかと思います。
parallaxを利用したいときには、YAMLのrevealjs以下にparallax-background-imageとparallax-background-horizontal、parallax-background-verticalを設定します。parallax-background-imageには背景に表示する画像、parallax-background-horizontalとparallax-background-verticalにはスライドの切り替え時の背景画像の移動距離を指定します。
ただし、このparallaxは設定がやや難しい上、現状（knitr ver.1.50）ではRstudio上のRenderボタンでは表示させることができません。Terminalからquarto renderを用いてRenderしましょう。また、なぜかiframeではparallaxをうまく表示させることができないようです。
parallaxで背景を設定する
format:
revealjs:
parallax-background-image: "../image/sasebo.jpg"
parallax-background-size: "450px 300px"
parallax-background-horizontal: 20040.3 Reveal.jsのプレゼンテーションのコントロール
Reveal.jsのプレゼンテーションはHTMLですので、ファイルはHTMLとして保存されます。HTMLをウェブブラウザで開くことでプレゼンテーションを表示させることができます。
このReveal.jsの使い方については、スライドの左下に表示されるメニューから、上の『Tools』を選択した時に表示されるショートカットを見ればわかるようになっています。例えば、フルスクリーン表示したい場合は『F』を押す、スピーカービューを表示したいときには『S』を押す、といった形で用いることができます。
また、Reveal.jsには左右に矢印が付いていますが、この矢印は以下のようにcontrols: trueを設定することで表示されます。
矢印の表示
format:
revealjs:
controls: true
40.3.1 タッチナビゲーション
Reveal.jsでは、ケータイやタブレットのようなタッチディスプレイを持つ端末で、スワイプやタッチなどでスライドを移動することができます。このスワイプやタッチによる移動はタッチナビゲーションと呼ばれる機能によるものです。QuartoでReveal.jsのタッチナビゲーションの設定を行う場合、YAMLにtouchを設定します。おそらくtouchのデフォルトはtrueだと思いますので、特に設定する必要はありませんが、明示的に示したいときにはtrue、タッチナビゲーションを利用したくない場合にはfalseに設定するとよいでしょう。
scroll-viewを有効にする
format:
revealjs:
touch: true40.3.2 scroll-view
Reveal.jsでは、上に示した通り、スライドの左右に矢印が表示され、この矢印を押すことでスライドを移動することが出来ます。また、キーボードの矢印でも移動可能です。ただし、Powerpointのようにスクロールホイールでスライドを移動することはできません。
スクロールホイールで移動ができるようにするためのYAMLがscroll-viewです。scroll-view: trueを設定すると、以下の例のようにスクロールバーが右に表示されるようになり、スクロールホイールでスライドを移動することが出来るようになります。
また、このYAMLを設定していないプレゼンテーションにおいても、キーボードの『O』を押すことでもスクロールホイールで操作することができます。
scroll-viewを有効にする
format:
revealjs:
scroll-view: true40.3.3 スピーカービューにテキストを表示する
Powerpointでプレゼンテーションを行うときに発表者の画面だけに表示される、スピーカービューもReveal.jsで表示させることができます。スピーカービューを用いる場合には、上記の通りキーボードの『S』を押します。
この際に、プレゼンテーションで話す内容をメモしたもの、スピーカーノートを表示させることもできます。スピーカーノートを表示させる場合、そのスライドの要素として、{.notes}を以下のように設定します。
Speaker noteを設定する
## スライド
::: {.notes}
このスライドではスピーカーノートについてお話しします。
:::
code-line-numbers
Quartoのreveal.jsのGuideにはcode-line-numbersに関する記載がありますが、このcode-line-numbersに関してはPythonのコードをRenderするときにしか有効ではなく、RのコードをRenderする場合（knitr ver.1.50）には有効ではないようです。以下のコードはエラーとなります。また、Rのコードを含まない.qmdファイルに関しては、RstudioでRenderボタンを用いるのではなく、TerminalからQuarto CLIを用い、quarto renderでRenderを行った方がよいでしょう。
code-line-numbers
```{r, code-line-numbers="1-3"} # 1～3をハイライト、はできない
x <- matrix(c(4, 12, 8, 8), nrow = 2)
colnames(x) <- c("observed", "expected")
rownames(x) <- c("male", "female")
fisher.test(x)
```
---
```{r, code-line-numbers="2|4"} # 2と4を順にハイライト、はできない
x <- matrix(c(4, 12, 8, 8), nrow = 2)
colnames(x) <- c("observed", "expected")
rownames(x) <- c("male", "female")
fisher.test(x)
```Quartoは現状（2025年）開発中であり、Rだけ対応していること、Pythonだけ対応していること、Observableではできないことなどがあります。