...メニューに戻る ...Excel他のメニューに戻る
■Web上の数式表示方式の比較

 この頁では,2014年現在よく使われているWeb上の数式表示方式について,できること,できないことを中心に各々の長短を比較する.
 ただし,ある方式で「できる」ことの証明は実例が1つあればよいが,「できない」ことの証明は難しく,このサイトの管理人の印象として「できないようだ」という程度の意味とする.
 比較するのは,次の4種類の数式表示方式であるが,必要に応じて(*)画像ファイルを貼り付ける方式にも触れる.なお,MathMLによる方式は,現在MathJaxに統合されておりMathMLはFirefoxとSafari5.xでしか表示されず,他のブラウザで見るためのプラグインMathPlayerもあまり導入されていないと考えられるので,MathJaxについてはjsmathの後継部分のみを扱った.
  (*) 画像ファイルを貼り付ける方式
(A) PDFファイルによる数式の表示
(B) Google Chart APIによる数式の表示…以下,Googleと略す
(C) MathJaxによる数式の表示
(D) このサイトの管理人独自のjavascript+CSSによる方式…以下,独自方式と略す
 通常,研究論文を書くときは,自分の研究の優位性を示さなければ,そもそも論文の形にならないが,ここでは後日の参考のために客観的・公平な評価になるよう努める.
 すなわち,管理人は(D)方式でここ10年余りWeb教材を作成してきたが,自分の方式の我田引水・自画自賛になるような作為的な項目立ては行わない.ただし,自分の方式については分かる部分が多いが,他の方式については,ほとんど使って来なかったため,事情が分からずに見落している可能性はある.

 以上のような前提のもとに,各々の方式の長短を比較する.

≪I≫ 紙の印刷物で示せることが示せるか
【1.分数,根号,定積分などの数式の表示】
 (A)○ (B)○ (C)○ (D)○→≪例1≫

【2.1つの式の全部または一部に色を付けること】
1つの式の全部を同じ色にする:
 (A)○ (B)○ (C)○ (D)○→≪例2≫

一部の色を変える:
 (A)○ (B)× (C)○ (D)○→≪例3≫

【3.式の大きさを変えること】
 (A)○ (B)○ (C)○ (D)○→≪例4≫

≪II≫ 双方向(三方向)コミュニケーションとしての利用
【1.当該数式にリンクを取り付けて別文書を開くこと】
(A)○(PDFでもリンクは可能)
(B)○ 
(C)○ だたし,次の【2.(C)】の落とし穴に注意
(D)○

【2.問題の表示順を変えること】
(A)×
(B)○
右の≪例5≫
ただし,スクリプトのデータとしての文字列中では,円記号 \ は \\ と書かなければならない.
(C)△
右の≪例6≫
 MathJaxでは,HTMLファイルがロードされたときにHTMLファイルのBODYに書かれた静的なテキストを順にたどって1回だけ変換が行われるようです.
 したがって,画面が表示されてから数式のコードを動的に書き換えても,新たに数式が生まれる訳ではないという点ではGoogleとは異なるようです.
 ただし,たとえhidden属性であっても,HTMLファイルがロードされるときに静的に書かれていさえすれば数式になるので,例えば必要となる数式をその頁の表示に影響しない文末(下端)にhidden属性で生成しておいて,問題文に代入することはできます.
 なお,例6のように数式自体をリンクの文字に使う場合に,下の文字の残像が上の文字に及び,z-indexを設定してもその影響が取り除けないため,上下の式の幅をかなり広く取る必要があります.(危険な落とし穴あり!)
(D)○
右の≪例7≫
 何回読んでも同じ問題が同じ順に表示されると,反復学習などで解答を覚えてしまいやすく,学習が成り立ちにくくなります.そこで,なにかのタイミング(擬似乱数,ファイルを開いた時の時分秒を種とするサイコロなど)によって問題の表示順を毎回変えることができるかどうかということです.
(この項目では,問題そのものは何種類か固定されていてもよく,別途javascriptなどを使ってその表示順序が変更可能かだけを問います.)


≪例1≫
(A)のPDFファイルでの表示例は,この頁では示せない.(以下においては特に断りなく省略する)
項目(B) Google(C) MathJax独自方式
分数 \[ \frac{x^2}{x+1} \]
根号 \[ \sqrt[3]{x+2} \]
定積分 \[ \int_0^{\frac{\pi}{2}}\sin xdx \] x dx

≪例2≫
項目(B) Google(C) MathJax独自方式
原色 \[ \color{red}{ \frac{x-\frac{1}{x}}{x+\frac{2}{x}} } \]
中間色 \[ \color{aaaaaa}{\sqrt[3]{\sqrt{x-1}}} \]
#FFFFFF型 \[ \color{009900}{\frac{ \vec{a}+\vec{b} }{2}} \]

≪例3≫
項目(B) Google(C) MathJax独自方式
分母と分子の
色を変える
たぶん
できない
\[ \frac{ \color{ff0000} 5}{ \color{0000ff}3}\times\frac{ \color{0000ff} 9}{ \color{ff0000}{10}} \] ×
色分けする たぶん
できない
\[ \int_\color{ff0000}0^\color{0000ff}1 xdx \] x dx

≪例4≫
項目(B) Google(C) MathJax独自方式
シグマ記号

\[ \sum_{k=1}^n k \]
\[ \sum_{k=1}^n k \]
k



k
ベクトル

\( \vec{a}=\vec{PQ}\)

\( \vec{a}=\vec{PQ}\)
=

=

≪例5≫
 初めに左の式を選び,続いてそれに等しいものを右から選んでください.
(B) Google.順序変更

≪例6≫
 初めに左の式を選び,続いてそれに等しいものを右から選んでください.
(C) MathaJax.順序変更

≪例7≫
 初めに左の式を選び,続いてそれに等しいものを右から選んでください.
(D) 独自方式.順序変更


【3.問題や解答の数値を動的に変えること】
読者の応答に応じた数式を表示するには,この条件を満たさなければならない.
(A)×
(B)○
右の≪例8≫≪例9≫
ただし,スクリプトのデータとしての文字列中では,円記号 \ は \\ と書かなければならない.
また,Googleで計算ができるのではなく,javascriptで表示すべき式の形を求めておけば,Googleで表示することができるという意味.
(C)○
 ←読者からの指摘で「できる方法がある」ということですので,この項目を変更しました.(なお,MathMLでもできるようですが,ここでは議論しません.)
(D)○
右の≪例10≫

【4.数式中の一部分を入力欄にすること】
(A)×
(B)×
(C)×
(D)○
下の≪例11≫
≪例11≫
次の空欄を埋めてください.


(1) =
(2) =
(3) +=
CheckRemove
≪例8≫
 初めに左の式を選び,続いてそれに等しいものを右から選んでください.
 分母と分子の最大公約数を求めるには「ユークリッドの互除法」が利用できます.(見かけは難しいですが,最大公約数が分かれば何でもない問題です)
(B) Google.問題の新規作成


≪例9≫
 連立方程式(未知数2個,方程式2個のもの)の解を求めます.
 各自で確かめたい連立方程式を書き込んでください.(空欄を移動するにはTabキーが使えます)
ただし
• 整数係数の問題に限ります.
• 解がただ一つに定まる問題に限ります.(不能解・不定解となる問題は扱っていません)
()x+()y=() …(1)
()x+()y=() …(2)
解く消す


≪例10≫
 2次方程式の解を求めます.
 正負の整数を入力して[解を求める]ボタンを押してください.
()x2+()x+()=0

解を求める やり直す

≪III≫ 導入・メンテの難易度…Web教材開発者に必要なこと
(*) 画像ファイル: 容易…お絵かきソフトが使えて,
JPG,PNG,GIFファイルに保存できればよい
(A) PDF : 容易…ワープロソフトが使えればよい
(B) Google: 低…初歩的なTeXの構文が理解できればよい
(C) MathJax: 中…初歩的なTeXの構文が理解できればよい
(D) 独自方式: 高…初歩的なjavascriptが理解できればよい
≪IV≫ Web開発者による設定変更,加工の自由度
※難易度と加工の自由度は対応している.すなわち,難易度の低いものは,すぐ使えるように作り込んであるので,自由度が低い.
(B) Google  : 低
(C) MathJax : 中
(D) 独自方式 : 高
≪V≫ 機器,ブラウザに対する依存度
※ここでは2014年現在,我が国の多くの若者が使用している情報機器として,PC,スマートホン,タブレットまでを想定し,ガラパゴス携帯やゲーム機は初めから分母に含めない.
(*) 画像ファイル:機器,ブラウザにほとんど依存しない
(A) PDF    :機器,ブラウザにほとんど依存しない
(B) Google  :機器,ブラウザにほとんど依存しない
(C) MathJax  :機器,ブラウザにほとんど依存しない
(-) MathML方式:制約がある
(D) 独自方式 :右の≪図1,図2≫参照
≪V≫ 経緯,普及度,サポート体制
※以下はWikiPediaなどのWeb情報による.
(B) Google Chart API:
2007年開始;Google社の無料サービス;
(C) MathJax (jsmath継承部分):
2009年開始;国際的には普及;米数学会が管理.米国物理学協会やStack Exchange Network(英語版)のような多数のスポンサーによってサポートされている.
(-) MathML方式:
1999年W3C勧告の世界規格.ブラウザの制約があり国内ではあまり普及していない.
(D) 独自方式 :
2006年ごろ筆者が開始;ユーザは世界で唯1人.誰からもサポートはない(シンガー&ソング&ライターの状態)・・・読者アンケートのみが手掛かり
≪VI≫ その他
(B) Google Chart API:
各々の数式は200文字以下で書かなければならないという制限がある…例えば,4×4の行列で各成分が根号を含む分数であるような場合には相当な文字数を書き込まなければならないので,数個の数式に分けて表示してから結合する方法が考えられるが,このときに左かっこ,右かっこと各成分の上下左右がずれないようにするには細心の注意が必要になる.
(C) MathJax (jsmath継承部分):
Internet Explorer(8) や iPad では表示が遅いというWeb記事が散見される
■若者が利用する情報機器の変化

 次の図1は2012年1月から2014年11月の期間に,筆者の管理する数学学習サイトへのアクセスに用いられた月ごとの機器別アクセス件数(ページビュー単位)です.これによれば,すでに過半数の読者がスマートホンからアクセスしていることが分かります.
 この頁のテーマとの関わりで言えば,数式を表示する方式がなるべく機器やブラウザに依存しない方が望ましく,特にスマートホンへの対応を軽視すれば今後の青少年向けの教育として成り立たないと考えられます.
≪図1≫

■独自の数式表示方式の見え方
 次の図2は,このサイト独自の数式表示方式について「見やすく表示されるか」「かなり形が崩れる」で選んでもらったアンケート結果です.この集計に含まれるのは,2014年4月から2014年9月の期間に回答のあった3079件です.項目によって回答数が異なりますが,概ね8割以上の読者が「見やすく表示されるか」と答えたと考えられます.
≪図2≫
定積分分数と定積分根号はいずれも回答者総数が1桁であるため,今後比率が変動する可能性があります.各々の意味は「定積分の下端・上端が分数であるときに,それらの記号は見やすく表示されているか」「定積分の下端・上端が根号であるときに,それらの記号は見やすく表示されているか」という意味です.
 詳しく検討すると,幾つかの課題もあります.例えば,「スマートホンによっては横幅400ピクセルの表で300ピクセル辺りで改行されて,一連の数式が上下2段に分かれてしまう」「スマートホンによっては定積分の下端と上端の値が積分記号と重なったり左に寄ったりする」など.
 この他,Operaというブラウザでは Times という語句でTimes族のフォントのうち利用可能なものを表示するということができないため,独自方式の数式はまったく異なるフォントで表示される.静的な文書や他のブラウザでは問題はない.

【2014年現在の暫定的なまとめ】

 Web教材を用いて数学を教える場合に,相手の年齢,理解力,学習意欲なのど条件が変われば,最適の方式も変わりえますが,2014年現在では自分のサイトを運営する場合の長短を右図のようにまとめています.

 (D)独自方式を1位ではなく,2位に置く理由の主なものは,次の通りです.
・双方向通信として制約が少ないのは(B)Googleと(D)独自方式であり,他は無理がある.だから,(B)(D)以外の評価は低くなる.判断が難しいのは(C)であるが,(C)は導入・メンテが容易という長所があるが,一方向通信を代表する画像・PDFと比べて優位な機能が多くない.

・(D)独自方式はスクリプトなので,ハードルが高く,一般向けでないかもしれない.

・(D)独自方式は表示された数式の美しさ(一方向通信としての重要な要素)という点では,(B)(C)よりもやや劣る。

・(D)独自方式は,現在のところまだ未完成で「繁分数式で分母が整数と分数の混合となっている」場合,「根号の中に分数が入る」場合,「分数の分母や分子に入力欄を設置する」場合などにおいて,スタイルシートの中で上に何ピクセル,下に何ピクセル移動などと調整する必要がある.

・(D)独自方式は個人でメンテしているため,「機器」「ブラウザ」および「そのバージョン」の膨大な組合せの全部についてチェックすることができない.この点では,(*)(A)(B)(C)の方が優れている.
...メニューに戻る ...Excel他のメニューに戻る