26 Quarto [スライド]

26.1 YAMLヘッダー

　まず、簡単なスライドから作ってみよう。適宜プロジェクトを作成し、File > New File > Quarto Presentationを選択する。表示されるダイアログでUse visual markdown editorのチェックを外し、Createをクリックする。Quarto PresentationとQuarto Documentの違いは、YAMLヘッダーの内容であり、.qmdファイルを使うという点では同じだ。もう少し具体的に言うと、format: htmlがfotmat: revealjsに代わり、サンプルがスライドの例になっている程度だ。極めて単純なスライドじゃない限り、どうせYAMLヘッダーを大幅に修正することになるので、Quarto Documentを選択しても良い。

　続いて、YAMLヘッダーをとりあえず以下の内容で置き換えてから保存し、レンダーしてみよう。スライドを全体画面で表示する場合はキーボードのFキー（Full screen）を押せば良い。

コード
結果

---
title: "ほとんど無害な『私たちのR』"
subtitle: "『私たちのR』をR教の聖典にすべき"
date: "2024/6/22"
author: "<ruby>羽鳥<rt>ハドリー</rt></ruby>ウィッカム"
institute: "整然大学"
format:
  revealjs: 
    width: 1600
    height: 900
    slide-number: true
    footer: <https://www.jaysong.net/RBook/>
    theme: white
---

　ここではrevealjs:以降の項目について説明する。まず、スライドの大きさはwidthとheightで指定できる。デフォルトはそれぞれ1050と700であるが（縦横比だと3:2）、使用するプロジェクターやモニターの縦横比が4:3ならこれでも良いだろう。しかし、16:9なら横を長めに設定すると空間に無駄がなくなる。また、あまりないだろうが、UWQHDモニターとかでプレゼンテーションするなら21:9でも良いだろう。続いて、slide-number: true（または、trueの代わりにc）でスライド番号も付けよう。デフォルトはfalseになっているため、スライド番号を出したい場合は必ず指定する必要がある。最後にfooterでスライドの中央下段のテキストを指定する。

　とりあえずこれくらいで通常のスライドは作成できる。もし、見た目（テーマ）を変更したいならtheme:から変えよう。デフォルトはwhiteだが、他にもblack、sky、nightなどいくつかの既定テーマがある。ポジティブに言えばシンプルなテーマではあるが、お世辞でも綺麗なテーマとは言い難い。自分でテーマをいじったり、修正したい場合は.scssファイルを追加してテーマをカスタマイズする必要があるが、これらについては次章で解説する。

　また、よく使いそうな機能がフォントサイズの指定だが、残念ながらフォントサイズの調整はできない。ただ、フォントサイズが固定されていることを考えると、widthとheightの調整することで間接的にサイズの調整はできる。つまり、widthとheightを小さくすればするほど、フォントサイズは（相対的に）大きくなる。厳密に調整したい場合は、別途の.scssファイルを用意し、theme: [default, ほにゃほにゃ.scss]のようにスタイルを修正する必要があるが、SCSSの使い方については次章で解説する。

26.2 スライドの作り方

　YAMLヘッダーを設定すると表紙スライドは自動的に生成される。重要なのは本文の方だが、これは通常のHTML文書と同じ感覚で使える。大事なのはページの区切りとセクション（章）の区切りだろう。この区切りに使用するのは見出し（#や###など）だ。ページは##で、セクションは#で区切られる。つまり、ちゃんと構造化した文書を意識しながらHTML文書を作ったらformat: htmlをformat: revealjsに変更するだけで、そこそこ悪くないスライドが出来たりもする。

　その他の書き方は通常のHTML文書と同じだ。図表の挿入、段組み、タブセット、コールアウトなどHTML文書で使えた文法はここでも全て使えると思っても良いだろう。

コード
結果

---
title: "ほとんど無害な『私たちのR』"
subtitle: "『私たちのR』をR教の聖典にすべき"
date: "2024/6/22"
author: "<ruby>羽鳥<rt>ハドリー</rt></ruby>ウィッカム"
institute: "整然大学"
format:
  revealjs: 
    width: 1600
    height: 900
    slide-number: true
    footer: <https://www.jaysong.net/RBook/>
    theme: white
    embed-resources: true
---

## 概要

::::{.columns}
:::{.column width=30%}
![](https://jaysong.net/RBook/Figs/Cover.png)
:::

:::{.column width=70%}
- 近年、爆発的に売り上げを伸ばした『私たちR』の紹介
   - 2.7秒に1冊売れているらしい。
- メリットとデメリットの紹介
:::
::::

# 『私たちのR』のここがすごい!

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

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

## ふざけた例が満載

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

# 『私たちのR』のここがダメ!

## ネコしか読めない

- にゃーにゃにゃーにゃーにゃーにゃにゃにゃ
- にゃーにゃーにゃーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーにゃーにゃにゃ

## ふざけた例しかない

- にゃーにゃにゃーにゃーにゃーわん！わん！わん！
- にゃーにゃーわんーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーわんーにゃにゃ

　スライドの見た目をカスタマイズしないのであれば、以上の内容だけで立派なスライドが作成できる。以下ではスライド（reveal.js）ならではの機能をいくつか紹介する。

26.3 各種機能

　Quartoで作成するHTML形式スライドには本書で紹介しきれないほど、たくさんの機能を提供している。公式ホームページのAdvanced Revealページからも確認できるが、ここではよく使う機能をいくつか紹介する。

26.3.1 コードのハイライト

　チャンクオプションのcode-line-numbersで強調したい行の番号を指定する。たとえば、4行目のコードを強調したい時にはcode-line-numbers: "4"と指定する。ちなみに#|で始まるチャンクオプションはコードとしてカウントされない。したがって、以下の例の場合3行目はdrop_na(PPP_per_capita) |>となる。

```{r}
#| eval: false
#| code-line-numbers: "4"
Country_df |>
  filter(Continent == "Europe") |>
  drop_na(PPP_per_capita) |>
  mutate(Country = fct_reorder(Country, PPP_per_capita)) |> 
  ggplot() +
  geom_segment(aes(y = Country, yend = Country,
                   x = 0, xend = PPP_per_capita)) +
  geom_point(aes(y = Country, x = PPP_per_capita), color = "orange") +
  labs(x = "一人あたり購買力平価GDP (USD)", y = "国") +
  theme_bw(base_size = 12)
```

　複数の行は,で区切り、連続している行なら-で表記する。また、クリックするたびに強調する行を変えたい場合は|で区切る。|6-8|10だと、「まずは全てハイライト \(\rightarrow\) 6〜8行ハイライト \(\rightarrow\) 10行ハイライト」となる。6-8|10なら最初から6〜8行ハイライトの状態になる。以下はその例だ。授業用スライドを作成する際、重宝する機能だ。

スライドでRコードが表示されない場合

　Quartoスライドの場合、チャンク内コードの非表示が既定値になっている。実際、R教育用のスライドを除き、スライド内でコードを見せることは滅多にないだろう。コードを表示したいチャンクに#| echo: trueオプションを付けるか、全チャンクのコードを出力するなら以下の例のようにYAMLヘッダーで指定した方が効率的だろう。

---
title: "タイトル"
format: revealjs
knitr: 
  opts_chunk: 
    echo: false
---

26.3.2 コードブロックの最大高さ

　Quartoスライドのコードチャンクは基本的には非表示であるが、表示する場合、コードブロックの最大高さは500pxだ。Quartoスライドのデフォルトサイズが横1050px、縦700pxだから、画面の最大7割までコードブロックになる。ここでコードが長すぎる場合、どうなるだろうか。500pxを超える内容であれば、コードブロック内でスクロール可能な状態になる。この最大高さを調整するためにはYAMLヘッダーを以下のようにする必要がある。既定値は500pxだが、これを150pxに修正するためには以下のようにYAMLヘッダーを修正する。

コード
結果

---
format:
  revealjs: 
    width: 1200
    height: 675
    slide-number: true
    theme: white
    embed-resources: true
    code-block-height: 150px
knitr:
  opts_chunk: 
    echo: true
    error: true
---

## 高さ150pxの例

```{r}
#| eval: false
#| code-line-numbers: "3"
Country_df |>
  filter(Continent == "Europe") |>
  drop_na(PPP_per_capita) |>
  mutate(Country = fct_reorder(Country, PPP_per_capita)) |> 
  ggplot() +
  geom_segment(aes(y = Country, yend = Country,
                   x = 0, xend = PPP_per_capita)) +
  geom_point(aes(y = Country, x = PPP_per_capita), color = "orange") +
  labs(x = "一人あたり購買力平価GDP (USD)", y = "国") +
  theme_bw(base_size = 12)
```

　コードと出力結果を1画面に表示させたい場合、コードが長すぎると結果を別のページに載せざるをえないケースがしばしばあるが、この機能で多少は緩和できよう。ただし、これはあくまでもHTML形式スライドならではの機能であるため、PDFやPowerpointでは使えない。

26.3.3 箇条書きのアニメーション

　箇条書きの項目を上から順番に一つずつ見せたい場合は、:::{.incremental}と:::の間に箇条書きを書く。こちらは人によってはよく使う機能かも知れない。

コード
結果

YAMLヘッダーの箇所は省略

## 高知のおすすめラーメン

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

::: {.incremental}

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

:::

　より高度な操作をしたい場合はフラグメント（fragment）機能を使う必要があり、詳細はQuarto公式ホームページを参照されたい。

26.3.4 右下のロゴ

　スライド右下に所属機関などのロゴを入れることもできる。YAMLヘッダーのrevealjs:の下位オプションとしてlogo:を追加し、ロゴファイルのパスを指定するだけだ。もし、.qmdファイルと同じフォルダーならファイル名のみで良いが、figフォルダー内であればfig/ファイル名のようにパスを指定する必要がある。

---
format:
  revealjs: 
    width: 1600
    height: 900
    logo: my_logo.png
---

26.3.5 スピーカービュー

プロジェクターの画面がプレゼンテーションに使用するPC画面をミラーリングするだけなら、Fキーでフルスクリーンすれば良い。しかし、Powerpointのように聴衆が見る画面と発表者が見る画面が異なる場合はどうだろうか。このようなスピーカービューは次のスライドや現時刻・開始からの経過時間が確認できる長所がある。また発表者のみに見えるメモやノートも見れる。Quartoで作成したプレゼンテーションでも似たような機能が使用できる。

　プロジェクター（または、聴衆用モニター）と発表用PCのミラーリングを解除¹し、Sキーを押すだけだ。そうすれば新しいウィンドウが表示され、そこに次のスライド、時間、ノートなどが表示される。あとは元のスライドをプロジェクターの画面へ動かしてからフルスクリーン（F）にし、発表用のPCにはスピーカービューのウィンドウを残しておく。2つのウィンドウのスライドは連動するため、スピーカービューのウィンドウでスライドをめくっても問題ない。

　発表者用のノートは以下の例のように:::{.notes}と:::の間に書くだけだ。聴衆側から見ればノートの内容は見えないが、スピーカービューでは見える。

## 高知のおすすめラーメン（順不同）

宋が訪問したことのある店のみ紹介（**太字**は大阪支店あり）

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

::: {.notes}
- 鶏と魚はドライトマトが乗っているやつがあれば間違いない
- チョンマゲはラーメンよりも玉子焼き飯がうまいことも言っておく
- 谷口食堂は鍋焼きラーメン発祥の店だが、そもそも鍋焼きラーメンが宋の好みではない
:::

26.3.6 ホワイトボードとペン機能

　revalejs:の下位オプションとしてchalkboard: trueを指定すると、ホワイトボードやペン機能が使えるようになる。スライドの見た目はあまり変わらないが、Cキーか左下のブラシをクリックするとペンが、Bキーか左下のホワイトボード（厳密には黒板?）が使える。同じキーをもう一度押すと、元のスライドに戻れる。他にもいくつかのショートカットキーがあるが、スライドの状態でHキーを押すと各種ショートカットキーの案内が表示されるので確認しておこう。また、後述するがembed-resources: trueとchalkboard: trueは同時に使えないことには注意されない。

26.3.7 スライドを隠す

　特定のスライドを非常時にする場合はスライドタイトル（# タイトルや## タイトル）の後ろに{visibility="hidden"}を付ければ良い。必要なくなったスライドだけど、削除するにはもったいない場合、とりあえず非表示にしておくことも良いだろう。また、スライドは表示するものの、右下のページ番号を維持したい場合は{visibility="uncounted"}を付ける。

　以下は最初の概要スライドは非表示となり、セクションの区切りとなるスライド（タイトルが#のみになっている箇所）ではスライド番号が増加しない例である。

コード
結果

---
title: "ほとんど無害な『私たちのR』"
subtitle: "『私たちのR』をR教の聖典にすべき"
date: "2024/6/22"
author: "<ruby>羽鳥<rt>ハドリー</rt></ruby>ウィッカム"
institute: "整然大学"
format:
  revealjs: 
    width: 1600
    height: 900
    slide-number: true
    footer: <https://www.jaysong.net/RBook/>
    theme: white
    embed-resources: true
---

## 概要 {visibility="hidden"}

::::{.columns}
:::{.column width=30%}
![](https://jaysong.net/RBook/Figs/Cover.png)
:::

:::{.column width=70%}
- 近年、爆発的に売り上げを伸ばした『私たちR』の紹介
   - 2.7秒に1冊売れているらしい。
- メリットとデメリットの紹介
:::
::::

# 『私たちのR』のここがすごい! {visibility="uncounted"}

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

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

## ふざけた例が満載 

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

# 『私たちのR』のここがダメ! {visibility="uncounted"}

## ネコしか読めない

- にゃーにゃにゃーにゃーにゃーにゃにゃにゃ
- にゃーにゃーにゃーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーにゃーにゃにゃ

## ふざけた例しかない

- にゃーにゃにゃーにゃーにゃーわん！わん！わん！
- にゃーにゃーわんーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーわんーにゃにゃ

26.4 スライドの配付

　Quartoで作成可能なスライドのフォーマットはreveal.jsベースの.html、\(\LaTeX\)（Beamer）ベースの.pdf、Microsoft Powerpointの.pptxである。.pdfや.pptxは図表を含む全ての内容が一つのファイルに保存されているため、そのファイルだけ共有すれば良い。しかし、多くの人が利用するであろう.htmlファイルを他の人に共有したり、学会発表のためにUSBメモリに入れる際は注意が必要だ。なぜなら、.htmlファイルにはスライドのテキスト情報と書式の指定のみが残っている。つまり、「この文字は強調する」といった書式の指定は.htmlファイル内に残っているが、強調の仕方、つまり文字の太さや大きさ、色など、通常、CSS内で指定されているものは.htmlファイル内に含まれていない。したがって、.htmlファイルだけを共有したら、白い背景に文字しかない文書（\(\neq\)スライド）が表示される。

　解決方法は簡単だ。書式の具体的な内容や画像なども一緒に配布すれば良い。テキストを除く全ての情報、ファイルはスライドのファイル名_filesフォルダーに格納されるため、このフォルダーも.htmlファイルと一緒に共有する必要がある。

　他にもGitHub PagesやQuarto Pubなどのサービスを使用し、ネット上にアップロードして共有することもできるが、詳細は各サービスの公式HPを参照されたい。。

26.4.1 一つのHTMLファイルに統合する

　もし、一つのファイルとしてスライドを配布したい場合、自己完結型（self-contained）HTMLを作成することも一つの選択肢だ。これはスライド内の画像などをすべて一つのHTMLファイルに埋め込まれた形式であり、revealjs:の下位オプションとしてembed-resources: trueを追加するだけだ。

format:
  revealjs:
    embed-resources: true

　ただ、embed-resources: trueを指定しても数式は埋め込まれない。数式をレンダリングする数式ライブラリ（MathJaxとKaTeX）がサイズが大きいため、embed-resources: trueでも自己完結型HTMLに含まれず、ネット経由で取得することになる。しかし、インターネットが使えない環境になるとせっかくの数式がレンダリングされない。この場合、self-contained-math: trueを追加すると、数式ライブラリもHTMLファイルに保存される。ただ、この場合、スライドとは思えないサイズのHTMLになるため、注意が必要だ。場合によってはほぼ使い物にならなら程度のサイズになる可能性もある。

format:
  revealjs:
    embed-resources: true
    self-contained-math: true

　一つ注意点としてはchalkboard: trueと併用してはいけないだということだ。chalkboard: trueとembed-resources: trueが同時に指定されるとレンダリングの際、エラーが発生する。自己完結型HTMLでスライドを作成する際、ホワイトボード機能は諦めよう（もし出来るとしてもファイルサイズが非常に大きくなり、実用性がほぼないだろう）。

26.4.2 PDF出力

　HTMLファイルを一つにまとめた場合、ファイルのサイズが大きくなる。大量の図が使用されたり、数式ライブラリまでHTMLファイルに含めると数十MBになる可能性もある。この場合、PDF形式で出力すればサイズを大幅に減らせることができよう。この場合、タブセット²、スクロールのようなインタラクティブ（動的）な機能はすべて無効になるが、そういった要素がないスライドであれば、自己完結型HTMLよりもPDFの方が合理的だろう。

　しかし、残念ながら2024年5月現在（最新の事情は公式HPを参照されたい）、HTML形式スライドをPDFに変換する方法は限られており、見た目もお世辞でも綺麗とは言えない。むろん、内容が変わったり、本来見えたものが見えなくなったりすることはない。それでも構わないという読者は以下のやり方でHTMLスライドをPDFに変換できる。用意するものはBlinkベースのウェブブラウザーだ。代表的にはGoogle社のChromeとChromiumがあり、Microsoft EdgeやOperaもBlinkエンジンを使用している。

　HTMLファイルのPDF変換は言い換えれば、PDF形式で印刷することを意味する。

Blinkエンジンを使用するブラウザーでスライドを開く。
スライドが表示されたらキーボードの「E」、または「e」キーを押す。
macOSならCommand（⌘） + P、WindowsならControl（Ctrl）+ Pを押す。
出力先をPDFにする。
用紙のレイアウトを横向き（Landscape）に指定する。
余白をなしにする。
背景画像のオプションにチェックを入れる。
「保存」をクリックする（ブラウザーによっては「印刷」と表示される）。

　このやり方だと最後に余計な白紙のページが現れるが、これは手動で消そう（無害なのでほっといてもOK）。

26.4.3 Beamer

　以上の方法は「HTMLファイルをPDFに変換する」方法だ。HTML上で見やすいスライドをPDFに変換したからといってそのスライドが見やすいとは限らない。ベストは最初からスライドをPDFで作ることだろう。

コード
結果

---
title: "ほとんど無害な『私たちのR』"
subtitle: "『私たちのR』をR教の聖典にすべき"
date: today
author: "\\ltjruby{羽鳥}{ハドリー}ウィッカム"
institute: "整然大学"
format: 
  beamer:
    pdf-engine: lualatex
    theme: metropolis
    classoption:
      - 10pt
    mainfont: "Noto Sans JP"
    CJKmainfont: "Noto Sans JP"
    include-in-header: 
      text: |
        \usepackage{luatexja-ruby}
knitr: 
  opts_chunk: 
    dev: "ragg_png"
    dpi: 300
    fig.align: "center"
    echo: false
    message: false
    warning: false
---


## 概要

::::{.columns}
:::{.column width=30%}
![](https://jaysong.net/RBook/Figs/Cover.png)
:::

:::{.column width=70%}
- 近年、爆発的に売り上げを伸ばした『私たちR』の紹介
   - 2.7秒に1冊売れているらしい。
- メリットとデメリットの紹介
:::
::::

# 『私たちのR』のここがすごい!

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

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

## ふざけた例が満載

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

# 『私たちのR』のここがダメ!

## ネコしか読めない

- にゃーにゃにゃーにゃーにゃーにゃにゃにゃ
- にゃーにゃーにゃーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーにゃーにゃにゃ

## ふざけた例しかない

- にゃーにゃにゃーにゃーにゃーわん！わん！わん！
- にゃーにゃーわんーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーわんーにゃにゃ

　日本語フォントはmainfontとCJKmainfontで指定できるため、適宜修正すること。UbuntuでNotoフォントを入れた場合、高確率で"Noto Sans CJK JP"になるし、macOSならヒラギノ（"Hiragino Sans"）、Windowsなら游ゴシック（"Yu Gothic"）で良いだろう。また、ルビを使いたい場合はluatexja-rubyパッケージの読み込みも忘れないこと。テーマはMetroplisを指定したが（ちなみにMetropolisにするとエラーが発生する。）、省略した場合デフォルトテーマになる。他にもCambridgeUS、Singaporeなど様々なテーマが使える。

　まとめると、PDF形式にこだわりたいなら最初からRevealJSでなく、Beamerフォーマットでスライドを作成すべきだろう。一方、柔軟でありががら、スクロールやアニメーション、タブなどの動的な機能を活用したい場合はreveal.jsを使用し、GitHub等で配布するか、全てのリソースを格納した自己完結型HTMLを使うことを推奨する。とりあえずスライドを印刷がしたい場合はWebブラウザでPDFに変換し印刷する必要があるが、動的コンテンツは一部しか出力されないので、最初のスライド作成の段階から動的コンテンツ使用は極力控えるべきであろう（本書で紹介しなかったPowerpoint形式は筆者が使ったことがないため、なんとも言えない）。

つまり、2台のモニターに異なる画面が映っている状態にすることを意味する。macOS（15.0.1）であれば、システム環境設定 > ディスプレイ > ディスプレイをミラーリングのチェックを解除すれば良い。Windows 11であれば、「 + P」を押せば小さいウィンドウが表示されるが、ここで「拡張」を選べば良い。ちなみに「複製」はミラーリングを意味する。↩︎
2つ以上のタブで構成されたタブセットの場合、最初のタブのみが印刷される。↩︎