動的にMathJaxを適用する

概要

ユーザが画面に入力したパラメータに応じた数式を表示し、
表示する数式にはMathJaxを適用してTeXっぽくします。

動的に変化させる数式はJavaScriptを利用して作成しますが、
うまくMathJax が適用されずハマったのでメモ。

環境

  • javaScript 5.0.4
  • jQuery 2.2.4
  • MathJax 2.7.5
  • Google Chrome
  • AWS Cloud9

作成するページのイメージ

題材はフィボナッチ数列です。
———- ここからイメージ ———-


説明

フィボナッチ数列の一般項は以下の式で表されます。

\begin{align}
F_k = \frac{1}{\sqrt{5}} \left\{ \left( \frac{1+\sqrt{5}}{2} \right)^k
- \left( \frac{1-\sqrt{5}}{2} \right)^k \right\}
\end{align}

フィボナッチ数列の第0項から第n項までの和を計算します。

nに1〜10の整数を入力し、「表示」ボタンを押してください。

\( n = \)

出力結果


---------- ここまでイメージ ----------

ソースコード

ポイントは、JavaScriptで MathJax.Hub.Queue を適用することです。
これを適用しないと、上記イメージ「出力結果」の数式が
MathJaxで変換されません。

index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
   <metacharset="UTF-8" />
   <title>動的にMathJaxを適用する</title>
   <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.0.4/math.min.js"></script>
   <scripttype="text/javascript" asyncsrc="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
   <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <scriptsrc="main.js"></script>
 </head>
<body>
<h3>説明</h3>
<div>
<p>フィボナッチ数列の一般項は以下の式で表されます。</p>
<div>
\begin{align}
F_k = \frac{1}{\sqrt{5}} \left\{ \left( \frac{1+\sqrt{5}}{2} \right)^k
- \left( \frac{1-\sqrt{5}}{2} \right)^k \right\}
\end{align}
</div>
<p>フィボナッチ数列の第0項から第n項までの和を計算します。</p>
<p>nに1〜10の整数を入力し、「表示」ボタンを押してください。</p>
\( n = \) <inputtype="text"id="para_n"size="3"maxlength="2"value=2>
<buttontype="button"id="display_button">表示</button>
</div>
<h3>出力結果</h3>
<divid=result></div>
</body>
</html>

main.js

$(function() {
// 表示ボタン押下時
$("#display_button").on('click', function() {
var str_formula = "";  // 展開式を格納する変数
var str_values = "";   // 項ごとに計算した展開式を格納する変数
// 入力パラメータ n を取得して数値に変換
var n = Number($("#para_n").val());
// n < 1 または n > 10 の場合は警告メッセージを表示して処理終了
if ( n < 1 | n > 10 ) {
alert("nは1〜10の整数を設定してください");
exit;
}
// 級数和の展開式を作成し、各項の値を加算
var Fk = 0;       // フィボナッチ数列の第k項(初項を第0項とする)
var sum = 0;      // k項までの和
for ( var k = 0; k <= n; k++ ) {
// 第k項の値を計算
Fk = (1/Math.sqrt(5)) * ( ( (1 + Math.sqrt(5)) / 2)**k - ( (1 - Math.sqrt(5)) / 2)**k );
// 初項から第k項までの和
sum += Fk;
// 展開式に第k項を追加
str_formula += "\\frac{1}{\\sqrt{5}}\\left\\{\\left(\\frac{1+\\sqrt{5}}{2}\\right)^{" + k + "}"
+ " -\\left(\\frac{1-\\sqrt{5}}{2}\\right)^{" + k + "}\\right\\}\\newline + ";
// 展開式(項ごとに計算した値)に第k項の値を追加
str_values += Fk.toString() + " + ";
}
// slice(0, -2)で展開式末尾の"+ "を削除
str_formula = str_formula.slice(0, -2);
str_values = str_values.slice(0, -2);
// id=result のdiv要素内に、第n項までの和の展開式と答えを追加
$("#result").html("\\begin\{align\}\n");
$("#result").append("\\sum_{k=0}^{n=" + n + "} F_k = " + str_formula + "\n");
$("#result").append(" = " + str_values + "\n");
$("#result").append(" = " + sum + "\n");
$("#result").append("\\end\{align\}");
// id=result の要素をMathJaxで変換 ※ここが重要!!!
MathJax.Hub.Queue(["Typeset",MathJax.Hub,"result"]);
});
});

まとめ

軽い気持ちでフィボナッチ数列を題材にしましたが、
10年くらいTeXを触っていなかったため余計なところで苦労しました。。

でもTeXライクな数式だと見やすくていいですね!
掲示板で見る数式は、どうもスッと頭に入りません。。

参考

https://www.coma-tech.com/archives/8/

フィボナッチ数 - Wikipedia

タイトルとURLをコピーしました