数式表示に特化した動的ウェブサイトの構築
About the road net maintenance that Japanese forestry IT should support
山下 伸男，江見 圭司（京都情報大学院大学）
Nobuo Yamashita，Keiji Emi（The Kyoto College of Graduate Studies for Informatics）

Abstract
There is MathML as the markup language which does numerical formula indication. The
markup which does very small deﬁnition is the feature, but interpretability of source cord isn't across-browser badly, it isn't also a multi-device. So TEX,AsciiMath in addition to MathML could
be indicated now by a cross-browser and a multi-device by MathJax in the JavaScript library
where numerical formula indication is supported. The site as which MathJax is adopted isincreased, and TEX is used on the web. Interpretability has often developed it using TEX with a
lot of users by this project.

1．はじめに1-1

現状

行うサイトがある。開発したインタフェースには，表示された数式とこれらのプログラムを連携する機能を実装した。

本稿は，ウェブ上の数式の表示後に再利用する方

数式処理やセマンティックウェブへの対応は詳し

法を考察し，インタラクティブな操作が可能な動的

くは扱わなかった。また，数式に関する先行事例はウェブサイトを構築した。

ウェブサイトの文献 [2] の最後の付録において示し

現在，PC のみならず，スマートフォンやタブレッている。

トが普及し，技術的に「いつでも，どこでも，何でも，誰でも」ネットワークの恩恵を享受できるユビ

78

1-2

ウェブ上の数式表示

キタス社会 [1] となっている。ウェブ上のコミュニ

数式の望ましい利用形式を視認性や再利用性の観ケーションや文書において，見栄えの良い数式を手点から考察する。ウェブブラウザ（以下，単にブラ軽に扱える環境は十分ではない。たとえば，e ラー

ウザとする）で数式表示を行う方法はいくつか種類

ニングや質問投稿サイトでは数式表示は普及していがあり，それを表 1-1 にまとめた。A 〜 D までのない。そこで，数式に特化したインタフェースを実方法はすでに先行研究などがあるので，そちらを参装することで，手軽な数式入力だけでなく，ウェブ

考にしてほしい [2][3]。ここでは E や F を用いた

ページ上の数式に対するインタラクティブな操作が方式を採用した。

可能になることを示す。その上，入力した数式を対

ここでは，視認性はウェブページ上で表示された象とした検索機能や数式の再利用をしてウェブ上の数式を人間が認識しやすく，自然で美しい見栄えを数式を含むコミュニケーションの質を充実させるこ意味する。再利用性は表示された数式を対象としたとが可能にした。

再利用の可能性であり，そのためのデータ形式で表

ウェブ上で数式を扱う際に，数式を使って学問上現されていることを意味する。数式の再利用性によの問題を解決する数式処理やグラフなどの可視化をり，人間とウェブページの間のインタラクティブ性

NAIS Journal表 1-1

ウェブ上の数式表示の方法と視認性・再利用性

分類

表示方法

A

プレーンテキスト∫〔0, ∞〕（1 − x）/ √（1+x）dx

具体例

B

タグ利用

HTML の〈table〉で分数を麦現，CSS など

C

面像

mimeTex（CGI）などで画像生成

D

PDF や動画作成後，サーバにアップロード

○

×

E

ウェブ入力

MathJax，MathML

○

○

F

フリーハンドフリーハンドの数式の画像や動画△

×やウェブサイト間の相互運用性が生じる。

視認性

再利用性

×

○

○

○または×

△

○

に示す MathML と対比すると簡潔なコマンドである（図 1-1 参照）。

1-2-1 数式のウェブプログラミング 表 1-1 の E の方法で数式の精巧な表現をウェブ
ここでは，視認性はウェブページ上で表示された数式
ここでは，視認性はウェブページ上で表示された数式プログラミングで実現する方法である。ウェブペー
を人間が認識しやすく，自然で美しい見栄えを意味すを人間が認識しやすく，自然で美しい見栄えを意味す
ジ上で数式を表示するためのJavaScript のライブる。再利用性は表示された数式を対象とした再利用のる。再利用性は表示された数式を対象とした再利用のラリやプログラミング言語の具体例を述べる。
可能性であり，そのためのデータ形式で表現されてい可能性であり，そのためのデータ形式で表現されていMathJax[4]は美しい数式表示を行う JavaScriptることを意味する。数式の再利用性により，人間とウることを意味する。数式の再利用性により，人間とウのライブラリである。ウェブページ上でTEX[5] の数式ェブページの間のインタラクティブ性やウェブサイェブページの間のインタラクティブ性やウェブサイ
ト間の相互運用性が生じる。

コマンドや
Presentation MathML[6]や AsciiMath[7]ト間の相互運用性が生じる。
を 記 述 す る と，HTML と CSS，Presentation
１－２－１ 数式のウェブプログラミングMathML，SVGのいずれかに変換してブラウザが１－２－１ 数式のウェブプログラミング 表 1-1 の E の方法で数式の精巧な表現をウェブプロ
JavaScript が有効
レンダリングする。ブラウザで
 表 1-1 の E の方法で数式の精巧な表現をウェブプロ
グラミングで実現する方法である。ウェブページ上でであれば，PCだけでなくタブレットやスマート
グラミングで実現する方法である。ウェブページ上で数式を表示するための JavaScript のライブラリやプ
数式を表示するための JavaScript のライブラリやプはクロスブ
フォンでも表示可能である。MathJax
ログラミング言語の具体例を述べる。
ログラミング言語の具体例を述べる。

ラウザ・マルチデバイスの数式表示サポートのライ MathJax>4@は美しい数式表示を行う JavaScript MathJax>4@は美しい数式表示を行う JavaScript
ブラリであり，現在，ウェブページ上での数式表示のライブラリである。ウェブページ上で TEX>5@の数のライブラリである。ウェブページ上で TEX>5@の数のデファクトスタンダードとなっている。
式 コ マ ン ド や Presentation MathML>6@ や式 コ マ ン ド や Presentation MathML>6@ や
普及状況について，黒木玄AsciiMath>7@ を 記 述 す る[8]と によると， HTML“世界最大と CSS ，
AsciiMath>7@ を 記 述 す る と ， HTML と CSS ，の数学論文データベース
MathSciNet[9]は MathJax
Presentation MathML，SVGのいずれかに変換してPresentation MathML，SVG のいずれかに変換してブラウザがレンダリングする。
ブラウザで JavaScript
MathJaxブラウザでが採用されたというを採用した。ここでブラウザがレンダリングする。
JavaScriptが有効であれば，PCだけでなくタブレットやスマーことは少なくとも数学研究の世界ではウェブでの数が有効であれば，PC だけでなくタブレットやスマー
トフォンでも表示可能である。MathJax
はクロスブ
式表示に関して
MathJax が標準になったことを意トフォンでも表示可能である。MathJax
はクロスブ
ラウザ・マルチデバイスの数式表示サポートのライブ味している。これからは数式も書けるサイトである
ラウザ・マルチデバイスの数式表示サポートのライブ
ラリであり，現在，ウェブページ上での数式表示のデラリであり，現在，ウェブページ上での数式表示のデことを売りにしたいならば
MathJax への対応は必ファクトスタンダードとなっている。
ファクトスタンダードとなっている。
” とある。ほかに，理系須になったと考えられる。
 普及状況について，黒木玄>8@によると“世界最大
普及状況について，黒木玄>8@によると“世界最大の論文サイトのarXiv[10] やカリフォルニア工科大の数学論文データベース
MathSciNet>9@は MathJaxの数学論文データベース
MathSciNet>9@はMathJax
学のオンライン版のファインマン物理学[11]，海外を採用した。ここで MathJax が採用されたというこを採用した。ここで MathJax が採用されたというこの数学掲示板のMathOverﬂow[12] で採用されていとは少なくとも数学研究の世界ではウェブでの数式とは少なくとも数学研究の世界ではウェブでの数式
でアカウントを作成する
る。また，Wikipedia[13]表示に関して MathJax が標準になったことを意味し表示に関して MathJax が標準になったことを意味している。これからは数式も書けるサイトであることをと，個人設定で数式表示を
MathJax に設定できるている。これからは数式も書けるサイトであることを売りにしたいならば MathJax への対応は必須になっことから，その範囲は情報系の分野に留まることな売りにしたいならば MathJax への対応は必須になったと考えられる。”とある。ほかに，理系の論文サイを採用
く普及していると言える。また，MathJax
たと考えられる。”とある。ほかに，理系の論文サイ
トのarXiv>10@やカリフォルニア工科大学のオンライするサイトでは
TEX が利用されている場合が多い。
トの arXiv>10@やカリフォルニア工科大学のオンライ
ン版のファインマン物理学>11@，海外の数学掲示板のMathJax が TEX の数式コマンドから数式表示をン版のファインマン物理学>11@，
海外の数学掲示板のMathOverflow>12@ で 採 用 さ れ て い る 。 ま た ，MathOverflow>12@ で 採 用 さ れ て い る 。 ま た ，行う例を記しておく。非常に簡潔な数式であり，後Wikipedia>13@でアカウントを作成すると，個人設定
Wikipedia>13@でアカウントを作成すると，個人設定
で数式表示を MathJax に設定できることから，そので数式表示を MathJax に設定できることから，その範囲は情報系の分野に留まることなく普及している
範囲は情報系の分野に留まることなく普及していると言える。また，MathJax を採用するサイトでは TEXと言える。また，MathJax を採用するサイトでは TEXが利用されている場合が多い。
が利用されている場合が多い。

図 1-1



>
>
2^^-x`2^^-x`@MathJax と TEX@による数式図 0DWK-D[ と 7(; による数式
図 0DWK-D[ と 7(; による数式
MathJax は 数 式 に 関 し て 種 々 の 設 定 を 行 う メ

ニ ュ
ーを用意
し て い る。 表 示 し た 数 式 の コ マ ン
MathJaxは数式に関して種々の設定を行うメニュ
 MathJax は数式に関して種々の設定を行うメニュ
ドーを用意している。表示した数式のコマンドの出力，の 出 力， 数 式 表 示 の 出 力 形 式（HTML-CSS，ーを用意している。表示した数式のコマンドの出力，数式表示の出力形式（HTML-CSS，MathML，SVG）
MathML，SVG）の変更，ズームの設定，メニュー
数式表示の出力形式（HTML-CSS，MathML，SVG）の変更，ズームの設定，メニューの言語設定などがあの言語設定などがある。また，図1-2，図 1-3 に示の変更，ズームの設定，メニューの言語設定などがある。また，図1-2，図1-3に示すように，数式のコマ
すように，数式のコマンドを出力する機能がある。
る。また，図1-2，図 1-3 に示すように，数式のコマンドを出力する機能がある。ユーザはコマンドをコピ
ユーザはコマンドをコピーして編集することで，新ンドを出力する機能がある。ユーザはコマンドをコピーして編集することで，新たに数式を記述する際に再ーして編集することで，新たに数式を記述する際に再たに数式を記述する際に再利用することができる。
利用することができる。
利用することができる。
図 0DWK-D[ による数式の 7(; コマンドの表示
図図0DWK-D[による数式の
1-2 MathJax
による数式の 7(;
TEXコマンドの表示
コマンドの表示 









図 0DWK-D[ により表示された 7(; コマンド
図図0DWK-D[
により表示された
7(; コマンド1-3 MathJax
により表示された TEX
コマンド 


MathML（Mathematical Markup Language）
は 1998 年に W3C 勧告となった数式表示のための
ウェブプログラミング言語であり，2014 年 4 月にMathML3.0 2nd Edition が勧告となっている。数式 の 表 示 に 着 目 し た Presentation MathML の ほ
か，数式の意味付けに着目した Content Markupがあり，セマンティックウェブの数式に関する研究

NAIS Journal

図 0DWK-D[ の数式メニュー図 0DWK-D[ の数式メニュー





79

以上で述べた方法を視認性と再利用性の観点から評価した結果を表 1-1 に示す。両方の観点からは数式のウェブプログラミングの方法が最適であると結論付ける。この方法により，ブラウザ上で非常に美しい見栄えの数式を表示でき，表示した数式のコマ
ンドを再利用して処理を行うことが可能となる。
1-3

数式エディタによる入力

ウェブ上で数式を使用することと数式表示のウェ
ブプログラミングを習得することは目的が異なる。
数式表示のプログラムを入力すると数式表示がなさ

図 1-4 MathJax の数式メニュー

れる日本の数式掲示板 [14] はあるが，エディタな
どの入力サポートがなく，数式表示機能を利用するの中心となると考えられるが本プロジェクトでは扱

ユーザも多い。e ラーニングの問題への回答やブロわなかった。
グへの投稿に際して，プログラミングを行うことはる日本の数式掲示板>14@はあるが，エディタなどの入の表示に着目した Presentation MathML のほか，数 HTMLと同様に不要なステップと考えられる。そ力サポートがなく，数式表示機能を利用するユーザもContent Markup があり，セ のため，プログラミングの知識やエディタの使用方
1-2-2式の意味付けに着目した
フリーハンドによる入力多い。e ラーニングの問題への回答やブログへの投稿
マンティックウェブの数式に関する研究の中心とな法の理解などの数式入力時の負担が極力少なくなる
表 1-1 の F の方法において，ペンやマウスのドに際して，プログラミングを行うことは HTML と同ると考えられるが本プロジェクトでは扱わなかった。
ラッグにより手の動きで数式を記述する方法であようなサポートが望まれる。
様に不要なステップと考えられる。そのため，プログる。mixi などの SNS における数式の表示方法とし
ここで，数式エディタの先行研究は文献 [2] を参
ラミングの知識やエディタの使用方法の理解などの
１－２－２ フリーハンド
て，紙にペンで書いた写真をアップロードして質問
数式入力時の負担が極力少なくなるようなサポート 表 1-1 の F の方法において，ペンやマウスのドラッ 照してほしい。
する方法が見られる。また，数学の講義の動画や数が望まれる。
グにより手の動きで数式を記述する方法である。mixiにアップロードされてい学の解説動画がYouTube1-4
ユースケースなどの SNS における数式の表示方法として，紙にペ ここで，数式エディタの先行研究は文献>2@を参照
る。ンで書いた写真をアップロードして質問する方法が本プロジェクトでは，ユーザの数式の入力サポーしてほしい。

見られる。また，数学の講義の動画や数学の解説動画
コンピュータを使う方法としては，PCのマウストを行うエディタや機能を実装し，ウェブページ
がYouTubeにアップロードされている。

１－４
ユースケース
やタブレットやスマートフォンのタッチパッドで描上に表示された数式に対する検索などの操作がで
 本プロジェクトでは，ユーザの数式の入力サポート
 コンピュータを使う方法としては，PC のマウスやのペ画した画像を利用する方法がある。Windows
きるウェブサイトとして掲示板を開発した。また，を行うエディタや機能を実装し，ウェブページ上に表タブレットやスマートフォンのタッチパッドで描画
TEX
ファイルをウェブページに変換する機能も実
イント，HTML5
関連技術の Canvas API を使って示された数式に対する検索などの操作ができるウェした画像を利用する方法がある。Windows のペイン装した。これらの数式に関する機能を利用する度にウェブアプリで実現できる。デバイスへの数式の入ブサイトとして掲示板を開発した。また，TEX ファ
ト，HTML5 関連技術の Canvas API を使ってウェブ
数式表示を更新することで，数式表示に特化した動力方法として，エディタの利用方法を理解する手間
イルをウェブページに変換する機能も実装した。これ
アプリで実現できる。デバイスへの数式の入力方法と的ウェブサイトを実現した。これにより，数式をウェが無く，フリーハンドによる入力は非常に有用な方らの数式に関する機能を利用する度に数式表示を更して，エディタの利用方法を理解する手間が無く，フブ上で記述することの有用性を示す。
法である。
新することで，数式表示に特化した動的ウェブサイト
リーハンドによる入力は非常に有用な方法である。
講義におけるシステム導入を例にとると，図1-5
これらの方法は，基本的に視認性は悪くないが，を実現した。これにより，数式をウェブ上で記述する
 これらの方法は，基本的に視認性は悪くないが，CC の方法で述べたように画像として保存する場合にことの有用性を示す。
の方法で述べたように画像として保存する場合には における管理人とユーザは教員と学生である。学生
の「第の「第1 行」「1第行」「第1 列」 1 による発言の管理を教員が行うという形で利用する。
は再利用性はない。
また，図 1-52-12
再利用性はない。また，図 デ ィ タ で 利 用 す る 言 語 に つ い て， 現 時 点 で列」のように，通常の数式表示には現れない補足説明のように，通常の数式表示には現れない補足説明なエなどを記述することが可能である。
どを記述することが可能である。
MathJax を採用して数式表示するサイトは数式の保存に TEX を採用している場合が多い。また，エ

ディタで入力した数式の TEX コマンドを人間が読む場面を考慮すると，TEX を習得したユーザがMathML に比べて多い。それらの現状を根拠に，
数式エディタで入力する数式の言語として TEX を採用した。

図 1-5図Canvas
API を用いてフリーハンドで描いた数式の例
&DQYDV$3,を用いてフリーハンドで描いた数

ウェブ上で数式を扱える時代になっていること
で，コミュニケーションシステム [15] での利用が

式の例
80

NAIS Journal 以上で述べた方法を視認性と再利用性の観点から評価した結果を表 1-1 に示す。両方の観点からは数式数式表示に特化した動的ウェブサイト

また，LMS 内の数式を扱う講義のコースにおい発言履歴を管理するて，数式掲示板のページをコース内に設置するか，管理者

通常の掲示板の機能を使う

画像アップロード、
リンク、発言など

タを使用できることで，発言の文章の中に自然に数数式を検索する

式を記述することができる。
数式に関する操作が容易かつ多様になることで，T XをHTML5に返還するE

e ラーニング [17] への貢献が考えられる。

フリーハンドで描画する
外部サイトと連携するて利用することができる。LMS 内の掲示板において，学生による質問などの発言に際して数式エディ

数式を入力する

ユーザ

数式掲示板へのリンクを貼ることで，講義と併用しWolfram Alpha検索
グラフ描画

ブログ投稿の準備をする

1-4-2

数式の検索

ウェブページ上で検索できることにより，数式の再利用が利便性を持つ場面の例を示す。

図 1-6 数式表示に特化した動的ウェブサイトのユースケース図

・探している数式に関する記憶があいまいな状況

提案されている。すなわち，掲示板やチャットやる。数式に関して完全一致検索でなく，あいま

LMS や情報投稿サイトとしての Wiki やブログで，いさを持たせた検索手法によって，目当ての数

数式に関して利用の幅が拡がっている。そこで，本式を見つけられる可能性が高まる。また，記憶

プロジェクトで開発したウェブサイトの利用例，応が明確な場合では，検索してリンクをクリック

用例を提案する。

することにより，当該数式への移動が早くなる

で，掲示板の発言履歴を検索する場面を想定すと考えられる。
1-4-1

ウェブ上の数式を使ったコミュニケーショ
ンと e ラーニング

・ウェブページ上に記述された数学の公式集から有用な公式を探す場面を想定する。出版された

コミュニケーションに関する解説 [16] を元に，本の公式集と比較すると，公式の候補を絞った

ウェブ上の数式を利用するときのコミュニケーショ

検索結果を目視で確認することができる。また，ンのサポートへの可能性を考える。数式掲示板の公式集の想定外の場所からも，検索した数式とユーザが数式コマンドや数式に関する解釈という情関連する数式が候補が表示されるという本の場

報のやりとりを行う場面を想定する。ユーザ同士の合には無い可能性が考えられる。

コミュニケーションについて，次のような効果が考
えられる。

1-4-3

e ラーニングの教材作成

1．発言履歴内の数式を転用する機能があると，TEX 文書のウェブページへの変換機能の利用例

コピーできることでコミュニケーションを行を挙げる。e ラーニングにおいて，画像形式の数式

いやすくすなる。また，数式のコマンドを正をウェブページ上で表示するか PDF の形式で教材

確に転用できることでコミュニケーションにを作成する場合がよく見られる。教材を PDF で作おける数式という情報を正確に伝えることが成する場合と比べると，教材をウェブページで作成でき，正確なコミュニケーションが期待される。

するときには次のような新たな利用例が挙げられる。

2．閲覧者が発言履歴内を数式検索すると，関連

1．LMS と併用した掲示板において，学生がウェした他の発言箇所を探すことができる。また，ブページの教材の数式について質問する目的

数式検索エンジンやグラフ描画で数式についで発言する際に，数式を再利用する機能を使て調べる操作により，発言者が意図したこと

うことができる。

が正確に伝わる可能性が高まる。それらの操

2．ウェブページ上で表示した数式を再利用し作によって，発言者と閲覧者の間で当該の数て，グラフ描画などのインタラクティブ性を式に関する解釈の共通化が進む。

持たせた教材を作成することができる。また，

このように，ウェブ上の数式の利用をコミュニ
ケーションの観点から考えることができる。

HTML5 の <video> タグを用いて動画の埋め込みや，CSS を使えるようになる。

NAIS Journal

81

3．数式を含む問題を出題する際，問題中の数式で述べることにする。構成は以下の通りである。

のコマンドをコピーできると，回答者が与式

2-1，4-1

数式エディタとして回答の中で問題の中に現れる数式を複2-2，4-2

数式の検索

数箇所で使うことができる。

2-3，4-3 既存 TEX 文書のウェブページへの変換
2-4，4-4

フリーハンドによる描画

1-4-4 協調学習におけるコミュニケーションの多様化

2-5，4-5

外部サイトとの連携

現時点での e ラーニングにおける数学の問題の回

2-6，4-6

ウェブ上への数式の発信

答方法は入力フォームに英数字を入力する形式であ2-7，4-7

管理者モードる。しかし，数式エディタを使うと，e ラーニング
において証明問題や式変形の手順を問う計算問題を出題することができる。

2-1

数式エディタ

数式入力の際に，数式の記号をボタンクリックな

そして，協調学習においてコミュニケーションをどで直感的に入力する方式をとる。そのため，TEX

支援することで学習活動の支援となる。数式掲示板などのウェブ上で数式表示を行うためのプログラミを講義で導入した場合，それは学習者間の教え合い

ングを行わなくても数式を入力できる。

や学習者と指導者の間での質問回答の形である。ま

数式を編集する方法として，数式の中に 1 つのカー

た，暗黙知を共有することができる。例えば，数式

ソル「｜」を用いた。カーソルを操作することで記の入力サポートやフリーハンド描画を用いて，複雑号を消去したり，カーソルの位置にボタンクリック

な構造の数式の計算の仕方や暗算する際の思考のテによる記号を挿入したりすることで数式を編集する。

クニックなどの会話を行いやすくなる。

カーソルを制御するためのカーソル移動のボタンや「1 文字消去」のボタンを実装した。発言内容を編集

1-4-5

ウェブ上での情報発信

MathJax を有効にできるブログへの投稿のほか，TEX 文書からウェブページへ変換する手順のウェ

するテキスト領域に対して JavaScript で文字列処理を行うが，カーソルが無いときは，新規の数式を入力することでカーソルを出現させる。

ブページとして保存する部分を用いると，数式エ表示されている数式から TEX コマンドを取得す

ディタを用いて入力した数式や文章をウェブページ

る技術は MathJax に実装されている。コピーしたに保存できる。そこで，保存したファイルをアップ

TEX コマンドを入力フォームに貼り付けると，発言ロードできる無料サーバへのリンクもまとめた。

内容のテキスト領域内に挿入する機能を実装した。
これにより，TEX コマンドを読まなくても，ウェブ

1-4-6

共同研究ができるページ上で表示された数式を転用することができる。

大学の研究室のメンバーや共同研究のメンバーのみの間で数式を含む議論が行われるときに，数式に

2-2

数式の検索

特化した掲示板が有用である。例えば，数式エディ

数式には分数などの構造があり，記号を分類でき

タやグラフ描画や Wolfram Alpha 検索が数式を扱る可能性があるため，数式に特有な検索手法が考えう際に研究のサポートとなると考えられる。また，られる。検索手法に関する論文 [18] によると，学生

数式の検索機能を用いて過去のノートを振り返り，の数式検索への需要に関して，あいまいさを持った公式集を利用することができる。それによって，研検索手法が望まれている。このことから，数式の完究する際のアイデアを数式から得ることが可能とな

全一致検索の他にも，記憶に残りやすい数式の構造る。インタフェースに資料などへのリンクを貼るとなどで検索する手法を実装するとよいことが分かる。

便利である。また，個人の研究日誌としても有用と

次に数式の検索手法として，完全一致検索の他になる。

考えられる手法を表 2-1 に示す。これらの検索手法について述べる。ここで，検索する数式を検索数式

2．開発の概要と称する。

本プロジェクトで開発概要を本節で述べて，実装

・数式の構造検索結果を第４節で述べて，発展的な実装内容は第５節

82

NAIS Journal

例えば検索数式を分数とすると，構造の引数であ表 2-1

数式に特有な検索手法

検索手法

入力

構造検索

A
―
B

タグ検索

積分

ヒットする例
π
1
6 σ√￣
2π
∫ ∮

名称検索
類似記号
検索
式変形の
回数検索
数式検索

三平方の定理c2 ＝ a2+b2

＜

≪

≦

2回

d
dx2
― sin
（x2）
＝―― cos（x2）＝ 2 xcos
（x2）
dx
dx

3 以上 4 以下

π 3.14 3.14159

構造を工夫して検索した結果，引数の任意性が利便性を持つ具体例を示す。例えば，同じ概念を表す
数式が異なる構造を持つ場合に両方検索できる。
検索数式の例として，図 2-2 の左側の検索数式のように「分数の分母に平方根があり，その平方根の中にベキ乗がある」構造を考える。そこで，検索領域の中に 1 つ目の検索結果のように，物理学におけるローレンツ因子が表示されているとする。これ
は検索数式と同じく，「分数の分母に平方根があり，その平方根の中にベキ乗がある」構造の数式である。

る分子や分母が他の数になった分数や，平方根などのまた，2 つ目の検索結果の数式は別の形式のローレ構造と組み合わせた分数も検索結果として表示する。

ンツ因子であり，「分数の分母に平方根があり，そ分数における分子や分母など，数式内の構造以外の平方根の中に分数があり，その分子と分母にベキの部分を引数と呼ぶと，構造検索は引数の任意性を乗がある」構造の数式である。

許す検索手法である。また，その引数が数式の構造

これらの数式の構造をオブジェクト図で表すと，を含む場合にも対応する。表 2-1 の例では検索数式

図 2-3 のようになる。ここで，親の構造の中に子のの構造は単純な分数であるのに対し，同じく分母の構造がある。

中に平方根がある構造を持つ数式もヒットする。
数式の構造に着目した検索手法について考えるた
めに，数式の構造のクラス図を図 2-1 に示す。ここ分数で，ある構造を含む構造を親とし，ある構造の中に親ある構造を子としている。例えば，平方根の中に平方根があるとき，外側の平方根が親であり，内側の分母子

平方根が子である。数式において，ある構造が一番平方根外側のとき，その構造に親はない。また，ある構造

親の親があるとき，必ず 1 つの構造に含まれている。
これは，数字が分数の分子と分母の両方に入ること

子がないことから分かる。ある構造の中に構造がない

分数とき，構造の個数は 0 である。例えば，1 つの平方根の子はない。構造の子の最大数について，平方根
は 1，分数は 2 というように，構造の種類によって

子

異なる。

ベキ乗

-親

数式の構造

0..*
-子

図 2-1

数式の構造のクラス図

図 2-2

数式の構造検索

分母
子
ベキ乗

分数

分数

0..1

親 親

分子

親

親

分母
子

分母
子

平方根

平方根

親

親

子

子

ベキ乗

ベキ乗

図 2-3

数式の構造のオブジェクト図

NAIS Journal83

図 2-3 において，検索数式の構造と 1 つ目の検索で検索する。

結果が一致しているため，検索でヒットする。また，
2 つ目の検索結果の構造を 1 番上の親から辿ると，検索数式の構造が同じ順に見つかるため，この構造を持つ数式もヒットする。

・式変形の回数検索
式変形の回数を入力して，その個数のイコール「=」が式変形として含まれる数式を探す手法であ

ここで，ローレンツ因子がどちらの形式で表示さる。例えば，複数回の式変形を行っている数式を探れているかが不明な状況で検索することを想定す

すときには，この検索手法を用いて 2 回以上で検る。すると，ユーザが図 2-2 のような検索数式を入索する。また，イコールがない数式を探すときは 0

れると，異なる形式のローレンツ因子の両方を含む回で検索する。

検索結果を得ることができる。この例のように，学問分野に特有な状況に対して，数式の構造検索が有
用である。

・数検索
数を検索する手法である。検索範囲の指定方法は

この構造検索の方法では予め定義した検索数式の2 種類あり，「3 以上 4 以下」などの実数の上限と構造を抽出した後に，引数に任意性を付加したため，下限を指定して，その連続的な区間に入る数を検索

上記のような利点ができた。構造検索の可能性としする方法が考えられる。この実数検索は本プロジェて，和「+」や積「×」などの二項演算を構造と見クトにおいて実装した。他に，素数やフィボナッチ

なす検索へ拡張できる。

数などの離散的な数を指定して検索する方法が考えられる。後者の場合，例えば素数の上限を指定して，・タグ検索

その数以下の素数を検索する検索例が考えられる。

記号を数学的な意味合いで分類し，その分類に付

これらの数式を対象とした検索機能は本プロジェ

けたタグの名称で検索する手法である。例えば，底クトで実装する。また，各学問分野における要請にが e の対数関数「loge Ω」と自然対数「ln Ω」は応じて，数式のカテゴリなどを設定して検索機能を意味が同じであるが，異なる記号である。そこで，実装することができる。

両方を同じ分類「自然対数」として定めておき，どちらも検索結果に表示させる。他に，似た積分記号

検索範囲，検索対象，検索手法を選択後，数式を検索する（表 2-2 参照）。

をまとめた積分という分類や，三角関数という分類も定めることができる。
・名称検索
数学の定理や計算の意味で検索する手法である。
数式が単なる記号の集まりでなく，数式中の意味を持っている部分を探す。構造検索における構造や記表 2-2 数式検索のオプション
設定選択できる項目
発言履歴，数式エディタで編集した数式のプレ
検索範囲
ビュー
検索対象 数式，数式と文章完全一致検索，構造検索，タグ検索，名称検索，
検索手法
類似記号検索，式変形の回数検索，数検索

号を予め分類しておき，名称を付けておく。そのた

ここで，検索対象に文章を含めた理由として，数め，構造検索と同様のあいまいさを伴う検索手法と式掲示板のユーザが 0123 や xyz などの英数字を文なる。

章中にプレーンテキストの形式で記述する可能性を

この検索手法は，学問分野に応じてカスタマイズ

考慮するためである。

することが可能である。
2-3・類似記号検索84

既存 TEX 文書のウェブページへの変換

PDF を生成するため TEX ファイルを作成して形が似ている記号を分類して，同じ分類の記号をローカルに保存してきたが，ウェブ上の数式として検索する手法である。この検索手法の実装のために，利用しやすいウェブフレンドリーなウェブページと予め記号を分類しておく必要がある。この手法が有してウェブ上に公開できるようになる。これにより効である理由は，TEX には多くの矢印や不等号な

例えば，数式検索を実行できるようになる。

どの記号があるためである。タグ検索は検索の際にこの変換機能のねらいを述べる。例えば，PDF に分類を選択するが，類似記号検索は記号のコマンド記述していた数学の公式集をウェブページに変換しNAIS Journal

て JavaScript による再利用の処理の対象とするこ要素などが有用である。本プロジェクトでは TEXとができる。それにより，PDF では実行できなかっファイルを読み込み，HTML ファイルなどのウェた数式の構造検索などの操作が実現され，その操作

ブページを保存する機能の実装をスコープの範囲内

をウェブサービスに使えるようになる。この変換にとした。

より得られる可能性を述べる。

TEX を HTML タグへ変換する機能について，先・ウェブサイト内で各ページによる階層構造を形

行 事 例 は pdf2htmlEX[20]，LaTeX2HTML[21]，

成することができる。それにより，SEO 対策

Pandoc[22]，LaTeXMathML[23] な ど が あ る が 詳

や閲覧者がサイトの構造を認識しやすくなる。

細は割愛する。

・TEX の数式コマンドで Google 検索すると，検索結果に表示される可能性がある。

2-4

フリーハンドによる描画

・HTML5 のセマンティック要素を使って，セマ

ウェブサイトに数式エディタが設置されていてンティックウェブへの対応や文書のソースコー

も，フリーハンドによる描画機能は有用であると考ドを整理することができる。

えられる。これにより，数式入力の代替手段となる・数式の意味を抽出するプログラムがあると，だけでなく，円や補助線などの図形を描画できる。

HTML5 のセマンティック要素や <meta> タグ

ここで，フリーハンドとは，PC のマウスのドラッを使い，セマンティックウェブに備えることがグ，タブレットやスマートフォンのタッチパネルをできる。

指でなぞるスワイプにより，滑らかな線を描画する・相互運用性が生じ，異なるページ間の数式や文ことである。

書の受け渡しを行うことができるようになる。
・ウェブ上の数式処理によるウェブサービスで扱
うデータとなる。例えば，操作可能なグラフ，
数式検索，計算などがある。
1 つ目のメリットに関して，e ラーニング教材を
ウェブページで表示する際の工夫を紹介する。

2-5

外部サイトとの連携

ウ ェ ブ 上 に は， 数 式 処 理 や 可 視 化 な ど の ウ ェ
ブ サ ー ビ ス を 提 供 す る サ イ ト が あ る。 そ こ で，MathJax を用いて表示した数式から TEX コマンドを出力してコピーした後で，これらのサイトと連携

中村晃によってリンク・バック・ラーニング [19]する機能を実装した。例えば，数式検索エンジンのが提唱されている。これは，学習の積み重ねの応用

Wolfram Alpha での検索機能との連携を図る。他的な知識のページから基礎的な知識のページへ戻るに，数式を用いてグラフ描画を行う。これらのサイ学習法である。体系化された知識を学習する教材にトでは TEX コマンドを利用できるが，サイトに応

おいて，応用のページから基礎のページへ適宜リンじて数式の変換が必要な場合がある。また一般的に，

クを貼ることで，学習のステップに応じて構造化す

既存システムとの連携を図る際には数式の変換技術ることができる。例えば，微分に関する教材の場合，が重要となる。

合成関数の微分のページから多項式の微分のページ

Wolfram Alpha での検索については，ブラウザ

へ戻ることで，多項式の微分を復習した後に合成関の新しいタブを開いて検索結果を表示する。すると，数の微分の理解に役立つと考えられる。

数式の計算結果や性質が詳しく表示される。

通常，TEX の数式コマンドは PDF 生成のためのグラフ描画については，発言内容の編集領域内

TEX ファイルに記述する。しかし，TEX ファイルにグラフ描画サイト [24] を埋め込む方法をとった。

はウェブページではない。そこで，TEX ファイル

このグラフ描画サイトでは 2 次元の x ‐ y 平面のから HTML ファイルを生成できると，ウェブ上にグラフが描画され，拡大，縮小，移動の操作が可能なかった数式や文書をウェブ上に保存できるようにである。

なる。その有用性については 2 章で述べる。その際，自動的に MathJax を読み込む設定をする。

2-6

ウェブ上への数式の発信

TEX を HTML に変換する際に，TEX の文書構

MathJax を有効にできるブログサイトを選択す

造に関するコマンドは MathJax で扱えないため，ると，そのサイトで使えるように，数式エディタでHTML タグに変換するプログラムが必要となる。

編集した数式や文章を成形して表示する。また，ブ

そこで，文書構造に関して，HTML5 のセクション

ログサイトへのリンク，そのサイトでの編集方法のNAIS Journal85

説明を表示する。
2-7

TEX

管理者モード発言履歴を管理するパスワード付きの管理者モードのページへのリンクを貼る。管理者モードでは，HTML-CSS

MathJax

MathMLMathML

AsciiMath

発言履歴の中の問題発言を削除，編集して再保存でSVG

図 3-1 MathJax の入力形式と出力形式

きる。講義における教員などの管理者が数式掲示板
において問題のある発言に対処するために必要となして，AsciiMath と Presentation MathML の入 力

る。

に対応した ASCIIMathML[26] と TEX の入力に対発言履歴はソースコードの中で HTML タグや応した jsMath[27] が存在していた（図 3-1 参照）。

TEX の数式コマンドというプレーンテキストの形

MathJax ではそれら 3 種の言語の入力に対応してい式で記述されるため，発言履歴を数式掲示板と同様る。また，数式表示が非常に美しく，出力形式として，に表示した状態で編集できるようにする。

クロスブラウザかつマルチデバイスの HTML-CSS，
W3C 勧 告 の あ る MathML の う ち Presentation

3．開発技術3-1

開発技術の概要

MathML，拡大しても輪郭がきれいな画像形式の
SVG の 3 種類を選択できるようになった。
MathJax が HTML タグか MathML タグか SVG

ウェブ上で数式を取り扱う操作を示すため，数式タグを出力した後，ブラウザがレンダリングして数式表示に特化したインタフェースを開発し，適用するを表示する。MathML で出力すると，Presentation

ウェブサイトの例として掲示板に設置した。開発環

MathML をネイティブサポートするブラウザでのみ境は以下の通りである。なお，開発環境の詳細は文

数式表示が行われる。現時点では，きれいに数式表

献 [2] を参照してほしい。

示が行われる主要ブラウザは FireFox のみである。

・オペレーティングシステム：Windows 7

これにより，クロスブラウザかつマルチデバイスの・開 発 環 境：PHP（5.5.15），Apache（2.4.4），

出力形式は HTML-CSS と SVG の 2 種である。

MySQL（5.5.32）XAMPP 使用。
・開発言語：PHP，HTML，JavaScript，CSS，MySQL，TEX

MathJax は TEX や MathML をクロスブラウザ
かつマルチデバイスで非常に美しく表示できるようにサポートを行うライブラリと言える。

また，PHP サーバの貸出サービス [25] も使って動作を確かめた。利用した JavaScript のライブラ
リは以下の通りである。

3-3

TEX の概要

TEX は 1978 年に発表された文書組版ソフトウェ

1．MathJax：数式表示のための入力形式として

アであり，美しい数式表示が特徴である。数式など

TEX や Presentation MathML や AsciiMathの表現に関する拡張機能をパッケージと呼び，TEXに 対 応 し， 出 力 形 式 と し て HTML-CSS やをパッケージに対応させたレスリー・ランポートのPresentation MathML や SVG に対応する。

頭 文 字 に 因 み LaTX と 呼 ぶ。MathJax で は AMS

2．jQuery：JavaScript による DOM の操作を簡が作成した 2 種類のパッケージに対応している状

潔なソースコードで実現できるようにまとめ況であり，本論では TEX と称する。MathJax で取ている。

り扱える TEX の数式コマンドの種類は 800 種類を

3．jQuery UI：jQuery を利用して，種々のイン

越え，200 種類ほどの AsciiMath をはるかにしのぐ。

タフェースの見た目を取り揃えている。

全ての TEX のコマンドは半角のバックスラッ

4．その他のライブラリシ ュ「」 か ら 始 ま る。 ま た，JavaScript で はバックスラッシュは特殊文字であり，2 本のバック
3-2

86

MathJax の概要

スラッシュ「」で出力する。古いバージョンのMathJax は 2010 年に発表されたウェブ上の数式

PHP では，バックスラッシュの取り扱いが異なる

表示のライブラリである。MathJax プロジェクトのので，バージョン 5.1.1 以降の PHP を利用するこ

発足時，ウェブ上の数式表示のためのライブラリととに注意する。

NAIS Journal

3-4

システム構成以下のようなことを考慮した構成である，

4．実装結果・PHP ファイルが数式掲示板であり，タブレッ

第 2 節で述べた順に実装結果を述べていく。

ト版とスマートフォン版もある。
・データベースは今回，phpmyadmin を用いた。
・JS 群はエディタや検索などの機能のために作 成 し た JavaScript フ ァ イ ル 群 と jQuery
ーの HTML
ファイル群である。
Keypadなどのライブラリである。
 発言履歴の読み出しや保存を行う
・HTML 群はフリーハンド描画，利用マニュア

4-1

数式エディタ

まず，開発したエディタの様子を図 4-1 に示す。

ル，多くの数式を MathJax で記述した数式ギャ

ラリーの HTML ファイル群である。発言履歴
データベースの読み出しや保存を行う（図 3.2 参照）。
mathPC.php

JS群
データベース

HTML群

mathPC.php

JS群

図 システム構成

HTML群

 発言履歴の読み出しや保存を行う際は，PHP から
図 3-2 システム構成
SQL 文を用いてデータベースを扱う PDO を利用した。また，掲示板サイトや各スレッドへのログインチ
ェックのテーブルを定義し，クッキーを用いてログイ
発言履歴の読み出しや保存を行う際は，PHP
かンのタイムアウトまでの有効時間を1 時間と設定し
PDO を利ら
SQL 文を用いてデータベースを扱う
た。ユーザはユーザ
ID とパスワードでサイトにログインし，各スレッドの名前とパスワードでスレッドに用した。また，掲示板サイトや各スレッドへのログ
ログインする。
インチェックのテーブルを定義し，クッキーを用い セキュリティ対策のため，バックスラッシュが自動てログインのタイムアウトまでの有効時間を1時
的に無害化（もしくは，サニタイゼーションと呼ばれ間と設定した。ユーザはユーザ ID とパスワードでる）の対象となるが，バックスラッシュは TEX コマ
サイトにログインし，各スレッドの名前とパスワーンドで多く使う記号である。そのため，発言する際にドでスレッドにログインする。
バックスラッシュ 1 本を 2 本にして消去されないよう
セキュリティ対策のため，バックスラッシュがに変換する機能を JavaScript で実装した。
自動的に無害化（もしくは，サニタイゼーション
 エディタや TEX 文書の HTML5 への変換機能のみと呼ばれる）の対象となるが，バックスラッシュであれば，PHP を HTML に置き換えることが可能ではTEX コマンドで多く使う記号である。そのため，ある。また，発言履歴の保存場所を
HTML ファイル
発言する際にバックスラッシュ
1 本を 2 本にしてなどの外部ファイルなどに代替すると，データベース
が無い環境でも利用できる。
消去されないように変換する機能を
JavaScript で実装した。
４．実装結果エディタやTEX 文書の HTML5 への変換機能の 第２節で述べた順に実装結果を述べていく。
みであれば，PHP を HTML に置き換えることが可４－１ 数式エディタ
能である。また，発言履歴の保存場所を HTML ファ まず，開発したエディタの様子を図 4-1 に示す。
イルなどの外部ファイルなどに代替すると，データ

ベースが無い環境でも利用できる。


図 数式エディタ
4-1 数式エディタ 
図利用するライブラリは jQuery のほか，数式の 利用するライブラリは jQuery のほか，数式の記号
記号のボタンをジャンルに分けて格納するのボタンをジャンルに分けて格納する jQueryjQuery
Keypad，
入力フォームに吹き出しを表示
する
Keypad，入力フォームに吹き出しを表示する
unitipunitipである。
である。
 数式を含む文章を入力するテキスト領域を対象
数式を含む文章を入力するテキスト領域を対象に，
ボタンクリックで起動する TEX の数式コマンドの文に，ボタンクリックで起動する
TEX の数式コマン
字列連結により数式編集を実装する。本プロジェクト
ドの文字列連結により数式編集を実装する。本プロ
では数式の編集にカーソルを導入した。
ジェクトでは数式の編集にカーソルを導入した。
 ここで，数式エディタで扱う数式コマンドの文字列
ここで，数式エディタで扱う数式コマンドの文字処理について説明する。MathJax で利用可能な TEX
列処理について説明する。MathJax で利用可能なの数式コマンドが入力された JavaScript の配列を使TEX の数式コマンドが入力された JavaScript の配い，ボタンクリックで起動する JavaScript の関数か列を使い，ボタンクリックで起動する
JavaScript
ら文字列処理を行う。数式の記号の入力時には配列かの関数から文字列処理を行う。数式の記号の入力時
ら TEX コマンドを呼び出してテキスト領域内で文字には配列から
TEX コマンドを呼び出してテキスト
列連結し，1 文字消去するときには配列に入力された領域内で文字列連結し，1
文字消去するときには配コマンドが見つかると消去する。
 数式の記号を 1 文字分消去する操作とは，表示され列に入力されたコマンドが見つかると消去する。
た数式を人間が視認した際の1 文字分を消去すること
数式の記号を 1 文字分消去する操作とは，表示さを意味し，表示された記号の 1 文字とコマンドの文字れた数式を人間が視認した際の1 文字分を消去することを意味し，表示された記号の1 文字とコマ数とは異なる。例えば，ギリシャ文字の「π」は「 pi」
ンドの文字数とは異なる。例えば，ギリシャ文字のであり，このような TEX コマンドを配列の中に用意「π」は「 pi」であり，このような TEX コマンドする。消去するとき，配列の要素を 1 つずつ調べ，カを配列の中に用意する。消去するとき，配列の要素
ーソルの左側にある「 pi」というコマンドと一致す
pi」とを1 つずつ調べ，カーソルの左側にある「ると，3文字の文字列を消去するという手順を踏む。
いうコマンドと一致すると，3文字の文字列を消去
また，数式の構造に対応して，消去する手順や構造がするという手順を踏む。また，数式の構造に対応し空であるかの判定を考慮する必要がある。本プロジェ
クトで設定した「1 文字消去」ボタンの連打による消て，消去する手順や構造が空であるかの判定を考慮
去手順の例を示す。
文する必要がある。本プロジェクトで設定した「1NAIS Journal87

これらの数式環境が出力されず，数式箇所のみが出力
のみが出力される。しかし，数式環境が無ければ，これらの数式環境が出力されず，数式箇所のみが出力される。しかし，数式環境が無ければ，MathJax に
MathJax
によって数式表示が行われない。そこで，
これらの数式環境が出力されず，数式箇所のみが出力される。しかし，数式環境が無ければ，MathJax に
これらの数式環境が出力されず，数式箇所のみが出力
よって数式表示が行われない。そこで，図4-3 の入力
図4-4の入力フォームに実装されている数式環境をされる。しかし，数式環境が無ければ，MathJaxにによって数式表示が行われない。そこで，図4-3 の入力される。しかし，数式環境が無ければ， MathJax
フォームに実装されている数式環境を自動で追加・消自動で追加・消去する処理により，転用した数式のよって数式表示が行われない。そこで，図4-3の入力フォームに実装されている数式環境を自動で追加・消よって数式表示が行われない。そこで，図4-3の入力去する処理により，転用した数式の編集開始をサポー
フォームに実装されている数式環境を自動で追加・消去する処理により，転用した数式の編集開始をサポー
編集開始をサポートする機能を実装した。
すなわち，フォームに実装されている数式環境を自動で追加・消トする機能を実装した。すなわち，挿入する数式コマ去する処理により，転用した数式の編集開始をサポートする機能を実装した。すなわち，挿入する数式コマ
挿入する数式コマンドの数式環境の有無と挿入時に去する処理により，転用した数式の編集開始をサポー
ンドの数式環境の有無と挿入時における編集中の数トする機能を実装した。すなわち，挿入する数式コマ
ンドの数式環境の有無と挿入時における編集中の数おける編集中の数式の有無を判定して，数式環境のトする機能を実装した。すなわち，挿入する数式コマ式の有無を判定して，数式環境の自動追加・自動消去
ンドの数式環境の有無と挿入時における編集中の数式の有無を判定して，数式環境の自動追加・自動消去
自動追加・自動消去を行ってから挿入する。
ンドの数式環境の有無と挿入時における編集中の数を行ってから挿入する。
図 カーソルによる消去手順

式の有無を判定して，数式環境の自動追加・自動消去を行ってから挿入する。
図 カーソルによる消去手順  
行列の入力や文字のフォントを利用する場合に
式の有無を判定して，数式環境の自動追加・自動消去
行列の入力や文字のフォントを利用する場合には，
4-2 カーソルによる消去手順を行ってから挿入する。
図図
カーソルによる消去手順


行列の入力や文字のフォントを利用する場合には，を行ってから挿入する。
図 カーソルによる消去手順
図 4-2 の例では，数式の構造の引数に文字がある場合， は，行列のサイズやフォントの指定などを入力フォーム
行 列 の サ イ ズ や フォ ン ト の 指 定 な ど を 入 力
図
行列の入力や文字のフォントを利用する場合には，
4-2
の例では，
数式の構造の引数に文字がある場合，
行列のサイズやフォントの指定などを入力フォーム
図 4-2 の例では，数式の構造の引数に文字がある 行列の入力や文字のフォントを利用する場合には，引数の最後尾を消去し，構造の内部がカーソルのみのから選択して，数式に挿入する。

フォームから選択して，数式に挿入する（図 4-4 参照）。
図引数の最後尾を消去し，構造の内部がカーソルのみの
4-2
の例では，
数式の構造の引数に文字がある場合，
行列のサイズやフォントの指定などを入力フォーム
から選択して，数式に挿入する。

図 4-2 の例では，数式の構造の引数に文字がある場合， 行列のサイズやフォントの指定などを入力フォーム
とき，構造全体を消去している。他に，空の構造の右場合，引数の最後尾を消去し，構造の内部がカーソ

引数の最後尾を消去し，構造の内部がカーソルのみの
とき，構造全体を消去している。他に，空の構造の右
引数の最後尾を消去し，構造の内部がカーソルのみの から選択して，数式に挿入する。
から選択して，数式に挿入する。

隣にカーソルがあるときにも構造を消去するなどのルのみのとき，構造全体を消去している。他に，空とき，構造全体を消去している。他に，空の構造の右隣にカーソルがあるときにも構造を消去するなどの
とき，構造全体を消去している。他に，空の構造の右場合分けが必要である。左右へ移動するためにも同様の構造の右隣にカーソルがあるときにも構造を消去
隣にカーソルがあるときにも構造を消去するなどの場合分けが必要である。左右へ移動するためにも同様
隣にカーソルがあるときにも構造を消去するなどのの場合分けが必要である。

場合分けが必要である。左右へ移動するためにも同様するなどの場合分けが必要である。左右へ移動するの場合分けが必要である。

場合分けが必要である。左右へ移動するためにも同様
 数式編集中にボタン以外にも英数字や漢字などをの場合分けが必要である。

の場合分けが必要である。
数式編集中にボタン以外にも英数字や漢字などをためにも同様の場合分けが必要である。

キーボードから入力できる入力フォームを設置した。
 キーボードから入力できる入力フォームを設置した。
数式編集中にボタン以外にも英数字や漢字などを数式編集中にボタン以外にも英数字や漢字などを 数式編集中にボタン以外にも英数字や漢字などをこの入力フォームにプレーンテキストを入力した後，キーボードから入力できる入力フォームを設置した。
この入力フォームにプレーンテキストを入力した後，キーボードから入力できる入力フォームを設置しキーボードから入力できる入力フォームを設置した。
挿入ボタンをクリックするほかに，Enter
キーで挿入
この入力フォームにプレーンテキストを入力した後，挿入ボタンをクリックするほかに，Enter
キーで挿入
この入力フォームにプレーンテキストを入力した後，た。この入力フォームにプレーンテキストを入力
し，行列の入力時に次の成分へ移動するためにSpace
挿入ボタンをクリックするほかに，Enter
キーで挿入
し，行列の入力時に次の成分へ移動するためにSpace
挿入ボタンをクリックするほかに，Enter
キーで挿入
キーで挿入と右移動するように JavaScript で設定し図 行列入力のインタフェース
した後，挿入ボタンをクリックするほかに，Enter
図行列入力のインタフェース
4-4 行列入力のインタフェース  し，行列の入力時に次の成分へ移動するためにSpaceキーで挿入と右移動するように
JavaScript
で設定し図し，行列の入力時に次の成分へ移動するために Space
た。また，その旨を説明する文章をツールチップによキーで挿入し，行列の入力時に次の成分へ移動す
キーで挿入と右移動するように
JavaScript
で設定し図行列入力のインタフェース
た。また，その旨を説明する文章をツールチップによキーで挿入と右移動するようにで設定しり入力フォームに表示する。
 右JavaScript
行列のサイズを指定する入力フォームには，HTML5
行 列 の図サ 行列入力のインタフェース
イ ズ を 指 定 す る 入 力 フ ォ ーム に は，る
た め に Space キ ー で 挿 入 と移動するように 行列のサイズを指定する入力フォームには，HTML5た。また，その旨を説明する文章をツールチップにより入力フォームに表示する。

た。また，その旨を説明する文章をツールチップによ
で新たに入力フォームに追加されたtype 属性のHTML5で新たに入力フォームに追加された
type
JavaScriptで設定した。また，その旨を説明する文
り入力フォームに表示する。

行列のサイズを指定する入力フォームには，HTML5
で新たに入力フォームに追加されたtype 属性の
行列のサイズを指定する入力フォームには，HTML5
numberという属性値を使用した。これにより，入力
り入力フォームに表示する。
実は，キーイベントの FireFox
では，Enter キーやという属性値を使用した。これに属性のnumber章をツールチップにより入力フォームに表示する。
  実は，キーイベントの FireFox では，Enter キーやで新たに入力フォームに追加された
type
numberという属性値を使用した。これにより，入力
で新たに入力フォームに追加された
type属性の属性のフォームに上下の三角の印が表示されて，数値を調整
Space
キーの操作で発生する event の取り扱いが異なでは，Enterキー
より，入力フォームに上下の三角の印が表示されて，
実は，キーイベントのFireFoxnumberという属性値を使用した。これにより，入力
 Space
実は，キーイベントのFireFox
では，Enter
キーやフォームに上下の三角の印が表示されて，数値を調整
キーの操作で発生する
eventの取り扱いが異な
numberという属性値を使用した。これにより，入力

実は，キーイベントのFireFox
では，Enterキーやできる。
っていた。詳細は文献>2@を参照してほしい（図 4-3
Spaceキーの操作で発生する
eventの取り扱いが異なできる。
っていた。詳細は文献>2@を参照してほしい（図4-3 フォームに上下の三角の印が表示されて，数値を調整
数値を調整できる。
キーの操作で発生する
event
の取り扱い
や
Space
Space
キーの操作で発生する
eventの取り扱いが異なが入力画面例）。
フォームに上下の三角の印が表示されて，数値を調整
各学問分野に応じて頻繁に使用すると考えられるできる。
っていた。詳細は文献>2@を参照してほしい（図4-3
が入力画面例）。

各学問分野に応じて頻繁に使用すると考えられる
各学問分野に応じて頻繁に使用すると考えられる[2]を参照してほしいが異なっていた。詳細は文献できる。

っていた。詳細は文献>2@を参照してほしい（図 4-3記号を用意しておくカスタマイズの例を示す。フォン 4-3 が入力画面例）
が入力画面例）。
記号を用意しておくカスタマイズの例を示す。フォ
各学問分野に応じて頻繁に使用すると考えられる記号を用意しておくカスタマイズの例を示す。フォン（図が入力画面例）。
 。

各学問分野に応じて頻繁に使用すると考えられる
トやアクセントなどの複数の TEX のコマンドで構成
記号を用意しておくカスタマイズの例を示す。フォントやアクセントなどの複数のTEXのコマンドで構成
ントやアクセントなどの複数のTEXのコマンドで記号を用意しておくカスタマイズの例を示す。フォン
される記号をジャンルとしてまとめておくことで入トやアクセントなどの複数のTEXのコマンドで構成される記号をジャンルとしてまとめておくことで入トやアクセントなどの複数の TEX構成される記号をジャンルとしてまとめておくこと
力サポートとなると考えられる。
 のコマンドで構成される記号をジャンルとしてまとめておくことで入力サポートとなると考えられる。

される記号をジャンルとしてまとめておくことで入
で入力サポートとなると考えられる（図4-5 参照）。

力サポートとなると考えられる。

力サポートとなると考えられる。
字消去」ボタンの連打による消去手順の例を示す。

図 入力フォームに表示するツールチップ 図 入力フォームに表示するツールチップ 図 入力フォームに表示するツールチップ
図入力フォームに表示するツールチップ
 MathJax
で表示された数式を右クリックして，
図 4-3
入力フォームに表示するツールチップ

  MathJax で表示された数式を右クリックして，
TEXの数式コマンドを表示すると，数式の範囲を示図 物理学にカスタマイズしたインタフェース

図図物理学にカスタマイズしたインタフェース
4-5 物理学にカスタマイズしたインタフェース 図 物理学にカスタマイズしたインタフェース
図 物理学にカスタマイズしたインタフェース
Newtonの運動方程式など，これらの記号から成る数

 Newton の運動方程式など，これらの記号から成る数
 Newton の運動方程式など，これらの記号から式に関しては，ボタンとして設置せずに数式ギャラリ

 TEX
MathJax
で表示された数式を右クリックして，
Newtonの運動方程式など，これらの記号から成る数の数式コマンドを表示すると，数式の範囲を示
式に関しては，ボタンとして設置せずに数式ギャラリ
MathJax
MathJax
で表示された数式を右クリックして，
Newtonの運動方程式など，これらの記号から成る数
で表示された数式を右クリックして，成る数式に関しては，ボタンとして設置せずに数すコマンドである数式環境が省略されることがある。
ーとして外部ファイルの中に保存した。ユーザが右クTEXの数式コマンドを表示すると，数式の範囲を示
式に関しては，ボタンとして設置せずに数式ギャラリ
すコマンドである数式環境が省略されることがある。
ーとして外部ファイルの中に保存した。ユーザが右クTEXの数式コマンドを表示すると，数式の範囲を示
式に関しては，ボタンとして設置せずに数式ギャラリ
例えば，「
> 」と「 @ 」という数式環境で数式リックで MathJax のメニューから数式コマンドを転TEXの数式コマンドを表示すると，数式の範囲を
式ギャラリーとして外部ファイルの中に保存した。
すコマンドである数式環境が省略されることがある。
ーとして外部ファイルの中に保存した。ユーザが右ク
例えば，「
> 」と「 @ 」という数式環境で数式
リックでMathJax のメニューから数式コマンドを転すコマンドである数式環境が省略されることがある。
ーとして外部ファイルの中に保存した。ユーザが右クを記述したとき，数式のTEXコマンドを出力すると，用することを想定している。eラーニングコンテンツ
示すコマンドである数式環境が省略されることがのメニューから数
ユーザが右クリックでMathJax
例えば，「
>」と「@」という数式環境で数式
リックでMathJaxのメニューから数式コマンドを転を記述したとき，数式のTEXコマンドを出力すると，用することを想定している。eラーニングコンテンツ
例えば，「
>」と「@」という数式環境で数式
リックでMathJaxのメニューから数式コマンドを転ある。例えば，「数式の[ 」と「] 」という数式環境で数ラー
式コマンドを転用することを想定している。eを記述したとき，TEX
コマンドを出力すると，ラーニングコンテンツを記述したとき，数式のTEXコマンドを出力すると，11用することを想定している。e用することを想定している。eラーニングコンテンツ
式を記述したとき，数式の TEX コマンドを出力す 11 ニングコンテンツが数式表示に MathJax を採用す
ると，これらの数式環境が出力されず，数式箇所 1111 ると，このような数式ギャラリーの役割を持つ。

88

NAIS Journal

式ギャラリーの役割を持つ。
 また，数式エディタによるその他の数式の編集機能
や数式の検索の実装において，JavaScript の文字列処理や正規表現のAPI を用いた。
また，数式エディタによるその他の数式の編集機

能や数式の検索の実装において，JavaScriptの文
４－２ 数式の検索
字列処理や正規表現の API を用いた。
 数式の検索手法を指定して検索を実行し，検索でヒットした箇所の背景色を黄色にする。TEX の数式環
4-2 数式の検索
境内では TEX のコマンドで黄色にするが，数式環境
数式の検索手法を指定して検索を実行し，検索で外でヒットした場合はHTML5 のmark!タグで黄色の数ヒットした箇所の背景色を黄色にする。TEXにする。
式環境内ではTEX のコマンドで黄色にするが，数 数式を検索する際，検索の手法にかかわらず，数式入力したテキストから検索数式を抽出する［検索数式がない］［検索数式がある］
検索数式を分割する
検索対象をコピーして暫定的な検索結果とする

式環境外でヒットした場合はHTML5 の <mark>の範囲を示す数式環境がある場合には消去することとする。他に，検索数式内の半角スペースの不定性にタグで黄色にする。
対処する必要がある。TEX
において半角スペースは数式を検索する際，検索の手法にかかわらず，数
表示結果に影響を及ぼさないため，同じ数式で異なる式の範囲を示す数式環境がある場合には消去するこ
個数の半角スペースが含まれている場合があり得る。
ととする。他に，検索数式内の半角スペースの不定
そ のた め例 えば ，完 全一 致検 索に おい て単 純に性に対処する必要がある。TEX において半角スペー
JavaScript の indexOf メソッドなどを用いると半角
スは表示結果に影響を及ぼさないため，同じ数式でスペースが 1 個余分に混じり込んでいるだけでヒット
異なる個数の半角スペースが含まれている場合があしない。そこで，検索数式を意味のあるひとかたまりり得る。そのため例えば，完全一致検索において単の TEX のコマンドごとに分割して配列に入れ，それ
純にJavaScript の indexOf メソッドなどを用いるを基に検索を進める方式をとる。その際，数式エディと半角スペースが1 個余分に混じり込んでいるだけ
タで利用した配列を基にして，この目的を達成するた
めに文字数の多い順に TEX のコマンドを並べ替えてでヒットしない。そこで，検索数式を意味のあるひ
一意な成分のみで構成された配列を作成する。例えとかたまりのTEX のコマンドごとに分割して配列ば，検索する数式の中に「int」があるとき，配列のに入れ，それを基に検索を進める方式をとる。その中で「 in」より後に「 int」を登録すると，「 in」
際，数式エディタで利用した配列を基にして，このと「t」に分割される。そのため，配列には「 int」
目的を達成するために文字数の多い順に TEX のコより後に「 in」を登録する。
マンドを並べ替えて一意な成分のみで構成された配 検索結果の表示方法を述べる。何度も検索すること列を作成する。例えば，検索する数式の中に「 int」に対応するため，ウェブページのソースコードの中でin」より後に「int」があるとき，配列の中で「発言履歴を 2 箇所で読み込んでおく。
一方は非表示のを登録すると，「 in」と「t」に分割される。そのテキストとして，検索の際に検索対象とする。もう一ため，配列には「 int」より後に「 in」を登録する。
方は検索結果を追記して表示する。検索でヒットした

検索結果の最下部にマークを入れる



図マーク以前を検索する
全ての数式検索に共通する手順


検索範囲の違いは「検索対象をコピーして暫定的な検検索結果を表示する
索結果とする」手順に現れ，検索対象と検索手法の違いは「マーク以前を検索する」に現れる。
 構造検索に関して，TEX の数式コマンドでは数式
図 4-6 全ての数式検索に共通する手順の構造とは中括弧「 ^ 」 ，「 ` 」を含む数式コマンドである。構造の検索として，検索数式の構造を抽出し，その構造を含む数式を検索する手法である。検抽出し，その構造を含む数式を検索する手法である。
索数式に含まれる TEX
コマンドと中括弧の順序と同コマンドと中括弧の順序
検索数式に含まれるTEX
じ順に並んだ数式コマンドを探すアルゴリズムを実と同じ順に並んだ数式コマンドを探すアルゴリズム
装した。
を実装した。
 数式検索を実行したときの検索結果の様子を図 4-7
数式検索を実行したときの検索結果の様子を図に示す。ここで，平方根という数式の構造で検索した
4-7 に示す。ここで，平方根という数式の構造で検結果として，例えば「2π」を含む平方根がヒットし，索した結果として，例えば「2π」を含む平方根が黄色く表示されている。
ヒットし，黄色く表示されている（図4-7 参照）。


検索結果の表示方法を述べる。何度も検索するこ
数式の箇所へのページ内リンクをまとめて表示する
ために検索結果の最下部に HTML のコメントでマーとに対応するため，ウェブページのソースコードの
クし，ヒットするごとにリンクを追記し，そのマーク中で発言履歴を2 箇所で読み込んでおく。一方はまで検索する。この手順のアクティビティ図を図
非表示のテキストとして，検索の際に検索対象とす4-6に示す。
る。もう一方は検索結果を追記して表示する。検索でヒットした数式の箇所へのページ内リンクをまと

図図 数式の構造検索の例
4-7 数式の構造検索の例 

めて表示するために検索結果の最下部に HTML の

コメントでマークし，ヒットするごとにリンクを追４－３ 既存 7(; 文書のウェブページへの変換
4-3 既存 TEX 文書のウェブページへの変換

記し，
そのマークまで検索する。この手順のアクティ
ビティ図を図 4-6 に示す。
検索範囲の違いは「検索対象をコピーして暫定的な検索結果とする」手順に現れ，検索対象と検索手法の違いは「マーク以前を検索する」に現れる。

数式を入力させるように
アラートを出す

12

本プロジェクトで実装した変換機能を利用して，TEX ファイルをウェブページに変換して保存するまでの流れを図 4-8 に示す。
ページ読み込み時に，保存するウェブページの拡構造検索に関して，TEX の数式コマンドでは数

張子は .html をデフォルトとし，ダウンロード用リ式の構造とは中括弧「 { 」，「 } 」を含む数式コマ

ンクも表示する。拡張子はほかに，.php などからンドである。構造の検索として，検索数式の構造を選択できる。ユーザが TEX ファイルを選択すると，NAIS Journal

89

ユーザ

表 4-1

プログラム

属性
保存するファイルの拡張子をhtmlにする

ダウンロード用のリンクを表示する

href
download

4-4
保存するファイルの拡張子を変更するTE Xファイルを選択する

TE XをHTML5に変換する

編集や検索を行う

変換結果をページ上にプレビューする

リンククリックでダウンロードする

ダウンロード用リンクを更新する

ダウンロード用リンクに設定する属性値
属性値「data:application/octet-stream,」とソースコードの文字列連結
タイトルと拡張子の文字列連結

フリーハンドによる描画

ユーザが線の太さや色を選択して，フリーハンド
で自由に線を描画することで，意図した文字の記述や図形を描けるように実装する。その際，フリー
ハンド描画に関して，HTML5 関連技術の Canvas
API が有用である。描画オブジェクトの個数が多いときの表示時間が SVG に優るため，数式掲示板

図 4-8

TEX ファイルをウェブページに変換する流れのアクティビティ図で表示する形式として適切と考えられる。
描画の色や線の設定をインタフェース内に設置
し，発言領域内に Canvas 領域を表示して，直接描プログラムが文書を読み込み，TEX の文書構造の画する。また，数式掲示板内からリンクを貼り，新コマンドを HTML5 のセマンティック要素などのしいタブで描画専用のページを表示する。

タグに置き換え，MathJax の設定などの HTML タ

Canvas API を用いたフリーハンド描画のマルチ

グを追加する。その変換結果を表示した後，ユーザ

デバイス対応について説明する。マウスでフリーハが確認し，文書の編集や数式の検索などの操作を行

ンド描画するとき，描画領域内でクリックしたままう。文書の編集や拡張子の変更後，リンクをクリッ

ドラッグすることで <canvas> タグの on メソッド

クして，ローカル PC に保存する。

で JavaScript の関数を起動して，描画する。タッ

外 部 フ ァ イ ル を JavaScript で 操 作 す る 技 術 にチパネルが搭載されたタブレットやスマートフォ

関しては，HTML5 関連技術である File API が有ンでは，2013 年に W3C 勧告が行われたタッチイ

用 で あ る。HTML タ グ の <input type=”ﬁle” /> でベントを利用する。PC でのマウスの操作に対応しファイルを選択する。選択時に onChange メソッ

たタッチパネルに対する指の操作で起動する on メ

ド で event を 渡 し て JavaScript の 関 数 を 起 動 す

ソッドを使う。これらの対応を表 4-2 にまとめる。

る。 関 数 内 で は，FileReader を 起 動 し て，event

ここで，PC のクリックに対応して，タッチパネルにから取り出したファイルオブジェクトを文字コード

指が触れる操作で描画開始を行う。マウスのドラッ

SHIFT-JIS で読み込む。読み込み完了後に，TEX

グに対応して，タッチパネルを指でなぞる操作で描の文書構造のコマンドを HTML5 のセマンティッ

画中とする。マウスのクリックの終了に対応して，

ク要素に置き換えるために定義した関数を起動し，タッチパネルから指を離す操作で描画終了とする。

プレビュー欄に表示する。その際，<a> タグの属性

表 4-2 PC，タブレット，スマートフォンにおける on メソッドの対応に次の値を設定する。このときの操作は jQuery の

操作の状態

PC

タブレット，スマートフォン

描画開始

変換後に表示された文書を見て，数式エディタを

mousedown

touchstart

描画中

mousemove

touchmove

使って編集したり検索を行ったりした後，リンクを描画終了

mouseuptouchend

attr メソッドでまとめて行うことができる。

クリックしてダウンロードする。ここで，保存するファイルの拡張子はプルダウンメニューから選択
し，選択時にリンクの download 属性を変更する。
デフォルトの拡張子は .html とした。
TEX の文書構造のコマンドと HTML5 のタグと

90

4-5

外部サイトとの連携

Wolfram Alpha 検索とグラフ描画について，専用の数式入力フォームを用意して，それぞれの操作を行うボタンを設置した。

の対応に関して，本プロジェクトで開発する範囲を

Wolfram Alpha 検索の際，入力した数式の TEXTEX の代表的な書籍 [6] に記載されている文書構

コマンドを成形して，Wolfram Alpha の URL の最造のコマンドに絞った（表 4-1 参照）。

後尾に追記して，新しいタブで開く。TEX コマンド

NAIS Journal

ボタンを設置した。
Wolfram Alpha 検索の際，入力した数式の TEX コ
マンドを成形して，Wolfram Alpha の URL の最後尾に追記して，新しいタブで開く。TEX コマンドを成を成形する際，数式環境を消去し，フォントの形する際，数式環境を消去し，フォントの TEXTEX
コマ
コマンドを解除し，
積分記号「∫」と積分測度「dx」
ンドを解除し，積分記号「」と積分測度「dx」が被2積分関数「sin x 」をはさむように移動してWolframが被積分関数「sinx2」をはさむように移動してAlpha
が数式を解釈できるようにする。そして，
Wolfram Alpha が数式を解釈できるようにする。そJavaScript の encodeURIComponent
を用いてバック
して，JavaScriptの encodeURIComponent
を用いスラッシュや半角スペースなどを URI にエンコードてバックスラッシュや半角スペースなどを URI にする。この成形の処理結果の図 4-9 に示す。ここで，エンコードする。この成形の処理結果の図 4-9 に示
成形前の数式のカーソル「｜」を消去している。また，す。ここで，成形前の数式のカーソル「｜」を消去
成形前の数式のように，物理学では積分記号「 」としている。また，成形前の数式のように，物理学
積分測度「dx」をまとめて記述する記法がよく見られでは積分記号「∫」と積分測度「dx」をまとめてる。この場合，Wolfram Alpha で積分が行われない。
記述する記法がよく見られる。この場合，Wolfram
そのため，被積分関数の後ろに「dx」を移動している。
Alpha
で積分が行われない。そのため，被積分関数 
また，積分測度「dx」の「d」のフォントを解除する。
の後ろに「dx」を移動している。また，
積分測度「dx」

MathJax による文章中の数式の表示ができないため，
文章中の数式を通常の数式環境に置き換える処理を行う。投稿の手順を追加して表示した様子を図 4-10に示す。ユーザはエディタを使って数式を入力した
使って数式を入力した後，プルダウンメニューから後，プルダウンメニューからブログサイトのlivedoorBlog
を選択する。すると，エディタで入力しブログサイトのlivedoorBlog を選択する。すると，た数式に
MathJaxの読み込みと設定を行うscript!
エディタで入力した数式にMathJax の読み込みとタグを追記したテキストを表示する。ユーザはそれを設定を行う <script> タグを追記したテキストを表示
コピーし，ブログを投稿する。投稿されたブログの閲する。ユーザはそれをコピーし，ブログを投稿する。
覧者は MathJax で表示された数式からTEX コマンド投稿されたブログの閲覧者は MathJax で表示されを再利用することができる。
た数式からTEXコマンドを再利用することができる。
の「d」のフォントを解除する。

4-10 数式を含む文章のブログへの投稿準備 
図図数式を含む文章のブログへの投稿準備
図 数式の成形
図 4-9 数式の成形
 グラフを描画するときは，グラフ描画できるグラフの形式に成形し，入力した数式の TEX コマンドをグ
グラフを描画するときは，グラフ描画できるグラ
ラフ描画サイトのURL に追加して，iframe!タグをフの形式に成形し，入力した数式のTEX コマンドを用いて埋め込む。すると，発言内容の領域にグラフをグラフ描画サイトのURL に追加して，<iframe>
描画した外部サイトを埋め込むことができる。
 タ
グを用いて埋め込む。すると，発言内容の領域にグ
iframesrc='http://graph.tk/#x*¥sin¥left x¥right 'ラフを描画した外部サイトを埋め込むことができる。
width='600'
height='300'!
<iframe src='http://graph.tk/#x*\sin\left（x\
インラインフレームを使用しています。/iframe!
right）' width='600' height='300'>
インラインフレームを使用しています。</iframe>
４－７ 管理者モード
4-7 管理者モード
 管理者モードのページを PHP と JavaScript で実装
管理者モードのページを PHP と JavaScript でした。
実装した。
管理者モードへのログインの手順を説明する。数式管理者モードへのログインの手順を説明する。数掲示板のロゴをクリックすると，prompt
メソッドに式掲示板のロゴをクリックすると，prompt メソッよりパスワード入力欄が表示されてログインする。パ
ドによりパスワード入力欄が表示されてログインす
スワードはPOST で送信し，管理者モードの PHP ページ内で確認する。ログイン完了後，数式掲示板でのる。パスワードは POST で送信し，管理者モード
発言履歴を読み込み，次の2 つの方法で発言を削除，の PHP ページ内で確認する。ログイン完了後，数編集する。
式掲示板での発言履歴を読み込み，次の
2 つの方



法で発言を削除，編集する。
1. それぞれの発言に削除ボタンが設置する。クリック
1．それぞれの発言に削除ボタンが設置する。クリックすると，conﬁrm メソッドで確認のア

グラフ描画の際にも数式を成形する必要がある。 14（x）」例として，「x sin（x）」のように「x」と「sinの間の掛け算の記号を省略した数式の場合，掛け算

ラートを出す。
2．発言履歴のソースコードを直接編集できるテの記号「*」を挿入すると，グラフを描画できるようになる。

キスト領域を設置する。
両者の変更は即時反映し，保存ボタンをクリック
して編集後の発言履歴を保存する。発言履歴の保存

4-6

ウェブ上への数式の発信

MathJax が有効なブログサイトをプルダウンメ
ニューで選択すると，サイトへのリンクとともに数時は同じ PHP ファイルへの POST の送信時に上書き保存する。
削除するときは数式掲示板での発言毎に行う。

式エディタで編集中の数式や文章に各ブログで有効な <script> タグを追加して，表示する。ここで，2 つの <script> タグがどちらも有効なサイトと 1つのみ有効なサイトに応じて表示内容を変更する。

5．今後の発展形に関する考察
5-1

HTML5 と HTML5 関連技術

MathJax の詳細設定を行う <script> タグが無効でHTML5[28][29] は 2014 年 10 月 28 日に W3C 勧ある場合，MathJax による文章中の数式の表示が告となった，ウェブ上のコンテンツを扱う際の標準技できないため，文章中の数式を通常の数式環境に術である。ウェブページに記述した文書の意味に着置き換える処理を行う。投稿の手順を追加して表目したセマンティック要素やマルチメディアを扱うタ示した様子を図 4-10 に示す。ユーザはエディタをグが新たに加わった。さらに，Canvas API や Web

NAIS Journal91

Storage などの HTML5 関連技術がある。これらはアップロードした .mp4 や .ogv や .webm などの拡

複数種類ある HTML レンダリングエンジンでも利用

張子の動画を <video> タグによる簡潔なコードをできるように，2 種類以上の主要ブラウザでテストさ使って埋め込むことが出来る。

れて勧告されている。今後，各ブラウザが HTML5<video src='http://linesegment.web.fc2.com/html5/の仕様を実装すると予想される。また，2015 年 1 月

v0000.mp4'controls width='400' height='300'></

15 日に W3C へ HTML5 日本コミュニティグループ

video>[30] が設立され，日本でも HTML5 の仕様が問題な

PC の主要ブラウザの <video> タグ対応について，

く定着していき，今後は W3C 勧告となった HTML5

利用前に利用者自身で調べてから利用するのが望まを利用することが望ましいと考えられる。

しい。

HTML5 や HTML5 関連技術について，ウェブ
上で数式を扱う際や掲示板で有用な例を示す。

5-2

マルチデバイス対応

数式エディタに関して <button> タグを多用しMathJax の特徴として，JavaScript が利用できているため，ページ内のボタン配置が重要となる。

るタブレットやスマートフォンからも扱える点があボタンには数式を編集する用途やデータを送信する。しかし，画面サイズが異なることから，デバイる用途がある。HTML5 以前はデータ送信のボタ

ス毎に PHP ファイルを作成した。その際，レイア

ンは <form> タグに入れる必要があった。しかし，ウトを極力変更せず，MathJax の設定において数<button> タグに form 属性で <form> タグの id を式の大きさを調整し，CSS を用いてボタンや入力

指定することで，<form> タグに入れない記述が可

フォームのサイズを調整した。

能になった。例を示す。
<form id=”comment”></form>

動作結果については，タブレット（iPad 第 4 世代
iPad Air）とスマートフォン（Android 2.3.5）で確認した。

<button form=”comment”> 送信 </button>

タブレットやスマートフォンの特徴として，タッ<button> フリーハンドで描画 </button>

チ パ ネ ル で 入 力 す る 際 に マ ウ ス の 右 クリックに<textarea form=”comment” id=”mathInput” ></あたる操作ができないことがある。それにより，textarea>

MathJax のメニューの表示ができない。しかし，

この場合，送信ボタンとテキスト領域はフォー

ブラウザの FireFox beta では数式箇所で長押しす

ムで送信するが，「フリーハンドで描画」ボタンはると MathJax のメニューが表示され，数式のコマ

フォーム送信とは関係がない。HTML5 以前であれ

ンドをコピーできる（図 5-1 参照）。

ば，</form> が </textarea> の後にあり，「フリーハンドで描画」ボタンを押すとフォームが送信される。HTML5 では，<form> タグの存在を配慮せずにボタンの配置を決めて，エディタのレイアウトを考えることができる。
掲示板サイトにおいて，ユーザが過去にログインしたスレッドの名称を履歴として表示することとした。それには，HTML5 関連技術の Web Storageのうち，有効期限のある sessionStorage でなく，ブラウザに半永久的に保存できる localStorage を用いた。ユーザのログイン後に自動的に <table> タグを用いて，過去にログインしたスレッド名を一覧表示する。
今 回 の 開 発 で は 画 像 の ア ッ プ ロ ー ド の ほ か，
URL の入力フォームとボタンを設置して動画の埋め込みも行えるようにした。そこで，HTML5 関連
技術の <video> タグを用いる。YouTube の動画は<iframe> タグで埋め込むが，例えば FC2 サーバに

92

NAIS Journal

図 5-1

システムをスマートフォンから利用できる

5-3

実際の利用

プロードした後の編集において，短い文章を動画中構築したウェブサイトの利用に向けて，大阪府立に追記するアノテーションが便利である。それによ大学において数学の講義を担当されている川添 充

り，分かりやすく操作方法を説明することができる。

教授と吉冨 健太郎准教授のお力添えを頂いた。数数学の講義における試験導入に際して，本学と異式入力が可能なシステムの特徴として行列の入力機なる状況を述べる。

能があり，行列を多用する講義の代表である線形代

・大学のサーバの PHP のバージョンは少し以前

数学での試験的な導入を依頼した。システム内にアのものであるが，研究室のサーバのバージョン

ンケートへのリンクを貼り，フィードバックを募る。

は十分に新しい。

打ち合わせの際に得た事項を述べる。

・学生は主にスマートフォンから LMS を閲覧する。

・数式エディタで入力する際，英数字などをキー

・学生はスマートフォンから PDF も頻繁に閲覧

ボードから入力できる入力欄があるとよい。
Enter キーや Space キーにより，挿入後に自する。

動的に右移動も行うなどの使い分けができると数式入力の方法としてエディタよりもフリーハンよい。

ド描画の方が需要がある可能性があり，エディタの・フリーハンド描画が PC からのみ利用でき，タ

利用よりも紙に書いた数式の写真をアップロードす

ブレットやスマートフォンから利用できない。

る方が簡便である可能性がある。そこで，アンケー

・利用方法が分かりにくい。

トで問う内容に数式エディタが使いやすいかどうか

・問題発言の削除などができる管理者モードがあのほかに，数式入力の際にエディタを使うという選るとよい。

択肢の有無を入れた。試験導入の結果は未回収の状

1 つ目と 2 つ目について，3.7 節で述べた方法で，態である。

新たに実装して対応した。3 つ目について，マニュ本プロジェクトの開発の範囲外であるが，数学のアルのページのほか，YouTube にアップロードし講義を行う教員の立場から，対面授業で導入できるた動画による説明を試みた。YouTube に動画をアッと便利なシステムの将来像をお聞きした。シーケン

学生

教員

1:提出物(紙)を提出する0

スキャナ HW

1.1:提出物をスキャンする0

CMS 教務システム

1.1.1:画像データを送信する0LMS 教務システム

1.1.1.1:自動採点する01.1.1.1.1:コメントを生成する0小テストやレポート

コメント
スコア
1.2:自動採点の結果を表示する0
採点結果
1.3:コメントを追記する0

1.4:スコアとコメントを登録する02:提出物の評価を確認する0
スコア、コメント

図 5-2

大阪府立大学で聴取した将来的な要望

NAIS Journal

93

ス図を用いて説明する。

リーハンドで数式を入力するかについて，現時点の講義において，学生が小テストやレポートを紙でフリーハンド入力の精度や記述できる数式の長さや提出する。回収した提出物を教員がまとめてスキャ

数式の修正の問題が解決されれば，エディタのようナに通す。スキャナが提出物をスキャンして画像

な入力サポートの一部は使われなくなると考えられデータとして保存し，CMS（Course Management

る。しかし，フォントや数値を指定する空白などのSystem）に送信する。CMS において，画像データ

フリーハンドでは難しい数式の入力については使わから数式や文章をもとに自動採点が行われ，スコア

れ続けると考えられる。将来像として，フリーハンとコメントが自動生成される。教員が自動採点の終ドで入力した数式を数式処理できるシステムが考え了を確認後，コメントを追記し，LMS に提出物のられる。

採点結果を登録する。そして，提出した日に学生がスマートフォンから LMS にアクセスして結果を確認できるシステムが望まれている。

6-2

MathJax と TEX

今回採用した MathJax は TEX をウェブページ

ウェブ上の数式を扱うシステムが活用される可能上で利用できるようにし，MathML をクロスブラ

性のある箇所は図 5-2 の 2. の LMS 内での学生へのウザで利用できるサポートのライブラリである。画

フィードバックを行うタイミングである。例えば，

像に比べて数式表示に時間がかかる課題があるが，提出物に関して間違っていた箇所の再提出を求める

ウェブ上で TEX の数式表示を行うための有用な手際や，フィードバックを得た学生からの質問の投稿段として認識されている。

などの目的で，数式エディタなどが活用される可能性があると考えられる。

6-3

MathML の可能性

数式検索に関して，本プロジェクトでは TEX で

6．結
6-1

論

数式について記述された数式を TEX で検索したが，現時点で数式が TEX で記述されることが多く，それに対し直接検索するためである。将来，処理速度や数式内

本プロジェクトでは，MathJax と TEX を用いの記号の意味付けなどによる優位性からウェブ上て，数式表示に特化した動的ウェブサイトを構築しで MathML が多用されると，MathML で検索する

た。特徴として，クロスブラウザかつマルチデバイ

プログラムが普及する可能性もある。将来的にも数スであり，数式を扱う際に GUI の方式をとる。実式が TEX で記述される場合にも，TEX から数式の装した機能には，数式エディタ，7 種類の数式検索，

意味付けが豊富な Content MathML へ変換して，TEX 文書からウェブページへの変換機能，ウェブ

Content MathML で検索する方法が考えられる。

上への発信のサポート，外部サイトとの連携などが現時点で Content MathML は表示目的の言語ではある。また，これらのユースケースを組み合わせたないが，検索などの処理のために有用なプログラミ

利用例，応用例を示すことで，ウェブ上で数式を使ング言語となる可能性がある。

用する目的が表示にとどまらず，表示された数式に数式の意味付けについて，MathML と同等かそれ関する可能性の一部が示されたと考える。ウェブ上以上であると思われる言語として OpenMath[31] がで利用するため，数式の再利用や応用の可能性は膨ある。また，Content MathML を用いて Semantic大である。ウェブ上で表示された数式に関する今後

MathML[32] が提唱されており，セマンティックの研究テーマとして，セマンティックウェブに関し

ウェブへの対応など，数式の意味付けに関して木構てウェブページの意味を数式からも抽出するプログ造が特徴の言語の今後が期待される。

ラムや，人工知能の研究において e ラーニングや数学研究をサポートするプログラムが研究されること
を望む。

94

6-3-1

グラフ描画

グラフを描画できる数式がウェブページ上にある

数式エディタについて，表示された数式に対し場合，その数式のソースコードを用いたグラフ描画て，マウスや指により直接選択した後で，コピーやの可能性が考えられる。表示された数式に対するグ

ドラッグして数式を移動する操作ができると編集時

ラフ描画までの操作の流れの例として，ソースコーに便利な操作である。他に数式エディタを使うかフドをコピーして，グラフ描画サイトへアクセスしてNAIS Journal

入力する方法がある。また，ウェブページの機能とるワードとして Mathematica，TEX，MathML がしてグラフ描画ボタンを用意して，ポップアップ

有効であり，関数の振る舞いや性質について調べる

ウィンドウなどで表示する方法も考えられる。これことができる。数式の入力サポートと数式表示が行らのような工夫により，数式に人間とのインタラク

われ，かつ数式処理を兼ね備えているというシスティブ性をもたせることができる。

テムではない。そこで，ウェブ上で表示された数

数値シミュレーションや精細なグラフ描画に画像

式のコマンドをコピーできると，数式処理の結果

形式を利用する場合，Canvas API や SVG（Scalable

を Wolfram Alpha で調べる形で数式を再利用する

Vector Graphics）を利用する方法があり，詳細な方法がある。本プロジェクトでは，Wolfram Alpha

比較 [33] が行われている。ウェブページ上で多数で検索できるよう連携した。

のグラフを描画するときは Canvas API が速く，非常に精細なグラフを描画するときには SVG が有用

6-3-3

セマンティックウェブ

である。これらはグラフのパラメータ調整などのイ数式もウェブページ内のコンテンツであり，ペーンタラクティブな操作が実装可能である。今後の発ジの意味を担っている。そこで，ページの意味を把展として，論文に記述された数式に数値を設定して握するためには数式の意味付けも精確に抽出する必数値シミュレーションを追試する動的なツールへの要がある。そのようなプログラムを実装して，結果

需要 [34] もある。その場合には速い描画機能のたをウェブページの <meta> タグに記述することで，

め，Canvas API が推奨される。また，高精度のグ

セマンティックウェブへの対応を試みることが可能

ラフを拡大する目的で描画する場合には SVG が推である。これは，1 つのホームページでなく，ウェ奨される。SVG の利用例として，拡大しても綺麗

ブ全体の数式に関する知識や推論により，ウェブ利な描画が行われる地図 [35] がある。本プロジェク

用者が問題解決へつなげる目的である。AI とオン

トでは，Canvas API を用いた数値シミュレーショ

トロジーの研究 [40] やページ内のスキーマの共通

ンや SVG を用いた拡大表示を行う精細なグラフ描

認識 [41] により実現に近づくと考えられる。この画は範囲外とした。

ようなプログラムの実装は本プロジェクトのスコープの範囲外とした。

6-3-2

数式処理

数式表示のプログラミング言語を用いると，コマ

6-4

数式の利用形式の発展

ンドと数式の意味を対応させることが可能である。

利用例について，筆者が提案した方法はアプリ

コンピュータの処理能力を活かした CAS（Computer

ケーション上での利用のみであった。それに対し，

Algebra System，数式処理システム）や式変形の

大阪府立大学にて聴取した将来像では，紙からス候補の出力を行う AI（Artiﬁcial Intelligence，人

キャナや自動採点システムを経て LMS まで連携し工知能）により，学問上の問題の解決や教育の場面て利用するシステムである。技術を担う情報系にで数式を扱う方法がある。例えば，数学の問題を解とって，情報システムに対する意見の聴取が重要で決に関する日本数式処理学会や e ラーニングにおけあることが分かる。ウェブ上の数式を扱う先行研究

る自動採点や学生へのレスポンスに関する STACKについて，数式の検索機能の論文は情報系の分野でなど研究が進んでいる。また，「ロボットは東大に書かれている。そこで，実際に数式を扱う人の要望入れるか」というプロジェクト [36] も存在する。

に応えられるように，物理学の理論出身の筆者がヨーロッパで普及している GeoGebra[37] は教育用

種々の検索機能を考案し実装した。ウェブ上の数式

ソフトウェアである。その他，数多くの数式処理シを扱うシステムとして，そのような数式を実際に使ステムがあり，リンクを付録に付す。このような数

うさまざまな分野からの意見が関わることで，ウェ式処理の実装は本プロジェクトのスコープの範囲外

ブ上の数式のテーマが進展することを望む。

とした。

本論で開発したインタフェースでは，数式に対し

また，Wolfram Research[38] により，数式を用て文字列に関する処理を行うが，微分方程式の数値

いたアルゴリズムの研究が進んでいる。その成果的解法の計算などの数式処理を行うことは範囲外での例として，ウェブサイトとして数式検索エンジある。また，CAS の先行研究は進んでいる。それ

ン Wolfram Alpha[39] が公開されている。検索す

らの間を部分的にカバーしているのが入力サポート

NAIS Journal

95

と検索機能に関して SearchOnMath や数式処理機

謝辞能に関して Wolfram Research である。そこで，将本プロジェクトに際して，以下の方に感謝する。

来的に簡単に扱える数式のインタフェースに CAS

英保茂先生，岡本敏雄先生，山嵜聡先生（以上，京が実装された数式統合環境が出来上がり，普及する，加藤泰久氏（NTT サービスエ
都情報大学院大学）と予想される。その頃には速い数式表示機能や AI，

ボリューション研究所），奥村晴彦先生（三重大学），

さらにはセマンティックウェブが普及していると考福井哲夫先生（武庫川女子大学）

えられる。

なお，この研究の一部は大阪府立大学の吉冨健

数式を扱うとき，数式表示や数式処理やセマン

太郎先生代表の科研費「スマートフォン最適化型

ティックウェブへ数式から対応するほか，グラフやWeb ベース教材による大学専門基礎数学用反転授シミュレーションなどの可視化への発展が挙げられ業の開発」15K00926 の補助を受けている。

る。数学の位相幾何学や結び目理論は数式よりも，その見た目が重要であり，高次元空間の物体の 3 次
元空間での断面なども需要があると思われる。これ
らは数式の言葉で表すことができ，そのような数学の概念の可視化の開発・研究が情報系の分野で進み，数式を扱う分野にも手軽なアプリケーションとして広まることを望む。
6-5

最後に

ウェブ上で数式を扱うサイトでは，数式の入力サ
ポート，数式の検索機能，数式を使って計算する数
式処理機能などが独立している場合が多い。そこで，再利用可能な形式の数式の入力サポートを実装して，数式に特化した動的なウェブサイトとして掲示板を開発した。入力した数式の保存が可能で，数式を再利用する機能として，発言履歴の中の数式の転用をサポートする機能や数式を検索する機能を実装した。また，数式特有の機能として，グラフ描画など外部サイトと連携し，数式入力の代替手段として，
フリーハンドによる描画機能を実装した。さらに，
ウェブ上への情報発信を行うサポート機能として，入力した数式と文章を MathJax が使えるブログへ投稿する準備を行う機能や，ウェブフレンドリー
でない TEX 文書を HTML5 に則したウェブページ
に変換する機能を実装した。このように，数式の表示かつ数式に関する種々の機能を備えて，コミュニケーションや e ラーニングや問題解決のサポートを行うインタフェースを実装した。
成果物は Vector で公開しており，成果物の著作権は山下伸男が所有している。
数式 UI 掲示板 Rμν
http://www.vector.co.jp/soft/winnt/net/se509215.html

96

NAIS Journal【参考文献】[1] 総務省，u-Japan の理念，総務省
http://www.soumu.go.jp/menu_seisaku/ict/u-japan/
new_outline03.html
Raluca Budiu，モバイル： ネイティブアプリと Web ア
プリ，ハイブリッドアプリ− U-Site，U-Site[2] 山下伸男，江見圭司，「数式表示に特化した動的ウェブ
サイトの構築」http://web1.kcg.edu/~k_emi/math/NewTech2015/
MathTech2015.pdf[3] 江見圭司，MathML 最先端 2008 春，kcg.edu 江見圭司のサイト
http://web1.kcg.edu/~k_emi/math/NewTech/MathMLtech2008[4] MathJax Consortium, MathJax, MathJax
http://www.mathjax.org/[5] 奥村晴彦，黒木祐介，“LaTeX2e 美文書作成入門 ”，技術評論社，2013．
[6] W3C，W3C Math Working Group，World Wide Web
Consortium（W3C）
http://www.w3.org/Math/[7] David Lippman，AsciiMath，AsciiMath
http://asciimath.org/[8] 黒木玄，MathJax の使い方，MathJax の使い方
http://genkuroki.web.fc2.com/[9] A m e r i c a n M a t h e m a t i c a l S o c i e t y, M R : S e a r c h
Publications database, American MathematicalSociety :: Homepage
http://www.ams.org/mathscinet/index.html[10] Cornell University, arXiv.org e-Print archive, arXiv.
org e-Print archive
http://arxiv.org/[11] California Institute of Technology, Michael A.
Gottlieb, and Rudolf Pfeiffer, The Feynman Lectures
on Physics, The Feynman Lectures on Physics
http://www.feynmanlectures.caltech.edu/index.html[12] Stack Exchange, Inc., MathOverﬂow, MathOverﬂow
http://mathoverﬂow.net/[13] Wikimedia Foundation, Inc., Wikipedia，[14] Wikipedia
https://www.wikipedia.org/

[15] Crossroad，数学ナビゲーター掲示板 [All Thread / Page:0]，数学ナビゲーター
http://www.crossroad.jp/cgi-bin/bbs/mathbbs/cbbs.cgi[16] H. Gotoh, M. Sakamoto, K. Emi, “Developing
e-Learning and Communication Systems to Support
Displaying Math Equations on Web-Pages, in 2009”，
日本 e ラーニング学会 JeLa2009 年度国際シンポジウ
ム，pp3-6，2009.
[17] 池田光穂，コミュニケーションの定義：Deﬁnition ofCommunication，池田 光穂（IKEDA Mitsuho）
http://www.cscd.osaka-u.ac.jp/user/rosaldo/090700
communication.html[18] 岡本 敏雄，小松 秀圀，香山 瑞恵，“ 情報教育シリーズ
e ラーニングの理論と実際 システム技術から，教え・学び，ビジネスとの統合まで ”，丸善，2004．
[19] 中村 晃，“KIT 数学ナビゲーションを活用したリンク・
バック・ラーニング ”，KIT progress：工学教育研究
12，pp.29-38，2007.
http://ci.nii.ac.jp/naid/110006192083/[20] Lu Wang, pdf2htmlEX by coolwanglu, Lu Wang'sPage
http://coolwanglu.github.io/pdf2htmlEX/[21] Nikos Drakos, The LATEX2HTML Translator,
Washington State University - Pullman, Washington
http://www.wsu.edu/UNIX_Systems/tex/latex2htmlmanual/index.html[22] John MacFarlane, Pandoc - About pandoc, John
MacFarlane - Home
http://johnmacfarlane.net/pandoc/[23] Jeff Knisley, A Brief Introduction to LaTeXMathML,
n1530link
http://math.etsu.edu/LaTeXMathML/[24] Anthony Foster, Han, Philippe Latulippe, graph.tk，graph.tk
http://graph.tk/[25] ネットオウル株式会社，無料で使えるホームページサー
ビス！ ウェブクロウ，無料で使えるホームページサー
ビス！ ウェブクロウ
http://www.webcrow.jp/[26] Peter Jipsen, ASCIIMathML opening page, Chapman
University | A Top Private University in California
http://www1.chapman.edu/~jipsen/asciimath.html[27] Davide P. Cervone, jsMath, jsMath: jsMath Home
Page
http://www.math.union.edu/~dpvc/jsmath/[28] W3C，HTML5, World Wide Web Consortium（W3C）
http://www.w3.org/TR/2014/REC-html5-20141028/[29] W3C，HTML5 勧告―オープン・ウェブ・プラットフォー
ムの重要なマイルストーンを達成，World Wide Web
Consortium（W3C）
http://www.w3.org/2014/10/html5-rec.html.ja[30] W3C, HTML5 Japanese Community Group, World
Wide Web Consortium（W3C）
http://www.w3.org/community/html5jp/[31] The OpenMath Society, OpenMath, OpenMath
http://www.openmath.org/[32] MovGP0, Semantic MathML−semanticweb.org,
semanticweb.org
http://semanticweb.org/wiki/Semantic_MathML，[33] Microsoft，
SVG と Canvas: どちらを選ぶか（Windows）
MSDN - Microsoft Developer Network
http://msdn.microsoft.com/ja-jp/library/gg193983（v=vs.85）．aspx[34] 橋本 直樹，railmaps/tokyo.svg at master・hashcc/railmaps,
GitHubhttps://github.com/hashcc/railmaps/blob/master/
tokyo.svg[35] ロボットは東大に入れるか。Todai Robot Project
http://21robot.org/[36] 芦野 俊宏，“ 科学技術データと電子ジャーナル ”，情報知識学会誌 2008 Vol. 18，No.5 20 周年記念特別号，
pp.487-488.
https://www.jstage.jst.go.jp/article/jsik/18/5/18_18-527/_article/-char/ja/[37] International GeoGebra Institute, GeoGebra，GeoGebra
http://www.geogebra.org/[38] Wolfram, Wolfram: Computation Meets Knowledge,
Wolfram: Computation Meets Knowledge
http://www.wolfram.com/[39] Wolfram, Wolfram|Alpha: Computational Knowledge
Engine, Wolfram: Computation Meets Knowledge
http://www.wolframalpha.com/[40] 溝口 理一郎，“ 知の科学 オントロジー工学 ”，オーム社，
2005．
[41] Schema.org, Home−schema.org, Home−schema.org
http://schema.org/……………………………………………………………………
◆著者紹介

山下

伸男

Nobuo Yamashita

日比谷コンピュータシステム株式会社社員。
京都情報大学院大学応用情報技術研究科修了，情報技術修士（専門職）。

江見圭司

Keiji Emi

京都情報大学院大学准教授。
京都大学理学士，同大学院修士課程修了（化学専攻），同大
学院博士課程修了（人間・環境学専攻），博士（人間・環境学）。
元金沢工業大学専任講師。
ET ロボコン関西地区大会実行委員長，ゲーム学会評議員，一般社団法人情報処理学会「コンピュータと教育」研究会
運営委員。

NAIS Journal

97