ウェブ上で数学的表現を実現するもうひとつの解法『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}$

一長一短いろいろありまして

とまぁだいたい雰囲気はつかんでいただけたかと思いますが、ご覧のとおりタグのネストで人間には読みにくいことこの上ないです。読むのも楽じゃないなら当然書くのも楽ではない。一から十まで全部手打ちするのは現実的ではないかもしれないです。

それについては一応OpenOffice.orgのWriterに付属する数式ツールからMathMLを書き出しで切る、なんていう情報もあるのですけれどね。

そしてもう一つ問題が。MathGLはメジャーなブラウザでも実装してないものがあるのです…こいつは手痛い。

ブラウザの実装状況

2012年4月19日現在、私が手元に用意できるブラウザ（いずれもWindows環境下）でサンプルページ作って表示確認したところ、MathMLの実装状況は以下の通りでした。

【Internet Explorer 8】NG
【Google Chrome 18.0.1025.162 m】NG
【Firefox 11.0】OK
【Opera 11.62】OK
【Safari 5.1.5】OK

ぬぅ、IEとChromeがサポートしてないのは大きいですね。

適材適所という言葉がありますが、ほとんどのブラウザで人間が目視できるようにするには現状Google Chart APIの方に部があります。

一方で記述の構造に意味を持たせることにこだわる必要があるのならMathMLに軍配が上がります。またタグで表現された文章構造なので、式の一部をCSSで装飾できると言うのも魅力でしょう。

時代の衰勢でどっちか（あるいは両方）が闇に葬られることも考えられなくもないですが、今のところ目的に応じて使い分け、っていうのが現実的なようです。

あ、一応この記事のサンプルはキャプチャ画像ではなくそのままMathのタグ書き込んでます。ですのでこの記事のサンプルが数式ではなく意味不明の文字の羅列になってたら、その閲覧しているブラウザはMathMLに対応してない、と言うことです。

ブクマして判別用にでも使っていただければ…キャプチャとるの面倒くさくて手を抜いたわけじゃねぃよ。

まとめ

MathMLはコード眺めると大変冗長で読みにくいですが、やってること自体はそう複雑でもなさそうです。ルールに従った単調な繰り返しと言うかなんと言うか。

記述できる内容についてはGoogle Chart APIのときと同様、ここに挙げたものは極単純な例でまだまだいろんな表記が出来ます。

ちょっと古い情報なので冒頭には紹介しませんでしたが、こちらのサイトもわかりやすく解説してるので参考になると思います。

MathML2.0メモ

ここに紹介した以外の項目についても、またそのうちサンプル集的な記事を書きたいと思いますが、長くなりそうなのでとりあえず今回はここまで。

色々調べてわかりましたが、意外にウェブ上のMathML情報って検索してもなかなかわかりやすいのがなかったり、あるいはかなり古い情報であったり。

そんなわけで、いるかどうか分かりませんが同じようにMathMLに関わってる方、情報をお持ちの方、コメ欄やSNS経由で情報交換などできれば嬉しいですので、じゃんじゃんコンタクトとっていただければと思います。

あと今回の記事もわりと初見のことを自分なりの解釈でパパパッと書いてますので、内容的に誤りがあるかもしれません。その辺の指摘も大歓迎ですのでよろしくお願いします。ではまた。