ヒューマンインタフェース学会研究報告集 Vol.15 No.2
SIG-DE-13

タッチパネル指向の数式入力方法の提案と数学教材作成ツールの試作前田雅之∗1

加藤直樹∗2Development of an Input Method of Mathematical Expressions
for Touch-based Interfaces and a Math Material Generation Tool
Masayuki Maeda∗1, Naoki Kato∗2
Abstract – The markup language, a mouse and handwriting recognition are the tools widely used
today to enable users to insert two-dimensional mathematical expressions. Though each has uniquefeatures, none of them is not optimal for a touch panel computer as is not designed for it. The demand
for a more touch-panel-friendly method grows as a wider range of device employs this new technology.
In this paper, we propose a tablet friendly input method and develop a material generation tool formath education that incorporates the application.

Keywords : Input Method, Mathematical Expression, LaTeX, Touch-based Interface, Touch Panel2.
1.

様々な数式入力方法

はじめにこれまでに工夫されてきている数式入力方法について概観してその長所と短所を考察する．特にタッチパ

数学的な思考を記録したり伝達したりする「数式」

ネルによる入力を前提として検討する．

は，これまで多くの数学者によって発明され改良され2. 1 マークアップ言語を用いる方法
数式の構造などの指定を特別な記号を用いてテキスてきた．数式は複雑な概念を単純な形式で表現できる
優れた表現形式であるが，通常の 1 次元的な言語表

トファイルに記述する方法である．通常 2 次元的に表現とは異なり，2 次元的な配置で表現されるため，コ現される数式を 1 次元的に表現できるため，キーボー

ンピュータなどのディジタルデバイスに入力するのはドのみでの入力が可能である点が長所である．逆に人簡単ではない．そのため，数式入力のためにこれまで間が直観的に読み取ることが難しく，入力も特別の意

様々な方法が考えられてきた．マークアップ言語を利味を持つ文字列を使いこなす必要があり，取り扱うの用する方法，マウスなどを用いてメニューから分数やが容易ではない．次に広く使われている 2 つのマーク指数などの 2 次元的な数学記号を入力する方法，手書アップ言語 LATEX，MathML を例として示す．

き認識による方法などが主なものである．

（1）LATEX

近年 Apple 社の iOS，Google 社の Andoroid，Mi-LATEX は，ドナルド・クヌースが開発した TEX をレスリー・ランポートが機能強化したマークアップ言語

crosoft 社の Windows8 などの OS に対応したタッチパネル付きのディジタルデバイスの普及が目覚ましいが，従来の数式入力方法は，主にキーボードとマウスの使用を前提としていて，こうしたディジタルデバイスでの入力に対応するには不十分な面がある．
本稿では，キーボードやマウスを使わずにタッチパネルのみで利用可能な数式入力方法の提案と，この入力方法を使った応用例として開発した中学校や高等学校での教材作成に活用できる数学教材作成ツール（図1）について述べる．

*1：東京学芸大学, 大阪府立泉北高等学校*2：東京学芸大学*1：Tokyo Gakugei University, Osaka Prefectural Semboku
High School*2：Tokyo Gakugei University

図 1 数学教材作成ツール
Fig. 1 Math Material Generation Tool.

45である．理数系の論文では事実上の標準形式となっている (本論文の原稿も LATEX で作成されている)． TEX

上記 3 点のソフトウェアはいずれもキーボードとマまたは LATEX と総称されることが多いが，多数のマウスの利用を前提としているため，タッチパネルでのクロパッケージが存在し，必要なパッケージを選択し入力は簡単ではない．
（1）と（2）については，有償でてシステムを構築する必要がある．さらに言語を使いあること，限られた OS 上でしか動作しないこと，出こなすのは必ずしも容易なことではない．

来上がったデータに汎用性がないことも問題点として（2）MathML 1

あげられる．

Web 技術の標準化団体 W3C の Math ワーキンググ
ループから勧告されたマークアップ言語である．XML

2. 3

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

計算機の高速化とともに近年急速に発展しているの上位規格であり，この形式で書かれた数式は多くの手書き認識の技術を利用して入力する方法である．書

Web ブラウザ上で通常の数式として表示される．数式を内容と表示の 2 つの側面から分析してデータを埋き順や数式の意味解析を行って認識率を高める研究もめ込むのでコンピュータによる処理が容易である．逆Equation 6 があげられる．これは，Vision Objects
社が提供している Web アプリケーションで，指定されある [3], [4] ．この技術を採用している例として，Webにデータ量が増えるため可読性には難点がある．

た領域に手書きで数式を書くと自動認識される．出力
上記 2 点のマークアップ言語はさまざまなソフト

は，LATEX 形式，MathML 形式に対応している．構文

ウェアで利用されており汎用性のあるものであるが，解析も行っているようで数式の認識率はかなり高い．

キーボードでの入力を前提としていてタッチパネルでただ，χ（カイ）と x（エックス），0（ゼロ）と O直接入力するのには不向きであるといえる．

（オー）の区別などは誤認識することも多く，改善のマウス等による入力方法余地はある．また，一般に公開されている web ページ

2. 2

では，入力できる数式は 1 行に限られており，多くの分数などの数学記号をマウスによってメニューから数式を入力する用途には向いていない．

選択して入力する方法である．商品となっているもの

タッチパネルによる入力方法も含めて様々な製品が存在する．ここでは代表的なも2. 4のについて考察する．

タッチパネルによる数式入力の先行研究も存在する．

（1）Microsoft Oﬃce 付属の数式エディタ

櫻井らの開発した Box 構造と呼ばれる数式表記のイ2

ンターフェース [5] をもとに Apple 社のタブレット型

Microsoft 社の総合ソフトウェア Microsoft Oﬃce に付属しているソフトウェアである．マウスの利用を前提としているが，LATEX のコマンドを簡略化したもの

PC である iPad での入力を可能とした研究である [6] ．
YouTube で公開されたものから判断するとマルチタッを取り入れてキーボードでの入力でも多くの記号が入チなどタッチパネルの特性を生かした入力を可能にし力できるようになっている [1] ．ている 7 ．ただし，Box 構造の一部のみの実装にとど（2）Studyaid 3まっており，実用化には至っていないようである．

数研出版が開発した商用ソフトウェアで，Microsoft

2. 5

予測入力技術社の Windows 上で動作する．高等学校，中学校の数日本語などの自然言語処理においては、頻度の高い学の問題を大量にデータベース化しており高等学校教テキストを集めたデータをもとにした予測入力が広く員に広く利用されている．データベースの中から必要利用されるようになってきている。数式の入力においな問題を選択して一部を書き換えることもできるためても予測入力技術を応用する研究があり数学の一部の教材作成には便利である．

分野においてはその効果が確かめられている [7] ．

（3）BrEdiMa

4

3.

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

タッチパネルに適した数式入力

近年タッチパネル付きのディジタルデバイスの普及

javascript で書かれているため，Web ページに簡単にのせることができる．出力は，LATEX 形式，MathML形式，JSON 形式 5 に対応している．Web に接続してが目覚ましい．これらのハードウェアを制御する OS

いれば，インストールも不要で容易に利用することが社の Windows8 などタッチパネルによる入力を前提とできる [2] ．

したものが多くなっている．タッチパネルは，操作者がも Apple 社の iOS，Google 社の Andoroid，Microsoft

画面に表示された部分を指で押したり滑らせたりする1：MathML，http://www.w3.org/Math/
2：Microsoft Oﬃce, http://oﬃce.microsoft.com/ja-jp/
3：数研出版 Studyaid，http://www.chart.co.jp/stdb/
4：BrEdiMa，http://bredima.sourceforge.jp/
5：JSON http://www.json.org

6：Web Equation，
http://webdemo.visionobjects.com/equation.html
7：YouTube:iPad で数式入力,
http://www.youtube.com/watch?v= -ahGeH1JMI

46

表 1 教科書で使用される数学記号（単位：％）
Table 1 Mathematical Symbols in Textbooks(units:%).

指数( )
√
分数
̸

三角関数
ベクトル
座標△

中学校
18.6
26.5
15.4
5.9
9.1
0.0
0.0
3.2
5.1

高等学校
20.8
11.7
3.8
10.8
0.28.07.4
3.80.0

単純平均
19.7
19.1
9.6
8.4
4.7
4.0
3.7
3.5
2.6

図 2 数式入力画面の例
Fig. 2 Sample Screenshot of Inputting aMath Expression.

算記号（+, -, ×,÷），等号（=）を除外し，それ以外など，操作が直観的に理解しやすいため，コンピューの記号のうち出現頻度の高いものを相対度数とともにタに慣れていない人にも比較的扱いやすい装置である．

示したものである．なお，調査対象は採択数の多い教教育現場でもその利用が広がってきているが，従来の科書 [10], [11] として，中学校の教科書については啓林

数式入力方法はタッチパネルでの入力には十分に適応館「未来へひろがる 数学」シリーズ，高等学校の教していないという問題が残っている．そこで，本章で科書については数研出版「新編 数学」シリーズを用はタッチパネルによる入力を前提とした数式入力方法いた．

を提案する．

3. 1

3. 3

タッチパネルによる入力の特徴

タッチパネルは，見ている場所を直接指でタッチすることができるうえ，タッチを感知してその場所に新（1）基本入力方式

たな表示を行うことも可能という入出力機能を備えたキーボードやマウスを使用せずタッチパネルだけで装置である．直観的な操作が可能なため初心者にとっ入力ができるようにする．そのために画面上に擬似的て心理的にも扱いやすいものである．

なボタンを小型のソフトウェアキーボード状に配置し一方で，入力時には指で画面が隠れるてしまうこて表示する．ただし，すべてのボタンを同時に表示すと，マウスに比べ細かい部分を指示できないこと，まるのではなくグループ別に表示できるようにする．
（以たキーボードの物理的なボタンのようにタッチしたと下，このボタンのグループを入力ガイドと呼ぶ．
）数

きの身体的なフィードバックは通常得られないことと式の入力の基本は，表示されている入力ガイドの中かいった問題点も持っている．一番目，二番目の問題点

ら必要な候補のボタンをタッチによって選択することの解決法としては，タッチする部分の面積をある程度で行うものとする（図 1）．タッチするボタンの初期以上にすることが考えられる [8] ．Apple 社のガイドラ

状態の大きさは，Apple 社のガイドラインを参考に 44

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

× 44 ポイント以上にする．タッチに対するフィードイント以上の大きさを推奨している．三番目の問題点

バックが得られるように，タッチを感知するとその部の解決法としては，タッチを感知したときに視覚的に分に着色する方式を採用する．

表示色をかえる，聴覚的に反応音を出す，特別な方法（2）構成要素の操作で触覚を与える [9] などの工夫がある．

3. 2

入力インターフェースの設計

次に入力インターフェースの設計について述べる．

数式を構成する個別の要素（以下 Token）の選択，入力対象とする数式削除，挿入を簡単な手順で可能となるようにする．分

本研究では，提案する数式入力方法の利用ターゲッ

数や累乗根のように Token の集合からなる数学記号は

トを中学校，高等学校の生徒・教員とし，入力対象と枠線で囲むことで，数学記号全体の選択が容易にでき√する数式を日本の中学校，高等学校で使用されるものb −4ac）参照）．
るようにする（図 2 の分数部分（ −b± 2aに限定する．

2

具体的には，1 回のタッチで選択，2 回のタッチでそこで，日本の中学校，高等学校の教科書の章末問挿入，del ボタンのタッチで削除ができるようにする．

題に使用されている数学記号を調査し，同時に数学記

また，Token の内容変更は，削除の手順なしで直接再号の出現頻度を調べた．調査結果の一部を 表 1 に示入力すれば内容変更が可能となるようにする．なお，

す．この表は，出現頻度が非常に高い英数字，四則演

選択中の Token または数学記号は，着色することで選択中であることが判別できるようにする．

8：iOS Human Interface Guidelines，
http://developer.apple.com/（3）入力対象数学記号の選択と画面上での配置

47図 4 位置ガイド
Fig. 4 Position Navigator.

canvas 内の背景部分をタッチすると図 4 のような位置ガイドが表示される．指をスライドさせることで，

図 3 数式入力インターフェース

左右方向で数式の移動，上方向で数式の拡大，下方向Fig. 3 Interface of Inputting Math Expression.

で数式の縮小が可能である．

3. 5 数式のデータ構造の設計入力された数式のデータを保持するために，MathML の構造などを参考にして入力された数式を保持するデータ構造を設計した．その概略を慣例的な前節の調査をもとにして，調査した教科書の章末問題で使用されている数学記号すべてが入力できるようにする．また数学記号の出現頻度に応じて，頻度の高BNF 記法で以下に示す．終端文字列は，Row である．
Box ::= ’[a-zA-Z0-9.,]’ | ’+’ | ’-’ | ’×’ | ’÷’ | ’=’い記号については少ない手順で入力できるようにする．

| ’[αβγθπσω∆ ± ∓ < ≦ > ≧ =|| ̸ ◦ △ ⊥ ]’| ’//’ | ’[◦∴∵ ≡∼:]’| ’· · ·’′⊃| ’[∈∈∌/ ∋ ∩∪ ⇒⇔⇐⊂ ⊂= ⊃ =∅! → ·∞ ]’（4）数式全体の表示
デバイスによってタッチパネルの大きさが異なることを考慮して，入力用の数式表示の大きさを動的に変化できるようにする．また，横方向に長い数式に対応| ’sin’ | ’cos’ | ’tan’ | ’log’;
Token ::= Box | Brc | Frac | Inta | Intb | Lim | Mtx

できるよう横スクロールできるようにするとともに，縦方向に数式が重なり数式全体が表示できなくなる場| Sqn | Sqrt | Sub | Sum | Sup | Vec;
Brc ::= ’(’, Row, ’)’ | ’{’, Row, ’}’ | ’[’, Row, ’]’| ’|’, Row, ’|’ ;合に対応できるよう表示領域枠を縦方向に自動的に広げて数式全体を表示するようにする．

3. 4

入力インターフェースの詳細

Frac ::= Row, ’/’, Row;
Inta ::= ’ ∫’,[’ ’, Row, ’∧’, Row];

ここでは，数式入力インターフェースの詳細設計について述べる．以下，図 3 において，Token が表示さIntb ::= ’[’, Row, ’]’, ’ ’, Row, ’∧’, Row;
Lim ::= ’lim ’, Row;
Mtx ::= ’(’, ((Row,2*[Row]) | 2*(Row,2*[Row]) |れる図の中央部分の正方形を Box，図の下部に並んだボタンのうち左端のものを del ボタン，その他のボタ

3*(Row,2*[Row])), ’)’ |’{’, (2*Row | 3*Row);√Sqn ::= Row, ’ ’, Row;
√Sqrt ::= ’ ’, Row;
Sub ::= ’ ’, Row;
∑Sum ::= ’ ’, Row, ’∧’, Row;
Sup ::= ’∧’, Row;

ンを数式部品ボタンと呼ぶ．
（1）入力
入力ガイドに表示されたボタンまたは数式部品ボタンをタッチすることで選択中の Box に Token または数式部品が入力される．数式部品ボタンは，左から，分数，指数・添字，根号，括弧・行列，数学記号，関数，小文字アルファベット，大文字アルファベットをdel ボタンをタッチすることで選択中の Box が削除

Vec ::= (⃗ | |⌢),Row;
Row ::= (Token)+;
3. 6
実装
前節までの設計をもとに実装を行った．図 2 は，入される．内容の訂正の場合はそのまま新たな Token ま

力中の画面の例である．実装方法について次に述べる．

たは数式部品を入力することで内容が上書きされる．

さまざまなディジタルデバイスで利用可能となるよ意味していて，数式部品ボタンをタッチすることでそれぞれ別の入力ガイドが表示される．
（2）削除・訂正

うに，HTML5 と javascript を使用した web アプリ（3）挿入

ケーションとした．HTML5 の canvas 要素を利用して選択中の Box をタッチすることでその場所に新たな Box が挿入される．

表示を行っている．数式表示部分は複数の canvas 要（4）移動，拡大・縮小

素を重ねることで数式と入力選択用のボタンをレイヤ

48

図 5 数学教材作成ツール
Fig. 5 Math Material Generation Tool.
図 6 数学教材作成ツール - 内容の編集
Fig. 6 Math Material Generation Tool - Editting Contents.のように表示させている．
数式のデータ構造としては，Token と特殊な数学記号の配列を Row 要素とし，特殊な数学記号は 1 つ以上作成したデータの再利用，参照が可能となるよう，の Row 要素を保持するという構造とした．このようデータの保存，呼び出し機能を付ける．

な再帰的な構造によって，繁分数や 2 重根号のような

4. 2

複雑な数式を表現できるようにした．出力は，LATEX形式として他のアプリケーションとの連携を容易になの設計について述べる．以下，図 5 において，最上段るようにしている．のボタンを左から Preview ボタン，読込ボタン，保存なお，タッチパネルの使用を前提にしているが，マボタンとし，次の段（［ここに入力］とかかれた部分）ウスを用いた従来型の PC でも利用可能である．

4.

を教材内容表示欄，その下の 5 つのボタンは左からテ

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

キスト挿入ボタン，数式挿入ボタン，行内数式挿入ボ

前章で提案した数式入力方法の応用例として，中学

タン，グラフ挿入ボタン，数式削除ボタンと呼ぶ．

校や高等学校で教材作成ができる数学教材作成ツール（1）数式，テキスト，関数のグラフ挿入を開発した．

4. 1

インターフェースの設計

ここでは，数学教材作成ツールのインターフェース

テキスト挿入ボタン，数式挿入ボタン，行内数式挿機能の設計

入ボタン，グラフ挿入ボタンをタッチすることでテキスト，数式，グラフを教材内容表示欄に挿入できる．

ここでは，数学教材作成ツールの機能の設計について述べる．

行内数式挿入ボタンは，改行なしで数式を挿入する．

（1）数式，テキスト，関数のグラフ挿入（2）レイアウト編集

前章で開発した入力方式を利用した数式の入力と日

数式，テキスト，関数のグラフを教材内容表示欄に本語の問題文のためのテキスト入力機能を付けてそれ挿入したあと，レイアウトを編集するには，編集しらを画面上に配置できるようにする．テキストについたい部分をタッチする（選択状態となり背景色が変わては再編集もできるようにする．

る）．表示されるボタンによって，内容の削除，上下の移動が可能である．テキストについては内容の再編

また，数学の教材として通常必要となる程度の関数のグラフが教材に挿入できるようにするため，グラフ集も可能である．
（図 6）

挿入機能を付ける．入力した数式を元にグラフを描画（3）レイアウト確認，印刷して画面上に配置できるようにする．

Preview ボタンをタッチすると，教材内容表示欄に入力された数式・テキスト・グラフが A4 用紙に印刷されたイメージで別ウィンドウに表示される．ブラウ（2）レイアウト編集（1）で入力した数式，テキスト，関数のグラフを削除したり，順序を入れ替えたりできるようにする．

ザの印刷機能で教材の印刷が可能である．

（3）レイアウト確認，印刷（4）データの保存，呼び出し

通常の数式が表示された状態でページ全体のレイア

保存ボタンをタッチすると，教材内容表示欄に入力

ウトを確認しそのまま印刷できるようにするため，レされた内容が保存ボタンの右側にあるファイル名表示

イアウト確認機能をつける．

欄の名前で保存される．ファイル名表示欄には初期値（4）データの保存，呼び出しとして web ページを開いた時の日付と時間が表示され49

図 8 数学教材作成ツールによる出力例
Fig. 8 Sample Output by the Math Material
Generation Tool.

入力方法を応用した数学教材作成ツールを開発した．
これについても中学校，高等学校の現場で実際の業務での利用を通して，他の教材作成ツールとの比較を行

図 7 数学教材作成ツールの流れ図

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

い，評価をしていくことが今後の課題である．
（注）本論文中で使われているシステム・製品名は，ているが変更も可能である．読込ボタンをタッチする

各社の商標または登録商標です．と別ウィンドウが開き，保存したファイルの一覧が表示されるので必要なデータを読み込むことができる．

4. 3実装参考文献

Web ブ ラ ウ ザ 上 で 動 作 す る よ う，HTML5 と[1] Murray Sargent III：Unicode Nearly Plain-Text
Encoding of Mathematics;Unicode Technical Note#28(2010)．
[2] 中野，森光，村尾：Wiki や blog でも数式を ―BrEdiMa を使って―; 数理解析研究所講究録 1624(2009)．
[3] 鈴木，松本，吉本，大塚：手書き数式解析に基づく基礎数学学習支援システムの開発; 信学技報 ET2009129(2010)．
[4] 糟谷，山名：手書き数式入力システム MathBox; 信学技報 PRMU2006-255(2007)．
[5] 櫻井，趙，杉浦，鳥居：自然な数式表記のためのユーザインタフェース; 日本応用数理学会論文誌，Vol.6，No.1(1996)．
[6] 河村, 岡田：マルチタッチ可能なタッチパネルに適した直感的な数式入力機能と数式変換システムの実装;
筑波大学 ICT ソリューションアーキテクト育成プロ
グラム:ソリューション型特別プロジェクト最終報告書(2011)．
[7] 堀江，土方，西田：数式の予測入力インターフェースの開発;WISS2011 予稿集 (2011)．
[8] 西村，瀬尾，土井：スイッチのサイズ及び形状が抵抗

javascript で記述した．グラフの表示には，HTML5 のcanvas 要素，データの保存には Web Storage，JSONの技術を利用した．
通常の数式表示のためには，MathJax 9 のライブラリを使用した．MathJax は，JavaScript でかかれたライブラリであり，ブラウザ上で LATEX や MathML
でかかれた数式を通常の数式として表示するものである．アメリカ数学会などがスポンサーとなっており，Web ブラウザ上での数式表示の標準となりつつある [12] ．MathJax の利用は Web に接続されていることを前提にしているが，MathJax のスクリプトをダウンロードし，本ツールのコードを一部修正すればオフラインでも利用可能である．図 7 は実装したツールの流れ図，図 8 は出力した教材の例である．

5.

おわりにタッチパネルに適した数式入力方法を提案し，実装[9]を行った．入力と出力の物理的な位置を近づけることのできるタッチパネルの特性を生かした入力方式とす[10]

ることができた．キーボードやマウスなしで数式を入力できることの確認と，入力速度や使用感については[11]今後実証実験で確認していく予定である．また，この[12]

膜方式タッチパネル携帯端末の操作性に及ぼす影響について; 日本機械学会論文集 77 巻 780 号 (2011)．
衛藤，的場，佐藤，福地，小池，梶本：指先への電気刺激により触覚提示を行うタッチディスプレイ技術;
情報処理学会インタラクション 2012(2012)．
内外教育 2011 年 12 月 2 日号：2012 年度中学校教科書採択状況ー文科省まとめ; 時事通信社 (2011)．
内外教育 2011 年 12 月 9 日号：2012 年度高等学校教科書採択状況ー文科省まとめ（中）; 時事通信社 (2011)．
Davide Cervone：Math Jax: A Platform for Math-ematics on the Web;NOTICES OF THE AMS 592(2012)．

9：MathJax，http://www.mathjax.org/50（発行日 2013年3月11日）