Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web/MathML/Authoring 他6件を更新 #25511

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+209 −322
Open

Web/MathML/Authoring 他6件を更新 #25511

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions files/ja/web/mathml/authoring/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: MathML の記述
slug: Web/MathML/Authoring
l10n:
sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---

{{MathMLRef}}
Expand All @@ -22,10 +22,10 @@ MathML の数式がオーサリングツールで生成されるとしても、
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>MathML in HTML5</title>
<title>MathML in HTML</title>
</head>
<body>
<h1>MathML in HTML5</h1>
<h1>MathML in HTML</h1>

<p>
One over square root of two (inline style):
Expand Down Expand Up @@ -68,7 +68,7 @@ MathML に対応していないブラウザーに対しては、代替機構を
<script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>
```

ただ、もっと高度な表現も使いたいという場合にはもう少し大きい [MathJax](https://www.mathjax.org) ライブラリーを用いると良いでしょう。
ただ、もっと高度な表現も使いたいという場合にはもう少し大きい [MathJax](https://www.mathjax.org/) ライブラリーを用いると良いでしょう。

```html
<script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>
Expand All @@ -85,7 +85,7 @@ MathML に対応していないブラウザーに対しては、代替機構を

#### 数学記号用のフォント

[MathML フォント](/ja/docs/Web/MathML/Fonts)の記事で説明したように、数学フォントは MathML コンテンツをレンダリングするのに役立ちます。そのため、[そのようなフォントのインストール手順](/ja/docs/Web/MathML/Fonts#インストール手順)を共有したり、[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)として指定されたフォントを提供することは常によい考えです。
[MathML フォント](/ja/docs/Web/MathML/Fonts)の記事で説明したように、数学フォントは MathML コンテンツをレンダリングするのに役立ちます。そのため、[そのようなフォントのインストール手順](/ja/docs/Web/MathML/Fonts#インストール手順)を共有したり、[ウェブフォント](/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts)として指定されたフォントを提供することは常によい考えです。

[MathFonts ページ](https://fred-wang.github.io/MathFonts/)は、そのようなウェブフォントを適切なスタイルシートとともに提供しています。例えば、以下の行を文書内のヘッダーに挿入するだけで、フォールバックのウェブフォントとともに現代の欧文フォントを選択することができます。

Expand Down Expand Up @@ -141,7 +141,7 @@ MathML に対応していないブラウザーに対しては、代替機構を
</html>
```

LaTeXに慣れない場合は、 [ASCIIMath](http://asciimath.org/#syntax) や [jqMath](https://mathscribe.com/author/jqmath.html) などの構文も利用できます。 JavaScript ライブラリーを読み込んで、適切な区切り文字を使用してください。
LaTeXに慣れない場合は、 [ASCIIMath](https://asciimath.org/#syntax) や [jqMath](https://mathscribe.com/author/jqmath.html) などの構文も利用できます。 JavaScript ライブラリーを読み込んで、適切な区切り文字を使用してください。

```html
<!doctype html>
Expand Down Expand Up @@ -199,7 +199,7 @@ cat input.html | node TeXZilla.js streamfilter > output.html
このコマンドを実行すると、以下の HTML 出力を格納したファイル `output.html` が作成されます。ドルで区切られた数式は MathML に変換されています。

```html-nolint
<!DOCTYPE html>
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
Expand All @@ -210,12 +210,12 @@ cat input.html | node TeXZilla.js streamfilter > output.html

<p>
One over square root of two (inline style):
<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
<math><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
</p>

<p>
One over square root of two (display style):
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
<math display="block"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
</p>
</body>
</html>
Expand All @@ -236,7 +236,7 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa
```

> [!NOTE]
> コマンドラインツールはサーバー側で使用することができます。例えば、 [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) は [Mathoid](https://github.com/wikimedia/mathoid) を介して LaTeX から MathML への変換を行います。
> コマンドラインツールはサーバー側で使用することができます。例えば、 [MediaWiki](https://www.mediawiki.org/wiki/MediaWiki) は [Mathoid](https://github.com/wikimedia/mediawiki-services-mathoid) を介して LaTeX から MathML への変換を行います。

## グラフィカルインターフェイス

Expand Down Expand Up @@ -271,6 +271,6 @@ latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpa

## 光学文字認識・手書き文字認識

数学を入力する最後のオプションは、[光学式文字認識](https://ja.wikipedia.org/wiki/光学文字認識)や[手書き文字認識](https://ja.wikipedia.org/wiki/手書き文字認識)のユーザーインターフェイスによるものです。これらのツールのいくつかは数式に対応しており、 MathML としてエクスポートすることができます。以下のスクリーンショットは [MyScript のデモ](https://webdemo.myscript.com/views/math/index.html)を示しています。
数学を入力する最後のオプションは、[光学式文字認識 (OCR)](https://ja.wikipedia.org/wiki/光学文字認識) や[手書き文字認識](https://ja.wikipedia.org/wiki/手書き文字認識)のユーザーインターフェイスによるものです。これらのツールのいくつかは数式に対応しており、 MathML としてエクスポートすることができます。以下のスクリーンショットは [MyScript のデモ](https://webdemo.myscript.com/views/math/index.html)を示しています。

![MyScript](myscript.png)
252 changes: 130 additions & 122 deletions files/ja/web/mathml/guides/fractions_and_roots/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,19 @@
---
title: MathML 分数と根号
slug: Web/MathML/Guides/Fractions_and_roots
original_slug: Learn/MathML/First_steps/Fractions_and_roots
l10n:
sourceCommit: 4bddde3e2b86234eb4594809082873fc5bf00ee3
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---

{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps")}}
{{MathMLRef}}

この記事では、テキストコンテナーを利用して、分数や根号を入れ子にしてより複雑な MathML 式を構築する方法を説明します。
{{PreviousMenuNext("Web/MathML/Guides/Text_containers", "Web/MathML/Guides/Scripts", "Web/MathML/Guides")}}

<table>
<tbody>
<tr>
<th scope="row">前提知識:</th>
<td>
<a
href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software"
>基本的なソフトウェアがインストールされていること</a
>、
<a
href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files"
>ファイルでの作業</a
>に関する基本的な知識、 HTML の基本（
<a href="/ja/docs/Learn/HTML/Introduction_to_HTML"
>HTML 入門</a
>を学ぶこと）
</td>
</tr>
<tr>
<th scope="row">目標:</th>
<td>
分数や平方根を書くのに用いる MathML 要素を習得すること。
</td>
</tr>
</tbody>
</table>
この記事では、テキストコンテナーを利用して、分数や根号を入れ子にしてより複雑な MathML 式を構築する方法を説明します。

## \<mfrac>, \<msqrt>, \<mroot> のサブツリー

[MathML を始めよう](/ja/docs/Learn/MathML/First_steps/Getting_started)の記事で、分数を記述するための `<mfrac>` 要素をすでに紹介しました。ここでは、根号を表す新しい要素（`<msqrt>` と `<mroot>`）を追加した基本的な例を考えてみましょう。
[MathML を始めよう](/ja/docs/Web/MathML/Guides/Getting_started)の記事で、分数を記述するための `<mfrac>` 要素をすでに紹介しました。ここでは、根号を表す新しい要素（`<msqrt>` と `<mroot>`）を追加した基本的な例を考えてみましょう。

```html
<math>
Expand Down Expand Up @@ -71,106 +45,140 @@ l10n:
![mfrac, msqrt, mroot のスクリーンショット](mfrac-msqrt-mroot.png)

- すでに `<mfrac>` 要素が分数として描画されることは知っていますね。最初の子要素（分子）は横棒で区切られた 2 つ目の子要素（分母）の上に描画されます。
- `<msqrt>`は平方根としてレンダリングされます。子要素は [`<mrow>`](/ja/docs/Learn/MathML/First_steps/Getting_started#mrow_要素でのグループ化) のように並べられ、ルート記号 √ が先頭に付き、完全に上付き線で覆われます。
- `<msqrt>`は平方根としてレンダリングされます。子要素は [`<mrow>`](/ja/docs/Web/MathML/Guides/Getting_started#mrow_要素でのグループ化) のように並べられ、ルート記号 √ が先頭に付き、完全に上付き線で覆われます。
- 最後に、 `<mroot>` 要素は n 乗根としてレンダリングされます。最初の要素は根号に覆われ、 2 つ目の要素はルートの次数として使用され、前置上付き文字としてレンダリングされます。

### アクティブラーニング: 異なる要素を入れ子にする

MathML のサブツリーとその視覚的レンダリングとの関連を理解したかどうかを確認するための単純な練習です。この文書には MathML の数式が格納されており、その MathML の数式内のサブツリーに対応するすべてのサブツリーを調べる必要があります。それが終わったら、MathML 式のソースを検査し、それがあなたの予想と一致しているかどうかを確認することができます。

```html hidden
<!DOCTYPE html>
<html lang="en-US">
```html-nolint hidden
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>数式記号のあるマイページ</title>
<link rel="stylesheet" href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css">
<link
rel="stylesheet"
href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
</head>
<body>
<p>
<math>
<mfrac id="mfrac1">
<msqrt id="msqrt1">
<mn>2</mn>
</msqrt>
<mroot id="mroot1">
<mn>4</mn>
<mn>3</mn>
</mroot>
</mfrac>
<mo>+</mo>
<mroot id="mroot2">
<mn>5</mn>
<mfrac id="mfrac2">
<mn>6</mn>
<mn>7</mn>
</mfrac>
</mroot>
<mo>+</mo>
<msqrt id="msqrt2">
<mn>8</mn>
<mo>−</mo>
<mn>9</mn>
</msqrt>
</p>

<ol id="options">
<li>
<input type="checkbox" data-comment="mfrac の子の順序を確認してください。">
mfrac に mroot が 1 番目の子として、 msqrt が 2 番目の子として入っている。
</li>
<li>
<input type="checkbox" data-highlight="mroot2" data-comment="5 の「7 分の 6」乗根です。">
mroot に mn が 1 番目の子として、 mfrac が 2 番目の子として入っている。
</li>
<li>
<input type="checkbox" data-comment="この数式には、平方根の中に分数が入っているものはありません。">
msqrt に mfrac 要素が入っている。
</li>
<li>
<input type="checkbox" data-comment="2 の平方根です。" data-highlight="msqrt1">
msqrt に 1 つの mn の子がある。
<p>
<math>
<mfrac id="mfrac1">
<msqrt id="msqrt1">
<mn>2</mn>
</msqrt>
<mroot id="mroot1">
<mn>4</mn>
<mn>3</mn>
</mroot>
</mfrac>
<mo>+</mo>
<mroot id="mroot2">
<mn>5</mn>
<mfrac id="mfrac2">
<mn>6</mn>
<mn>7</mn>
</mfrac>
</mroot>
<mo>+</mo>
<msqrt id="msqrt2">
<mn>8</mn>
<mo>−</mo>
<mn>9</mn>
</msqrt>
</math>
</p>

<ol id="options">
<li>
<input
type="checkbox"
data-comment="mfrac の子の順序を確認してください。" />
mfrac に mroot が 1 番目の子として、 msqrt が 2 番目の子として入っている。
</li>
<li>
<input
type="checkbox"
data-highlight="mroot2"
data-comment="5 の「7 分の 6」乗根です。" />
mroot に mn が 1 番目の子として、 mfrac が 2 番目の子として入っている。
</li>
<li>
<input
type="checkbox"
data-comment="この数式には、平方根の中に分数が入っているものはありません。" />
msqrt に mfrac 要素が入っている。
</li>
<li>
<input type="checkbox" data-comment="mroot の子の順序を確認してください。">
mroot に mfrac が 1 番目の子として、 mn が 2 番目の子として入っている。
</li>
<li>
<input type="checkbox" data-comment="「9 分の 8」の平方根です。" data-highlight="msqrt2">
msqrt に mn, mo, mn のリストの子がある。
</li>
<li>
<input type="checkbox" data-comment="4 の立方根分の 2 の平方根です。" data-highlight="mfrac1">
mfrac に msqrt が 1 番目の子として、 mroot が 2 番目の子として入っている。
</li>
<li>
<input type="checkbox" data-comment="mfrac には正確に 2 つの子が必要です。">
mfrac に msqrt, mn, msqrt のリストの子がある。
</li>
<li>
<input type="checkbox" data-comment="mroot には正確に 2 つの子が必要です。">
mroot に 1 つの mn の子がある。
</li>
<li>
<input type="checkbox" data-comment="7 分の 6 の分数です。" data-highlight="mfrac2">
mfrac に 2 つの mn の子がある。
</li>
<li>
<input type="checkbox" data-comment="この数式には 2 つより多いの数値を持つ平方根はありません。">
msqrt に 5 つの mn の子がある。
</li>
<li>
<input type="checkbox" data-highlight="mroot1" data-comment="4 の立方根です。">
mroot に 2 つの mn の子がある。
</li>
</ol>
<p>
<strong id="comment"></strong>
</p>
<p>
<strong id="status"></strong>
</p>
<li>
<input
type="checkbox"
data-comment="2 の平方根です。"
data-highlight="msqrt1" />
msqrt に 1 つの mn の子がある。
</li>
<li>
<input
type="checkbox"
data-comment="mroot の子の順序を確認してください。" />
mroot に mfrac が 1 番目の子として、 mn が 2 番目の子として入っている。
</li>
<li>
<input
type="checkbox"
data-comment="「9 分の 8」の平方根です。"
data-highlight="msqrt2" />
msqrt に mn, mo, mn のリストの子がある。
</li>
<li>
<input
type="checkbox"
data-comment="4 の立方根分の 2 の平方根です。"
data-highlight="mfrac1" />
mfrac に msqrt が 1 番目の子として、 mroot が 2 番目の子として入っている。
</li>
<li>
<input
type="checkbox"
data-comment="mfrac には正確に 2 つの子が必要です。">
mfrac に msqrt, mn, msqrt のリストの子がある。
</li>
<li>
<input
type="checkbox"
data-comment="mroot には正確に 2 つの子が必要です。" />
mroot に 1 つの mn の子がある。
</li>
<li>
<input
type="checkbox"
data-comment="7 分の 6 の分数です。"
data-highlight="mfrac2" />
mfrac に 2 つの mn の子がある。
</li>
<li>
<input
type="checkbox"
data-comment="この数式には 2 つより多いの数値を持つ平方根はありません。" />
msqrt に 5 つの mn の子がある。
</li>
<li>
<input
type="checkbox"
data-highlight="mroot1"
data-comment="4 の立方根です。" />
mroot に 2 つの mn の子がある。
</li>
</ol>
<p>
<strong id="comment"></strong>
</p>
<p>
<strong id="status"></strong>
</p>
</body>
</html>
```

```css hidden
Expand Down Expand Up @@ -257,7 +265,7 @@ checkboxes.forEach((checkbox) => {
{{ EmbedLiveSample('Stretchy_radical_symbols', 700, 200, "", "") }}

> [!WARNING]
> 伸縮を可能にするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が必要です。前回の例は[ウェブフォント](/ja/docs/Learn/CSS/Styling_text/Web_fonts)を使用しています。
> 伸縮を可能にするには、一般に特別な[数学フォント](/ja/docs/Web/MathML/Fonts)が必要です。前回の例は[ウェブフォント](/ja/docs/Learn_web_development/Core/Text_styling/Web_fonts)を使用しています。

## 線のない分数

Expand Down Expand Up @@ -295,12 +303,12 @@ checkboxes.forEach((checkbox) => {

## まとめ

今回は `<mfrac>`、`<msqrt>`、`<mroot>` 要素を使用して分数と根号を作る方法を見てきました。これらの要素には、分数と根号という特別な機能があることがわかりました。また、 `linethickness` 属性を使用して、分数を棒なしで描画する方法も見てきました。次の記事では、基本的な数学の記法を続け、[添字](/ja/docs/Learn/MathML/First_steps/Scripts)について考えます。

{{LearnSidebar}}{{PreviousMenuNext("Learn/MathML/First_steps/Text_containers", "Learn/MathML/First_steps/Scripts", "Learn/MathML/First_steps")}}
今回は `<mfrac>`、`<msqrt>`、`<mroot>` 要素を使用して分数と根号を作る方法を見てきました。これらの要素には、分数と根号という特別な機能があることがわかりました。また、 `linethickness` 属性を使用して、分数を棒なしで描画する方法も見てきました。次の記事では、基本的な数学の記法を続け、[添字](/ja/docs/Web/MathML/Guides/Scripts)について考えます。

## 関連情報

- [`<mfrac>` 要素](/ja/docs/Web/MathML/Element/mfrac)
- [`<msqrt>` 要素](/ja/docs/Web/MathML/Element/msqrt)
- [`<mroot>` 要素](/ja/docs/Web/MathML/Element/mroot)

{{PreviousMenuNext("Web/MathML/Guides/Text_containers", "Web/MathML/Guides/Scripts", "Web/MathML/Guides")}}
Loading
Loading