情報処理学会 インタラクション 2013
IPSJ Interaction 20132013-Interaction (1EXB-06)
2013/2/28

タッチパネルに適した数式入力方法の提案と数学教材作成ツールの開発
前田 雅之1,2

加藤 直樹1

概要：2 次元的な配置で表現される数式を入力するために，これまで様々な方法が考えられてきた．主なものとしては，マークアップ言語を利用する方法，マウスで入力する方法，手書き認識による方法がある．
これらにはそれぞれの利点があるが，近年普及が目覚ましいタッチパネル付きディジタルデバイスでの入力には十分に適応していない．本稿では，タッチパネルに適した数式入力方法を提案するとともに，その応用例として中学校，高等学校用教材の数学教材作成ツールの開発について述べる．

Development of an Input Method of Mathematical Expressions
for Touch-based Interfaces and a Math Material Generation Tool
Masayuki MAEDA 1,2

Naoki KATO1

Abstract: The markup language, a mouse and handwriting recognition are the tools widely used today toenable users to insert two-dimensional mathematical expressions. Though each has unique features, none ofthem is not optimal for a touch panel computer as is not designed for it. The demand for a more touch-panelfriendly method grows as a wider range of device employs this new technology. In this paper, we proposea tablet friendly input method and develop a material generation tool for math education that incorporates
the application.

1. はじめに不十分な面がある．
本研究では，普及しつつあるタッチパネルに適した数式

通常の 1 次元的な文章とは異なり，2 次元的な配置で表入力方法を提案し，その応用例として中学校，高等学校で現される数式をコンピュータなどのディジタルデバイスにの教材作成に活用できる簡単な数学教材作成ツール（図 1）入力するのは簡単ではない．そのため，これまで様々な方を開発する．

法が考えられてきた．マークアップ言語を利用する方法，マウスでメニューなどから分数や指数などの 2 次元的な数学記号を入力する方法，手書き認識による方法などが主なものである．
近年 Apple 社の iOS，Google 社の Andoroid，Microsoft社の Windows8 などの OS に対応したタッチパネル付きのディジタルデバイスの普及が目覚ましいが，従来の数式入力方法は，主にキーボードとマウスの使用を前提としていて，こうしたディジタルデバイスでの入力に対応するには

1

2

東京学芸大学Tokyo Gakugei University, Koganei, Tokyo 184–8501, Japan
大阪府立泉北高等学校© 2013 Information Processing Society of Japan

図 1 数学教材作成ツール

Fig. 1 Math Material Generation Tool.

158

て一部を書き換えることもできるため教材作成には便利で

2. 様々な数式入力方法ある．

これまでに工夫されてきている数式入力方法について概（3）BrEdiMa*3

観してその長所と短所を考察する．

電気通信大学で開発されたソフトウェアである．

javascript で書かれているため，Web ページに簡単にの
2.1 マークアップ言語を用いる方法

せることができる．出力は，LATEX 形式，MathML 形式，数式の構造などの指定を特別な記号を用いてテキストファイルに記述する方法である．通常 2 次元的に表現さJSON 形式に対応している．Web に接続していれば，インストールも不要で容易に利用することができる [2]．

れる数式を 1 次元的に表現できるため，キーボードのみでの入力が可能である点が長所である．逆に人間が直観的以上の 3 点のソフトウェアはいずれもキーボードとマウに読み取ることが難しく，入力も特別の記号を使いこなスの利用を前提としているため，タッチパネルでの入力はす必要があり，取り扱うのが容易ではない．次に LAT X，簡単ではない．（1）と（2）については，有償であること，MathML を例として示す．

限られた OS 上でしか動作しないこと，出来上がったデー（1）LAT X

タに汎用性がないことも問題点としてあげられる．

である．理数系の論文では事実上の標準形式となっている

2.3 手書き認識による入力方法

EE
ドナルド・クヌースが開発したマークアップ言語の一つ(本論文の原稿も LATEX で作成されている)． TEX または計算機の高速化とともに近年急速に発展している手書き

LAT X と総称されることが多いが，多数のマクロパッケー

Eジが存在し，必要なパッケージを選択してシステムを構築認識の技術を利用して入力する方法である．書き順や数式する必要がある．さらに言語を使いこなすのは必ずしも容の技術を採用している例として，Web Equation *4 があげ易なことではない．

られる．これは，Vision Objects 社が提供している Web ア（2）MathML*1

プリケーションで，指定された領域に手書きで数式を書くの意味解析を行って認識率を高める研究もある [3], [4]．こWeb 技術の標準化団体 W3C の Math ワーキンググルーと自動認識される．出力は，LATEX 形式，MathML 形式にプから勧告されたマークアップ言語の一つである．XML対応している．構文解析も行っているようで数式の認識率の上位規格であり，この形式で書かれた数式は多くの Webはかなり高い．ただ，χ（カイ）と x（エックス），0（ゼ

ブラウザ上で通常の数式として表示される．数式を内容とロ）と O（オー）の区別などは誤認識することも多く，改表示の 2 つの側面から分析してデータを埋め込むのでコン善の余地はある．

ピュータによる処理が容易である．逆にデータ量が増えるため可読性には難点がある．

3. タッチパネルに適した数式入力
近年タッチパネル付きのディジタルデバイスの普及が目覚

2.2 マウス等による入力方法

ましい．これらのハードウェアを制御する OS も Apple 社

分数などの数学記号をマウスによってメニューから選択の iOS，Google 社の Andoroid，Microsoft 社の Windows8して入力する方法である．商品となっているものも含めてなどタッチパネルによる入力を前提としたものが多い．

様々な製品が存在する．ここでは代表的なものについて考

タッチパネルは，操作者が画面に表示された部分を指で押察する．

したり滑らせたりするなど，操作が直観的に理解しやすい（1）Microsoft Word 付属の数式エディタ

ため，コンピュータに慣れていない人にも比較的扱いやすMicrosoft 社の文書処理ソフトウェア MS Word に付属い装置である．教育現場でもその利用が広がってきているしているソフトウェアである．マウスの利用を前提としてが，従来の数式入力方法はタッチパネルでの入力には十分いるが，LAT X のコマンドを簡略化したものを取り入れてEキーボードでの入力でも多くの記号が入力できるようにに適応していないという問題が残っている．そこで，本章なっている [1]．

提案する．

ではタッチパネルによる入力を前提とした数式入力方法を（2）Studyaid*2
数研出版が開発した商用ソフトウェアで，Microsoft 社

3.1 タッチパネルによる入力の特徴の Windows 上で動作する．高等学校，中学校の数学の問

タッチパネルは，見ている場所を直接指でタッチするこ

題を大量にデータベース化しており高等学校教員に広く利とができるうえ，タッチを感知してその場所に新たな表示用されている．データベースの中から必要な問題を選択し
*3
*1
*2

MathML，http://www.w3.org/Math/
数研出版 Studyaid，http://www.chart.co.jp/stdb/© 2013 Information Processing Society of Japan*4

BrEdiMa，http://bredima.sourceforge.jp/
Web Equation，
http://webdemo.visionobjects.com/equation.html

159

表 1 教科書で使用される数学記号（単位：％）

Table 1 Mathematical Symbols in Textbooks(units:%).
中学校

高等学校

単純平均

指数

18.6

20.8

19.7

( )
√

26.5

11.7

19.1

15.4

3.8

9.6

分数

5.9

10.8

8.4

̸

9.1

0.2

4.7図 2 数式入力画面の例

三角関数

0.0

8.0

4.0

Fig. 2 Sample Screenshot of Inputting a Math Expression.

ベクトル0.0

7.4

3.7

座標

3.2

3.83.5

△5.1

0.0

2.6

ができるようにする．そのために画面上に擬似的なボタンを表示する．ただし，すべてのボタンを同時に表示するのを行うことも可能という入出力機能を備えた装置である．

ではなく階層的に表示できるようにする．数式の入力の基直観的な操作が可能なため初心者にとって心理的にも扱い

本は，ボタンをタッチすると入力候補の集合が表示され，やすいものである．

必要な候補をタッチによって選択することで行うものとす

一方で，入力時には指で画面が隠れるため，マウスとはる（図 1）．タッチする部分の初期状態の大きさは，Apple異なり細かい部分を指定することは困難であること，また社のガイドラインを参考に 44 × 44pixel 以上にする．タッキーボードの物理的なボタンのようにタッチしたときの身チに対するフィードバックが得られるように，タッチを感体的なフィードバックは通常得られないという弱点も持っ知するとその部分に着色する方式を採用する．ている．前者の解決法としては，タッチする部分の面積を（2）構成要素の操作ある程度以上にすることが考えられる [5]．Apple 社のガイ

数式を構成する個別の要素（以下 Token）の選択，削除，

ドライン*5 では，タッチを必要とする部分には 44 × 44 ポ

挿入を簡単な手順で可能となるようにする．分数のようにイント以上の大きさを推奨している．後者の解決法としてToken の集合からなる数学記号は枠線で囲むことで，数学は，タッチを感知したときに視覚的に表示色をかえる，聴記号全体の選択が容易にできるようにする（図 2 の分数部

覚的に反応音を出す，特別な方法で触覚を与える [6] など分参照）．具体的には，1 回のタッチで選択，2 回のタッチの工夫がある．

で挿入，del ボタンのタッチで削除できるようにする．また，Token の内容変更は，削除の手順なしで直接再入力す

3.2 入力対象とする数式
本研究では，この数式入力方法の利用ターゲットを中学れば内容変更が可能となるようにする．
（3）入力対象数学記号の選択と画面上での配置校，高等学校の生徒・教員とし，入力対象とする数式を日前節の調査をもとにして，調査した教科書の章末問題で本の中学校，高等学校で使用されるものに限定することと使用されている数学記号すべてが入力できるようにする．

した．

また数学記号の出現頻度に応じて，頻度の高い記号についそこで，日本の中学校，高等学校の教科書の章末問題に使用されている数学記号を調査し，同時に数学記号の出現ては少ない手順で入力できるようにする．
（4）数式全体の表示頻度を調べた．調査結果の一部を 表 1 に示す．この表は，デバイスによってタッチパネルの大きさが異なることを出現頻度が非常に高い英数字，四則演算記号（+, -, ×,÷），考慮して，入力用の数式表示の大きさを動的に変化できる等号（=）を除外し，それ以外の記号のうち出現頻度の高ようにする．また，横方向に長い数式に対応できるよう横いものを相対度数とともに示したものである．なお，調査スクロールできるようにするとともに，縦方向に数式が重対象は採択数の多い教科書 [7], [8] として，中学校の教科書なり数式全体が表示できなくなる場合に対応できるよう表については啓林館「未来へひろがる 数学」シリーズ，高示領域枠を縦方向に自動的に広げて数式全体を表示するよ等学校の教科書については数研出版「新編 数学」シリー

うにする．

ズを用いた．

3.4 実装3.3 入力インターフェースの設計（1）基本入力方式
キーボードやマウスを使用せずタッチパネルだけで入力*5

iOS Human Interface Guidelines，
http://developer.apple.com/© 2013 Information Processing Society of Japan

前節の設計をもとに実装を行った．図 2 は，入力中の画面の例である．その特徴について次に述べる．
さまざまなディジタルデバイスで利用可能となるように，HTML5 と javascript を使用した web アプリケーションとした．HTML5 の canvas 要素を利用して表示を行っ160図 4 数学教材作成ツールによる出力例

Fig. 4 Sample Output by the Math Material Generation Tool.
図 3 数学教材作成ツールの流れ図

Fig. 3 Flow Chart of the Math Material Generation Tool.

リであり，ブラウザ上で LATEX や MathML でかかれた数式を通常の数式として表示するものである．アメリカ数学ている．数式のデータ構造としては，Token と特殊な数学記号の配列を Row 要素とし，特殊な数学記号は 1 つ以上のRow 要素を保持するという構造とした．このような再帰的会などがスポンサーとなっており，Web ブラウザ上での数式表示の標準となりつつある．MathJax の利用は Web に接続されていることを前提にしているが，MathJax のスクな構造によって，繁分数や 2 重根号のような複雑な数式をリプトをダウンロードし，本ツールのコードを一部修正す表現できるようにした．出力は，LATEX 形式として他のアればオフラインでも利用可能である．

プリケーションとの連携を容易になるようにしている．
なお，タッチパネルの使用を前提にしているが，マウス

図 3 は実装したツールの流れ図，図 4 は出力した教材の例である．

を用いた従来型の PC でも利用可能である．

4. 数学教材作成ツールの開発

5. おわりにタッチパネルに適した数式入力方法を提案し，これを応前章で提案した数式入力方法の応用例として，中学校や高等学校で教材作成ができる数学教材作成ツールを開発した．

用した数学教材作成ツールを開発した．中学校，高等学校の現場で実際の業務での利用を通して，他の入力方法，教材作成ツールとの比較を行い，評価をしていくことが今後の課題である．

4.1 機能の設計（1）関数のグラフ挿入
数学の教材として通常必要となる程度の関数のグラフが（注）本論文中で使われているシステム・製品名は，各社の商標または登録商標です．

教材に挿入できるようにするため，グラフ挿入機能を付ける．LATEX の数式を読みとってグラフを描画できるようにする．
（2）レイアウト確認，印刷通常の数式が表示された状態でページ全体のレイアウトを確認しそのまま印刷できるようにするため，レイアウト確認機能をつける．

参考文献
[1]
[2]
[3]

（3）データの保存，呼び出し作成したデータの再利用，参照が可能となるよう，デー[4]

タの保存，呼び出し機能を付ける．

[5]

4.2 実装[6]

Web ブラウザ上で動作するよう，HTML5 と javascriptで記述した．グラフの表示には，HTML5 の canvas 要素，データの保存には Web Storage の技術を利用した．

[7]

通常の数式表示のためには，MathJax *6 のライブラリを使用した．MathJax は，JavaScript でかかれたライブラ*6[8]

Murray Sargent III：Unicode Nearly Plain-Text Encoding of Mathematics，Unicode Technical Note #28(2010)．
中野泰人，森光大輔，村尾裕一：Wiki や blog でも数式を ―BrEdiMa を使って―，数理解析研究所講究録 1624(2009)．
鈴木雅人，松本章代，吉本定伸，大塚友彦：手書き数式解析に基づく基礎数学学習支援システムの開発，信学技報ET2009-129(2010)．
糟谷勇児，山名早人：手書き数式入力システム MathBox，
信学技報 PRMU2006-255(2007)．
西村崇宏，瀬尾明彦，土井幸輝：スイッチのサイズ及び形状が抵抗膜方式タッチパネル携帯端末の操作性に及ぼす影響について，日本機械学会論文集 77 巻 780 号 (2011)．
衛藤春菜，的場やすし，佐藤俊樹，福地健太郎，小池英樹，梶本裕之：指先への電気刺激により触覚提示を行う
タッチディスプレイ技術，情報処理学会インタラクショ
ン 2012(2012)．
内外教育 2011 年 12 月 2 日号：2012 年度中学校教科書採択状況ー文科省まとめ，時事通信社 (2011)．
内外教育 2011 年 12 月 9 日号：2012 年度高等学校教科書採択状況ー文科省まとめ（中），時事通信社 (2011)．

MathJax，http://www.mathjax.org/© 2013 Information Processing Society of Japan

161