こんにちは。
皆さん、数学は好きですか？
本当に好きな人はのめりこんでいき、苦手意識をもってしまった人はどんどん嫌いになっていくというのが、一般的なパターンでしょうか。
数学は奥が深い教科ですね。
最近では、数学を勉強したい人向けに、「学習サイト」みたいなものも存在します。
そういったサイトでは、数式もきれいに文字として表示されていることが多いです。
しかし、普通に数式をサイトに打ち込もうとすると、2x+√5、とか、(x+1)/5 + y/2、とか、sin60° * 5^3、みたいになってしまいます。
教科書のような表現とは、少し違いますよね。
では、どうすれば、数式をサイト・ブログ上にきれいに載せることができるでしょうか。
主な方法としては、次のようなものがあります。
画像を利用する方法
数式の画像を作成して、それをブログに直接貼り付ける、という原始的な方法です。
普段の知識だけで作ることができます。
また、どんな複雑な式であっても、画像さえ作れれば、いくらでも表現できます。
ただし、欠点もあります。
それは、
- 式ごとに画像を用意しなくてはならないこと
- 拡大表示すると、画質が悪く見えることがあること
- 文字としてのコピーができないこと
- たくさん画像を貼ると、重くなること
- 手軽とは言いにくいかもしれないこと（もっと簡単に入力したい）
などです。
デメリットがそこそこ多いです。
先ほどの表示で我慢する方法
先ほど紹介したタイプの表現で我慢するという方法です。
2x+√5、や、sin60° * 5^3など。
でもこれだと、今回の目的を達成できません。
目的を見失っていますね。
却下です。
「MathML + MathJax」を使用する方法
そこで、とうとうたどり着いたやり方がこちらです。
MathMLというのは、XMLベースのマークアップ言語で、数式を綺麗に表記することができます。
積分も、行列も、分数も、ルートも、きれいな形を保ったまま記述することができるのです。
それが、MathML。
しかし困ったことに、このMathML、対応ブラウザが非常に少ないのです。
あの「Chromeブラウザ」ですら、（この記事を書いている）現時点では、対応しておりません。
おそらく対応しているブラウザは、有名どころで言うと、「Firefox」や「Safari」くらいです。
どうしましょう。
というところで、「MathJax」の出番です。
この「MathJax」というのは、MathML非対応ブラウザでもMathMLの数式を表示してくれるという、素晴らしいJavascriptライブラリです。
このライブラリをあらかじめ読み込んでおくだけで、MathMLで書いた数式を、どんなブラウザでも表示してくれるわけです。
こんな感じにね。
すごいですよね。
ちなみに「MathJax」ですが、MathMLのほかに、「Tex」「LaTeX」もサポートしています。
こちらの書き方もできるのです。
今回は、「MathML」の記述方法を採用しますが、他の書き方に興味があれば、試してみてください。
では実際に、使ってみます。
MathML + MathJaxで数式を表示する方法
1.ライブラリを読み込む
まず、「MathJax」をブログ・サイトに読み込みます。
CDNサービスがあるので、とても簡単です。
下記のコードを、ブログサービスのカスタムHTMLや、自前のサイトにおいて、「</head>」の前あたりに追加するだけです。
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>これで、準備はできました。
2.MathMLのコードを生成する
では実際に表示する数式を、MathMLの形式で用意する必要があります。
そのMathMLの書き方ですが、
MathMLのタグの意味などをそれぞれ覚えて、自分で書くという方法もありますが、少し大変です。
例えば、先ほど表示した「解の公式」のMathMLは、次のようになります。
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle fontsize="2 pt">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mrow>
<mo>−</mo>
<mi>b</mi>
</mrow>
<mo>±</mo>
<msqrt>
<mrow>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>–</mo>
<mrow>
<mn>4</mn>
<mo></mo>
<mi>a</mi>
<mo></mo>
<mi>c</mi>
</mrow>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo></mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</mstyle>
</math>たったあの量の数式を表示するだけで、こんなに長いコードが必要になるのです。
もっと複雑な式になれば、さらに多くのコードを書かなくてはなりません。
プログラムを書く人などからすれば、こんな量、メモ程度なんでしょうけど、それとはやっていることが違います。
数式を表示するだけという面からみれば、このコードは長いのです。
そんな時に役立つのが、入力支援ツールです。
こういったものがあります。
- Math Webdemo (https://webdemo.myscript.com/views/math/index.html)
- Demo MathType (http://www.wiris.com/editor.nightly/demo/ja/mathml-latex)
どちらも、Web上で動く「Demo版」みたいですね。
Demoという存在なので、いつサービスが終了してもおかしくないような気がします。
まあ、これらのツールが消えたら、そのとき考えればよいでしょう。
とりあえず、便利なので、Demo版を使っていきます。
Math Webdemo について
上の、「Math Webdemo 」というやつは、手書きで書いた式を、自動的に変換してくれる、という優れものです。
こんな感じです。
左下にマウスで式を書きます。
すると、画面上部に認識された数式が表示され、右側に「MathML」のコードが表示されます。
このコードをコピーして、ブログのHTML編集に貼り付ければよいのです。
MathMLのほかに、LaTeXにも対応しております。
ちなみに、このツールのすごいところは、書いた式が関数であった場合、そのグラフを右下に表示してくれるのです。
本目的では特に必要のない機能ですが、面白いという面では、とても良い機能だと思います。
Demo MathTypeについて
もう一つの方のツール紹介します。
最初に紹介したツールも便利なのですが、「マウスだと手書きが難しい」「C(コンビネーション)やP(パーミテーション)がうまく認識されない」というような問題点もありました。
C(コンビネーション)がうまくいかないというのは、右下の数字は小さく表示できるのですが、左下の数字が小さくならないという状態になったことです。
これらの問題を解決できるように、キーボード入力のエディタを探しました。
それがこれなのです。
画面上部のツールバーなども使用しながら数式を入力します。
（手書きにも対応しています。）
それが終わったら、できた数式を全部選択し、コピーします。
すると、クリップボードには「MathML」のコードが貼り付いているはずです。
そのまま、ブログのHTML編集に貼り付けましょう。
3.MathMLのフォントサイズについて
もう数式は表示できるようになりましたね。
しかし、実際に表示してみたとき、フォントサイズが小さい（もしくは大きい）と感じるかもしれません。
じゃあ、フォントサイズを大きくしようということで、ブログエディタ上でフォントサイズの設定を行いましたが、うまくいきませんでした。
じゃあどうすのか。
結論から言います。
変更前：
<math xmlns="http://www.w3.org/1998/Math/MathML">
～数式のコード～
</math>こうなっているはずなので、ここにフォントサイズの設定タグを加えればいいのです。
変更後：
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle fontsize="2 pt">
～数式のコード～
</mstyle>
</math>
この「2」という数字はフォントサイズを表しています。
各自、適切な数値に調節してください。
以上です。
これで自分のサイトに数式を綺麗に載せられるようになりました。
ぜひ、数学のサイトを作りたいのならば、この方法を試してみてください。
では、さようなら。
また次回、お会いしましょう。
