ウェブ上で数学的表現を実現するもうひとつの解法『MathML』

前のエントリ「ウェブページで数式を表現するための1つの解決法」でGoogle Chart APIを用いた数式表現を実現する方法を紹介しました。

この方法の欠点（かつ長所でもあるが）は実際に生成されるデータはあくまで画像イメージであることで、そのイメージからは（コンピュータが理解できるという意味での）数学的情報が失われることです。

で、その辺のことについてツイッターでブツブツつぶやいていたら、フォロワーさんから「『MathML』ってのもあるよ！」と教えていただきました。

今回はそのMathMLについて調べたのでちょっとまとめておきたいと思います。

【注記】今回の記事はまずはFirefox、Opera、Safariで読んでいただけるとものっすごく助かります、というか、意味がわかると思います。なぜなのかは…記事の最期の方読むとわかりますので。

MathMLとはなにか
1. Mathematical Markup Language
MathMLサンプルコード
一長一短いろいろありまして
1. ブラウザの実装状況
まとめ

MathMLとはなにか

ツイッターでのやりとりはこんな感じ。

ウェブページで数式をどう表記すれば良いか調べていたところ
— (｀･毒｜ゴロドク｜毒･´)さん (@gorodoku) 4月 17, 2012

で、色々調べて前回の記事にいたったんですけども。

@gorodoku MathML
— ながたさん (@nagowl) 4月 17, 2012

@nagowl MathGLも全然使ったことないし知らないなー。ちょっと調べてみようかな
— (｀･毒｜ゴロドク｜毒･´)さん (@gorodoku) 4月 18, 2012

@gorodoku ごろさん、それ計算科学系のライブラリでないか、、、。MathMLってHTMLの数式版があるんだよ、、、。
— ながたさん (@nagowl) 4月 18, 2012

@nagowl うわっものすごい空目してた恥ずかしい…MathMLも調べてみよう！
— (｀･毒｜ゴロドク｜毒･´)さん (@gorodoku) 4月 18, 2012

ながた（@nagowl）さん、どうもありがとー。わけの分からない勘違いもしましたが色々調べてみましたよ！ということで。

以下、Mathematical Markup Language – Wikipediaより。

Mathematical Markup Language

Mathematical Markup Language（マスマティカルマークアップランゲージ略：MathML（マスエムエル））は、XMLアプリケーションの一つで、数式を記述するためのマークアップ言語である。単体では数式の記述しかできないため、文書として利用するにはXHTMLに埋め込んでXHTML文書として扱うなどする。

という感じで、XMLアプリケーションのひとつ、という解説がなされ（2012年4月19日現在）ていますが現在策定中のHTML5でも組み込まれる（予定！）ので、ウェブでXMLが廃れていってもとりあえずは使用していけそうな気がします。多分。

ちなみに本記事を書くに当たり、Google Chart APIの時と同じように全く知らない内容でしたので、とっかかりは以下の記事なんかを参考にしています。

HTML5,MathMLを使ってみる: 万象酔歩

MathMLマニュアル

MathMLサンプルコード

では実際にMathMLのサンプルを挙げていきたいと思います。比較しやすいようにGoogle Chart API+LaTeXの解説のときと同じ数式で見ていきましょう。

単純な等式・加減算


<math>
<mi>y</mi>
<mo>=</mo>
<mi>x</mi>
</math><br />

$y = x$

一番単純な例です。

MathMLを利用するには、その数式表現全体を<math>と</math>というタグでくくりますのでまずそれを覚えましょう。

式の内容としては「y」や「x」のような変数は<mi>と</mi>で、「=」「+」「-」といった演算子は<mo>と</mo>でくくります。

次に示す2つの例は変数と数字の加減算です。


<math>
<mi>y</mi>
<mo>=</mo>
<mi>x</mi>
<mo>+</mo>
<mo>1</mo>
</math><br />

$y = x + 1$


<math>
<mi>y</mi>
<mo>=</mo>
<mi>x</mi>
<mo>-</mo>
<mo>1</mo>
</math><br />

$y = x - 1$

変数ではなく数字（値）を示す場合は<mn></mn>でくくります。なお、Google Chart APIのときと違いURLを指定してるわけではないので「+」記号をURLエンコードに書き換える必要はありません。

簡単な式の場合はこれらを組み合わせて順次書いていけば良いわけですね。

上付文字（べき乗）・下付文字（添え字）表現



<math>
<mi>y</mi>
<mo>=</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math><br />

$y = x^{2}$

べき乗のような上付き文字は<msup></msup>タグの中に基数-乗数の順で書いていきます。それぞれ内容によってmnなりmiなりで指定します。

この辺からタグがネスト（入れ子）してくるのでちょっとややこしくなってくるかもしれません。


<math>
<mi>y</mi>
<mo>=</mo>
<msub>
<mi>x</mi>
<mn>1</mn>
</msub>
<mo>+</mo>
<msub>
<mi>x</mi>
<mn>2</mn>
</msub>
</math><br />

$y = x_{1} + x_{2}$

下付き文字は<msub></msub>タグの中に添え字対象-添え字の順で書いていきます。snpと同様、それぞれ内容にあわせてmnなりmiなりで指定します。


<math>
<mi>y</mi>
<mo>=</mo>
<msubsup>
<mi>x</mi>
<mn>1</mn>
<mi>n</mi>
</msubsup>
</math><br />

$y = x_{1}^{n}$

上付き・下付き文字を同時に適用する場合は<msubsup></msubsup>タグの中に添え字対象-下付き添え字-上付き添え字の順で書いていきます。

ただし、これは上付き・下付きの重みの違いを表すことが出来ません。この例で言えば「x1」を「n乗」してるので数学的にはsubとsupをネストしたほうがより適切な表現でしょう。その場合は以下のようにコーディングします。


<math>
<mi>y</mi>
<mo>=</mo>
<msup>
<msub>
<mi>x</mi>
<mn>1</mn>
</msub>
<mi>n</mi>
</msubp>
</math><br />

$y = {x_{1}}^{n}$

さて、添え字が1文字ではなく複数の要素からなる式のような場合はどうでしょうか。


<math>
<mi>y</mi>
<mo>=</mo>
<msup>
<mi>x</mi>
<mrow>
<mi>n</mi>
<mo>-</mo>
<mn>1</mn>
</mrow>
</msup>
</math><br />

$y = x^{n - 1}$

「n-1」を表すコードの前後を<mrow></mrow>でくくってます。このタグで囲まれた範囲は「意味のあるひとかたまりですよ」と言う意味です。ブラウザでのレンダリング時には表示されませんが、数式で使う括弧（）のようなものだと覚えておけばいいでしょう。

分数


<math>
<mi>y</mi>
<mo>=</mo>
<mfrac>
<mn>3</mn>
<mn>7</mn>
</mfrac>
</math><br />

$y = \frac{3}{7}$

分数を表記するには<mfrac></mfrac>の中に、分子-分母の順で要素を記述します。

先ほどでてきたmrowタグを使って複雑な分子・分母とも式の表記をすることもできます。


<math>
<mi>y</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mn>2</mn>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>7</mn>
</mrow>
<mrow>
<mn>3</mn>
<mi>c</mi>
</mrow>
</mfrac>
</math><br />

$y = \frac{2 a^{2} + 7}{3 c}$

ネストの階層が深くなってちょっとわかりにくいですか？しかし中身は今まで出てきた例で使ったタグばかりなので、順を追って落ち着いて見ていけば意味はわかると思います。

平方根・累乗根

平方根を表現するには<msqrt></msqrt>タグを用いて以下のように記述します。


<math>
<mi>y</mi>
<mo>=</mo>
<msqrt>
<mn>3</mn>
</msqrt>
</math><br />

$y = \sqrt{3}$

この例ではルートの中身が単純な数字「3」でしたが、もちろんmrowタグを使ってこのなかに数式を入れてもかまいません。

また累乗根のばあいはmsqrtのかわりに<mroot></mroot>でくくります。中身についてはルートの中身-乗数の順で記述します。


<math>
<mi>y</mi>
<mo>=</mo>
<mroot>
<mrow>
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
<mp>+</mo>
<mn>3</mn>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mp>+</mo>
<mn>3</mn>
<mi>x</mi>
<mp>+</mo>
<mn>1</mn>
</msup>
</mrow>
<mn>3</mn>
</mroot>
</math><br />

$y = \sqrt[3]{x^{3} + 3 x^{2} + 3 x + 1}$