ブログに数式を書きたくなったら
ブログに数式を書きたいと思った時が有ったのですが、やり方が分からなかったので調べました。色々調べた結果、MathJaxというJavaScriptを読み込んで書いてもらう方法と、MathMLというHTMLに似た記述方法でそのまま書いてブラウザに表示してもらう方法とが有る事を知りました。このへんは詳しいサイトがいくらでも有るので僕が書くまでもない、と言うか書くべきではないのですが、最終的に、記述量は長いけど、インストールなど必要のないMathMLを使うことにしました。両者の比較と、MathMLを書くにあたって気をつけた方がいい事、参考にすべきサイトなど自分自身の備忘録的にまとめました。
標準のMathML、人気のMathJax
MathMLはwebで数式を書くための標準として制定され、進化を続けてきました。2024年となった今では、主要ブラウザ全てで表示されます。公式ロゴはこちらです。
World Wide Web Consortiumという団体が作っていて、World Wide Webなのでw3文字があしらわれている形です。ロゴはwのw乗のw乗根になっているんだけどこれって結局wだよね…。まあいいんですけど😅
ただ、MathMLで数式を表示しようとしても、組み込まれているフォントは端末によって違うのに加えて、ブラウザによっても挙動に違いが有るため表示には僅かな差異が生じます。また、MathMLは記述に厳密性を求めるため、ルールが多く、記述は非常に長くなってしまいます。これはコンピューターが数学的な意味を厳密に読み取れる様にするためだそうで、また、もともとはMathMLの記述はコンピューターに生成させることを想定していたので長くても問題無いと考えていた様です。そう考えると打つ時に不便そうですが、web上には数式を書くだけでMathMLを生成してくれる便利なエディタが豊富に有るため、実際そこまで問題なくなっています。
一方のMathJaxはwebフォントを使っての描画なので、ブラウザ間の差異は生じません。また、伝統的で記述量が少ないTeX記法が使えるため、大変人気が有ります。JavaScriptを使うとは言っても、一度ブログのテンプレートにJavaScriptを呼び出すためのアドレスを貼り付けてしまえば、以降は何かをする必要はありません。MathJaxを動かすための記述はむしろMathMLよりも短いです。ただ、外部のJavaScriptを使って表示する関係で、数式の表示が完了するまで1秒から2秒程のタイムラグが生じます。数式の量が多ければ多いほどこの時間は延びます。
ここでMathJaxのロゴも出しておきます。かっこいいですね！
結局書くにあたってはどちらも大きな問題にはなりません。「MathML 分数」とか「TeX 平方根」とか書きたい式のキーワードを書けば、書き方を教えてくれるサイトがいくらでも出てくると思います。
軽いのが一番
結局MathMLの方が、読み込まれてしまえばHTMLの一種ですから直ちに表示されるわけで軽くて早いのが決め手でした。せっかくwebブラウザの標準機能として存在しているのだから使いたいのです。後、たまにMathJaxの解説ページでMathJaxが正しく動いていないのを見た時が有ったのもMathMLを選んだ理由の一つです。
その他、MathMLはiPhone等に標準で搭載されている読み上げ機能のVoiceOverで読み上げてくれるのも個人的高ポイントの一つでした。
とりあえずひとつ書いてみよう
次の式はMathMLで書いています。
です。
次の様に書きました。
<math><mi>a</mi><mo>≠</mo><mn>0</mn><mtext>の時、2次方程式</mtext><mi>a</mi><mo>⁢</mo><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mi>b</mi><mo>⁢</mo><mi>x</mi><mo>+</mo><mi>c</mi><mo>=</mo><mn>0</mn><mtext>の解は</mtext></math>
<math display="block"><mi>x</mi><mo>=</mo><mfrac><mrow><mo>−</mo><mi>b</mi><mo>±</mo><msqrt><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mn>4</mn><mo>⁢</mo><mi>a</mi><mo>⁢</mo><mi>c</mi></mrow></msqrt></mrow><mrow><mn>2</mn><mo>⁢</mo><mi>a</mi></mrow></mfrac></math>
です。書けるわけないだろ、と思いきやいいエディタが有る
この記述の長さを見て、書ける訳ないだろ、と思った人もいるかも知れません。そこでおすすめのエディタを紹介します。MathTypeと言うエディタのデモページです。まずは触ってみてください。手書きで書いた式や、マウスで選んで作った式を、簡単にMathMLに変えてくれます。デモサイトとは思えないクオリティ。神です。
MathType demo - For Developers
Live demonstration about the features of Mathtype which allows edition equations and formulas (PNG, flash, SVG, PDF, EPS), based on MathML and compatible with LaTeX.
 |
 |
ただ、後述する廃止属性をそのまま使っていたりするので、ある程度書き方を覚えてから使うとより良いですね。エディタが吐き出してくれたMathMLが、古い記述をそのまま使ってしまっていないか確認がおすすめです。将来正しく表示されなくなってしまうかもしれませんから…。
全部は書ききれないので詳しいサイトを見てもらう、入門編
という訳でMathMLの書き方を学びました。詳しくて参考になるサイトのリンクを貼っておきます。これを読めばあなたもMathMLに入門できます。
とほほさんという方が書いた、その名もとほほのMathML入門というページです。
とほほのMathML入門 - とほほのWWW入門
undefined
分かりにくい<mi>と<mo>
ここからは、僕がつまずいたmi要素と、mo要素の違いについて少しだけ語ります。
mi要素は識別子、mo要素は演算子と、日本語で言う名前が違うのですが、違いが分かりにくいと思います。概ね、定数や変数として出てきた文字(aとかxとか、円周率のπとか)、そして関数の名前(sinとかlogとかfとか)はmi、四則演算(+−×÷)、括弧(()や[]など)と、積分(∫)、総和(Σ)、階乗(!)といった計算の記号はmoです。
計算の際に、入れ替えることが普通できるものはmiです。例えばa+bとx+yは文字が違うだけで同じ意味合いですが、+を−に変えて、a+bとa−bでは同じ式とは言えませんよね。そういうイメージ、湧くでしょうか。
あるいは、すごく乱暴に言うと概ねアルファベットで書くものはmiになります。例外は微分(もしくは積分)のⅆです(MathMLに対応したブラウザでは、微分のⅆを書く時ⅆもしくは、略称のⅆを使うことが推奨されています。普通の変数のdではないと言うことを機械にも人間にも示すためだそうです。表示は二重線の入った(ダブルストラックと言います)dになります。実際にこの方法で書いたもののあなたのブラウザでの表示はこちらです→ⅆ)。微分のⅆは他の文字に変わることはないので、足し算の+等と同じ位置付けなのです。こう覚えていくだけでも大体識別できると思います。
廃止になってしまった属性や要素など(重要！)
MathMLでは、装飾に関する機能が、要素や、要素の属性として沢山決められています。しかし、現在のwebでは、装飾はCSSでしていくものと決まっている様なので、それらの多くは最新のMathML Coreと言う規格で廃止されました。以前は使えたそういったものを紹介していきます。表示されれば現在は問題ないと思うのですが、将来に渡り安定して表示されて欲しいですからね。
名前空間(xmlns)は書かなくてもいい(書いてもいい)
エディタが吐き出してくれるMathMLには、最初の<math>タグの中にxmlmsで始まるwebサイトのアドレスの様な文字列が含まれているものもあると思います。こんな感じです。<math xmlns="http://www.w3.org/1998/Math/MathML">この記述は、現在web上で数式を表示させるだけならば不要です。XMLのルールに従って書かなければいけないソフトウェアなどで必要になる時が有るそうなのですが、対象とするソフトは通常ブラウザでしょうから、その場合は関係ないです。普通に<math>と書きましょう。ただ、書いていても動くので、コピペしてきた時にわざわざ消す必要性もないです。
mi mathvariantの大部分は使ってはいけない
多くのMathML説明のサイトでは、例えば実数の集合を表すℜの様な特殊な飾りのついたアルファベットや、ベクトルを表す太字𝐁など、miに属性mathvariantを付けて表す様に説明されていると思うのですが、この仕組みはMathML Coreでは採用されませんでした。今後使われなくなっていく見込みなので使わない様にしましょう。分かりやすい名前付きの実体参照がある場合(例えば上のRの記号を出すのに使った、ℜなど)は、それを使えばいいです。それも無ければ数値の実体参照にするか(これなら絶対あります。)後述するMathML公式サイトや、こちらのWikiediaの数学用英数字記号のサイトから文字をコピーして使いましょう。よく使う文字は、辞書登録した方がいいですね。
ちなみにmathvariantはなぜ残ったのかと言うと、mathvariant="normal"だけ使える様に残したからだそうです。MathMLのmi要素の記号は1文字のアルファベットの場合はイタリック体で描かれます(確かに数学って大体式がイタリックな気がしますね！)。イタリック体で出したければこれでいいのですが、普通の立体で出したい時が有ると思います。その様な時に使うそうです。2文字以上アルファベットが続いた場合は何もしなくても立体になります。それをイタリック体で表記する必要性が有るのなら、コピペしてくるなど、イタリックの文字で書く必要があります。
mfencedは使ってはいけない
括弧を出すために以前はmfencedが使えたそうですが、現在は括弧類は普通にmoを使って表示することになっています。これで表示上特に問題は無いです。
mstyleは使ってはいけない
MathMLは数学的な意味合いを持った記述だけをするために使われるもので、MathMLの機能で文字の装飾を行うことは推奨されません。MathMLやHTMLのルールを決める団体としては、webではCSSが使えるため、装飾は全てそちらでして欲しいと考えている様です。MathMLは普通のHTMLと同じ様に、クラスやIDを付けてCSSで装飾することができます。
使っていいのかどうかはMDNでの確認がおすすめ
廃止されたものについては自分の備忘録も兼ねてここに列挙しましたが、属性等に関して、一番詳しく見れるのはMDN(Mozilla Developer Network)のサイトです。無くなってしまったもので、特に重要なものは一通りここに書きましたが、また変わる可能性もあるので、特に装飾にまつわることで、自分の使いたいMathMLでの記述がまだ使えるのかどうかは後述のMDNのサイトを見てみましょう。
さらに詳しく知りたい人が見るサイト
MathML公式サイトのXML Entity Definitions for Characters (3rd Edition)のページです。こちらのページにはMathMLで使われる文字の情報がまとまっています。特にリンクの中のmmlaliasと書いてあるところが便利で、出したい記号の略号を知れます。
例えば次の画像で表の一番上に角度の記号angleと書いてあります。また、aliasesの所にangとあります。そのどちらかを&と;で挟む様に入れてやれば、HTMLでその記号を呼び出せます。つまり、∠もしくは∠と入れれば、出てくるわけです。実際にやってみたのがこちら。→∠
例えば積分記号なら“integral”とか、総和記号なら“sum”とか、このページで自分の出したい記号をキーワードで検索してみましょう。数学でよく出てくる記号ならあるはずです。
XML Entity Definitions for Characters (3rd Edition)
undefined
すでに出てきましたがMDNのサイトです。ここで自分の使いたいMathMLのタグを検索してみましょう。ゴミ箱のマークがついていればもう使ってはいけません。分かりやすく教えてくれるのでありがたいです。
開発者向けのウェブ技術 | MDN
オープンなウェブは、開発者に素晴らしい機会をもたらします。これらの技術を最大限に活用するには、それらの使い方を知る必要があります。以下に、ウェブ技術のドキュメントへのリンクがあります。
まとめ
結局のところ、僕がMathMLを使うことにしたのは、その方がプログラミングっぽくて面白そうだからです。それに尽きます。かくして数式を表示する能力を手に入れたので、今後何か数式を書く必要が有ったらMathMLを使っていこうと思います。ここに挙げたサイトはどれも秀逸なので是非MathMLを書きたい人は参考にしてください。ではまた！
コメントを投稿
別ページに移動します