投稿日: 投稿者: pencil

Web上で数式を表現するならMathJax

どうも管理人のpencilです。今回はWeb上で数式を表現するにはどうしたらよいかについて考えてみます。

皆さんの中にはウェブサイトを運用している方もいらっしゃるのではないかと思いますが、当サイトのように理数系の内容を中心に扱うウェブサイトであれば数式を多用しなければならない場面にどうしても遭遇してしまいます。

Web上で数式を表現する主な方法としては

①テキストのまま（例：x^2+y^2=1）

②画像にする（例：）

③Mathjaxを利用（LaTeX書式）
（例：$#x^2+y^2=1#$）

④その他の数式エディタによる表示

⑤新しいプログラムを書く

など、大別して4種類くらいあると思います。プログラムによってはテキストのままでしか表示できないサイト（主に質問掲示板など）もありますが、簡易的な意見交換の際であればこれでも十分です。しかし数学の内容をガッツリ扱っていく場合はテキストのままだと何となく寂しい気がします。見栄えもしませんし、長い数式や分数式になると非常に分かりにくいという欠点もあります。

そのため、数学を扱っている解説サイトなどでは画像による表示が一般的なようです。しかし画像を多用してしまうとウェブサイトのサイズが極端に膨れ上がってしまいサーバーの容量を圧迫してしまいますし、何にせよ画像の切り貼りが非常に面倒くさいのです。私もかつてこの方法で数式を表示させていましたが、画像の管理・アップロードなどが非常に煩雑なため、更新が容易ではありませんでした。数式はMicrosoftのWordなどを利用すれば簡単に打ち込めるのですが、画像加工の手間を考えるとやはり効率的ではありません。まあ、慣れれば作業はそれなりに速くなりますが･･･。

ページの作成しやすくしようという観点から開発されたのが

「Mathjax」

という数学レンダリングシステムで、HTMLソースでLaTeXやMathMLなどのマークアップ言語をサポートできる仕組みが備わっています。HTMLで言えば、<head>と</head>の間に以下のソースコードを貼り付けるだけで、そのページでLateX書式による数式の表示が可能になるというわけです。

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [ ['$','$'] ],
    processEscapes: true
  }
});
</script>
<script type="text/javascript" async="" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/latest.js?config=TeX-AMS_CHTML">
</script>

Mathjaxを利用すればワードやペイントなどを行ったり来たりしなくて済むので、書き込みやすさは格段に向上しました。ただ、問題なのがLaTeXコマンドを知らなければほとんど書き込みが出来ないということです。

数式を表現したいときは

$x^2+y^2=1$

というように書けば

$#x^2+y^2=1#$

と表現されて問題無いのですが、例えば分数を表示したい場合だと $x/y$ と書いても $#x/y#$ としか表示されません。これを解決するために必要なのが「コマンド」です。分数を書く場合は

\frac{x}{y}

と書いて$で両側を挟めば

$#\frac{x}{y}#$

となります。しかしこれでは微妙に小さいので、新しいコマンドを使います。

\displaystyle \frac{x}{y}

と書いて$で両側を挟めば

$#\displaystyle \frac{x}{y}#$

となります。大きくなりましたよね？また、このコマンドは「\dfrac{x}{y}」でも代用できます（「displaystyle」のdを付けただけ）。\dfracコマンドは数学の内容を扱うときは特に頻繁に使用することになるコマンドの一つです。

その他にも、根号はどう表現するのか？ベクトルは？三角関数は？･･･など、数式を表現するまでの下準備がどうしても必要になってしまいます。お絵かきのように数式が描ければ一番良いのですが、そういったプログラムは今のところ無さそうです。（もし知っている方は紹介してください･･･）

TeXの書式を初心者がマスターするというのはかなり高いハードルになっており、掲示板などでもなかなか取り入れられないのが現状です。（外国の掲示板にはMathjaxで書き込めるところもあります）

機械工学を専門とする方には、高校生くらいでも簡単に数式が打ち込めるプログラムを何とか設計してほしいところです。当サイトではMathjaxを採用して数式を出力しておりますが、特にモバイル端末だと読み込み速度が遅くなってしまうようです。そもそもMathjaxはTeX並みの美しい数式を出力するJavaScriptライブラリであるため出力はかなり動的で、結果的にページの読み込みが重くなってしまっているようです。

一長一短があるのは仕方がありませんが、個人的には数式を書くならやはりMathjaxかと思っています。TeX品質の数式が手軽に書けて表示できるというのはやはり数学愛好家としては大変魅力的に思えます。

･･･ということで、数式を書くならまずTeXのお勉強をしなければなりません。私はTeXというものを大学に入るまでちゃんと勉強したことが無かったので、LaTeX関連の書籍などを漁り、最終的には奥村晴彦先生の「LaTeX2ε美文書作成入門」で勉強しました（全部は読んでおりませんが）。今年から改訂７版が出ているようなので、Mathjaxを自在に操りたいという野望を抱いている方は手に入れることをお勧めします。ネットを探せばLaTeXコマンド集を掲載しているウェブサイトもあるので、参考にしてみてください。当サイトでもLaTeXコマンド集を公開しているので、是非ご覧下さい！

 

 

“Web上で数式を表現するならMathJax” への1件の返信

  1. ピンバック: webサイトに化学式を表示する：MathJaxの拡張機能「mhchem」 | 理系のための備忘録

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です