※弊社記事はたぶんにPRが含まれますので
話半分で受け取ってください。

2/29発表、新潟県立高校の志願先変更後の情報はこちら！

数式をウェブページ上で綺麗に表示出来ちゃうFirefoxのMathML対応は素晴らしいと思うんだ

Yutaka

　ちょっとした文書ならHTML+CSSで書いちゃうコーダー岡本です。TeXも捨てがたいですが、HTML+CSSはブラウザですぐに表示の確認が出来てとてもお手軽。なんならJavascriptも使って見積の自動計算とかも実装しちゃうよだぜぇ(^-^)　ワイルドだろ〜

　「でもでも、HTML+CSSじゃ数式が書けないでしょ？」

　ええ。そんなふうに思っていた頃が僕にもありました。でも、数式も書けちゃうんです。そう、MathMLならね。

　FirefoxでMathMLが使えると言うことに気が付いたのは、Firefox7.0のリリースノートを見た時です。「このバージョンでの変更点」の中に以下のような一文がありました。

MathML への対応を強化しました。

Firefox 7 リリースノート

　え？　ってことは、FirefoxってMathMLに対応してたの？　おいおいこれは……

＼　　　＼＼　　　＼　　＼＼　　, ｪｪｪｪｪｪ､＼　　＼＼　＼
＼＼　　　＼＼　　　＼　　＼,ィ三三三三三三ヽ.　 ＼＼　＼
＼＼＼　　　＼＼,　-‐≦三三三三三三三三三ヽ 　　＼＼
　 ＼＼＼　　　 /　　　ｨｴﾐ　ヾ三三三ﾂ”￣｀ヾ三ｦ＼　　 ＼＼
＼　 ＼＼＼　 l　　 　 !三ﾘ　　ヾ三ヲ’ 　 ヽ、　　＼ 　＼　　 ＼
　 ＼　 ＼　f三ﾐ　　　　　　　　/三三　　　 　｀ヽ.、 ＼　 ＼
＼　 ＼ 　｀ ヾ三　　　　　　　　ヾ三三　 　 ,ｨ全､　＼ ＼　 ＼
＼＼　 ＼　 ＼.゛l　　　　<　>　ﾉ三三　　./三三､ 　 ヽ. ＼
　 ＼＼　 ＼　 　 ､　>,　　~　/三三”. 　,’三三三､.　　l　　＼
＼　 ＼＼　 ＼　 .i≧ｭ __,､　/三三”　　,’三三三三､　ﾉ
　 ＼　 ＼＼　 ＼ |三ﾐ≧≠三彡” 　 　l三三三三三｢＼＼
　　　＼　 ＼＼　 ｀!三三三ﾘー -　､._　!三三三三三　　 ＼＼
＼　　　＼　 ＼＼　}三三彡 ＼＼＼　 ヾ三三三彡”≧,　　 ＼
　 ＼　　　＼　 ＼.ノ三三ﾘ＼　 ＼＼＼　　　　 ヾ三三ミ､
━━━━━━━{三三彡━━━━━━━━━━￣━━
　　　　　　　　　　 ￣￣
ケ　　ケ　　 ／＼　　　　　　ー―≠―　　　ー―≠
┼┼┼　／┌┴┐＼　　　　　　/　　　　　　　／
│└┘　　　[ 二 ]　　　ー ､　　 |　　　　　　　ー―　、
└──　　　レ｀く＿　　　＿）　　＼＿　　　　くZ＿ノ　
　　|二二|　　／＼　　　|　　|　|　　　　　　　＿|　　　　 　 　 　 ||
┼└─┘／＿＿ ＼　.|　　|　|　　　　　　　　 |／⌒ヽ　　　　　||
┴ ７二二　┌─┐　　|　　　　　ー十十ヽ ／|　　＿ﾉ　二　　 ||
　 / / / /　 |＿＿|　　 ヽ＿ノ 　 　 .|　　ノ　　|　 (_ノヽ　/乙　 。

MathMLとは？

　MathMLはウェブページ上で数式を表現するためのマークアップ言語です。
　たとえば、定積分の式だってMathMLを使えばこの通り(MathMLに対応したブラウザでないと確認出来ません)。

f⁡(x)=∫0πcos⁡xⅆx

　その存在自体は1999年からあったようですが、数式を表示したいというニーズがあんまりないのか、いまいち普及し切れていないようです。
　イマイチ普及し切れていないMathMLなので、ブラウザがMathMLに対応した場合も大々的に宣伝されることはなく、リリースノートにひっそりと一行だけ記されるような状況です。実際、Ver.1の頃からFirefoxを愛用していますが、いつからMathMLに対応したのかわかりません。

　手元にあるブラウザで試したところ、Mac版のFirefox(Ver.13.0)とSafari(ver.5.1.7)でMathMLの対応を確認出来ました。
　Chromeは(wikipediaによると)Ver.10でMathMLに対応したらしいのですが、Mac版のChrome(Ver.19.0.1084.56)ではダメでした。なんかアドオンを入れれば表示出来るようになるみたい？　Safariと同じWebKitベースならネイティブで表示出来そうなものですけれども。
　確認はしていませんが、Operaは対応しているらしいです。同じく確認はしていませんが、IEはダメっぽい(それでこそIEだよ)。IEも別でプラグイン的な何かを入れれば見られるようになるみたいです。

MathML形式で数式を書く方法

　MathMLでの数式の書き方はTeXに比べるとかなり複雑です。たとえば、「x=1/2」を表現したい場合は以下のように書きます。

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mn>2</mn>
    </mrow>
  </mfrac>
</mrow>
</math>

　これが以下のようになります(MathMLに対応したブラウザでないと確認出来ません)。

x=12

　さて、これを手打ちするのはちょっと(と言うかかなり)めんどくさいです。なので、WYSIWYG的なソフトを使ってMathMLを出力させるのが良いと思います。

　上記の「X=1/2」のような簡単なものであれば、LibreOffice(OpenOffice)の数式エディタでも出力出来ます。数式エディタで式を書いて、保存(または、別名で保存)する時にファイルの種類として「MathML」を選択すればOK。
　ただ、定積分のような複雑なものになると、LibreOfficeの出力するMathMLではビミョーな表示になっちゃいます。たぶん、マークアップ自体も適切ではないです。

　複雑な式をちゃんとMathMLで表現したい場合は、Firefoxのアドオンである「FireMath」を使うのが良いと思います。ちょっと入力方法がスマートでは無い感じはしますが、その辺はまあ、無料ですので。慣れればそんなに悪くもない……かも。

WordPressでMathMLを使う場合

　素のWordPressでMathMLを表示すると場合によっては「&ApplyFunction;」や「&DifferentialD;」がそのまま出てくることがあります。これは、wp-includes/formatting.phpの中にあるwptexturize関数とconvert_chars関数の中に以下のコードが入っているためです。

$content = preg_replace('/&([^#])(?![a-z1-4]{1,8};)/i', '&#038;$1', $content);

　これだと実体参照として認識される文字数が1-8文字までなので、8文字以上ある「&ApplyFunction;」や「&DifferentialD;」は実体参照ではないと見なされ、「&」が「&amp;」に変換されてしまいます。そのため、実体参照ではなく、文字列として表示されてしまいます。

解決法1: 13文字までになるように書き換える

　上記のコードを以下のように書き換えて、13文字まで実体参照として認識されるようにすれば、ちゃんと式が表示されると思います。

$content = preg_replace('/&([^#])(?![a-z1-4]{1,13};)/i', '&#038;$1', $content);

　もしかしたら13文字以上の実体参照があるかもしれません。その場合は適宜文字数を増やせば表示されるようになると思います。

　ただし、この方法はformatting.phpを直接書き換えているため、WordPressをアップグレードする度に該当部分を書き換える必要があります。WordPress側で対応してくれるとありがたいのですけれども。

解決法2: wptexturizeとconvert_charsをフィルタから外す

　もう一つの方法としては、wptexturizeとconvert_charsをフィルタから外して無効にしてしまう方法があります。
　テーマのfunction.phpに以下のコードを挿入するか、プラグインとして機能させればおｋ。

// disable wptexturize
remove_filter('the_content', 'wptexturize');
// 抜粋やコメントでも無効にしたい場合は以下のコメントアウトを解除
//remove_filter('the_excerpt', 'wptexturize');
//remove_filter('comment_text', 'wptexturize');

// disable convert_chars
remove_filter('the_content', 'convert_chars');
// 抜粋やコメントでも無効にしたい場合は以下のコメントアウトを解除
//remove_filter('the_excerpt', 'convert_chars');
//remove_filter('comment_text', 'convert_chars');

　この方法ならばWordPressをアップグレードしても再度コードの書き替えが必要になることはありません(WordPressの仕様が変わらない限り)。
　ただし、これらの関数は&を&amp;に置き換える以外に、ビミョーな文字の置換をしてたりするので、場合によってはビミョーに投稿の見た目が変わるかもめ。

と言う感じ

　icoroでもこれまでにいくつか数式を使う場面があったのですが(おばけパフェとかね)、その時は式を画像にしたり、むりくりテキストで表現したりしていました。
　ですが、MathML使ってみたら結構良い感じだったので、これからはMathMLを活用していこうかな、と思ったりしております。やりなおし中学数学講座でもはじめちゃうか？

参考

MathML: Made Easy With Examples (English Edition)

  • カテゴリ：Kindle版
  • 発売日：2022/07/06

Amazon Yahoo! 楽天

関連する記事