【Quarto】使い方解説！Reveal.js でスライドを作ろう

Quarto
Reveal.js
R

スライドも Quarto で作れる！

公開

2024年5月12日

最終更新

2024年5月26日

はじめに

皆さん、スライドを作るときに何を使っていますか？PowerPoint ですか？\(\LaTeX\) の Beamer ですか？

こちらの記事で Reveal.js を使ったスライドをご紹介しましたが、今回はスライドを作る上での tips をご紹介します。

今回は Quarto の使い方と併せて、スライドの作り方を書いていこうと思います。

準備

Note

この記事は R ユーザーをターゲットに書いています。しかし、Quarto は多言語でも使えるのがメリットなので、もちろん Python などでも使うことができます。

今回は RStudio で使うことを前提としますが、Python でも使いたいという方はこちらの記事を参考に VSCode で始めてみてください。コードの書き方はこの記事と同じです。

細かいことは、Quarto の公式ガイドをお読みください。この記事では、とりあえずこれができればいいかな、というところをピックアップして解説します。

ドキュメントを開く

RStudio を開き、任意のディレクトリをワーキングディレクトリとして設定します。

RStudio 左上の より、「Quarto Document」を選択してください。

さらに「Presentation」を選び、タイトル、著者名を必要に応じて付け、Reveal JS を選びます。エンジンは Knitr1、Use visual markdown editor はオフにしておいてください。

最後に Create を押します。

すると、次のようなヘッダーだけがある文書が出てくると思います。

Quarto
---
title: "[任意のタイトル]"
format: revealjs
---

これでドキュメントは無事開けました。そしたら を押して、任意のフォルダに保存してください。

テーマ

このままでもスライドは作れますが、味気ないスライドになってしまいますので、テーマを設定します。

テーマは、先ほどのヘッダーを次のように書き加えることで使うことができます。

Quarto
---
title: "[任意のタイトル]"
format: 
  revealjs: 
    theme: night  # この部分を変える
---

もとのヘッダーと変えた時のヘッダーでそれぞれ Render してみてください。

ちなみに、Quarto 公式では、以下のようなテーマが紹介されています。

  • beige

  • blood

  • dark

  • default

  • league

  • moon

  • night

  • serif

  • simple

  • sky

  • solarized

それぞれ特徴があるので、いろいろ試してみてください。

今回は、私が作成した Reveal.js のテンプレートを使っていきます。現状英語にしか対応していないのが難点ですが、いずれ日本語に対応したものも作る予定です。

GitHub リポジトリにアクセスし、クローンするか、<> Code より ZIP ファイルをダウンロードしてください2。使うのは modern_theme.scss です。このファイルを準備し、先ほどのドキュメントを保存したフォルダと同じフォルダに移しておいてください。

そしたらヘッダーを次のように修正してください。

Quarto
---
title: "[任意のタイトル]"
format: 
  revealjs: 
    theme: 
      - default
      - modern_theme.scss
    slide-number: true  # スライド番号を付ける
    date-format: long   # 日付のフォーマットを整える
---

これでテーマの設定もできました。

Quarto での書き方

表紙

表紙はヘッダーに書いた要素で構成されます。title の他には、author（著者）や date（日付）、 institute（所属組織） を追加することを想定しています3。

本スライド

スライドでは、## を使ってページを区切っていきます4。

例えば次のように書きます。

Quarto
---
title: "Title"
subtitle: 
format: 
  revealjs: 
    theme: 
      - default
      - modern_theme.scss
    slide-number: true  # スライド番号を付ける
    date-format: long   # 日付のフォーマットを整える
---

## First page

"First page" is the headline text. Note that a half-width space is required before the heading.

## Second page

You can break a line by leaving one line blank.

Like this.

"First page" is ~ と You can break ~ が本文です。

通常の Markdown と基本的な使い方は一緒ですが、改行するには空行を入れる必要があります。1回改行しただけでは、スライド上では改行されません。見出し部分にも適用されますので、1行空けてから ## 見出し と書くようにしてください。

色遣い

このテーマは基本的に派手なデザインではありませんが、2色を文字に使えます。alert と、accent です。

これらの色にしたい文字や文を [] で囲んだ後、{.alert} および {.accent} と入力します。[alert]{.alert} といった感じです。

基本的には alert があれば概ね大丈夫な気がしますが、accent も入れておきました。

callout

callout ブロックを紹介します。

Note

これは Note

Tip

これは Tip

Warning

これは Warning

Important

これは Important

Caution

これは Caution

これらのことです。

要点をまとめたいときや、断り事を書きたいときなどに重宝します。

書き方は、

Quarto
::: {.callout-note}
これは Note
:::

::: {.callout-tip}
これは Tip
:::

::: {.callout-warning}
これは Warning
:::

::: {.callout-important}
これは Important
:::

::: {.callout-caution}
これは Caution
:::

こうです。

ちなみに、ブロックのタイトルを変えたいときや、長いので折りたたみたいときは、

Quarto
::: {.callout-note title="ここがタイトル" collapse=true}
これは折りたためる Note
:::

と書くことで、

これは折りたためる Note

とできます。

リスト

箇条書きなどのリスト形式が使えます。書き方はシンプルで、

Markdon
箇条書きリスト

- Item 1

    - Item 1-1
    
- Item2

順序付きリスト

1. Item 1

2. Item 2

箇条書きリストでは2段階を、順序付きリストでは1段階の利用を想定しています。

アイテムの前には半角スペースを忘れないでください。また、2段階目を使うときには4つ分のスペースが必要です。

列を分ける

箇条書きを10個も書くと、2列にしたいことがありますよね。そんなときは次のようにしてください。

Quarto
:::: {.columns}
::: {.column width="50%"}
- Item 1

- Item 2
:::

:::{.column width="50%"}
- Item 3

- Item 4
:::
::::

このように書くと、

  • このように

  • なります。

  • width を変えれば

  • 列の幅を調節できます。

コード

R や Python のコードも書けます。

特筆すべきは、コードをハイライトできることです。

例えば、次のコードをご覧ください。

上のコードでは select() と filter() の行がハイライトされています。

また、スライド上で右に進んでみてください。順にハイライトされています。

これらのコードは、次のように書いています。

Quarto
```{.r code-line-numbers="5-6"}
library(tidyverse)
library(gt)

df <- mtcars |> 
  select(1:5) |> 
  filter(disp >= 400)

gt(df)
```

```{.r code-line-numbers="|5|6"}
library(tidyverse)
library(gt)

df <- mtcars |> 
  select(1:5) |> 
  filter(disp >= 400)

gt(df)
```

このように code-line-numbers で指定することができます。|5|6 は5行目と6行目が順にハイライトされるということですね。

他にも細やかな設定ができるので、Quarto の公式ガイドをご覧ください。

図や表

図や表がどのように表示されるのか見てみましょう。

デフォルトでは図のキャプションが左寄りになっていますが、中央になるように修正しています。

また、ここでは例としてコードを載せていますが、デフォルトではコード表示はオフです。表示したい場合はチャンク内で echo: true を設定してください5。

おわりに

ここまで基本的な Quarto でのスライド作成についてご紹介しました。

ここを押さえておけばスライドを作る分には困らないのではないかと…思います。

他に使う要素があれば適宜追加していきます！

注

  1. Python の場合は Jupyter↩︎

  2. クローンするほどでもないので、ダウンロードでいいと思います。リポジトリ整えてなくてすみません^^;↩︎

  3. 私のテーマの場合↩︎

  4. # も使えるのですが、今回のテーマでの使用は想定していません。↩︎

  5. チャンクオプションについて、詳しくはこちら↩︎