数式表示用のプラグインをWP-QuickLaTeXからMathJaxに変更しました。

はじめに

昨日(2018年9月16日)、この記事の数式の中に誤りを見つけたので、電車の中でスマホを駆使しながら誤りを修正してプレビューで確認をしてみたところ、WP-QuickLaTeXが

「dviファイルが作成できない」

旨のエラーメッセージを出力してしまい、数式が作成されなくなってしまいました。

WP-QuickLaTeXプラグイン自体にはdviファイルを作成する機能はなく、かつ上記のメッセージはWP-QuickLaTeXプラグインが決め打ち的に出力するメッセージというよりは、quicklatex.comから送られてきたメッセージであるため、quicklatex.comに接続できていないという状況ではなさそうでした。

「最悪、WP-QuickLaTeXの数式専用のキャッシュがあるから2,3日中に対処すれば問題ないだろう。」と最初は思っていたのですが、夕方に家に帰ってきてWP-QuickLaTeXプラグインを使って数式を出力しているページを見たところ、「dviファイルが作成できない」旨のエラーメッセージを出力していて、数式が表示できていませんでした。

上記の自体を踏まえ、WP-QuickLaTeXの実装をあらためて見直してみたりとかしつつ検討した結果、

現在の本サイトの運用の状況だとサーバーサイドでTeXの組版結果を取得し、それをあらためてクライアントに送る実装を採用しているWP-QuickLaTeXはサーバのリソースの中でも特に貴重であるメモリリソースを消費している可能性がある。したがって、サーバの増強等を行わない限り、今後も運用し続けるのが少々厳しいかもしれないこと。
MathJaxはTeXの組版処理をクライアントサイドで行うため、1.の問題をある程度解決できる可能性があること。
その他、本サイトの管理人たるpandaがTeXと名の付くものを使うときに気になる諸問題(これについては「本サイト用のMathJaXの設定。」の節で書きます。)がMathJaxでもほぼ解決できること。
化学式は画像を貼ることで、代替すればいいじゃん。

と思うに至りました。

そこで、この際MathJaxに切り替えることとし、WordpressにMathJax-LaTeXプラグインをインストールすることとしました。

なお、インストールしたMathJax-LaTeXプラグインのバージョンは1.3.10です。2018年の7月あたりに久々にアップデートされたようです。

MathJaX-LaTeXプラグインのインストールと設定。

MathJaX-LaTeXプラグインのインストール自体は一般的な他のWordPressのプラグインと同様です。

具体的には以下の手順でインストール及び必要最低限の設定を行います。

プラグインのページからZIPファイルをダウンロードします。
WordPressのプラグインのディレクトリ(Fedora 28では/usr/share/wordpress/wp-content/pluginsですが、異なる場合は適当に読み替えてください。)で以下のコマンドを実行し、プラグインを展開します。
unzip mathjax-latex.1.3.10.zip

これで、インストール作業は完了です。
WordPressの管理者用のダッシュボードから、「Settings」→「MathJaX-LaTeX」と選択すると、「MathJaX-LaTeX」の設定画面が表示されますので、「Use MathJax CDN Service?」のチェックボックス(下図の(a))を外し、「Custom MathJax location?」(下図の(b))をここでお勧めされているCloudFlareのCDN(https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js)に変更します。
お好みで「MathJax Configuration」を設定します。上図の例では「TeX-AMS-MML_HTMLorMML」に設定しています。
「Save Changes」ボタンをクリックし、設定を反映します。

なお、設定後に上図の画面に戻ると、「Use MathJax CDN Service?」のチェックボックス(上図の(a))がチェックされた状態になっているようですが、「Save Changes」ボタンを押さずに別のページに移ればセーフだと思います。

上記の状況で「Save Changes」ボタンを押したことがないので、ボタンを押すとどうなるのかはわかりません。(´・ω・`)

本サイト用のMathJaXの設定。

TeXと名の付くものを使うときに本サイトの管理人たるpandaがどうしても気になる設定をこの節にまとめてみました。

「自分も気になります。」

という方がいらっしゃいましたら、ご参考にしていただけると幸いです。

スマホにおける数式の画面突き抜け対策。

このページの(6)式のように式が長くなってくると、PCだとレイアウトに収まらなくなるだけで済みますが、スマホですとレイアウト全体が崩れてしまいます。

そこで、この記事を参考にしつつ、align環境やeqnarray環境を記述するごとにそれらを都度Wordpressのエディタ上でdivタグで挟んで記述せねばならないのはちょいとつらいので、以下のコードの追加と設定を行ってみました。

広告を文章中に入れるためのショートコードのフィルタ関数に以下のコードを追加してみました($contentに記事本文が入っています)。

$content = preg_replace('/\\begin\{(align|eqnarray)/','<div class="tex-equations">\begin{content);

$\*$ content);

view raw latex_equation_scroll.php hosted with by GitHub

CSSファイル(style.css等)に以下の設定を追加します。

	/* MathJax */
	div.tex-equations {
	overflow-x: auto;
	}

view raw latex_equation_scroll.css hosted with

by GitHub

これで、1個の記事に数式を思う存分書くことができると思います。(｀・ω・´)

積分記号が大きくならないことへの超簡易対策。

このページの(8)式や(9)式の積分記号は、以下のように記述しています。

{\Huge\int}

積分記号を大きくすると、積分記号及び積分区間の後に続く数式の間隔が広がってしまうので、”\,”を駆使して適当に間隔を詰めます。

header.phpに追加する設定。

インライン数式を $数式$ で書けるようにするための設定。

インライン数式はあえて$記号1個で囲みたいので、header.phpのheadタグの内部に以下のように設定します。

<script type=”text/x-mathjax-config”>
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [[‘’], [‘\(‘,’\)’]],
    processEscapes: true
  }
});
</script>

上記の設定を行うと、[MathJax]を記述したページでは’$’記号自体を記述したい場合には何らかの方法でエスケープすることになります。&dollar;と書くのがお勧めですかねぇ。

別行立て数式の場所及び等号等の演算子の両脇のスペースの設定。

別行立て数式の等号は左寄せ派でして、かつ等号等の演算子の両脇のスペースは狭い方が見やすい(※個人の感想です。)と思っているので、header.phpのheadタグの内部に以下のように設定します。

<script type=”text/x-mathjax-config”>
MathJax.Hub.Config({
  displayAlign: “left”,
  displayIndent: “2em”
});
</script>

数式に式番号を入れる設定。

数式には式番号が入れることができて、かつそれらの式番号については相互参照ができて欲しいので、header.phpのheadタグの内部に以下のように設定します。

<script type=”text/x-mathjax-config”>
MathJax.Hub.Config({
  displayAlign: “left”,
  displayIndent: “2em”
});
</script>

ここまでの設定をまとめてみた。

ここまでのheader.phpへ追加する設定をまとめると以下のようになります。本サイトでは↓の設定を</head>の直前に追加しています。

	<script type="text/x-mathjax-config">
	MathJax.Hub.Config({
	displayAlign: "left",
	displayIndent: "2em",
	TeX: {
	equationNumbers: { autoNumber: "AMS" },
	},
	tex2jax: {
	inlineMath: [[''], ['$','$']],
	processEscapes: true
	}
	});
	</script>

view raw mathjax_hub_config.php hosted with

by GitHub

MathJaxへの切り替えに伴い、取扱を終了した機能。

MathJaxへの切り替えに伴い、この記事のような化学式を直接処理して表示することができなくなってしまいました。(´・ω・｀)

とりあえず、上記の記事ではWP-QuickLaTeXのcacheから拾ってきた画像をcache置き場とは別の場所に移してからimgタグで読み込んでいます。

今後はTeX2img等を使って画像に変換してからその画像をWordpressにアップロードし、記事の本文中からimgタグで表示することになりそうです。

まとめ

ここまでの設定をほぼ24時間で行い、なんとか数式の表示を復旧させることができました。

ブラウザで数式がたくさん書いてある記事(例: この記事とか)を開くとブラウザの右下隅にMathJaxの処理状況が表示されます。ちょっとカッコイイです。

また、ページ本体のダウンロード後にMathJaxによる数式のレンダリング処理が(遅延ローディングっぽく)実行されますので、体感的な表示速度はかなり速くなっていると思います。リソースの制約の厳しい本Webサイトでもしばらくは使用できそうです。

ところで、LaTeX本といえば↓ですよね。

<br />

…と無理矢理紹介してみたところで、この記事の本編はここまでです。

参考文献の後に付録がありますので、ご覧いただけると幸いです。

参考文献

付録: 1個の記事の中に数式とGitHub Gistのコードを混在させるとGitHub Gistのコードが誤表示される件

[2019/02/16 追記] 1個の記事の中に以下のものが含まれている場合に、埋め込んだGitHub Gistのコードの$が数式モードの開始(または終了)と解釈されてしまい、正しく表示されない場合があるようです(必ず発生する現象ではないようです)。

MathJaxで解釈されるべき数式。
GitHub Gistのコードを埋め込むためのJavaScriptのコードで、かつそのコード中に”$”が含まれているもの。

本Webサイトではこの記事でのみこの現象が発生したため、この記事についてはMathJaxを使用しないよう設定の変更を行いました。

	$content = preg_replace('/\\begin\{(align\|eqnarray)/','<div class="tex-equations">\begin{content);
	$\*$ content);