信学技報
TECHNICAL REPORT OF IEICE.

社団法人 電子情報通信学会
THE INSTITUTE OF ELECTRONICS,
INFORMATION AND COMMUNICATION ENGINEERS

数学の授業におけるインタラクティブなコンテンツを含んだ
授業教材作成システム
その場で解く・描く授業教材の提案
金堀 利洋†

西村博人††

藤本 光史†††

鈴木 昌和††††† 筑波技術短期大学 教育方法開発センター 〒 305–0821 茨城県つくば市春日 4–12†† 九州大学大学院数理学府 〒 812–8581 福岡県福岡市東区箱崎 6–10–1††† 福岡教育大学教育学部 〒 811–4192 福岡県宗像市赤間文教町 1–1†††† 九州大学大学院数理学研究院 〒 812–8581 福岡県福岡市東区箱崎 6–10–1
E-mail: †kanahori@k.tsukuba-tech.ac.jp, ††{ma202041,suzuki}@math.kyushu-u.ac.jp,†††fujimoto@fukuoka-edu.ac.jp
あらまし近年，遠隔講義システムやウェブ・コース管理システムなどの e-Learning システムの開発や利用実践などが行われているが，数式や図を用いる理系分野では，教材作成の負担が大きな問題である．また，単にワープロなどで作成した動作のない教材では e-Learning の利点が制約されてしまう．今回，我々は学生の理解度を高めるため，読み上げる速さに合わせて数式を逐次表示させたり，数式処理システムで計算させたり，数式内のパラメータともに変化するグラフを描かせることができる，インタラクティブで動的な数学用 e-Learning 教材を，プログラミングの知識が無くても，通常のワープロと同じような操作で容易に誰でも作成できるシステムを提案し，そのプロトタイプを示す．
キーワード

授業教材, 教材作成, 数学授業, インタラクティブ

Authoring System for Teaching Materials IncludingInteractive Contents of Mathematics
Teaching Materials Solving and Drawing Mathematical Formulae
Toshihiro KANAHORI† , Hiroto NISHIMURA†† , Mitsushi FUJIMOTO††† , and Masakazu SUZUKI††††† Research Center on Educational Media, Tsukuba College of Technology
4–12 Kasuga, Tsukuba-shi, Ibaraki, 305–0821 Japan†† Graduate School of Mathematics, Kyushu University Kyushu Univ. 36, Fukuoka, 812-8581 Japan††† Department of Information Education, Fukuoka University of Education
1–1 Akamabunkyo-machi, Munakata, 811–4192 Japan†††† Faculty of Mathematics, Kyushu University Kyushu Univ. 36, Fukuoka, 812-8581 Japan
E-mail: †kanahori@k.tsukuba-tech.ac.jp, ††{ma202041,suzuki}@math.kyushu-u.ac.jp,†††fujimoto@fukuoka-edu.ac.jp
Abstract Recently, some e-Learning systems are developed and implemented, e.g. remote lecture system, Web course tool,etc. However, in science subjects using mathematical formulae, graphs and figures, teaching material preparation requires ahuge amount of work for a teacher, and a static content created with a word processor reduces the advantage of e-Learning. In
this paper, we propose a new system, which can be used by operation as easy as a usual word processor s without any programming, and show its prototype. Using the system, interactive and dynamic contents on which users can display a formulain time to reading out it, compute it with computer algebra system, and plot graphs synchronized with parameters of formulae
are easily created.
Key words Teaching Materials, Authoring System, Mathematics, Interactive

編集

授業

新規オブジェクトの配置

○

△（※１）

近年，世界中に普及したコンピュータ，そしてそれらを繋ぐオブジェクトの編集○×

インターネットは様々な分野に影響を与え，我々の生活環境に

オブジェクトの移動○○

数多くの革新的な変化をもたらしている．教育の分野も例外で

逐次表示

指定のみ

表示のみ

1. 導

入

計算機能

○

○

グラフ描画

○

○

手書き入力

○

×

ペンによるマーキング

×○はなく，ウェブブラウザ上からネットワークを介しサーバ上に用意された教材を用いて学習したり，遠隔地から大学等の講義を受けられる遠隔講義システムや，授業科目（コース）毎の講義内容などをオンラインで閲覧したり，学生の評価などを行う※１：

計算結果を新しいオブジェクトとして配置する場合のみ可

コースウェアといった，いわゆる e-Learning システムの開発が

表 1 編集モードと授業モードで使用できる機能

進み，実際に使用され始めている．しかしながら未だ，学校やTable 1 A table of functions of edit mode and presentation mode

塾等の中等教育機関，特に全日制の学校では e-Learning の導入はほとんど進んでいない．学校のような教室での対面授業が基本となるような教育現場では，教師から学生への一方的な知識
情報の伝達が大きな比重を占めており，このような人手による知識伝達の利点を生かせる e-Learning 環境が望まれる．特に数式やグラフ・図を多用する数学などの理系科目では，数式の変形や，数式の変化とグラフの変化間にみる相互関係などが重要である．現状では，そのような動的なコンテンツを作るためには，プログラミングや複雑なソフトウェアの操作等の技術的な知識と時間が必要となり，教師への負担が大きな問題となる．
今回我々は，このような授業形式の教育現場における問題を解決するため，プログラミングの知識を必要せず，一般的なワープロやプレゼンテーションソフトを用いるような操作で容図 1 システムの概観（編集モード）

易にインタラクティブで動的なコンテンツを含んだ授業教材作

Fig. 1 An overview of the system (edit mode)

成システムを提案し，そのプロトタイプを示す．このシステム
では以下のようなコンテンツが作成可能である：• 従来の黒板に板書しながら授業するような感覚で，読み上げる速さに合わせて数式を少しずつ表示，• コンテンツ上の数式を数式処理システムを用いてリアル
タイムに計算，• 数式とグラフを関連付け，描いたグラフが数式内のパラメータの変化に同期して変化．

• 授業でよく用いる，番号で数式を管理し，数式番号によ行う．２つのモードは簡単に切り替えることができ，教材を作成しながら，授業での動作を確認することができる．表 1 に２つのモードで使用できる機能をまとめている．以下，システムの操作と機能の説明を行う．
編集モードの概観を図 1 に示す．これは手書き入力インターフェイスを用いて数式を入力しているところである．編集モードの概観は，一般的なスライドを用いたプレゼンテーションソ
フトの編集画面にあわせて設計している．授業教材は，複数のる数式の演算（e.g. 連立方程式の解法等），

スライドから成り，スライド上にテキストや数式といったオブ• ペンによるコンテンツのマーキング．

ジェクトを配置し，スライドを切り替えて授業を進めていく形

また，数式の入力においても，我々独自開発のキーボード式である．また，操作方法もオブジェクトの配置・大きさの変ベースの数式入力と手書き数式インターフェースの２つのイン

更など共通の機能に関しては，ほとんど変わらないようにしてターフェースを用意しており，従来よく用いられるパレット入

いる．テキストの入力に関しても通常のワープロと同様で，そ力や，LATEX の様な独特なフォーマットによる入力よりも平易

れらのソフトの操作がある程度できる者であれば，新たに特別な数式の入力を可能としている．

な操作方法を覚えることなく操作ができるようにしている．数

今回作成したプロトタイプは，高校数学の授業を対象として
おり，計算，グラフの描画等で処理できる数式は，定数として，式の入力に関しては，後述の独自の数式入力方法を採用し，入力の際の煩わしさを伴わない入力を提供している．

円周率 π , 自然対数の底 e と関数 sin，cos，tan，log，ln と根号

編集モードで配置できるオブジェクトは，以下の４つである：

を含んだ有理式で，手書き数式インターフェースで認識できる

テキストボックス 数式と混在した文章の入力が可能で，文字文字種もそれに準じている．

修飾としてはイタリック，ボールド用意されている．レイアウ

2. システムの概要

トは，左揃え，中央ぞろえ，右揃えを行毎に指定できる．更に，授業時にあらかじめ隠しておきたい部分を指定し，授業時にクシステムは編集モードと，授業モードがあり，編集モードで教材の作成を行い，授業モードで作成した教材を用いて授業をリック，ホイール等の操作でその部分を逐次表示させることも図 2 数式番号とその指定

Fig. 2 An example for a formula number

図 4 数式計算ダイアログ

Fig. 4 An overview of a calculate dialog

図 3 グラフ描画の例

Fig. 3 An example for a graph plot

可能となっている（図 11 参照）．
数式ボックス 数式のみ入力ができ，数式番号を付けることが図 5 システムの概観（授業モード）

Fig. 5 An overview of the system (presentation mode)

できる（図 2 参照）．この数式番号を用いて数式の演算が可能である．また，テキストボックスと同じく，逐次表示部分の指定が可能である．
グラフボックス 指定した定義域で，数式番号の付いた数式のグラフ描画を行う（図 3 参照）．数式は複数指定可能で，同じ座標軸上に重ね合わせて描画が行われる．グラフ描画可能な数式の形は，y = f (x) の形の陽関数のみで，数式に含まれる x

プレゼンテーションソフトにも見られる機能であるが，スライド上にペンを用いてマーキングも可能である．更に，授業モードでもオブジェクトの移動が可能であるため，授業の進行に合わせて，オブジェクトを移動させ，ペンでその関係を入力するといった，黒板の授業では出来ないような，より理解しやすい
動的な授業が可能となっている．

以外の変数はパラメータと見なされる．パラメータは，初期値を 1 として描画され，各パラメータごとに用意されたスライドバーでその値を動かすと，それに同期してグラフも再描画される（図 10 参照）．また，スライドバー以外にも，直接，数式や数値を指定することも可能である．編集モードであらかじめ書
いておくことも出来るが，授業モードでもこれらを指定してその場で描画させることも出来る．
ピクチャーボックス 画像ファイルを指定し，画像を貼り付けることが可能．現在，表の入力に対応していないため，表は画像として貼り付けることになる．
その他の機能として，手書き数式入力インターフェイス（図 1）
や入力した数式に対して，計算を行う数式計算ダイアログ（図 4）を備えている．これらについては後で解説する．
授業モードでは，編集モードで作成したスライドが全画面表示され，ボタンでスライドを送ったり，戻ったりといった操作が出来る（図 5 参照）．また，編集モードで逐次表示指定した部分が隠されて表示される．数式計算機能は使用できるが，計算結果は既存のオブジェクトに挿入することは出来ず，新たな数式ボックスとしての貼り付けのみが可能である．また，既存の3. システムの構成
本システムを構成するいくつかの技術について解説を行う．

3. 1 数式入力システム
本システムでは，テキストボックス・数式ボックスには，我々が開発した，数式を含んだ科学技術文書専用エディタ（Infty

Editor [1]）のコンポーネントを用いており，入力方法もそれに準じている．数式の主な入力方法は以下の２通りである：
キーボード入力 キーボードのみを用いて数式を入力する．特殊な数学記号などは LATEX をベースとしたオンラインヘルプ付のコマンド入力（図 6 参照）や，分数・積分などよく用いられる数式構造に関しては，ショートカットキーなどを用いて入力する．従来よく用いられているパレット式の入力に比べ，キーボードのみを用いて入力するので，文章の入力の流れを妨げる事が少ないのが特徴である．
手書き入力 手書き入力ダイアログにマウスやタブレット・ペンディスプレイなどを用いて，数式を書いて入力を行う（図 1参照）．直感的な入力方法なので，コマンドなど覚える必要が無く簡単に数式を入力できる．その詳細については [2] を参照

よって Risa/Asir に送信される．Risa/Asir は，（必要であれば他の数式処理ソフトを用いて）その計算を実行し，結果を Infty の

IML フォーマットにして返す，といった過程をとっている．

4. 機 能 紹 介
ここでは，本システムの機能とその使用方法を紹介する．

4. 1 数 式 計 算
数式単体に対しての計算機能の基本的な使用方法は以下の通りである：（ 1 ） 計算させたい数式部分をマウスなどで「ドラッグ」して選択．
（ 2 ） 数式計算ダイアログ上の「計算」メニューから計算コ

図 6 オンラインヘルプ付コマンド入力の例

Fig. 6 An example for Mathematical Front-End Processor

マンドを選択して実行（使用できる計算コマンドは後述）．
（ 3 ） 数式計算ダイアログ内に計算結果が表示される．

Asir

Input
(XML)

ConvertStringfor Asir

OpenXM

ComputeConvertOutputon Editor

Paste

OutputOpenXM
on Dialog

Mathematica
PHC

gnuplot

XML
for Infty
Asir

Infty Editor

OX servers（ 4 ） 「貼り付け」メニューをクリックして入力エリアに結果を貼り付ける．
貼り付け方は，（1）カーソル位置に ‘=’ 付きで結果を貼り付ける，（2）カーソル位置から改行して結果を貼り付ける，（3）
カーソル位置にそのまま貼り付ける，そして，（4）新たな数式ボックスとして結果を貼り付ける，といった４種類の方法が選択できる．その変更は数式計算ダイアログのラジオボタンで行う．ただし，授業モード中は必ず（4）が実行される．また，数式計算ダイアログの最小化ボタンをクリックすると，結果表示

図 7 計算過程の概略

領域が隠れ，自動貼り付けモードになる．この状態で上記 1,2

Fig. 7 An overview of the computing processes

を行うと選んだ貼り付け方で，結果が直ちに貼り付けられる．
本システムで現在使用可能な計算メニューは以下の通りでしていただきたい．
また，この他にも LATEX で書いた式をクリップボードを介して張り付けることなど，様々な入力に対応している．
エディタ内部では，数式を含む文書は独自の XML フォーマット（IML）で管理しており，外部コンポーネントとのやり取り
はこの IML を用いて行っている．

3. 2 数式処理システムとの連携
本システムでは，様々な数式処理システムと通信するために，

ある：

• 計算

整数, 小数, 分数の加減乗除，多項式については

和・差・積, 数列計算を行う．

• 展開 式の展開を行う．
• 因数分解 多項式の因数分解を行う．
• 微分 初等関数の微分を行う．選択時，どの変数で微分するかをダイアログで指定する．

• 積分 初等関数の積分を行う．

OpenXM プロトコルを採用している．OpenXM（Open message

今回は高校数学の授業システムということで上記の機能に限

eXchange protocol for Mathematics）は神戸大学を中心とした定しているが，更に，連立方程式を数値解析で解いたり，3 次「数学ソフトウェア間の通信規約に関するプロジェクト」（ [3]）元グラフ描画や，陰関数グラフ描画にも対応可能である．詳細によって研究され，定められた仕様であり，これを利用可能なは [4] を参考にされたい．

数式処理ソフトとして，Risa/Asir, Mathematica, gnuplot, PHC,

4. 2 数式番号による計算

kan/sm1 などがある．OpenXM を利用することにより，一つの数学の授業では，数式に番号を付け，その番号を用いて説明・

インターフェースから様々な数式処理ソフトを透過的に利用可計算を行うことがよくある．本システムでも，数式ボックスに能となる．また，いくつかのソフトを組み合わせた複雑な計算

入力した数式には°
1 〜°
20 までの数式番号を付けることが出来も実行可能となる．

る．割り当てた数式番号を用いてた計算だけでなく，等式間の本システムの計算機能部は，Risa/Asir をメインサーバーと演算・代入が使用できる．

し，他の数式処理ソフトは Risa/Asir を通して呼ばれるように

数式番号の入った数式の計算 数式番号の入った数式を計算になっており，それは IML と Asir 文字列との変換部（converter）

かけた場合，自動的に数式番号の部分が，それに対応した数式と OpenXM 通信部（communication controller）と計算結果表示に置き換えられて計算される．例として，のためのダイアログボックス部からなる．
図 7 は，本システムの計算過程を示したものである．入力
された数式は Asir 文字列に変換され，OpenXM プロトコルに

x−1

・
・
・°
1

x2 + x + 1

・
・
・°
2

図 9 数式選択ダイアログ
図 8 グラフ設定の例

Fig. 9 An overview of a formula select dialog

Fig. 8 An overview of a graph property dialogとした時，新たに “°1 ×°2 ” と入力し，それをドラッグし，数式計
算ダイアログで「展開」を選ぶと，内部で “(x − 1) × (x2 + x + 1)”に置き換えられ，展開が行われる．もちろん，数式内の数式番
号付数式が，更に数式番号を用いた式であっても，置き換えは
再帰的に行われ，正しく計算が行われる．
数式番号付等式間の演算 数式番号付数式が等式である場合にも対応している．例えば，

図 10 パラメータの操作

2y = 3x − 1

・
・
・°
1

3y = 4x + 1

・
・
・°
2

とした時，式 “°
1 ×3−°
2 × 2” を「展開」すると，等式の左辺・右辺それぞれに対して計算が行われ，結果，“0 = x − 5” が得られる．もちろん，等式に等式でないものを加減する，といった演算には対応していない．

Fig. 10 An overview of a parameter slide barの形で，sin，cos，tan，log，ln と根号を含んだ有理式である．
また，定数として，円周率を表す π （プロパティダイアログ内
では，‘pi’．図 8 参照），自然対数の底を表す e が使用可能である．定義域の指定でも，グラフ描画と同じパーサを用いているので，これらの上記の描画可能な関数，定数を用いた数式を

数式番号付等式の代入 数式番号付の等式を他の数式番号付数
式に代入することが出来る．例えば，用いることも出来る．数式を選択した際に，x 以外の変数が含まれていた場合には，自動的にパラメータと見なされる．パラ

A = x2 − 1

・
・
・°
1

メータは初期値を 1 として，グラフは描画され，グラフボック

A2 − A − 6

・
・
・°
2

スの右側にパラメータごとに用意されたスライドバーを用いてとした時，式 “°1 →°2 ” を「因数分解」すると，まず，式°2のA に，式°
1 の右辺を代入したものに対して因数分解が行われ，結果，“(x + 2)(x − 2)(x2 + 1)” が得られる．

連続的に値を変化させることが出来る（図 10 参照）．これによって，関数内のパラメータとグラフとの関係を視覚的に掴むことが可能となる．

4. 4 その他の機能

4. 3 グラフ描画

逐次表示機能 画面に一度に数式が現れると，学生は画面上のグラフ描画はグラフボックスを用いて行う．まず，グラフボッ

数式を追うことが出来ず，理解が上滑りになって理解が深まらクスを配置し，右クリックでプロパティダイアログを出し，設ない．そこで，重要な語句や数式などは最初から表示してしま定を行う（図 8 参照）．ここで，グラフを描画する座標軸の設

わず隠しておき，そこを読み上げる時点で，読み上げる速さに定（範囲・目盛の幅）と描画の細かさを指定する．
「描画の細か併せて表示させるといった，黒板での授業に近い授業速度を保さ」とは，定義域を何分割して計算を行うか，を表している．

つことによって，学生の注目を引きやすくする効果を狙ってい

今回，レスポンスを優先し，グラフ描画のみ計算は独自のパーる（図 11 参照）．

サを使って内部で行っている．その方法は，定義域内の分割点

ペンによるマーキング 授業モードにおいて，重要な語句，公毎に関数の値を計算し，得られた値を結んでいくといった単式などにペンを用いてマーキングする機能も備えている（図 12

純な方法をとっている．次に，「関数の登録」ボタンを押すと，参照）．パレットを用いて，ペンの色，線の太さを指定できる．

ユーザーが作成した数式ボックス内の数式の中の描画可能な数

この機能は，本システム特有のものではないが，授業システム

式の一覧が現れるので，その中からグラフ描画する数式を選択としては欠かせない機能であるので，実装している．

する（図 9 参照）．選択された数式は同じ座標軸上に異なった色で描かれる．描画可能な数式とは，数式番号の付いた y = f (x)在するテキストボックス，（2）数式のみ入力できる数式ボック
ス，（3）複数の数式のグラフを描画できるグラフボックス，（4）
図を貼り込むことの出来るピクチャーボックス，から成る．テ
キストボックスと数式ボックスでは，あらかじめ隠しておきたい部分を指定して，授業モードで，マウスクリック等で読み上げる速さにあわせて，文字を表示していく逐次表示が可能である．数式ボックスでは，数式に番号を付けて管理し，数式番号を用いて，数式間の演算・代入が可能である．グラフボックス
では，数式中のパラメータに割り当てられたスライドバーを動
図 11 隠し文字の指定（上）と逐次表示（下）かすことによって変化する値に，連動してそのグラフが描画さ

Fig. 11 An example for marking a hide box (upper) and its stepwise display

れる．本システムの特徴は上記のような，実際の授業の利点と(lower)

電子教材の利点を生かした，動的でインタラクティブなコンテンツの作成を目指している点である．また，数式の計算では，数式処理システムとの連携のため，OpenXM というプロトコルを用いている．このプロトコルを用いることで，様々な数式処理システムを利用することが可能となっている．今回作成したプロトタイプは，高校数学の授業を対象としており，計算，グ
ラフの描画等で処理できる数式は，sin，cos，tan，log，ln と根号を含んだ有理式としている．
今後はまず，このシステムを用いて実際に授業を行い，更な図 12

ペンによるマーキング

Fig. 12 An example for a pen marking

る改良点を見出す必要があると思われる．また，今回，プロトタイプとして，独自のソフトウェアを開発し，その上で上記の機能を実装したが，技術的に可能であれば，既存のよく用い

5. ま と められているプレゼンテーションソフトウェアにこの機能を実装するといった方法も考えられる．これが実現できれば，更なる

今回我々は，授業形式の教育現場における現在の e-Learning

表現力を教材に持たせることが可能となるであろう．今回は，システム導入上の問題点を解決するため，特別な知識，特殊なe-Learning システムの実際の授業での運用における問題点をあ

操作訓練などを必要せずに，容易にインタラクティブで動的なげ，その解決策を提案したが，逆にこのシステムを教材の配信

コンテンツを含んだ授業教材を作成出来るシステムを提案し，や，遠隔授業といった方面に応用することも考えられる．

そのプロトタイプを示した．本システムで作成する教材は，複数のスライドからなり，以下のようなコンテンツが作成可能である；（1）従来の黒板を用いて授業するような感覚で，読み上げる速さに合わせて数式を少しずつ表示，（2）コンテンツ上の数式を数式処理システムを用いてその場で計算，（3）数式とグラフを関連付け，描いたグラフが数式内のパラメータの変化に同期して変化，（4）授業でよく用いる，番号で数式を管理し，数
式番号による数式の演算，（5）ペンによるコンテンツのマーキ
ングが可能，そして，（6）数式や図のオブジェクトを授業時でも授業の流れに沿って，自由に移動させ，再配置が可能，などである．
数式の入力においても，科学技術文書エディタ — Infty Editor
をコンポーネントとして用いている．このエディタコンポーネ
ントは，入力の流れを妨げないように配慮したキーボードベースの数式入力と直感的な手書き数式インターフェースを用意しており，パレット入力や，コマンドベースの文書フォーマット
による入力よりも平易な数式の入力を可能としている．
本システムは教材の作成を行う編集モードと，作成した教材を用いて授業を行う授業モードから成る．編集モードでは，ス
ライド上に，4 種類のオブジェクトを配置して，コンテンツを作成していく．そのオブジェクトは，（1）テキストと数式の混

文

献[1] 「 数 理 科 学 文 書 情 報 処 理 シ ス テ ム 研 究 プ ロ ジェク ト 」,
http://infty.math.kyushu-u.ac.jp/[2] T. Kanahori, K. Tabata, W. Cong, F. Tamari, and M. Suzuki, “OnLine Recognition of Mathematical Expressions Using Automatic
Rewriting Method”, Proceedings of Advances in Multimodal Interfaces - ICMI 2000, Lecture Notes in Computer Science Vol. 1948
(2000)[3] 「 数 学 ソ フ ト ウェア 間 の 通 信 規 約 に 関 す る プ ロ ジェク ト 」,
http://www.openxm.org/[4] M. Fujimoto, T. Kanahori, and M. Suzuki, “Infty Editor – A
Mathematics Typesetting Tool with a Handwriting Interface and aGraphical Front-End to OpenXM Servers”, Computer Algebra –Algorithms, Implementations and Applications, RIMS Kokyuroku
Vol.1335, pp.217–226 (2003)