プレゼンテーションにおける

動的数学教材の活用

濱田龍義（日本大学/OCAMI）

プレゼンテーションツール

  • Microsoft PowerPoint
  • Apple Keynote
  • LibreOffice Impress
  • Google Slide
  • LaTeX Beamer class
  • Prezi
  • MagicPoint
  • ...

Google Slide

Google Workspace の一部

クラウド上に実装されたオフィス環境

利用例

数式
拡張機能 Equation Editor++
画像として数式を入力
数学素材
GeoGebra
「ファイル」→「画像のエクスポート」
動的ではない！

動的数学教材を含む

プレゼンテーション例

GeoGebraだけで出力
ページ概念を自作する必要あり
GeoGebra Book
「教材集」→「私の教材」→「作成」
GeoGebra教材を複数束ねる仕組
ページ概念あり，BBCodeで入力
bbcode

reveal.js

reveal.jsの特徴

  1. HTMLでページ概念を記述
  2. 断片的表示 (fragment)
  3. 数式記述 (KaTeX, MathJax)
  4. Web埋め込み (IFrame)
  5. Markdown記法

reveal.jsのインストール方法

Basic Setup
reveal.js-master.zip の展開
Full Setup
Node.jsのインストール
外部Markdownファイルを利用する場合に必要

HTMLでページ概念を記述

	    
	      

		

		  

		    
プレゼンテーション

		    
    
		      
  • Microsoft PowerPoint
    • 
		      
  • Apple Keynote
    • 
		      
  • Google Slide
    •

断片的表示 (fragment)

	    
	      

		

		  

		    
プレゼンテーション

		    
    
		      
  • Microsoft PowerPoint
    • 
		      
  • Apple Keynote
    • 
		      
  • Google Slide
    •

Presenting Code

highlight.js

<code class="html" data-trim data-line-numbers="1-3, 10-12 | 6-8">
	    
	      

		

		  

		    
プレゼンテーション

		    
    
		      
  • Microsoft PowerPoint
    • 
		      
  • Apple Keynote
    • 
		      
  • Google Slide
    • 
		    

		  

		

	      

	    
	  
</code>

$\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}
	      \]

GeoGebraの出力

「・・・形式でダウンロード」

  • 3次元データCollada
  • geogebra3D/euclidian3D/printer3D
  • .dae, .htmlの2種類
  • Michael Borcherds, ...
  • 2018-2021?
  • 出力例

山形大学

データサイエンス教育研究推進センター

yuds_logo

DS教育

脇克志先生

Google Colaboratory + IFrame + GeoGebra

IFrameによる埋込

IFrameによる埋込

	    
	      
IFrameによる埋込

背景へのIFrame埋込

Background IFrame

	    
	      

		
背景へのIFrame埋込

まとめ

reveal.js + IFrame
シームレスな動的プレゼンテーション環境
GeoGebraに限らずWeb動的教材の利用が可能
highlight.js
ソースコードの強調
$Ka\TeX$
編集可能な数式表現

課題

  • IFrameとの切り替えにマウス操作が必要
  • 数式の断片的表示については未調査
ソースコード