Hatena::ブログ(Diary)

驚異のアニヲタ社会復帰への道

Prima Project

2016-11-27

Rmd でreveal.js のhtml スライドプレゼンテーション

Japan.R 2016 が終わりました。参加された方々はお疲れ様でした。

発表者不在というなんとも謎なLT をしたやつがいたらしいですが、Rmd でRpresentation を作って自動プレゼンするやり方について。

自動プレゼン自体はppt にも実装されています。リハーサルモードで行い、スライドめくり時間を記憶で保存すれば、勝手にスライド送りが発動します。

同時に録音ができるのでマイクで吹き込めば勝手にビデオになりますし、後から音声ファイルを追加しても可能です。

 

Rmd の出力形式をいじれば、html でスライドプレゼンテーションができるようになります。そのなかでも縦にスライド送りができるreveal.js はそこそこいいです。

Rmd のヘッダー部分にこう書いておくと個人的にはいい感じの設定になっている。

---
title: "hoge title"
subtitle: <span style="font-size:32pt">hoge subtitle</span>
author: <img src=icon96.gif style="border:none"> hoge author
date: 20161127
output:
  revealjs::revealjs_presentation:
   #self_contained: false
    transition: none 
    highlight: pygments
    #default fade slide convex concave zoom none
    reveal_options:
      #autoSlide: 5000
      width: 960
      height: 720
      control: true
      progress: true
      slideNumber: true
      previewLinks: true
      history: false
      overview: true
      center: false
      left: true
      mouseWheel: false
    fig_width: 7
    fig_height: 7
    fig_caption: true
    #mathjax: local
    #reveal_plugins: ["notes"] #search
    css: "for-revealjs.css"
# render("20161127.Rmd"); browseURL("20161127.html")
# http://rmarkdown.rstudio.com/revealjs_presentation_format.html
---
```{r eval=TRUE, echo=FALSE, warning=FALSE, message=FALSE, comment=""}
knitr::opts_chunk$set(echo=TRUE, eval=TRUE, warning=FALSE, message=FALSE, comment="", fig.height=7, fig.width=7, out.height=400, out.width=400)
knitr::knit_hooks$set(rgl=hook_webgl)
```

 

for-reveal.css として次のファイルを設定しておくとhtml に流し込まれる。

/* for {revealjs} */
/* https://github.com/hakimel/reveal.js/blob/master/css/reveal.css */
/* slide setting */
.reveal .progress {
  height: 15px;
  margin-bottom: 5px;
}

/* slide font setting */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  text-transform: none;
}

.reveal .slide {
  text-align:left;
  font-family: segoe UI, Meiryo;
  vertical-align:top;
  /*background-color:aliceblue*/
}

/* slide-title settintg*/

.reveal section.slide>h1 {
  color: black;
  text-align:center;
  vertical-align:middle;
}

.level1>h1 {
  margin-top: 25%;
}
span.header-section-number {
  margin-right: 0.5em;
}
.reveal li {
  margin-top:0.2em;
}
.reveal ul ul li {
  font-size:0.85em;
  margin-top:0;
}

/* image setting */
.reveal img {
  /*display:block;*/
  /*text-align:center;*/
  /*max-height: 500px;*/
  top: 0;
  bottom: 0;
  left 0;
  right 0;
  margin: auto;
  border:none;
  max-width: auto;
  max-height: auto;
}

/* table setting */
.reveal table{
  border-style: solid;
  background-color:rgba(255, 255, 255, 0.8);
  width:auto;
  height:auto;
}
.reveal table th {
  border-style: solid;
  width:auto;
  height:auto;
}
.reveal table td {
  border-style: solid;
  width:auto;
  height:auto;
}

/* column setting */
.reveal .slides section .no-column {
  width: 96%;
}
.reveal .slides section .column1 {
  float: left;
  width: 48%;
}

.reveal .slides section .column2 {
  float: right;
  width: 48%;
}

/* for htmlwidgets to iframe */
.reveal .slides iframe {
	height: 450px;
	width: 100%;
	margin-left:auto;
	margin-right:auto;
}

/* slide-header setting */
#slide-header {
  text-align: right;
  background-color: #fff;
  opacity: 0.7;
}

#slide-header img {
  max-height: 50px;
  margin: 3px 10px;
  vertical-align: middle;
  opacity: 1.0;
}

#slide-header p {
  font-size: 18px;
  padding: 5px 20px 5px;
}

/* botsu */
/*
.reveal .slides section .column {
   position: fixed;
   width: 48%;
   top: 3em;
   bottom: 0;
}
.reveal .slides section .column1 {
   left:  0;
}
.reveal .slides section .column2 {
   right: 0;
}
*/

/*
.reveal .slides section .column img {
   max-width: 190%;
   max-height: 190%;
   height: auto; 
}
*/

/* other */
/*
.section .reveal .state-background {
  background: #002b36;
}
*

 

自動プレゼンのために音声ファイルを作る。推しの声優に原稿を読んでもらえるのが一番だが、声優とのコネもスタジオもなければPC マイクにちまちま吹き込む。

このときはubuntuこちらを参考に

arecord -t wav -f dat -d 3 -q | lame -b 128 -m s - out.mp3

としたあとに読み上げを開始する。

 

だらだらと吹き込んだあとはこちらを参考に、いい感じに切り出す。

ffmpeg -i input.mp4 -ss 10 -t 20 output.mp4

 

細切れのファイルがいやならまとめる

concatinate するファイル数をconcat=n= で指定する。

ffmpeg -i input1.mp4 -i input2.mp4 -i input3.mp4 -filter_complex "concat=n=3:v=1:a=1" output.mp4

 

さて、プレゼンするhtml スライドと、音声ファイルができたとしよう。

スライド送り時間は、スライドタイトルを指定した # のあとに

{data-autoslide=milliseconds}

でミリ秒を指定する。

音声をバックグランドで流したければ

{data-background-video=hoge.mp3}

で指定する。video なのでmp4 でもよい。

ここで、背景画像も指定したかったので

{data-background=hoge.png data-gackground-video=hoge.mp3 data-autoslide=1000}

と指定すると、hoge.mp3hoge.png も反映されない。

この回避のために頑張ってhoge.png静止画で表示されるmp4 を作ってもよかったけど、面倒だったのでやめた。

 

あとはmarkdwon のかんたん記法もいいけど、もうちょっと凝りたかったらやはりhtml 記法が必要になる。たとえば

改行の

</br>

文字色、サイズ、背景の

<span style="color:brack;background-color:rgba(155,155,155,0.5)">hoge text</span>

 

いいと思います(他力本願