メディアコンテナーフォーマット（ファイル形式） - ウェブメディア技術

メディアコンテナーフォーマット（ファイル形式）
=======================

 音声と動画のメディアファイルの形式は、使用する音声や 動画のコーデックと、使用するメディアコンテナーの形式（またはファイル形式）の、2つの部分（もちろん、音声と動画の両方が含まれる場合は3つ）で定義されます。
 このガイドでは、ウェブで最も一般的に使用されているコンテナー形式を取り上げ、その仕様に関する基本的な事柄と、利点、制限、理想的な用途について説明します。

WebRTC は、コンテナーをまったく使用しません。
 その代わり、エンコードされた音声と動画のトラックを、1 つのピアから別のピアに直接ストリーミングし、各トラックを表すために `MediaStreamTrack` オブジェクトを使用します。
 WebRTC の呼び出しを行う際に一般的に使用されるコーデックに関する情報や、WebRTC のコーデック対応に関するブラウザーの互換性については WebRTC で使用されるコーデック (en-US)をご覧ください。

一般的なコンテナー形式
-----------

 メディアコンテナー形式は膨大な数がありますが、下記の一覧は最も目にする機会が多いものです。
 他にも音声のみに対応しているもの、音声と動画の両方に対応しているものがあります。
 それぞれの MIME 型と拡張子が掲載されています。ウェブで最も一般的に使用されるメディアのコンテナーは、MPEG-4 (MP4)、QuickTime Movie (MOV)、Wavefile Audio File Format (WAV)でしょう。
 しかし、MP3、Ogg、WebM、AVI、その他の形式にも遭遇することがあります。
 しかし、これらすべてがブラウザーで広く対応しているわけではありません。コンテナーとコーデックの組み合わせの中には、便宜上、あるいはどこにでもあるという理由で、自分自身でファイル拡張子や MIME 型を指定されるものもあります。
 例えば、 Opus の音声トラックだけを含む Ogg ファイルは、Opus ファイルと呼ばれることがあり、`.opus` という拡張子を持つこともあります。
 しかし、それは実際には単なる Ogg ファイルです。

 他にも、特定のコンテナー型に格納される特定のコーデックは、広範にわたるため、その組合せが固有の方法で扱われるケースもあります。
 この良い例が MP3 音声ファイルで、実際には、 MPEG-1 Audio Layer III エンコーディングでエンコードされた単一の音声トラックを持つ MPEG-1 コンテナーで す。
 これらのファイルは、コンテナーが単なる MPEG であるにもかかわらず、`audio/mp3` という MIME 型と `.mp3` 拡張子を使用しています。

### メディアコンテナー形式（ファイル形式）の索引

特定のコンテナー形式について詳しく知りたい場合は、この一覧からその形式を探し、クリックすると、そのコンテナーが通常何に使われるのか、どのコーデックに対応しているのか、どのブラウザーが対応しているのか、などの情報を含む詳細が表示されます。

| コーデック名（略語） | 完全なコーデック名 | ブラウザーの互換性 |
| --- | --- | --- |
| 3GP | Third Generation Partnership | Android 版 Firefox |
| ADTS | Audio Data Transport Stream | Firefox
基盤となるオペレーティングシステムのメディアフレームワークで利用できる場合のみ利用できます。 |
| FLAC | Free Lossless Audio Codec | Chrome 56, Edge 16, Firefox 51, Safari 11 |
| MPEG / MPEG-2 | Moving Picture Experts Group (1 and 2) | — |
| MPEG-4 (MP4) | Moving Picture Experts Group 4 | Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1 |
| Ogg | Ogg | Chrome 3, Firefox 3.5, Edge 17 （デスクトップのみ）, Internet Explorer 9, Opera 10.50
Edge は Web Media Extensions がインストールされている必要があります。 |
| QuickTime (MOV) | Apple QuickTime movie | 古いバージョンの Safari や、 Apple の QuickTime プラグインに対応しているその他のブラウザー |
| WebM | Web Media | Chrome 6, Edge 17 （デスクトップのみ）, Firefox 4, Opera 10.6, Safari 14.1 (macOS), Safari 15 (iOS).
Edge は Web Media Extensions がインストールされている必要があります。 |

 特に指定されない限り、ここに掲載されているブラウザーは、モバイルとデスクトップの両方のブラウザーに対応していることを意味します。
 また、特定のコーデックではなく、コンテナーそのものにのみ対応していることを意味します。

### 3GP

**3GP** または **3GPP** メディアコンテナーは、携帯端末での消費を目的とした、携帯電話ネットワーク上での伝送を特に意図した音声および/または動画をカプセル化するために使用されます。
 この書式は、 3G 携帯電話で使用するために設計されましたが、現代の携帯電話やネットワークでも使用することができます。
 しかし、ほとんどのネットワークで利用できる帯域幅が改善され、データ容量が増加したため、 3GP 形式の必要性は低下しています。
 しかし、低速のネットワークや低性能の携帯電話では、この形式がまだ使用されています。

このメディアコンテナー形式は、 ISO Base Media File Format と MPEG-4 から派生したものですが、特に低帯域シナリオ向けに効率化されています。

| 音声 | 映像 |
| --- | --- |
| `audio/3gpp` | `video/3gpp` |
| `audio/3gpp2` | `video/3gpp2` |
| `audio/3gp2` | `video/3gp2` |

 これらの MIME タイプは、3GP メディアコンテナーの基本的なタイプです。使用する特定のコーデックやコーデックによっては、他のタイプが使用されることもあります。
 さらに、MIME タイプ文字列に `codecs` 引数を追加 (en-US)して、音声トラックやビデオトラックにどのコーデックを使用しているかを示し、オプションでプロファイル、レベル、他にもコーデック構成に関する特定の詳細を提供することができます。

3GP が対応している映像コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  |  |  |
| H.263 |  |  |  |  |
| MPEG-4 Part 2 (MP4v-es) |  |  |  |  |
| VP8 |  |  |  |  |

3GP が対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AMR-NB |  |  |  |  |
| AMR-WB |  |  |  |  |
| AMR-WB+ |  |  |  |  |
| AAC-LC |  |  |  |  |
| HE-AAC v1 |  |  |  |  |
| HE-AAC v2 |  |  |  |  |
| MP3 |  |  |  |  |

### ADTS

**Audio Data Transport Stream** (**ADTS**) は、 MPEG-4 Part 3 で指定された音声データのコンテナー形式で、インターネットラジオなどのストリーミング音声に使用されることを目的としています。
 ADTS フレームと最小限のヘッダーで構成される、ほぼ素の AAC 音声データのストリームです。

| 音声 |
| --- |
| `audio/aac` |
| `audio/mpeg` |

 ADTS に使用される MIME タイプは、どのような音声フレームが含まれているかに依存します。
 もし ADTS フレームが使用された場合、`audio/aac` という MIME タイプを使用すべきです。
 もし音声フレームが MPEG-1/MPEG-2 Audio Layer I、II、III 形式であれば、 MIME タイプは `audio/mpeg` を入力する必要があります。

ADTS が対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | あり |  |
| MP3 |  |  | あり |  |

Firefox の AAC 対応は、OS のメディアインフラに依存しているため、OS が対応している限り利用することができます。

### FLAC

**Free Lossless Audio Codec (FLAC)** は可逆圧縮の音声コーデックです。この音声を格納できる、関連する単純なコンテナー形式もあり、これも FLAC と呼ばれます。
 この形式は特許に邪魔されないので、安全に使用することができます。
 FLAC ファイルは、 FLAC 音声データのみを格納することができます。

| 音声 |
| --- |
| `audio/flac` |
| `audio/x-flac` (non-standard) |

FLAC が対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| FLAC |  |  | あり |  |

### MPEG/MPEG-2

**MPEG-1** と **MPEG-2** のファイル形式は、基本的に同じものです。
 Moving Picture Experts Group (MPEG) によって作成されたこれらの書式は、 DVD メディアの動画の形式であることを含め、物理メディアで広く使用されています。

 インターネット上では、 MPEG ファイル形式の最も一般的な使用は、おそらく Layer\_III/MP3 音声データを含むことです。結果として生じるファイルは、世界中のデジタル音楽機器で使用される大人気の MP3 ファイルです。
 それ以外の MPEG-1 や MPEG-2 は、ウェブコンテンツではあまり使用されていません。

 MPEG-1 と MPEG-2 の主な違いは、コンテナー形式ではなく、メディアデータ形式にあります。
 MPEG-1 は 1992 年に登場し、 MPEG-2 は 1996 年に登場しました。

| 音声 | 映像 |
| --- | --- |
| `audio/mpeg` | `video/mpeg` |

MPEG-1 および MPEG-2 で対応している映像コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| MPEG-1 Part 2 |  |  | なし |  |
| MPEG-2 Part 2 |  |  | なし |  |

MPEG-1 および MPEG-2 で対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| MPEG-1 Audio Layer I |  |  | なし |  |
| MPEG-1 Audio Layer II |  |  | なし |  |
| MPEG-1 Audio Layer III (MP3) |  |  | あり |  |

### MPEG-4 (MP4)

**MPEG-4** (**MP4**) は、 MPEG ファイル形式の最新バージョンです。
 この形式には 2 つのバージョンがあり、仕様のパート 1 およびパート 14 で定義されています。
 MP4 は、最も使用されるコーデックのいくつかに対応し、幅広く対応しているため、現在人気のあるコンテナーです。

 元の MPEG-4 パート 1 ファイル形式は 1999 年に導入され、パート 14 で定義されたバージョン 2 フォーマットは 2003 年に追加されました。
 MP4 ファイル形式は、 ISO base media file format から派生したもので、Apple が開発した QuickTime file format から直接派生したものです。

MPEG-4 メディア形式 (`audio/mp4` または `video/mp4`) を指定するとき、MIME 形式の文字列に `codecs` 引数](/ja/docs/Web/Media/Formats/codecs\_parameter#iso-bmff)を加えて、どのコーデックが音声と映像のトラックで使われているかを示すとともに、プロファイル、レベル、その他のコーデック構成の詳細を示すことができます。

| 音声 | 映像 |
| --- | --- |
| `audio/mp4` | `video/mp4` |

 これらの MIME 型は MPEG-4 メディアコンテナーの基本的な型です。コンテナー内で使用する特定のコーデックに応じて、他の MIME タイプを使用することができます。
 さらに、MIME タイプ文字列に `codecs` 引数を追加して (en-US) 音声トラックや映像トラックにどのコーデックが使用されているかを示し、オプションでプロファイル、レベル、他にも特定のコーデックに関する詳細を提供することが可能です。

MPEG-4 で対応しているコーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | あり
Firefox の H.264 対応は、OS のメディアインフラに依存しているため、OS が対応している限り利用することができます。 |  |
| AV1 |  |  | あり
Firefox の AV1 対応は、Android ([Firefox バグ 1672276](https://bugzil.la/1672276)) と Windows on ARM では無効です （環境設定 `media.av1.enabled` を `true` に設定すると有効になります）。 |  |
| H.263 |  |  | なし |  |
| MPEG-4 Part 2 Visual |  |  | なし |  |
| VP9 |  |  | あり |  |

MPEG-4 で対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | あり
Firefox の H.264 対応は、OS のメディアインフラに依存しているため、OS が対応している限り利用することができます。 |  |
| FLAC |  |  | あり |  |
| MPEG-1 Audio Layer III (MP3) |  |  | あり |  |
| Opus |  |  | あり |  |

### Ogg

Ogg コンテナー形式は、Xiph.org Foundation によって維持されている、無料でオープンな形式です。
 Ogg フレームワークは、Theora ビデオコーデックや Vorbis、Opus 音声コーデックなど、特許を取得していないエンコードメディアデータ形式も定義しています。
 Ogg 形式に関する Xiph.org の文書は、これらのウェブサイトで利用できます。

 Ogg は長く存在してきていますが、メディアコンテナーの最初の選択肢として必要な幅広い支持を得ることはできませんでした。
 一般的には WebM を使用した方がよいのですが、WebM にまだ対応していない古いバージョンの Firefox や Chrome に対応したい場合など、Ogg を使用することが有益な時刻もあります。
 例えば、 Firefox 3.5 と 3.6 は Ogg に対応していますが、 WebM には対応していません。

Ogg とそのコーデックについては、 Theora Cookbook でより詳細な情報を取得することができます。

| 音声 | 映像 |
| --- | --- |
| `audio/ogg` | `video/ogg` |

 MIME タイプの `application/ogg` は、メディアが音声や映像を含んでいるかどうかが必ずしもわからない場合に使用することができます。
 可能な限り、特定の種類のタイプを使用すべきですが、コンテンツの形式やフォーマットがわからない場合は `application/ogg` にフォールバックしてください。

MIME タイプ文字列に `codecs` 引数を追加 (en-US)して、音声と映像のトラックにどのコーデックが使用されているかを示し、さらにオプションでトラックメディア形式を記述することも可能です。

Ogg が対応している映像コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| Theora |  |  | あり |  |
| VP8 |  |  | あり |  |
| VP9 |  |  | あり |  |

Ogg で対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| FLAC |  |  | あり |  |
| Opus |  |  | あり |  |
| Vorbis |  |  | あり |  |

### QuickTime

**QuickTime**ファイル形式（**QTFF**、**QT**、**MOV**）は、 Apple が同名のメディアフレームワークで使用するために作成されたものである。
 これらのファイルの拡張子である `.mov` は、この形式が当初ムービー用に使用され、通常 "QuickTime movie" 形式と呼ばれていたことに由来しています。
 QTFF は MPEG-4 ファイル形式の基礎となりましたが、異なる形があり、この 2 つは全く互換性がありません。

 QuickTime ファイルは、音声や映像メディア、テキストトラックなどを含む時刻ベースのデータの任意の種類をに対応しています。
 QuickTime ファイルは主に macOS で対応していますが、何年か前から、 Windows でアクセスするための QuickTime for Windows が利用できました。
 しかし、 QuickTime for Windows は 2016 年初頭の時点で Apple によって対応されておらず、セキュリティ上の懸念があることが知られているため、*使用しない方がよい*とされています。
 ただし、 Windows Media Player はこれで QuickTime バージョン 2.0 以前のファイルに統合的に対応しており、それ以降のバージョンの QuickTime に対応するにはサードパーティによる追加が必要です。

 Mac OS では、 QuickTime フレームワークは QuickTime 形式の動画ファイルおよびコーデックに対応しているだけでなく、一般的および特殊な音声および動画コーデック、さらに静止画形式にも幅広く対応しています。
 QuickTime を通じて、 Mac アプリケーション（QuickTime プラグインや QuickTime との直接統合によるウェブブラウザを含む）は、 AAC、AIFF、MP3、PCM、Qualcomm PureVoice などの音声形式、AVI、DV、Pixlet、ProRes、FLAC、Cinepak、3GP、H.261からH.265、MJPEG、MPEG-1とMPEG-4 Part 2、Sorenson などの動画形式の読み取りや書き込みを行うことができたのである。

さらに、 QuickTime 用のサードパーティ製コンポーネントも多数利用でき、その中には、追加のコーデックに対応しているものもあります。

 QuickTime のサポートは、すべてにおいて、主に Apple 製の機器で利用できるため、インターネット上では、もはやあまり使用されていません。
 Apple 社自身も、これで一般的に動画に MP4 を使用するようになった。
 さらに、 QuickTime フレームワークは、しばらくの間、Macでは非推奨となっており、macOS 10.15 Catalina からは、まったく利用できなくなりました。

| 映像 |
| --- |
| `video/quicktime` |

`video/quicktime` の MIME タイプは、 QuickTime メディアコンテナーを入力するための基本的な型です。
 QuickTime (Mac OS 上のメディアフレームワーク) はさまざまなコンテナとコーデックに対応、実際には他の多くの MIME タイプをサポートしていることはメモしておく価値があります。

MIME タイプ文字列に `codecs` 引数を追加 (en-US) して、音声トラックやビデオトラックにどのコーデックを使用するかを指定したり、プロファイル、レベル、その他コーデック構成の詳細に関するオプションを提供したりすることが可能です。

QuickTime で対応している動画コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AVC (H.264) |  |  | なし |  |
| Cinepak |  |  | なし |  |
| Component Video |  |  | なし |  |
| DV |  |  | なし |  |
| H.261 |  |  | なし |  |
| H.263 |  |  | なし |  |
| MPEG-2 |  |  | なし |  |
| MPEG-4 Part 2 Visual |  |  | なし |  |
| Motion JPEG |  |  | なし |  |
| Sorenson Video 2 |  |  | なし |  |
| Sorenson Video 3 |  |  | なし |  |

QuickTime で対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AAC |  |  | なし |  |
| ALaw 2:1 |  |  | なし |  |
| Apple Lossless (ALAC) |  |  | なし |  |
| HE-AAC |  |  | なし |  |
| MPEG-1 Audio Layer III (MP3) |  |  | なし |  |
| Microsoft ADPCM |  |  | なし |  |
| µ-Law 2:1 (u-Law) |  |  | なし |  |

### WAVE (WAV)

**Waveform Audio File Format** (**WAVE**) は、マイクロソフトと IBM によって開発された音声ビットストリームデータを格納するための形式です（ファイル名の拡張子が `.wav` なので通常 WAV と呼ばれます）。

 これは RIFF (Resource Interchange File Format) から派生したもので、 Apple の AIFF など、他の形式と似ています。
 WAV コーデックのレジストリーは RFC 2361 にあります。しかし、ほぼすべての WAV ファイルがリニア PCM を使用しているため、他のコーデックが対応するのはまれです。

WAVE 形式は 1991 年に最初にリリースされました。

| 音声 |
| --- |
| `audio/wave` |
| `audio/wav` |
| `audio/x-wav` |
| `audio/x-pn-wav` |

MIME タイプは `audio/wave` が標準的なタイプで、これが推奨されます。しかし、他にも長年にわたって様々な製品で使用されており、環境によっては同じように使用することができるでしょう。

WAVE で対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| ADPCM (Adaptive Differential Pulse Code Modulation) |  |  | なし |  |
| GSM 06.10 |  |  | なし |  |
| LPCM (Linear Pulse Code Modulation) |  |  | あり |  |
| MPEG-1 Audio Layer III (MP3) |  |  | なし |  |
| µ-Law (u-Law) |  |  | なし |  |

### WebM

**WebM** (**Web Media**) は Matroska をベースにした形式で、現代のウェブ環境で使用するために特別に設計されたものです。
 完全にフリーでオープンな技術に基づいており、主にフリーでオープンなコーデックを使用しますが、 WebM コンテナーで他のコーデックに対応している製品もあります。

 WebM は 2010 年に初めて導入され、今では広く対応しています。
 WebM に準拠した実装を行うためには、 VP8 および VP9 動画コーデック、 Vorbis および Opus 音声コーデックに対応する必要があります。
 WebM コンテナー形式とそれに必要なコーデックは、すべてオープンライセンスで利用できます。
 他のコーデックを使用する場合は、ライセンスが必要になることがあります。

| 音声 | 映像 |
| --- | --- |
| `audio/webm` | `video/webm` |

WebM で対応している動画コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| AV1 | あり | あり | あり

 Firefox の AV1 対応は、macOS では Firefox 66 で、 Windows では Firefox 67 で、Linux では Firefox 68 で追加されました。
 Android 版 Firefox はまだ AV1 に対応していません。 Firefox の実装はセキュアプロセスを使用するように設計されていますが、 Android ではまだ使用されていません。
  | あり |
| VP8 | あり | あり | あり | あり |
| VP9 | あり | あり | あり | あり |

WebM で対応している音声コーデック| コーデック | ブラウザーの対応 |
| --- | --- |
| Chrome | Edge | Firefox | Safari |
| Opus | あり | あり | あり | あり |
| Vorbis | あり | あり | あり | あり |

正しいコンテナーの選択
-----------

 メディアに使用する最適なコンテナーを選択する際、考慮すべき要素がいくつかあります。
 それぞれの相対的な重要性は、ニーズ、ライセンス要件、対象となる視聴者の互換性要件に依存します。

### ガイドライン

 最適な選択は、メディアを使って何をするのかにもよります。
 メディアを再生することと、記録や編集をすることは異なることです。
 メディアデータを操作する場合は、非圧縮形式を使用するとパフォーマンスが向上します。一方、可逆圧縮形式を使用すると、少なくとも圧縮時のノイズが再圧縮のたびに増幅されるのを防ぐことができます。

* ターゲットにモバイル端末や低速ネットワークのユーザーが含まれる場合は、適切な圧縮を施した 3GP コンテナーでメディアのバージョンを提供することを検討してください。
* 特定のエンコーディングの要件がある場合は、選んだコンテナーが適切なコーデックに対応していることを確認してください。
* メディアを独占的でないオープンな形式にしたい場合は、 FLAC （音声）や WebM （動画）など、オープンコンテナー形式のいずれかを使用することを検討してください。
* 何らかの理由でメディアを単一の形式でしか提供できない場合は、 MP3 （音声用）や MP4 （動画と音声用）など、最も幅広い機器やブラウザーで利用できる形式を選んでください。
* メディアが音声のみの場合、音声のみのコンテナー形式を選ぶことは、おそらく理にかなっています。
 特許がすべて失効しているこれで、 MP3 は広く対応しており、良い選択です。
 WAVE は良いですが、非圧縮なので、大きな音声サンプルに使用する前に、その点に注意してください。
 対象となるブラウザーがすべて対応していれば、可逆圧縮のため、 FLAC はとても良い選択です。

 残念ながら、比較的メジャーな可逆圧縮形式（FLACとALAC）のどちらも、広く普及しているわけではありません。
 FLAC は 2 つのうちより広く対応されていますが、追加のソフトウェアをインストールしないと macOS では対応していませんし、 iOS ではまったく対応していません。
 ロスレス音声を提供する必要がある場合、普遍的な互換性に近づけるために、 FLAC と ALAC の両方を提供する必要がある場合があります。

### コンテナー選択のアドバイス

 下記の表は、様々なシナリオで使用するコンテナーとして提案されているものです。
 これらはあくまで提案です。
 コンテナー形式を選択する前に、必ずアプリケーションと組織のニーズを考慮してください。

#### 音声のみのファイル

| ニーズ | このコンテナー形式の使用を検討してください |
| --- | --- |
| 汎用的な再生に適した圧縮ファイル | MP3 (MPEG-1 Audio Layer III) |
| 可逆圧縮ファイル | FLAC に ALAC のフォールバック |
| 非圧縮ファイル | WAV |

 MP3 の特許がすべて切れたことで、音声ファイルの形式を選択することが非常に容易になりました。
 MP3 の幅広い互換性と、使用する際に支払うべきロイヤリティのどちらかを選ぶ必要はなくなりました。

#### 動画ファイル

| ニーズ | このコンテナー形式の使用を検討してください |
| --- | --- |
| 汎用性ある動画、できればオープンな形式のもの | WebM (できれば MP4 のフォールバック) |
| 汎用的な動画 | MP4 (できれば WebM または Ogg のフォールバック) |
| 低速回線に最適化した高圧縮 | 3GP (できれば MP4 フォールバック) |
| 古い端末/ブラウザーへの対応について | QuickTime (できれば AVI や MPEG-2 のフォールバック) |

 これらの提案には、いくつかの前提があります。
 特にエンコードが必要なメディアを多く保有している場合は、最終的な決断を下す前にオプションを慎重に検討する必要があります。

複数のコンテナーへの互換性を最大限に高める
---------------------

 互換性を最適化するために、 `<source>` 要素を使って `<audio>` または `<video>` 要素内でそれぞれのソースを指定し、複数のバージョンのメディアファイルを提供することを考慮する価値はあります。
 例えば、 Ogg や WebM の動画を最初の選択肢として提供し、フォールバックとして MP4 形式の動画を提供することができます。
 さらに、レトロな QuickTime や AVI をフォールバックとして提供することもできます。

 これを行うには、 `src` 属性のない `<video>` （または `<audio>`）要素を作成します。
 そして、`<video>` 要素の中に、提供する動画のバージョンごとに子要素である `<source>` を追加します。
 これは、帯域幅の利用可能性に応じて選択できるさまざまなバージョンの動画を提供するために使用できますが、私たちの場合は、形式オプションを提供するために使用することにします。

ここに示す例では、動画が 2 つの形式でブラウザーに提供されています。 WebM と MP4 です。

試してみましょう
--------

 動画は最初に WebM 形式で提供されます（`type` 属性に `video/webm` を設定した場合）。
 もし user agent がそれを再生できなければ、`type` が `video/mp4` に指定された次のオプションに移動します。
 どちらも再生できない場合、"This browser does not support the HTML video element." というテキストが表示されます。

仕様書
---

| 仕様書 | コメント |
| --- | --- |
| ETSI 3GPP | 3GP コンテナー形式を定義 |
| ISO/IEC 14496-3 (MPEG-4 Part 3 Audio) | ADTS を含む MP4 音声を定義 |
| FLAC Format | FLAC 形式の仕様書 |
| ISO/IEC 11172-1 (MPEG-1 Part 1 Systems) | MPEG-1 コンテナー形式を定義 |
| ISO/IEC 13818-1 (MPEG-2 Part 1 Systems) | MPEG-2 コンテナー形式を定義 |
| ISO/IEC 14496-14 (MPEG-4 Part 14: MP4 file format) | MPEG-4 (MP4) version 2 コンテナー形式を定義 |
| ISO/IEC 14496-1 (MPEG-4 Part 1 Systems) | 元の MPEG-4 (MP4) コンテナー形式を定義 |
| RFC 3533 | Ogg コンテナー形式を定義 |
| RFC 5334 | Ogg メディア型とファイル拡張子を定義 |
| QuickTime File Format Specification | QuickTime movie (MOV) 形式を定義 |
| Multimedia Programming Interface and Data Specifications 1.0 | WAVE 公式仕様に最も近いもの |
| Resource Interchange File Format (used by WAV) | RIFF 形式を定義、 WAVE ファイルは RIFF 形式です |
| WebM Container Guidelines | Matroska を WebM に適応させるためのガイド |
| Matroska Specifications | WebM のベースとなる Matroska コンテナー形式の仕様書 |
| WebM Byte Stream Format | メディアソース拡張機能で使用するための WebM バイトストリーム形式 |

ブラウザーの互換性
---------

| コンテナー形式名 | 音声 | 映像 |
| --- | --- | --- |
| MIME タイプ | 拡張子 | ブラウザーの対応 | MIME タイプ | 拡張子 | ブラウザーの対応 |
| 3GP | `audio/3gpp` | `.3gp` | Firefox | `video/3gpp` | `.3gp` | Firefox |
| ADTS (Audio Data Transport Stream) | `audio/aac` | `.aac` | Firefox | — | — | — |
| FLAC | `audio/flac` | `.flac` | Firefox | — | — | — |
| MPEG-1 / MPEG-2 (MPG or MPEG) | `audio/mpeg` | `.mpg``.mpeg` | Firefox | `video/mpeg` | `.mpg``.mpeg` | Firefox |
| `audio/mp3` | `.mp3` | Firefox |
| MPEG-4 (MP4) | `audio/mp4` | `.mp4``.m4a` | Firefox | `video/mp4` | `.mp4``.m4v``.m4p` | Firefox |
| Ogg | `audio/ogg` | `.oga``.ogg` | Firefox | `video/ogg` | `.ogv``.ogg` | Firefox |
| QuickTime Movie (MOV) | — | — | — | `video/quicktime` | `.mov` | Safari |
| WAV (Waveform Audiofile) | `audio/wav` | `.wav` | Firefox | — | — | — |
| WebM | `audio/webm` | `.webm` | Firefox | `video/webm` | `.webm` | Firefox |

関連情報
----

* WebRTC API
* MediaStream Recording API
* `<audio>` および `<video>` 要素


ウェブの音声や動画のライブストリーミング - ウェブメディア技術

ウェブの音声や動画のライブストリーミング
====================

ライブストリーミング技術は、よくスポーツやコンサートなどのイベントの中継や、もっと一般的にはテレビやラジオの番組の配信などによく採用されています。よくストリーミングと略されるライブストリーミングは、コンピューターや機器へメディアを「ライブ」で転送するプロセスです。これは実に複雑で数多くの変量がある初期段階の主題ですので、この記事では主題を紹介し、どのように始めることができるかを説明します。

メディアをブラウザーにストリーミングする際に考慮しなければならないことは、有限のファイルを再生するのではなく、その場で作成されているファイルを中継しており、あらかじめ開始または終了が決められていないという点です。

ストリームメディアと固定メディアの主な違い
---------------------

In this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or WebM file. This file sits on a server and can be delivered — like most other files — to the browser. This is often known as a progressive download.

Live streamed media lacks a finite start and end time as rather than a static file, it is a stream of data that the server passes on down the line to the browser and is often adaptive (see below). Usually, we require different formats and special server-side software to achieve this.

適応型ストリーミング
----------

One of the main priorities for live streaming is to keep the player synchronized with the stream: adaptive streaming is a technique for doing this in the case of low bandwidth. The idea is that the data transfer rate is monitored and if it looks like it's not keeping up, we drop down to a lower bandwidth (and consequently lower quality) stream. In order to have this capability, we need to use formats that facilitate this. Live streaming formats generally allow adaptive streaming by breaking streams into a series of small segments and making those segments available at different qualities and bit rates.

音声や動画のオンデマンドストリーミング
-------------------

Streaming technology is not used exclusively for live streams. It can also be used instead of the traditional progressive download method for Audio and Video on demand:

There are several advantages to this:

* Latency is generally lower so media will start playing more quickly
* Adaptive streaming makes for better experiences on a variety of devices
* Media is downloaded just in time which makes bandwidth usage more efficient
ストリーミングプロトコル
------------

While static media is usually served over HTTP, there are several protocols for serving adaptive streams; let's take a look at the options.

### HTTP

For now, HTTP is by far the most commonly supported protocol used to transfer media on demand or live.

### RTMP

Real Time Messaging Protocol (RTMP) is a proprietary protocol developed by Macromedia (now Adobe) and supported by the Adobe Flash plugin. RTMP comes in various flavours including RTMPE (Encrypted), RTMPS (Secure over SSL/TLS) and RTMPT (encapsulated within HTTP requests).

### RTSP

**メモ:** Real Time Streaming Protocol (RTSP) controls media sessions between endpoints and is often used together with Real-time Transport Protocol (RTP) and with Real-time Control Protocol (RTCP) for media stream delivery. Using RTP with RTCP allows for adaptive streaming. This is not yet supported natively in most browsers, but be aware that Firefox OS 1.3 supports RTSP.

**Note**: some vendors implement propriety transport protocols, such as RealNetworks and their Real Data Transport (RDT).

### RTSP 2.0

RTSP 2.0 is currently in development and is not backward compatible with RTSP 1.0.

**警告:** Although the `<audio>` and `<video>` tags are protocol agnostic, no browser currently supports anything other than HTTP without requiring plugins, although this looks set to change. Protocols other than HTTP may also be subject to blocking from firewalls or proxy servers.

ストリーミングプロトコルの利用
---------------

The process of using the various protocols is reassuringly familiar if you are used to working with media over HTTP.

For example:

```html
<video src="rtsp://myhost.com/mymedia.format">
  <!-- Fallback here -->
</video>
```

Media Source Extensions (MSE)
-----------------------------

Media Source Extensions is a W3C working draft that plans to extend `HTMLMediaElement` to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams.

For example, you could implement MPEG-DASH using JavaScript while offloading the decoding to MSE.

**メモ:** Time Shifting is the process of consuming a live stream sometime after it happened.

動画ストリーミングファイル形式
---------------

A couple of HTTP-based live streaming video formats are beginning to see support across browsers.

**メモ:** You can find a guide to encoding HLS and MPEG-DASH for use on the web at Setting up adaptive streaming media sources.

### MPEG-DASH

DASH stands for Dynamic Adaptive Streaming over HTTP and is a new format that has recently seen support added to Chrome, and Internet Explorer 11 running on Windows 8.1. It is supported via Media Source Extensions which are used by JavaScript libraries such as DASH.js. This approach allows us to download chunks of the video stream using XHR and "append" the chunks to the stream that's played by the `<video>` element. So for example, if we detect that the network is slow, we can start requesting lower quality (smaller) chunks for the next segment. This technology also allows an advertising segment to be appended/inserted into the stream.

**メモ:** you can also use WebM with the MPEG DASH adaptive streaming system.

### HLS

HLS or HTTP Live Streaming is a protocol invented by Apple Inc and supported on iOS, Safari and the latest versions of Android browser / Chrome. HLS is also adaptive.

HLS can also be decoded using JavaScript, which means we can support the latest versions of Firefox, Chrome and Internet Explorer 10+. See this HTTP Live Streaming JavaScript player.

At the start of the streaming session, an extended M3U (m3u8) playlist is downloaded. This contains the metadata for the various sub-streams that are provided.

### ストリーミングファイル形式の対応

| ブラウザー | DASH | HLS | Opus (Audio) |
| --- | --- | --- | --- |
| Firefox 32 | ✓ [1] | ✓ [2] | ✓ 14+ |
| Safari 6+ |  | ✓ |  |
| Chrome 24+ | ✓ [1] | ✓ |  |
| Opera 20+ | ✓ [1] |  |  |
| Internet Explorer 10+ | ✓ 11 | ✓ [2] |  |
| Firefox Mobile | ✓ | ✓ | ✓ |
| Safari iOS6+ |  | ✓ |  |
| Chrome Mobile | ✓ | ✓ [2] |  |
| Opera Mobile | ✓ [1] | ✓ |  |
| Internet Explorer Mobile | ✓ 11 | ✓ [2] |  |
| Android | ✓ |  |  |

[1] Via JavaScript and MSE

[2] Via JavaScript and a CORS Proxy

### Video Fallbacks

Between DASH and HLS we can cover a significant portion of modern browsers but we still need a fallback if we want to support the rest.

One popular approach is to use a Flash fallback that supports RTMP. Of course, we then have the issue that we need to encode in three different formats.

音声ストリーミングファイル形式
---------------

There are also some audio formats beginning to see support across browsers.

### Opus

Opus is a royalty-free and open format that manages to optimize quality at various bit-rates for different types of audio. Music and speech can be optimized in different ways and Opus uses the SILK and CELT codecs to achieve this.

Currently, Opus is supported by Firefox desktop and mobile as well as the latest versions of desktop Chrome and Opera.

**メモ:** Opus is a mandatory format for WebRTC browser implementations.

### MP3, AAC, Ogg Vorbis

Most common audio formats can be streamed using specific server-side technologies.

Note: It's potentially easier to stream audio using non-streaming formats because unlike video there are no keyframes.

サーバー側ストリーミング技術
--------------

In order to stream live audio and video, you will need to run specific streaming software on your server or use third-party services.

### GStreamer

GStreamer is an open source cross-platform multimedia framework that allows you to create a variety of media-handling components, including streaming components. Through its plugin system, GStreamer provides support for more than a hundred codecs (including MPEG-1, MPEG-2, MPEG-4, H.261, H.263, H.264, RealVideo, MP3, WMV, and FLV.)

GStreamer plugins such as souphttpclientsink and shout2send exist to stream media over HTTP. You can also integrate with Python's Twisted framework or use something like Flumotion (open source streaming software).

For RTMP transfer you can use the Nginx RTMP Module.

### SHOUTcast

SHOUTcast is a cross-platform proprietary technology for streaming media. Developed by Nullsoft, it allows digital audio content in MP3 or AAC format to be broadcast. For web use, SHOUTcast streams are transmitted over HTTP.

**Note**: SHOUTcast URLs may require a semi-colon to be appended to them.

### Icecast

The Icecast server is an open source technology for streaming media. Maintained by the Xiph.org Foundation, it streams Ogg Vorbis/Theora as well as MP3 and AAC format via the SHOUTcast protocol.

**Note**: SHOUTcast and Icecast are among the most established and popular technologies, but there are many more streaming media systems available.

### ストリーミングサービス

Although you can install software like GStreamer, SHOUTcast and Icecast you will also find a lot of third-party streaming services that will do much of the work for you.

関連情報
----

* HTTP Live Streaming
* HLS Browser Support
* HTTP Live Streaming JavaScript player
* The Basics of HTTP Live Streaming
* DASH Adaptive Streaming for HTML 5 Video (en-US)
* Dynamic Adaptive Streaming over HTTP (MPEG-DASH)
* MPEG-DASH Media Source Demo
* DASH Reference Client
* Dynamic Streaming over HTTP
* The State of MPEG-DASH Deployment
* Look, no plugins: Live streaming to the browser using Media Source Extensions and MPEG-DASH
* Media Source Extensions (W3C)
* Icecast
* SHOUTcast
* GStreamer
* Streaming GStreamer Pipelines Via HTTP
* Streaming media using GStreamer on the web
* GStreamer and Raspberry Pi
* Acceptance of Media Source Extensions as W3C Candidate Recommendation will accelerate adoption of dash.js
* Comparison of Streaming Media Systems


Setting up adaptive streaming media sources - ウェブメディア技術

Setting up adaptive streaming media sources
===========================================

たとえば、 HTML5 メディア要素内で利用するために、サーバー上の適応型ストリーミングメディアソースを設定するとします。あなたはどうしますか？この記事では、最も一般的な形式である MPEG-DASH と HLS (HTTP Live Streaming) の二つについて見ていきます。

フォーマットの選択
---------

アダプティブ・ストリーミング・フォーマットに関しては、選択肢がたくさんあります。私たちは次の 2 つを選ぶことにしました。これらはモダンブラウザがサポートすることができます。

* MPEG-DASH
* HLS (HTTP Live Streaming)

アダプティブストリーミングを行うためにメディアをチャンクに分割します。いくらかの時間ごとに複数の異なるクオリティのファイルを提供することが必要です。よりたくさんのビットレートでエンコードを行い、より細かく時間を分割すればより 'アダプティブ' なストリーミングになりますが、通常はサイズとエンコード時間とアダプティブさの間でバランスを取ります。

The good news is that once we have encoded our media in the appropriate format we are pretty good to go. HTTP 上のアダプティブストリーミングのためには特別なサーバーサイドのコンポーネントは必要ありません。

Both MPEG-DASH and HLS use a playlist format to structure the component piece of media that make the possible streams. Various bitrate streams are broken into segments and placed in appropriate server folders — we have to provide our media players with a link to lookup files or playlists specifying the name and location of these stream folders.

MPEG-DASH エンコーディング
------------------

MPEG-DASH は従来の HTTP Web サーバーでメディアコンテンツのアダプティブビットレートストリーミングを可能にする技術です。

Media Presentation Description (MPD) ファイルが複数のストリームの解像度やコーデックや帯域情報などを持ちます。video 要素の src 属性では、メディアを指定する代わりに MPD を指定します。

The MPD file tells the browser where the various pieces of media are located, it also includes meta data such as mimeType and codecs and there are other details such as byte-ranges in there too - it is an XML document and in many cases will be generated for you.

There are a few profiles we can use. We're going to take a look at Ondemand profile for Video On Demand (VOD) and the LIVE profile.

For live services streaming, the LIVE profile is a requirement. The stream switching capabilities are identical between the profiles.

Other reasons to use LIVE profile over Ondemand for VOD content may be:

1. クライアントかサーバーがレンジリクエストをサポートしていない
2. サーバーがレンジリクエストを効率的にキャッシュしない
3. サーバーがレンジリクエストを効率的にプリフェッチできない
4. The SIDX\* is large and having to load it first slows down startup a little
5. 同じオリジナルファイルをその他の配信方式でも使用したい (たとえば Microsoft Smooth Streaming)
6. 同じメディアファイルをライブストリーミングで配信した後 VOD でも配信したい

\*SIDX or SegmentIndexBox is a structure describing a segment by giving its earliest presentation time and other meta-data and can often make up a large portion of the MPD file.

### オンデマンドプロファイル

このプロファイルでは、オンデマンドでストリームを切り替えることができます。つまり、一連の連続ファイルを用意し、それぞれの帯域幅を指定するだけで、適切なファイルが自動的に選択されます。

オーディオトラック表現と 4 つの別々のビデオ表現を提供する簡単な例を示します。

```xml
<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="urn:mpeg:dash:schema:mpd:2011"
 xsi:schemaLocation="urn:mpeg:dash:schema:mpd:2011 DASH-MPD.xsd"
 type="static"
 mediaPresentationDuration="PT654S"
 minBufferTime="PT2S"
 profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">

  <BaseURL>http://example.com/ondemand/</BaseURL>
  <Period>
    <!-- English Audio -->
    <AdaptationSet mimeType="audio/mp4" codecs="mp4a.40.5" lang="en" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="1" bandwidth="64000">
        <BaseURL>ElephantsDream_AAC48K_064.mp4.dash</BaseURL>
      </Representation>
    </AdaptationSet>
    <!-- Video -->
    <AdaptationSet mimeType="video/mp4" codecs="avc1.42401E" subsegmentAlignment="true" subsegmentStartsWithSAP="1">
      <Representation id="2" bandwidth="100000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0100.264.dash</BaseURL>
      </Representation>
      <Representation id="3" bandwidth="175000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0175.264.dash</BaseURL>
      </Representation>
      <Representation id="4" bandwidth="250000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0250.264.dash</BaseURL>
      </Representation>
      <Representation id="5" bandwidth="500000" width="480" height="360">
        <BaseURL>ElephantsDream_H264BPL30_0500.264.dash</BaseURL>
      </Representation>
    </AdaptationSet>
  </Period>
</MPD>
```

MPD ファイルを生成すれば、video タグから参照することができます。

```html
<video src="my.mpd" type="application/dash+xml"></video>
```

MPEG-DASH をサポートしないブラウザのためのフォールバックを与えるとより良いでしょう:

```html
<video>
  <source src="my.mpd" type="application/dash+xml" />
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4" />
  <source src="my.webm" type="video/webm" />
</video>
```

### LIVE プロファイル

MPEG-DASH を取り扱うための良いソフトウェアは Dash Encoder です。これは MP4Box を使ってメディアを MPEG-DASH フォーマットにエンコードします。

**メモ:** You will need to be comfortable with make files and installing dependencies to get this software up and running.

**メモ:** Since MPEG-DASH decoding is done partially using JavaScript and MSE files are often grabbed using XHR, keep same origin rules in mind.

**メモ:** If you use WebM you can use the methods shown in this tutorial DASH Adaptive Streaming for HTML 5 Video (en-US).

エンコードされるとファイル構造はこのようになります。
```

play list ->                /segments/news.mp4.mpd

main segment folder ->      /segments/main/

100 Kbps segment folder ->  /segments/main/news100 contains (1.m4s, 2.m4s, 3.m4s ... )

200 Kbps segment folder ->  /segments/main/news200 contains (1.m4s, 2.m4s, 3.m4s ... )

300 Kbps segment folder ->  /segments/main/news300 contains (1.m4s, 2.m4s, 3.m4s ... )

400 Kbps segment folder ->  /segments/main/news400 contains (1.m4s, 2.m4s, 3.m4s ... )
```

プレイリスト(`.mpd` ファイル)はすべてのさまざまなビットレートファイルが存在する場所を明示的に示す XML です。

```xml
<?xml version="1.0"?>
  <MPD xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:mpeg:DASH:schema:MPD:2011" xsi:schemaLocation="urn:mpeg:DASH:schema:MPD:2011" profiles="urn:mpeg:dash:profile:isoff-main:2011" type="static" mediaPresentationDuration="PT0H9M56.46S">
    <BaseURL>
      http://example.com/segments
    </BaseURL>
    <Period start="PT0S">
      <AdaptationSet bitstreamSwitching="true">

        <Representation id="0" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="46986">
          <SegmentBase>
            <Initialization sourceURL="main/news100/1.m4s" range="0-862"/>
          </SegmentBase>
          <SegmentList duration="1">
            <SegmentURL media="main/news100/2.m4s" mediaRange="863-7113"/>
            <SegmentURL media="main/news100/3.m4s" mediaRange="7114-14104"/>
            <SegmentURL media="main/news100/4.m4s" mediaRange="14105-17990"/>
          </SegmentList>
        </Representation>

        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="91932">
          <SegmentBase>
            <Initialization sourceURL="main/news200/1.m4s" range="0-864"/>
          </SegmentBase>
          <SegmentList duration="1">
            <SegmentURL media="main/news200/2.m4s" mediaRange="865-11523"/>
            <SegmentURL media="main/news200/3.m4s" mediaRange="11524-25621"/>
            <SegmentURL media="main/news200/4.m4s" mediaRange="25622-33693"/>
          </SegmentList>
        </Representation>

        <Representation id="1" codecs="avc1" mimeType="video/mp4" width="320" height="240" startWithSAP="1" bandwidth="270370">
          <SegmentBase>
            <Initialization sourceURL="main/news300/1.m4s" range="0-865"/>
          </SegmentBase>
          <SegmentList duration="1">
            <SegmentURL media="main/news300/2.m4s" mediaRange="866-26970"/>
            <SegmentURL media="main/news300/3.m4s" mediaRange="26971-72543"/>
            <SegmentURL media="main/news300/4.m4s" mediaRange="72544-95972"/>
          </SegmentList>
        </Representation>

        ...

      </AdaptationSet>
    </Period>
  </MPD>
```

MPD ファイルは、さまざまなメディアが配置されている場所をブラウザに伝え、 mimeType やコーデックなどのメタデータも含み、そこにはバイト範囲などの詳細も含まれています。一般的にこれらのファイルは自動的に生成されます。

**メモ:** 音声と動画のストリームを異なるファイルに分割することも可能です。帯域幅に応じて優先順位を付けて個別に処理することができます。

MPD ファイルを生成すれば、 `<video>` 要素で参照することができます。

```html
<video src="my.mpd" type="application/dash+xml"></video>
```

MPEG-DASH をサポートしないブラウザのためのフォールバックを与えるとより良いでしょう:

```html
<video>
  <source src="my.mpd" type="application/dash+xml" />
  <!-- fallback -->
  <source src="my.mp4" type="video/mp4" />
  <source src="my.webm" type="video/webm" />
</video>
```

**メモ:** MPEG-DASH の再生は dash.js と Media Source Extensions のブラウザ対応に依存します。最新の dash.js リファレンスプレイヤー を参照してください。

HLS エンコーディング
------------

HTTP Live Streaming (HLS) is an HTTP-based media streaming protocol implemented by Apple. It's incorporated into iOS and OSX platforms and works well on mobile and desktop Safari and most Android devices with some caveats.

Media is usually encoded as MPEG-4 (H.264 video and AAC audio) and packaged into an MPEG-2 Transport Stream, which is then broken into segments and saved as one or more `.ts` media files. Apple provides tools to convert media files to the appropriate format.

### HLS エンコーディングツール

HLS エンコードのための役立つツールがいくつかあります。

* For HLS live stream encoding Adobe provide a Media Encoder for Mac.
* The Stream Segmenter — provided by Apple for Mac platforms — takes a media stream from a local network and splits media into equally sized media files together with an index file.
* Apple also provides a File Segmenter for Mac — which takes a suitably encoded file, splits it up and produces a index file, in a similar fashion to the Stream Segmenter.

**メモ:** これらのツールについて詳しくは Using HTTP Live Streaming を読んでください。

### インデックスファイル (プレイリスト)

The HLS Index File (much like MPEG-DASH's `.mpd` file) contains the information on where all the media segments reside, as well as other meta data such as bandwidth application. Apple uses the `.m3u8` format (an extension of its `.m3u` playlist format) for index files — see below for an example:
```

#EXT-X-VERSION:3
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1

# Old-style integer duration; avoid for newer clients.
#EXTINF:10,
http://media.example.com/segment0.ts

# New-style floating-point duration; use for modern clients.
#EXTINF:10.0,
http://media.example.com/segment1.ts
#EXTINF:9.5,
http://media.example.com/segment2.ts
#EXT-X-ENDLIST
```

**メモ:** Comprehensive information on how to encode media for Apple's HLS format can be found on Apple's Developer Pages.

関連情報
----

Further resources on adaptive streaming.

### General information

* Adaptive Streaming in the Field
### HLS overview and references

* HTTP Live Streaming
* What is HLS (HTTP-Live-Streaming)?
* HTTP Live Streaming Overview
### MPEG-DASH overview and references

* Dynamic Adaptive Streaming over HTTP Dataset
* MPEG-DASH and streaming reference and resources (MSDN)
* DASH Adaptive Streaming for HTML 5 Video (en-US)
* Dynamic Adaptive Streaming over HTTP: From Content Creation to Consumption
### MPEG-DASH tools

* DASHEncoder
* MP4Box
* DASH.js Wiki
* DASH.js Google Group
* Akamai Dash Diagnostic Player

Adaptive streaming examples

* ITEC – Dynamic Adaptive Streaming over HTTP
* MPEG DASH Media Source Demo


HTML5 の動画へのキャプションと字幕の追加 - ウェブメディア技術

HTML5 の動画へのキャプションと字幕の追加
=======================

他の記事で、 ブラウザーに依存しない動画プレイヤーの構築を、 `HTMLMediaElement` 及び `Window.fullScreen` API を使用して行う方法と、プレイヤーのスタイル付けの方法について見てきました。この記事では、同じプレイヤーと使って、 `WebVTT 形式`及び `<track>` 要素を用いてキャプションや字幕を追加する方法を紹介します。

キャプション付きの動画の例
-------------

この記事ではキャプションが付いた動画プレイヤーの例を参照します。この例では Blender Foundation が作成した Sintel open movie を使用します。

![Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](/ja/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video/video-player-with-captions.png)

**メモ:** ソースコードは Github にあります。また実際の動画も見ることもできます。

HTML5 と動画のキャプション
----------------

動画プレイヤーにキャプションをつける方法について説明する前に、私達が知っておくべきいくつかのことについて説明します。

### キャプション V.S. 字幕

Captions and subtitles are not the same thing: they have significantly different audiences, and convey different information, and it is recommended that you read up on the differences if you are not sure what they are. They are however implemented in the same way technically, so the material in this article will apply to both.

For this article we will refer to the text tracks displayed as subtitles, as their content is aimed at hearing people who have difficulty understanding the language of the film, rather than deaf or hard-of-hearing people.

### <track> 要素

HTML5 allows us to specify subtitles for a video using the `<track>` element. The various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information.

### WebVTT

The files that contain the actual subtitle data are simple text files that follow a specified format, in this case the Web Video Text Tracks (en-US) (WebVTT) format. The WebVTT specification is still being worked on, but major parts of it are stable so we can use it today.

Video providers (such as the Blender Foundation) provide captions and subtitles in a text format with their videos, but they're usually in the SubRip Text (SRT) format. These can be easily converted to WebVTT using an online converter such as srt2vtt.

Modifications to the HTML and CSS
---------------------------------

This section summarises the modifications made to the previous article's code in order to facilitate the addition of subtitles to the video. If you are not interested in this, and just want to get straight into the JavaScript and more relevant CSS, skip to the Subtitle implementation section.

In this example we are using a different video, Sintel, as it actually has some speech in it and therefore is better for illustrating how subtitles work!

### HTML Markup

As mentioned above, we need to make use of the new HTML5 `<track>` element to add our subtitle files to the HTML5 video. We actually have our subtitles in three different languages — English, German, and Spanish — so we will reference all three of the relevant VTT files by adding `<track>` elements inside our HTML5 `<video>` element:

```html
<video id="video" controls preload="metadata">
  <source src="video/sintel-short.mp4" type="video/mp4" />
  <source src="video/sintel-short.webm" type="video/webm" />
  <track
 label="English"
 kind="subtitles"
 srclang="en"
 src="captions/vtt/sintel-en.vtt"
 default />
  <track
 label="Deutsch"
 kind="subtitles"
 srclang="de"
 src="captions/vtt/sintel-de.vtt" />
  <track
 label="Español"
 kind="subtitles"
 srclang="es"
 src="captions/vtt/sintel-es.vtt" />
</video>
```

As you can see, each `<track>` element has the following attributes set:

* `kind` is given a value of `subtitles`, indicating the type of content the files contain
* `label` は一連の字幕が何語であるかを示す値が入ります。 — 例えば `English` や `Deutsch` です。 — これらのラベルが画面上に表示され、ユーザーは簡単に表示する言語を選択することができます。
* `src` is assigned a valid URL pointing to the relevant WebVTT subtitle file in each case.
* `srclang` indicates what language each subtitle files' contents are in.
* The `default` attribute is set on the English `<track>` element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection.

In addition to adding the `<track>` elements, we have also added a new button to control the subtitles menu that we will build. As a consequence, the video controls now look as follows:

```html
<div id="video-controls" class="controls" data-state="hidden">
  <button id="playpause" type="button" data-state="play">Play/Pause</button>
  <button id="stop" type="button" data-state="stop">Stop</button>
  <div class="progress">
    <progress id="progress" value="0" min="0">
      <span id="progress-bar"></span>
    </progress>
  </div>
  <button id="mute" type="button" data-state="mute">Mute/Unmute</button>
  <button id="volinc" type="button" data-state="volup">Vol+</button>
  <button id="voldec" type="button" data-state="voldown">Vol-</button>
  <button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>
  <button id="subtitles" type="button" data-state="subtitles">CC</button>
</div>
```

### CSS Changes

The video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.

No image is used for the captions button, so it is simply styled as:

```css
.controls button[data-state="subtitles"] {
  height: 85%;
  text-indent: 0;
  font-size: 16px;
  font-size: 1rem;
  font-weight: bold;
  color: #666;
  background: #000;
  border-radius: 2px;
}
```

There are also other CSS changes that are specific to some extra JavaScript implementation, but these will be mentioned at the appropriate place below.

Subtitle implementation
-----------------------

A lot of what we do to access the video subtitles revolves around JavaScript. Similar to the video controls, if a browser supports HTML5 video subtitles, there will be a button provided within the native control set to access them. However, since we have defined our own video controls, this button is hidden, and we need to define our own.

Browsers do vary as to what they support, so we will be attempting to bring a more unified UI to each browser where possible. There's more on browser compatibility issues later on.

### Initial setup

As with all the other buttons, one of the first things we need to do is store a handle to the subtitles' button:

```js
var subtitles = document.getElementById("subtitles");
```

We also initially turn off all subtitles, in case the browser turns any of them on by default:

```js
for (var i = 0; i < video.textTracks.length; i++) {
  video.textTracks[i].mode = "hidden";
}
```

The `video.textTracks` property contains an array of all the text tracks attached to the video. We loop through each one and set its `mode` to `hidden`.

Note: The WebVTT API gives us access to all the text tracks that are defined for an HTML5 video using the `<track>` element.

### Building a caption menu

Our aim is to use the `subtitles` button we added earlier to display a menu that allows users to choose which language they want the subtitles displayed in, or to turn them off entirely.

We have added the button, but before we make it do anything, we need to build the menu that goes with it. This menu is built dynamically, so that languages can be added or removed later by simply editing the `<track>` elements within the video's markup.

All we need to do is to go through the video's `textTracks`, reading their properties and building the menu up from there:

```js
var subtitlesMenu;
if (video.textTracks) {
  var df = document.createDocumentFragment();
  var subtitlesMenu = df.appendChild(document.createElement("ul"));
  subtitlesMenu.className = "subtitles-menu";
  subtitlesMenu.appendChild(createMenuItem("subtitles-off", "", "Off"));
  for (var i = 0; i < video.textTracks.length; i++) {
    subtitlesMenu.appendChild(
      createMenuItem(
        "subtitles-" + video.textTracks[i].language,
        video.textTracks[i].language,
        video.textTracks[i].label,
      ),
    );
  }
  videoContainer.appendChild(subtitlesMenu);
}
```

This code creates a `documentFragment`, which is used to hold an unordered list containing our subtitles menu. First of all an option is added to allow the user to switch all subtitles off, and then buttons are added for each text track, reading the language and label from each one.

The creation of each list item and button is done by the `createMenuItem()` function, which is defined as follows:

```js
var subtitleMenuButtons = [];
var createMenuItem = function (id, lang, label) {
  var listItem = document.createElement("li");
  var button = listItem.appendChild(document.createElement("button"));
  button.setAttribute("id", id);
  button.className = "subtitles-button";
  if (lang.length > 0) button.setAttribute("lang", lang);
  button.value = label;
  button.setAttribute("data-state", "inactive");
  button.appendChild(document.createTextNode(label));
  button.addEventListener("click", function (e) {
    // Set all buttons to inactive
    subtitleMenuButtons.map(function (v, i, a) {
      subtitleMenuButtons[i].setAttribute("data-state", "inactive");
    });
    // Find the language to activate
    var lang = this.getAttribute("lang");
    for (var i = 0; i < video.textTracks.length; i++) {
      // For the 'subtitles-off' button, the first condition will never match so all will subtitles be turned off
      if (video.textTracks[i].language == lang) {
        video.textTracks[i].mode = "showing";
        this.setAttribute("data-state", "active");
      } else {
        video.textTracks[i].mode = "hidden";
      }
    }
    subtitlesMenu.style.display = "none";
  });
  subtitleMenuButtons.push(button);
  return listItem;
};
```

This function builds the required `<li>` and `<button>` elements, and returns them so they can be added to the subtitles menu list. It also sets up the required event listeners on the button to toggle the relevant subtitle set on or off. This is done by simply setting the required subtlte's `mode` attribute to `showing`, and setting the others to `hidden`.

Once the menu is built, it is then inserted into the DOM at the bottom of the videoContainer.

Initially the menu is hidden by default, so an event listener needs to be added to our subtitles button to toggle it:

```js
subtitles.addEventListener("click", function (e) {
  if (subtitlesMenu) {
    subtitlesMenu.style.display =
      subtitlesMenu.style.display == "block" ? "none" : "block";
  }
});
```

### Subtitle menu CSS

We also added some rudimentary styling for the newly created subtitles menu:

```css
.subtitles-menu {
  display: none;
  position: absolute;
  bottom: 14.8%;
  right: 20px;
  background: #666;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
  padding: 10px;
}

.subtitles-menu li {
  padding: 0;
  text-align: center;
}

.subtitles-menu li button {
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
  width: 90%;
  padding: 2px 5px;
  border-radius: 2px;
}
```

Styling the displayed subtitles
-------------------------------

One of the less well known about and supported features of WebVTT is the ability to style the individual subtitles (something called text cues) via CSS Extensions.

The `::cue` pseudo-element is the key to targetting individual text track cues for styling, as it matches any defined cue. There are only a handful of CSS properties that can be applied to a text cue:

* `color`
* `opacity`
* `visibility`
* `text-decoration`
* `text-shadow`
* `background` shorthand properties
* `outline` shorthand properties
* `font` shorthand properties, including `line-height`
* `white-space`

For example, to change the text colour of the text track cues you can write:

```css
::cue {
  color: #ccc;
}
```

If the WebVTT file uses voice spans, which allow cues to be defined as having a particular "voice":
```

0
00:00:00.000 --> 00:00:12.000
<v Test>[Test]</v>
```

Then this specific 'voice' will be stylable like so:

```css
::cue(v[voice="Test"]) {
  color: #fff;
  background: #0095dd;
}
```

**メモ:** Some of the styling of cues with ::cue currently works on Chrome, Opera, and Safari, but not yet on Firefox.

ブラウザーの互換性
---------

Browser support for WebVTT and the `<track>` element is fairly good, although some browsers differ slightly in their implementation.

### Internet Explorer

Internet Explorer 10+ subtitles are enabled by default, and the default controls contain a button and a menu that offers the same functionality as the menu we just built. The `default` attribute is also supported.

**メモ:** IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an `.htaccess` file to an appropriate directory that contains `AddType text/vtt .vtt`.

### Safari

Safari 6.1+ has similar support to Internet Explorer 10+, displaying a menu with the different available options, with the addition of an "Auto" option, which allows the browser to choose.

### Chrome and Opera

These browsers have similar implementations again: subtitles are enabled by default and the default control set contains a 'cc' button that turns subtitles on and off. Chrome and Opera ignore the `default` attribute on the `<track>` element and will instead try to match the browser's language to the subtitle's language.

### Firefox

Firefox's implementation was completely broken due to a bug, leading to Mozilla turning off WebVTT support by default (you can turn it on via the `media.webvtt.enabled` flag.) However, ~~this bug looks to have been fixed and WebVTT support re-enabled as of Gecko 31, so this will not be a problem for Firefox final release users for much longer (on Gecko 29 as of the time of this writing)~~ this has been fixed as of Firefox 31, and everything works as it should.

Plugins
-------

If, after reading through this article you decide that you can't be bothered to do all of this and want someone else to do it for you, there are plenty of plugins out there that offer caption and subtitle support that you can use.

plyr.io

This modern video player implements subtitles in both SRT and WebVTT file formats.

playr

This small plugin implements subtitles, captions, and chapters as well as both WebVTT and SRT file formats.

Flowplayer

HTML5 player supporting WebVTT.

jwplayer

This video player is very extensive and does a lot more than simply support video captions. It supports the WebVTT, SRT and DFXP formats.

MediaElement.js

Another complete video player that also support video captions, albeit only in SRT format.

LeanBack Player

Yet another video player that supports WebVTT captions as well as providing other standard player functionality.

SublimeVideo

This player also supports captions through WebVTT and SRT files.

Video.js

Supports WebVTT video subtitles.

Radiant Media Player

Supports multi-languages WebVTT closed captions

**メモ:** You can find an excellent list of HTML5 Video Players and their current "state" at HTML5 Video Player Comparison.


MathML 要素リファレンス - MathML

MathML 要素リファレンス
===============

これは MathML 要素のアルファベット順リストです。これらはすべて `MathMLElement` (en-US) クラスを実装しています。

**メモ:** MathML のメインページで説明されているように、 MDN は MathML Core を参照仕様として使用しています。しかし、一部のブラウザーでまだ実装されている古い機能も文書化しています。 MathML 4には、これらの機能やその他の機能の詳細が記載されています。

MathML 要素（アルファベット順）
-------------------

### math

* `<math>` （最上位要素）
### A

* `<maction> (en-US)`
非推奨
 （部分式にバインドされたアクション）
* `<annotation> (en-US)` （データ注釈）
* `<annotation-xml> (en-US)` （XML 注釈）
### E

* `<menclose>`
Non-standard
 （囲みコンテンツ）
* `<merror>` ）（囲み構文エラーメッセージ）
### F

* `<mfenced>`
Non-standard

非推奨
 （括弧）
* `<mfrac>` （分数）
### I

* `<mi>` （識別子）
### M

* `<mmultiscripts>` （前置字とテンソル添字）
### N

* `<mn>` （数字）
### O

* `<mo>` （演算子）
* `<mover>` （真上付き）
### P

* `<mpadded> (en-US)` （コンテンツまわりの空白）
* `<mphantom>` （予約スペースを持つ不可視コンテンツ）
* `<mprescripts> (en-US)` （前置文字の区切り文字）
### R

* `<mroot>` （累乗根）
* `<mrow> (en-US)` （グループ化された部分式）
### S

* `<ms> (en-US)` （文字列リテラル）
* `<semantics>` （意味的注釈用のコンテナー）
* `<mspace>` （空白）
* `<msqrt>` （平方根）
* `<mstyle> (en-US)` （書式変更）
* `<msub>` （下付き）
* `<msup>` （上付き）
* `<msubsup>` （下付き上付きの組）
### T

* `<mtable>` （表または行列）
* `<mtd>` （表または行列のセル）
* `<mtext>` （テキスト）
* `<mtr>` （表または行列の列）
### U

* `<munder>` （真下付き）
* `<munderover> (en-US)` （真下付きと真上付きの組）
MathML 要素（カテゴリー別）
-----------------

### 最上位要素

* `<math>` （最上位要素）
### トークン要素

* `<mi>` （識別子）
* `<mn>` （数字）
* `<mo>` （演算子）
* `<ms> (en-US)` （文字列リテラル）
* `<mspace>` （空白）
* `<mtext>` （テキスト）
### 一般レイアウト

* `<menclose>`
Non-standard
 （囲みコンテンツ）
* `<merror>` ）（囲み構文エラーメッセージ）
* `<mfenced>`
Non-standard

非推奨
 （括弧）
* `<mfrac>` （分数）
* `<mpadded> (en-US)` （コンテンツまわりの空白）
* `<mphantom>` （予約スペースを持つ不可視コンテンツ）
* `<mroot>` （累乗根）
* `<mrow> (en-US)` （グループ化された部分式）
* `<msqrt>` （平方根）
* `<mstyle> (en-US)` （書式変更）
### スクリプトと制限要素

* `<mmultiscripts>` （前置字とテンソル添字）
* `<mover>` （真上付き）
* `<mprescripts> (en-US)` （前置文字の区切り文字）
* `<msub>` （下付き）
* `<msubsup>` （下付き上付きの組）
* `<msup>` （上付き）
* `<munder>` （真下付き）
* `<munderover> (en-US)` （真下付きと真上付きの組）
### 表形式の数式

* `<mtable>` （表または行列）
* `<mtd>` （表または行列のセル）
* `<mtr>` （表または行列の列）
### カテゴリー外の要素

* `<maction> (en-US)`
非推奨
 （部分式にバインドされたアクション）
意味的注釈
-----

* `<annotation> (en-US)` （データ注釈）
* `<annotation-xml> (en-US)` （XML 注釈）
* `<semantics>` （意味的注釈用のコンテナー）
関連情報
----

* MathML
* MathML 属性リファレンス


例 - MathML

例
=

以下のリンクでは、複雑な数学の概念をウェブコンテンツで表示するための MathML の使い方を理解するのに役立つ例がいくつかあります。

ピタゴラスの定理

ピタゴラスの定理の証明を表示する簡単な例です。

二次方程式の解の公式の導出

二次方程式の解の導出の概要です。

MathML 耐久テスト

大量のテストマークアップです。


属性 - MathML

属性
==

これは MathML 属性のアルファベット順リストです。それぞれの属性の詳細は、関連する MathML 要素ページおよびグローバル属性ページにあります。値ページでは、 MathML 属性で使用される共通の値についての注意を説明しています。

**メモ:** 主要な MathML ページで説明されているように、 MDN は MathML Core をリファレンス仕様書として使用しています。しかし、いくつかのブラウザーでまだ実装されている古い機能も文書化されています。これらの機能やその他の機能についての詳細は MathML 4 で見ることができます。

| 属性名 | この属性を取る要素 | 説明 |
| --- | --- | --- |
| `accent` | `<mo>` | `<boolean>` で、演算子を下付き文字または上付き文字として使用する際にアクセントとして扱うかどうかを示します。 |
| `accent` | `<mover>`,
 `<munderover> (en-US)` | `<boolean>` で、演算子がアクセントとして扱われるべきか否かを指定します。 |
| `accentunder` | `<munder>`,
 `<munderover> (en-US)` | `<boolean>` で、上付き文字がアクセントとして扱われるべきか否かを指定します。 |
| `actiontype`
非推奨
 | `<maction> (en-US)` | 文字列で、この要素で起こるアクションを指定します。 |
| `align` | `<mtable>` | 環境に対する表の垂直配置を指定します。 |
| `background`
非推奨
 | `<mstyle> (en-US)` | 代わりに CSS の `background-color` を使用してください。 |
| `close`
非推奨
 | `<mfenced>` | 閉じ区切り文字列です。 |
| `color`
非推奨
 | `<mstyle> (en-US)` | 代わりに CSS の `color` を使用してください。 |
| `columnalign` | `<mtable>`,
 `<mtd>`,
 `<mtr>` | 表のセルの水平方向の配置を指定します。 |
| `columnlines` | `<mtable>` | 表の列の境界線を指定します。 |
| `columnspacing` | `<mtable>` | 表の列間の空間を指定します。 |
| `columnspan` | `<mtd>` | 非負の整数値で、セルが表の何列分に及ぶかを示します。 |
| `denomalign`
非推奨
 | `<mfrac>` | 分数の下の分母の配置を示します。 |
| `depth` | `<mpadded> (en-US)` |
 深さを設定または増加します。
 length を参照してください。
  |
| `dir` | すべての MathML 要素 | テキストの書字方向です。可能な値は、 `ltr` （左から右）または `rtl` （右から左）です。 |
| `display` | `<math>` | レンダリングモードを指定します。指定できる値は `block` と `inline` です。 |
| `displaystyle` | すべての MathML 要素 | `<boolean>` で、 math-style を `normal` （true の場合）と `compact` （それ以外の場合）のどちらに設定するかを指定します。 |
| `fence` | `<mo>` | `<boolean>` で、演算子がフェンス（括弧など）であるかどうかを指定します。この属性には視覚的効果はありません。 |
| `fontfamily`
非推奨
 | `<mstyle> (en-US)` | 代わりに CSS の `font-family` を使用してください。 |
| `fontsize`
非推奨
 | `<mstyle> (en-US)` | 代わりに CSS の `font-size` を使用してください。 |
| `fontstyle`
非推奨
 | `<mstyle> (en-US)` | 代わりに CSS の `font-style` を使用してください。 |
| `fontweight`
非推奨
 | `<mstyle> (en-US)` | 代わりに CSS の `font-weight` を使用してください。 |
| `frame` | `<mtable>` | `<mtable>` 全体の境界線を指定します。取りうる値は `none`（既定値）、`solid`、`dashed` です。 |
| `framespacing` | `<mtable>` | 表と `frame` の間に追加される空間を指定します。 |
| `height` | `<mpadded> (en-US)`,
 `<mspace>` | `<length-percentage>` で、希望する（ベースライン上の）高さを指定します。 |
| `href` | すべての MathML 要素 | 指定された URI へのハイパーリンクを設定するために使用します。 |
| `id` | すべての MathML 要素 | この要素に関連する一意の識別子を設定します。 |
| `linethickness` | `<mfrac>` | `<length-percentage>` で、水平方向の分数線の太さです。 |
| `lspace` | `<mo>` | `<length-percentage>` で、演算子の前の空間の量を示します。 |
| `lspace` | `<mpadded> (en-US)` | `<length-percentage>` で、要素の位置決め点に対する子コンテンツの位置決め点の水平方向の位置を示します。 |
| `lquote`
非推奨
 | `<ms> (en-US)` | 内容を囲む開始引用文字です。既定値は "`"`" です。 |
| `mathbackground` | すべての MathML 要素 | 要素の背景色です。 |
| `mathcolor` | すべての MathML 要素 | 要素の色です。 |
| `mathsize` | すべての MathML 要素 | `<length-percentage>` で、この要素の `font-size` として使用されます。 |
| `mathvariant` | すべての MathML 要素 | 文字組版によって異なるトークン要素の論理クラスです。 |
| `maxsize` | `<mo>` | `<length-percentage>` で、演算子が伸張したときの最大サイズを示します。 |
| `minsize` | `<mo>` | `<length-percentage>` で、演算子が伸張したときの最小サイズを示します。 |
| `movablelimits` | `<mo>` | `<boolean>` で、 math-style が `compact` に設定されていた場合に上側・下側の文字が上付き・下付き文字に移動するかどうかを示します。 |
| `notation` | `<menclose>` | 子要素に適用する表記法のリスト。ホワイトスペースで区切られます。 |
| `numalign`
非推奨
 | `<mfrac>` | 分数上の分子の配置を示します。 |
| `open`
非推奨
 | `<mfenced>` | 開き区切り文字用の文字列。 |
| `rowalign` | `<mtable>`,
 `<mtd>`,
 `<mtr>` | 表セルの垂直方向の配置を指定します。 |
| `rowlines` | `<mtable>` | 表の行の境界線を指定します。 |
| `rowspacing` | `<mtable>` | テーブルの行間の空間を指定します。 |
| `rowspan` | `<mtd>` | セルが何行に拡張されるかを示す非負の整数値。 |
| `rspace` | `<mo>` | `<length-percentage>` で、演算子の後の空間の大きさを示します。 |
| `rquote`
非推奨
 | `<ms> (en-US)` | 内容を囲む引用符です。既定値は `"` です。 |
| `scriptlevel` | すべての MathML 要素 | この要素の math-depth を指定します。受け付ける値や対応は、 scriptlevel ページ (en-US)を参照してください。 |
| `scriptminsize`
非推奨
 | `<mstyle> (en-US)` | `scriptlevel` の変更により許容される最小フォントサイズを指定します。 |
| `scriptsizemultiplier`
非推奨
 | `<mstyle> (en-US)` | `scriptlevel` の変化によるフォントサイズの調整に使用する倍率を指定します。 |
| `selection`
非推奨
 | `<maction> (en-US)` | 目に見える子要素で、いくつかの `actiontype` 値に対してのみ考慮されます。 |
| `separator` | `<mo>` | `<boolean>` で、この属性には視覚的な効果はありませんが、演算子が区切り文字（カンマなど）であるかどうかを指定するものです。 |
| `separators`
非推奨
 | `<mfenced>` | 異なる区切り文字に使用する 0 文字以上の文字列です。 |
| `stretchy` | `<mo>` | `<boolean>` で、演算子を隣接する要素のサイズに引き伸ばすかどうかを指定します。 |
| `subscriptshift`
非推奨
 | `<msub>`,
 `<msubsup>`,
 `<mmultiscripts>` | `<length-percentage>` で、式のベースラインより下に添字を移動させる最小の空間。 |
| `superscriptshift`
非推奨
 | `<msup>`,
 `<msubsup>`,
 `<mmultiscripts>` | `<length-percentage>` で、式のベースライン上に上付き文字を移動させる最小限の空間です。 |
| `symmetric` | `<mo>` | `<boolean>` で、演算子が伸張された場合、演算子が虚数軸（中央の分数線）の周りに上下対称であるべきかを指定します。 |
| `voffset` | `<mpadded> (en-US)` | `<length-percentage>` で、要素の位置決め点に対する子コンテンツの位置決め点の垂直方向の位置を示します。 |
| `width` | `<mpadded> (en-US)`,
 `<mspace>`,
 `<mtable>` | `<length-percentage>` で、希望する幅を指定します。 |
| `xmlns` | `<math>` | MathML 名前空間の URI を指定します。 (`http://www.w3.org/1998/Math/MathML`) |


MathML の属性値 - MathML

MathML の属性値
===========

MathML 固有の型
-----------

CSS データ型に加え、一部の MathML 属性は以下の型を受け入れます。

* `<unsigned-integer>`: `<integer>` で、最初の文字が U+002D HYPHEN-MINUS character (-) でも U+002B PLUS SIGN (+) でもないものです。例えば `1234` です。
* `<boolean>`: `true` または `false` の文字列で、論理値を表します。
MathML における古い長さ
---------------

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

`<length-percentage>` の代わりに、 MathML は独自の長さを記述するための型を定義していました。受け入れられる値には、単位のないゼロ以外の長さの値（例えば、 `500%` を意味する `5`）、ドットで終わる数字を含む値（例えば、 `34.px`）、名前付きの空間（例えば、 `thinmathspace`）が含まれていました。互換性のために、等価な `<percentage>` 値でゼロでない単位なしの長さの値を置き換えること、数字で不要なドットを削除すること、名前付きの長さには以下の置き換えを使用することが推奨されています。
```

veryverythinmathspace  => 0.05555555555555555em
verythinmathspace      => 0.1111111111111111em
thinmathspace          => 0.16666666666666666em
mediummathspace        => 0.2222222222222222em
thickmathspace         => 0.2777777777777778em
verythickmathspace     => 0.3333333333333333em
veryverythickmathspace => 0.3888888888888889em
```

### 単位

| 単位 | 説明 |
| --- | --- |
| `em` | `Font-relative` 単位 |
| `ex` | `Font-relative` 単位（その要素の "x" 高、多くのフォントでは `1ex ≈ 0.5em`） |
| `px` | ピクセル |
| `in` | インチ（1 インチ = 2.54 センチメートル） |
| `cm` | センチメートル |
| `mm` | ミリメートル |
| `pt` | ポイント (1 point = 1/72 inch) |
| `pc` | パイカ (1 pica = 12 points) |
| `%` | 既定値のパーセント値 |

### 定数

| 定数 | 値 |
| --- | --- |
| `veryverythinmathspace` | 1/18`em` |
| `verythinmathspace` | 2/18`em` |
| `thinmathspace` | 3/18`em` |
| `mediummathspace` | 4/18`em` |
| `thickmathspace` | 5/18`em` |
| `verythickmathspace` | 6/18`em` |
| `veryverythickmathspace` | 7/18`em` |
| `negativeveryverythinmathspace` | -1/18`em` |
| `negativeverythinmathspace` | -2/18`em` |
| `negativethinmathspace` | -3/18`em` |
| `negativemediummathspace` | -4/18`em` |
| `negativethickmathspace` | -5/18`em` |
| `negativeverythickmathspace` | -6/18`em` |
| `negativeveryverythickmathspace` | -7/18`em` |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


グローバル属性 - MathML

グローバル属性
=======

**グローバル属性**は、すべての MathML 要素で共通の属性です。これらはすべての要素に使用することができますが、一部の要素には効果がないことがあります。

グローバル属性はすべての MathML要素 に指定することができます。すなわち、たとえそれらの要素を使用することが、その文書が MathML に準拠しなくなったとしても、標準外の要素はこれらの属性を許可しなければなりません。

基本的な MathML のグローバル属性に加え、以下のグローバル属性も存在します。

* イベントハンドラー属性、例えば **`onclick`**、**`onfocus`**、など。
* `href` (en-US) 属性、 MathML 要素をハイパーリンクにします。
グローバル属性の一覧
----------

`class`

要素のクラスの空白区切りのリスト。クラスによって、CSS や JavaScript はクラスセレクターや、 `Document.getElementsByClassName()` メソッドのような関数を通して、特定の要素を選択してアクセスすることができます。

`data-*`

MathML と DOM 表現との間でスクリプトが使用する独自の情報を交換することができるようにする、カスタムデータ属性と呼ばれる属性のクラスを形成します。このようなカスタムデータはすべて、属性が設定されている要素の `MathMLElement` (en-US) インターフェイスを通して利用できます。 `HTMLElement.dataset`プロパティは、それらにアクセスします。

`dir` (en-US)

MathML 要素の書字方向を示す列挙属性。取ることができるのは以下の値です。

* `ltr` は *left to right* を意味しており、左から右へ数式を表示するために使用します（例：イギリスやモロッコスタイル）
* `rtl` は *right to left* を意味しており、右から左に数式を表示するために使用します（例：マグレブやマッハレックスタイル）

`displaystyle` (en-US):

論理値で、要素の math-style を設定します。

* `true`: `normal` を意味します。
* `false`: `compact` を意味します。

`id`

文書内で固有の識別子 (ID) を定義します。その目的は、（フラグメント識別子を使用して）リンクしたり、スクリプトを実行したり、（CSS を使用して）スタイル設定したりするときに要素を識別することです。

`mathbackground` (en-US)

要素の背景色です。

`mathcolor` (en-US)

要素の色です。

`mathsize` (en-US)

要素の font-size として使用される `<length-percentage>` です。

`nonce`

コンテンツセキュリティポリシーが指定されたフェッチを許可するかどうかを決定するために使用できる暗号化ノンス（「一度だけ使用する番号」）です。

`scriptlevel` (en-US)

要素の math-depth を指定します。受け入れられる値と地図は scriptlevel ページ (en-US)を参照してください。

`style`

要素に適用するCSSスタイル設定を格納します。スタイルは別個のファイルで定義することを推奨します。この属性と `<style>` 要素の主な目的は、例えばテストのため、すばやくスタイル設定ができるようにすることです。

`tabindex`

要素が入力フォーカスを受け取ることができるかどうか（*focusable* であるかどうか）、順次キーボードナビゲーションに参加するかどうか、参加する場合はどの位置かを示す整数属性です。いくつかの値を取ることができます。

* *負の値* は、その要素がフォーカス可能であるべきであるが、キーボードナビゲーションによって順次到達可能であってはならないことを意味しています。
* `0` はその要素がフォーカス可能で、キーボードナビゲーションで順次到達可能であることを意味しますが、その相対的な順序はプラットフォームの規約によって定義されます。
* *正の値* は、要素がフォーカス可能で、順次キーボードナビゲーションで到達可能であることを意味します。要素がフォーカスされる順序は、 **tabindex** の増加値です。複数の要素が同じ tabindex を共有する場合、それらの相対順序は文書内の相対位置に従います。

仕様書
---

| Specification |
| --- |
| MathML Core # dfn-dir |
| MathML Core # dfn-displaystyle |
| MathML Core # dfn-mathbackground |
| MathML Core # dfn-mathcolor |
| MathML Core # dfn-mathsize |
| MathML Core # dfn-scriptlevel |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Element` インターフェイスで、ほとんどのグローバル属性を問い合わせることができます。


MathML の記述 - MathML

MathML の記述
==========

このページでは、タグと属性をテキスト形式で記述する MathML 言語を使って数学を記述する方法を説明します。 HTML や SVG と同様に、このテキストは複雑なコンテンツではとても冗長になるため、軽量マークアップ言語からのコンバーターや WYSIWYG 数式エディターなどの適切なオーサリングツールが要求されます。そのようなツールは数多く利用できるので、網羅的なリストを提供することは不可能です。代わりに、この記事では一般的な手法と例に焦点を当てます。

MathML の使用
----------

MathML の数式がオーサリングツールで生成されるとしても、文書内の数式を適切に統合するためのヒントをいくつか知っておくことが重要です。

### HTML ページ中の MathML

それぞれの MathML 数式はルート `math` 要素で表され、HTML ページに直接埋め込むことができます。既定では、数式はインラインで表示され、高さが最小になるように調整されます。 `display="block"` 属性を使用すると、複雑な数式を普通に、自分自身で段落を作って表示することができます。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <math>
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>

    <p>
      One over square root of two (display style):
      <math display="block">
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>
  </body>
</html>
```

**メモ:** XML 文書内の MathML（XHTML、EPUB、OpenDocumentなど）を使用するには、各 `<math>` 要素に `xmlns="http://www.w3.org/1998/Math/MathML"` 属性を配置してください。

**メモ:** 電子メールやインスタントメッセージクライアントの中には、HTML 形式でメッセージを送受信できるものがあります。そのため、 MathML タグがマークアップサニタイザーによってフィルタリングされない限り、そのようなメッセージの中に数式を埋め込むことは使用可能です。

#### MathML に対応していないブラウザー向けの代替策

MathML に対応していないブラウザーに対しては、代替機構を提供することが推奨されます。もし文書が基本的な数式しか持たないのであれば、小さな mathml.css スタイルシートで十分かもしれません。条件付きで読み込むには、文書内のヘッダーに 1 行挿入するだけです。

```html
<script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>
```

ただ、もっと高度な表現も使いたいという場合にはもう少し大きい MathJax ライブラリーを用いると良いでしょう。

```html
<script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>
```

また、 MathML に対応していないブラウザーに対しては、ページの上部に警告を表示し、上記の代替案のいずれかをユーザーに選ばせることもできます。

```html
<script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>
```

**メモ:** これら 2 つのスクリプトは mspace または mpadded (en-US) 要素の機能検出を行うことに注意してください（これらのページのブラウザー互換性表を参照してください）。また、良好な MathML の対応のないブラウザーのためにページの上部に警告を表示し、ユーザーに上記のフォールバックのいずれかを選択させるための同様のスクリプトもあります。

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

MathML フォント (en-US)の記事で説明したように、数学フォントは MathML コンテンツをレンダリングするのに役立ちます。そのため、そのようなフォントのインストール手順 (en-US)を共有したり、ウェブフォントとして指定されたフォントを提供することは常によい考えです。

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

```html
<link
 rel="stylesheet"
 href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
```

いくつかのフォントが提案されており、異なるスタイルを選択することができます。例えば STIX の場合は次のようになります。

```html
<link
 rel="stylesheet"
 href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css" />
```

**メモ:** MathFonts のページにあるフォントとスタイルシートはオープンソースライセンスの下で配布されていますので、自分自身でコピーされたり、必要なものに変更したりするのは無料です。

簡易記法からの変換
---------

この節では、人気のある LaTeX 言語のような軽量マークアップ言語から MathML を変換するいくつかのツールをレビューします。

### クライアント側での変換

この手法では、数式はウェブページで直接書かれ、JavaScript ライブラリーが MathML への変換を行います。これはおそらく最も簡単なオプションですが、いくつかの課題もあります。余分な JavaScript コードを読み込んで実行しなければならない、作者は予約文字をエスケープしなければならない、ウェブクローラーは MathML 出力にアクセスすることができないなど...。

カスタム要素を用いてソースコードをホスティングし、対応する MathML 出力を確実に挿入し、 shadow サブツリー経由でレンダリングすることができます。例えば、 TeXZilla の `<la-tex>` 要素を用いれば、上記の MathML の例を以下のように簡潔に書き換えることができます。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
    <script src="https://fred-wang.github.io/TeXZilla/TeXZilla-min.js"></script>
    <script src="https://fred-wang.github.io/TeXZilla/examples/customElement.js"></script>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <la-tex>\frac{1}{\sqrt{2}}</la-tex>
    </p>

    <p>
      One over square root of two (display style):
      <la-tex display="block">\frac{1}{\sqrt{2}}</la-tex>
    </p>
  </body>
</html>
```

LaTeXに慣れない場合は、 ASCIIMath や jqMath などの構文も利用できます。 JavaScript ライブラリーを読み込んで、適切な区切り文字を使用してください。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>ASCII MathML</title>
    …
    <!-- ASCIIMathML.js -->
    <script src="/path/to/ASCIIMathML.js"></script>
    …
    <!-- jqMath -->
    <script src="https://mathscribe.com/mathscribe/jquery-1.4.3.min.js"></script>
    <script src="https://mathscribe.com/mathscribe/jqmath-etc-0.4.6.min.js"></script>
    …
  </head>
  <body>
    …
    <p>One over square root of two (inline style, ASCIIMath): `1/(sqrt 2)`</p>
    …
    <p>One over square root of two (inline style, jqMath): $1/√2$</p>
    …
    <p>One over square root of two (display style, jqMath): $$1/√2$$</p>
    …
  </body>
</html>
```

### コマンドラインのプログラム

ページ読み込み時に MathML 式を生成する代わりに、コマンドラインツールに頼ることができます。これにより、静的な MathML コンテンツを持つページがより速く読み込まれるようになります。クライアント側での変換のコンテンツを持つページ `input.html` をもう一度考えてみましょう。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>
    <p>One over square root of two (inline style): $\frac{1}{\sqrt{2}}$</p>
    <p>One over square root of two (display style): $$\frac{1}{\sqrt{2}}$$</p>
  </body>
</html>
```

そのページは `script` タグを持っていません。代わりに、 Node.js と TeXZilla を使用すると、以下のコマンド行で変換が実行されます。

```bash
cat input.html | node TeXZilla.js streamfilter > output.html
```

このコマンドを実行すると、以下の HTML 出力を格納したファイル `output.html` が作成されます。ドルで区切られた数式は MathML に変換されています。

```html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <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>
    </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>
    </p>
  </body>
</html>
```

任意の LaTeX 文書を MathML コンテンツを含む文書に変換することを目的とした、より洗練されたツールがあります。例えば、 LaTeXML を使って以下のコマンドを実行すると、 `foo.tex` が HTML や EPUB 文書に変換されます。

```bash
latexmlc --dest foo.html foo.tex # Generate a HTML document foo.html
latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub
```

`latexmlc` は `--javascript` 引数を受け付けます。この引数を使用することで、上記のフォールバックスクリプトのいずれかを含めることができます。

```bash
latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathml.css/mspace.js foo.tex # Add the CSS fallback
latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback
```

**メモ:** コマンドラインツールはサーバー側で使用することができます。例えば、 MediaWiki は Mathoid を介して LaTeX から MathML への変換を行います。

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

この節では、グラフィカルインターフェイスを提供するいくつかの編集ツールをレビューします。

### 入力ボックス

単純な手法は、単純構文からのコンバーターを数学の単純な入力ボックスとして統合することです。例えば、 Thunderbird や SeaMonkey には、ポップアップウィンドウを開くための **Insert > Math** コマンドが指定され、 LaTeX から MathML への入力フィールドとライブ MathML プレビューが表示されます：

![Thunderbird の LaTeX 入力ボックス](/ja/docs/Web/MathML/Authoring/thunderbird.png)

**メモ:** また、 **Insert > HTML** コマンドを使用して、任意の MathML コンテンツを貼り付けることもできます。

LibreOffice の数式エディター（ファイル → 新しい数式 → 数式）は使用可能な拡張を示しています。 *StartMath* 構文の入力ボックスには、あらかじめ定義した数学的構文を挿入するための数式パネルが追加されています。

![StarMath input box in Libre Office](/ja/docs/Web/MathML/Authoring/libreoffice.png)

**メモ:** libreoffice の MathML コードを入手するには、ドキュメントを `mml` として保存し、お気に入りのエディターで開いてください。

### WYSIYWG なエディター

他にも、 WYSIYWG インターフェイスに直接統合された数式編集機能を指定されたエディターがあります。以下のスクリーンショットは、 LyX と TeXmacs のもので、どちらも HTML エクスポートに対応しています。

![Lyx example](/ja/docs/Web/MathML/Authoring/lyx.png)

![TeXmacs example](/ja/docs/Web/MathML/Authoring/texmacs.png)

**メモ:** 既定では、 Lyx と TeXmacs は HTML 出力に数式の画像を使用します。その代わりに MathML を選択するには、前者ではこちらの指示に従ってください。後者では`ユーザー設定 > 変換 > 数式を MathML としてエクスポート`を選択してください。

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

数学を入力する最後のオプションは、光学式文字認識や手書き文字認識のユーザーインターフェイスによるものです。これらのツールのいくつかは数式に対応しており、 MathML としてエクスポートすることができます。以下のスクリーンショットは MyScript のデモを示しています。

![MyScript](/ja/docs/Web/MathML/Authoring/myscript.png)


ピタゴラスの定理の証明 - MathML

ピタゴラスの定理の証明
===========

ピタゴラスの定理を証明します。

**命題**: 直角三角形では、斜辺の 2 乗は他の 2 辺の 2 乗の和に等しい。

すなわち、 a と b を脚とし、c を斜辺とすると、

a
2

+

b
2

=

c
2

**証明:** 大きな正方形の面積は、内側の正方形の面積（斜辺の 2 乗）に 4 つの三角形の面積を加えたものに等しいことを示すことで、定理を代数的に証明することができます。

(
a
+
b
)

2

=

c
2

+
4
⋅
(

1
2

a
b
)

a
2

+
2
a
b
+

b
2

=

c
2

+
2
a
b

a
2

+

b
2

=

c
2


MathML: 二次方程式の解の公式を導く - MathML

MathML: 二次方程式の解の公式を導く
=====================

このページでは、二次方程式の解の公式の導出について概説します。

二次方程式の一般形をとり、 x について解きます。

a

x
2

+
b

x

+
c

=
0

a

x
2

+
b

x

=
-
c

x
2

+

b

a

x

=

-
c

a

首位係数で両辺を割る。

x
2

+

b

a

x
+

(

b

2
a

)

2

=

-
c
(
4
a
)

a
(
4
a
)

+

b
2

4

a
2

平方完成。

(
x
+

b

2
a

)
(
x
+

b

2
a

)
=

b
2

-
4
a
c

4

a
2

判別式が現れる。

(
x
+

b

2
a

)

2

=

b
2

-
4
a
c

4

a
2

x
+

b

2
a

=

b
2

-
4
a
c

4

a
2

x

=

-
b

2
a

±

{
C
}

b
2

-
4
a
c

4

a
2

頂点を求める公式。

x

=

-
b
±

{
C
}

b
2

-
4
a
c

2
a


<semantics> - MathML

<semantics>
===========

**`<semantics>`** は MathML の要素で、 MathML 表現に注釈を付けます。例えば、軽量マークアップ言語としてのテキストソース、または特別な XML 方言で表現されている数学的意味などです。一般的に、その構造は以下の通りです。

* 注釈を付けるべき MathML 式である最初の子。
* 続く `<annotation>` または `<annotation-xml>` 要素。後者は OpenMath のような XML 形式のために予約されています。

既定では、`<semantics>`要素の最初の子要素だけがレンダリングされ、他の子要素は display に `none` を設定した状態で保有されます。

**メモ:** 古い MathML 仕様では、レンダラーが利用できる注釈に従って既定のレンダリングを決定することができました。可視の子を決定する以下のルールは、いくつかのブラウザーで実装されています。表示する MathML とコンテンツ MathML の区別については、 MathML 4 を参照してください。

* 適用すべき規則が他にない場合、既定では最初の子要素のみ描画され、これが表示 MathML と見なされます。
* 最初の子要素が `<annotation>` または `<annotation-xml>` 以外の表示 MathML 要素の場合、当要素が描画されます。
* 表示 MathML が見当らない場合、 `src` 属性のない `<semantics>` 要素の最初の `<annotation>` または `<annotation-xml>` 子要素を描画します。 `<annotation-xml>` 要素については、 `encoding` 属性が以下のいずれかの値と等しくなければいけません。
    + `"application/mathml-presentation+xml"`
    + `"MathML-Presentation"`
    + `"SVG1.1"`
    + `"text/html"`
    + `"image/svg+xml"`
    + `"application/xml`".

ここに `"application/mathml+xml"` を挙げて*いない*ことに留意してください、というのもこれでは内容 MathML か表示 MathML かを区別できないからです。

属性
--

`<semantics>`、`<annotation>`、`<annotation-xml>` の各要素はグローバル MathML 属性を受け入れます。さらに、`<annotation>` と `<annotation-xml>` 要素には、以下の属性を設定することができます。

`encoding`

この注釈における意味的情報の符号化方法（例: `"MathML-Content"`, `"MathML-Presentation"`, `"application/openmath+xml"`, `"image/png"`）。

`src`
非推奨

意味的情報の外部ソースの場所。

例
-

```html
<math display="block">
  <semantics>
    <!-- 最初の子は、既定でレンダリングされる MathML 式です。 -->
    <mrow>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>

    <!-- 数式の意味を表現するための専用 XML 方言 "Content MathML" を
 用いて注釈をつけます。 -->
    <annotation-xml encoding="MathML-Content">
      <apply>
        <plus />
        <apply>
          <power />
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>

    <!-- 数式の PNG 画像で注釈を付けます。 -->
    <annotation encoding="image/png" src="some/path/formula.png" />

    <!-- 数式を書くための軽量なマークアップ言語である LaTeX で
 注釈をつけることができます。 -->
    <annotation encoding="application/x-tex"> x^{2} + y </annotation>
  </semantics>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # semantics-and-presentation |

ブラウザー互換機
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<msubsup> - MathML

<msubsup>
=========

**`<msubsup>`** は MathML の要素で、式に下付き文字と上付き文字の両方を一緒に付けるために使用されます。

`<msubsup> ベース 下付き文字 上付き文字 </msubsup>` という構文を使用します。

属性
--

この要素の属性には、グローバル MathML 属性の他、以下の非推奨属性があります。

`subscriptshift`
非推奨

Non-standard

`<length-percentage>`として、下付き文字を式のベースラインより下にシフトするための最小量。

`superscriptshift`
非推奨

Non-standard

`<length-percentage>`として、上付き文字を式のベースラインより上にシフトするための最小量。

**メモ:** `subscriptshift` および `superscriptshift` 属性については、ブラウザーによっては古い MathML の長さも受け入れられるかもしれません。

例
-

```html
<math display="block">
  <msubsup>
    <mo>∫<!--Integral --></mo>
    <mn>0</mn>
    <mn>1</mn>
  </msubsup>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<msub>` (上付き文字)
* `<msup>` (下付き文字)
* `<mmultiscripts>` (前付き文字とテンソルインデックス)


<mn> - MathML

<mn>
====

**`<mn>`** は MathML の要素で、通常は区切り記号（ピリオドかカンマ）をもつ可能性がある数字列である、**数値**リテラルを表します。ただし、 "eleven" のように、実際には数値である任意のテキストを保持することも可能です。

属性
--

この要素はグローバル MathML 属性を受け入れます。

例
-

```html
<math display="block">
  <mn>0</mn>
</math>

<math display="block">
  <mn>1.337</mn>
</math>

<math display="block">
  <mn>twelve</mn>
</math>

<math display="block">
  <mn>XVI</mn>
</math>

<math display="block">
  <mn>2e10</mn>
</math>
```

仕様
--

| Specification |
| --- |
| MathML Core # number-mn |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<msup> - MathML

<msup>
======

**`<msup>`** は MathML の要素で、式に上付き文字を付けるために用います。

`<msup> ベース 上付き文字 </msup>` という構文を使用します。

属性
--

この要素の属性には、グローバル MathML 属性の他、以下の非推奨属性があります。

`superscriptshift`
非推奨

Non-standard

`<length-percentage>`で、上付き文字のベースラインを上に移動させる最小量を示します。

**メモ:** `superscriptshift` 属性については、ブラウザーによっては古い MathML の長さも受け入れられるかもしれません。

例
-
```

<link
 rel="stylesheet"
 href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
```

```html
<math display="block">
  <msup>
    <mi>X</mi>
    <mn>2</mn>
  </msup>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<msub>` （下付き文字）
* `<msubsup>` （上付き文字と下付き文字の組）
* `<mmultiscripts>` (前付き文字とテンソルインデックス)


<merror> - MathML

<merror>
========

MathML `<merror>` 要素は、エラーメッセージとしてコンテンツを表示するために使用されます。Firefox でこのエラーメッセージは、典型的な XML エラーメッセージのようにレンダリングされます。MathML マークアップが間違っているか整形式でない XML のときに、このエラーがスロー**されない**ことに注意してください。`<merror>` とは何の関係もない、（MathML の XHTML 表記の場合に）依然として XML 解析エラーが発生します。

属性
--

class, id, style

スタイルシートと一緒に用いて提供されます。

href

指定された URI へのハイパーリンクの設定に使用されます。

mathbackground

背景色。`#rgb`、`#rrggbb`およびHTML 色名を使用できます。

mathcolor

文字色と分数の線の色。`#rgb`、`#rrggbb`およびHTML 色名を使用できます。

例
-

```html
<math>
  <merror>
    <mrow>
      <mtext> Division by zero: </mtext>
      <mfrac>
        <mn> 1 </mn>
        <mn> 0 </mn>
      </mfrac>
    </mrow>
  </merror>
</math>
```

仕様
--

| Specification |
| --- |
| MathML Core # error-message-merror |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mphantom> - MathML

<mphantom>
==========

MathML の `<mphantom>` 要素は、表示上は不可視だが一定の広がり（高さ、幅、ベースライン位置）を維持した要素です。

属性
--

class, id, style

Provided for use with stylesheets.

mathbackground

背景色。`#rgb`, `#rrggbb` および HTML color names を用いることができる。

例
-

Sample rendering:
 ![x+ z](/ja/docs/Web/MathML/Element/mphantom/mphantom.png)

Rendering in your browser:

x
+

y
+

z

```html
<math>
  <mrow>
    <mi> x </mi>
    <mo> + </mo>
    <mphantom>
      <mi> y </mi>
      <mo> + </mo>
    </mphantom>
    <mi> z </mi>
  </mrow>
</math>
```

仕様
--

| Specification |
| --- |
| MathML Core # making-sub-expressions-invisible-mphantom |

ブラウザーごとの互換性
-----------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<mspace>`
* `<mpadded> (en-US)`


<mo> - MathML

<mo>
====

**`<mo>`** は MathML の要素で、広い意味の**演算子**を表します。厳密に数学的な意味の演算子のほかに、括弧類やカンマ、セミコロンといった区切り記号、絶対値の縦棒などの「演算子」も含みます。

属性
--

グローバル MathML 属性に加えて、この要素は演算子の形状や内容による既定値をもつ以下の属性を受け入れます。

`accent`
Non-standard

`<boolean>` で、この演算子が下の文字または上の文字として使用されたときに、アクセントとして処理されるべきか（つまり、基本式に対して大きく描画され、より近くなるべきか）どうかを示す。

`fence`

`<boolean>` で、演算子がフェンス（括弧など）であるかどうかを示す。この属性には視覚的な効果はありません。

`lspace`

`<length-percentage>` で、演算子の前の空間の量を示します。

`maxsize`

`<length-percentage>` で、伸縮するときの演算子の最大サイズを示します。

`minsize`

`<length-percentage>` で、伸縮するときの演算子の最小サイズを示します。

`movablelimits`

`<boolean>` で、 `math-style` が `compact` に設定されているときに、下・上の文字が下・上付き文字に移動するかどうかを示します。

`rspace`

`<length-percentage>` で、演算子の後の空間の量を示します。

`separator`

`<boolean>` で、この演算子が区切り記号（カンマなど）であるかどうかを示します。この属性には視覚的な効果はありません。

`stretchy`

`<boolean>` で、演算子が隣接する要素のサイズに伸縮するかどうかを示します。

`symmetric`

`<boolean>` で、伸縮する演算子が仮想数式軸（中央の分数線）を中心に上下対称であるべきであるかどうかを示します。

**メモ:** `lspace`、`maxsize`、`minsize`、`rspace` 属性については、一部のブラウザーは古い MathML における長さも受け入れることがあります。

例
-

```html
<math display="block">
  <mrow>
    <mn>5</mn>
    <mo>+</mo>
    <mn>5</mn>
  </mrow>
</math>

<math display="block">
  <mrow>
    <mo>[</mo>
    <!-- default form value: prefix -->
    <mrow>
      <mn>0</mn>
      <mo>;</mo>
      <!-- default form value: infix -->
      <mn>1</mn>
    </mrow>
    <mo>)</mo>
    <!-- default form value: postfix -->
  </mrow>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # operator-fence-separator-or-accent-mo |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mtr> - MathML

<mtr>
=====

MathML の `<mtr>` 要素は表組・行列の行を表します。`<mtable>` 要素の中にしか現れません。この要素は HTML の `<tr>` 要素に似ています。

属性
--

class, id, style

Provided for use with stylesheets.

columnalign

`<mtable>` で指定された、セルの水平方向の揃えの値をこの行について上書きします。
 取り得る値は `left`, `center`, `right` です。

groupalign

href

Used to set a hyperlink to a specified URI.

mathbackground

The background color. You can use `#rgb`, `#rrggbb` and HTML color names.

mathcolor

The text color. You can use `#rgb`, `#rrggbb` and HTML color names.

rowalign

`<mtable>` で指定された、セルの垂直方向の揃えをこの行について上書きします。
 取り得る値は `axis`, `baseline`, `bottom`, `center`, `top` です。

仕様
--

| Specification |
| --- |
| MathML Core # row-in-table-or-matrix-mtr |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<mtable>`
* `<mtd>`


<mspace> - MathML

<mspace>
========

**`<mspace>`** は MathML の要素で、空白を作るために使われます。空白のサイズは属性で指定します。

属性
--

この要素の属性は、グローバル MathML 属性と共に以下の属性があります。

`depth`

`<length-percentage>` で、この空間の希望する（ベースライン以下の）空間を示します。

`height`

`<length-percentage>` で、この空間の希望する（ベースラインの上の）高さを示します。

`width`

`<length-percentage>` で、この空間の希望の幅を示します。

**メモ:** `depth`、`height`、`width` 属性については、一部のブラウザーは古い MathML における長さも受け入れることがあります。

例
-

```html
<math display="block">
  <mn>1</mn>
  <mspace
 depth="40px"
 height="20px"
 width="100px"
 style="background: lightblue;" />
  <mn>2</mn>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # space-mspace |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<mpadded> (en-US)`
* `<mphantom>`


<munder> - MathML

<munder>
========

MathML の `<munder>` 要素は式の下にアクセントや範囲を付けるために使用します。これは `<munder> base underscript </munder>` のように使用します。

属性
--

accentunder

`true` の場合、その要素は*アクセント*となり、ベース式により近く描画されます。
 `false` （既定値）の場合、この要素はベース式の下の*範囲*になります。

align
非推奨

 下に付ける文字の配置です。指定可能な値は `left`, `center`, `right` です。
 この属性は非推奨であり、将来削除される予定です。代わりに CSS の `text-align` を使用してください。

class, id, style

スタイルシートを使用するために提供されています。

`displaystyle`

論理値で、表示される数式にもっと縦の空間を使うかどうかを指定します。 `false` に設定すると、よりコンパクトなレイアウトで数式が表示されます。主な効果は、 `displaystyle` が `true` に設定されている場合、演算子をより大きく表示することです。 `<mo>` の `movablelimits` も参照してください。

href

指定された URI へのハイパーリンクを設定するために使用します。

mathbackground

背景色です。 `#rgb` や `#rrggbb`、 HTML 色名を使用することができます。

mathcolor

テキスト色です。 `#rgb` や `#rrggbb`、 HTML 色名を使用することができます。

例
-

レンダリング例:
 ![x+y+z](/ja/docs/Web/MathML/Element/munder/munder.png)

このブラウザーでのレンダリング:

x
+
y
+
z

⏟

```html
<math>
  <munder accentunder="true">
    <mrow>
      <mi> x </mi>
      <mo> + </mo>
      <mi> y </mi>
      <mo> + </mo>
      <mi> z </mi>
    </mrow>
    <mo>
      ⏟
      <!--BOTTOM CURLY BRACKET-->
    </mo>
  </munder>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<mover>` (上の表記)
* `<munderover> (en-US)` (下の表記と上の表記の組)


<mtext> - MathML

<mtext>
=======

**`<mtext>`** は MathML の要素で、コメントや注釈などの表記の意味を*もたない*任意のテキストをレンダリングするために使用されます。

表記の意味*で*テキストを表示するには、 `<mi>` や `<mo>` を代わりに使用してください。

属性
--

この属性はグローバル MathML 属性を受け入れます。

例
-

```html
<math display="block">
  <mtext>ピタゴラスの定理</mtext>
</math>

<math display="block">
  <mtext>/* ここにコメント */</mtext>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # text-mtext |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mfrac> - MathML

<mfrac>
=======

MathML の `<mfrac>` 要素は分数を表示するのに使います。

構文
--
```

<mfrac>numerator denominator</mfrac>
```

属性
--

`bevelled`
非推奨

 分数を表示する方法を指定します。`true` のとき分数線は斜線になります。つまりこの場合、分子・分母がスラッシュ (/) を挟んで左右に並ぶことになります。既定値の `false` の場合、分子は分母の上に載ります。
 この属性は、非推奨で将来削除される予定です。代わりに U+2044 (fraction slash) を使用してください。

`class`, `id`, `style`

スタイルシート で装飾を行なう際に使われます。

`denomalign`
非推奨

 分数の下に分母をどう揃えるかを指定します。取り得る値は `left`、`center` (既定値) と `right` です。
 この属性は、非推奨で近日中に廃止されます。代わりに CSS を用いて `text-align` を指定してください。

`href`

特定の URI へのハイパーリンクを設定するのに使われます。

`linethickness`

分数の水平線の太さ。既定値は `medium` で、`thin`、`thick` や、それ以外の length 値 が取り得ます。

`mathbackground`

数式の背景色を指定するために使われます。`#rgb`、`#rrggbb`のような 16 進表現のほか、HTML で定められた色キーワードを使用できます。

`mathcolor`

数式自体 (テキストと分数線) の色を設定するために使われます。`#rgb`、`#rrggbb` のような 16 進表現のほか、HTML で定められた色キーワードを使用できます。

`numalign`
非推奨

 分数の上に分子をどう揃えるかを指定します。取り得る値は `left`、`center` (既定値) と `right` です。
 この属性は、非推奨で将来削除される予定です。代わりに CSS の `text-align` を使用してください。

例
-

レンダリングのサンプル (画像):
 ![(a/b)/(c/d)](/ja/docs/Web/MathML/Element/mfrac/mfrac.png)

ブラウザーのレンダリング結果:

a
b

c
d

```html
<math>
  <mfrac bevelled="true">
    <mfrac>
      <mi> a </mi>
      <mi> b </mi>
    </mfrac>
    <mfrac>
      <mi> c </mi>
      <mi> d </mi>
    </mfrac>
  </mfrac>
</math>
```

仕様
--

| Specification |
| --- |
| MathML Core # fractions-mfrac |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mroot> - MathML

<mroot>
=======

MathML の `<mroot>` 要素は根指数の付いた累乗根を表示するのに用いられます。引数は二つあり，構文は `<mroot> 基数 根指数 </mroot>` となります。

属性
--

class, id, style

スタイルシートで使用するために使います。

`displaystyle`

論理値で、数式を表示する際に上下に余白を追加するかどうかを指定します。 `false` に設定すると、数式を表示するのによりコンパクトなレイアウトを使用します。 `displaystyle` を `true` に設定する主な効果は、演算子をより大きく表示することです。 `<mo>` の `largeop` および `movablelimits` も参照してください。

href

指定された URL へのハイパーリンクを設定するために使われます。

mathbackground

背景色を指定します。 `#rgb` や `#rrggbb` のような 16 進表現やHTML 色名を用いることができます

mathcolor

文字や記号自体の色を指定します。 `#rgb` や `#rrggbb` のような 16 進表現や HTML color 色名を用いることができます

例
-

レンダリングのサンプル(画像):
 ![x](/ja/docs/Web/MathML/Element/mroot/mroot.png)

ブラウザのレンダリング結果:

x
3

```html
<math>
  <mroot>
    <mi>x</mi>
    <mn>3</mn>
  </mroot>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # radicals-msqrt-mroot |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<msqrt>` (根指数のない平方根)


<menclose> - MathML

<menclose>
==========

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`<menclose>`** は MathML の要素で、 `notation` 属性で指定された記法を囲むように内容を表示します。

属性
--

この要素の属性には、グローバル MathML 属性があります。

`notation`
Non-standard

子要素に適用する表記を空白で区切ったリストです。記号はそれぞれ、あたかも他の記号が存在しないかのように描画されるため、重なる可能性があります。指定可能な値は以下の通りです。

| 値 | サンプルレンダリング | このブラウザーでのレンダリング | 説明 |
| --- | --- | --- | --- |
| `longdiv` （既定値） | longdiv |

a
2

+

b
2

 | 長い部分の記号 |
| `actuarial` | actuarial |

a
2

+

b
2

 | アクチュアリー記法 |
| `box` | box |

a
2

+

b
2

 | ボックス |
| `roundedbox` | roundedbox |

a
2

+

b
2

 | 角丸ボックス |
| `circle` | circle |

a
2

+

b
2

 | 楕円 |
| `left` | left |

a
2

+

b
2

 | コンテンツの左側線 |
| `right` | right |

a
2

+

b
2

 | コンテンツの右側線 |
| `top` | top |

a
2

+

b
2

 | コンテンツの上線 |
| `bottom` | bottom |

a
2

+

b
2

 | コンテンツの下線 |
| `updiagonalstrike` | updiagonalstrike |

a
2

+

b
2

 | コンテンツ上の左下から右上に向けた取り消し線 |
| `downdiagonalstrike` | downdiagonalstrike |

a
2

+

b
2

 | コンテンツ上の左上から右下に向けた取り消し線 |
| `verticalstrike` | verticalstrike |

a
2

+

b
2

 | コンテンツ上の垂直取り消し線 |
| `horizontalstrike` | horizontalstrike |

a
2

+

b
2

 | コンテンツ上の水平取り消し線 |
| `madruwb` | madruwb |

a
2

+

b
2

 | アラビアの階乗記号 |
| `updiagonalarrow` | Arrow pointing up and to the right. |

a
2

+

b
2

 | 斜め矢印 |
| `phasorangle` | Screenshot of the phasorangle notation |

a
2

+

b
2

 | フェザー角 |

例
-

```html
<math display="block">
  <menclose notation="circle box">
    <mi>x</mi>
    <mo>+</mo>
    <mi>y</mi>
  </menclose>
</math>
```

仕様書
---

` 要素はブラウザー向けの仕様書では定義されていませんが、 MathML 4 に記述があります。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mmultiscripts> - MathML

<mmultiscripts>
===============

**`<mmultiscripts>`** は MathML の要素で、 `<msubsup>` 要素を一般化して、式に任意の数の下付き添え字と上付き添え字を一度に付けるために使用されます。スクリプトは、プレスクリプト（式の前に配置）またはポストスクリプト（式の後に配置）のいずれかになります。

MathML は以下の構文を使用します。つまり、基本式に任意の数の後下付き添え字と後上付き添え字の組（指定された順序で付加される）が続き、オプションで `<mprescripts>` と任意の数の前下付き添え字と前上付き添え字の組（指定された順序で付加される）が続きます。さらに、空の `<mrow>` 要素を使用して、存在しないスクリプトを表すことができます。

```html
<mmultiscripts>
  base
  後下付き添え字1 後上付き添え字1
  後下付き添え字2 後上付き添え字2
  後下付き添え字3 後上付き添え字3
  ...
  後下付き添え字N 後上付き添え字N
  <mprescripts/>                  ⎫
  前下付き添え字1 前上付き添え字1 ⎪
  前下付き添え字2 前上付き添え字2 ⎬ オプション
  前下付き添え字3 前上付き添え字3 ⎪
  ...                             ⎪
  前下付き添え字M 前上付き添え字M ⎭
</mmultiscripts>
```

属性
--

この要素の属性には、グローバル MathML 属性の他に以下の属性があります。

`subscriptshift`
非推奨

Non-standard

`<length-percentage>` で、式のベースラインより下に添字を移動させる最小の空間を示します。

`superscriptshift`
非推奨

`<length-percentage>` で、式のベースライン上に上付き文字を移動させる最小の空間を示します。

**メモ:** `subscriptsshift` 属性と `superscriptsshift` 属性については、ブラウザーによっては MathML における古い長さも受け付けます。

例
-

### `<mprescripts/>` の使用

`<mprescripts/>` 要素以降の子要素はプレスクリプト（ベースとなる式の前）として置かれます。

```html
<math display="block">
  <mmultiscripts>
    <mi>X</mi>      <!-- 基部 -->
    <mi>d</mi>      <!-- 後の下付き文字-->
    <mi>c</mi>      <!-- 後の上付き文字 -->
    <mprescripts />
    <mi>b</mi>      <!-- 前の下付き文字 -->
    <mi>a</mi>      <!-- 前の上付き文字 -->
  </mmultiscripts>
</math>
```

### `<none/> の使い方`

空の `<mrow>` 要素は、スクリプトがないことを表します。

```html
<math display="block">
  <mmultiscripts>
    <mi>X</mi>      <!-- 基部 -->
    <mrow></mrow>   <!-- 後の下付き文字 -->
    <mi>c</mi>      <!-- 後の上付き文字 -->
    <mprescripts />
    <mi>b</mi>      <!-- 前の下付き文字 -->
    <mrow></mrow>   <!-- 前の上付き文字 -->
  </mmultiscripts>
</math>
```

### スクリプトの順序

ここでは、より複雑なスクリプトの例をいくつか紹介しますので、スクリプトがどのような順番でベースに添付されるかをご覧ください。

```html
<math display="block">
  <mmultiscripts>
    <mtext>base</mtext>
    <mtext>postsubscript1</mtext>
    <mtext>postsupscript1</mtext>
    <mtext>postsubscript2</mtext>
    <mtext>postsupscript2</mtext>
    <mtext>postsubscript3</mtext>
    <mtext>postsupscript3</mtext>
    <mtext>postsubscript4</mtext>
    <mtext>postsupscript4</mtext>
    <mprescripts />
    <mtext>presubscript1</mtext>
    <mtext>presupscript1</mtext>
    <mtext>presubscript2</mtext>
    <mtext>presupscript2</mtext>
    <mtext>presubscript3</mtext>
    <mtext>presupscript3</mtext>
  </mmultiscripts>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # prescripts-and-tensor-indices-mmultiscripts |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<msub>`（下付き）
* `<msup>`（上付き）
* `<msubsup>`（下付き／上付きの組）


<mi> - MathML

<mi>
====

**`<mi>`** は MathML の要素で、内容が関数名、変数、記号定数などの **識別子** としてレンダリングされることを示します。また、用語をマークアップするために、任意のテキストを保持することもできます。

属性
--

この要素はグローバル MathML 属性を受け入れます。 単一の文字を含む `<mi>` 要素では、 `mathvariant` (en-US) 属性の既定値が `italic` になります。

例
-

```html
<math display="block">
  <!-- Multiple characters, default mathvariant is "normal". -->
  <mi>sin</mi>
</math>

<math display="block">
  <!-- Single character, default mathvariant is "italic". -->
  <mi>y</mi>
</math>

<math display="block">
  <!-- Overriding default mathvariant. -->
  <mi mathvariant="normal">F</mi>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # dfn-mi |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mfenced> - MathML

<mfenced>
=========

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`<mfenced>`** は MathML の要素で、独自の括弧類（角括弧など）や区切り記号（カンマやセミコロンなど）を数式に追加する機能を提供します。

**メモ:** 歴史的には、 `<mfenced>` 要素はフェンス式を書くための省略記法として定義され、 `<mrow> (en-US)` と `<mo>` 要素を含む展開形に等しいものでした。現在では、代わりにその等価な形式を使用することが推奨されています。

属性
--

この要素の属性にはグローバル MathML 属性があります。

`close`

閉じ記号の文字列です。既定値は `")"` です。ホワイトスペースはすべて削除されます。

`open`

開き記号の文字列です。既定値は `"("` です。ホワイトスペースはすべて削除されます。

`separators`

区切り記号を表すゼロ個以上の文字の列です。ホワイトスペースで区切っても構いません（無視されます）。既定値は "," です。複数指定することにより，各子要素間に別個の区切り記号を当てることが出来ます。余分に指定した分は無視されます。少なく指定した場合は，最後のものが繰り返されます。

例
-

### 最後の区切り記号 (`,`) は繰り返される

```html
<math display="block">
  <mfenced open="{" close="}" separators=";;,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```

レンダリング例:
 ![{a;b;c,d,e}](/ja/docs/Web/MathML/Element/mfenced/mfenced01.png)

このブラウザーでのレンダリング:

### 余分な区切り記号 (`,`) は無視される

```html
<math display="block">
  <mfenced open="[" close="]" separators="||||,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```

レンダリング例:
 ![[a|b|c|d|e]](/ja/docs/Web/MathML/Element/mfenced/mfenced02.png)

このブラウザーでのレンダリング:

仕様書
---

`<mfenced>` はブラウザーに向けた仕様書にはどこにも定義されていませんが、 MathML 4 に説明が見られます。

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<msub> - MathML

<msub>
======

**`<msub>`** は MathML の要素で、式に下付き文字を付けるために用います。

`<msub> ベース 下付き文字 </msub>` という構文を使用します。

属性
--

この要素の属性には、グローバル MathML 属性の他、以下の非推奨属性があります。

`subscriptshift`
非推奨

Non-standard

`<length-percentage>` で、下付き文字部分を本体のベースラインから下げる最小量を示します。

**メモ:** `superscriptshift` 属性については、ブラウザーによっては古い MathML の長さも受け入れられるかもしれません。

例
-

```html
<math display="block">
  <msub>
    <mi>X</mi>
    <mn>1</mn>
  </msub>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # subscripts-and-superscripts-msub-msup-msubsup |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<msub>` (上付き文字)
* `<msubsup>` (上付き文字と下付き文字の組)
* `<mmultiscripts>` (前付き文字とテンソルインデックス)


<mtable> - MathML

<mtable>
========

MathML の `<mtable>` 要素は表や行列を作るのに使えます。`<mtable>` の中には `<mtr>` と `<mtd>` のみが書けます。これらの要素の関係は，HTML の`<table>`，`<tr>` と `<td>` の関係に似ています。

属性
--

この要素の属性にはグローバル MathML 属性があります。一部のブラウザーは以下の属性にも対応していることがあります。

`align`
Non-standard

 環境に対する表の**垂直**の配置を指定します。
 使用可能な値は以下の通りです。

* `axis` （既定値）: 表の垂直方向の中心が環境の軸（通常はマイナス記号）に配置される。
* `baseline`: 表の垂直方向の中心が、環境のベースライン上に配置されます。
* `bottom`: 表の下端が、環境のベースライン上に配置されます。
* `center`: baseline を参照。
* `top`: 表の上端が、環境のベースライン上に配置されます。

さらに、 `align` 属性の値は*行番号*で終えることができます（例: `align="center 3"`）。 これにより、表全体ではなく、指定した行の位置を揃えることができます。負の整数値にすると、表の下端から行数を数えます。

`columnalign`
Non-standard

セル内の水平方向の揃えを指定します。スペース区切りで複数の値を書くこともでき，その場合，対応する列に適用されます（例: `columnalign="left right center"`）。使用可能な値は `left`、`center`（既定値）、`right` です。

`columnlines`
Non-standard

列間罫線を指定します。スペース区切りで複数の値を書くこともでき，その場合、対応する列の間に適用されます（例: `columnlines="none none solid"`）。使用可能な値は `none`（既定値）、`solid`、`dashed` です。

`columnspacing`
Non-standard

表の列の間の空間を指定します。スペースで区切られた複数の値を指定することができ、対応する列に適用されます（例: `columnspacing="1em 2em"`）。使用可能な値は `<length-percentage>` です。

`frame`
Non-standard

表全体の枠線を指定します。使用可能な値は、 `none`（既定値）、`solid`、`dashed` です。

`framespacing`
Non-standard

表とフレームの間に追加される空間を指定します。 1 つ目の値は、右と左の空間を指定し、 2 つ目の値は、上と下の空間を指定します。使用可能な値は `<length-percentage>` です。

`rowalign`
Non-standard

セルの垂直方向の揃えを指定します。スペース区切りで複数の値を書くこともでき、その場合、対応する行に適用されます（例: `rowalign="top bottom axis"`）。使用可能な値は `axis`、`baseline`（既定値）、`bottom，center`、`top` です。

`rowlines`
Non-standard

行間罫線を指定します。スペース区切りで複数の値を書くこともでき，その場合、対応する列の間に適用されます。（例: `rowlines="none none solid"`）。使用可能な値は `none`（既定値）、`solid`、`dashed` です。

`rowspacing`
Non-standard

表の行間の空間を指定します。スペースで区切られた複数の値を指定でき、対応する行に適用されます（例: `rowspacing="1em 2em"`）。使用可能な値は `<length-percentage>` です。

`width`
Non-standard

表全体の幅を示す `<length-percentage>` を指定します。

**メモ:** `width` 属性については、ブラウザーによっては古い MathML の長さも受け入れられるかもしれません。

例
-

### 行番号で揃える

```html
<math display="block">
  <mi>X</mi>
  <mo>=</mo>
  <mtable frame="solid" rowlines="solid" align="axis 3">
    <mtr>
      <mtd><mi>A</mi></mtd>
      <mtd><mi>B</mi></mtd>
    </mtr>
    <mtr>
      <mtd><mi>C</mi></mtd>
      <mtd><mi>D</mi></mtd>
    </mtr>
    <mtr>
      <mtd><mi>E</mi></mtd>
      <mtd><mi>F</mi></mtd>
    </mtr>
  </mtable>
</math>
```

仕様書
---

| Specification |
| --- |
| MathML Core # table-or-matrix-mtable |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<mtd>` （表のセル）
* `<mtr>` （表の行）


<math> - MathML

<math>
======

**`<math>`** は最上位の MathML 要素で、一つの数式を記述するのに使われます。これはフローコンテンツが許可されている HTML コンテンツに置くことができます。

**メモ:** MathML の数式をウェブページに適切に統合するためのヒントについては MathML の記述ページを、その他のデモについては 例ページを参照してください。

属性
--

この要素の属性には、グローバル MathML 属性の他に以下の属性があります。

`display`

この列挙属性は、囲まれた MathML マークアップをレンダリングする方法を指定します。これは、次のいずれかの値を取ることができます。

* `block` は、この要素が現在のテキストのスパンの外にある独自のブロックに表示され、 `math-style` が `normal` に設定されていることを意味します。
* `inline` は、この要素が現在のテキストのスパンの中に表示され、 `math-style` が `compact` に設定されていることを意味します。

存在しない場合、既定値は `inline` です。

例
-

この例には 2 つの MathML 式が含まれています。最初のものは、必要なだけのスペースをとって、中央のブロック内に表示されます。 2 番目のものは、高さを最小にするためにサイズと間隔を狭めて、テキストの段落の中に表示されます。

```html
<p>
  The infinite sum
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  is equal to the real number
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac></math
 >.
</p>
```

仕様書
---

| Specification |
| --- |
| MathML Core # the-top-level-math-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML の最上位要素: `<html>`
* SVG の最上位要素: `<svg>`