R Markdownでスライドを作成（ioslides）

# Rでスライドを作ろう
この記事を読むと、以下の3つができるようになり、どうでもいいことを1つ（4.）知れます。
ちなみに、2と3はスライドでなくても、HTMLファイルにKnitしたものであればできます。
注）Windowsのコンピュータを想定して書いています。他のOSでもできますが多少キーや、やり方が違うかもしれません。

1. R Markdownでスライドを作成できるようになる
2. 細かいスライドの設定のやり方が分かる（上下左右にスクロールできるページなど）
3. 作成したスライドをページのリンクとして共有できる
4. @masato-terai がなぜRでスライドを作るべきだと思っているのか

# Rでスライドを作成するには
　Rでスライドを作成する方法はいくつかあるのですが、今回はioslideを用いて行う方法を紹介します。その他のスライドについてはこちらで紹介されていました [[1]](https://rstudio-pubs-static.s3.amazonaws.com/869589_0491c9112c6d4d48af55a8e114280be2.html#4)。

## スライド作成の手順
1. Rmarkdownファイルを作成
RMarkdownファイルを作成します。Title、Authorを設定（後で変更化）、HTMLにチェックに入れ【OK】をクリックしてください。R markdownファイルが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/e0f18c73-5ada-643a-74ad-5078e6e1908b.png)
---で囲われている上のエリアはyamlヘッダといって、R Markdonwファイル全体の設定を行う箇所です。様々な設定ができます[[2]](https://qiita.com/kazutan/items/726e03dfcef1615ae999)。ここのoutput:の箇所を以下のように変更します（画像参照）。

```
before
output: html_document

after 
output: ioslides_presentation
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/35da3f4f-1d05-c42d-d16c-96b06e0d9f59.png)

【Knit】を押してHTMLファイルを作成しましょう。以下のポップアップが出てきたらOKです。これでスライドができました。
スライドの右側をクリックすると、次のページ、左側を押すと前のページに移動できます。上部の【Open in Browser】をクリックすると、文字通りブラウザで開くことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/ff9ea728-b788-cd45-2509-9db55d8525ea.png)

表示形式を変更できるキーを紹介します。特に使うものだけを紹介しますので、その他についてはこちらをご覧ください [[3]](https://garrettgman.github.io/rmarkdown/ioslides_presentation_format.html#overview)。
- 'f': フルスクリーンで表示
- 'o': スライド全体を表示
- 'w': スライドを幅広く表示
    - ちなみに、'w'を押さなくても、以下のようにyamlヘッダーで指定すれば初めからスライドをワイドに設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/bf455b64-6224-a9b6-1568-d271ce13be39.png)

2.　ページの作成方法
　作成したスライドは、3枚から構成されています。これは、ioslidesで各スライドを分けるルールが以下のように設定されているからです。レベル分けと同じです。R Markdownファイルと、出力されたスライドを見比べていただくと分かりやすいと思います。

- '#'はスライドのセクション見出し
- '##'から次の'##'までがスライド1枚。 ## の後ろに書いた文言がスライドのタイトル
- '###'はマスターテキスト（文字サイズがタイトルより小さく、本文より大きい）

各スライドの本文は、Markdown形式で記述できます。

Rではコメントアウトする際にも'#'を付けますが、レベル分けと同様、'#'の後に半角スペースを入れてください。
簡単にまとめてみます。
```r

# 先行研究

## 先行研究１
### 寺井 & 寺井 (2090)
- 参加者
    - 30名の日本人
        - 全員熊本弁のネイティブ
```

以下のようなスライドになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/35b89b9f-99e2-de0d-8157-5aa950cf1700.png)

# 詳細設定
## スライドの表紙を設定する
スライドの表紙は、上述したyamlヘッダーで編集します。
- タイトル
title: の箇所で設定します。\<br>を改行したい箇所に挿入すると、その箇所で改行できます。
- サブタイトル
subtitle: を追加することで設定できます。
- 作成者
author: の箇所です。
- 日付
R Markdownファイルを作成した日時が最初に設定されています。個人的に、以下のように設定しておくと最初に作成した日時に加え、そのファイルを編集した日時を自動で表示できるので便利だと思います。日時をRの関数で指定していますが、詳しくはこちらの記事をご覧ください[[4]](https://qiita.com/masato-terai/items/50afd48ad741aa8b7bb6)。
\* 架空の研究発表、そして架空の学会を例として用いています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/1f95aa76-ae1e-974e-5c07-afca96bb6514.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/297033d0-0213-8462-3203-17ddda6048d8.png)

## スライドを上下スクロールできるようにする
　パワポだと、分析結果の表や図が1ページに収まらなかったりします。実際に、皆さんがここまで作成してきたスライドも、一部はみ出して表示されていない箇所がありますよね。ioslideでは、上下スクロール機能を搭載できるので、表や図を小さくしたり、内容を削らなくても大丈夫です。スライド1枚の中での表現の幅が広がります。画像のようなブロックをyamlヘッダーの直後に入力すればOKです。コピペ用にブロック内のコードも書いておきます（ブロックの書き方がRの場合と少し違うので注意です）[[5]](https://stackoverflow.com/questions/53064555/how-to-make-scrollable-slides-in-an-ioslides-presentation-with-rmarkdown)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/85dc986d-431c-407d-cd52-8e29890afca2.png)

```{=html}
<style>
  slides > slide {
    overflow-x: auto !important;
    overflow-y: auto !important;
}
</style>
```
【Knit】すると、これまで隠れていた下半分までスクロールできるようになっています。右側にもスクロールバーが表示されていますね。スクロールしないと見えない箇所があるスライドにのみこのスクロールバーが表示されます。今回は左右にスクロールしないといけないスライドがありませんので、左右のスクロールバーは表示されていません。試しに上下左右に動かさないと見えないスライドを作成しました。
　スクロール機能の注意として、ウェブブラウザで開くと、**タッチパッド**や、**マウスホイール**でスクロールできますが、スクロールバーを掴んでスクロールはできません。本来できるはずですが原因不明なので、分かる方がいたら是非教えてください！ちなみに、ブラウザでなく、R Studioで開いている場合は掴んでスクロールできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/2cc96650-7c9d-67af-22bd-65b58fce70f8.png)

## スライドをおしゃれにする
私はCSSに全く詳しくないのですが、最低限の美観の変更は詳しくない私でも、以下の手順で可能です。他にもやり方があるかもしれませんので、ご存じの方がいればコメント欄にお願いします。
1. 無料のCSSファイルをダウンロード
こちらのページにアクセスしてください[（https://bootswatch.com）](https://bootswatch.com/)。
少し下にスクロールすると、無料の素材が紹介されてます。好きなものをダウンロードして、yamlでそのファイル名を追加すると簡単に反映できます。今回は、違いが分かりやすいQuartzを選択します。bootstrap.cssをダウンロードします。ダウンロードしたファイルを、今作成しているR Markdownファイルと同じフォルダ内に保存してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/a27c82b6-72d7-758a-8213-5e02f4ef93f1.png)

2. yamlヘッダーに追加する
yamlヘッダーのoutputの箇所を以下のように修正します。エラー防止のため、コピペをお勧めします。
css: の箇所は、追加したいcssファイルのファイル名にしてください。

- before
```
title: "東海オンエアはなぜ大人気？<br>-視聴者数の推移に注目して-"
subtitle: "第10回Youtuber分析学会 @岡崎市"
author: "寺井雅人（名古屋大学大学院）"
date: "作成日：2023-1-22  最終更新: `r Sys.time()`"
output: ioslides_presentation
```

- after
```
title: "東海オンエアはなぜ大人気？<br>-視聴者数の推移に注目して-"
subtitle: "第10回Youtuber分析学会 @岡崎市"
author: "寺井雅人（名古屋大学大学院）"
date: "作成日：2023-1-22  最終更新: `r Sys.time()`"
output: 
  ioslides_presentation:
    css: bootstrap.css
```

[せいうんポケモンのコスモッグ](https://zukan.pokemon.co.jp/detail/0789)みたいな色になりましたね！
\*このcssだと、スライド内にハイパーリンクを設定している場合、その文字が非表示になります（カーソルを合わせると表示されます）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/c58ac362-111d-03e7-bcc2-e5bc5fe217a9.png)

# スライドを共有しよう
## リンクで共有しよう!
　これはioslideだけでなく、通常のHTMLでKnitした場合にも当てはまりますが、ファイルを共有するのは面倒です。相手がそれをダウンロードしてクリックして開かないといけないですし、内容を修正したら再度ファイルを送り直しです。よって、作成したファイルをリンクで共有するのが一番良いのではないでしょうか。リンクでの共有形式は以下の通りです。
\*無料アカウントの方はどちらも限定公開での共有はできません。

### RPubs（一番簡単）
1. スライドを作成したら、右上の【Publish】→ 【Publish Document...】をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/aacbea86-bd36-e4d3-f5b8-1979b0cf7b83.png)

2. RPubsを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/7d16e5db-3cbb-cfb2-9eea-2e9c641e5907.png)

3. 【Publish】をクリック
注意書きが表示されますが、**【Publish】をクリックすると、全世界の人があなたのスライドを閲覧できます**。

4. 必要情報を記入し公開
RPubsのいいところは、（広告が出てきますが）ページ下部に資料へのコメントを記入できることです。


### GitHub
　個人的こちらの方がお勧めです。今回はGitHubを使って、どのようにスライドを共有するかしか説明しません[[6]](https://prog-8.com/docs/github-pages)。GitHubのアカウント作成方法はこちらを参考にしてください[[7]](https://qiita.com/ayatokura/items/9eabb7ae20752e6dc79d)。あと、今回は最小限の方法を紹介します。RStudioとGitHubの接続などはまた別の機会に紹介します（多分）。

1. 作成したスライドをブラウザで開く
【Open in Browser】をクリックしてください。ブラウザが開いたら、右クリックを押してください。以下の画像のようなポップアップが表示されます。そして【ページのソースを表示】をクリックしてください。ちなみに、【Ctrl】キーと【U】キーを同時に押してもOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/d8d678e7-e93f-bb56-f87f-c6d541089ed7.png)

表示されたページのソースを全てコピーしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/7b11b365-a0b5-8e04-ac8f-e45d3a34795d.png)


2.　index.htmlファイルに張り付け
作成したレポジトリに"index.html"という名前のファイルを作成しましょう。レポジトリの【Add file】→ 【Create new file】で作成できます。ここでは、**必ずファイル名は"index.html"にしてください。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/b16e77fd-e8bc-185b-9496-a0eb2ef4c40f.png)


ファイル名を入力したら、コピーしていたページのソースを添付画像のように張り付けてください。貼り付けたら、ページ下部の【Commit new file】をクリックしてください。同じファイルを編集した場合、二回目から【Commit changes】になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/4ee57792-45a7-ded7-39ef-bcf8198634bc.png)

3.　ページとして公開する（課金しないと、限定公開はできません）
**注！無課金の場合、今からの手順を行うと、全世界の人があなたのスライドにアクセスできるようになります。**

レポジトリに戻り、【Settings】に移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/84e68bfc-693c-d691-d293-ba7ef19bffa7.png)

左側の【Pages】へ移動します。次に、【Branch】の設定を変更します。以下の画像のように、【None】から【main】へ変更します。変更したら【Save】をクリックしてください。ページ上部に移動すると、ウェブサイトへのリンクが表示されています（ページが作成されるまで少し時間がかかります）。ここのリンクを相手に共有することで、相手に自分のスライドを共有できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2344524/7dd1e48d-9b74-d3d4-3599-c1c283236fdf.png)

もし、スライドの内容を変更したら、上記の2～3を行うことで、ファイルを再度送らずとも相手は変更内容を確認できます。


## PDFで共有しよう！
　スライドをブラウザで開いて、【印刷...】をクリックすれば作成可能です。しかし、上下スクロールを入れた場合、スクロールしないと見えない部分は印刷に反映できません。

# デメリット？アニメーションはあきらめないといけない
　この世に完璧なものはありません。ioslideにもデメリットみたいな点があります。パワーポイントのような豪華なアニメーションを手書きコードではかなり難しいです。パワポの開発者をほんとに尊敬します！個人的に、講義スライドや講演会のように、アニメーションを入れたい場合はパワポで作成します。

# なぜRでスライドを作るべきだと思っているのか

　確認ミスという人間らしいミスをできるだけ防ぐためです。論文として結果を公表する場合、分析のデータやスクリプトを公表するように求められるようになりました。しかし、学会発表はどうでしょうか。私の分野ではそのようなことを発表の査読で求められたことはありません。ということはつまり、私たちは、**発表者が完璧に分析結果をスライドに転記しているという信頼のもと発表を聞いています**。しかし、人間は完ぺきではないので、ミスがない可能性は0ではないです。うっかり0を付け忘れたりなど、人間らしいミスはいつでも起こりえます。人間らしいミスはやる気では防げません。しかしこれらは、仕組みやコンピュータの力を用いて減らせるのではないでしょうか。Rでスライドを作成すれば、転記ミスはあり得ません。なぜなら以下のように、転記のステップを省略できるからです。そして、ステップが一つ少なくなるので、スライド完成までの時間も短縮できます。

```
# Rで分析し、パワポでスライド作成

分析結果の確認 → スライドに結果を転記　→　転記できたか確認 → スライド完成

# Rで分析し、Rでスライド作成

分析結果の確認 　　　　　　　　　　　　                   → スライド完成

```

　また、分析のコードをスライドに含めたり、そのファイルとデータを相手に共有することで、誰もが発表者の分析結果を手元のコンピュータで再現できるようになります。プログラミング言語で、分析の道筋を明示的に示すことで、どのようなデータを、どのような形で図や表にまとめたのかを誰もが知ることができます。
　学会発表を引用することはほとんどないので、論文ほど厳しく見る必要がないのかもしれません。それでも少なくとも私は発表の後で間違いに気づいて落ち込む経験はしたくないです。それに加え、きちんと転記できているかを確認する時間より、その時間を発表練習に充てる方が有意義だと思います。

# 最後に
　RStudioが出している公式のR Markdownに関する記事があります。今回は、研究発表の場合を想定し、機能を絞って紹介しました。ここで紹介していない機能もあるので、公式のページも一度ご覧ください[[1]](https://garrettgman.github.io/rmarkdown/ioslides_presentation_format.html#overview)。


今回の記事が少しでもお役に立てたら光栄です。間違っている点や、疑問点などコメントにお願いします！

# 参考記事
[1] [ioslides with RStudio](https://rstudio-pubs-static.s3.amazonaws.com/869589_0491c9112c6d4d48af55a8e114280be2.html#4)
[2] [R Markdownのhtml_documentで指定できるyamlヘッダ項目について](https://qiita.com/kazutan/items/726e03dfcef1615ae999)
[3] [Presentations with ioslides](https://garrettgman.github.io/rmarkdown/ioslides_presentation_format.html#overview)
[4] [自動で日付を変更する R markdown tips](https://qiita.com/masato-terai/items/50afd48ad741aa8b7bb6)
[5] [How to make scrollable slides in an ioslides presentation with rmarkdown](https://stackoverflow.com/questions/53064555/how-to-make-scrollable-slides-in-an-ioslides-presentation-with-rmarkdown)
[6] [自分で作ったWebページをインターネット上に公開しよう！](https://prog-8.com/docs/github-pages)
[7] [GitHubアカウントの作成方法 (2021年版)](https://qiita.com/ayatokura/items/9eabb7ae20752e6dc79d)