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.mp3 もhoge.png も反映されない。
この回避のために頑張ってhoge.png が静止画で表示されるmp4 を作ってもよかったけど、面倒だったのでやめた。
あとはmarkdwon のかんたん記法もいいけど、もうちょっと凝りたかったらやはりhtml 記法が必要になる。たとえば
改行の
</br>
文字色、サイズ、背景の
<span style="color:brack;background-color:rgba(155,155,155,0.5)">hoge text</span>