Web Programming

この記事では「Web Programming」について、基本の意味と使い方を初心者向けにやさしく説明します。

MathML is an XML-based markup language designed to semantically describe mathematical expressions and render them in a scalable and accessible manner on web browsers.

MathML

MathMLとは？

MathML（Mathematical Markup Language）は、数式を構造的かつセマンティック（意味的）に記述できるXMLベースのマークアップ言語です。数式を画像として扱うのではなく、ブラウザが直接数式の構造を理解し、フォント調整や拡大縮小、アクセシビリティ支援などに優れた柔軟な表示が可能になるのが大きな特徴です。

MathMLの利点

アクセシビリティの向上: スクリーンリーダーによる読み上げや、キーボード操作でのナビゲーションに適しているため、視覚障害などを持つユーザーにも優しい。
表示の最適化: 文字サイズを拡大縮小しても、数式をクリアに表示できる。画像の解像度に依存しない。
セマンティック情報の活用: MathMLでマークアップされた数式は、機械的に内容を解釈しやすいため、将来的に自動処理や検索などの応用がしやすい。

ブラウザ対応状況

MathMLは、Web標準の一部として策定されていますが、ブラウザごとに対応状況に違いがあります。主要ブラウザの多くが基本的なプレゼンテーションMathMLのレンダリングに対応しつつありますが、完全対応という段階ではないブラウザも存在します。

Firefox: 比較的充実したMathMLのネイティブサポートを提供しています。
Safari: 基本的なMathMLサポートがあり、バージョンによって差がありますが段階的に改善されています。
Chrome / Edge: 長らくネイティブでMathMLに対応していませんでしたが、徐々にサポートが進められています（※現状ではフラグを有効にして実験的に使える場合もあり）。
MathJaxやKaTeXなどのライブラリ: ブラウザの対応状況に依存せず数式を描画するためのJavaScriptライブラリ。MathMLだけでなくTeX入力にも対応しているため、ブラウザサポートが不十分な場合にも有効。

したがって、MathMLを直接利用するか、MathJaxなどのライブラリに依存するかは、プロジェクトの要件やターゲットとなるユーザーのブラウザ環境によって判断するとよいでしょう。

MathMLの構造

MathMLには大きく分けてプレゼンテーション（Presentation）MathMLとコンテント（Content）MathMLの2種類があります。

プレゼンテーションMathML: 数式をどのように見た目として表示するかを定義するためのタグ群です。; 例 : <mfrac>（分数）、<msup>（上付き）、<msub>（下付き）など
コンテントMathML: 数式が持つ**意味論（セマンティクス）**を記述するためのタグ群です。計算処理や音声合成との相性がよい一方で、ブラウザでのレンダリングには対応していない（あるいは限定的）場合が多く、一般的にはプレゼンテーションMathMLがWeb表示で中心的に使われます。

本記事では、主にプレゼンテーションMathMLを中心に解説します。

プレゼンテーションMathMLの基本タグ

MathMLで数式を記述する際は、原則として<math>要素がルート要素になります。その中に、数式の部品を意味するさまざまな要素を入れていくイメージです。

基本的な書き方

HTML

<!-- インライン表示: テキストの途中に数式を混ぜたい場合 -->
<p>これはインライン表示の例：<math>
	<mi>x</mi><mo>+</mo><mi>y</mi><mo>=</mo><mn>10</mn>
</math>です。</p>

<!-- ブロック表示: 数式を大きく目立たせたい場合 -->
<math display="block">
	<mi>F</mi><mo>=</mo><mi>m</mi><mo>×</mo><mi>a</mi>
</math>

これはインライン表示の例： $x + y = 10$ です。

F = m \times a

<mi> (Math Identifier): 変数や関数名などの単独要素（通常はイタリック体）。
<mo> (Math Operator): 演算子や区切り記号など（+, -, =, (, )など）。
<mn> (Math Number): 数値を表現。

分数 : `<mfrac>`

HTML

<math display="block">
	<mfrac>
		<mi>a</mi>
		<mi>b</mi>
	</mfrac>
</math>

\frac{a}{b}

分子と分母を縦に並べた形で表示されます。

上付き・下付き・上下同時

<msup>: 上付き（累乗など）
<msub>: 下付き（添字など）
<msubsup>: 上下付き両方（例：第 n+1 項など）

HTML

<!-- a^2 -->
<math display="block">
	<msup>
		<mi>a</mi>
		<mn>2</mn>
	</msup>
</math>
<!-- x の n+1 乗 -->
<math display="block">
	<msup>
		<mi>x</mi>
		<mrow>
			<mi>n</mi><mo>+</mo><mn>1</mn>
		</mrow>
	</msup>
</math>
<!-- a の添字 i と上付き j -->
<math display="block">
	<msubsup>
		<mi>a</mi>
		<mi>i</mi>
		<mi>j</mi>
	</msubsup>
</math>

a^{2}

x^{n + 1}

a_{i}^{j}

ルート・平方根 : `<msqrt>`および `<mroot>`

HTML

<!-- 平方根 -->
<math display="block">
	<msqrt>
		<mrow>
			<mi>x</mi><mo>+</mo><mn>1</mn>
		</mrow>
	</msqrt>
</math>
<!-- n乗根 -->
<math display="block">
	<mroot>
		<mi>y</mi>
		<mn>3</mn>
	</mroot>
</math>

\sqrt{x + 1}

\sqrt[3]{y}

括弧の自動拡大: `<mo stretchy="true">`

括弧や積分記号などを自動的に大きくしたい場合、stretchy="true"を利用すると便利です。

HTML

<math display="block">
	<mo stretchy="true">(</mo>
	<mfrac>
		<mi>a</mi>
		<mi>b</mi>
	</mfrac>
	<mo stretchy="true">)</mo>
</math>

(\frac{a}{b})

具体例：連立方程式をMathMLで書く

MathMLの様々な要素を組み合わせると、複雑な数式表現も可能です。次の例では、<mo stretchy="true">を使って連立方程式の中カッコを表現しています。

HTML

<math display="block">
	<mo stretchy="true">{</mo>
	<mtable>
		<mtr>
			<mtd>
				<mrow>
					<mi>x</mi>
					<mo>+</mo>
					<mi>y</mi>
					<mo>=</mo>
					<mn>2</mn>
				</mrow>
			</mtd>
		</mtr>
		<mtr>
			<mtd>
				<mrow>
					<mi>x</mi>
					<mo>−</mo>
					<mi>y</mi>
					<mo>=</mo>
					<mn>0</mn>
				</mrow>
			</mtd>
		</mtr>
	</mtable>
</math>

{\begin{matrix} x + y = 2 \\ x - y = 0 \end{matrix}

上記の例では、<mtable>と<mtr>、<mtd>を用いて行列やシステム（式の集まり）を表現しています。

中級者以上向け：さらに踏み込んだ話題

MathMLとCSSの連携

MathMLの要素には、通常のHTML要素と同様にCSSを適用できます。例えばフォントサイズや色の指定を行うには、mstyle要素や外部CSSを利用する方法があります。

HTML

<!-- mstyle要素でまとめてスタイルを指定 -->
<math display="block">
	<mstyle mathsize="1.2em" color="blue">
		<mi>x</mi><mo>+</mo><mi>y</mi><mo>=</mo><mn>10</mn>
	</mstyle>
</math>

x + y = 10

mstyle要素以外にも、通常のCSSセレクタを利用して、たとえば mi { color: red; } のように記述することも可能です。

MathMLとAccessibility（アクセシビリティ）

MathMLは、スクリーンリーダーによる数式の読み上げなどアクセシビリティ面で大きな利点があります。例えば、<semantics>要素と<annotation>要素を使うことで、テキスト版や別のフォーマットを併記できます。

HTML

<math>
	<semantics>
		<mrow>
			<mi>x</mi><mo>+</mo><mi>y</mi>
		</mrow>
		<annotation encoding="application/x-tex">x + y</annotation>
	</semantics>
</math>

x + y

これにより、支援技術が適切に数式を解釈できる可能性が高まります。

Content MathMLの活用

Content MathMLは、数学的な意味を厳密に表現できるため、コンピュータ代数システムや音声読み上げと組み合わせると威力を発揮します。以下は二変数の加算を表す簡単な例です。

HTML

<math xmlns="http://www.w3.org/1998/Math/MathML">
	<apply>
		<plus/>
		<ci>x</ci>
		<ci>y</ci>
	</apply>
</math>

x y

しかし、現状のWebブラウザではContent MathMLを直接表示するケースは少ないため、純粋にレンダリングが目的の場合はプレゼンテーションMathMLを利用するのが一般的です。

数式の変換（TeX⇔MathML）

すでにLaTeX記法で数式を大量に用意している場合は、変換ツール（たとえば pandoc や latexml、オンラインコンバータなど）を使うと、LaTeXからMathMLに変換できます。逆にMathMLをTeXに変換するツールも存在します。

大規模サイトでの運用

MathMLを直接書く場合は、数式が複雑になるとXMLのネストが深くなるため、可読性が落ちることがあります。そのため、大規模なサイトや研究成果の公開では、TeX入力 + JavaScriptライブラリ（MathJax, KaTeX, etc.）を使って、ブラウザ上で動的にMathMLへ変換・レンダリングする方法がよく採用されます。

MathJaxやKaTeXは、MathMLだけでなくHTML/CSSによるレンダリングにも対応しており、ブラウザのネイティブサポートに依存しないというメリットがあります。

トラブルシューティングとベストプラクティス

ブラウザによる崩れや非対応: 重要なページの場合は、MathMLを直接使いつつも、必要に応じてMathJax等をフォールバックとして使う。; 新しいブラウザでは徐々に改善されているが、ユーザー層を考慮して検討する。
可読性とメンテナンス性: 手書きでMathMLを記述すると、かえって混乱する場合がある。テンプレートエンジンを活用するか、LaTeXのようなより書きやすい言語で下書きして変換するなどの工夫をおすすめ。
アクセシビリティ対応: <semantics> や <annotation> 要素を活用すると、スクリーンリーダーなどへの対応を強化できる。; 適切なタグ選択（演算子は <mo>、変数は <mi> など）をしっかり行うことで、数式の意味を正しく伝えられる。
パフォーマンス: 複雑な数式が大量にある場合、MathJaxやKaTeXを一度に大量ロードすると描画パフォーマンスに影響が出る場合がある。オンデマンド読み込みやページ分割などの対策が必要。
MathMLのバージョン: MathMLにもバージョンがあり、新しい仕様や拡張が追加される場合があります。利用環境のブラウザがどの程度まで対応しているかを確認することが大切です。

まとめ

MathMLは、数学的な表現を意味を失わずに記述でき、アクセシビリティや検索性、拡大縮小時の品質保持など多くの利点をもたらします。一方で、まだ完全ではないブラウザ対応や、XMLベースのため学習・記述コストが高いといった懸念点も存在します。

初心者の方は、まずはプレゼンテーションMathMLの基本タグ（<mi>, <mo>, <mn>, <mfrac>, <msup> など）を使って単純な数式を表示するところから始めましょう。
中級者以上の方は、アクセシビリティやコンテンツMathML、テクスチャ変換、JavaScriptライブラリとの使い分け、パフォーマンス最適化などを検討してみてください。

MathMLは今後も標準化が進むと期待されている領域です。プロジェクトや研究内容に応じて、ネイティブMathMLの活用やMathJax等との併用を検討し、よりアクセシブルで豊かな数式表現をWeb上で実現していきましょう。

Web Programming

MathML

MathMLとは？

MathMLの利点

ブラウザ対応状況

MathMLの構造

プレゼンテーションMathMLの基本タグ

基本的な書き方

分数 : <mfrac>

上付き・下付き・上下同時

ルート・平方根 : <msqrt>および <mroot>

括弧の自動拡大: <mo stretchy="true">

具体例：連立方程式をMathMLで書く

中級者以上向け：さらに踏み込んだ話題

MathMLとCSSの連携

MathMLとAccessibility（アクセシビリティ）

Content MathMLの活用

数式の変換（TeX⇔MathML）

大規模サイトでの運用

トラブルシューティングとベストプラクティス

まとめ

分数 : `<mfrac>`

ルート・平方根 : `<msqrt>`および `<mroot>`

括弧の自動拡大: `<mo stretchy="true">`