R Presentationの書式設定について #R

2015年2月14日にHiRoshima.R#3で発表した内容のフォローアップです。
なお、ここではR Presentation限定で説明しています。他の手法(R Markdownスライドやslidifyパッケージ)については触れません。¹

R Presentationの基本

まずは当日発表したスライドをRPubsに公開していますので、こちらを確認してください。
RStduioでスライド作成
スライドを作ること自体はそれほど難しくありません。ただR Markdownは最低でも把握しておく必要があります。それほどむずかしいものでもありませんし、今後色々活用できるのでぜひ学んでもらえればと思います。なお、英語ですが本家のR Presentationの説明を一読されるのをオススメします。

R Presentationの仕組み

R Presentationがスライドショーを可能にしているのは、reveal.jsというJavaScriptです。実際にはRStudio(R Presentation)向けに変更されたものが組み込まれています。そしてこのスクリプトによってスライド用のHTMLやCSSが生成されることになります。
私自身がJavaScriptを書けないので詳しくは省略しますが、この名前だけはおぼえておいてください。あとで効いてきます。
以降、上のスライド資料を読んでもらったこととして話を進めます。

R Presentationスライドの中身

ここから多少htmlとCSSの知識(セレクタなど)が必要です。
まず、R PresentationでそのままPreviewしてできたhtmlファイルのうち、主要な要素はこのようになっています(一部修正してます):

<!-- headは省略 -->
<body>
  <div class="reveal">
    <div class="slides">
        <!-- 1枚目(タイトル)のスライド -->
      <section data-state="section" data-transition="linear" data-transition-speed="default">
        <h1>aaa</h1><p></p>
        <div class="slideContent" >
        </div>
      </section>
        <!-- 1枚目のスライドここまで -->
        <!-- 2枚目のスライド -->
      <section data-transition="linear" data-transition-speed="default">
        <h3>First Slide</h3>
        <div class="slideContent" >
          <p>For more details on authoring R presentations click the
          <strong>Help</strong> button on the toolbar.</p>
          <ul>
            <li>Bullet 1</li>
            <li>Bullet 2</li>
            <li>Bullet 3</li>
          </ul>
        </div>
      </section>
        <!-- 2枚目のスライドここまで -->
        <!-- 3枚目のスライド -->
      <section data-transition="linear" data-transition-speed="default">
        <h3>Slide With Code</h3>
        <div class="slideContent" >
          <pre><code class="r">summary(cars)
          </code></pre>
          <pre><code>
     speed           dist       
 Min.   : 4.0   Min.   :  2.00  
 1st Qu.:12.0   1st Qu.: 26.00  
 Median :15.0   Median : 36.00  
 Mean   :15.4   Mean   : 42.98  
 3rd Qu.:19.0   3rd Qu.: 56.00  
 Max.   :25.0   Max.   :120.00  
          </code></pre>
        </div>
      </section>
        <!-- 3枚目のスライドここまで -->
        <!-- 4枚目のスライド -->
      <section data-transition="linear" data-transition-speed="default">
        <h3>Slide With Plot</h3>
        <div class="mediaOnly slideContent" >
          <p><img alt="hoge" src="hogehoge"></p>
        </div>
      </section>
        <!-- 4枚目のスライドここまで -->
    </div> <!-- /.slides -->
  </div> <!-- /.reveal -->
  <!--  <script>の類は全て省略 -->
</body>

ポイントは以下の3点です:
- 全体が.revealで囲われてる
- .slides内の <section>でスライド1枚分
- 1枚目に該当する<section>には自動的に.sectionクラスが当てられている

この部分ではこれだけ把握できれば問題ないです。

R Presentationのテーマ設定

本来reveal.jsにはテーマ切替機能がついていますが、このR Presentationにはテーマ切替機能が省かれています。ですが、reveal.jsにて使用されているテーマのcssファイルを持ってくることで利用可能となります。
この手続きについては、以下の記事をご覧ください:
R Presentationでいい感じのテーマといい感じのフォントを使う
この記事通りにcssファイルを準備して読み込ませれば、reveal.jsで準備されているテーマをR Presentationでも利用できます…が、実は1点だけテーマが当たらないところがあります。それが一枚目のスライドです。

一枚目のスライドにテーマ設定できない理由

原因は上のhtmlコードでポイント3として挙げた、「1枚目には自動的に.sectionクラスがあたってる」けれど、「.reveal .sectionに関する設定がreveal.jsのテーマcssには記載されていない」からです。
詳しく言うと、reveal.jsのテーマcssには.reveal sectionは存在しますが、これは<section>にあたるもので.sectionクラスではありません。ところがR Presentationが吐き出してくるcssにはこの.reveal .sectionが存在するため、タイトルスライドにのみデフォルトのテーマが設定されます。

回避策

読み込ませるcssに以下の内容を記述してください:

.section .reveal .state-background {
  background: (設定を記述)
}

これでタイトルスライド(正確にはRpres上でtype=sectionと設定したスライド)の背景をいじれます。
できれば選択したテーマと統一感がある背景がいいのであれば、おそらくテーマcssのbodyに記載されているbackground:と同じにすればいけるはずです。グラデーションがあたっていると鬼ですが。

typeを指定したスライドについて

上述の「1枚目のスライド問題」、結局のところ「type=hogeと設定したスライド背景はデフォルト設定が反映される」ことに起因します。
つまり、セクション区切りとしてtype=sub-sectionを当てたスライドを用意するとデフォルトのテーマ背景に戻ってしまうのです。このtype=hogeで設定した値が、そのスライド部分の<section>タグ内に.hogeクラスが入ってしまいます。

回避策(拡張)

上の回避策を修正します。type=hogeと指定したスライドがに存在するなら、読み込ませるcssに以下の内容を記述してください:

.hoge .reveal .state-background {
  background: (設定を記述)
}

要するに.hogeの部分を切り替えればOKです。

その他の個別設定

スライド内のタイトルをいじりたい時などのcss記述です。
基本的に最初に.revealを追加すれば大抵うまくアクセスできます。

フォントの種類をいじりたい

上で紹介したこちらの記事をご覧ください:
R Presentationでいい感じのテーマといい感じのフォントを使う

各スライド内のタイトルをいじりたい

例えば「文字を青色にしたい」場合は以下のようになります:

.reveal section>h3 {
  color: blue;
}

これで全ての通常スライド見出しが青色になります。他に設定を加えたければプロパティ値を追記してください。

普通の文字(段落)をいじりたい

以下のようになります:

.reveal p {
  color: red;
}

こうすると基本の地の文(p要素)が赤になります。

箇条書きの円盤をなくしたい

以下のようになります:

.reveal ul {
  list-style-type: none;
}

これでレベル1(一番左)のマークがなくなります。

段落番号をローマ数字にしたい

以下のように(ry

.reveal ol {
  list-style-type: lower-roman;
}

大文字がいい人はupper-romanにしてください。

もっと!もっと他にも!!

cssを勉強してください。そしてその後にreveal.jsのテーマcssの中身を見てみてください。
Bootstrapと違って思ったよりもシンプルな内容でしたので、いい勉強になるかもしれませんよ?

R Presentationでスライドを作るメリット

今回はスライドの書式設定を自分の余裕がある範囲でまとめましたが、正直こだわり過ぎるのは本末転倒かなと思います。
私はR Presentationなどを利用してスライドを作るメリットは以下の4点だと思っています:
1. 分析から報告まで同一ラインで作成可能
2. 動的にRの出力を反映させることができる
3. アウトラインからのスライド作成が非常にスムーズ
4. 少ない手間で(それなりの)見栄えのいいスライドができる

これを簡単に実現し、かつデザインを考えるコストを最小にしてくれているのがR Presentationなどです。ただ標準ではいくつか物足りない部分もあるため、今回このようにまとめた次第です。
でもここで書式にこだわったりしていると、(おそらくR利用者の)多くが慣れていないhtmlやcssに苦慮することになります。そこに必要以上のコストを払うことなく、おもしろいスライドがRPubsにもっと増えることを個人的に楽しみにしています。
Enjoy!!

他の手法ではスライド区切りの記法などから色々変わります。何度か作りなおして移植したことがありますが本当に面倒です… ↩