Yamamoto's Laboratory
ページ作成
  基本
  数式 MathJax
  動画
  AdSense
  Amazon
  ブログ
  HTML5
  メモ
CSS
コンピューター WEB 数式  MathJax

WEB数式 MathJax

web上で数式を記述する場合,MathJaxが便利です.これを使うと,HTML文書で直接 LaTeXコマンドが使え,美しい数式が表示されます.MathJax の使い方は,とても簡単です.

目次


はじめに

自然科学や技術系の HTML ドキュメントを記述する場合,数式の表示が問題でした.これまで,私は数式を別に LaTeX で作成し,画像情報 (png, svg) に変換し,それを HTML ドキュメントに埋め込んでいました.自動化しても,とても面倒な作業です.MathJax はこれを解決します.HTML ドキュメント内の LaTeX 表現の数式が,LaTeX でのコンパイルと同じようにブラウザで表示されます.

ウィキペディアでは,「MathJax はMathML、LaTeX、ASCIIMathML(英語版)で記述された数式をウェブブラウザ上で表示するクロスブラウザ(英語版)のJavaScriptライブラリである」と書かれています.詳しいことは分かりませんが,TeXの数式を JavaScript ライブラリーを使って表示するようです.数式が多い web ページには大変便利です.これまで,私はTeXで数式を作り,pngやsvgに変換して表示していました.結構な手間です.MathJaxを使うとその手間が省けます.ブラウザで表示する数式の仕上がりもきれいで,満足できます.

日本語の説明は,東北大学の黒木玄先生の「MathJaxの使い方」が大変詳しいです.このページもこの黒木先生のページを参考にして作成しています.MathJaxのホームページには,詳細な説明があります.

[注意]  これまで使われていた MathJax CDN 2017年4月30日にシャットダウンするようです.ただし,これへの対応は簡単です.HTML ファイルの <head> — </head> を書き換えるだけです.詳細は,MathJax の WEB サイトの Alternative CDN providers を確認ください.

まず使ってみよう

ここは,これから始める人や初心者向けの説明です.ほとんどの人は,ここの例をコピー/ペーストするだけで,十分です.御託を並べるよりも,まず使ってみましょう.ここの HTML ソースをコピー/ペーストするだけで,MathJax を使うことができます.

最もシンプル

最も簡単な例は,以下のとおりです.

MathJax を使った最も簡単な HTML コード

001   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
002   <html lang="ja">
003     
004     <head>
005       <script type="text/javascript" async 
006           src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
007       </script>
008     </head>
009        
010     <body>
011       <p>フーリエ変換は次のように定義されます.</p>
012   
013       \begin{align}
014       F(\omega) = \cfrac{1}{\sqrt{2\pi}}\int_{-\infty}^{+\infty}f(t)e^{i\omega t}dt
015       \end{align}
016   
017     </body>
018   </html>

HTML文書のタグ <head> 内の 005 – 007行目で MathJax を読み込みます.そして本文中で,LaTeX の数式コマンドを記述します.の HTML ドキュメントは,ブラウザで以下のように表示されます.

簡単でしょう.たった3行 (リスト1の 005 – 007 行) を追加することで,HTML 文書で LaTeX の数式コマンドが使えます.

実用に耐える

先の簡単な例でもかなり使えます.さらに,数式番号が使えるとぐっと実用的になります.

数式番号を使った HTML コード

001   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
002   <html lang="ja">
003     
004     <head>
005       <script type="text/x-mathjax-config">
006          MathJax.Hub.Config({TeX:{equationNumbers:{autoNumber:"AMS"}}});
007       </script>
008       <script type="text/javascript" async 
009           src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML,/www_func/MathJax/MyConfig.js">
010       </script>
011     </head>
012        
013     <body>
014       <p>\eqref{sin}は正弦関数,\eqref{cos}は余弦関数の定義です.</p>
015   
016       \begin{align}
017       \sin x = x-\frac{x^3}{3!}+\frac{x^5}{5!}+\cdots \label{sin} \\
018       \cos x = 1-\frac{x^2}{2!}+\frac{x^4}{4!}+\cdots \label{cos}
019       \end{align}
020     </body>
021   </html>

先な例 (リスト1) との違いは,005 – 007 行目です.これを付け加えるだけで,式番号が使えます.

式番号を呼び出すコマンドは「\eqref(ラベル)」です.

設定

ここからは,中級者向けの説明です.もう少し本格的に使うためには,ある程度の設定が必要です.

MathJax の JavaScript の設定

MathJax の JavaScript は,WEB サイトのリモートファイルを使う方法と,それをダウンロードしローカルファイルとして使う方法があります.詳細はドキュメント「MathJax Documentation」を参照ください.

リモートファイル

WEB サイトのサーバー「cdnjs.cloudflare.com」にある MathJax を使う方法で,これは設定がとても簡単です.HTML ファイルの <head> – </head> に以下を記述するだけです.

<script type="text/javascript" async
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

これは,web プラットフォームの設定を読み込んでいるようです.問題なく読み込まれると,HTML 文書で\(\LaTeX\)のコマンドを使った数式の表示が可能になります.

ローカルファイル

自分のサーバーに MathJax のファイルを保管することで,「cdnjs.cloudflare.com」が変わってしまった場合でも安心です.少し設定が面倒ですが,私はローカルファイルを使っています.設定方法は,以下のとおりです.

  1. MathJax のサイト「Obtaining MathJax via an archive」から,最新バージョン「Current Version: MathJax-2.7 (33.0MB)」(2017/5/20)をダウンロードします.
  2. ダウンロードしたファイルを解凍します.
    $ unzip MathJax-2.7.1.zip
  3. 解凍作業により出来上がったディレクトリー「MathJax-2.7.1」をサーバーの適当な場所に,保管します.
  4. ディレクトリーのパーミッションを変更します.ディレクトリーは「755」に,ファイルは「644」に.
    $ find MathJax-2.7.1 -type d -exec chmod 755 '{}' \;
    $ find MathJax-2.7.1 -type f -exec chmod 644 '{}' \;

以上で,サーバー側の設定は完了です.

このローカルファイルを HTMLドキュメントに反映させるためには,<head> — </head>に,以下を記述します.

<script type="text/javascript"
   src="パス/MathJax-2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

パスは,サーバーの環境に合わせてください.

筆者流の設定

先に示した簡単な設定だと不便なことがあります.そこで,筆者は <head> – </head> に以下を記述します.最初の <script> で数式番号の自動割り付けの指定,二番目でローカルファイルと設定ファイル (local.js) を読み込みます.

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } }});
</script>
<script type="text/javascript" 
    src="相対パス/MathJax-2.7.1/MathJax.js?config=TeX-MML-AM_CHTML,local/local">
</script>

この場合,設定ファイルのパスは「パス/MathJax-2.7.1/config/local/local.js」です.

このユーザー設定ファイル (local.js) はインストール時に同時に保管させる「local.js」を修正し,作成します.筆者の場合は,以下のようにしました.こうすることにより,どのページからでも同じマクロを使うことができて,便利です.

筆者の MathJax の設定ファイル(local.js)

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
  var TEX = MathJax.InputJax.TeX;

  TEX.Macro("unit","{\\,[\\mathrm{#1}]\\,}", 1);
  TEX.Macro("diff","{\\mathrm{d}}");
  TEX.Macro("vm","{\\boldsymbol{#1}}", 1);
  TEX.Macro("grad","{\\nabla #1}", 1);
  TEX.Macro("div","{\\nabla\\cdot #1}", 1);
  TEX.Macro("rot","{\\nabla\\times #1}", 1);
  TEX.Macro("pdiffA","{\\frac{\\partial #1}{\\partial #2}}", 2);
  TEX.Macro("pdiffB","{\\frac{\\partial^{#1} #2}{\\partial #3^{#1}}}", 3);
  TEX.Macro("ddiffA","{\\frac{\\diff #1}{\\diff #2}}", 2);
  TEX.Macro("ddiffB","{\\frac{\\diff^{#1} #2}{\\diff #3^{#1}}}", 3);
});

MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }
});

MathJax.Ajax.loadComplete("[MathJax]/config/local/local.js");

マクロの書き方は非常に簡単です.\(\LaTeX\)のコマンド「\newcommad」とそっくりです.ただ,引数をともなう場合は,その個数が必要です.また,バックスラッシュ(or 円マーク)を使う場合はエスケープする必要があり,二つ重ねます.

使い方

インラインの数式

\(\) で数式を囲んむと,インライン表示できます.

入力
有名なオイラーの公式は,\(e^{i\theta}=\cos\theta+i\sin\theta\) です.
出力
有名なオイラーの公式は,\(e^{i\theta}=\cos\theta+i\sin\theta\)です.

別行立ての数式

別行立ての数式も可能です.\begin{align} 数式 \end{align} が使えます.式番号が不要なときには,\begin{align*} 数式 \end{align*}とします.これらは大変便利です.

入力
二階の反対称テンソル
\begin{align*}
  f_{\mu\lambda}=
  \begin{bmatrix}
     0    &  cB_z & -cB_y & -iE_x \\
    -cB_z &  0    &  cB_x & -iE_y \\
     cB_y & -cB_x &  0    & -iE_z \\
     iE_x &  iE_y &  iE_z &  0
  \end{bmatrix}
\end{align*}
になる.
出力
二階の反対称テンソル \begin{align*} f_{\mu\lambda}= \begin{bmatrix} 0 & cB_z & -cB_y & -iE_x \\ -cB_z & 0 & cB_x & -iE_y \\ cB_y & -cB_x & 0 & -iE_z \\ iE_x & iE_y & iE_z & 0 \end{bmatrix} \end{align*} になる.

数式番号とその参照

手入力

\tag{式番号} で式番号が手入力できます.式には \label{ラベル名} でラベルを付けることができ,\eqref{ラベル名} で参照可能です.

入力
ガウスの発散定理は,
  \begin{align}
    \int_V \nabla\cdot AdV=\int_S A\cdot n dS
    \tag{1}
    \label{eq:gauss}
  \end{align}
です.式\eqref{eq:gauss}は,微分の体積分はものの関数の面積分になる,と言っています.
出力
ガウスの発散定理は, \begin{align} \int_V \nabla\cdot AdV=\int_S A\cdot n dS \tag{1} \label{eq:gauss} \end{align} です.式\eqref{eq:gauss}は,微分の体積分はものの関数の面積分になる,と言っています.

自動割り付け

HTML ファイルの <head> と </head> の間に以下を入れると,数式番号は自動的に割り付けられます.これもまた,式には\label{ラベル名} でラベルを付けることができ,\eqref{ラベル名} で参照可能です.

数式番号の自動割り付けのためには,htmlのヘッダー部に以下を記述
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>

ヘッダー部の設定を行うと,\begin{align} 数式 \end{align} のような別行立ての数式に,式番号が割り付けられます.

入力
\eqref{eq:Cauchy-Riemann}はコーシー・リーマンの関係式です.
\begin{align}
  &\frac{\partial u}{\partial x}=\frac{\partial v}{\partial y}&
  &\frac{\partial u}{\partial y}=-\frac{\partial v}{\partial x}&
  \label{eq:Cauchy-Riemann}
\end{align}
そして,式\eqref{eq:Cauchy-int}はコーシーの積分公式です.
\begin{align}
  \oint_C \frac{f(z)}{z-z_0}=2\pi i f(z_0)
  \label{eq:Cauchy-int}\end{align}
\end{align}
出力
式\eqref{eq:Cauchy-Riemann}はコーシー・リーマンの関係式です. \begin{align} &\frac{\partial u}{\partial x}=\frac{\partial v}{\partial y}& &\frac{\partial u}{\partial y}=-\frac{\partial v}{\partial x}& \label{eq:Cauchy-Riemann} \end{align} そして,式\eqref{eq:Cauchy-int}はコーシーの積分公式です. \begin{align} \oint_C \frac{f(z)}{z-z_0}=2\pi i f(z_0) \label{eq:Cauchy-int} \end{align}

式番号が不要なときは,\begin{align*} 数式 \end{align*} のように,アスタリスクを付けます.あるいは,\nonumber を使います.\(\LaTeX\)と同じです.

マクロ

設定ファイルにマクロの定義を書くと,マクロを使うことができます.LaTeX の \newcommand のようなことができます.ただし,\if\else は使えないようです.マクロに関しては,オンラインドキュメントの Defining TeX macros に詳しい説明が有ります.

マクロを使うと複雑な式も簡単に記述できます.以下にその例を示します.

入力
マクスウェルの方程式は次の4組の微分方程式,
\begin{align*}
  &\div{\vm{D}}=\rho\\
  &\rot{\vm{E}}=-\pdiffA{\vm{B}}{t}\\
  &\div{\vm{B}}=0\\
  &\rot{\vm{H}}=j+\pdiffA{\vm{D}}{t}
\end{align*}
のことです.
出力
マクスウェルの方程式は次の4組の微分方程式, \begin{align*} &\div{\vm{D}}=\rho\\ &\rot{\vm{E}}=-\pdiffA{\vm{B}}{t}\\ &\div{\vm{B}}=0\\ &\rot{\vm{H}}=j+\pdiffA{\vm{D}}{t} \end{align*} のことです.

ページ作成情報

参考資料

  1. 東北大学の黒木玄先生の「MathJaxの使い方」は大変参考になります.
  2. MathJaxのホームページには,ささざまな情報があります.

更新履歴

2013年08月15日 ページの新規作成
2016年04月09日 更新内容の説明
2017年05月20日 2 まず使ってみよう」の記述.「MathJax CDN」シャットダウンに伴い,関連の記述の修正.


no counter