Web で数式 (その 1)

今日はちょっとしたツールを紹介。私も奥村先生のブログで知ったので、既にご存じの人もいると思いますが...。

Web で以外と困るのが、数式の記述。

一応 MathML が存在するが、普及は今一つ。最も大きなシェアを持つ Internet Explore が対応していないので、事実上使えない。例えば、

<math> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mrow> <mo>-</mo> <mi>b</mi> </mrow> <mo>&PlusMinus;</mo> <msqrt> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>-</mo> <mrow> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </mrow> </mrow> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math>

といった記述が、

x = - b ± b 2 - 4 ⁢ a ⁢ c 2 ⁢ a

となる。"Firefox 等の対応しているブラウザなら、

の様に、ちゃんと二次方程式の解の公式として表示される。

追記

結局いろいろなブラウザでそれなりの表示を求めると、画像を用意するしかんない。しかし、この画像を用意するのが面倒。

そこで、本日紹介するツールの紹介となる。

使うツールは、Google Chart Tools の Mathematical (TeX) Formulas。TeX や MathML と同じく、マークアップで数式をかける。

上記のコードは、

<img src="http://chart.apis.google.com/chart?cht=tx&amp; chf=bg,s,FFFFE8&amp;chs=1x0&amp; chl=x=%5Cfrac%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D" alt="" />

となっている。同じ表示結果で、もう少し解りやすくすると次の記述。

<img src="http://chart.apis.google.com/chart?cht=tx& chf=bg,s,FFFFE8&chs=1x0& chl=x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" alt="" />

Mathematical (TeX) Formulas ではこちらが例として書かれている。(実際はどちらも 1 行) 両者の違いは、前者が、src の属性値、アドレス扱いとなる部分で本来使えない文字を参照形式にしている点。

乱暴にいえば、Google で公開されている API を使って、画像を生成し、その画像を表示するわけです。

それ以外の細かい意味は、一行目はいつも決まっていて、二行目は

chf
色の指定 (今回は背景色をデフォルトから変更)
chs
大きさを合わせる為に 1x0

(Mathematical (TeX) Formulas にはいろいろ出来るような事が書かれているが、1x0 や 0x1 以外は上手くいかない???)ピクセル単位で指定は OK

といったオプションで、三行目の chl= 以降に、TeX のコマンドそのまま記述。他の数式の場合も、chl= 以降に、TeX のコマンドをほぼそのまま書いておけばよい。一部の文字は「%..」と参照形式を使わないと駄目だが、殆どは問題ない。良く使う記号としては「+」が駄目で、「%2B」と書く必要がある。

後は、画像表示を OFF にしている人の為に、alt の属性値に同じ意味となる数式を ASCII で記述すればよいだろう。

そんなわけで、TeX が使える人なら、手軽に数式を Web サイトに書き込める。(TeX ほど綺麗な結果にはならない場合があるが...)

TeX が使えない人は、以前紹介した OpenOffice.org Math を数式を書き、マークアップを貼り付けてみると良いだろう。ここのコマンドに、「\」を付けてやれば、多くの場合上手くいくと思う。上記ページの数式も、今回これに置き換えているが、積分記号や指数なども、比較的綺麗に表現できている事が解るだろう。