Webに数式を書こう MathJax MathML 数式

こんばんは!数式・日本語・英語SpotOCRのもしゃ君です。
今回はwebページ、ホームページの中に数式を書く方法に書きます。

数式の書き方は主に次の3つです

.MathJaxを用いる
 *メリット :Tex数式コマンドが使える、手軽、綺麗
 *デメリット:重い、オフラインで見えない、大量の数式を載せると落ちる、Texコマンドを知らないと出来ない。

2.画像で表示する
 *メリット :最も手軽で簡単
 *デメリット:レイアウトが制限される、解像度が低いと汚く、高いと重い

3.MathMLを用いる(FireFox限定)
 *メリット :軽い、早い、数式が大量に出てくる時におすすめ
 *デメリット:FireFoxでしか見れない。MathMLを知らないと出来ない

 

.MathJaxを用いる場合
最近流行(?)のMathJax。こちらにMathJaxを用いたWebページのひな形を用意したのでダウンロードして下さい。
https://dl.dropboxusercontent.com/u/41895451/mathpage.html.zip
ポイントは<head>〜</head>の部分に

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

が追加してあること。サンプルにあるように<body>〜</body>内部のいずれかの場所にTexコマンドを書くと数式が表示されます。

*良いところ
Texコマンドで数式が打てる。おそらく最も手軽

*悪いところ
重い。とにかくスマホで見るとより表示が重くなる。

(例)
MathJaxはこんな感じ
$\displaystyle \mathrm{R}_{k}=\frac{1}{N}\sum_{1=0}^{N-1}f_{l}\mathrm{c}\mathrm{o}\mathrm{s}\frac{2\pi\lambda}{N}$

Texコマンド)
\displaystyle \mathrm{R}_{k}=\frac{1}{N}\sum_{1=0}^{N-1}f_{l}\mathrm{c}\mathrm{o}\mathrm{s}\frac{2\pi\lambda}{N}

2.画像として貼付ける
Windowsをお使いの方はSnapCrab( http://www.fenrir-inc.com/jp/snapcrab/ )など
Macをお使いの方は「command+shift+4」でデスクトップのスクリーンショットが取れます。

(例)
画像はこんな感じ

f:id:Mosha:20140419073802p:plain

スクリーンショットして画像をアップするだけですが、フォントサイズ・背景色・改行など逆に面倒なことが時折。何よりちょっと汚いです

 

3.MathMLを用いる場合
最も高速で動作し、手間のかかり、ブラウザも制限されるのがMathML
なんとFireFoxでしか閲覧出来ませんw
表示方法も、文字認識の天敵w
なんだこの∑の書き方w

GoogleChromeも一度MathMLに対応しましたが、バグがあったとかで今は対応を延期しています。
(なので、この下はFireFoxでしか正しく表示されませんw)
(例)(FireFoxで開いてね)

MathMLはこんな感じ

Rk=1N1=0N-1flcos2πλN

 

とにかく書くのが面倒!上の数式を書くのにこんなにコマンドが必要ですw

<math xmlns><msub><mi mathvariant="normal">R</mi><mrow><mi mathvariant="italic">k</mi></mrow></msub><mi mathvariant="normal">=</mi><mfrac><mrow><mn mathvariant="normal">1</mn></mrow><mrow><mi mathvariant="italic">N</mi></mrow></mfrac><munderover><mstyle displaystyle="true" mathvariant="normal"><mo>&sum;</mo></mstyle><mrow><mn mathvariant="normal">1</mn><mi mathvariant="normal">=</mi><mn mathvariant="normal">0</mn></mrow><mrow><mi mathvariant="italic">N</mi><mo mathvariant="normal">-</mo><mn mathvariant="normal">1</mn></mrow></munderover><msub><mi mathvariant="italic">f</mi><mrow><mi mathvariant="italic">l</mi></amrow></msub><mi mathvariant="normal">cos</mi><mfrac><mrow><mn mathvariant="normal">2</mn><mi mathvariant="italic">&pi;</mi><mi mathvariant="italic">&lambda;</mi></mrow><mrow><mi mathvariant="italic">N</mi></mrow></mfrac></math>

うーんありえんw
こんなん書けるか!と思った方、同感です。

(おわり)
いかがでしたか?
Web×数式はまだまだハードルが高いですね。
「自分はWordでしか数式は書かないんだよ!」でも「画像は嫌なんだよ!」とか
Texを書くのが面倒いよ!」「MathML意味わからん!」
という方、21世紀はあなたを見捨てません
Moshaがあなたの問題を解決!(宣伝かい!笑)
MoshaがWeb×数式の敷居を下げます!次回乞うご期待!

 

Mosha 数式文章画像のテキスト化
https://www.moshaspot.com/