最近、Webの標準技術であるSVGとMathMLを組み合わせて、Webページ上で数学の図式などを表現できないかと考えている。

このブログでもたまに図式や証明図を載せているが、今までのは画像として貼り付ける形だった。静的なコンテンツならこれでもいいのだが、JavaScriptを使ってインタラクティブなコンテンツを作ろうとした時に、画像では動的に内容を変えるというようなことがやりにくい。そこで考えられるのが、Web標準技術のSVGやMathMLといった、HTMLやJavaScriptと相性のいい技術を使って数学の図式を記述するということである。

SVGは基本的に図を記述する言語で、MathMLは数式を記述する言語だが、ブラウザが対応していれば、SVGの図の中にMathMLを埋め込むことは難しくない。だが、数式の幅、高さを見ながら図のレイアウトを決めてやるのは正直楽しい作業ではない。JavaScriptを使えば、ブラウザがレンダリングした数式の大きさを見て適切に位置を合わせるということができるだろう。また、JavaScriptを使えば、ユーザーのクリックに反応して数式を変えたり、色を変えたりできるだろう。

SVGは最近のブラウザならだいたい対応しているが、MathMLのブラウザ側の対応はまちまちである。Firefoxはかなり昔からMathMLに対応していた。Safariは最近対応したようだが、筆者はあまり触っていない。Chromeは、数年前に見聞きした話では対応する意思がないらしい。

という感じで、とりあえず作る時はFirefoxで表示させることを優先させる。Safariは余力があれば対応させたい。Chromeは知らん。

というわけで、そういうのを実験的に実装してみた。このページは、みなさんお世話になっているであろう圏論的な直積の図式を表現している。

直積の図式を表示てきたはいいものの、これは動きがない。ユーザーの操作によって表示が変わるようなものを作ろう。というわけで、Five Lemmaのダイアグラムチェースによる証明(真ん中の射がmonicであることを示す)をするページを作った。クリックするとダイアグラムチェースが進む。かなりやっつけな書き方をしているので、例えばAndroid上のFirefoxでは表示が崩れた。Safariでは文字が途切れる。JavaScriptのソースコードもかなり汚い。改善の余地は大きいだろう。

演算子オーバーロードのないJavaScriptであまり複雑なことをしても記述性が悪い。例えばHaskellのような言語で記述してJavaScriptにコンパイルするという手順を取ると良いのかもしれない。

Tweet