はじめに
reveal.jsを使えば、htmlとブラウザの力を生かしたプレゼンができます。でも、パワポから移るにはやはりそれなりに勉強が必要。。
パワポで十分なのではないか
ほぼ十分ですが、データサイエンスを学んだ身からするとhtmlで作成したインタラクティブなグラフをパワポに取り込めないのはかなり痛い！！というか、この点だけ。この点をパワポがクリアしてくれればいつでも戻りたい。
以下、パワポでインタラクティブなグラフをどう扱うか検討した記事です。
過去にプレゼンをpreziで派手に作りすぎて、完全にアウェーになったことがあります。できる限りパワポのシンプルなプレゼンみたいにするポイントもメモっときます。
使い方
インストール
このreveal.js作成者のHakimさんのページからzipファイルをダウンロード、もしくはgit cloneしてください。これ１人だけで作っているのでしょうか。凄すぎます。
https://revealjs.com/installation/
demo.htmlというファイルがあるので、そのファイルのみ編集していきます。スライドを見たいときは、ブラウザーにドラッグドロップしてください。
マークダウン
hakimさんのページに載っているマークダウンの書き方は、なんと動きません！最初のsection data-markdonwのところに data-separator=”—“というのを追加する必要があります。
— で次のスライドです。あとは、下のコードを見てもらった方がわかると思います。
<section data-markdown data-separator="---">
<textarea data-template>
# タイトル１
ああああ [link](https://meknowledge.jpn.org/).
改行はスペース２つにエンター
---
## タイトル２
* ああああ
* tabでスペース
* tabでスペース
* ううう
---
### タイトル３
1. １ばんめ
2. ２ばんめ
2. tabでスペース ２の子供になる
---
## 画像の挿入
---
すいへいせん
***
すいへいせん
---
<font color="Red">あかいろ</font>
<font color="pink">ぴんく</font>
<font color="blue">あお</font>
---
|h1|h2|h3|h4| // 表を作りたいとき
|--|:--:|--:|--|
|a|b|a|b|
|leftleft|centercenter|rightright|b|
|a|b|a|b|
|a|b|a|b|
|a|b|a|b|
|a|b|a|b|
</textarea>
</section>使い方
- ESCでlide overview
- alt押しながらclick でズーム
- chromeだとF1で全画面
- bでスライド一時停止
- sで発表者ノート
発表者ノート
<aside class="notes">
ここにノートかく。ここにノートかく。ここにノートかく。ここにノートかく。ここにノートかく。
</aside>themeの変え方
headerのリンクしているcssを変更します。whiteだとパワポに擬態できます。
<link rel="stylesheet" href="dist/theme/white.css" id="theme">transitionを無くす
時として派手なプレゼンは反感を買う。スライドのトランジションは消しましょう。
Reveal.initialize({
transition: "none",
plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight]
});スライドを移動する矢印を消す
Reveal.initialize({
controls: false,
plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight]
});インタラクティブなグラフを載せる
chart.jsやD3などのjavascript製のグラフはexaple.htmlにそのまま記述することができます。でも、コードが長くなってしまうのでお勧めはグラフを作成したhtmlを外部に置いておいて、それをiframeとして読み込むのがよいと思います。
<section data-background-iframe="bargraph.html" data-background-interactive>
<div
style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgb(255, 255, 255), 0 5px 25px rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
<h2 style="color: #fff;">chartjsで作ったグラフ（htmlファイル）はiframeで読み込むのがおすすめ</h2>
<p>もちろんこのコード内に記述することも可能</p>
</div>
</section>PDFの保存の仕方
node.jsが動く環境でのみ、以下実行可能です。サーバーを立てる必要があるのでインストールが無理な職場パソコンだと難しいかもです。
- コマンドプロンプトで作業フォルダ内に入り、npm start でサーバーを立ち上げる
- http://localhost:8000/ にブラウザーでアクセス
- index.htmlがあるとそれを最初に読み込んでしまうが、そうでなければファイルを選べる
- example.htmlを選択。http://localhost:8000/example.htmlになっている。
- 最後に?print-pdfを付け加える。 http://localhost:8000/example.html?print-pdf でブラウザーを開く。
- 印刷 ⇢ PDF保存 ⇢ 余白なし＋背景のグラフィックをオンにする
最後に
メモを大量に書いたboiler templateを載せておきます。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js – The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<!-- themeはここで変更する -->
<link rel="stylesheet" href="dist/theme/white.css" id="theme">
<!-- black Black background, white text, blue links (default)
white White background, black text, blue links
league Gray background, white text, blue links
beige Beige background, dark text, brown links
sky Blue background, thin dark text, blue links
night Black background, thick white text, orange links
serif Cappuccino background, gray text, brown links
simple White background, black text, blue links
solarized Cream-colored background, dark green text, blue links
blood Dark background, thick white text, red links
moon Dark blue background, thick grey text, blue links -->
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h3>reveal.jsテンプレート
</h3>
<p>
<small>発表者名</small>
</p>
</section>
<section data-markdown data-separator="---">
<textarea data-template>
# タイトル１
ああああ [link](https://meknowledge.jpn.org/).
改行はスペース２つにエンター
---
## タイトル２
* ああああ
* tabでスペース
* tabでスペース
* ううう
---
### タイトル３
1. １ばんめ
2. ２ばんめ
2. tabでスペース ２の子供になる
---
## 画像の挿入
---
すいへいせん
***
すいへいせん
---
<font color="Red">あかいろ</font>
<font color="pink">ぴんく</font>
<font color="blue">あお</font>
---
|h1|h2|h3|h4|
|--|:--:|--:|--|
|a|b|a|b|
|leftleft|centercenter|rightright|b|
|a|b|a|b|
|a|b|a|b|
|a|b|a|b|
|a|b|a|b|
</textarea>
</section>
<section>
<h2>こんにちは</h2>
<p>
内容内容。内容内容。内容内容。内容内容。内容内容。
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>縦スライド</h2>
<p>１番上</p>
</section>
<section>
<h2>縦スライド２</h2>
<p>２番目
</p>
</section>
</section>
<section>
<h2>使い方</h2>
<p>
ESCでlide overview
</p>
<p>
alt押しながらclick でズーム
</p>
<p>
chrome F1で全画面
</p>
<p>
bでスライド一時停止
</p>
<p>
sで発表者ノート
</p>
<aside class="notes">
ここにノートかく。ここにノートかく。ここにノートかく。ここにノートかく。ここにノートかく。
</aside>
</section>
<section>
<p>r-fit-text 1行を画面いっぱいに表示する</p>
<h2 class="r-fit-text">綺麗な動きのためには、タグが同じ・文字が同じが重要</h2>
</section>
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<h2 class="r-fit-text">
綺麗な自動アニメーションのためには、タグが同じ・文字が同じが重要
</h2>
<h2>
上の文字
</h2>
<p>
真ん中
</p>
<h3>
下の文字
</h3>
</section>
<section data-auto-animate data-auto-animate-easing="cubic-bezier(0.770, 0.000, 0.175, 1.000)">
<h2 class="r-fit-text">
綺麗な自動アニメーションのためには、タグが同じ・文字が同じが重要
</h2>
<h3>
下の文字
</h3>
<p>
真ん中
</p>
<h2>
上の文字
</h2>
</section>
<section>
<section id="fragments">
<h2>アニメーション２</h2>
<p>トランジションを指定する</p>
<p class="fragment">
１つ目 １行目
</p>
<p>
<span class="fragment">
２つ目 ２行目最初
</span>
<span class="fragment">
３つ目 ２行目最後
</span>
</p>
</section>
<section>
<h2>Fragmentのトランジション</h2>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p>
<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
<span style="display: inline-block;" class="fragment fade-up">up, </span>
<span style="display: inline-block;" class="fragment fade-down">down, </span>
<span style="display: inline-block;" class="fragment fade-left">left</span>
</p>
<p class="fragment fade-in-then-out">fade-in-then-out</p>
<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
<p>
<span class="fragment highlight-red">
red
</span>
<span class="fragment highlight-blue">
blue</span>
<span class="fragment highlight-green">
green
</span>
</p>
</section>
</section>
<section id="themes">
<h2>Themes</h2>
<p>
以下のボタンを押すことでthemeを試せる。設定はheadのCSSの読み込みのところで行う <br>
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black
(default)</a> -
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a>
<br>
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a>
-
<a href="#"
onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
</p>
</section>
<section>
<section data-background="#43d1e0">
<h2>スライド背景色</h2>
<p>
色
</p>
<pre>
<code class="hljs html">
<section data-background="#43d1e0">
</code>
</pre>
</section>
<section data-background="https://meknowledge.jpn.org/wp-content/uploads/2020/08/DSC_2941-scaled.jpg">
<h2>
画像の背景
</h2>
<pre>
<code class="hljs html">
<section data-background="image.png">
</code>
</pre>
</section>
<section
data-background-video="https://meknowledge.jpn.org/wp-content/uploads/2020/12/elbow1-4.mp4"
data-background-color="#000000">
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
<h2>ビデオのバックグラウンド divは文字を乗っけるブロック色を規定</h2>
<pre>
<code class="hljs html" style="word-wrap: break-word;">
<section data-background-video="video.mp4,video.webm">
</code>
</pre>
</div>
</section>
</section>
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
<h2>文字と背景のトランジションを別にする（それぞれglobal設定可能）</h2>
<p>
<pre>
<code class="hljs html" style="word-wrap: break-word;"><section data-transition="slide" data-background-transition="zoom">
</code>
</pre>
</p>
</section>
<section data-background-iframe="https://kindpark.jpn.org/" data-background-interactive>
<div
style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgb(255, 255, 255), 0 5px 25px rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
<h2 style="color: #fff;">ウェブを背景にする</h2>
<p>ウェブの操作もできる。<br> divのスタイルは文字を載せるブロック</p>
</div>
</section>
<section data-background-iframe="graph/bargraph.html" data-background-interactive>
<div
style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgb(255, 255, 255), 0 5px 25px rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
<h2 style="color: #fff;">chartjsで作ったグラフ（htmlファイル）はiframeで読み込むのがおすすめ</h2>
<p>もちろんこのコード内に記述することも可能</p>
</div>
</section>
<section>
<h2>順番なしリスト</h2>
<ul>
<li>No order here</li>
<li>あああああ</li>
<li>いいいいい</li>
<li>ううううう</li>
</ul>
</section>
<section>
<h2>順番ありリスト</h2>
<ol>
<li>あああああ</li>
<li>いいいいい</li>
<li>ううううう</li>
</ol>
</section>
<section>
<h2>テーブル</h2>
<table>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$1</td>
<td>7</td>
</tr>
<tr>
<td>Lemonade</td>
<td>$2</td>
<td>18</td>
</tr>
<tr>
<td>Bread</td>
<td>$3</td>
<td>2</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>PDF保存の仕方</h2>
<p>
コマンドプロンプトで、作業フォルダ内に入り、npm start でサーバーを立ち上げる
</p>
<p>
http://localhost:8000/ にアクセス
</p>
<p>
index.htmlがあるとそれを最初に読み込んでしまうが、そうでなければファイルを選べる
</p>
</section>
<section>
<h2>PDF保存の仕方 つづき</h2>
<p>
ファイル.htmlを選択。http://localhost:8000/●●.htmlになっている。
</p>
<p>
最後に?print-pdfを付け加える。
</p>
<p>
http://localhost:8000/●●.html?print-pdf
</p>
<p>
印刷 ⇢ PDF保存 ⇢ 余白なし＋背景のグラフィックをオンにする
</p>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// Also available as an ES module, see:
// https://revealjs.com/initialization/
Reveal.initialize({
controls: false, //矢印消す
transition: "none",
// none Switch backgrounds instantly
// fade Cross fade — default for background transitions
// slide Slide between backgrounds — default for slide transitions
// convex Slide at a convex angle
// concave Slide at a concave angle
// zoom Scale the incoming slide up so it grows in from the center of the screen
// Learn about plugins: https://revealjs.com/plugins/
plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight]
});
// Reveal.initialize({
// // Display presentation control arrows
// controls: true,
// // Help the user learn the controls by providing hints, for example by
// // bouncing the down arrow when they first encounter a vertical slide
// controlsTutorial: true,
// // Determines where controls appear, "edges" or "bottom-right"
// controlsLayout: 'bottom-right',
// // Visibility rule for backwards navigation arrows; "faded", "hidden"
// // or "visible"
// controlsBackArrows: 'faded',
// // Display a presentation progress bar
// progress: true,
// // Display the page number of the current slide
// // - true: Show slide number
// // - false: Hide slide number
// //
// // Can optionally be set as a string that specifies the number formatting:
// // - "h.v": Horizontal . vertical slide number (default)
// // - "h/v": Horizontal / vertical slide number
// // - "c": Flattened slide number
// // - "c/t": Flattened slide number / total slides
// //
// // Alternatively, you can provide a function that returns the slide
// // number for the current slide. The function should take in a slide
// // object and return an array with one string [slideNumber] or
// // three strings [n1,delimiter,n2]. See #formatSlideNumber().
// slideNumber: false,
// // Can be used to limit the contexts in which the slide number appears
// // - "all": Always show the slide number
// // - "print": Only when printing to PDF
// // - "speaker": Only in the speaker view
// showSlideNumber: 'all',
// // Use 1 based indexing for # links to match slide number (default is zero
// // based)
// hashOneBasedIndex: false,
// // Add the current slide number to the URL hash so that reloading the
// // page/copying the URL will return you to the same slide
// hash: false,
// // Flags if we should monitor the hash and change slides accordingly
// respondToHashChanges: true,
// // Push each slide change to the browser history. Implies `hash: true`
// history: false,
// // Enable keyboard shortcuts for navigation
// keyboard: true,
// // Optional function that blocks keyboard events when retuning false
// //
// // If you set this to 'focused', we will only capture keyboard events
// // for embedded decks when they are in focus
// keyboardCondition: null,
// // Disables the default reveal.js slide layout (scaling and centering)
// // so that you can use custom CSS layout
// disableLayout: false,
// // Enable the slide overview mode
// overview: true,
// // Vertical centering of slides
// center: true,
// // Enables touch navigation on devices with touch input
// touch: true,
// // Loop the presentation
// loop: false,
// // Change the presentation direction to be RTL
// rtl: false,
// // Changes the behavior of our navigation directions.
// //
// // "default"
// // Left/right arrow keys step between horizontal slides, up/down
// // arrow keys step between vertical slides. Space key steps through
// // all slides (both horizontal and vertical).
// //
// // "linear"
// // Removes the up/down arrows. Left/right arrows step through all
// // slides (both horizontal and vertical).
// //
// // "grid"
// // When this is enabled, stepping left/right from a vertical stack
// // to an adjacent vertical stack will land you at the same vertical
// // index.
// //
// // Consider a deck with six slides ordered in two vertical stacks:
// // 1.1 2.1
// // 1.2 2.2
// // 1.3 2.3
// //
// // If you're on slide 1.3 and navigate right, you will normally move
// // from 1.3 -> 2.1. If "grid" is used, the same navigation takes you
// // from 1.3 -> 2.3.
// navigationMode: 'default',
// // Randomizes the order of slides each time the presentation loads
// shuffle: false,
// // Turns fragments on and off globally
// fragments: true,
// // Flags whether to include the current fragment in the URL,
// // so that reloading brings you to the same fragment position
// fragmentInURL: true,
// // Flags if the presentation is running in an embedded mode,
// // i.e. contained within a limited portion of the screen
// embedded: false,
// // Flags if we should show a help overlay when the question-mark
// // key is pressed
// help: true,
// // Flags if it should be possible to pause the presentation (blackout)
// pause: true,
// // Flags if speaker notes should be visible to all viewers
// showNotes: false,
// // Global override for autolaying embedded media (video/audio/iframe)
// // - null: Media will only autoplay if data-autoplay is present
// // - true: All media will autoplay, regardless of individual setting
// // - false: No media will autoplay, regardless of individual setting
// autoPlayMedia: null,
// // Global override for preloading lazy-loaded iframes
// // - null: Iframes with data-src AND data-preload will be loaded when within
// // the viewDistance, iframes with only data-src will be loaded when visible
// // - true: All iframes with data-src will be loaded when within the viewDistance
// // - false: All iframes with data-src will be loaded only when visible
// preloadIframes: null,
// // Can be used to globally disable auto-animation
// autoAnimate: true,
// // Optionally provide a custom element matcher that will be
// // used to dictate which elements we can animate between.
// autoAnimateMatcher: null,
// // Default settings for our auto-animate transitions, can be
// // overridden per-slide or per-element via data arguments
// autoAnimateEasing: 'ease',
// autoAnimateDuration: 1.0,
// autoAnimateUnmatched: true,
// // CSS properties that can be auto-animated. Position & scale
// // is matched separately so there's no need to include styles
// // like top/right/bottom/left, width/height or margin.
// autoAnimateStyles: [
// 'opacity',
// 'color',
// 'background-color',
// 'padding',
// 'font-size',
// 'line-height',
// 'letter-spacing',
// 'border-width',
// 'border-color',
// 'border-radius',
// 'outline',
// 'outline-offset'
// ],
// // Controls automatic progression to the next slide
// // - 0: Auto-sliding only happens if the data-autoslide HTML attribute
// // is present on the current slide or fragment
// // - 1+: All slides will progress automatically at the given interval
// // - false: No auto-sliding, even if data-autoslide is present
// autoSlide: 0,
// // Stop auto-sliding after user input
// autoSlideStoppable: true,
// // Use this method for navigation when auto-sliding (defaults to navigateNext)
// autoSlideMethod: null,
// // Specify the average time in seconds that you think you will spend
// // presenting each slide. This is used to show a pacing timer in the
// // speaker view
// defaultTiming: null,
// // Enable slide navigation via mouse wheel
// mouseWheel: false,
// // Opens links in an iframe preview overlay
// // Add `data-preview-link` and `data-preview-link="false"` to customise each link
// // individually
// previewLinks: false,
// // Exposes the reveal.js API through window.postMessage
// postMessage: true,
// // Dispatches all reveal.js events to the parent window through postMessage
// postMessageEvents: false,
// // Focuses body when page changes visibility to ensure keyboard shortcuts work
// focusBodyOnPageVisibilityChange: true,
// // Transition style
// transition: 'slide', // none/fade/slide/convex/concave/zoom
// // Transition speed
// transitionSpeed: 'default', // default/fast/slow
// // Transition style for full page slide backgrounds
// backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom
// // The maximum number of pages a single slide can expand onto when printing
// // to PDF, unlimited by default
// pdfMaxPagesPerSlide: Number.POSITIVE_INFINITY,
// // Prints each fragment on a separate slide
// pdfSeparateFragments: true,
// // Offset used to reduce the height of content within exported PDF pages.
// // This exists to account for environment differences based on how you
// // print to PDF. CLI printing options, like phantomjs and wkpdf, can end
// // on precisely the total height of the document whereas in-browser
// // printing has to end one pixel before.
// pdfPageHeightOffset: -1,
// // Number of slides away from the current that are visible
// viewDistance: 3,
// // Number of slides away from the current that are visible on mobile
// // devices. It is advisable to set this to a lower number than
// // viewDistance in order to save resources.
// mobileViewDistance: 2,
// // The display mode that will be used to show slides
// display: 'block',
// // Hide cursor if inactive
// hideInactiveCursor: true,
// // Time before the cursor is hidden (in ms)
// hideCursorTime: 5000
// });
</script>
</body>
</html>