数学者のための reveal.js 入門
濱田龍義（日本大学/OCAMI）
https://knxm.github.io/reveal.js/msfd37.html
MFSD37 2025.03.17 早稲田大学
前提知識
- $\LaTeX{}$
- $\LaTeX{}$のコメント文は%で始まる
- $\LaTeX{}$等の処理系におけるコメント文とは，作成者がコード内に説明を添える文のことであり，処理系からは評価されない
知っていると便利
- HTML
- HTMLのコメント文は <!-- --> で挟まれる
- CSS
- CSSのコメント文は /* */ で挟まれる
- JavaScript
- JavaScriptのコメント文は // で始まる
- JavaScriptのコメント文は /* */ で挟まれる
$\LaTeX$ Beamer (2003-)
Copyright
- 2003–2007 Till Tantau
- 2010 Vedran Miletić
- 2011–2015 Vedran Miletić, Joseph Wright
- 2019–2025 Joseph Wright, samcarter
Licenses
- Free Documenation License
- The $ \LaTeX$ Project Public License 1.3c
- GNU General Public License, version 2 or newer
$\LaTeX$ Beamer
入力：$\LaTeX$
\documentclass{beamer}
\title{No Largest Prime Number}
\author{Euclid of Alexandria}
\begin{document}
\begin{frame}
\titlepage
\end{frame}
\begin{frame}
\frametitle{Outline}
\tableofcontents
\end{frame}
\end{document}
出力：PDF
- 断片的表示：
\pause - ◯数式表現
- ☓動的表現
- 動画
- 動的数学教材
- 手書き入力
reveal.js (2013-)
- https://revealjs.com/
- Hakim El Hattab and contributors
- HTML based Presentation framework
- MIT License
- 関連プロジェクト https://slides.com/
reveal.jsのインストール方法
- Full Setup
- Node.jsのインストール
- 外部Markdownファイルを利用する場合に必要
- Basic Setup
- reveal.js-master.zip の展開
- examples/math.html
- jsdelivr, cdnjs等のCDN利用
- template.html
reveal.jsの特徴
入力：examples/math.html
<!doctype html>
<html lang="en"> <!-- 日本語ならば "ja" に変更 -->
<head>
<meta charset="utf-8">
<title>reveal.js - Math Plugin</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../dist/reveal.css">
<link rel="stylesheet" href="../dist/theme/night.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h2>reveal.js Math Plugin</h2>
<p>Render math with KaTeX, MathJax 2 or MathJax 3</p>
</section>
<section>
<h3>The Lorenz Equations</h3>
\[\begin{aligned}
\dot{x} & = \sigma(y-x) \\
\dot{y} & = \rho x - y - xz \\
\dot{z} & = -\beta z + xy
\end{aligned} \]
</section>
<!-- 省略 -->
</div>
</div>
<script src="../dist/reveal.js"></script>
<script src="../plugin/math/math.js"></script>
<script>
Reveal.initialize({
history: true,
transition: 'linear',
mathjax2: {
config: 'TeX-AMS_HTML-full',
TeX: {
Macros: {
R: '\\mathbb{R}',
set: [ '\\left\\{#1 \\; ; \\; #2\\right\\}', 2 ]
}
}
},
// There are three typesetters available
// RevealMath.MathJax2 (default)
// RevealMath.MathJax3
// RevealMath.KaTeX
//
// More info at https://revealjs.com/math/
plugins: [ RevealMath.MathJax2 ]
});
</script>
</body>
</html>
reveal.jsの特徴
出力：Web, PDF
- 断片的表示 (fragment)
- 数式記述 (MathJax2, 3, $\KaTeX$)
- 動画，動的数学 (iframe要素)
- 手書き入力 (Chalkboard)
基本ショートカット
- f: fullscreen
- esc: exit
- o: overview
- g: jump
HTMLでページ概念を記述
<!-- The Content Division element -->
断片的表示
class属性でfragmentを指定
部分表示にはspan要素を用いる．
img要素 (HTML)
2段組
flexbox (CSS)
cf.) How to use two-column layout with reveal.js (stack overflow)
1st column
2nd column
Built-in Plugins
- RevealMath
- RevealNotes
- RevealSearch
- RevealHighlight
- RevealZoom
- RevealMarkdown
RevealMath
$\KaTeX$による数式利用
\[ \tiny \begin{aligned} f(h) &= f(0)+\int_{0}^{h}f'(t)\,dt \\ &= f(0)+\left[-(h-t)f'(t)\right]_{0}^{h}+\int_{0}^{h}(h-t)f''(t)\,dt \\ &= f(0)+f'(0)h + \int_{0}^{h}(h-t)f''(t)\,dt \\ &= f(0)+f'(0)h + \left[-\frac{(h-t)^2}{2}f''(t)\right]_{0}^{h} +\int_{0}^{h}\frac{(h-t)^2}{2}f'''(t)\,dt \\ &= \cdots\\ &= f(0)+f'(0)h + \frac{f''(0)}{2}h^2+\cdots+\frac{f^{(n)}(0)}{n!}h^{n} +\int_{0}^{h}\frac{(h-t)^n}{n!}f^{(n+1)}(t)\,dt \end{aligned} \]$\KaTeX$コード
\[
\tiny
\begin{aligned}
f(h) &= f(0)+\int_{0}^{h}f'(t)\,dt \\
&= f(0)+\left[-(h-t)f'(t)\right]_{0}^{h}+\int_{0}^{h}(h-t)f''(t)\,dt \\
&= f(0)+f'(0)h + \int_{0}^{h}(h-t)f''(t)\,dt \\
&= f(0)+f'(0)h + \left[-\frac{(h-t)^2}{2}f''(t)\right]_{0}^{h}
+\int_{0}^{h}\frac{(h-t)^2}{2}f'''(t)\,dt \\
&= \cdots\\
&= f(0)+f'(0)h + \frac{f''(0)}{2}h^2+\cdots+\frac{f^{(n)}(0)}{n!}h^{n}
+\int_{0}^{h}\frac{(h-t)^n}{n!}f^{(n+1)}(t)\,dt
\end{aligned}
\]
RevealNotes
's' キーで，スピーカーノート表示
RevealSearch
Ctrl+Shift+F でスライド内を検索可能
検索キーワードが最初に出現したスライドを表示
RevealHighlight
ソースコードの表示
monokai.css と zenburn.css が用意されている．
行番号指定コード表示
<code class="html" data-trim data-line-numbers="1-3, 10-12 | 6-8">
</code>
RevealZoom
Alt + click または Ctrl + click でズーム
RevealMarkdown
Markdownとは書きやすく読みやすい書式であり，
Plain textで書かれた文書をHTML等へ変換できる．
## Markdown Slide 1
A paragraph with some text and a [link](https://hakim.se).
---
## Markdown Slide 2
- Item 1
- Item 2
Markdownでfragmentの利用
## Markdown Slide 3
### fragment
- Item 1
- Item 2
Markdown Tools
Pandoc (2006-)
- a universal document converter
- John Macfarlane in UC Berkeley
- $\leftrightarrow$ Markdown,
- $\leftrightarrow \LaTeX{}$, HTML, EPUB, docx
- $\rightarrow$ reveal.js
Marp (2016-)
- Markdown Ecosystem
- Marp for VS Code, Marp CLI
- Hattori Yuki
動画，動的数学
インラインフレーム要素の利用
Outside In (YouTube)
Geometry Center Videos, Revisited
上記から「共有」→「埋め込む」→「コピー」
動的JavaScriptライブラリ
- GeoGebra
- Markus Hohenwarter in JKU Linz
- Cindy.js
- Ulrich Kortenkamp in University of Potsdam
- JSXGraph
- Alfred Wassermann in University of Bayreuth
- p5.js
GeoGebra
Cindy.js
JSXGraph
- 金沢工業大学JSXGraphライブラリ
- 「JSXGraphを用いたWeb教材の開発」 谷口哲也, 中村晃, (2015) 工学教育研究講演会
p5.js
function setup() {
createCanvas(360, 360);
background(204);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
スライドへの手書き入力
Chalkboard.js
- b: チョークボード On/Off
- c: ノートキャンバス On/Off
- x: 色変更（順）
- y: 色変更（逆）
- Del: ノートキャンバスまたはチョークボードボードの削除
- BS: 全削除
- d: ダウンロード (JSON)
印刷物の作成
URLに以下のようにprint-pdfを追加
Webブラウザの印刷機能でPDFに保存
「1枚あたりのページ数」で複数頁印刷
印刷する際は white.css 等に変更
まとめ
- reveal.js + iframe要素
- シームレスな動的プレゼンテーション環境
- 動画や動的数学教材の利用が可能
- $\KaTeX$
- 編集可能な数式表現
- highlight.js
- ソースコードの強調
- Chalkboard.js
- スライドへの手書き入力
Tips
- iframe要素との切替にマウス操作が必要？
- 数式のalignで断片的表示は難しい？
- 手書き入力はミラーリングが必要
- Zoom 配信するとき transition は none
- 入力支援環境推奨 (VS Code, Emacs, vim, ...)
- デバッグはブラウザ開発者ツール
- バージョン管理システムGit, リポジトリサービスGitHubでWeb公開
- JupyterLab + RISE
手軽に始めるreveal.js
jsdelivr, cdnjs 等のCDN(Content Delivery Network)を利用することで，手軽にスライドを作成可能
上記ファイルをコピーして
<title>…</title>と
<section>…</section>を
編集すればOK