5/ スライドの作成

Quartoを使った研究成果と分析プロセスの共有

宋財泫（関西大学）

1 YAMLヘッダーの構成

Reveal.jsについて

Quartoでは3種類（フォーマット）のスライドが作成可能

  • Reveal.js（.html）
    • HTMLベースのプレゼンテーション・フレームワーク
    • Quartoを使うとMarkdown文法でスライドが作成可能
  • Beamer（.pdf）
  • Microsoft Powerpoint（.pptx）

Reveal.jsで作成したスライドの例

これです

スライドの操作方法

詳細はキーで確認

キー 動作
左右キー 前後のスライド1
Shift + 左右キー 最初/最後のスライド

一時停止（暗転）

フルスクリーン

任意のスライドへ移動
, アウトライン表示

発表者用画面の表示

メニュー呼び出し

検索

YAMLヘッダーの構成要素（の一部）

第5講（HTML文書）の構成と同じ

  • （1）メタ情報、（2）フォーマット、（3）チャンクオプションに大別
    • メタ情報：タイトル、作成日、作成者、言語、概要、…
    • フォーマット：Reveal.js（revealjs）、Beamer（beamer）、Microsoft Powerpoint（pptx）
      • revealjsの場合、拡張機能として提供されるテーマを使用する場合、別の名前に変更する必要がある
    • チャンクオプション：全チャンクに共通するチャンクオプション

文書のメタ情報（例）

title: 文書のタイトル
subtitle: 文書のサブタイトル
author:
  - name: 宋財泫
    email: song@kansai-u.ac.jp
    url: https://www.jaysong.net
  - name: ぽよんぽよん
    email: poyon@poyon.net
date: 1986/10/8
lang: ja
1
文書のタイトルとサブタイトル
2
著者情報
3
作成日
4
スライドの言語
  • 著者が1名、かつ氏名のみ表記ならauthor: 氏名だけでもOK

フォーマット（例）

format:
  revealjs:
    theme: simple
    width: 1200
    height: 900
    footer: "はじめてのQuarto"
    link-external-newwindow: true
    slide-number: "c/t"
    code-line-numbers: true
    auto-stretch: false
1
スライドのテーマ（default = black、white、beige、solarized、…）
2
スライドの横と縦の幅（px単位）
3
スライド中央下段のテキスト
4
リンクを新しいタブとして開くようにする
5
右下にスライド番号を挿入（"c/t" = 現在のページ/ページ数）
6
コードチャンクの各行に番号を付ける
7
オートストレッチ1を無効化（既定値はture）

チャンクオプション（例）

すべてのチャンクに同じオプションを付けたい場合

  • 個別のチャンクオプション（#| オブション: ...）はknitr: opts_chunkより優先する
knitr: 
  opts_chunk: 
    dev: ragg_png
    fig-align: center
    dpi: 300
    message: false
    warning: false
1
作図エンジンは{ragg}のpngフォーマットにする（文字化け防止）
2
図は中央に揃える（![]()で入れた図には適用されない。チャンクオプションなので、チャンクから生成される図のみ適用される）
3
図は解像度は300に（印刷する予定がないなら150程度でもOK））
4
メッセージを表示しない（{tidyverse}の読み込みやread_csv()後のメッセージなど）
5
警告メッセージを表示しない

2 よく使う機能

スライドの構成

見出し（#と##のみ） = 改ページ

  • 以下のコードは計6ページのスライドの例　　　　　　　　
---
YAMLヘッダー
---

# はじめに

## 問題背景

## 先行研究

## 本研究の位置づけ

# 理論・仮説

## 理論
  • Quartoのスライドは##でページを区切る
  • #でスライドをセクションに分割
    • 問題背景〜本研究の位置づけは「はじめに」、理論は「理論・仮説」のセクションに属する
    • を押してみると構造が分かる

ロゴの入れ方

YAMLヘッダーのformat: revealjsの下にlogo: 画像のパスを追加

  • 通常、ロゴは右下に入るが、CSS/SCSSファイルを修正することで調整可能
    • 右下にロゴが入る場合、スライドのページ番号が見えなくなる
  • header-logo-link: URL \(\Rightarrow\) ロゴをクリックすると指定されたURLへ飛ぶ
format:
  revealjs: 
    logo: my_logo.png
    header-logo-link: https://www.jaysong.net/

箇条書きのアニメーション（コード）

::: {.incremental}と:::の間に箇条書きを記入

宋が訪問したことのある店のみ紹介（順不同）

::: {.incremental}

1. 蔵木（牛モツつけ麺）
1. まんしゅう（じゃんめん+白ご飯）
1. 鶏と魚（メニューがよく変わる）
1. チョンマゲ（ラーメン零）
1. とさの家（ラーメン+のり多め+硬め濃いめ少なめ）
1. 呑兵衛屋台（しじみラーメン）
1. 谷口食堂（鍋焼きラーメン）

:::

箇条書きのアニメーション（結果）

宋が訪問したことのある店のみ紹介（順不同）

  1. 蔵木（牛モツつけ麺）
  2. まんしゅう（じゃんめん+白ご飯）
  3. 鶏と魚（メニューがよく変わる）
  4. チョンマゲ（ラーメン零）
  5. とさの家（ラーメン+のり多め+硬め濃いめ少なめ）
  6. 呑兵衛屋台（しじみラーメン）
  7. 谷口食堂（鍋焼きラーメン）

画像の位置

Quartoのマークダウン記法では左、中央、右のみ（{fig-align=}）

  • {.absolute}で任意の位置に図を表示可能（top、left等で位置調節; 単位はpx）
![](画像パス or URL){.absolute top=200 left=0}

![](画像パス or URL){.absolute top=400 left=50 width="50px"}

![](画像パス or URL){.absolute bottom=0 left=200 width="100px" height="300px"}

隠しスライド

見出し（#と##）の後ろに{visibility=}を追加

  • "hidden"：スライドを隠す
  • "uncounted"：スライドを表示するものの、スライド番号が増加しない
# 『私たちのR』のここがすごい! {visibility="uncounted"}

## ネコが書いた本格R入門書

- 世界人口を8割を占めているネコのための本格R入門書
- ネコの、ネコによる、ネコのためのR入門書

## ふざけた例が満載 {visibility="hidden"}

- 世界各国の社会経済的データなどふざけた例が多い
- ラーメン屋データのような真面目な例も少なめではあるが、一応ある。

発表者用画面

  • フルスクリーン（）と発表者用画面（）
    • 発表者の画面が別ウィンドウとして開かれる。発表者画面での操作はスライド本体にも反映される
    • スライドで移す場合、ミラーリングでなく別画面構成にする
宋が訪問したことのある店のみ紹介（**太字**は大阪支店あり）

1. 蔵木（牛モツつけ麺）
1. **まんしゅう**（じゃんめん+白ご飯）
1. 鶏と魚（メニューがよく変わる）
1. **チョンマゲ**（ラーメン零）
1. とさの家（ラーメン+のり多め+硬め濃いめ少なめ）
1. 呑兵衛屋台（しじみラーメン）
1. 谷口食堂（鍋焼きラーメン）

::: {.notes}
- 鶏と魚はドライトマトが乗っているやつがあれば間違いない
- チョンマゲはラーメンよりも玉子焼き飯がうまいことも言っておく
:::

発表者用画面（例）

  • 右上のボタンでレイアウト変更可能
  • 時計部分はクリックするとリセットされる

3 その他の機能

画像のスタック

:::{.r-stack}環境内に画像の埋め込み後、{.fragment}を追加

  • {}内にはfig-align、width等も使用可

Input:

::: {.r-stack}
![](画像のパス or URL){.fragment}

![](画像のパス or URL){.fragment}

![](画像のパス or URL){.fragment}

![](画像のパス or URL){.fragment}
:::

Output:

フラグメント

{.fragment .フラグメントクラス}（fade-in、fade-out、highlight-redなど）

Input:

フラグメントは上から順番に評価

::: {.fragment .fade-in}
フェードイン（最初は非表示）
:::

::: {.fragment .fade-out}
フェードアウト（最初は表示）
:::

::: {.fragment .highlight-red}
赤色にハイライト（最初は表示）
:::

::: {.fragment .fade-in-then-out}
フェードインからアウト（最初は非表示）
:::

::: {.fragment .strike}
取り消し線（最初は非表示）
:::

Output:

フラグメントは上から順番に評価

フェードイン

フェードアウト

赤色にハイライト

フェードインからアウト

取り消し線

テキストの自動サイズ調整

.r-fit-textを使うと、スライドいっぱいに文字を拡大できる（強調したい一言などに）

Input:

::: {.r-fit-text}
ご清聴ありがとうございました
:::

Output:

ご清聴ありがとうございました

画像の自動サイズ調整

![]()の後に{.r-stretch}を付けると、スライドいっぱいに画像が拡大される

Input:

![巨大R猫](画像のパス or URL){.r-stretch}

Output:

巨大R猫

コードのハイライト

  • 通常のチャンク（{r}）だと、チャンクオプションとして使うことも可
    • 例）#| code-line-numbers: "1|3|5-6"

Input:

```{.r code-line-numbers="1|3|5-6"}
library(ggplot2)

data <- mtcars # ここでデータを読み込みます

# ここでプロットします
ggplot(data, aes(mpg, wt)) + geom_point()
```

Output:

library(ggplot2)

data <- mtcars # ここでデータを読み込みます

# ここでプロットします
ggplot(data, aes(mpg, wt)) + geom_point()

背景（色）

ページの見出し（##で始まるもの）の後に{background-color="色"}を付ける

Input:

## 背景（色）{background-color="#3F3F3F"}

背景（画像）

見出し（##で始まるもの）の後に{background-image="画像のパス or URL"}を付ける

  • ## {background-image=...}にするとタイトルなしで画像のみ表示
  • background-size：背景画像の大きさ（"cover" [既定値]、数値 [例: "100px"]）
  • background-repeat：背景画像の反復有無（"no-repeat" [既定値]、"repeat"）
  • background-opacity：背景の透明度（0〜1[既定値]）

Input:

## 宋一押しのとんかつ屋さん {background-image="画像パス or URL"}

画面切り替え効果

  • 既定値はnone（切り替え効果なし）
  • fade、slide、convex、concave、zoomから選択可

全スライドに適用する場合

---
YAMLヘッダーほにゃほにゃ
format:
  revealjs:
    transition: slide
---

特定のスライドのみに適用する場合

## タイトル {transition="zoom"}

黒板とペン機能

YAMLヘッダーのformat: revealjsの下にchalkboard: trueを追加

format:
  revealjs: 
    chalkboard: true
  • でペンモード（canvas）、で黒板モード（chalkboard）のON/OFF
  • 削除は（すべて）、または（当該スライドのみ）
  • 注意：embed-resources: trueとは併用不可

Canvasモード（Cキー）

Chalkboardモード（Bキー）

4 PDF出力

スライド（reveal.js）のPDF出力

Firefox、Chrome、Chromium1の場合2

  1. スライドをWEBブラウザで開く
  2. キーを教えてPrint Viewモードへ
  3. プリント画面を開く（Cmd + P[macOS] or Ctrl + P[Windows/Linux]）
  4. プリンターを「PDFとして保存」選択
  5. 用紙の向きを横長（landscape）にし、余白を「なし」にする
  6. 背景のグラフィックをONにする
  7. 保存

PDF形式のスライド（Beamer）の作成

format: beamerを使用1

  • reveal.jsとは見た目が大きく変わることに注意
    • カスタマイズのためにはBeamer + TeX知識が必要
format: 
  beamer:
    pdf-engine: lualatex
    theme: metropolis                # 好きなテーマを使おう
    classoption:
      - aspectratio=169              # 縦横比4:3ならこの行を削除
      - 10pt
    mainfont: "Noto Sans CJK JP"     # フォントは自分のPC環境に合わせて修正
    CJKmainfont: "Noto Sans CJK JP"  # フォントは自分のPC環境に合わせて修正
    include-in-header: 
      text: |
        \usepackage{luatexja}