数式を書く(ローカルサーバ版）

（準備中）

-----------------------------------------------------------------------------
最近、Webページに数式を書くことが多くなってきましたが、
Webページで数式をきれいに書くのはなかなか困難です。
Webページで数式を書こうとしたら、
①Latexで数式を作り、キャプチャーして画像としてWebページに貼りこむ
②MathJaxを使う
③MathMLを使う
などの方法を使うことになります。

簡単にそれらの使いかたを整理しました。

このページはローカルサーバに置いたMathjaxファイル（ライブラリ）で表示したページです。
Mathjax.orgが提供しているサーバのリモートファイル（ライブラリ）で数式を表示したページは
数式を書くにあります。

----------------------------------------------------------------------------

１．Webページに数式を書く

Webページで数式を表現するのはなかなか骨が折れます。
HTMLのタグで表現できるのは、せいぜい上付き文字、下付き文字くらいで、
CSSを駆使してもあまり美しい数式の表記はできません。

X²	X<SUP>2</SUP>
A₃	A<SUB>3</SUB>

ルート（根号）、分数、ベクトルとかが出てくる式は表現できません。
Webページで数式を書こうとしたら、
①Latexで数式を作り、キャプチャーして画像としてWebページに貼りこむ
②MathJaxを使う
③MathMLを使う
の３択になるでしょう。

①Latexを使って数式を書いて、画像にして貼りこむのは結構面倒な作業です。筆者のページでも
この方法で数式を書いているページが多くありますが、他の文字の大きさとのつり合いがとれなかったり、
レイアウトが微妙に崩れたり、なかなか見やすいページにするのに苦労します。
Latexについてはlatexの使い方をご参照

②はMathjax.orgが提供しているJavaScriptで数式を表示してくれるオープンソースのライブラリです。
Texの表記で数式を書けるので、Texに慣れている人には便利でしょう。
Mathjax.orgが提供しているサーバのリモートファイル（Mathjax.js）にアクセスして使う方法と、自分のローカルサーバ
にMathjax.jsを置いて使う方法とがあります。
Mathjax.orgが提供しているサーバのリモートファイルを使う場合は、HTMLに数行の記述をすれば使えるので
手ごろですが、URLが変更になったり、MathJaxのバージョンアップで表現が壊れたりという可能性もあります。
自分のローカルサーバにMathJax.jsを置く場合は、バージョンアップするには、自分が手動で行う必要があり、
それなりに手間です。

※　このページではMathjaxで表現した部分はローカルサーバに置いたMathJaxを使っています。
　　MathJax.orgはアメリカ数学会（AMS)と工業応用数学会(SIAM)とのMathjaxコンソーシアムです。

③はWebブラウザで数式を表現するためのマークアップ言語です。昔のブラウザは対応しているものが少なく、
MathJaxを使うか①の画像を貼りこむ方法が主流でしたが、最近は（2020年以降）対応ブラウザが増えたので、
MathMLを使うことも増えたようです。
簡単な数式はMathMLが一番手ごろかもしれませんが、複雑な数式はMathMLはかなり冗長な表記になるので、
MathJaxのほうがいいかもしれません。

2．MathJaxの使い方

（１）　ローカルに置いたMathjax.orgのライブラリを使う

このページの数式の表示には少し前のバージョン(MathJax2.7.5）のライブラリをローカルにおいて使っています。

自分のWebサイトのローカルサ-バにMathJaxのライブラリを置いて使うこともできます。
MathJaxのページから最新のディストリビューションをダウンロードして自分のWebサイトのローカルサ-バに適当な
ディレクトリを作って配置し、以下のScriptを記述するだけです。
（※）このページでは最新のバージョン（2024年　安定版の最新版は3.2.2）ではなく、少し古い2.7.5を使っているので、
以下のScriptはバージョン3用とは少し異なっています。

基本的には、<head> ... </head>　間に以下のように記述すればOKです。
<script type="text/javascript" async
src="ローカルサーバのディレクトリ/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
displayAlign: "left",
displayIndent: "2em"
});

ローカルサーバのディレクトリには、自分が配置したディレクトリを記述しておきます。

検証していませんが、多分バージョン3のライブラリをローカルサーバに置くときは以下のように
記述すればいいと思います。
<script type="text/javascript" async
src="ローカルサーバのディレクトリ/es5/tex-mml-chtml.js">
</script>

以下はMathJaxのバージョン2におけるConfigの設定です。
MathJax.Hub.Config({
displayAlign: "left",
displayIndent: "2em"

この設定は左寄せで、1文字分インデントすることにする設定です。
こうしておかないと数式はデフォルトで真ん中寄せで表示されます。
しています。

なお、MathJax.js?config=TeX-MML-AM_CHTML　と記述するとは後述のMathMLのタグでも表記してくれるので、
MathMl非対応のブラウザでもMathML表記による数式の表現が可能になります。

パーミッションはディレクトリは755、Mathjax.jsは644にしておけばよいと思います。

MathJaxでの表示例です。
(1)は正弦関数，(2)は余弦関数の定義です．

\begin{align} \;(1)\; sin x = x-\frac{x^3}{3!}+\frac{x^5}{5!}+\cdots \label{sin} \\ \;(2)\; cos x = 1-\frac{x^2}{2!}+\frac{x^4}{4!}+\cdots \label{cos}\\ \end{align} 　インラインモード
\begin{align} これはインラインモード\frac{\sqrt{5}\vec{OA}}{6^2}で書いてます。 \end{align}

以下にMathJaxでの基本的な式の表示例と記述の仕方をあげます。
式を複数行に渡って記述していくときは
\begin{align}　と \end{align]の間にLatexの表記に従って式を記述します。\\で改行します。

\begin{align} \sqrt{a}\\ \end{align}	\begin{align} \sqrt{a}\\ \end{align}
\begin{align} \frac{5}{2}\\ \end{align}	\begin{align} \frac{5}{2}\\ \end{align}
\begin{align} X^{3}\\ \end{align}	\begin{align} X^{3}\\ \end{align}
\begin{align} \vec{OA}=(1,0)\\ \end{align}	\begin{align} \vec{OA}=(1,0)\\ \end{align}

ついでインラインモードでの記述です。

\( ... \) で数式を書きます。

インラインでの記述　$X=\frac{a^{2}}{7}$

式の部分=>　\(X=\frac{a^{2}}{7}\)

有名なオイラーの公式は，$e^{i\theta}=\cos\theta+i\sin\theta$ です．

式の部分=> \(e^{i\theta}=\cos\theta+i\sin\theta\)

3．MathMLの使い方

数式を表現するためのマークアップ言語です。最近（2024年)はほぼどのブラウザもMathMLへの対応が進んだので、
下記の程度の短い式ならMathMLで十分かもしれませんが、長く複雑な式を書くときわめて冗長なタグ表記を
することになり、長く複雑な式には向いてないと思います。
MathJaxを使っている場合、MathMLもMathJaxによって表現され、そのほうが見栄えはきれいになるように思います。

$\sqrt{2}$	<math> <msqrt> <mi>2</mi> </msqrt> </math>
$x^{2}$	<math> <msup> <mi>x</mi> <mn>2</mn> </msup> </math>
$\vec{v}$	<math> <mover> <mi>v</mi> <mo>→</mo> </mover> </math>
$(\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix})$	<math> <mo>(</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd><mn>2</mn></mtd> </mtr> <mtr> <mtd><mn>3</mn></mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>)</mo> </math>

　　　　　　ミラーページ目次に戻る