Quartoで作るreveal.jsスライドのTips
Kanazawa.R #6
November 28, 2026
自己紹介
自己紹介
専門：政治思想史
- 18世紀イギリスの議会政治：レトリック受容と新興メディア
- キケロやタキトゥスの受容
- 総合雑誌の偽装ディベート
- 量的テキスト分析を読み解きの補助として利用
Rに関わる講義
「RやPython利用者向け」SSDSEの公開開始（2026年6月30日）
quantedaを使った記述統計
quantedaを使った推測統計
設定の共有と管理
設定の共有と管理
reveal.js
- Quartoでスライドを作成するための出力フォーマット（JavaScriptベース）
reveal.jsを例に説明しますが、出力フォーマットのhtmlも、同じ問題を抱えており、同様の解決策が役立ちます
利点
- Rのコードを実行し、その結果（表・グラフなど）をスライドに表示できる
- 画像のコピペは不要
- スライドのデザインやレイアウトを柔軟にカスタマイズできる
- プラグインによって機能を拡張できる
参照
- 公式サイト
- 「Quartoで、コピペミスしないプレゼンテーション資料作成」（Kanazawa.R #5）
設定の共有と管理 > 問題
前提
- 複数のスライドファイルを作成する必要がある
- 授業教材；学会報告
- スライドごとにコンテンツは異なるが、基本的な体裁・デザイン・設定は共通
- 共通点：氏名や所属、メールアドレスなどの基本情報
- 相違点：タイトル、日付など
問題
- 設定に関わるコードが多く、かつ複雑になる
- 必要なコードがしっかりと目に入るようにしたい
- 体裁や設定を変更する場合、すべてのファイルの該当箇所を個別に修正する必要がある
設定の共有と管理 > 解決策
解決策
- 設定・コードの外部ファイル化と共有（Huang （2023））
- YAMLフロントマター：
metadata-files - Setupチャンク：
source("../../_setup.R")
- YAMLフロントマター：
reveal.jsの話題から逸れますが、setupチャンクでも同様のことが可能です
生成AIは知りたいことを教えてくれることが多いですが、ネット検索には、思いがけない情報やアイデアとの「偶然の出会い」があります（芋づる式に発見がある）
設定の共有と管理 > 解決策 > YAML フロントマター
YAMLフロントマターに直接記述
---
title: "Quartoで作るreveal.jsスライドのTips"
subtitle: "Kanazawa.R #6"
author:
- name: 苅谷千尋
orcid: 0009-0008-3085-947X
email: kariyach@staff.kanazawa-u.ac.jp
affiliations: 金沢大学
date-format: long
format:
revealjs:
theme:
- default
- ../../slide.scss
width: 1280
height: 720
center-title-slide: true
# view: 'scroll'
# scrollLayout: 'compact'
menu:
side: left
width: wide
numbers: true
toc: true
toc-depth: 1
toc-title: "目次"
slide-number: h.v
# slide-number: c/t
code-copy: true
preview-links: false
link-external-newwindow: true
link-external-icon: true
# show-slide-number: print
# embed-resources: true
# self-contained: true
progress: true
history: true
keyboard: true
# transition: slide
background-transition: fade
navigation-mode: vertical
controls-layout: bottom-right
controls-tutorial: true
# chalkboard:
# buttons: false
# lang: ja
# slide-tone: true
# pdfSeparateFragments: true
# mouse-wheel: true
# touch: true
# center: true
verticator:
# themetag: 'h1'
color: '#C62828'
inversecolor: ''
skipuncounted: false
clickable: true
position: 'auto'
offset: '3vmin'
autogenerate: true
tooltip: false
scale: 1
revealjs-plugins:
- pointer
- confetti
- multimodal
- verticator
- chat-bubbles
filters:
- timer
- sticky-notes
revealjs-config:
jumpToSlide: true
scrollProgress: true
keyboard:
# カスタムバインディング
"67": null # デフォルトの 'c' キーを無効化
"88": "toggleChalkboard" # 'x' キーを chalkboard のトグルに割り当て
"90": "startConfetti" # 'z' キーを confetti のトグルに割り当て
title-slide-attributes:
data-background-image: img/logo.png
# data-background-opacity: "0.5"
data-background-size: 10%
data-background-position: 90% 90%
# data-background-position: 5% 5%
data-roadmap: "none"
# code-line-numbers: true
# References
bibliography: /Users////.json
csl: /Users////..csl
citations-hover: true
# Exclude from search indexing
include-in-header:
text: |
<meta name="robots" content="noindex, nofollow">
⇒
外部ファイルで一元管理
---
title: "Quartoで作るreveal.jsスライドのTips"
subtitle: "Kanazawa.R #6"
format: revealjs
date: 28, Nov 2026
metadata-files:
- ../../_slides.yml
title-slide-attributes:
data-background-image: img/Jan_Vermeer_The_Art_of_Painting.webp
data-background-size: 15%
data-background-position: 90% 90%
- タイトル類を除くすべてのコードをコピーして、「_slides.yml」名で保存
metadata-files:でファイルを読み込み
設定の共有と管理 > setupチャンク
Setupチャンクに直接記入
# load package -----
library(tidyverse)
## Font settings for plots
library(sysfonts)
library(showtext)
## colour palette
library(paletteer)
# ggplot theme_classic font settings ----
ggplot2::theme_set(
theme_classic(base_family = "jp") +
theme_sub_axis_bottom(
title = element_text(size = 11, margin = margin(t = 8)),
text = element_text(size = 10)
) +
theme_sub_axis_left(
title = element_text(size = 11, margin = margin(r = 8)),
text = element_text(size = 10, hjust = 0)
) +
theme_sub_legend(
position = "bottom",
margin = margin(t = -4),
key.size = unit(6, "mm")
) +
theme_sub_plot(
title = element_text(size = 10),
caption = element_text(size = 10)
)
)
# Japanese font for Mac ----
font_add(
"jp",
"/System/Library/Fonts/ヒラギノ角ゴシック W5.ttc"
)
showtext_auto()
⇒
外部ファイルで直接管理
- 左のコードをすべてコピーして「_setup.R」名で保存
- setupチャンクにsource()関数を挿入して「_setup.R」をロード
チャンクオプションに#| file: ../../_setup.R と指定する方法もあります。しかし、この方法では外部ファイルのコードだけが実行されるため、パッケージの追加など、別の処理を同じチャンクに記述することはできません
確認（サンプルコード）
penguins |>
drop_na(species, sex, body_mass) |>
group_by(species, sex) |>
summarise(avg_body_mass = mean(body_mass), .groups = "drop") |>
ggplot(aes(x = species, y = avg_body_mass, fill = species)) +
geom_col() +
facet_wrap(~ sex) +
scale_fill_paletteer_d("khroma::highcontrast") +
labs(title = "タイトル",
caption = "キャプション")
便利なplugin
便利なplugin
quarto-reveal.jsのみ
quarto-html/quarto-reveal.jsのどちらにも対応
deckroadmap
- deckroadmap
- ロードマップに表示する見出しを指定する
- 第1見出し行に data-roadmap を指定
# 自己紹介{data-roadmap="自己紹介"}
## コンテンツ
## コンテンツ
# 設定の共有と管理{data-roadmap="設定の共有と管理"}
## コンテンツ
## コンテンツcountdown
- countdown
QRコード
chat-bubbles
この本、面白かったよ
💯 👍 ☺️
それって中学生が読む本じゃないの？恥ずかしくないのかな？🤭
🤮🤮🤮🤮🤮🤮
🤔（この人、大丈夫かな、頭）
本に年齢制限でもあるの？ 面白いと思ったなら、それでいいじゃん
（ありがとう🥳）
chat-bubbles
::: {.chat}
::: {.speaker-1}
この本、面白かったよ
:::
[💯]{.fragment .reaction}
[👍]{.fragment .reaction}
[☺️]{.fragment .reaction}
::: {.fragment .speaker-2}
それって中学生が読む本じゃないの？恥ずかしくないのかな？🤭
:::
::: {.fragment .speaker-1}
🤮🤮🤮🤮🤮🤮
:::
::: {.fragment .speaker-1}
🤔（この人、大丈夫かな、頭）
:::
::: {.fragment .speaker-3}
本に年齢制限でもあるの？ 面白いと思ったなら、それでいいじゃん
:::
::: {.fragment .speaker-1}
（ありがとう🥳）
:::
:::
参考文献
参考文献
Huang, C. (2023). Sharing and Remixing Content Across Revealjs Slides with Quarto Includes. https://www.cynthiahqy.com/posts/slides-quarto-includes/