Microsoft Office 等の追加ソフトは一切無しで、Windows 標準ブラウザである Microsoft Edge のみ (※ Chrome でも可) をもちいて、HTML タグのような記述 (MathML) で数式を描画する方法を紹介します。
目次
- まえがき
- 最初の例 - MathML の基本記述のみで簡単な数式を描く
- 例 2 - ちょっと複雑な数式に挑戦
- 例 3 - 入れ子になった分数を表現
- 例 4 - 「Σ」や「べき乗」を含む複雑な式に挑戦
- 例 5 - 平方根の中に数式を含めるケース
- おわりに
まえがき
Windows 標準機能のみで数式を描画する方法で、有名かつお手軽な方法としては Math Input Panel がありましたが、Windows 11 では標準機能としては削除され、追加インストールが必要になってしまいました。
しかしながら、「MathML」という HTML のように数式を描く機能が 2023 年 1 月に Google Chrome 109 に標準搭載されたことがきっかけで、同じく Chromium エンジンを使用している Microsoft Edge でも利用可能となりました。
つまり、Google 先生のおかげで、Windows 標準ブラウザの機能が強化された形です。
MathML は W3C という世界的な標準化団体が規格化を進めている、将来性のある技術ですので、筆者としても「使わない手は無い」と考えており、記事として紹介することにしました。
最初の例 - MathML の基本記述のみで簡単な数式を描く
まずは、MathML の基本記述と、実際にブラウザで描画する手順に慣れることを目的に、以下の数式の記述を試してみましょう。
MathML の記述方法・記述内容
以下の MathML の記述を Windows 標準の「メモ帳」などで行い、拡張子 html (または htm) として保存することで、ブラウザで開けるようになります。
少なくとも Edge と Chrome では、バージョンが古くなければ正しく描けるはずです。
<math> <mi>sin</mi> <mo>(</mo> <mi>x</mi> <mo>+</mo> <mi>y</mi> <mo>−</mo> <mn>1</mn> <mo>)</mo> </math>
「改行」や「空白」の必要性について
HTML と同様、必ずしも「改行」や「空白」は必要ではありません (例えば全部 1 行で書いても OK) が、見やすさを意識して適宜改行や空白を入れるようにした方が良いでしょう。
数式の大きさの調整方法
最も簡単な方法は、ブラウザの拡大・縮小機能 (Edge や Chrome では、Ctrl キーを押しながらマウスホイールを回転) で大きさを調整することです。
もし 100% の拡大率のままで数式を大きく描画したい方は、以下のように HTML のスタイル指定機能を使う (math の開始タグで font-size を指定) と良いでしょう。
<math style="font-size:64px"> <mi>sin</mi> <mo>(</mo> <mi>x</mi> <mo>+</mo> <mi>y</mi> <mo>−</mo> <mn>1</mn> <mo>)</mo> </math>
各タグの説明
math 要素 (<math> ～ </math>)
MathML 記述の開始と終了を指定します。これが無ければ始まりません。
mi 要素 (<mi> ～ </mi>)
数式中の文字 (変数名、関数名など) を示します。
- mi の間に 1 文字しか含まれない場合、「変数」のようにイタリック体で表示されます。
- 2 文字以上含まれる場合、「関数」のように通常の字体で表示されます。
mo 要素 (<mo> ～ </mo>)
数式中の演算子 (括弧、+、- など) を示します。
一部の記号は、HTML と同様、− のように「実体参照」として記述する必要があります。(キーボードから入力できる「-」はハイフン扱いとなり、狭い幅になります)
福井高専のサイトに、記号文字の「実体参照」も含めて様々な例が紹介されていますので、参考にしてみると良いでしょう。
mn 要素 (<mn> ～ </mn>)
数式中の数値 (0～9) を示します。
補足
mi (文字)、mo (演算子)、mn (数字) を区別して入力しなければならない点は、一見すると面倒だと思います。
しかし、区別指定を怠ると、ブラウザ側で数式を正しく解釈できずに描画結果がおかしくなる可能性もあるため、なるべく文字、演算子、数字を区別して入力した方が良いでしょう。
ただし、多少間違えた程度では描画結果は変わらないため、あまり厳密にならなくても良いこともまた事実です。(他のブラウザなど別環境で表示する予定がある場合は別ですが…)
例 2 - ちょっと複雑な数式に挑戦
これから紹介する新しいタグ (分数表記など) も使用して、以下の「三角関数の積和公式」に挑戦してみましょう。
記述内容 (MathML)
ちょっと量が増えますが、この後説明する新しいタグの説明も含めて、落ち着いて読めば理解できるはずです。
なお、新たに出てくる実体参照 (α β 等) の情報については、先ほどの福井高専の MathML の説明サイトなど、他のサイトで得られるため、割愛します。(この後の例でも同様)
<math>
<mrow>
<mi>sin</mi><mi>α</mi>
<mo>⋅</mo>
<mi>cos</mi><mi>β</mi>
</mrow>
<mo>=</mo>
<mfrac>
<mrow>
<mi>sin</mi><mo>(</mo>
<mi>α</mi><mo>+</mo><mi>β</mi>
<mo>)</mo><mo>+</mo>
<mi>sin</mi><mo>(</mo>
<mi>α</mi><mo>−</mo><mi>β</mi>
<mo>)</mo>
</mrow>
<mn>2</mn>
</mfrac>
</math>
新規タグの説明
mrow 要素 (<mrow> ～ </mrow>)
数式の 1 つの「意味的なまとまり」を示します。
一見して不要であるように見えますが、例えばこの後説明する「分数」のように「分子と分母に入れる式のまとまりを明確に区別する必要がある場合」では必須です。
それ以外のケースでも、例えば数式中の「括弧の高さ」などの描画結果にも影響することもあるため、mrow の入れ方に試行錯誤が必要な場合もあります。
mfrac 要素 (<mfrac> ～ </mfrac>)
「分数」表記を示します。
表記の仕方は、<mfrac> <分子のタグ> ～ </分子のタグ> <分母のタグ> ～ </分母のタグ> </mfrac> となります。
分子や分母が 1 つのタグだけでは完結しない式の場合は、上述の mrow 要素が必要になります。(今回の例では、分母は mn だけで完結するため、分子のみ mrow を使用)
例 3 - 入れ子になった分数を表現
MathML は、HTML と同様に「入れ子」の表現が簡単にできるため、例えば以下のような入れ子状の分数 (黄金数) を表現する際に強力です。
記述内容 (MathML)
新規タグはなく、かつ同じような記述をマトリョーシカのように繰り返しているだけですので、解説は割愛します。
<math>
<mn>1</mn><mo>+</mo><mfrac><mn>1</mn><mrow>
<mn>1</mn><mo>+</mo><mfrac><mn>1</mn><mrow>
<mn>1</mn><mo>+</mo><mfrac><mn>1</mn><mrow>
<mn>1</mn><mo>+</mo><mfrac><mn>1</mn><mrow>
<mo>⋱</mo>
</mrow></mfrac>
</mrow></mfrac>
</mrow></mfrac>
</mrow></mfrac>
</math>
余力があれば、どこまで入れ子ができるか、ブラウザの限界に挑戦してみるのも 1 つの遊び方として有りでしょう。
例 4 - 「Σ」や「べき乗」を含む複雑な式に挑戦
一見難しいかもしれませんが、「Σ」や「べき乗」なども、「複数の部分数式に分かれる」という点では「分数」と同じ (使うタグが変わるだけ) なので、難易度はさほど変わりません。
それを踏まえて、次の「離散フーリエ変換」の式に挑戦してみましょう。
記述内容 (MathML)
数式が 2 行に分かれていますが、<math> ～ </math> のブロックを 2 つに分割し、間に HTML タグの <br> (改行) などを入れることで調整できます。
(ただし、実際に一般公開する Web サイトの HTML ソース中に数式を埋め込む場合は、Web 標準に従い、<br> ではなく、スタイルシートで見栄えを指定すべきです)
<math>
<mrow><mi>F</mi><mo>(</mo><mi>k</mi><mo>)</mo></mrow>
<mo>=</mo>
<munderover>
<mi>∑</mi>
<mrow><mi>t</mi><mo>=</mo><mn>0</mn></mrow>
<mrow><mi>N</mi><mo>−</mo><mn>1</mn></mrow>
</munderover>
<mrow><mi>f</mi><mo>(</mo><mi>t</mi><mo>)</mo></mrow>
<msup>
<mi>e</mi>
<mrow>
<mo>−</mo><mi>j</mi>
<mfrac>
<mrow>
<mn>2</mn><mi>π</mi><mi>k</mi><mi>t</mi>
</mrow>
<mi>N</mi>
</mfrac>
</mrow>
</msup>
</math>
<br><br>
<math>
<mi>k</mi><mo>=</mo>
<mn>0</mn><mi>,</mi><mn>1</mn><mi>,</mi>
<mi>⋯</mi><mi>,</mi>
<mi>N</mi><mo>−</mo><mn>1</mn>
</math>
新規タグの説明
munderover 要素 (<munderover> ～ </munderover>)
今回使用した「Σ」のように、上と下に小さな数式を付ける場合に使用します。
表記の仕方は、<mfrac> <本体のタグ> ～ </本体のタグ> <下段式のタグ> ～ </下段式のタグ> <上段式のタグ> ～ </上段式のタグ> </mfrac> です。
msup 要素 (<msup> ～ </msup>)
べき乗のように、「上付き文字の数式」が必要になる場合に使用します。
表記の仕方は、<mfrac> <本体のタグ> ～ </本体のタグ> <上付き式のタグ> ～ </上付き式のタグ> </mfrac> です。
例 5 - 平方根の中に数式を含めるケース
平方根についても、専用のタグが用意されていますので、実現することは難しくはありません。
それを踏まえて、次の「標準偏差」の計算式に挑戦してみましょう。
記述内容 (MathML)
<math>
<mi>σ</mi><mo>=</mo>
<msqrt>
<mfrac>
<mrow>
<munderover>
<mi>∑</mi>
<mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>n</mi>
</munderover>
<msup>
<mrow>
<mo>(</mo>
<msub><mi>x</mi><mi>i</mi></msub>
<mo>−</mo>
<mover><mi>x</mi><mo>_</mo></mover>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
</mrow>
<mi>n</mi>
</mfrac>
</msqrt>
</math>
新規タグの説明
msqrt 要素 (<msqrt> ～ </msqrt>)
平方根の中に数式を含めたい場合に使用します。
msub 要素 (<msub> ～ </msub>)
msup 要素とは逆に、「下付き文字の数式」にしたい場合に使用します。
使い方は msub 要素と同じですので、割愛します。
mover 要素 (<mover> ～ </mover>)
平均を意味するバー「_」記号のように、数式の「上」に小さな式を付ける場合に使用します。
使い方は msub, msup 要素と同じく、上に付けたいものを 2 番目のタグとして指定します。
おわりに
本記事では、MathML という Web での標準化が進行している「世界で通用する立派な標準規格」を使用して、Windows 標準のブラウザである Microsoft Edge でも数式が描画できることを、いくつかの実例とともに紹介しました。
この手のプログラミングに近い記述方法は、苦手意識のある方も多いと思いますが、Math Input Panel のような Windows 独自ツールは「バージョンアップ等で廃止されやすい」欠点が存在します。(実際に Windows 11 で標準からは消失しました…)
一方、MathML は、Windows 以外のあらゆる環境で使われることも想定された標準規格ですから、その将来性や信頼性、安定性は明らかに Windows 独自ツールよりも上です。
マウスで数式を描くことのできるツールに比べると敷居は上ですが、世界的な標準規格である以上、MathML は「腐りにくい」技術ですので、本記事をきっかけに MathML に挑戦していけば、将来きっと役に立つでしょう。