Exploratoryでプレゼンテーションスライドを作る

![Image from https://unsplash.com/photos/qrz9heer7mY](https://www.dropbox.com/s/qhoxpgajevjwlvp/1.png?raw=1)

データ分析をすることによっていかに有用な発見をしたとしても、それを他の人と共有して伝えることができなくては意味がありません。[Exploratory](https://exploratory.io/?utm_campaign=howto-slide-ja&utm_medium=blog&utm_source=qiita)では、Exploratory上での発見を元に**ノート**を作成し、それを他の人に送信することができます。しかし、ミーティングや会議などでは、多くの場合、リアルタイムにあなたの発見をストーリーとして提示する必要があります。そして、このような場面では、**プレゼンテーションスライド**が用いられることが一般的です。

Exploratory v4.1では、プレゼンテーションスライドを、Markdownを用いてExploratoryの中で直接作成することができるようになりました。これは、[Remark.js](https://github.com/gnab/remark)という、Webブラウザでインタラクティブなプレゼンテーションスライドを生成することができるライブラリをベースにした、[xaringan](https://cran.r-project.org/web/packages/xaringan/index.html)というRパッケージを導入することで実現されています。


## プレゼンテーションスライドを作成する

プレゼンテーションスライドを作成するには、「Notes」の横にある「+」ボタンをクリックし、メニューから「スライド」を選択します。

![](https://www.dropbox.com/s/vw16diq941jl6tu/2.png?raw=1)

すると、プレゼンテーションスライドエディタが起動します。これはノートのものとほとんど同じです。

![](https://www.dropbox.com/s/1euqu893tckq5ga/3.png?raw=1)

## 書式の設定

![](https://www.dropbox.com/s/obmyk4kte3ghlz7/4.png?raw=1)

**プレゼンテーションスライド**も[RMarkdown](http://rmarkdown.rstudio.com/)を利用しているため、プレゼンテーションスライドの作成方法は[ノートの場合](https://blog.exploratory.io/an-introduction-to-simple-markdown-editor-for-notes-a665a4a18988)とほぼ同様に行うことができます。テキストの書式の設定はMarkdownで行うことができ、Markdownにあまり詳しくなくても、ツールバーメニューを使用して簡単することでテキストをフォーマットすることができます。



## プレビュー

「Run」ボタンをクリックすると、出力が生成されます。

![](https://www.dropbox.com/s/0a46ocmxhz3ddyk/5.png?raw=1)

「Open in Browser」ボタンをクリックすると、Webブラウザに出力をすることができます。

![](https://www.dropbox.com/s/f8lg5nqk8lcqoge/6.png?raw=1)

これは、特に出力を見直しながら編集したい場合に便利です。

![](https://www.dropbox.com/s/kc3hqfkslfyvcf2/7.png?raw=1)

## スライドサイズを選択

4:3と16:9の、2つの一般的なスライドサイズがサポートされています。

![](https://www.dropbox.com/s/e039p22r0tsezhy/8.png?raw=1)

4:3でプレビューした場合

![](https://www.dropbox.com/s/aypa91ngpln68xs/9.png?raw=1)

16:9でプレビューした場合

![](https://www.dropbox.com/s/e6kvrbk8vzwryne/10.png?raw=1)


## カバースライドを作成する

素晴らしいカバースライドを作成するためのテクニックをご紹介します。もちろん、カバースライドだけでなく、スライドのどのページにも利用することができます。

### 背景画像を設定する
背景画像は、各スライドの開始部分で画像のファイルパスまたはURLを指定することで設定できます。

```
background-image: url(/Users/kei/Downloads/flight1.jpg)
background-size: cover;
```

### テキストの水平/垂直アライメントを設定する
スライドの開始部分で、テキストの水平/垂直の配置を設定できます。水平調整の場合は 'left'、 'center'または 'right'、垂直調整の場合は 'top'、 'middle'、 'bottom'のいずれかを設定できます。

```
class: center, middle
```

### 背景色を黒にする

テキストと背景の色を反転させたい場合、各スライドの開始部分で以下のように 'inverse'クラスを設定します。

```
class: inverse
```

上記のテクニックを組み合わせて、以下のようなカバースライドを作成することができます。

```
---
class: center, middle, inverse
background-image: url(/Users/kei/Downloads/airplane1.jpg)
background-size: cover;

## So, Which day of week and what time is the best to fly?
```


![Image from https://unsplash.com/photos/YvCg5X3pWzc](https://www.dropbox.com/s/whroy2dqkuk7pkp/11.png?raw=1)


## スライドを追加する
スライドの区切りには、以下のように3つの連続するマイナスサインを使います。

![](https://www.dropbox.com/s/byx2ox5ghqfqog5/12.png?raw=1)

区切りより下の内容は、新しいスライドに表示されます。

![](https://www.dropbox.com/s/lhj5k2sw6x7xpc8/13.png?raw=1)


## チャートを追加する

作成したチャート、マップ、ピボットテーブルなどを、プレゼンテーションスライドに挿入するできます。

ツールバーのチャートアイコンをクリックすると、チャートを選択するダイアログが開きます。

![](https://www.dropbox.com/s/ogluy7jib9kv7s6/14.png?raw=1)

ダイアログの中で、プレゼンテーションスライド内に埋め込むチャートを選択します。

![](https://www.dropbox.com/s/tpc2nqq8yk7k7l6/15.png?raw=1)

「OK」を選択してクリックすると、チャートの構文がスライドに挿入されます。


![](https://www.dropbox.com/s/uq8tj3go26tighx/17.png?raw=1)

[Run]ボタンをクリックするとプレビューが表示されます。

![](https://www.dropbox.com/s/scc28gma19r8odp/18.png?raw=1)

### チャートの高さを設定する

チャートの高さを％形式で指定できます。デフォルトの高さは「70％」です。幅については、チャートは常に使用可能な幅のすべてを使用します。

<pre><code>
```{exploratory height="100%"}
/airline_delay_2016_09/viz/3
```
</code></pre>

![](https://www.dropbox.com/s/24pt3x6zuni81n3/19.png?raw=1)


## アナリティクスチャートを追加する

アナリティクスビューで表示されているチャートやテーブルなども、同様にプレゼンテーションスライドに追加することができます。ライトのアイコンをクリックすると、アナリティクスチャートを選択するダイアログが表示され、通常のチャートと同様の方法で追加することができます。

![](https://www.dropbox.com/s/5vljoua2w7rcqzx/20.png?raw=1)


## Rコードブロックを追加する

RのコードをRコードブロックに埋め込んで、その場でRコードを実行し、プレゼンテーションスライドに出力を表示することができます。例えばここでは、 'ggplot2'パッケージを使用して、同じプロジェクト内の「airline_delay_2016_09」というデータフレームのDensityチャートを表示しています。

<pre><code>
```{r}
library(ggplot2)
ggplot(airline_delay_2016_09, aes(FL_NUM, color = name)) +
  geom_density()
```
</code></pre>

これにより、以下のような出力が得られます。

![](https://www.dropbox.com/s/wn8j6gckdri50yr/21.png?raw=1)


### コードブロックのスタイルの変更


コードブロックのスタイルは「Code Block Style」から指定できます。

![](https://www.dropbox.com/s/znmsvs6sej0uuij/22.png?raw=1)


### Rのコードを非表示にする

Rコードブロックを実行すると、通常、コマンド自身も画面に表示します。 'echo = FALSE'を設定すると、それを無効にすることができます。

<pre><code>
```{r <b>echo=FALSE</b>}
library(ggplot2)
ggplot(airline_delay_2016_09, aes(FL_NUM, color = name)) +
  geom_density()
```
</code></pre>

![](https://www.dropbox.com/s/wq2by8nrvhzzp47/23.png?raw=1)


### 警告メッセージを非表示にする

Rコードブロックでは、その中にあるRコマンドが警告メッセージを出力する場合、それを画面上に表示します。'warning = FALSE'を設定することで、それを無効にすることができます。
 
 
<pre><code>
```{r echo=FALSE,warning=FALSE} 
library(ggplot2)
ggplot(airline_delay_2016_09, aes(FL_NUM, color = name)) +
  geom_density()
```
</code></pre>


### グラフィック出力のサイズを設定する


以下のように 'out.height'と 'out.width'パラメータを設定することで、グラフィックの出力サイズを調整することができます。単位はピクセルです。

<pre><code>
```{r echo=FALSE, warning=FALSE, <b>out.height="450", out.width="800"</b>}
library(ggplot2)
ggplot(airline_delay_2016_09, aes(FL_NUM, color = name)) +
  geom_density()
```
</code></pre>


![](https://www.dropbox.com/s/gsbhagewt8q77em/24.png?raw=1)



## テキストのフォントを設定する

フォントの種類、、フォントの大きさ、フォントの太さをオプションから選択できます。

![](https://www.dropbox.com/s/q3inxhc09g5qdps/25.png?raw=1)

## スライドの画面を2つに分割する


'.pull-left'と '.pull-right'を使用して、スライド画面を縦に2つに分割したレイアウトを組むことができます。角括弧の中に、それぞれの内容を入れることができます。

<pre><code>
<b>.pull-left</b>[
Flights by Day and Hour

```{exploratory}
/flight_Oct_2013/viz/1
```

]

<b>.pull-right</b>[
Flight Number by States

```{exploratory}
/flight_Oct_2013/viz/3
```
]
</code></pre>

![](https://www.dropbox.com/s/vjs06tev71zuxw7/26.png?raw=1)

## コンテンツを段階的に表示する

箇条書きの内容などを段階的に表示するようなスライドを作成することができます。以下のように2つの連続するマイナスサインを使用して、段階の区切りを指定することができます。

```
# Suggestion

* You should take **Morning Flights** if possible.

--

* You should avoid **Friday** to fly.

--

* Some airlines don't apply these rules.
```

![](https://www.dropbox.com/s/q2ebpoitkc77mrq/27.gif?raw=1)




## パブリッシュして実行する

完成したスライドを実行するには2通りの方法があります。 1つは[exploratory.io](https://exploratory.io/)にパブリッシュし、そこから実行する方法、もう1つは、ファイルシステムにエクスポートして実行する方法です。 まずは、exploratory.ioにパブリッシュして実行する方法を見てみましょう。

「Share」ボタンをクリックすると、スライドのタイトルやその他の情報を設定できます。**パブリックモード/プライベートモード**の設定も可能です。プライベートモードでは招待制で、スライドを公開したい人を限定することができます。

![](https://www.dropbox.com/s/j43wpuuc1erg1hz/28.png?raw=1)

exploreor.io上にパブリッシュすると、「Open in a New Window」ボタンが右上に現れます。


![](https://www.dropbox.com/s/i3wv9h96utgpmbd/29.png?raw=1)

これを押すと、新規ウィンドウが開きスライドが表示されます。


### フルスクリーンモード

**f**キーを押すと**フルスクリーンモード**になります。いざプレゼンテーションを発表、のときにお使いください。フルスクリーンモードを解除するには、**Esc**キーを押します。

### プレゼンターモード

外部のスクリーンまたはモニターを利用する場合、**プレゼンターモード**を使用すると便利です。プレゼンターモードでは、現在のスライドと次のスライドの両方がプレゼンターのメモとともに表示されます。プレゼンターモードへの切り替えは、**p**キーで行います。

![](https://www.dropbox.com/s/bh0bp9cq3nej9i8/30.png?raw=1)

**c**キーを押すことで、ウィンドウを複製することができます。複製されたウィンドウは複製元のウィンドウと同期します。たとえば、複製元のウィンドウでスライドを1枚進めると、複製先のウィンドウでもスライドが1枚進みます。外部モニタやディスプレイを使って発表する場合は、複製を外部モニタにフルスクリーン表示し、自分の手元には複製元をプレゼンターモードで表示し、そこでスライドの操作を行うと便利です。


### キーボード ショートカット

上に紹介したもの以外にも、様々なキーボードショートカットがあります。上手に利用して、よりよいプレゼンテーションをぜひ披露してください。


* hまたは？：ヘルプウィンドウを表示する
* j：次のスライドに移動する
* k：前のスライドに移動する
* b：ブラックアウトモードを切り替える
* m：ミラーモードを切り替える
* c：ウィンドウを複製する
* p：プレゼンターモードを切り替える
* f：フルスクリーンモードを切り替える
* t：プレゼンテーションタイマーをリセットする
* 1–9：指定されたページにジャンプ


すべてを一度に覚えるのは大変です。まずは、hキーだけを覚えておきましょう。そうすれば、そこで全てのショートカットを確認することができます。


## エクスポートして実行する

「Export」ボタンをクリックして、プレゼンテーションスライドをファイルシステムに保存することもできます。

![](https://www.dropbox.com/s/qox0b53pbrdui2z/31.png?raw=1)

これにより、オフライン環境でスライドを表示するために必要なファイルがすべて含まれたzipファイルが生成されます。 'note.html'をダブルクリックしてプレゼンテーションを開始することができます。

![](https://www.dropbox.com/s/ttz2jfpqaxai1ee/32.png?raw=1)

公開して実行した場合と同じショートカットキーを使用することができます。


## 再現性

一度作ったスライドをずっと更新することなく使い続けることができるというのは極めて稀で、大抵の場合は、スライドで使用されているデータの加工手順を変更したり、スライドに表示されているチャートを調整したり、と、さまざまな理由でスライドを更新する必要が出てきます。プレゼンテーションスライドは、「Run」ボタンをクリックして、スライドを再実行するだけで、スライドの中で使われているデータの加工手順やチャートを自動的に最新の状態に更新することができます。チャート画像を再エクスポートしたり、スクリーンショットを取り直す必要はありません。

また、「Re-Import Data」ボタンをクリックすることで、データを最新の状態に更新することができます。

![](https://www.dropbox.com/s/61cjiv53r0v33lf/33.png?raw=1)


これにより、スライドで使用されているすべてのチャートと分析で使われているデータがデータソースから再インポートされ、最新の状態に更新されます。「Re-Import Data」が完了したら、「Run」ボタンをクリックすることで、最新のデータを元にスライドの出力行うことができます。この、スライドの再現性こそが、Exploratoryでスライドを作ることをお勧めする一番の理由です。

## まとめ

Exploratoryのプレゼンテーションスライド機能を使うことで、Exploratory上での発見を、簡単に、効果的に、そして再現性のある方法で、プレゼンテーションスライドにすることができます。また、ノートとプレゼンテーションスライドは共通のMarkdownを利用しているので、Markdownをコピーすることで、ノートをスライドに、またはスライドをノートに簡単に切り替えることできます。



---

まだExploratory Desktopをお持ちでない場合は、[こちら](https://exploratory.io/?utm_campaign=howto-slide-ja&utm_medium=blog&utm_source=qiita)から無料でサインアップできます。

---

### この記事で参照されているRパッケージ/ JSライブラリ

* xaringan: https://github.com/yihui/xaringan
* RMarkdown: https://github.com/rstudio/rmarkdown
* Remark: https://github.com/gnab/remark