WordPressやWordで数式を使うときはLaTeXが簡単

WordPressやWordで数式を使う場合、LaTeXに変換するアプリMathpix Snipを使うと爆速です。スマホで撮影した数式、iPadで手書きした数式、Webで見つけた数式等から簡単に数式ができます。もっと、早くこの方法を知りたかった。

1. WordでLaTeX（ラテフ）を使う方法

まず、「挿入」>「数式」を選択します。（ショートカットキーは「Alt」+「Shift」+「=」です)

すると、メニューバーに「数式」が現れるので、この「数式」をクリックして数式を編集します。

ここまでは一般的な数式作成方法と同じです。LaTexを使うには、「数式」をクリックして表示されたメニューの左側の「{}LaTeX」をクリックします。

すると、数式のオブジェクトの中にLaTeXのコードを記述し、Enterキーを押すことで数式を作成することができるようになります。

ここで、LaTeXのコードを自分で最初から入力しなければならないのであれば、LaTeX信者のための機能で終わってしまうのですが、LaTeXのコードを自動で生成するアプリMathpix Snipを使えばLaTeXの知識がなくとも簡単に素早くLaTeXのコードを作ることができるのです。

面倒な数式作成の効率を上げたいならLaTeXを使うべきです。

2．WordPressでLaTeXを使う方法

WordでLaTeXを使うメリットと同様にWordpressでもLaTeXを使うことで効率よく数式を使った記事を作成することができます。

今まで私がWordPressで数式を使う場合Wordには、まず、数式エディタで数式を作り、図に変換しWordPressにアップロードしていました。しかし、LaTeXを使った方が断然楽です。

さて、WordPressでLaTeXを使うためにはプラグインが必要になりますが、お勧めのプラグインを紹介したいと思います。

日本語で使うならば、まず、候補として挙がるプラグインが「Mathjax-LaTeX」「Simple Mathjax」です。

「Simple Mathjax」も評判がよく表示が安定しているようですが、私は「Mathjax-LaTeX」を採用しました。理由はショートコードを使えるからです。

(1) ショートコードの扱いの違い

「Mathjax-LaTeX」と「Simple Mathjax」の機能について、最も大きな違いはショートコードの扱いではないかと思います。

「Mathjax-LaTeX」はデフォルト設定では、ショートコードを使用する設定となっています。つまり、ショートコードを記述した記事では「Mathjax-LaTeX」が有効となり、ショートコードを記述しない記事では「Mathjax-LaTeX」が無効となります。

なお、この設定は変更することができ、ショートコードを記述しない設定も可能であり、その場合は全ての記事で「Mathjax-LaTeX」が有効となります。

一方、「Simple Mathjax」はショートコードの設定はできず、全ての記事で「Simple Mathjax」が有効となります。

私は、これらのアプリが他のアプリと干渉してしまう可能性を考慮し、干渉してしまう記事だけを無効にできる「Mathjax-LaTeX」を使うことにしました。

(3) MsthJax-LaTeXが有効にならないバグ

私の場合、プラグインを入れた直後は、なぜか実行しても機能が有効になりませんでした。このバグへの対応としては、WordPressのメニューから「プラグイン」>「インストール済みのプラグイン」>「MathJax-LaTeXの設定」で「Force Load」にチェックを入れて数式を表示する。一度、実行した後はチェックを外しても問題ありません。

Force Loadの説明は以下の通りです。MathJax-LaTeXを使う場合、デフォルトでは数式を使う記事のどこかにというショートカットを記述する必要があります。しかし、Force Loadにチェックを入れるとが不要になるという機能です。

Force the MathJax JavaScript to be loaded on every post. This removes the need to use the [mathjax] shortcode.

私は記事ごとに設定をしたいので、一度、チェックを入れた後にチェックを外しました。

(2) 実際に「Mathjax-LaTeX」を利用した例

では、実際に「Mathjax-LaTeX」を使ってみましょう。

1つめの方法はディスプレイスタイルで表示した例です。ディスプレイスタイルでは数式の前後で改行されます。

$$数式$$

[mathjax]
二次方程式の解の公式は$$x=\frac{-b \pm \sqrt{b^{2}-4 a c}}{2 a}$$です。

二次方程式の解の公式は$$
x=\frac{-b \pm \sqrt{b^{2}-4 a c}}{2 a}
$$です。

ディスプレイスタイルは、以下のような書式で記述することもできます。

\[数式\]

[mathjax]
二次方程式の解の公式は\[x=\frac{-b \pm \sqrt{b^{2}-4 a c}}{2 a}\]です。

二次方程式の解の公式は\[x=\frac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} \]です。

２つ目の方法はインラインスタイルです。インラインスタイルでは文中に数式が表示され、数式の前後で改行されません。

\(数式\)

[mathjax]
二次方程式の解の公式は\(x=\frac{-b \pm \sqrt{b^{2}-4 a c}}{2 a}\)です。

二次方程式の解の公式は$x=\frac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} $です。

なお、ショートコードのは、記事のどこかに1回だけ記述すればよく、何度も記述する必要はありません。

(3) ビジュアルエディタで編集できるのか

実際に使う前は、WordPressのコードエディタ、あるいはカスタムHTMLブロックを使う必要があると思っていましたが、ショートコードの、数式ともにビジュアルエディタで記述することができます。

3. LaTeX形式のデータを自動生成するアプリ

私も以前からLaTeXを使いたいとは思いながら、「覚えるのは大変だな」と尻込みしていました。また、年に数回使う程度なので、せっかく覚えても次に使うときは忘れそうです。

しかし、LaTexのデータを自動生成するアプリを使えばあっという間です。

(1) Mathpix Snip

まず、お勧めは以下のリンク先からアプリをインストールできるMathpix Snipです。メールアドレスでアカウントを作成する必要がありますが、非常に便利です。

Mathpix Snip

細かい使い方は説明しませんが、以下のようなことができます。また、スマホ、タブレット、PCといった異なるデバイスでの連携が非常に簡単です。また、読み込み精度が高く、長い式でもほとんど修正することがありません。また、複数行の数式を一度に読み込むことができます。

手書きや書籍の数式をスマホなどのカメラで取り込める。
マウスやappleペンシルなどを使って手書きした数式を変換できる。
PCで開いたWeb画面などから数式の部分を矩形選択し、取り込める。
iPhon, iPad, Android, Mac, Windowsに対応していて、データを簡単に連携できます。Mathpix Snipが持つクラウドで連携するので、DropBoxとの連携といった設定も不要です。そして、例えばスマホのMathpix Snipで撮影した写真を、PCのMathpix Snipで使用できます。

(2) MyScript Webdemo math

PCで手書きした数式を気軽にLaTeXに変換したいならMyScript Webdemo mathです。

MyScript Webdemo math

ただし、解の公式を変換した場合、「frac」ではなく「dfrac」という関数に変換されました。

\[x=\dfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a}\]

「frac」「dfrac」「cfrac」は、分数を記述するコマンドですが、それぞれ文字の大きさや配置が違います。以下を参照してください。

【LaTeX】分数のかき方とテクニック

「dfrac」「cfrac」は、自分が試したところWordのLaTeX入力では使えませんでした。一方、WordPressのMathJax-LaTeXはデフォルトの設定では使えません。設定の方法は後述します。

4. Mathjax-LaTeXの設定

Mathjax-LaTeXの設定について、「Force Load」にチェックを入れるとショートカットが不要となることは説明しましたが、「MathJax Configuration」の設定について説明したいと思います。この設定を変えることによって、「dfrac」や「cfrac」を使うことができるようになります。

以下、「Mathjax-LaTeX」で設定できるオプションです。

default
TeX-AMS_HTML
TeX-AMS-MML_HTMLorMML
Accessible

なお、Mathjax-LaTeXの公式のサイトでは、以下のリンク先に設定の解説があります。

Combined Configurations

(1) default

TeX, LeTeXが使用できます。ただし、「dfrac」「cfrac」などは使えないので特に分数の書式に満足できない人は別のオプションに設定した方がよいと思います。

一方、ノーマルなTeX, LeTeXだけしか使用できない設定にしておけば、Wordなどへの転用も楽なので汎用性が高いとも言えます。

(2) TeX-AMS_HTML

TeX-AMS_HTMLは、LaTeX の拡張パッケージであるAMSmath等にも対応しています。したがって、「dfrac」「cfrac」も使えます。個人的にはこの設定がお勧めです。

(3) TeX-AMS-MML_HTMLorMML

AMSmathだけではなくMathMLにも対応しています。 MyScript Webdemo math では、MathMLへの変換も可能ですから、LaTeXによる表現に不満がある場合には表現の幅が広がる可能性があります。

なお、ネット上の記事では、TeX-AMS-MML_HTMLorMMLに設定しているものが多いようです。ただ、使い道がはっきりしているならば、不要な機能を読み込む必要はありません。

(4) Accessible

TeX-AMS-MML_HTMLorMMLの設定に加えて、視覚的な問題を抱える人々のための支援技術用に設計されたオプションが含まれています。
ただし、MathJaxをスクリーンリーダーで動作させるコントロールがMathJaxコンテキストメニューとAssistiveMML拡張機能で利用できるようになったため、この設定は公式で非推奨になりました。

5. スマホ用に横方向をスクロール表示にする

長い数式の場合、数式の右側が切れてしまい表示できなくなることがあります。解決法としてはCSSを使って横方向をスクロール表示にします。

(1) CSSの追加コード

まずは、CSSファイルに以下の記述を追加します。「scroll_yoko」の部分は自由に名前を付けてください。

div.scroll_yoko{
    overflow-x: auto;
    overflow-y: hidden;
}

(2) CSSの追記

追記する方法は2つあります。なお、私のWordPressのテーマはCocoonですのでテーマによっては多少変わる可能性があります。

1つ目の方法はCocoonの子テーマのstyle.cssに追記する方法です。

WordPressの左側の設定メニューより「外観」→「テーマエディタ」を選択
右上の方の「編集するテーマを選択」より「Cocoon Child」を選択。
style.cssの中に上記のコードを追記する。
左下の「ファイルを更新」のボタンをクリック

2つ目の方法は追加CSSに記述する方法です。こちらの方法の方が楽だと思います。

WordPressの左側の設定メニューより「外観」→「カスタマイズ」を選択
追加CSSを選択
CSSを記入する欄が表示されるので、上記コードを追記する。
左上の「公開」をクリック

(3) WordPressの記事の中での記述

WordPressの記事の中では、以下のように数式を記述します。横スクロール表示にするためには、カスタムHTMLブロックを使用する必要があります。

<div class="scroll_yoko">
数式
</div>

以下、実際の記入例です。（センスがない例ですみません）

なお、scroll_yokoの両側の"は全角ではなく半角です。WordPressの仕様上、時々全角になっているサイトがあるのでコードをコピペする場合は注意してください。

<div class="scroll_yoko">
$$
6x=\cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a}
$$
</div>

$$ 6x=\cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} + \cfrac{-b \pm \sqrt{b^{2}-4 a c}}{2 a} $$