Appendix H — Quarto [スライド]
本章は完成後、既存のR MarkdownとQuartoの内容の一部を代替しますが、現時点では参考程度にしてください。
H.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ヘッダーをとりあえず以下の内容で置き換えてから保存し、レンダーしてみよう。スライドを全体画面で表示する場合はキーボードのFFキー（Full screen）を押せば良い。
ここでは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の使い方については次章で解説する。
H.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%}
:::
:::{.column width=70%}
- 近年、爆発的に売り上げを伸ばした『私たちR』の紹介
- 2.7秒に1冊売れているらしい。
- メリットとデメリットの紹介
:::
::::
# 『私たちのR』のここがすごい!
## ネコが書いた本格R入門書
- 世界人口を8割を占めているネコのための本格R入門書
- ネコの、ネコによる、ネコのためのR入門書
## ふざけた例が満載
- 世界各国の社会経済的データなどふざけた例が多い
- ラーメン屋データのような真面目な例も少なめではあるが、一応ある。
# 『私たちのR』のここがダメ!
## ネコしか読めない
- にゃーにゃにゃーにゃーにゃーにゃにゃにゃ
- にゃーにゃーにゃーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーにゃーにゃにゃ
## ふざけた例しかない
- にゃーにゃにゃーにゃーにゃーわん！わん！わん！
- にゃーにゃーわんーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーわんーにゃにゃスライドの見た目をカスタマイズしないのであれば、以上の内容だけで立派なスライドが作成できる。以下ではスライド（reveal.js）ならではの機能をいくつか紹介する。
H.3 各種機能
Quartoで作成するHTML形式スライドには本書で紹介しきれないほど、たくさんの機能を提供している。公式ホームページのAdvanced Revealページからも確認できるが、ここではよく使う機能をいくつか紹介する。
H.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行ハイライトの状態になる。以下はその例だ。授業用スライドを作成する際、重宝する機能だ。
H.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では使えない。
H.3.3 箇条書きのアニメーション
箇条書きの項目を上から順番に一つずつ見せたい場合は、:::{.incremental}と:::の間に箇条書きを書く。こちらは人によってはよく使う機能かも知れない。
より高度な操作をしたい場合はフラグメント（fragment）機能を使う必要がある。詳細はQuarto公式ホームページから確認できるが、ここでは簡単な使い方だけ紹介しよう。
H.3.4 右下のロゴ
H.3.5 スピーカービュー
プロジェクターの画面がプレゼンテーションに使用するPC画面をミラーリングするだけなら、FFキーでフルスクリーンすれば良い。しかし、Powerpointのように聴衆が見る画面と発表者が見る画面が異なる場合はどうだろうか。このようなスピーカービューは次のスライドや現時刻・開始からの経過時間が確認できる長所がある。また発表者のみに見えるメモやノートも見れる。Quartoで作成したプレゼンテーションでも似たような機能が使用できる。
プロジェクター（または、聴衆用モニター）と発表用PCのミラーリングを解除1し、SSキーを押すだけだ。そうすれば新しいウィンドウが表示され、そこに次のスライド、時間、ノートなどが表示される。あとは元のスライドをプロジェクターの画面へ動かしてからフルスクリーン（FF）にし、発表用のPCにはスピーカービューのウィンドウを残しておく。2つのウィンドウのスライドは連動するため、スピーカービューのウィンドウでスライドをめくっても問題ない。
発表者用のノートは以下の例のように:::{.notes}と:::の間に書くだけだ。聴衆側から見ればノートの内容は見えないが、スピーカービューでは見える。
## 高知のおすすめラーメン（順不同）
宋が訪問したことのある店のみ紹介（**太字**は大阪支店あり）
1. 蔵木（牛モツつけ麺）
1. **まんしゅう**（じゃんめん+白ご飯）
1. 鶏と魚（メニューがよく変わる）
1. チョンマゲ（ラーメン零）
1. **とさの家**（ラーメン+のり多め+硬め濃いめ少なめ）
1. 呑兵衛屋台（しじみラーメン）
1. 谷口食堂（鍋焼きラーメン）
::: {.notes}
- 鶏と魚はドライトマトが乗っているやつがあれば間違いない
- チョンマゲはラーメンよりも玉子焼き飯がうまいことも言っておく
- 谷口食堂は鍋焼きラーメン発祥の店だが、そもそも鍋焼きラーメンが宋の好みではない
:::H.3.6 ホワイトボードとペン機能
revalejs:の下位オプションとしてchalkboard: trueを指定すると、ホワイトボードやペン機能が使えるようになる。スライドの見た目はあまり変わらないが、CCキーか左下のブラシをクリックするとペンが、BBキーか左下のホワイトボード（厳密には黒板?）が使える。同じキーをもう一度押すと、元のスライドに戻れる。他にもいくつかのショートカットキーがあるが、スライドの状態でHHキーを押すと各種ショートカットキーの案内が表示されるので確認しておこう。また、後述するがembed-resources: trueとchalkboard: trueは同時に使えないことには注意されない。
H.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%}
:::
:::{.column width=70%}
- 近年、爆発的に売り上げを伸ばした『私たちR』の紹介
- 2.7秒に1冊売れているらしい。
- メリットとデメリットの紹介
:::
::::
# 『私たちのR』のここがすごい! {visibility="uncounted"}
## ネコが書いた本格R入門書
- 世界人口を8割を占めているネコのための本格R入門書
- ネコの、ネコによる、ネコのためのR入門書
## ふざけた例が満載
- 世界各国の社会経済的データなどふざけた例が多い
- ラーメン屋データのような真面目な例も少なめではあるが、一応ある。
# 『私たちのR』のここがダメ! {visibility="uncounted"}
## ネコしか読めない
- にゃーにゃにゃーにゃーにゃーにゃにゃにゃ
- にゃーにゃーにゃーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーにゃーにゃにゃ
## ふざけた例しかない
- にゃーにゃにゃーにゃーにゃーわん！わん！わん！
- にゃーにゃーわんーにゃにゃーにゃにゃ
- にゃーにゃにゃーにゃーわんーにゃにゃH.4 スライドの配付
Quartoで作成可能なスライドのフォーマットはreveal.jsベースの.html、\(\LaTeX\)（Beamer）ベースの.pdf、Microsoft Powerpointの.pptxである。.pdfや.pptxは図表を含む全ての内容が一つのファイルに保存されているため、そのファイルだけ共有すれば良い。しかし、多くの人が利用するであろう.htmlファイルを他の人に共有したり、学会発表のためにUSBメモリに入れる際は注意が必要だ。
ほにゃほにゃ_filesフォルダーも忘れずに共有する
ネットにアップロードして共有する（Quarto Pub、GitHub Pagesなど）。
H.4.1 一つのHTMLファイルに統合する
自己完結型（self-contained）HTML
数式をレンダリングする数式ライブラリ（MathJaxとKaTeX）がサイズが大きいため、embed-resources: trueでも自己完結型HTMLに含まれず、ネット経由で取得することになる。しかし、インターネットが使えない環境になるとせっかくの数式がレンダリングされない。この場合、self-contained-math: trueを追加すると、数式ライブラリもHTMLファイルに保存される。ただ、この場合、スライドとは思えないサイズのHTMLになるため、注意が必要だ。
chalkboard: trueだとエラーが発生する。
H.4.2 PDF出力
HTMLファイルを一つにまとめた場合、ファイルのサイズが大きくなる。大量の図が使用されたり、数式ライブラリまでHTMLファイルに含めると数十MBになる可能性もある。この場合、PDF形式で出力すればサイズを大幅に減らせることができよう。この場合、タブセット2、スクロールのようなインタラクティブ（動的）な機能はすべて無効になるが、そういった要素がないスライドであれば、自己完結型HTMLよりもPDFの方が合理的だろう。
しかし、残念ながら2024年5月現在、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）。
H.4.3 Beamer
以上の方法は「HTMLファイルをPDFに変換する」方法だ。HTML上で見やすいスライドをPDFに変換したからといってそのスライドが見やすいとは限らない。ベストは最初からスライドをPDFで作ることだろう。
---
title: "ほとんど無害な『私たちのR』"
subtitle: "『私たちのR』をR教の聖典にすべき"
date: "2024/6/22"
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
--- 日本語フォントはmainfontとCJKmainfontで指定できるため、適宜修正すること。UbuntuでNotoフォントを入れた場合、高確率で"Noto Sans CJK JP"になるし、macOSならヒラギノ（"Hiragino Sans"）、Windowsなら游ゴシック（"Yu Gothic"）で良いだろう。また、ルビを使いたい場合はluatexja-rubyパッケージの読み込みも忘れないこと。テーマはMetroplisを指定したが（ちなみにMetroplisにするとエラーが発生する。）、省略した場合デフォルトテーマになる。他にもCambridgeUS、Singaporeなど様々なテーマが使える。
H.4.4 まとめ
- PDF形式にこだわりたい：最初からBeamer
- HTMLのまま配りたい：全てのリソースを格納する
- とりあえず印刷がしたい：Chromeで印刷