How to create presentation slides by reveal.js and org-mode (org-reveal)

$ cd /Users/taipapa/Data/Slides/reveal.js
$ ls
CONTRIBUTING.md     css                 js                   package.json
LICENSE             demo.html           lib                  plugin
README.md           gruntfile.js        node_modules         test
bower.json          index.html          package-lock.json
$ mv index.html index.html_original
$ cp demo.html index.html
$ ls
CONTRIBUTING.md     css                 index.html_original  package-lock.json
LICENSE             demo.html           js                   package.json
README.md           gruntfile.js        lib                  plugin
bower.json          index.html          node_modules         test
$ npm start

#+begin_src emacs-lisp
(use-package ox-reveal
  :ensure t)
#+end_src

$ cd /Users/taipapa/Sources
$ git clone --recursive https://gitlab.com/oer/emacs-reveal.git
$ cd emacs-reveal
$ pwd
/Users/taipapa/Sources/emacs-reveal
$ ls
CHANGELOG.org           docker                  org-re-reveal-ref
CONTRIBUTING.md         emacs-reveal-submodules paper.bib
LICENSE                 emacs-reveal.el         paper.bib.license
LICENSES                oer-reveal              paper.md
Makefile                org-mode                paper.md.license
README.md               org-re-reveal           tests

#+REVEAL_ROOT: file:///Users/taipapa/Data/Slides/reveal.js

$ cd /Users/taipapa/Sources/emacs-reveal/oer-reveal/css
$ ls
dbis-longtitle.css             folder_inbox.png.license
dbis.css                       index.css
ercis-quote.css                oer-reveal.css
ercis.css                      outgoing-link.png
ercis2019.css                  outgoing-link.png.base
folder_inbox.png               outgoing-link.png.base.license
folder_inbox.png.base          outgoing-link.png.license
folder_inbox.png.base.license  toc-style.css
$ cp oer-reveal.css /Users/taipapa/Slides/reveal.js/css/theme/

$ brew install bower
$ brew info bower
bower: stable 1.8.8 (bottled)
Package manager for the web
https://bower.io/
/usr/local/Cellar/bower/1.8.8 (5,413 files, 16.9MB) *
Poured from bottle on 2020-03-01 at 17:58:14
.....
$ bower install reveal.js-plugins

$ bower install reveal.js-menu

$ cd /Users/taipapa/Data/Slides/reveal.js/bower_components
$ tree -L 2
.
├── reveal.js-menu
│   ├── CONTRIBUTING.md
│   ├── LICENSE
│   ├── README.md
│   ├── bower.json
│   ├── font-awesome
│   ├── menu.css
│   ├── menu.js
│   └── package.json
└── reveal.js-plugins
├── LICENSE
├── README.md
├── anything
├── audio-slideshow
├── bower.json
├── broadcast
├── chalkboard
├── chart
├── customcontrols
├── embed-tweet
├── fullscreen
├── mathsvg
├── package.json
└── spreadsheet

#+REVEAL_ROOT: ./reveal.js # パスは各自の環境に合わせて書き換えていただきたい

#+REVEAL_HLEVEL: 999 # transitionsは全て横向き

#+REVEAL_TITLE_SLIDE: <h3>%t</h3><h5>%a</h5>

# スライド移動のコントローラーは右下に表示．スライド番号は，スライドの番号／全スライド数．
#+REVEAL_INIT_OPTIONS: width:1200, height:800, controlsLayout: 'bottom-right', slideNumber:"c/t", margin: 0, minScale:0.2, maxScale:2.5, transition: 'fade', menu: {side: 'left', titleSelector: 'h1, h2, h3, h4, h5, h6', hideMissingTitles: false, markers: true, custom: false, themes: true, transitions: true, openButton: true, openSlideNumber: false, keyboard: true, sticky: false, autoOpen: true}, chalkboard: {boardmarkerWidth: 8,	toggleChalkboardButton: { left: "80px" }, toggleNotesButton: { left: "130px"}}

#+REVEAL_THEME: oer-reveal

#+OPTIONS: num:nil toc:nil

#+REVEAL_EXTRA_CSS: ./custom_oer.css

# [[https://github.com/yjwen/org-reveal/issues/254][List of external plugins?#254]]
# #+REVEAL_EXTERNAL_PLUGINS: {src: '%sbower_components/reveal.js-menu/menu.js', async: true }
#+REVEAL_EXTERNAL_PLUGINS: {src: '%sbower_components/reveal.js-menu/menu.js'}


# #+REVEAL_EXTRA_CSS: https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

# フッター
#+REVEAL_PREAMBLE: <div class="footer"><p>日本hogefuga外科学会 第??回学術総会　202X年X月XX日 日本のどこか</p></div>

#+TITLE: hoge/fugaによる相補的な治療における高難度症例の治療と成績
#+Author: \\
#+Author: hogefuga大学大学院 hogefuga研究科　hogefuga分野　\\
#+Author: taipapa, 織田信長, 豊臣秀吉, 徳川家康
# #+DATE: 2020年3月22日


* 背景と目的
  - hogeとfugaを比較してみると，一方で難易度の高い症例でも他方では容易に行える場合も多い.
  - 当施設では，一方に片寄ることなく，hogeとfugaを相補的に用いることにより合併症の減少を目指す方針をとっている．
  - そこで，自験例から高難度のhogefuga症例についての方針と成績を主にhogefuga surgeonの立場から検討した.
  - 参照サイト：[[https://github.com/yjwen/org-reveal][Introduction to Org-Reveal]]

* Table
  #+ATTR_HTML: :width 25%

  |        | cTIA/SIE |  stable   | asymptomatic |  P   |
  |        | (n = 12) | (n = 122) |  (n = 186)   |      |
  |        |   <c>    |   <c4>    |     <c4>     | <c>  |
  |--------+----------+-----------+--------------+------|
  | stroke | 1 (8.3%) | 4 (3.3%)  |   5 (2.7%)   | 0.32 |
  | death  |    0     | 1 (0.8%)  |      0       | 0.42 |
  | MI     |    0     | 1 (0.8%)  |      0       | 0.42 |
  | Total  | 1 (8.3%) | 6 (4.9%)  |   5 (2.7%)   | 0.26 |


* hogefuga症例の画像
  [[./figures/hoge_fuga.jpg]]

* hogefuga症例の画像２
  #+ATTR_REVEAL: :frag roll-in
  遅延表示も可能
  #+ATTR_REVEAL: :frag roll-in
  #+ATTR_HTML: :height 600px
   [[./figures/hoge_fuga.jpg]]
* hogefuga症例の画像３
  #+ATTR_REVEAL: :frag roll-in
  - 遅延表示も可能
  #+ATTR_REVEAL: :frag roll-in
  - 画像の大きさを変更することも可能
  #+ATTR_REVEAL: :frag roll-in
  #+ATTR_HTML: :height 400px
  [[./figures/hoge_fuga.jpg]]

* ダブルコラムも可能
  #+REVEAL_HTML: <div class="column" style="float:left; width: 50%">
  Nullam eu ante vel est convallis dignissim.  Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio.  Nunc porta vulputate tellus.  Nunc rutrum turpis sed pede.  Sed bibendum.  Aliquam posuere.  Nunc aliquet, augue nec adipiscing interdum, lacus tellus malesuada massa, quis varius mi purus non odio.
  #+REVEAL_HTML: </div>
  #+REVEAL_HTML: <div class="column" style="float:right; width: 50%">
  #+CAPTION: Hoge-fuga (2020)
   [[./figures/hoge_fuga.jpg]]
  #+REVEAL_HTML: </div>

  #+ATTR_REVEAL: :frag roll-in
  キャプションも可能
* 動画もOK
  #+REVEAL_HTML: <video controls data-autoplay src="./Movies/Knight-33990.mp4"></video>

  #+CAPTION: Coronavirus
* 動画もOK（大きな画面）
  #+REVEAL_HTML: <video class="stretch" controls data-autoplay src="./Movies/Knight-33990.mp4"></video>

/* http://nwidger.github.io/blog/post/making-a-reveal.js-presentation-with-org-reveal/ */
.reveal table th, .reveal table td {
/* text-align: center; */
border: 1px solid white;
}

/* https://stackoverflow.com/questions/4012872/how-to-center-a-footer-div-on-a-webpage/4012888 */
/* https://stackoverflow.com/questions/15629511/how-can-i-make-my-footer-center-to-the-bottom-of-the-page/15629635 */

/* div.footer { */
/*   /\* font-family: "Source Sans Pro", Helvetica, sans-serif; *\/ */
/*   font-size: 2vh; */
/*   color: gray; */
/*   position: fixed; */
/*   left: 400px; */
/*   bottom: 2px; */
/*   /\* z-index: 50; *\/ } */

div.footer {
/* font-family: "Source Sans Pro", Helvetica, sans-serif; */
font-size: 2vh;
color: gray;
position: fixed;
/* left: 400px; */
bottom: 1px;
width: 100%;
text-align: center;
/* margin-left:auto; */
/* margin-right:auto; */
/* margin-top:2em; */
/* z-index: 50; */ }

.reveal .slides section > section {  /*これによりフレームタイトルが上部に固定される．*/
/* height: 100%; */
height: 95%;
/* width:  100%; */
}

.reveal h3 {
font-size: 1.8em; }

.reveal h2 {
font-size: 2.0em; }

/* 段落内の行間の調整 */
/* https://github.com/yjwen/org-reveal/issues/38 */
/* .reveal p { */
/*   line-height: 3; */
/* } */
/* .reveal .org-ul { */
/*   line-height: 2; */
/* } */

/* リストの間のスペースの調整 */
/* https://github.com/yjwen/org-reveal/issues/38 */
.reveal li { margin: 0; padding: 0.5em}

/* Push each slide change to the browser history */
/* スライドの変更をブラウザの履歴に記録する */
Reveal.initialize({
history: true,
});

--- org-reveal_for_blog_oer-FINAL_v2.html	2020-04-20 21:08:18.000000000 +0900
+++ org-reveal_for_blog_oer-FINAL_v2-keyboard.html	2020-04-11 13:28:15.000000000 +0900
@@ -219,7 +219,16 @@
  { src: 'file:///Users/kohkichi/Data/Slides/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
  { src: 'file:///Users/kohkichi/Data/Slides/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
  { src: 'file:///Users/kohkichi/Data/Slides/reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
- { src: 'file:///Users/kohkichi/Data/Slides/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }]
+    { src: 'file:///Users/kohkichi/Data/Slides/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }],
+    keyboard: {
+	    67: function() { RevealChalkboard.toggleNotesCanvas() },	// toggle notes canvas when 'c' is pressed
+	    66: function() { RevealChalkboard.toggleChalkboard() },	// toggle chalkboard when 'b' is pressed
+	    46: function() { RevealChalkboard.clear() },	// clear chalkboard when 'DEL' is pressed
+	     8: function() { RevealChalkboard.reset() },	// reset chalkboard data on current slide when 'BACKSPACE' is pressed
+	    68: function() { RevealChalkboard.download() },	// downlad recorded chalkboard drawing when 'd' is pressed
+	    88: function() { RevealChalkboard.colorNext() },	// cycle colors forward when 'x' is pressed
+	    89: function() { RevealChalkboard.colorPrev() },	// cycle colors backward when 'y' is pressed
+	},
 });
 </script>
 </body>

#+BEGIN_EXPORT html
<iframe src="https://taipapamotohus.github.io/MySlides/" width="1000" height="600" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe>
#+END_EXPORT