From 723e0f4d0ad287765a04dc6ab3a26fbafdf574cd Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 22 Aug 2022 04:58:08 +0900 Subject: [PATCH] =?UTF-8?q?web/api=20=E4=BB=A5=E4=B8=8B=E3=82=92=20md=20?= =?UTF-8?q?=E3=81=B8=E4=B8=80=E6=8B=AC=E5=A4=89=E6=8F=9B=204?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/animationevent/elapsedtime/index.md | 45 +- files/ja/web/api/animationevent/index.md | 75 +-- .../bytelengthqueuingstrategy/index.md | 81 ++- .../api/bytelengthqueuingstrategy/index.md | 81 ++- .../bytelengthqueuingstrategy/size/index.md | 77 ++- .../canvascapturemediastreamtrack/index.md | 61 +-- .../requestframe/index.md | 63 +-- files/ja/web/api/canvaspattern/index.md | 51 +- .../api/canvaspattern/settransform/index.md | 104 ++-- .../clearhitregions/index.md | 74 ++- .../removehitregion/index.md | 82 ++- .../countqueuingstrategy/index.md | 83 ++- .../ja/web/api/countqueuingstrategy/index.md | 82 ++- .../api/countqueuingstrategy/size/index.md | 75 ++- files/ja/web/api/crypto/index.md | 61 +-- files/ja/web/api/crypto/subtle/index.md | 47 +- .../childelementcount/index.md | 35 +- files/ja/web/api/documentfragment/index.md | 153 ++---- files/ja/web/api/domexception/index.md | 251 ++++----- files/ja/web/api/domexception/name/index.md | 40 +- files/ja/web/api/federatedcredential/index.md | 75 ++- .../api/federatedcredential/protocol/index.md | 45 +- files/ja/web/api/frame_timing_api/index.md | 54 +- .../using_the_frame_timing_api/index.md | 100 ++-- files/ja/web/api/history_api/example/index.md | 237 +++++---- files/ja/web/api/history_api/index.md | 143 +++-- files/ja/web/api/idbrequest/index.md | 147 +++--- .../web/api/idbrequest/success_event/index.md | 87 +-- files/ja/web/api/inputevent/index.md | 63 +-- .../ja/web/api/inputevent/inputtype/index.md | 92 ++-- .../constraints/index.md | 496 +++++++++--------- .../media_capture_and_streams_api/index.md | 82 ++- .../api/media_source_extensions_api/index.md | 121 ++--- .../transcoding_assets_for_mse/index.md | 121 +++-- .../api/offscreencanvas/getcontext/index.md | 145 ++--- files/ja/web/api/offscreencanvas/index.md | 125 +++-- files/ja/web/api/path2d/addpath/index.md | 67 +-- files/ja/web/api/path2d/index.md | 87 ++- files/ja/web/api/path2d/path2d/index.md | 99 ++-- .../ja/web/api/performance_timeline/index.md | 80 ++- .../using_performance_timeline/index.md | 86 +-- files/ja/web/api/permissions_api/index.md | 93 ++-- .../using_the_permissions_api/index.md | 94 ++-- files/ja/web/api/resource_timing_api/index.md | 72 ++- .../using_the_resource_timing_api/index.md | 94 ++-- files/ja/web/api/sharedworker/index.md | 100 ++-- files/ja/web/api/sharedworker/port/index.md | 57 +- .../connect_event/index.md | 99 ++-- .../web/api/sharedworkerglobalscope/index.md | 205 ++++---- files/ja/web/api/sourcebufferlist/index.md | 77 +-- .../web/api/sourcebufferlist/length/index.md | 51 +- .../api/speechrecognitionalternative/index.md | 76 ++- .../transcript/index.md | 79 ++- .../web/api/speechrecognitionresult/index.md | 83 ++- .../speechrecognitionresult/isfinal/index.md | 69 ++- .../web/api/speechsynthesisutterance/index.md | 147 +++--- .../speechsynthesisutterance/lang/index.md | 80 ++- files/ja/web/api/storage_access_api/index.md | 94 ++-- .../web/api/storage_access_api/using/index.md | 42 +- files/ja/web/api/subtlecrypto/digest/index.md | 140 ++--- files/ja/web/api/subtlecrypto/index.md | 97 ++-- .../api/svggraphicselement/getbbox/index.md | 90 ++-- files/ja/web/api/svggraphicselement/index.md | 65 +-- .../api/texttrack/cuechange_event/index.md | 115 ++-- files/ja/web/api/texttrack/index.md | 148 +++--- files/ja/web/api/texttrack/mode/index.md | 121 ++--- files/ja/web/api/timeranges/end/index.md | 65 +-- files/ja/web/api/timeranges/index.md | 55 +- files/ja/web/api/timeranges/length/index.md | 52 +- files/ja/web/api/touchlist/index.md | 67 +-- files/ja/web/api/touchlist/length/index.md | 31 +- files/ja/web/api/trackevent/index.md | 82 +-- files/ja/web/api/trackevent/track/index.md | 45 +- .../ja/web/api/trackevent/trackevent/index.md | 74 +-- files/ja/web/api/transitionevent/index.md | 127 ++--- .../transitionevent/pseudoelement/index.md | 45 +- files/ja/web/api/vttcue/index.md | 119 ++--- files/ja/web/api/vttcue/vttcue/index.md | 59 +-- files/ja/web/api/web_speech_api/index.md | 180 +++---- .../using_the_web_speech_api/index.md | 311 ++++++----- files/ja/web/api/web_storage_api/index.md | 119 ++--- .../using_the_web_storage_api/index.md | 195 ++++--- files/ja/web/api/xmldocument/async/index.md | 26 +- files/ja/web/api/xmldocument/index.md | 63 +-- files/ja/web/api/xpathresult/index.md | 179 +++---- .../web/api/xpathresult/snapshotitem/index.md | 86 ++- .../boundsgeometry/index.md | 61 +-- .../web/api/xrboundedreferencespace/index.md | 53 +- .../web/api/xrinputsource/gripspace/index.md | 80 +-- files/ja/web/api/xrinputsource/index.md | 107 ++-- .../web/api/xrinputsource/profiles/index.md | 69 +-- .../getoffsetreferencespace/index.md | 114 ++-- .../api/xrreferencespace/reset_event/index.md | 125 ++--- .../ja/web/api/xrreferencespaceevent/index.md | 61 +-- .../referencespace/index.md | 39 +- .../xrreferencespaceevent/transform/index.md | 52 +- .../api/xsltprocessor/basic_example/index.md | 71 +-- files/ja/web/api/xsltprocessor/index.md | 213 +++----- .../web/api/xsltprocessor/resources/index.md | 18 +- 99 files changed, 4100 insertions(+), 5504 deletions(-) diff --git a/files/ja/web/api/animationevent/elapsedtime/index.md b/files/ja/web/api/animationevent/elapsedtime/index.md index 397c8652e8b9aa..ee6d07fb7a6846 100644 --- a/files/ja/web/api/animationevent/elapsedtime/index.md +++ b/files/ja/web/api/animationevent/elapsedtime/index.md @@ -12,41 +12,28 @@ tags: - プロパティ translation_of: Web/API/AnimationEvent/elapsedTime --- -
{{SeeCompatTable}}{{ apiref("Web Animations API") }}
+{{SeeCompatTable}}{{ apiref("Web Animations API") }} -

AnimationEvent.elapsedTime は読み取り専用のプロパティで、アニメーションが開始されてからの秒数を float 型で表します。このイベントが発生したとき、アニメーションが停止した場合を除いて常に設定されます。 {{domxref("HTMLElement/animationstart_event", "animationstart")}} イベントにおいては elapsedTime は 0.0 になりますが、 {{cssxref("animation-delay")}} が負の値の場合は、このイベントは elapsedTime が (-1 * 待ち時間) であるときに発生します。.

+**`AnimationEvent.elapsedTime`** は読み取り専用のプロパティで、アニメーションが開始されてからの秒数を `float` 型で表します。このイベントが発生したとき、アニメーションが停止した場合を除いて常に設定されます。 {{domxref("HTMLElement/animationstart_event", "animationstart")}} イベントにおいては `elapsedTime` は `0.0` になりますが、 {{cssxref("animation-delay")}} が負の値の場合は、このイベントは `elapsedTime` が `(-1 * `_待ち時間_`)` であるときに発生します。. -

構文

+## 構文 -
time = AnimationEvent.elapsedTime
+``` +time = AnimationEvent.elapsedTime +``` -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Animations', '#dom-animationevent-elapsedtime', 'AnimationEvent.elapsedTime') }}{{ Spec2('CSS3 Animations')}}初回定義
+| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------- | +| {{ SpecName('CSS3 Animations', '#dom-animationevent-elapsedtime', 'AnimationEvent.elapsedTime') }} | {{ Spec2('CSS3 Animations')}} | 初回定義 | -

ブラウザーの互換性

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

{{Compat("api.AnimationEvent.elapsedTime")}}

+{{Compat("api.AnimationEvent.elapsedTime")}} -

関連情報

+## 関連情報 - +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- アニメーションに関する CSS プロパティと @ 規則: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. +- 所属先の {{domxref("AnimationEvent")}} インターフェイス diff --git a/files/ja/web/api/animationevent/index.md b/files/ja/web/api/animationevent/index.md index 4db188602d8a32..313ee7aa6c177d 100644 --- a/files/ja/web/api/animationevent/index.md +++ b/files/ja/web/api/animationevent/index.md @@ -11,67 +11,46 @@ tags: - インターフェイス translation_of: Web/API/AnimationEvent --- -
{{SeeCompatTable}}{{APIRef("Web Animations API")}}
+{{SeeCompatTable}}{{APIRef("Web Animations API")}} -

AnimationEvent インターフェイスは、アニメーションに関する情報を提供するイベントを表します。

+**`AnimationEvent`** インターフェイスは、[アニメーション](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)に関する情報を提供するイベントを表します。 -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -

コンストラクター

+## コンストラクター -
-
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
-
指定された引数で AnimationEvent イベントを生成します。
-
+- {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}} + - : 指定された引数で `AnimationEvent` イベントを生成します。 -

プロパティ

+## プロパティ -

親の {{domxref("Event")}} から継承されるプロパティもあります。

+_親の {{domxref("Event")}} から継承されるプロパティもあります_。 -
-
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
-
{{domxref("DOMString")}} で、この変化に関連付けられた {{cssxref("animation-name")}} CSS プロパティの値を含みます。
-
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
-
float 値で、アニメーションが実行された時間の長さを秒単位で表し、イベントが発生したときは、アニメーションが停止していた時間は除外されます。 animationstart イベントでは、 elapsedTime は、ふつう 0.0 となりますが、 {{cssxref("animation-delay")}} が負の値であった場合は例外で、この場合はイベントは elapsedTime に (-1 * delay) が入った状態でイベントが発生します。
-
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
-
{{domxref("DOMString")}} で、 '::' で始まり、アニメーションが実行される 疑似要素 の名前が入ります。このアニメーションが疑似要素ではなく要素で実行されている場合は、空文字列 '' になります。
-
+- {{domxref("AnimationEvent.animationName")}} {{readonlyInline}} + - : {{domxref("DOMString")}} で、この変化に関連付けられた {{cssxref("animation-name")}} CSS プロパティの値を含みます。 +- {{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}} + - : `float` 値で、アニメーションが実行された時間の長さを秒単位で表し、イベントが発生したときは、アニメーションが停止していた時間は除外されます。 `animationstart` イベントでは、 `elapsedTime` は、ふつう `0.0` となりますが、 {{cssxref("animation-delay")}} が負の値であった場合は例外で、この場合はイベントは `elapsedTime` に `(-1 * delay)` が入った状態でイベントが発生します。 +- {{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}} + - : {{domxref("DOMString")}} で、 `'::'` で始まり、アニメーションが実行される [疑似要素](/ja/docs/Web/CSS/Pseudo-elements) の名前が入ります。このアニメーションが疑似要素ではなく要素で実行されている場合は、空文字列 `''` になります。 -

メソッド

+## メソッド -

親の {{domxref("Event")}} から継承されるメソッドもあります。

+_親の {{domxref("Event")}} から継承されるメソッドもあります_。 -
-
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
-
非推奨の {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} メソッドを使用して作成された AnimationEvent を初期化します。
-
+- {{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}} + - : 非推奨の {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} メソッドを使用して作成された `AnimationEvent` を初期化します。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Animations", "#interface-animationevent", "AnimationEvent")}}{{Spec2("CSS3 Animations")}}初回定義
+| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{SpecName("CSS3 Animations", "#interface-animationevent", "AnimationEvent")}} | {{Spec2("CSS3 Animations")}} | 初回定義 | -

ブラウザーの対応

+## ブラウザーの対応 -

{{Compat("api.AnimationEvent")}}

+{{Compat("api.AnimationEvent")}} -

関連情報

+## 関連情報 - +- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- アニメーションに関する CSS プロパティと @-規則: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. diff --git a/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md b/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md index a0c667a1f501a9..e8d33958715111 100644 --- a/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md +++ b/files/ja/web/api/bytelengthqueuingstrategy/bytelengthqueuingstrategy/index.md @@ -10,66 +10,55 @@ tags: - Streams translation_of: Web/API/ByteLengthQueuingStrategy/ByteLengthQueuingStrategy --- -
{{SeeCompatTable}}{{APIRef("Streams")}}
+{{SeeCompatTable}}{{APIRef("Streams")}} -

ByteLengthQueuingStrategy() コンストラクターは、ByteLengthQueuingStrategy オブジェクトのインスタンスを作成して返します。

+**`ByteLengthQueuingStrategy()`** コンストラクターは、`ByteLengthQueuingStrategy` オブジェクトのインスタンスを作成して返します。 -

構文

+## 構文 -
var byteLengthQueuingStrategy = new ByteLengthQueuingStrategy({highWaterMark});
+``` +var byteLengthQueuingStrategy = new ByteLengthQueuingStrategy({highWaterMark}); +``` -

パラメーター

+### パラメーター -
-
{highWaterMark}
-
highWaterMark プロパティを含むオブジェクト。 これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義する負でない整数です。
-
+- {highWaterMark} + - : `highWaterMark` プロパティを含むオブジェクト。 これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義する負でない整数です。 -

戻り値

+### 戻り値 -

{{domxref("ByteLengthQueuingStrategy")}} オブジェクトのインスタンス。

+{{domxref("ByteLengthQueuingStrategy")}} オブジェクトのインスタンス。 -

例外

+### 例外 -

なし。

+なし。 -

例

+## 例 -
const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
+```js
+const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
 
-const readableStream = new ReadableStream({
-  start(controller) {
-    ...
-  },
-  pull(controller) {
-    ...
-  },
-  cancel(err) {
-    console.log("stream error:", err);
-  }
-}, queuingStrategy);
+const readableStream = new ReadableStream({
+  start(controller) {
+    ...
+  },
+  pull(controller) {
+    ...
+  },
+  cancel(err) {
+    console.log("stream error:", err);
+  }
+}, queuingStrategy);
 
-var size = queuingStrategy.size(chunk);
+var size = queuingStrategy.size(chunk); +``` -

仕様

+## 仕様 - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("Streams","#blqs-constructor","ByteLengthQueuingStrategy()")}}{{Spec2('Streams')}}初期定義
+| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | -------- | +| {{SpecName("Streams","#blqs-constructor","ByteLengthQueuingStrategy()")}} | {{Spec2('Streams')}} | 初期定義 | -

ブラウザーの互換性

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

{{Compat("api.ByteLengthQueuingStrategy.ByteLengthQueuingStrategy")}}

+{{Compat("api.ByteLengthQueuingStrategy.ByteLengthQueuingStrategy")}} diff --git a/files/ja/web/api/bytelengthqueuingstrategy/index.md b/files/ja/web/api/bytelengthqueuingstrategy/index.md index 317571bb8b5a88..66c98db53e78bf 100644 --- a/files/ja/web/api/bytelengthqueuingstrategy/index.md +++ b/files/ja/web/api/bytelengthqueuingstrategy/index.md @@ -10,67 +10,50 @@ tags: - Streams translation_of: Web/API/ByteLengthQueuingStrategy --- -

{{SeeCompatTable}}{{APIRef("Streams")}}

+{{SeeCompatTable}}{{APIRef("Streams")}} -

Streams API の ByteLengthQueuingStrategy インターフェイスは、ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略を提供します。

+[Streams API](/ja/docs/Web/API/Streams_API) の **`ByteLengthQueuingStrategy`** インターフェイスは、ストリームを構築するときに使用できる組み込みのバイト長キューイング戦略を提供します。 -

コンストラクター

+## コンストラクター -
-
{{domxref("ByteLengthQueuingStrategy.ByteLengthQueuingStrategy", "ByteLengthQueuingStrategy()")}}
-
新しい ByteLengthQueuingStrategy オブジェクトのインスタンスを作成します。
-
+- {{domxref("ByteLengthQueuingStrategy.ByteLengthQueuingStrategy", "ByteLengthQueuingStrategy()")}} + - : 新しい `ByteLengthQueuingStrategy` オブジェクトのインスタンスを作成します。 -

プロパティ

+## プロパティ -

なし。

+なし。 -

メソッド

+## メソッド -
-
{{domxref("ByteLengthQueuingStrategy.size()")}}
-
所与のチャンクの byteLength プロパティを返します。
-
+- {{domxref("ByteLengthQueuingStrategy.size()")}} + - : 所与のチャンクの `byteLength` プロパティを返します。 -

例

+## 例 -
const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
+```js
+const queueingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
 
-const readableStream = new ReadableStream({
-  start(controller) {
-    ...
-  },
-  pull(controller) {
-    ...
-  },
-  cancel(err) {
-    console.log("stream error:", err);
-  }
-}, queueingStrategy);
+const readableStream = new ReadableStream({
+  start(controller) {
+    ...
+  },
+  pull(controller) {
+    ...
+  },
+  cancel(err) {
+    console.log("stream error:", err);
+  }
+}, queueingStrategy);
 
-var size = queueingStrategy.size(chunk);
+var size = queueingStrategy.size(chunk); +``` -

仕様

+## 仕様 - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Streams','#blqs-class','ByteLengthQueuingStrategy')}}{{Spec2('Streams')}}初期定義
+| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('Streams','#blqs-class','ByteLengthQueuingStrategy')}} | {{Spec2('Streams')}} | 初期定義 | -

ブラウザーの互換性

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

{{Compat("api.ByteLengthQueuingStrategy")}}

-
+{{Compat("api.ByteLengthQueuingStrategy")}} diff --git a/files/ja/web/api/bytelengthqueuingstrategy/size/index.md b/files/ja/web/api/bytelengthqueuingstrategy/size/index.md index 0d8870183cf65e..6701222fd50b4a 100644 --- a/files/ja/web/api/bytelengthqueuingstrategy/size/index.md +++ b/files/ja/web/api/bytelengthqueuingstrategy/size/index.md @@ -11,62 +11,51 @@ tags: - size translation_of: Web/API/ByteLengthQueuingStrategy/size --- -
{{SeeCompatTable}}{{APIRef("Streams")}}
+{{SeeCompatTable}}{{APIRef("Streams")}} -

{{domxref("ByteLengthQueuingStrategy")}} インターフェイスの size() メソッドは、所与のチャンクの byteLength プロパティを返します。

+{{domxref("ByteLengthQueuingStrategy")}} インターフェイスの **`size()`** メソッドは、所与のチャンクの `byteLength` プロパティを返します。 -

構文

+## 構文 -
var size = byteLengthQueuingStrategy.size(chunk);
+``` +var size = byteLengthQueuingStrategy.size(chunk); +``` -

パラメーター

+### パラメーター -
-
chunk
-
ストリームを通過するデータのチャンク。
-
+- chunk + - : ストリームを通過するデータのチャンク。 -

戻り値

+### 戻り値 -

所与のチャンクのバイト長を表す整数。

+所与のチャンクのバイト長を表す整数。 -

例

+## 例 -
const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
+```js
+const queuingStrategy = new ByteLengthQueuingStrategy({ highWaterMark: 1 });
 
-const readableStream = new ReadableStream({
-  start(controller) {
-    ...
-  },
-  pull(controller) {
-    ...
-  },
-  cancel(err) {
-    console.log("stream error:", err);
-  }
-}, queuingStrategy);
+const readableStream = new ReadableStream({
+  start(controller) {
+    ...
+  },
+  pull(controller) {
+    ...
+  },
+  cancel(err) {
+    console.log("stream error:", err);
+  }
+}, queuingStrategy);
 
-var size = queueingStrategy.size(chunk);
+var size = queueingStrategy.size(chunk); +``` -

仕様

+## 仕様 - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("Streams","#blqs-size","size")}}{{Spec2('Streams')}}初期定義
+| 仕様 | 状態 | コメント | +| -------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName("Streams","#blqs-size","size")}} | {{Spec2('Streams')}} | 初期定義 | -

ブラウザーの互換性

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

{{Compat("api.ByteLengthQueuingStrategy.size")}}

+{{Compat("api.ByteLengthQueuingStrategy.size")}} diff --git a/files/ja/web/api/canvascapturemediastreamtrack/index.md b/files/ja/web/api/canvascapturemediastreamtrack/index.md index 1a09d91f517d63..a725a4531bbe4a 100644 --- a/files/ja/web/api/canvascapturemediastreamtrack/index.md +++ b/files/ja/web/api/canvascapturemediastreamtrack/index.md @@ -14,59 +14,36 @@ tags: - Web translation_of: Web/API/CanvasCaptureMediaStreamTrack --- -
{{APIRef("Media Capture and Streams")}}
+{{APIRef("Media Capture and Streams")}} -

The CanvasCaptureMediaStreamTrack interface represents the video track contained in a {{domxref("MediaStream")}} being generated from a {{HTMLElement("canvas")}} following a call to {{domxref("HTMLCanvasElement.captureStream()")}}.

+The **`CanvasCaptureMediaStreamTrack`** interface represents the video track contained in a {{domxref("MediaStream")}} being generated from a {{HTMLElement("canvas")}} following a call to {{domxref("HTMLCanvasElement.captureStream()")}}. -

Part of the Media Capture and Streams API.

+Part of the [Media Capture and Streams API](/ja/docs/Web/API/Media_Streams_API). -

Properties

+## Properties -

This interface inherits the properties of its parent, {{domxref("MediaStreamTrack")}}.

+_This interface inherits the properties of its parent, {{domxref("MediaStreamTrack")}}._ -
-
{{domxref("CanvasCaptureMediaStreamTrack.canvas")}} {{readonlyInline}}
-
Returns the {{domxref("HTMLCanvasElement")}} object whose surface is captured in real-time.
-
+- {{domxref("CanvasCaptureMediaStreamTrack.canvas")}} {{readonlyInline}} + - : Returns the {{domxref("HTMLCanvasElement")}} object whose surface is captured in real-time. -

Methods

+## Methods -

This interface inherits the methods of its parent, {{domxref("MediaStreamTrack")}}.

+_This interface inherits the methods of its parent, {{domxref("MediaStreamTrack")}}._ -
-
{{domxref("CanvasCaptureMediaStreamTrack.requestFrame()")}}
-
Manually forces a frame to be captured and sent to the stream. This lets applications that wish to specify the frame capture times directly do so, if they specified a frameRate of 0 when calling {{domxref("HTMLCanvasElement.captureStream", "captureStream()")}}.
-
+- {{domxref("CanvasCaptureMediaStreamTrack.requestFrame()")}} + - : Manually forces a frame to be captured and sent to the stream. This lets applications that wish to specify the frame capture times directly do so, if they specified a `frameRate` of 0 when calling {{domxref("HTMLCanvasElement.captureStream", "captureStream()")}}. -

Specifications

+## Specifications - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}}{{Spec2('Media Capture DOM Elements')}}Initial definition
+| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------ | +| {{SpecName('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}} | {{Spec2('Media Capture DOM Elements')}} | Initial definition | -

Browser compatibility

+## Browser compatibility -
+{{Compat("api.CanvasCaptureMediaStreamTrack")}} +## See also -

{{Compat("api.CanvasCaptureMediaStreamTrack")}}

-
- -

See also

- - +- {{domxref("HTMLCanvasElement.captureStream()")}} to begin capturing frames from a canvas diff --git a/files/ja/web/api/canvascapturemediastreamtrack/requestframe/index.md b/files/ja/web/api/canvascapturemediastreamtrack/requestframe/index.md index 2499b39efef818..36ef1d77fb9397 100644 --- a/files/ja/web/api/canvascapturemediastreamtrack/requestframe/index.md +++ b/files/ja/web/api/canvascapturemediastreamtrack/requestframe/index.md @@ -13,28 +13,30 @@ tags: - requestFrame translation_of: Web/API/CanvasCaptureMediaStreamTrack/requestFrame --- -
{{APIRef("Media Capture and Streams")}}
+{{APIRef("Media Capture and Streams")}} -

{{domxref("CanvasCaptureMediaStreamTrack")}} のメソッド requestFrame() はフレームをキャンバスから取り込んでストリームに送信することを依頼します。描画やフレームの取り込みのタイミングを慎重に制御する必要のあるアプリケーションは、フレームを取り込む時を直接指定するのに requestFrame() を使用することができます。

+{{domxref("CanvasCaptureMediaStreamTrack")}} のメソッド **`requestFrame()`** はフレームをキャンバスから取り込んでストリームに送信することを依頼します。描画やフレームの取り込みのタイミングを慎重に制御する必要のあるアプリケーションは、フレームを取り込む時を直接指定するのに `requestFrame()` を使用することができます。 -

フレームの自動取り込みを避け、フレームが requestFrame() が呼ばれた時だけ取り込まれるようにするには、ストリームを生成する時に {{domxref("HTMLCanvasElement.captureStream", "captureStream()")}} メソッドに 0 の値を指定します。

+フレームの自動取り込みを避け、フレームが `requestFrame()` が呼ばれた時だけ取り込まれるようにするには、ストリームを生成する時に {{domxref("HTMLCanvasElement.captureStream", "captureStream()")}} メソッドに 0 の値を指定します。 -

構文

+## 構文 -
stream.requestFrame();
-
+``` +stream.requestFrame(); +``` -

戻り値

+### 戻り値 -

undefined

+`undefined` -

使用上の注意

+## 使用上の注意 -

今のところ、キャンバスのオリジンが明確でなくても例外を投げないことが、仕様でフラグ付けされた問題点です。将来は変わるでしょうが、事前に計画をし SecurityError のような例外(投げられる特定のエラーが仕様書では言及されていませんが、これが有力な候補です) を監視することが賢明です。

+今のところ、キャンバスのオリジンが明確でなくても例外を投げないことが、仕様でフラグ付けされた問題点です。将来は変わるでしょうが、事前に計画をし `SecurityError` のような例外(投げられる特定のエラーが仕様書では言及されていませんが、これが有力な候補です) を監視することが賢明です。 -

例

+## 例 -
// 取り込むキャンバス要素を探す
+```js
+// 取り込むキャンバス要素を探す
 var canvasElt = document.getElementsByTagName("canvas")[0];
 
 // ストリームを取得する
@@ -42,36 +44,19 @@ var stream = canvasElt.captureStream(25); // 25 FPS
 
 // キャンバスの現在の状態をフレームとしてストリームに送信する
 stream.getVideoTracks()[0].requestFrame();
-
+``` -

仕様

+## 仕様 - - - - - - - - - - - - - - - -
仕様書ステータスコメント
{{SpecName('Media Capture DOM Elements', '#dom-canvascapturemediastreamtrack-requestframe', 'CanvasCaptureMediaStream.requestFrame()')}}{{Spec2('Media Capture DOM Elements')}}初期定義
+| 仕様書 | ステータス | コメント | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------- | +| {{SpecName('Media Capture DOM Elements', '#dom-canvascapturemediastreamtrack-requestframe', 'CanvasCaptureMediaStream.requestFrame()')}} | {{Spec2('Media Capture DOM Elements')}} | 初期定義 | -

ブラウザー実装状況

+## ブラウザー実装状況 +{{Compat("api.CanvasCaptureMediaStreamTrack.requestFrame")}} +## 関連情報 -

{{Compat("api.CanvasCaptureMediaStreamTrack.requestFrame")}}

- -

関連情報

- - +- {{domxref("CanvasCaptureMediaStream")}} 、属するインターフェース。 +- {{HTMLElement("canvas")}} diff --git a/files/ja/web/api/canvaspattern/index.md b/files/ja/web/api/canvaspattern/index.md index 344e48b34d69c6..33db8e144a41b6 100644 --- a/files/ja/web/api/canvaspattern/index.md +++ b/files/ja/web/api/canvaspattern/index.md @@ -8,49 +8,32 @@ tags: - Reference translation_of: Web/API/CanvasPattern --- -
{{APIRef("Canvas API")}}
+{{APIRef("Canvas API")}} -

CanvasPattern インターフェースは、{{domxref("CanvasRenderingContext2D.createPattern()")}} メソッドによって（画像、 canvas 要素、video 要素をもとに）生成される不透明なオブジェクトです。

+**`CanvasPattern`** インターフェースは、{{domxref("CanvasRenderingContext2D.createPattern()")}} メソッドによって（画像、 canvas 要素、video 要素をもとに）生成される不透明なオブジェクトです。 -

プロパティ

+## プロパティ -

不透明なオブジェクトを表し、公開されたプロパティはありません。

+_不透明なオブジェクトを表し、公開されたプロパティはありません。_ -

メソッド

+## メソッド -

継承されたメソッドはありません。

+_継承されたメソッドはありません。_ -
-
{{domxref("CanvasPattern.setTransform()")}} {{experimental_inline}}
-
パターンに線形の変化を表す {{domxref("SVGMatrix")}} を適用する。
-
+- {{domxref("CanvasPattern.setTransform()")}} {{experimental_inline}} + - : パターンに線形の変化を表す {{domxref("SVGMatrix")}} を適用する。 -

仕様

+## 仕様 - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('HTML WHATWG', "the-canvas-element.html#canvaspattern", "CanvasPattern")}}{{Spec2('HTML WHATWG')}}v5 で setTransform() メソッドを追加。
+| 仕様 | ステータス | コメント | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------- | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvaspattern", "CanvasPattern")}} | {{Spec2('HTML WHATWG')}} | v5 で `setTransform()` メソッドを追加。 | -

ブラウザ実装状況

+## ブラウザ実装状況 -

{{Compat("api.CanvasPattern")}}

+{{Compat("api.CanvasPattern")}} -

関連項目

+## 関連項目 - +- {{domxref("CanvasRenderingContext2D.createPattern()")}} +- The {{HTMLElement("canvas")}} 要素と関連するインターフェースである {{domxref("HTMLCanvasElement")}} diff --git a/files/ja/web/api/canvaspattern/settransform/index.md b/files/ja/web/api/canvaspattern/settransform/index.md index d1a390cd548410..2c83ee6cf466a3 100644 --- a/files/ja/web/api/canvaspattern/settransform/index.md +++ b/files/ja/web/api/canvaspattern/settransform/index.md @@ -10,37 +10,38 @@ tags: - Reference translation_of: Web/API/CanvasPattern/setTransform --- -
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+{{APIRef("Canvas API")}} {{SeeCompatTable}} -

CanvasPattern.setTransform() メソッドは、パターンの変換マトリックスとして {{domxref("SVGMatrix")}} オブジェクトを使用し、パターンにこれを実行します。

+**`CanvasPattern`\*\***`.setTransform()`\*\* メソッドは、パターンの変換マトリックスとして {{domxref("SVGMatrix")}} オブジェクトを使用し、パターンにこれを実行します。 -

構文

+## 構文 -
void pattern.setTransform(matrix);
-
+``` +void pattern.setTransform(matrix); +``` -

パラメータ

+### パラメータ -
-
matrix
-
パターンの変換行列として使用する {{domxref("SVGMatrix")}}。
-
+- `matrix` + - : パターンの変換行列として使用する {{domxref("SVGMatrix")}}。 -

例

+## 例 -

setTransform メソッドを使用する

+### `setTransform` メソッドを使用する -

これは setTransform メソッドを使用して {{domxref("SVGMatrix")}} によるパターン変形を指定して {{domxref("CanvasPattern")}} を生成する簡単なコードスニペットです。たとえば、パターンが現在の {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} として適用され、{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} メソッドを使用すると、 canvas に描画されます。

+これは `setTransform` メソッドを使用して {{domxref("SVGMatrix")}} によるパターン変形を指定して {{domxref("CanvasPattern")}} を生成する簡単なコードスニペットです。たとえば、パターンが現在の {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} として適用され、{{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} メソッドを使用すると、 canvas に描画されます。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-<svg id="svg1"></svg>
-
+```html + + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 var svg1 = document.getElementById("svg1");
@@ -55,20 +56,18 @@ img.onload = function() {
   ctx.fillStyle = pattern;
   ctx.fillRect(0,0,400,400);
 };
-
+``` -

以下のコードを編集して、canvas 上での変化を確認してください：

+以下のコードを編集して、canvas 上での変化を確認してください： - +``` -

{{ EmbedLiveSample('Playable_code', 700, 380) }}

+{{ EmbedLiveSample('Playable_code', 700, 380) }} -

仕様

+## 仕様 - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('HTML WHATWG', "scripting.html#dom-canvaspattern-settransform", "CanvasPattern.setTransform")}}{{Spec2('HTML WHATWG')}}
+| 仕様 | ステータス | コメント | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-canvaspattern-settransform", "CanvasPattern.setTransform")}} | {{Spec2('HTML WHATWG')}} | | -

ブラウザ実装状況

+## ブラウザ実装状況 -

{{Compat("api.CanvasPattern.setTransform")}}

+{{Compat("api.CanvasPattern.setTransform")}} -

関連項目

+## 関連項目 - +- これを定義しているインターフェース：{{domxref("CanvasPattern")}} +- {{domxref("SVGMatrix")}} diff --git a/files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.md b/files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.md index 95a944248aeacf..762d55c31ddeb6 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.md +++ b/files/ja/web/api/canvasrenderingcontext2d/clearhitregions/index.md @@ -3,29 +3,32 @@ title: CanvasRenderingContext2D.clearHitRegions() slug: Web/API/CanvasRenderingContext2D/clearHitRegions translation_of: Web/API/CanvasRenderingContext2D/clearHitRegions --- -
{{APIRef}} {{SeeCompatTable}}
+{{APIRef}} {{SeeCompatTable}} -

Canvas 2D APIのCanvasRenderingContext2D.clearHitRegions()メソッドはcanvasからすべてのヒット領域を削除します。

+Canvas 2D API の**`CanvasRenderingContext2D`\*\***`.clearHitRegions()`\*\*メソッドは canvas からすべてのヒット領域を削除します。 -

構文

+## 構文 -
void ctx.clearHitRegions();
-
+``` +void ctx.clearHitRegions(); +``` -

例

+## 例 -

clearHitRegionsメソッドを使う

+### `clearHitRegions`メソッドを使う -

これは、clearHitRegionsメソッドを使った簡単なコードです。

+これは、`clearHitRegions`メソッドを使った簡単なコードです。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 // ヒット領域をいくつか指定
@@ -35,32 +38,19 @@ ctx.addHitRegion({id: "mouth"});
 
 // canvasからすべて削除
 ctx.clearHitRegions();
-
- -

仕様

- - - - - - - - - - - - - - -
仕様策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearhitregions", "CanvasRenderingContext2D.clearHitRegions")}}{{Spec2('HTML WHATWG')}}
- -

ブラウザー実装状況

- -

{{Compat("api.CanvasRenderingContext2D.clearHitRegions")}}

- -

関連情報

- - +``` + +## 仕様 + +| 仕様 | 策定状況 | コメント | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearhitregions", "CanvasRenderingContext2D.clearHitRegions")}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザー実装状況 + +{{Compat("api.CanvasRenderingContext2D.clearHitRegions")}} + +## 関連情報 + +- {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} +- {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} diff --git a/files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.md b/files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.md index 4bc5cbf49b992f..955ad2a6dc0396 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.md +++ b/files/ja/web/api/canvasrenderingcontext2d/removehitregion/index.md @@ -3,36 +3,37 @@ title: CanvasRenderingContext2D.removeHitRegion() slug: Web/API/CanvasRenderingContext2D/removeHitRegion translation_of: Web/API/CanvasRenderingContext2D/removeHitRegion --- -
{{APIRef}} {{SeeCompatTable}}
+{{APIRef}} {{SeeCompatTable}} -

Canvas 2D APIのCanvasRenderingContext2D.removeHitRegion() メソッドは、canvasから与えられたヒット領域を削除します。

+Canvas 2D API の**`CanvasRenderingContext2D`\*\***`.removeHitRegion()`\*\* メソッドは、canvas から与えられたヒット領域を削除します。 -

構文

+## 構文 -
void ctx.removeHitRegion(id);
-
+``` +void ctx.removeHitRegion(id); +``` -

パラメータ

+### パラメータ -
-
id
-
削除する領域のidをあらわす{{domxref("DOMString")}}。
-
+- id + - : 削除する領域の`id`をあらわす{{domxref("DOMString")}}。 -

例

+## 例 -

removeHitRegionメソッドを使う

+### `removeHitRegion`メソッドを使う -

これは、removeHitRegionを使った簡単なコードです。

+これは、`removeHitRegion`を使った簡単なコードです。 -

HTML

+#### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+#### JavaScript -
var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 // ヒット領域を指定
@@ -40,32 +41,19 @@ ctx.addHitRegion({id: "eyes"});
 
 // canvasからヒット領域を削除
 ctx.removeHitRegion("eyes");
-
- -

仕様

- - - - - - - - - - - - - - -
仕様策定状況コメント
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-removehitregion", "CanvasRenderingContext2D.removeHitRegion")}}{{Spec2('HTML WHATWG')}}
- -

ブラウザー実装状況

- -

{{Compat("api.CanvasRenderingContext2D.removeHitRegion")}}

- -

関連情報

- - +``` + +## 仕様 + +| 仕様 | 策定状況 | コメント | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-removehitregion", "CanvasRenderingContext2D.removeHitRegion")}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザー実装状況 + +{{Compat("api.CanvasRenderingContext2D.removeHitRegion")}} + +## 関連情報 + +- {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} +- {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} diff --git a/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md b/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md index 32fc5a0972e923..8738a1153ae473 100644 --- a/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md +++ b/files/ja/web/api/countqueuingstrategy/countqueuingstrategy/index.md @@ -10,67 +10,56 @@ tags: - Streams translation_of: Web/API/CountQueuingStrategy/CountQueuingStrategy --- -
{{SeeCompatTable}}{{APIRef("Streams")}}
+{{SeeCompatTable}}{{APIRef("Streams")}} -

CountQueuingStrategy() コンストラクターは、CountQueuingStrategy オブジェクトのインスタンスを作成して返します。

+**`CountQueuingStrategy()`** コンストラクターは、`CountQueuingStrategy` オブジェクトのインスタンスを作成して返します。 -

構文

+## 構文 -
var countQueuingStrategy = new CountQueuingStrategy({highWaterMark});
+``` +var countQueuingStrategy = new CountQueuingStrategy({highWaterMark}); +``` -

パラメーター

+### パラメーター -
-
{highWaterMark}
-
highWaterMark プロパティを含むオブジェクト。 これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義する負でない整数です。
-
+- {highWaterMark} + - : `highWaterMark` プロパティを含むオブジェクト。 これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義する負でない整数です。 -

戻り値

+### 戻り値 -

{{domxref("CountQueuingStrategy")}} オブジェクトのインスタンス。

+{{domxref("CountQueuingStrategy")}} オブジェクトのインスタンス。 -

例外

+### 例外 -

なし。

+なし。 -

例

+## 例 -
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
+```js
+const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // シンクの実装
-  write(chunk) {
-    ...
-  },
-  close() {
-    ...
-  },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queuingStrategy);
+const writableStream = new WritableStream({
+  // シンクの実装
+  write(chunk) {
+    ...
+  },
+  close() {
+    ...
+  },
+  abort(err) {
+    console.log("Sink error:", err);
+  }
+}, queuingStrategy);
 
-var size = queuingStrategy.size();
+var size = queuingStrategy.size(); +``` -

仕様

+## 仕様 - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("Streams","#cqs-constructor","CountQueuingStrategy()")}}{{Spec2('Streams')}}初期定義
+| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName("Streams","#cqs-constructor","CountQueuingStrategy()")}} | {{Spec2('Streams')}} | 初期定義 | -

ブラウザーの互換性

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

{{Compat("api.CountQueuingStrategy.CountQueuingStrategy")}}

+{{Compat("api.CountQueuingStrategy.CountQueuingStrategy")}} diff --git a/files/ja/web/api/countqueuingstrategy/index.md b/files/ja/web/api/countqueuingstrategy/index.md index 9bd152f8bee48f..71063aa757b3de 100644 --- a/files/ja/web/api/countqueuingstrategy/index.md +++ b/files/ja/web/api/countqueuingstrategy/index.md @@ -10,69 +10,51 @@ tags: - Streams translation_of: Web/API/CountQueuingStrategy --- -

{{SeeCompatTable}}{{APIRef("Streams")}}

+{{SeeCompatTable}}{{APIRef("Streams")}} -

Streams API の CountQueuingStrategy インターフェイスは、ストリームの構築時に使用できる組み込みのチャンクカウントキューイング戦略を提供します。

+[Streams API](/ja/docs/Web/API/Streams_API) の **`CountQueuingStrategy`** インターフェイスは、ストリームの構築時に使用できる組み込みのチャンクカウントキューイング戦略を提供します。 -

コンストラクター

+## コンストラクター -
-
{{domxref("CountQueuingStrategy.CountQueuingStrategy", "CountQueuingStrategy()")}}
-
新しい CountQueuingStrategy オブジェクトのインスタンスを作成します。
-
+- {{domxref("CountQueuingStrategy.CountQueuingStrategy", "CountQueuingStrategy()")}} + - : 新しい `CountQueuingStrategy` オブジェクトのインスタンスを作成します。 -

プロパティ

+## プロパティ -

なし。

+なし。 -

メソッド

+## メソッド -
-
{{domxref("CountQueuingStrategy.size()")}}
-
1 を返します。
-
+- {{domxref("CountQueuingStrategy.size()")}} + - : `1` を返します。 -

例

+## 例 -
const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
+```js
+const queueingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // シンクの実装
-  write(chunk) {
-    ...
-  },
-  close() {
+const writableStream = new WritableStream({
+  // シンクの実装
+  write(chunk) {
     ...
-  },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queueingStrategy);
-
-var size = queueingStrategy.size();
-
- -

仕様

+ }, + close() { + ... + }, + abort(err) { + console.log("Sink error:", err); + } +}, queueingStrategy); - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Streams','#cqs-class','CountQueuingStrategy')}}{{Spec2('Streams')}}初期定義
+var size = queueingStrategy.size(); +``` -

ブラウザーの互換性

+## 仕様 -
+| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName('Streams','#cqs-class','CountQueuingStrategy')}} | {{Spec2('Streams')}} | 初期定義 | +## ブラウザーの互換性 -

{{Compat("api.CountQueuingStrategy")}}

-
+{{Compat("api.CountQueuingStrategy")}} diff --git a/files/ja/web/api/countqueuingstrategy/size/index.md b/files/ja/web/api/countqueuingstrategy/size/index.md index 080e937699e1c7..00751d7b546056 100644 --- a/files/ja/web/api/countqueuingstrategy/size/index.md +++ b/files/ja/web/api/countqueuingstrategy/size/index.md @@ -11,60 +11,51 @@ tags: - size translation_of: Web/API/CountQueuingStrategy/size --- -
{{SeeCompatTable}}{{APIRef("Streams")}}
+{{SeeCompatTable}}{{APIRef("Streams")}} -

{{domxref("CountQueuingStrategy")}} インターフェイスの size() メソッドは常に 1 を返すため、合計キューサイズはキュー内のチャンク数を数えたものになります。

+{{domxref("CountQueuingStrategy")}} インターフェイスの **`size()`** メソッドは常に `1` を返すため、合計キューサイズはキュー内のチャンク数を数えたものになります。 -

構文

+## 構文 -
var size = countQueuingStrategy.size();
+``` +var size = countQueuingStrategy.size(); +``` -

パラメーター

+### パラメーター -

なし。

+なし。 -

戻り値

+### 戻り値 -

1。

+`1`。 -

例

+## 例 -
const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
+```js
+const queuingStrategy = new CountQueuingStrategy({ highWaterMark: 1 });
 
-const writableStream = new WritableStream({
-  // シンクの実装
-  write(chunk) {
-    ...
-  },
-  close() {
-    ...
-  },
-  abort(err) {
-    console.log("Sink error:", err);
-  }
-}, queuingStrategy);
+const writableStream = new WritableStream({
+  // シンクの実装
+  write(chunk) {
+    ...
+  },
+  close() {
+    ...
+  },
+  abort(err) {
+    console.log("Sink error:", err);
+  }
+}, queuingStrategy);
 
-var size = queuingStrategy.size();
+var size = queuingStrategy.size(); +``` -

仕様

+## 仕様 - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("Streams","#cqs-size","size")}}{{Spec2('Streams')}}初期定義
+| 仕様 | 状態 | コメント | +| -------------------------------------------------------- | ---------------------------- | -------- | +| {{SpecName("Streams","#cqs-size","size")}} | {{Spec2('Streams')}} | 初期定義 | -

ブラウザーの互換性

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

{{Compat("api.CountQueuingStrategy.size")}}

+{{Compat("api.CountQueuingStrategy.size")}} diff --git a/files/ja/web/api/crypto/index.md b/files/ja/web/api/crypto/index.md index 7d89260966095f..98f49c52b453a9 100644 --- a/files/ja/web/api/crypto/index.md +++ b/files/ja/web/api/crypto/index.md @@ -8,59 +8,36 @@ tags: - Web Crypt API translation_of: Web/API/Crypto --- -

{{APIRef("Web Crypto API")}}

+{{APIRef("Web Crypto API")}} -

Crypto インターフェイスは、現在のコンテキストで利用できる基本的な暗号機能を表します。これは、暗号強度の強い乱数生成器と暗号プリミティブへのアクセスを許可します。

+**`Crypto`** インターフェイスは、現在のコンテキストで利用できる基本的な暗号機能を表します。これは、暗号強度の強い乱数生成器と暗号プリミティブへのアクセスを許可します。 -

このインターフェイスを持つオブジェクトは、{{domxref("Window.crypto")}} プロパティを通じてウェブコンテキスト上で利用可能です。

+このインターフェイスを持つオブジェクトは、{{domxref("Window.crypto")}} プロパティを通じてウェブコンテキスト上で利用可能です。 -

プロパティ

+## プロパティ -

このインターフェイスは、{{domxref("RandomSource")}} 上に定義されたプロパティを実装します。

+_このインターフェイスは、{{domxref("RandomSource")}} 上に定義されたプロパティを実装します。_ -
-
{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
-
ハッシュや署名、暗号化、複合など、共通の暗号プリミティブへのアクセスを提供する {{domxref("SubtleCrypto")}} オブジェクトを返します。
-
+- {{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}} + - : ハッシュや署名、暗号化、複合など、共通の暗号プリミティブへのアクセスを提供する {{domxref("SubtleCrypto")}} オブジェクトを返します。 -

メソッド

+## メソッド -

このインターフェイスは、{{domxref("RandomSource")}} 上に定義されたメソッドを実装します。

+_このインターフェイスは、{{domxref("RandomSource")}} 上に定義されたメソッドを実装します。_ -
-
{{domxref("RandomSource.getRandomValues()")}}
-
渡された {{ jsxref("TypedArray") }} を意味不明の乱数値で埋めます。
-
+- {{domxref("RandomSource.getRandomValues()")}} + - : 渡された {{ jsxref("TypedArray") }} を意味不明の乱数値で埋めます。 -

仕様

+## 仕様 - - - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}初期定義
+| 仕様書 | 策定状況 | 備考 | +| -------------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}} | {{Spec2("Web Crypto API")}} | 初期定義 | -

ブラウザーの実装状況

+## ブラウザーの実装状況 -
-
-

{{Compat("api.Crypto")}}

-
-
+{{Compat("api.Crypto")}} -

関連情報

+## 関連情報 - +- [Components.utils.importGlobalProperties](/ja/docs/Components.utils.importGlobalProperties) diff --git a/files/ja/web/api/crypto/subtle/index.md b/files/ja/web/api/crypto/subtle/index.md index 00a569df976612..09518d46542a31 100644 --- a/files/ja/web/api/crypto/subtle/index.md +++ b/files/ja/web/api/crypto/subtle/index.md @@ -10,42 +10,29 @@ tags: - Web Crypt API translation_of: Web/API/Crypto/subtle --- -

{{APIRef("Web Crypto API")}}

+{{APIRef("Web Crypto API")}} -

Crypto.subtle 読み取り専用プロパティは、暗号化操作ができる {{domxref("SubtleCrypto")}} オブジェクトを返します。

+**`Crypto.subtle`** 読み取り専用プロパティは、暗号化操作ができる {{domxref("SubtleCrypto")}} オブジェクトを返します。 -

構文

+## 構文 -
var crypto = crypto.subtle;
+``` +var crypto = crypto.subtle; +``` -

仕様

+## 仕様 - - - - - - - - - - - - - -
仕様書策定状況備考
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}初期定義。
+| 仕様書 | 策定状況 | 備考 | +| ------------------------------------------------------------------------------------ | ---------------------------------------- | ---------- | +| {{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }} | {{ Spec2('Web Crypto API') }} | 初期定義。 | -

ブラウザーの実装状況

+## ブラウザーの実装状況 +{{Compat("api.Crypto.subtle")}} +## 関連情報 -

{{Compat("api.Crypto.subtle")}}

- -

関連情報

- - +- {{domxref("Crypto")}}. +- {{domxref("SubtleCrypto")}}. +- [Compatibility test page](https://vibornoff.github.io/webcrypto-examples/index.html). +- [Shim for IE11 and Safari](https://github.com/vibornoff/webcrypto-shim). diff --git a/files/ja/web/api/documentfragment/childelementcount/index.md b/files/ja/web/api/documentfragment/childelementcount/index.md index 16bc5ed135eb56..c6e2cac532c7c4 100644 --- a/files/ja/web/api/documentfragment/childelementcount/index.md +++ b/files/ja/web/api/documentfragment/childelementcount/index.md @@ -6,23 +6,24 @@ tags: - DOM - Property - Reference -browser-compat: api.DocumentFragment.childElementCount translation_of: Web/API/DocumentFragment/childElementCount +browser-compat: api.DocumentFragment.childElementCount --- -
{{ APIRef("DOM") }}
+{{ APIRef("DOM") }} -

Document.childElementCount は読み取り専用のプロパティで、 DocumentFragment の子要素の数を返します。

+**`Document.childElementCount`** は読み取り専用のプロパティで、 `DocumentFragment` の子要素の数を返します。 -

特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。

+特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。 -

構文

+## 構文 -
fragment.childElementCount;
-
+```js +fragment.childElementCount; +``` -

例

+## 例 -
+```js
 let fragment = new DocumentFragment()
 fragment.childElementCount; // 0
 
@@ -30,19 +31,17 @@ let paragraph = document.createElement('p')
 fragment.appendChild(paragraph)
 
 fragment.childElementCount; // 1
-
+``` -

仕様書

+## 仕様書 {{Specifications}} -

ブラウザーの互換性

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

{{Compat}}

+{{Compat}} -

関連情報

+## 関連情報 - +- {{domxref("Element.childElementCount")}} +- {{domxref("Document.childElementCount")}} diff --git a/files/ja/web/api/documentfragment/index.md b/files/ja/web/api/documentfragment/index.md index 5c245663d69706..24d0983f88f4ed 100644 --- a/files/ja/web/api/documentfragment/index.md +++ b/files/ja/web/api/documentfragment/index.md @@ -11,98 +11,61 @@ tags: - 文書 translation_of: Web/API/DocumentFragment --- -

{{ APIRef("DOM") }}

- -

DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは {{domxref("Document")}} の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、{{Glossary("reflow", "再フロー")}}を起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。

- -

DocumentFragment の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 {{domxref("Node")}} インターフェイスの {{domxref("Node.appendChild", "appendChild()")}} または {{domxref("Node.insertBefore", "insertBefore()")}} などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の DocumentFragment が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。

- -

このインターフェイスはウェブコンポーネントでも大いに役に立っています。 {{HTMLElement("template")}} 要素はその {{domxref("HTMLTemplateElement.content")}} プロパティに DocumentFragment を含みます。

- -

空の DocumentFragment は {{domxref("document.createDocumentFragment")}} メソッドやコンストラクターを使って作成できます。

- -

{{InheritanceDiagram}}

- -

プロパティ

- -

このインターフェイスには固有のプロパティはありませんが、その親である {{domxref("Node")}} のプロパティを継承し、 {{domxref("ParentNode")}} インターフェイスのプロパティを実装しています。

- -
-
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
-
DocumentFragment オブジェクトの子である型 {{domxref("Element")}} のすべてのオブジェクトを含む、「生」の {{domxref("HTMLCollection")}} を返します。
-
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
-
DocumentFragment オブジェクトの最初の子である {{domxref("Element")}}、または無ければ null を返します。
-
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
-
DocumentFragment オブジェクトの最後の子である {{domxref("Element")}}、または無ければ null を返します。
-
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
-
DocumentFragment が持つ子の数を表す unsigned long を返します。
-
- -

コンストラクター

- -
-
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
-
空の DocumentFragment オブジェクトを返します。
-
- -

メソッド

- -

このインターフェイスはその親である {{domxref("Node")}} のメソッドを継承し、 {{domxref("ParentNode")}} インターフェイスのメソッドを実装しています。

- -
-
{{domxref("DocumentFragment.querySelector()")}}
-
DocumentFragment の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の {{domxref("Element")}} ノードを返します。
-
{{domxref("DocumentFragment.querySelectorAll()")}}
-
DocumentFragment の中で、指定されたセレクターに一致するすべての {{domxref("Element")}} ノードの {{domxref("NodeList")}} を返します。
-
{{domxref("DocumentFragment.getElementById()")}}
-
DocumentFragment の中で、文書の順序で見た場合に、指定された ID に一致する最初の {{domxref("Element")}} ノードを返します。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}コンストラクターと {{domxref("ParentNode")}} の実装を追加。
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}querySelector() と querySelectorAll() メソッドを追加。
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}{{SpecName('DOM2 Core')}} より変更なし
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}{{SpecName('DOM1')}} より変更なし
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("api.DocumentFragment")}}

- -

関連情報

- - +{{ APIRef("DOM") }} + +**`DocumentFragment`** インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは {{domxref("Document")}} の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、{{Glossary("reflow", "再フロー")}}を起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。 + +`DocumentFragment` の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 {{domxref("Node")}} インターフェイスの {{domxref("Node.appendChild", "appendChild()")}} または {{domxref("Node.insertBefore", "insertBefore()")}} などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の `DocumentFragment` が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。 + +このインターフェイスはウェブコンポーネントでも大いに役に立っています。 {{HTMLElement("template")}} 要素はその {{domxref("HTMLTemplateElement.content")}} プロパティに `DocumentFragment` を含みます。 + +空の `DocumentFragment` は {{domxref("document.createDocumentFragment")}} メソッドやコンストラクターを使って作成できます。 + +{{InheritanceDiagram}} + +## プロパティ + +_このインターフェイスには固有のプロパティはありませんが、その親である {{domxref("Node")}} のプロパティを継承し、 {{domxref("ParentNode")}} インターフェイスのプロパティを実装しています。_ + +- {{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}} + - : `DocumentFragment` オブジェクトの子である型 {{domxref("Element")}} のすべてのオブジェクトを含む、「生」の {{domxref("HTMLCollection")}} を返します。 +- {{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}} + - : `DocumentFragment` オブジェクトの最初の子である {{domxref("Element")}}、または無ければ `null` を返します。 +- {{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}} + - : `DocumentFragment` オブジェクトの最後の子である {{domxref("Element")}}、または無ければ `null` を返します。 +- {{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}} + - : `DocumentFragment` が持つ子の数を表す `unsigned long` を返します。 + +## コンストラクター + +- {{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}} + - : 空の `DocumentFragment` オブジェクトを返します。 + +## メソッド + +_このインターフェイスはその親である {{domxref("Node")}} のメソッドを継承し、 {{domxref("ParentNode")}} インターフェイスのメソッドを実装しています。_ + +- {{domxref("DocumentFragment.querySelector()")}} + - : `DocumentFragment` の中で、文書の順序で見た場合に、指定されたセレクターに一致する最初の {{domxref("Element")}} ノードを返します。 +- {{domxref("DocumentFragment.querySelectorAll()")}} + - : `DocumentFragment` の中で、指定されたセレクターに一致するすべての {{domxref("Element")}} ノードの {{domxref("NodeList")}} を返します。 +- {{domxref("DocumentFragment.getElementById()")}} + - : `DocumentFragment` の中で、文書の順序で見た場合に、指定された ID に一致する最初の {{domxref("Element")}} ノードを返します。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------ | +| {{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}} | {{Spec2('DOM WHATWG')}} | コンストラクターと {{domxref("ParentNode")}} の実装を追加。 | +| {{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}} | {{Spec2('Selectors API Level 1')}} | `querySelector()` と `querySelectorAll()` メソッドを追加。 | +| {{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM3 Core')}} | {{SpecName('DOM2 Core')}} より変更なし | +| {{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM2 Core')}} | {{SpecName('DOM1')}} より変更なし | +| {{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}} | {{Spec2('DOM1')}} | 初回定義 | + +## ブラウザーの対応 + +{{Compat("api.DocumentFragment")}} + +## 関連情報 + +- [DOM インターフェイスの目次](/ja/docs/Web/API/Document_Object_Model) diff --git a/files/ja/web/api/domexception/index.md b/files/ja/web/api/domexception/index.md index 7886b1375c5040..a5cc9f8362df05 100644 --- a/files/ja/web/api/domexception/index.md +++ b/files/ja/web/api/domexception/index.md @@ -11,148 +11,109 @@ tags: - Reference translation_of: Web/API/DOMException --- -

{{APIRef("DOM")}}

- -

DOMException インターフェイスは、Web API のメソッドの呼び出しやプロパティへのアクセスによって異常なイベント (例外と呼ばれます) が発生したことを表します。これは基本的に、Web API 内部のエラーの状態を示すものです。

- -

それぞれの例外に名称があり、これはエラーまたは異常な状態を特定する "CamelCase" 形式の文字列です。

- -

コンストラクター

- -
-
{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}
-
指定したメッセージおよび名称の DOMException オブジェクトを返します。
-
- -

プロパティ

- -
-
{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}
-
エラーコード定数 の内の 1 つ、または該当しない場合に 0 を short 型の値で返します。このフィールドは歴史的な経緯で使用されており、新たな DOM 例外では使用しません。新たな例外の情報は {{domxref("DOMException.name")}} 属性に収めています。
-
{{domxref("DOMException.message")}} {{readOnlyInline}}
-
指定した エラー名 に関連付けられたメッセージまたは説明を表す {{domxref("DOMString")}} を返します。
-
{{domxref("DOMException.name")}} {{readOnlyInline}}
-
エラー名 に関連付けられた文字列のひとつを {{domxref("DOMString")}} 型の値で返します。
-
- -

エラー名

- -

これは、一般的なエラー名の一覧です。独自にエラー名のセットを定義している API がありますので、これは必ずしも完全なリストではありません。

- -
-

注記: 歴史的にエラーは、エラーの値を持つように定義した名前付き変数と、それに対応する値で識別されてきたため、一部の項目では過去に使用されたレガシーコードや定数名も記載します。

-
- -
-
IndexSizeError
-
インデックスが許可された範囲から外れています。例えば、{{domxref("Range")}} オブジェクトで発生することがあります。(レガシーコード: 1、レガシー定数名: INDEX_SIZE_ERR)
-
HierarchyRequestError
-
ノードツリーの階層が正しくありません。(レガシーコード: 3、レガシー定数名: HIERARCHY_REQUEST_ERR)
-
WrongDocumentError
-
オブジェクトが誤った {{domxref("Document")}} 内に存在します。(レガシーコード: 4、レガシー定数名: WRONG_DOCUMENT_ERR)
-
InvalidCharacterError
-
文字列に無効な文字が含まれています。(レガシーコード: 5、レガシー定数名: INVALID_CHARACTER_ERR)
-
NoModificationAllowedError
-
オブジェクトを変更できません。(レガシーコード: 7、レガシー定数名: NO_MODIFICATION_ALLOWED_ERR)
-
NotFoundError
-
オブジェクトが見つかりません。(レガシーコード: 8、レガシー定数名: NOT_FOUND_ERR)
-
NotSupportedError
-
操作をサポートしていません。(レガシーコード: 9、レガシー定数名: NOT_SUPPORTED_ERR)
-
InvalidStateError
-
オブジェクトが無効な状態です。(レガシーコード: 11、レガシー定数名: INVALID_STATE_ERR)
-
SyntaxError
-
文字列が期待されたパターンにマッチしません。(レガシーコード: 12、レガシー定数名: SYNTAX_ERR)
-
InvalidModificationError
-
オブジェクトをこの方法で変更できません。(レガシーコード: 13、レガシー定数名: INVALID_MODIFICATION_ERR)
-
NamespaceError
-
XML の名前空間によって、操作は許可されていません。(レガシーコード: 14、レガシー定数名: NAMESPACE_ERR)
-
InvalidAccessError
-
オブジェクトが操作や引数をサポートしていません。(レガシーコード: 15、レガシー定数名: INVALID_ACCESS_ERR)
-
TypeMismatchError {{deprecated_inline}}
-
オブジェクトの型が、期待された型に一致しません。(レガシーコード: 17、レガシー定数名: TYPE_MISMATCH_ERR) この値は非推奨であり、この値を持つ DOMException に代わり JavaScript の {{jsxref("TypeError")}} 例外が発生します。
-
SecurityError
-
操作が安全ではありません。(レガシーコード: 18、レガシー定数名: SECURITY_ERR)
-
NetworkError {{experimental_inline}}
-
ネットワークのエラーが発生しました。(レガシーコード: 19、レガシー定数名: NETWORK_ERR)
-
AbortError {{experimental_inline}}
-
操作が異常終了しました。(レガシーコード: 20、レガシー定数名: ABORT_ERR)
-
URLMismatchError {{experimental_inline}}
-
与えられた URL が、別の URL と一致しません。(レガシーコード: 21、レガシー定数名: URL_MISMATCH_ERR)
-
QuotaExceededError {{experimental_inline}}
-
クォータを超過しました。(レガシーコード: 22、レガシー定数名: QUOTA_EXCEEDED_ERR)
-
TimeoutError
-
操作がタイムアウトしました。(レガシーコード: 23、レガシー定数名: TIMEOUT_ERR)
-
InvalidNodeTypeError {{experimental_inline}}
-
ノードが正しくない、または操作に対して誤った祖先が存在します。(レガシーコード: 24、レガシー定数名: INVALID_NODE_TYPE_ERR)
-
DataCloneError {{experimental_inline}}
-
オブジェクトを複製できません。(レガシーコード: 25、レガシー定数名: DATA_CLONE_ERR)
-
EncodingError {{experimental_inline}}
-
エンコードやデコードといった、エンコーディング操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。
-
NotReadableError {{experimental_inline}}
-
入出力の読み取り操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。
-
UnknownError {{experimental_inline}}
-
未知の一時的な理由 (例えばメモリー不足) によって、操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。
-
ConstraintError {{experimental_inline}}
-
制約が満たされないため、処理の中の変更操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。
-
DataError {{experimental_inline}}
-
提供されたデータが不適切です (レガシーコードおよびレガシー定数名はありません)。
-
TransactionInactiveError {{experimental_inline}}
-
現在アクティブではない、または終了した処理に対して要求を行いました (レガシーコードおよびレガシー定数名はありません)。
-
ReadOnlyError {{experimental_inline}}
-
"読み取り専用" の処理で変更操作を試みました (レガシーコードおよびレガシー定数名はありません)。
-
VersionError {{experimental_inline}}
-
現在のバージョンより古いバージョンを使用するデータベースを開こうとしました (レガシーコードおよびレガシー定数名はありません)。
-
OperationError {{experimental_inline}}
-
操作に固有の理由で、操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。
-
NotAllowedError
-
現在の状況において、ユーザーエージェントまたはプラットフォームが要求を許可しませんでした。ユーザーが拒否されている可能性があります (レガシーコードおよびレガシー定数名はありません)。
-
- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}}{{Spec2('WebIDL')}}DOMException クラスのコンストラクターを追加。値 NotReadableError, UnknownError, ConstraintError, DataError, TransactionInactiveError, ReadOnlyError, VersionError, OperationError, NotAllowedError を追加。
{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}{{Spec2('DOM4')}}SECURITY_ERR, NETWORK_ERR, ABORT_ERR, URL_MISMATCH_ERR, QUOTA_EXCEEDED_ERR, TIMEOUT_ERR, INVALID_NODE_TYPE_ERR, DATA_CLONE_ERR を追加。例外値のプロパティ code を非推奨に変更。値 EncodingError を追加。
{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM3 Core')}}VALIDATION_ERR および TYPE_MISMATCH_ERR を追加。
{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM2 Core')}}INVALID_STATE_ERR, SYNTAX_ERR, INVALID_MODIFICATION_ERR, NAMESPACE_ERR, INVALID_ACCESS_ERR を追加。
{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}{{Spec2('DOM1')}}最初期の定義
- -

ブラウザー実装状況

- - - -

{{Compat("api.DOMException")}}

- -

関連情報

- - +{{APIRef("DOM")}} + +**`DOMException`** インターフェイスは、Web API のメソッドの呼び出しやプロパティへのアクセスによって異常なイベント (**例外**と呼ばれます) が発生したことを表します。これは基本的に、Web API 内部のエラーの状態を示すものです。 + +それぞれの例外に**名称**があり、これはエラーまたは異常な状態を特定する "CamelCase" 形式の文字列です。 + +## コンストラクター + +- {{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}} + - : 指定したメッセージおよび名称の `DOMException` オブジェクトを返します。 + +## プロパティ + +- {{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}} + - : [エラーコード定数](#error_codes) の内の 1 つ、または該当しない場合に `0` を `short` 型の値で返します。このフィールドは歴史的な経緯で使用されており、新たな DOM 例外では使用しません。新たな例外の情報は {{domxref("DOMException.name")}} 属性に収めています。 +- {{domxref("DOMException.message")}} {{readOnlyInline}} + - : 指定した [エラー名](/ja/docs/Web/API/DOMException#Error_names) に関連付けられたメッセージまたは説明を表す {{domxref("DOMString")}} を返します。 +- {{domxref("DOMException.name")}} {{readOnlyInline}} + - : [エラー名](#Error_constants) に関連付けられた文字列のひとつを {{domxref("DOMString")}} 型の値で返します。 + +## エラー名 + +これは、一般的なエラー名の一覧です。独自にエラー名のセットを定義している API がありますので、これは必ずしも完全なリストではありません。 + +> **Note:** **注記**: 歴史的にエラーは、エラーの値を持つように定義した名前付き変数と、それに対応する値で識別されてきたため、一部の項目では過去に使用されたレガシーコードや定数名も記載します。 + +- `IndexSizeError` + - : インデックスが許可された範囲から外れています。例えば、{{domxref("Range")}} オブジェクトで発生することがあります。(レガシーコード: `1`、レガシー定数名: `INDEX_SIZE_ERR`) +- [`HierarchyRequestError`]() + - : ノードツリーの階層が正しくありません。(レガシーコード: `3`、レガシー定数名: `HIERARCHY_REQUEST_ERR`) +- `WrongDocumentError` + - : オブジェクトが誤った {{domxref("Document")}} 内に存在します。(レガシーコード: `4`、レガシー定数名: `WRONG_DOCUMENT_ERR`) +- `InvalidCharacterError` + - : 文字列に無効な文字が含まれています。(レガシーコード: `5`、レガシー定数名: `INVALID_CHARACTER_ERR`) +- `NoModificationAllowedError` + - : オブジェクトを変更できません。(レガシーコード: `7`、レガシー定数名: `NO_MODIFICATION_ALLOWED_ERR`) +- `NotFoundError` + - : オブジェクトが見つかりません。(レガシーコード: `8`、レガシー定数名: `NOT_FOUND_ERR`) +- `NotSupportedError` + - : 操作をサポートしていません。(レガシーコード: `9`、レガシー定数名: `NOT_SUPPORTED_ERR`) +- `InvalidStateError` + - : オブジェクトが無効な状態です。(レガシーコード: `11`、レガシー定数名: `INVALID_STATE_ERR`) +- `SyntaxError` + - : 文字列が期待されたパターンにマッチしません。(レガシーコード: `12`、レガシー定数名: `SYNTAX_ERR`) +- `InvalidModificationError` + - : オブジェクトをこの方法で変更できません。(レガシーコード: `13`、レガシー定数名: `INVALID_MODIFICATION_ERR`) +- `NamespaceError` + - : XML の名前空間によって、操作は許可されていません。(レガシーコード: `14`、レガシー定数名: `NAMESPACE_ERR`) +- `InvalidAccessError` + - : オブジェクトが操作や引数をサポートしていません。(レガシーコード: `15`、レガシー定数名: `INVALID_ACCESS_ERR`) +- `TypeMismatchError` {{deprecated_inline}} + - : オブジェクトの型が、期待された型に一致しません。(レガシーコード: `17`、レガシー定数名: `TYPE_MISMATCH_ERR`) この値は非推奨であり、この値を持つ `DOMException` に代わり JavaScript の {{jsxref("TypeError")}} 例外が発生します。 +- `SecurityError` + - : 操作が安全ではありません。(レガシーコード: `18`、レガシー定数名: `SECURITY_ERR`) +- `NetworkError` {{experimental_inline}} + - : ネットワークのエラーが発生しました。(レガシーコード: `19`、レガシー定数名: `NETWORK_ERR`) +- `AbortError` {{experimental_inline}} + - : 操作が異常終了しました。(レガシーコード: `20`、レガシー定数名: `ABORT_ERR`) +- `URLMismatchError` {{experimental_inline}} + - : 与えられた URL が、別の URL と一致しません。(レガシーコード: `21`、レガシー定数名: `URL_MISMATCH_ERR`) +- `QuotaExceededError` {{experimental_inline}} + - : クォータを超過しました。(レガシーコード: `22`、レガシー定数名: `QUOTA_EXCEEDED_ERR`) +- `TimeoutError` + - : 操作がタイムアウトしました。(レガシーコード: `23`、レガシー定数名: `TIMEOUT_ERR`) +- `InvalidNodeTypeError` {{experimental_inline}} + - : ノードが正しくない、または操作に対して誤った祖先が存在します。(レガシーコード: `24`、レガシー定数名: `INVALID_NODE_TYPE_ERR`) +- `DataCloneError` {{experimental_inline}} + - : オブジェクトを複製できません。(レガシーコード: `25`、レガシー定数名: `DATA_CLONE_ERR`) +- `EncodingError` {{experimental_inline}} + - : エンコードやデコードといった、エンコーディング操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。 +- `NotReadableError` {{experimental_inline}} + - : 入出力の読み取り操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。 +- `UnknownError` {{experimental_inline}} + - : 未知の一時的な理由 (例えばメモリー不足) によって、操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。 +- `ConstraintError` {{experimental_inline}} + - : 制約が満たされないため、処理の中の変更操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。 +- `DataError` {{experimental_inline}} + - : 提供されたデータが不適切です (レガシーコードおよびレガシー定数名はありません)。 +- `TransactionInactiveError` {{experimental_inline}} + - : 現在アクティブではない、または終了した処理に対して要求を行いました (レガシーコードおよびレガシー定数名はありません)。 +- `ReadOnlyError` {{experimental_inline}} + - : "読み取り専用" の処理で変更操作を試みました (レガシーコードおよびレガシー定数名はありません)。 +- `VersionError` {{experimental_inline}} + - : 現在のバージョンより古いバージョンを使用するデータベースを開こうとしました (レガシーコードおよびレガシー定数名はありません)。 +- `OperationError` {{experimental_inline}} + - : 操作に固有の理由で、操作が失敗しました (レガシーコードおよびレガシー定数名はありません)。 +- `NotAllowedError` + - : 現在の状況において、ユーザーエージェントまたはプラットフォームが要求を許可しませんでした。ユーザーが拒否されている可能性があります (レガシーコードおよびレガシー定数名はありません)。 + +## 仕様 + +| 仕様書 | 策定状況 | コメント | +| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}} | {{Spec2('WebIDL')}} | `DOMException` クラスのコンストラクターを追加。値 `NotReadableError`, `UnknownError`, `ConstraintError`, `DataError`, `TransactionInactiveError`, `ReadOnlyError`, `VersionError`, `OperationError`, `NotAllowedError` を追加。 | +| {{SpecName('DOM4', '#exception-domexception', 'DOMException')}} | {{Spec2('DOM4')}} | `SECURITY_ERR`, `NETWORK_ERR`, `ABORT_ERR`, `URL_MISMATCH_ERR`, `QUOTA_EXCEEDED_ERR`, `TIMEOUT_ERR`, `INVALID_NODE_TYPE_ERR`, `DATA_CLONE_ERR` を追加。例外値のプロパティ `code` を非推奨に変更。値 `EncodingError` を追加。 | +| {{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}} | {{Spec2('DOM3 Core')}} | `VALIDATION_ERR` および `TYPE_MISMATCH_ERR` を追加。 | +| {{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}} | {{Spec2('DOM2 Core')}} | `INVALID_STATE_ERR`, `SYNTAX_ERR`, `INVALID_MODIFICATION_ERR`, `NAMESPACE_ERR`, `INVALID_ACCESS_ERR` を追加。 | +| {{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}} | {{Spec2('DOM1')}} | 最初期の定義 | + +## ブラウザー実装状況 + +{{Compat("api.DOMException")}} + +## 関連情報 + +- {{domxref("DOMError")}} diff --git a/files/ja/web/api/domexception/name/index.md b/files/ja/web/api/domexception/name/index.md index cae6d4027c56c9..3f1baf8f82d517 100644 --- a/files/ja/web/api/domexception/name/index.md +++ b/files/ja/web/api/domexception/name/index.md @@ -11,38 +11,26 @@ tags: - プロパティ translation_of: Web/API/DOMException/name --- -

{{ APIRef("DOM") }}

+{{ APIRef("DOM") }} -

name は {{domxref("DOMException")}} インターフェイスの読取専用プロパティで、 エラー名に結びつけられた文字列のうちの一つを含む {{domxref("DOMString")}} を返します。

+**`name`** は {{domxref("DOMException")}} インターフェイスの読取専用プロパティで、 [エラー名](/ja/docs/Web/API/DOMException#Error_names)に結びつけられた文字列のうちの一つを含む {{domxref("DOMString")}} を返します。 -

構文

+## 構文 -
var domExceptionName = domExceptionInstance.name;
-
+``` +var domExceptionName = domExceptionInstance.name; +``` -

値

+### 値 -

{{domxref("DOMString")}} です。

+{{domxref("DOMString")}} です。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('WebIDL', '#dom-domexception-name', 'name')}}{{Spec2('WebIDL')}}
+| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------- | ------------------------ | ---- | +| {{SpecName('WebIDL', '#dom-domexception-name', 'name')}} | {{Spec2('WebIDL')}} | | -

ブラウザーの互換性

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

{{Compat("api.DOMException.name")}}

+{{Compat("api.DOMException.name")}} diff --git a/files/ja/web/api/federatedcredential/index.md b/files/ja/web/api/federatedcredential/index.md index f92c29ccb98e86..6aa8956f49eb61 100644 --- a/files/ja/web/api/federatedcredential/index.md +++ b/files/ja/web/api/federatedcredential/index.md @@ -11,41 +11,38 @@ tags: - インターフェイス translation_of: Web/API/FederatedCredential --- -
{{SeeCompatTable}}{{APIRef("Credential Management API")}}
+{{SeeCompatTable}}{{APIRef("Credential Management API")}} -

FederatedCredential は Credential Management API のインターフェイスで、連合アイデンティティのプロバイダーからの認証情報についての情報を提供します。連合アイデンティティのプロバイダーは、ウェブサイトが正しくユーザーを認証し、そのための API を提供する主体です。連合アイデンティティプロバイダーの一例として、 OpenID Connect があります。

+**`FederatedCredential`** は [Credential Management API](/ja/docs/Web/API/Credential_Management_API) のインターフェイスで、連合アイデンティティのプロバイダーからの認証情報についての情報を提供します。連合アイデンティティのプロバイダーは、ウェブサイトが正しくユーザーを認証し、そのための API を提供する主体です。連合アイデンティティプロバイダーの一例として、 [OpenID Connect](http://openid.net/developers/specs/) があります。 -

対応しているブラウザーにおいては、このインターフェイスのインスタンスがグローバル {{domxref('fetch')}} の init オブジェクトの credential メンバーとして渡されることがあります。

+対応しているブラウザーにおいては、このインターフェイスのインスタンスがグローバル {{domxref('fetch')}} の `init` オブジェクトの `credential` メンバーとして渡されることがあります。 -

コンストラクター

+## コンストラクター -
-
{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}
-
新しい FederatedCredential オブジェクトを生成します。
-
+- {{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}} + - : 新しい `FederatedCredential` オブジェクトを生成します。 -

プロパティ

+## プロパティ -

祖先である {{domxref("Credential")}} からプロパティを継承しています。

+_祖先である {{domxref("Credential")}} からプロパティを継承しています。_ -
-
{{domxref("FederatedCredential.provider")}} {{readonlyInline}}
-
認証情報の連合アイデンティティプロバイダーを含む {{domxref("USVString")}} です。
-
{{domxref("FederatedCredential.protocol")}} {{readonlyInline}}
-
認証情報の連合アイデンティティプロトコルを含む {{domxref("DOMString")}} です。
-
+- {{domxref("FederatedCredential.provider")}} {{readonlyInline}} + - : 認証情報の連合アイデンティティプロバイダーを含む {{domxref("USVString")}} です。 +- {{domxref("FederatedCredential.protocol")}} {{readonlyInline}} + - : 認証情報の連合アイデンティティプロトコルを含む {{domxref("DOMString")}} です。 -

イベントハンドラー

+### イベントハンドラー -

なし。

+なし。 -

メソッド

+## メソッド -

なし。

+なし。 -

例

+## 例 -
var cred = new FederatedCredential({
+```js
+var cred = new FederatedCredential({
   id: id,
   name: name,
   provider: 'https://account.google.com',
@@ -56,25 +53,15 @@ translation_of: Web/API/FederatedCredential
 navigator.credentials.store(cred)
   .then(function() {
   // 他に何かをする
-});
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}初回定義
- -

ブラウザーの対応

- -

{{Compat("api.FederatedCredential")}}

+}); +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------ | -------------------------------------------- | -------- | +| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | 初回定義 | + +## ブラウザーの対応 + +{{Compat("api.FederatedCredential")}} diff --git a/files/ja/web/api/federatedcredential/protocol/index.md b/files/ja/web/api/federatedcredential/protocol/index.md index 6579246621dca7..579a917810bf33 100644 --- a/files/ja/web/api/federatedcredential/protocol/index.md +++ b/files/ja/web/api/federatedcredential/protocol/index.md @@ -13,41 +13,32 @@ tags: - プロパティ translation_of: Web/API/FederatedCredential/protocol --- -
{{SeeCompatTable}}{{APIRef("")}}{{securecontext_header}}
+{{SeeCompatTable}}{{APIRef("")}}{{securecontext_header}} -

protocol は {{domxref("FederatedCredential")}} インターフェイスのプロパティで、認証情報の連合アイデンティティプロトコルが入った読み取り専用の {{domxref("DOMString")}} を返します。このプロパティが {{jsxref("null")}} の場合、プロトコルは {{domxref("FederatedCredential.provider")}} プロパティから推測される可能性があります。

+**`protocol`** は {{domxref("FederatedCredential")}} インターフェイスのプロパティで、認証情報の連合アイデンティティプロトコルが入った読み取り専用の {{domxref("DOMString")}} を返します。このプロパティが {{jsxref("null")}} の場合、プロトコルは {{domxref("FederatedCredential.provider")}} プロパティから推測される可能性があります。 -

構文

+## 構文 -
var protocol = FederatedCredential.protocol
+``` +var protocol = FederatedCredential.protocol +``` -

値

+### 値 -

認証情報の連合アイデンティティプロトコルが入った {{domxref("DOMString")}} です (例えば openidconnect)。

+認証情報の連合アイデンティティプロトコルが入った {{domxref("DOMString")}} です (例えば `openidconnect`)。 -

例

+## 例 -
// TBD
+```js +// TBD +``` -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Credential Management','#dom-federatedcredential-protocol','protocol')}}{{Spec2('Credential Management')}}初回定義
+| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------- | +| {{SpecName('Credential Management','#dom-federatedcredential-protocol','protocol')}} | {{Spec2('Credential Management')}} | 初回定義 | -

ブラウザーの対応

+## ブラウザーの対応 -

{{Compat("api.FederatedCredential.protocol")}}

+{{Compat("api.FederatedCredential.protocol")}} diff --git a/files/ja/web/api/frame_timing_api/index.md b/files/ja/web/api/frame_timing_api/index.md index abf14b743df11e..e26021700c3002 100644 --- a/files/ja/web/api/frame_timing_api/index.md +++ b/files/ja/web/api/frame_timing_api/index.md @@ -9,48 +9,44 @@ tags: - Web Performance translation_of: Web/API/Frame_Timing_API --- -
{{DefaultAPISidebar("Frame Timing API")}}{{SeeCompatTable}}
+{{DefaultAPISidebar("Frame Timing API")}}{{SeeCompatTable}} -

The PerformanceFrameTiming interface provides frame timing data about the browser's event loop. A frame represents the amount of work a browser does in one event loop iteration such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A frame rate of 60 fps (frames per second) for a 60 Hz refresh rate is a common target for a good responsive user experience. This means the browser should process a frame in about 16.7 ms.

+The **`PerformanceFrameTiming`** interface provides _frame_ timing data about the browser's event loop. A _frame_ represents the amount of work a browser does in [one event loop iteration](https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8) such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A _frame rate_ of 60 fps (frames per second) for a 60 Hz refresh rate is a common target for a good _responsive_ user experience. This means the browser should process a frame in about 16.7 ms. -

An application can register a {{domxref("PerformanceObserver")}} for "frame" {{domxref("PerformanceEntry","performance entry types")}}. The observer (callback) will be notified when new "frame" events are added to the browser's performance timeline and the frame's {{domxref("PerformanceEntry.duration","duration")}} (length of time) will be available. This data can be used to help identify areas that take too long to provide a good user experience.

+An application can register a {{domxref("PerformanceObserver")}} for "`frame`" {{domxref("PerformanceEntry","performance entry types")}}. The _observer_ (callback) will be notified when new "`frame`" events are added to the browser's _performance timeline_ and the frame's {{domxref("PerformanceEntry.duration","duration")}} (length of time) will be available. This data can be used to help identify areas that take too long to provide a good user experience. -

Example code of the interfaces described in this document is included in Using the Frame Timing API.

+Example code of the interfaces described in this document is included in _[Using the Frame Timing API](/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API)_. -

Performance frames

+## Performance `frames` -

The {{domxref("PerformanceFrameTiming")}} interface extends the following {{domxref("PerformanceEntry")}} properties (for "frame" {{domxref("PerformanceEntry.entryType","performance entry types")}}) by qualifying and constrainting the properties as follows:

+The {{domxref("PerformanceFrameTiming")}} interface extends the following {{domxref("PerformanceEntry")}} properties (for "`frame`" {{domxref("PerformanceEntry.entryType","performance entry types")}}) by qualifying and constrainting the properties as follows: -
-
{{domxref("PerformanceEntry.entryType")}}
-
Set to "frame".
-
{{domxref("PerformanceEntry.name")}}
-
Set to the document's address.
-
{{domxref("PerformanceEntry.startTime")}}
-
Set to the {{domxref("DOMHighResTimeStamp")}} when the frame was started.
-
{{domxref("PerformanceEntry.duration")}}
-
Set to a {{domxref("DOMHighResTimeStamp","timestamp")}} indicating the difference between the startTimes of two successive frames.
-
+- {{domxref("PerformanceEntry.entryType")}} + - : Set to "`frame`". +- {{domxref("PerformanceEntry.name")}} + - : Set to the [document's address](https://dom.spec.whatwg.org/#concept-document-url). +- {{domxref("PerformanceEntry.startTime")}} + - : Set to the {{domxref("DOMHighResTimeStamp")}} when the frame was started. +- {{domxref("PerformanceEntry.duration")}} + - : Set to a {{domxref("DOMHighResTimeStamp","timestamp")}} indicating the difference between the `startTime`s of two successive frames. -

This data, particularly the duration timestamp, can be used to help identify performance problems.

+This data, particularly the `duration` timestamp, can be used to help identify performance problems. -

Frame observers

+## Frame observers -

{{experimental_inline}}The performance observer interfaces allow an application to register an observer for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is recorded in the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.

+{{experimental_inline}}The _performance observer_ interfaces allow an application to register an _observer_ for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is recorded in the browser's _performance timeline_, the application is notified of the event via the observer's callback function that was specified when the observer was created. -

To observe "frame" performance entry types, the application first creates a {{domxref("PerformanceObserver")}} object with a specific frame observer callback (function). Next, {{domxref("PerformanceObserver.observe()")}} is used to specify the set of performance events to observe - in this case, just the "frame" event type. When the browser adds a new frame to the performance timeline, the specified observer callback will be invoked.

+To observe "`frame`" performance entry types, the application first creates a {{domxref("PerformanceObserver")}} object with a specific frame observer callback (function). Next, {{domxref("PerformanceObserver.observe()")}} is used to specify the set of performance events to observe - in this case, just the "`frame`" event type. When the browser adds a new frame to the performance timeline, the specified observer callback will be invoked. -

Accessing frame data

+## Accessing frame data -

When a frame {{domxref("PerformanceObserver","observer")}} is invoked, frame {{domxref("PerformanceEntry","performance entries")}} can be retrieved by calling {{domxref("PerformanceObserverEntryList.getEntriesByType()")}} with an argument of "frame". This method returns a list of "frame" {{domxref("PerformanceEntry")}} objects. Each frame object's {{domxref("PerformanceEntry.duration","duration")}} property returns the timestamp of two consecutive frames. If this value is greater than the time needed to provide a good user experience, further analysis might be warranted.

+When a frame {{domxref("PerformanceObserver","observer")}} is invoked, frame {{domxref("PerformanceEntry","performance entries")}} can be retrieved by calling {{domxref("PerformanceObserverEntryList.getEntriesByType()")}} with an argument of "`frame`". This method returns a list of "`frame`" {{domxref("PerformanceEntry")}} objects. Each frame object's {{domxref("PerformanceEntry.duration","duration")}} property returns the timestamp of two consecutive frames. If this value is greater than the time needed to provide a good user experience, further analysis might be warranted. -

Browser compatibility

+## Browser compatibility -

{{experimental_inline}}As shown in the {{domxref("PerformanceFrameTiming")}} interface's Browser Compatibility table, this interface has no implementations.

+{{experimental_inline}}As shown in the {{domxref("PerformanceFrameTiming")}} interface's [Browser Compatibility](/Web/API/PerformanceFrameTiming#Browser_compatibility) table, this interface has no implementations. -

See also

+## See also - +- [Frame Rate (Firefox Performance Tool)](/ja/docs/Tools/Performance/Frame_rate) +- [Using the Frame Timing API](/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API) diff --git a/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.md b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.md index ae5be9ee247d20..e8488e3cf47b1d 100644 --- a/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.md +++ b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.md @@ -6,30 +6,31 @@ tags: - ガイド translation_of: Web/API/Frame_Timing_API/Using_the_Frame_Timing_API --- -
{{DefaultAPISidebar("Frame Timing API")}}{{SeeCompatTable}}
+{{DefaultAPISidebar("Frame Timing API")}}{{SeeCompatTable}} -

The PerformanceFrameTiming interface provides frame timing data about the browser's event loop. A frame represents the amount of work a browser does in one event loop iteration such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A frame rate of 60 fps (frames per second) for a 60 Hz refresh rate is a common target for a good responsive user experience. This means the browser should process a frame in about 16.7ms.

+The **`PerformanceFrameTiming`** interface provides _frame_ timing data about the browser's event loop. A _frame_ represents the amount of work a browser does in [one event loop iteration](https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8) such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A _frame rate_ of 60 fps (frames per second) for a 60 Hz refresh rate is a common target for a good _responsive_ user experience. This means the browser should process a frame in about 16.7ms. -

An application can register a {{domxref("PerformanceObserver")}} for "frame" {{domxref("PerformanceEntry","performance entry types")}} and the observer will have data about the duration of each frame event. This data can be used to help identify areas that take too long to provide a good user experience.

+An application can register a {{domxref("PerformanceObserver")}} for "`frame`" {{domxref("PerformanceEntry","performance entry types")}} and the observer will have data about the duration of each frame event. This data can be used to help identify areas that take too long to provide a good user experience. -

This document describes how to use the {{domxref("PerformanceFrameTiming")}} interfaces including example code. For an overview of these interfaces see Frame Timing API.

+This document describes how to use the {{domxref("PerformanceFrameTiming")}} interfaces including example code. For an overview of these interfaces see [Frame Timing API](/Web/API/Frame_Timing_API). -

フレームオブザーバー

+## フレームオブザーバー -

{{experimental_inline}}The performance observer interfaces allow an application to register an observer for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is added to the browser's performance timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.

+{{experimental_inline}}The _performance observer_ interfaces allow an application to register an _observer_ for specific {{domxref("PerformanceEntry","performance event types")}}. When one of those event types is added to the browser's _performance timeline_, the application is notified of the event via the observer's callback function that was specified when the observer was created. -

オブザーバーを作成する

+## オブザーバーを作成する -

To observe "frame" performance entry types, the application first creates a {{domxref("PerformanceObserver")}} object with a specific frame observer callback. In the following example, two observers for the "frame" {{domxref("PerformanceEntry.entryType","performance entry type")}} are created and the first observer constructor uses inline function syntax.

+To observe "`frame`" performance entry types, the application first creates a {{domxref("PerformanceObserver")}} object with a specific frame observer callback. In the following example, two observers for the "`frame`" {{domxref("PerformanceEntry.entryType","performance entry type")}} are created and the first observer constructor uses inline function syntax. -
function create_frame_observer() {
+```js
+function create_frame_observer() {
   if (window.PerformanceObserver === undefined) return;
 
   // Register the performance observer
   var observe_frame = new PerformanceObserver(function(list) {
     // Log the frame entries
     var perfEntries = list.getEntriesByType("frame");
-    for (var i=0; i < perfEntries.length; i++) {
+    for (var i=0; i < perfEntries.length; i++) {
       console.log("OBS #1: [" + i + "] = " + perfEntries[i].name);
     }
   });
@@ -47,32 +48,34 @@ function init () {
 function frame_observer_2(list) {
   // Log the frame entries
   var perfEntries = list.getEntriesByType("frame");
-  for (var i=0; i < perfEntries.length; i++) {
+  for (var i=0; i < perfEntries.length; i++) {
     console.log("OBS #2: [" + i + "] = " + perfEntries[i].name);
   }
 }
 
-<body onload="init(event)">
-
+ +``` -

When the browser adds a new "frame" entry to the performance timeline, both of the observer callbacks will be invoked.

+When the browser adds a new "`frame`" entry to the performance timeline, both of the observer callbacks will be invoked. -

通知を登録する

+## 通知を登録する -

After an observer is created, the next step is to use the {{domxref("PerformanceObserver.observe()")}} method to specify the set of performance events to observe. In the following example, the observer only registers for "frame" {{domxref("PerformanceEntry.entryType","performance entry")}} notifications.

+After an observer is created, the next step is to use the {{domxref("PerformanceObserver.observe()")}} method to specify the set of performance events to observe. In the following example, the observer only registers for "`frame`" {{domxref("PerformanceEntry.entryType","performance entry")}} notifications. -
 var observe_frame = new PerformanceObserver(function(list) {
+```js
+ var observe_frame = new PerformanceObserver(function(list) {
    // Process the frame ...
  });
  // Only observe 'frame' events
  observe_frame.observe({entryTypes: ['frame']});
-
+``` -

In the following example, the observer registers to be notified when several different {{domxref("PerformanceEntry.entryType","performance entry types")}} are added to the performance timeline.

+In the following example, the observer registers to be notified when several different {{domxref("PerformanceEntry.entryType","performance entry types")}} are added to the performance timeline. -
 var observe_all = new PerformanceObserver(function(list) {
+```js
+ var observe_all = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
-   for (var i=0; i < perfEntries.length; i++) {
+   for (var i=0; i < perfEntries.length; i++) {
      switch (perfEntries[i].entryType) {
        case "frame": process_frame(perfEntries[i]); break;
        case "mark": process_mark(perfEntries[i]); break;
@@ -84,54 +87,51 @@ function frame_observer_2(list) {
  });
  // Observe frame, mark, measure and resource events
  observe_frame.observe({entryTypes: ['frame', 'mark', 'measure', 'resource']});
-
+``` -

フレームデータへのアクセス

+## フレームデータへのアクセス -

When a frame {{domxref("PerformanceObserver","observer")}} is invoked, the observer callback is given one argument that is a {{domxref("PerformanceObserverEntryList")}} object. This object has three methods to retrieve frame data:

+When a frame {{domxref("PerformanceObserver","observer")}} is invoked, the observer callback is given one argument that is a {{domxref("PerformanceObserverEntryList")}} object. This object has three methods to retrieve frame data: -
-
{{domxref("PerformanceObserverEntryList.getEntries","PerformanceObserverEntryList.getEntries()")}}
-
Returns a list of explicitly observed {{domxref("PerformanceEntry")}} objects based on the list of entry types given to {{domxref("PerformanceObserver.observe()")}}.
-
{{domxref("PerformanceObserverEntryList.getEntriesByType","PerformanceObserverEntryList.getEntriesByType()")}}
-
Returns a list of explicitly observed {{domxref("PerformanceEntry")}} objects of the given entry type.
-
{{domxref("PerformanceObserverEntryList.getEntriesByName","PerformanceObserverEntryList.getEntriesByName()")}}
-
Returns a list of explicitly observed {{domxref("PerformanceEntry")}} objects based on the given name and entry type.
-
+- {{domxref("PerformanceObserverEntryList.getEntries","PerformanceObserverEntryList.getEntries()")}} + - : Returns a list of explicitly _observed_ {{domxref("PerformanceEntry")}} objects based on the list of entry types given to {{domxref("PerformanceObserver.observe()")}}. +- {{domxref("PerformanceObserverEntryList.getEntriesByType","PerformanceObserverEntryList.getEntriesByType()")}} + - : Returns a list of explicitly _observed_ {{domxref("PerformanceEntry")}} objects of the given _entry type_. +- {{domxref("PerformanceObserverEntryList.getEntriesByName","PerformanceObserverEntryList.getEntriesByName()")}} + - : Returns a list of explicitly _observed_ {{domxref("PerformanceEntry")}} objects based on the given _name_ and _entry type_. -

In the following example, the observer only processes "frame" entries.

+In the following example, the observer only processes "`frame`" entries. -
var THRESHOLD = 1500;
+```js
+var THRESHOLD = 1500;
 var observe_frame = new PerformanceObserver(function(list) {
   var perfEntries = list.getEntriesByType("frame");
-  for (var i=0; i < perfEntries.length; i++) {
-    if (perfEntries[i].duration > THRESHOLD) {
+  for (var i=0; i < perfEntries.length; i++) {
+    if (perfEntries[i].duration > THRESHOLD) {
       console.log("Warning: frame '" + THRESHOLD + "' exceeded!");
     }
   }
 });
 observe_frame.observe({entryTypes: ['frame']});
-
+``` -

ツールが助けになります！

+## ツールが助けになります！ -

First, perhaps using the tools will save you is a bit too strong but performance tools can certainly help identify code that is not conformant to some expected time threshold. This section briefly describes the web performance tools for the Firefox and Chrome/Canary browsers.

+First, perhaps using _the tools will save you_ is a _bit too strong_ but performance tools can certainly help identify code that is not conformant to some expected time threshold. This section briefly describes the web performance tools for the Firefox and Chrome/Canary browsers. -

Firefox performance tool

+### Firefox performance tool -

Firefox's performance tool allows the developer to record a piece of the user's interaction and the data obtained during the recording is used to create a profile of the browser's activity. The profile includes a waterfall of the activity such as event handling, layout, painting, scripting, etc.

+Firefox's performance tool allows the developer to _record_ a piece of the user's interaction and the data obtained during the recording is used to create a _profile_ of the browser's activity. The profile includes a _[waterfall](/ja/docs/Tools/Performance/Waterfall)_ of the activity such as event handling, layout, painting, scripting, etc. -

Firefox's performance tool also includes a frame rate graph which provides timestamps for each frame including the average frame rate and the minimum and maximum rates (for a specific recording session). This data, along with the waterfall data, gives an indication of where a site might be having frame related performance problems (for example, by correlating the recording's minimum rates with their respective waterfall events).

+Firefox's performance tool also includes a _[frame rate graph](/ja/docs/Tools/Performance/Frame_rate)_ which provides timestamps for each frame including the average frame rate and the minimum and maximum rates (for a specific recording session). This data, along with the waterfall data, gives an indication of where a site might be having frame related performance problems (for example, by correlating the recording's minimum rates with their respective waterfall events). -

The performance tool's flame chart and call tree tabs provide data to help analyze the site's JavaScript usage. The call tree shows where the application is spending most of its time, whereas the flame chart shows the state of the JavaScript stack for the code at every millisecond during the performance profile. This provides a way to know exactly which function was executing at any point during the recording, how long it ran, and where it was called from.

+The performance tool's _[flame chart](/ja/docs/Tools/Performance/Flame_Chart)_ and _[call tree](/ja/docs/Tools/Performance/Call_Tree)_ tabs provide data to help analyze the site's JavaScript usage. The call tree shows where the application is spending most of its time, whereas the flame chart shows the state of the JavaScript stack for the code at every millisecond during the performance profile. This provides a way to know exactly which function was executing at any point during the recording, how long it ran, and where it was called from. -

Chrome performance tool

+### Chrome performance tool -

The Chrome (and Canary) browsers also have a performance tool with similar functions as Firefox. See Performance profiling with the Timeline for more information about this tool.

+The Chrome (and Canary) browsers also have a performance tool with similar functions as Firefox. See [Performance profiling with the Timeline](https://developer.chrome.com/devtools/docs/timeline) for more information about this tool. -

あわせて参照

+## あわせて参照 - +- [Frame Rate (Firefox Performance Tool)](/ja/docs/Tools/Performance/Frame_rate) +- [Frame Timing](https://w3c.github.io/frame-timing/); W3C Editor's Draft diff --git a/files/ja/web/api/history_api/example/index.md b/files/ja/web/api/history_api/example/index.md index c7057171b45fd9..0da93a5d85c53d 100644 --- a/files/ja/web/api/history_api/example/index.md +++ b/files/ja/web/api/history_api/example/index.md @@ -3,151 +3,149 @@ title: Ajax ナビゲーションの例 slug: Web/API/History_API/Example translation_of: Web/API/History_API/Example --- -

これは3ページ (first_page.php、second_page.php、third_page.php) で構成された AJAX Web サイトの例です。どのように動作するかを確認するには、以下のファイル (またはgit clone https://github.com/giabao/mdn-ajax-nav-example.git) を作成してください：

+これは 3 ページ (first_page.php、second_page.php、third_page.php) で構成された AJAX Web サイトの例です。どのように動作するかを確認するには、以下のファイル (または git clone [https://github.com/giabao/mdn-ajax-nav-example.git](https://github.com/giabao/mdn-ajax-nav-example "/en-US/docs/")) を作成してください： -
メモ: このメカニズム内の {{HTMLElement("form")}} 要素を完全に統合するには、フォームの送信とファイルのアップロードの段落を見てください。
+> **Note:** **メモ:** このメカニズム内の {{HTMLElement("form")}} 要素を完全に統合するには、[フォームの送信とファイルのアップロード](/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)の段落を見てください。 -

first_page.php:

+**first_page.php**: -
-
<?php
+```php
+
+
+
+
+" . $page_title . "";
+?>
+
 
-<body>
+
 
-<?php include "include/before_content.php"; ?>
+
 
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from first_page.php.

 
-<div id="ajax-content">
-<?php } ?>
+

+
 
-    <p>This is the content of <strong>first_page.php</strong>.</p>
+    
This is the content of first_page.php.

 
-<?php
+ $page_title, "content" => ob_get_clean()));
     } else {
-?>
-</div>
+?>
+

 
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from first_page.php.

 
-<?php
+\n";
     }
-?>
-
-
+?> +``` -

second_page.php:

+**second_page.php**: -
-
<?php
+```php
+
+
+
+
+" . $page_title . "";
+?>
+
 
-<body>
+
 
-<?php include "include/before_content.php"; ?>
+
 
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from second_page.php.

 
-<div id="ajax-content">
-<?php } ?>
+

+
 
-    <p>This is the content of <strong>second_page.php</strong>.</p>
+    
This is the content of second_page.php.

 
-<?php
+ $page_title, "content" => ob_get_clean()));
     } else {
-?>
-</div>
+?>
+

 
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from second_page.php.

 
-<?php
+\n";
     }
-?>
-
-
+?> +``` -

third_page.php:

+**third_page.php**: -
-
<?php
+```php
+This is the content of third_page.php. This content is stored into a php variable.
";
 
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
     } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
+?>
+
+
+
+" . $page_title . "";
+?>
+
 
-<body>
+
 
-<?php include "include/before_content.php"; ?>
+
 
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from third_page.php.

 
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
+

+
+

 
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from third_page.php.

 
-<?php
+\n";
     }
-?>
-
-
+?> +``` -

css/style.css:

+**css/style.css**: -
#ajax-loader {
+```css
+#ajax-loader {
     position: fixed;
     display: table;
     top: 0;
@@ -156,7 +154,7 @@ translation_of: Web/API/History_API/Example
     height: 100%;
 }
 
-#ajax-loader > div {
+#ajax-loader > div {
     display: table-cell;
     width: 100%;
     height: 100%;
@@ -165,40 +163,42 @@ translation_of: Web/API/History_API/Example
     background-color: #000000;
     opacity: 0.65;
 }
-
+``` -

include/after_content.php:

+**include/after_content.php**: -
<p>This is the footer. It is shared between all ajax pages.</p>
-
+```php +

This is the footer. It is shared between all ajax pages.

+``` -

include/before_content.php:

+**include/before_content.php**: -
<p>
-[ <a class="ajax-nav" href="first_page.php">First example</a>
-| <a class="ajax-nav" href="second_page.php">Second example</a>
-| <a class="ajax-nav" href="third_page.php">Third example</a>
-| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
-</p>
+```php
+

+[ First example
+| Second example
+| Third example
+| Unexisting page ]
+

+```
 
-
+**include/header.php**: -

include/header.php:

+```php + + + +``` -
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
+**js/ajax_nav.js**: -

js/ajax_nav.js:

- -
-
"use strict";
+```js
+"use strict";
 
 const ajaxRequest = new (function () {
 
     function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
         bIsLoading = false;
     }
 
@@ -258,7 +258,7 @@ const ajaxRequest = new (function () {
     }
 
     function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
     }
 
     function getPage (sPage) {
@@ -294,7 +294,7 @@ const ajaxRequest = new (function () {
     function init () {
         oPageInfo.title = document.title;
         history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url);
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
     }
 
     const
@@ -303,7 +303,7 @@ const ajaxRequest = new (function () {
         sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
 
         /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
         oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
         oPageInfo = {
             title: null,
@@ -399,14 +399,11 @@ const ajaxRequest = new (function () {
     this.rebuildLinks = init;
 
 })();
-
-
+``` -

詳細は、ブラウザの履歴を操作するを参照してください。

+詳細は、[ブラウザの履歴を操作する](/ja/docs/Web/API/History_API)を参照してください。 -

あわせて参照

+## あわせて参照 - +- {{ domxref("window.history") }} +- {{ domxref("window.onpopstate") }} diff --git a/files/ja/web/api/history_api/index.md b/files/ja/web/api/history_api/index.md index f9a577390c3b16..b226c55555be60 100644 --- a/files/ja/web/api/history_api/index.md +++ b/files/ja/web/api/history_api/index.md @@ -10,70 +10,75 @@ tags: - 履歴 translation_of: Web/API/History_API --- -
{{DefaultAPISidebar("History API")}}
+{{DefaultAPISidebar("History API")}} -

DOM の {{DOMxRef("Window")}} オブジェクトは、ブラウザーのセッション履歴 (WebExtensions history と混同しないように) へのアクセスを {{DOMxRef("Window.history","history")}} オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。

+DOM の {{DOMxRef("Window")}} オブジェクトは、ブラウザーのセッション履歴 ([WebExtensions history](/ja/docs/Mozilla/Add-ons/WebExtensions/API/history) と混同しないように) へのアクセスを {{DOMxRef("Window.history","history")}} オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。 -

概念と使用方法

+## 概念と使用方法 -

ユーザーの履歴の中を前のページや次のページへ移動するには、 {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, {{DOMxRef("History.go","go()")}} の各メソッドを使用します。

+ユーザーの履歴の中を前のページや次のページへ移動するには、 {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}}, {{DOMxRef("History.go","go()")}} の各メソッドを使用します。 -

前のページや次のページへの移動

+### 前のページや次のページへの移動 -

履歴を前に遡るには、次のようにします。

+履歴を前に遡るには、次のようにします。 -
window.history.back()
-
+```js +window.history.back() +``` -

これは、ちょうどユーザーがブラウザーのツールバーの前のページへ戻るボタンをクリックしたときのような動作です。

+これは、ちょうどユーザーがブラウザーのツールバーの前のページへ戻るボタンをクリックしたときのような動作です。 -

同様に、次のようにして (ユーザーが次のページへ進むボタンをクリックしたときのように) 次のページへ進むこともできます。

+同様に、次のようにして (ユーザーが次のページへ進むボタンをクリックしたときのように) 次のページへ進むこともできます。 -
window.history.forward()
-
+```js +window.history.forward() +``` -

履歴内の特定の位置まで移動

+### 履歴内の特定の位置まで移動 -

{{DOMxRef("History.go","go()")}} メソッドを使うと、セッション履歴において現在のページから相対的な位置を指定して特定のページを読み込むことができます。 (現在のページの相対位置は 0 となります。)

+{{DOMxRef("History.go","go()")}} メソッドを使うと、セッション履歴において現在のページから相対的な位置を指定して特定のページを読み込むことができます。 (現在のページの相対位置は `0` となります。) -

ひとつ前のページへと戻る例です ({{DOMxRef("History.back","back()")}} と同様の動き)。

+ひとつ前のページへと戻る例です ({{DOMxRef("History.back","back()")}} と同様の動き)。 -
window.history.go(-1)
-
+```js +window.history.go(-1) +``` -

ページを進める例で、 {{DOMxRef("History.forward","forward()")}} を呼び出すのと同様です。

+ページを進める例で、 {{DOMxRef("History.forward","forward()")}} を呼び出すのと同様です。 -
window.history.go(1)
-
+```js +window.history.go(1) +``` -

同様に、 2 を渡すことで2ページ分を進めることができます。

+同様に、 `2` を渡すことで 2 ページ分を進めることができます。 -

go() メソッドの他の使い方として、 0 を渡すか、引数なしで呼び出すことで、現在のページを再読み込みすることができます。

+`go()` メソッドの他の使い方として、 `0` を渡すか、引数なしで呼び出すことで、現在のページを再読み込みすることができます。 -
// 以下の文は、
+```js
+// 以下の文は、
 // どちらもページを再読み込みする
 // 効果があります。
 window.history.go(0)
 window.history.go()
-
+``` -

length プロパティの値を参照することにより、履歴スタック中のページの数を知ることができます。

+`length` プロパティの値を参照することにより、履歴スタック中のページの数を知ることができます。 -
let numberOfEntries = window.history.length
-
+```js +let numberOfEntries = window.history.length +``` -

インターフェイス

+## インターフェイス -
-
{{domxref("History")}}
-
ブラウザーのセッション履歴 (すなわち、現在のページが読み込まれているタブやフレームで表示したことがあるページ群) の操作ができます。
-
+- {{domxref("History")}} + - : ブラウザーの*セッション履歴* (すなわち、現在のページが読み込まれているタブやフレームで表示したことがあるページ群) の操作ができます。 -

例

+## 例 -

以下の例では onpopstate プロパティにリスナーを割り当てています。そして、 history オブジェクトのメソッドで現在のタブのブラウザー履歴の追加、置換、移動など、いくつかの操作を説明しています。

+以下の例では `onpopstate` プロパティにリスナーを割り当てています。そして、 history オブジェクトのメソッドで現在のタブのブラウザー履歴の追加、置換、移動など、いくつかの操作を説明しています。 -
window.onpopstate = function(event) {
+```js
+window.onpopstate = function(event) {
   alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
 }
 
@@ -82,47 +87,27 @@ history.pushState({page: 2}, "title 2", "?page=2")
 history.replaceState({page: 3}, "title 3", "?page=3")
 history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
 history.back() // alerts "location: http://example.com/example.html, state: null"
-history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("HTML WHATWG", "browsers.html#history", "History")}}{{Spec2("HTML WHATWG")}}{{SpecName("HTML5 W3C")}} から変更なし
{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}{{Spec2("HTML5 W3C")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.History")}}

- -

関連情報

- -

リファレンス

- - - -

ガイド

- - +history.go(2) // alerts "location: http://example.com/example.html?page=3, state: {"page":3}" +``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------- | +| {{SpecName("HTML WHATWG", "browsers.html#history", "History")}} | {{Spec2("HTML WHATWG")}} | {{SpecName("HTML5 W3C")}} から変更なし | +| {{SpecName("HTML5 W3C", "browsers.html#history", "History")}} | {{Spec2("HTML5 W3C")}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.History")}} + +## 関連情報 + +### リファレンス + +- {{ domxref("window.history") }} +- {{ domxref("window.onpopstate") }} + +### ガイド + +- [History API の操作](/ja/docs/Web/API/History_API/Working_with_the_History_API) diff --git a/files/ja/web/api/idbrequest/index.md b/files/ja/web/api/idbrequest/index.md index 24c7e3dc9844e4..695dd7adc2efa2 100644 --- a/files/ja/web/api/idbrequest/index.md +++ b/files/ja/web/api/idbrequest/index.md @@ -13,65 +13,58 @@ tags: - TopicStub translation_of: Web/API/IDBRequest --- -

{{APIRef("IndexedDB")}}

+{{APIRef("IndexedDB")}} -
-

The IDBRequest interface of the IndexedDB API provides access to results of asynchronous requests to databases and database objects using event handler attributes. Each reading and writing operation on a database is done using a request.

-
+The **`IDBRequest`** interface of the IndexedDB API provides access to results of asynchronous requests to databases and database objects using event handler attributes. Each reading and writing operation on a database is done using a request. -

The request object does not initially contain any information about the result of the operation, but once information becomes available, an event is fired on the request, and the information becomes available through the properties of the IDBRequest instance.

+The request object does not initially contain any information about the result of the operation, but once information becomes available, an event is fired on the request, and the information becomes available through the properties of the `IDBRequest` instance. -

All asynchronous operations immediately return an {{domxref("IDBRequest")}} instance. Each request has a readyState that is set to the 'pending' state; this changes to 'done' when the request is completed or fails. When the state is set to done, every request returns a result and an error, and an event is fired on the request. When the state is still pending, any attempt to access the result or error raises an InvalidStateError exception.

+All asynchronous operations immediately return an {{domxref("IDBRequest")}} instance. Each request has a `readyState` that is set to the `'pending'` state; this changes to `'done'` when the request is completed or fails. When the state is set to `done`, every request returns a `result` and an `error`, and an event is fired on the request. When the state is still `pending`, any attempt to access the `result` or `error` raises an `InvalidStateError` exception. -

In plain words, all asynchronous methods return a request object. If the request has been completed successfully, the result is made available through the result property and an event indicating success is fired at the request ({{domxref("IDBRequest.onsuccess")}}). If an error occurs while performing the operation, the exception is made available through the result property and an error event is fired ({{domxref("IDBRequest.onerror")}}).

+In plain words, all asynchronous methods return a request object. If the request has been completed successfully, the result is made available through the `result` property and an event indicating success is fired at the request ({{domxref("IDBRequest.onsuccess")}}). If an error occurs while performing the operation, the exception is made available through the `result` property and an error event is fired ({{domxref("IDBRequest.onerror")}}). -

The interface {{domxref("IDBOpenDBRequest")}} is derived from IDBRequest.

+The interface {{domxref("IDBOpenDBRequest")}} is derived from `IDBRequest`. -

{{AvailableInWorkers}}

+{{AvailableInWorkers}} -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -

Properties

+## Properties -

Also inherits properties from {{domxref("EventTarget")}}.

+_Also inherits properties from {{domxref("EventTarget")}}._ -
-
{{domxref("IDBRequest.error")}} {{readonlyInline}}
-
Returns a {{domxref("DOMException")}} in the event of an unsuccessful request, indicating what went wrong.
-
{{domxref("IDBRequest.result")}} {{readonlyInline}}
-
-

Returns the result of the request. If the the request failed and the result is not available, an InvalidStateError exception is thrown.

-
-
{{domxref("IDBRequest.source")}} {{readonlyInline}}
-
The source of the request, such as an {{domxref("IDBIndex")}} or an {{domxref("IDBObjectStore")}}. If no source exists (such as when calling {{domxref("IDBFactory.open")}}), it returns null.
-
{{domxref("IDBRequest.readyState")}} {{readonlyInline}}
-
The state of the request. Every request starts in the pending state. The state changes to done when the request completes successfully or when an error occurs.
-
{{domxref("IDBRequest.transaction")}} {{readonlyInline}}
-
The transaction for the request. This property can be null for certain requests, for example those returned from {{domxref("IDBFactory.open")}} unless an upgrade is needed. (You're just connecting to a database, so there is no transaction to return).
-
+- {{domxref("IDBRequest.error")}} {{readonlyInline}} + - : Returns a {{domxref("DOMException")}} in the event of an unsuccessful request, indicating what went wrong. +- {{domxref("IDBRequest.result")}} {{readonlyInline}} + - : Returns the result of the request. If the the request failed and the result is not available, an InvalidStateError exception is thrown. +- {{domxref("IDBRequest.source")}} {{readonlyInline}} + - : The source of the request, such as an {{domxref("IDBIndex")}} or an {{domxref("IDBObjectStore")}}. If no source exists (such as when calling {{domxref("IDBFactory.open")}}), it returns null. +- {{domxref("IDBRequest.readyState")}} {{readonlyInline}} + - : The state of the request. Every request starts in the `pending` state. The state changes to `done` when the request completes successfully or when an error occurs. +- {{domxref("IDBRequest.transaction")}} {{readonlyInline}} + - : The transaction for the request. This property can be null for certain requests, for example those returned from {{domxref("IDBFactory.open")}} unless an upgrade is needed. (You're just connecting to a database, so there is no transaction to return). -

Methods

+## Methods -

No methods, but inherits methods from {{domxref("EventTarget")}}.

+_No methods, but inherits methods from {{domxref("EventTarget")}}._ -

Events

+## Events -

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

+Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface. -
-
error
-
Fired when an error caused a request to fail.
- Also available via the onerror property.
-
success
-
Fired when an IDBRequest succeeds.
- Also available via the onsuccess property.
-
+- [`error`](/ja/docs/Web/API/IDBRequest/error_event) + - : Fired when an error caused a request to fail. + Also available via the [`onerror`](/ja/docs/Web/API/IDBRequest/onerror) property. +- [`success`](/ja/docs/Web/API/IDBRequest/success_event) + - : Fired when an `IDBRequest` succeeds. + Also available via the [`onsuccess`](/ja/docs/Web/API/IDBRequest/onsuccess) property. -

Example

+## Example -

In the following code snippet, we open a database asynchronously and make a request; onerror and onsuccess functions are included to handle the success and error cases. For a full working example, see our To-do Notifications app (view example live.)

+In the following code snippet, we open a database asynchronously and make a request; `onerror` and `onsuccess` functions are included to handle the success and error cases. For a full working example, see our [To-do Notifications](https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages) app ([view example live](http://chrisdavidmills.github.io/to-do-notifications/).) -
var db;
+```js
+var db;
 
 // Let us open our database
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
@@ -79,56 +72,34 @@ var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 // these two event handlers act on the database being
 // opened successfully, or not
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '<li>Error loading database.</li>';
+  note.innerHTML += '
  • Error loading database.
    • ';
 };
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '<li>Database initialised.</li>';
+  note.innerHTML += '
  • Database initialised.
    • ';
 
   // store the result of opening the database.
   db = DBOpenRequest.result;
-};
    - -

    Specifications

    - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('IndexedDB', '#idl-def-IDBRequest', 'IDBRequest')}}{{Spec2('IndexedDB')}}Initial definition.
    {{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}}{{Spec2("IndexedDB 2")}}
    - -

    Browser compatibility

    - -
    -
    - - -

    {{Compat("api.IDBRequest")}}

    -
    -
    - -

    See also

    - - +}; +``` + +## Specifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('IndexedDB', '#idl-def-IDBRequest', 'IDBRequest')}} | {{Spec2('IndexedDB')}} | Initial definition. | +| {{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}} | {{Spec2("IndexedDB 2")}} | | + +## Browser compatibility + +{{Compat("api.IDBRequest")}} + +## See also + +- [Using IndexedDB](/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB) +- Starting transactions: {{domxref("IDBDatabase")}} +- Using transactions: {{domxref("IDBTransaction")}} +- Setting a range of keys: {{domxref("IDBKeyRange")}} +- Retrieving and making changes to your data: {{domxref("IDBObjectStore")}} +- Using cursors: {{domxref("IDBCursor")}} +- Reference example: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).) diff --git a/files/ja/web/api/idbrequest/success_event/index.md b/files/ja/web/api/idbrequest/success_event/index.md index dcbd3a9712e609..35a5cde50a4e7f 100644 --- a/files/ja/web/api/idbrequest/success_event/index.md +++ b/files/ja/web/api/idbrequest/success_event/index.md @@ -3,42 +3,47 @@ title: 'IDBRequest: success event' slug: Web/API/IDBRequest/success_event translation_of: Web/API/IDBRequest/success_event --- -
    {{ APIRef("IndexedDB") }}
    +{{ APIRef("IndexedDB") }} -

    successイベントはIDBRequestが成功すると着火します。

    +`success`イベントは`IDBRequest`が成功すると着火します。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
    BubblesNo
    CancelableNo
    Interface{{domxref("Event")}}
    Event handler propertyonsuccess
    BubblesNo
    CancelableNo
    Interface{{domxref("Event")}}
    Event handler property + onsuccess +
    -

    例

    +## 例 -

    この例では、データベースをオープンします。そのsuccessイベントをaddEventListener()でリスンします。

    +この例では、データベースをオープンします。その`success`イベントを`addEventListener()`でリスンします。 -
    // データベースをオープンする
+```js
+// データベースをオープンする
 const openRequest = window.indexedDB.open('toDoList', 4);
 
-openRequest.onupgradeneeded = (event) => {
+openRequest.onupgradeneeded = (event) => {
   const db = event.target.result;
 
-  db.onerror = () => {
+  db.onerror = () => {
     console.log('Error creating database');
   };
 
@@ -53,21 +58,21 @@ openRequest.onupgradeneeded = (event) => {
   objectStore.createIndex('year', 'year', { unique: false });
 };
 
-openRequest.addEventListener('success', (event) => {
+openRequest.addEventListener('success', (event) => {
   console.log('Database opened successfully!');
 });
+```
 
-
    +下記は同じことを`onsuccess`イベントハンドラープロパティを使用した例です。 -

    下記は同じことをonsuccessイベントハンドラープロパティを使用した例です。

    - -
    // データベースをオープンする
+```js
+// データベースをオープンする
 const openRequest = window.indexedDB.open('toDoList', 4);
 
-openRequest.onupgradeneeded = (event) => {
+openRequest.onupgradeneeded = (event) => {
   const db = event.target.result;
 
-  db.onerror = () => {
+  db.onerror = () => {
     console.log('Error creating database');
   };
 
@@ -82,20 +87,16 @@ openRequest.onupgradeneeded = (event) => {
   objectStore.createIndex('year', 'year', { unique: false });
 };
 
-openRequest.onsuccess = (event) => {
+openRequest.onsuccess = (event) => {
   console.log('Database opened successfully!');
 };
-
    - -

    ブラウザの対応

    - +``` +## ブラウザの対応 -

    {{Compat("api.IDBRequest.success_event")}}

    +{{Compat("api.IDBRequest.success_event")}} -

    関連情報

    +## 関連情報 - +- [Using IndexedDB](/ja/docs/IndexedDB/Using_IndexedDB) +- [`onsuccess`](/ja/docs/Web/API/IDBRequest/onsuccess) event handler property diff --git a/files/ja/web/api/inputevent/index.md b/files/ja/web/api/inputevent/index.md index 2fe97d14a7491c..a119af64a2c24d 100644 --- a/files/ja/web/api/inputevent/index.md +++ b/files/ja/web/api/inputevent/index.md @@ -7,58 +7,39 @@ tags: - Interface translation_of: Web/API/InputEvent --- -

    {{APIRef("DOM Events")}}

    +{{APIRef("DOM Events")}} -

    InputEvent インターフェイスは、編集可能なコンテンツが変更されたことを通知するイベントを表します。

    +**`InputEvent`** インターフェイスは、編集可能なコンテンツが変更されたことを通知するイベントを表します。 -

    コンストラクタ

    +## コンストラクタ -
    -
    {{domxref("InputEvent.InputEvent", "InputEvent()")}}
    -
    InputEvent オブジェクトを作成します。
    -
    +- {{domxref("InputEvent.InputEvent", "InputEvent()")}} + - : `InputEvent` オブジェクトを作成します。 -

    プロパティ

    +## プロパティ -

    このインターフェイスは、親インターフェイスである {{domxref("UIEvent")}}、{{domxref("Event")}} のプロパティを継承します。

    +_このインターフェイスは、親インターフェイスである {{domxref("UIEvent")}}、{{domxref("Event")}} のプロパティを継承します。_ -
    -
    {{domxref("InputEvent.data")}} {{readOnlyInline}}
    -
    挿入された文字を {{domxref("DOMString")}} で返します。変更により挿入されたテキストがない (例えば文字を削除する) 場合は、空文字列になるでしょう。
    -
    {{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
    -
    イベントが {{event("compositionstart")}} の後かつ {{event("compositionend")}} の前に発生したかを示す {{jsxref("Boolean")}} 値を返します。
    -
    +- {{domxref("InputEvent.data")}} {{readOnlyInline}} + - : 挿入された文字を {{domxref("DOMString")}} で返します。変更により挿入されたテキストがない (例えば文字を削除する) 場合は、空文字列になるでしょう。 +- {{domxref("InputEvent.isComposing")}}{{readOnlyInline}} + - : イベントが {{event("compositionstart")}} の後かつ {{event("compositionend")}} の前に発生したかを示す {{jsxref("Boolean")}} 値を返します。 -

    メソッド

    +## メソッド -

    このインターフェイスではメソッドが定義されていませんが、親インターフェイスである {{domxref("UIEvent")}}、{{domxref("Event")}} のメソッドを継承します。

    +_このインターフェイスではメソッドが定義されていませんが、親インターフェイスである {{domxref("UIEvent")}}、{{domxref("Event")}} のメソッドを継承します。_ -

    仕様

    +## 仕様 - - - - - - - - - - - - - - - -
    仕様書策定状況コメント
    {{SpecName('DOM3 Events','#interface-InputEvent','InputEvent')}}{{Spec2('DOM3 Events')}}最初期の定義
    +| 仕様書 | 策定状況 | コメント | +| ------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('DOM3 Events','#interface-InputEvent','InputEvent')}} | {{Spec2('DOM3 Events')}} | 最初期の定義 | -

    ブラウザ実装状況

    +## ブラウザ実装状況 -

    {{Compat("api.InputEvent")}}

    +{{Compat("api.InputEvent")}} -

    関連情報

    +## 関連情報 - +- {{event("beforeinput")}} +- {{event("input")}} diff --git a/files/ja/web/api/inputevent/inputtype/index.md b/files/ja/web/api/inputevent/inputtype/index.md index a505261a3f180a..8ecb62dbe3a892 100644 --- a/files/ja/web/api/inputevent/inputtype/index.md +++ b/files/ja/web/api/inputevent/inputtype/index.md @@ -14,76 +14,66 @@ tags: - プロパティ translation_of: Web/API/InputEvent/inputType --- -
    {{APIRef("DOM Events")}}
    +{{APIRef("DOM Events")}} -

    inputType は {{domxref("InputEvent")}} インターフェイスの読取専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。

    +**`inputType`** は {{domxref("InputEvent")}} インターフェイスの読取専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。 -

    構文

    +## 構文 -
    var aString = inputEvent.inputType;
    +``` +var aString = inputEvent.inputType; +``` -

    値

    +### 値 -

    入力された入力種別を含む {{domxref("DOMString")}}。 insertText, deleteContentBackward, insertFromPaste, formatBold など、多くの値が考えられます。利用可能な入力種別の完全なリストは、Input Events Level 1 仕様の Attributes の章を参照してください。

    +入力された入力種別を含む {{domxref("DOMString")}}。 `insertText`, `deleteContentBackward`, `insertFromPaste`, `formatBold` など、多くの値が考えられます。利用可能な入力種別の完全なリストは、[Input Events Level 1 仕様の Attributes の章](https://rawgit.com/w3c/input-events/v1/index.html#interface-InputEvent-Attributes)を参照してください。 -

    例

    +## 例 -

    この例は編集可能な {{htmlElement("div")}} の入力イベント の inputType をログ出力します。

    +この例は編集可能な {{htmlElement("div")}} の[入力イベント](/ja/docs/Web/API/HTMLElement/input_event) の `inputType` をログ出力します。 -

    HTML

    +### HTML -
    <p id="log">Input type: </p>
-<div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;">
-  <p>Some sample text. Try inserting line breaks, or deleting text in different ways, or pasting different content in.</p>
-  <hr>
-  <ul>
-    <li>A sample</li>
-    <li>bulleted</li>
-    <li>list.</li>
-  </ul>
-  <p>Another paragraph.</p>
-</div>
    +```html +

    Input type:

    +
    +

    Some sample text. Try inserting line breaks, or deleting text in different ways, or pasting different content in.

    +
    + +

    Another paragraph.

    +
    +``` -

    JavaScript

    +### JavaScript -
    const log = document.getElementById('log');
+```js
+const log = document.getElementById('log');
 const editable = document.querySelector('div[contenteditable]');
 editable.addEventListener('input', logInputType);
 
 function logInputType(event) {
   log.textContent = `Input type: ${event.inputType}`;
 }
-
    +``` -

    結果

    +### 結果 -

    Try editing the text inside the <div> and see what happens.

    +Try editing the text inside the `
    ` and see what happens. -

    {{EmbedLiveSample("Examples", '100%', 500)}}

    +{{EmbedLiveSample("Examples", '100%', 500)}} -
    -

    注: もっと詳細な例として Masayuki Nakano's InputEvent test suite も参照してください。

    -
    +> **Note:** **注**: もっと詳細な例として [Masayuki Nakano's InputEvent test suite](https://d-toybox.com/studio/lib/input_event_viewer.html) も参照してください。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------- | ---------------------------- | ---- | +| {{SpecName('UI Events','#dom-inputevent-inputtype','inputType')}} | {{Spec2('UI Events')}} | | + +## ブラウザーの互換性 -

    仕様書

    - - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('UI Events','#dom-inputevent-inputtype','inputType')}}{{Spec2('UI Events')}}
    - -

    ブラウザーの互換性

    - -

    {{Compat("api.InputEvent.inputType")}}

    +{{Compat("api.InputEvent.inputType")}} diff --git a/files/ja/web/api/media_capture_and_streams_api/constraints/index.md b/files/ja/web/api/media_capture_and_streams_api/constraints/index.md index ea825348864385..a6d20897b548b0 100644 --- a/files/ja/web/api/media_capture_and_streams_api/constraints/index.md +++ b/files/ja/web/api/media_capture_and_streams_api/constraints/index.md @@ -17,64 +17,67 @@ tags: translation_of: Web/API/Media_Streams_API/Constraints original_slug: Web/API/Media_Streams_API/Constraints --- -
    {{DefaultAPISidebar("Media Capture and Streams")}}
    +{{DefaultAPISidebar("Media Capture and Streams")}} -

    歴史的に、Web API と密接に連携するウェブ用のスクリプトを作成することには、よく知られた課題がありました。 多くの場合、コードは、API が存在するかどうか、存在する場合は、それを実行している{{Glossary("user agent","ユーザーエージェント")}}の制限を知る必要があります。 これを理解するのは難しい場合が多く、通常、実行している{{Glossary("user agent","ユーザーエージェント")}}（またはブラウザー）とそのバージョンの組み合わせを調べ、特定のオブジェクトが存在するかどうかを確認したり、さまざまなものが機能するかどうかを確認したり、どのエラーが発生したかを判断したりする必要がありました。 その結果、非常に脆弱なコードが大量に発生するか、このような問題を解決するライブラリに依存したり、{{Glossary("polyfill", "ポリフィル")}}を実装して実装の穴にパッチを当てたりしました。

    +歴史的に、Web API と密接に連携するウェブ用のスクリプトを作成することには、よく知られた課題がありました。 多くの場合、コードは、API が存在するかどうか、存在する場合は、それを実行している{{Glossary("user agent","ユーザーエージェント")}}の制限を知る必要があります。 これを理解するのは難しい場合が多く、通常、実行している{{Glossary("user agent","ユーザーエージェント")}}（またはブラウザー）とそのバージョンの組み合わせを調べ、特定のオブジェクトが存在するかどうかを確認したり、さまざまなものが機能するかどうかを確認したり、どのエラーが発生したかを判断したりする必要がありました。 その結果、非常に脆弱なコードが大量に発生するか、このような問題を解決するライブラリに依存したり、{{Glossary("polyfill", "ポリフィル")}}を実装して実装の穴にパッチを当てたりしました。 -

    制約（constraints）と能力（capabilities）の双子の概念により、ブラウザーとウェブサイトまたはアプリは、ブラウザーの実装がサポートする制約可能なプロパティ（constrainable properties）と、それぞれに対してサポートする値に関する情報を交換できます。 この記事では、能力と制約およびメディアの設定について説明し、制約エクササイザー（Constraint Exerciser）と呼ばれる例を含みます。 制約エクササイザーを使用すると、コンピューターの A/V 入力デバイス（ウェブカメラやマイクなど）からの音声トラックと動画トラックに適用されるさまざまな制約セットの結果を試すことができます。

    +**制約**（constraints）と**能力**（capabilities）の双子の概念により、ブラウザーとウェブサイトまたはアプリは、ブラウザーの実装がサポートする**制約可能なプロパティ**（constrainable properties）と、それぞれに対してサポートする値に関する情報を交換できます。 この記事では、能力と制約およびメディアの設定について説明し、[制約エクササイザー](#example_constraint_exerciser)（Constraint Exerciser）と呼ばれる例を含みます。 制約エクササイザーを使用すると、コンピューターの A/V 入力デバイス（ウェブカメラやマイクなど）からの音声トラックと動画トラックに適用されるさまざまな制約セットの結果を試すことができます。 -

    概要

    +## 概要 -

    プロセスは次のように動作します（例として {{domxref("MediaStreamTrack")}} を使用）。

    +プロセスは次のように動作します（例として {{domxref("MediaStreamTrack")}} を使用）。 -
      -
    1. 必要に応じて、{{domxref("MediaDevices.getSupportedConstraints()")}} を呼び出して、サポートしている制約（supported constraints）のリストを取得します。 これにより、ブラウザーが知っている制約可能なプロパティがわかります。 これは必ずしも必要なわけではありません。 知らないものは指定すると単に無視されるためです。 ただし、それなしでは手に入らないものがある場合は、リストに載っていることを確認することから始めることができます。
      2. -
    2. 使用したいプロパティをサポートしているかどうかをスクリプトが認識すると、トラックの getCapabilities() メソッドによって返されたオブジェクトを調べることにより、API とその実装の能力を確認できます。 このオブジェクトは、サポートしている各制約と、サポートしている値または値の範囲をリストします。
      3. -
    3. 最後に、トラックの applyConstraints() メソッドを呼び出して、好みの制約可能なプロパティに使用する値または値の範囲を指定することにより、必要に応じて API を構成します。
      4. -
    4. トラックの getConstraints() メソッドは、applyConstraints() の最新の呼び出しに渡された制約セットを返します。 これは、要求された値を調整する必要があるプロパティと、プラットフォームのデフォルト値が表されていないため、トラックの実際の現在の状態を表していない場合があります。 トラックの現在の構成を完全に表現するには、getSettings() を使用します。
      5. -
    +1. 必要に応じて、{{domxref("MediaDevices.getSupportedConstraints()")}} を呼び出して、**サポートしている制約**（supported constraints）のリストを取得します。 これにより、ブラウザーが知っている制約可能なプロパティがわかります。 これは必ずしも必要なわけではありません。 知らないものは指定すると単に無視されるためです。 ただし、それなしでは手に入らないものがある場合は、リストに載っていることを確認することから始めることができます。 +2. 使用したいプロパティをサポートしているかどうかをスクリプトが認識すると、トラックの `getCapabilities()` メソッドによって返されたオブジェクトを調べることにより、API とその実装の**能力**を確認できます。 このオブジェクトは、サポートしている各制約と、サポートしている値または値の範囲をリストします。 +3. 最後に、トラックの `applyConstraints()` メソッドを呼び出して、好みの制約可能なプロパティに使用する値または値の範囲を指定することにより、必要に応じて API を構成します。 +4. トラックの `getConstraints()` メソッドは、`applyConstraints()` の最新の呼び出しに渡された制約セットを返します。 これは、要求された値を調整する必要があるプロパティと、プラットフォームのデフォルト値が表されていないため、トラックの実際の現在の状態を表していない場合があります。 トラックの現在の構成を完全に表現するには、`getSettings()` を使用します。 -

    Media Stream API では、{{domxref("MediaStream")}} と {{domxref("MediaStreamTrack")}} の両方に制約可能なプロパティがあります。

    +Media Stream API では、{{domxref("MediaStream")}} と {{domxref("MediaStreamTrack")}} の両方に制約可能なプロパティがあります。 -

    制約をサポートしているかどうかの判断

    +## 制約をサポートしているかどうかの判断 -

    特定の制約をユーザーエージェントがサポートしているかどうかを知る必要がある場合は、次のように {{domxref("MediaDevices.getSupportedConstraints", "navigator.mediaDevices.getSupportedConstraints()")}} を呼び出して、ブラウザーが知っている制約可能なプロパティのリストを取得します。

    +特定の制約をユーザーエージェントがサポートしているかどうかを知る必要がある場合は、次のように {{domxref("MediaDevices.getSupportedConstraints", "navigator.mediaDevices.getSupportedConstraints()")}} を呼び出して、ブラウザーが知っている制約可能なプロパティのリストを取得します。 -
    let supported = navigator.mediaDevices.getSupportedConstraints();
+```js
+let supported = navigator.mediaDevices.getSupportedConstraints();
 
-document.getElementById("frameRateSlider").disabled = !supported["frameRate"];
    +document.getElementById("frameRateSlider").disabled = !supported["frameRate"]; +``` -

    この例では、サポートしている制約を取得し、frameRate 制約をサポートしていない場合、ユーザーがフレームレートを構成できるコントロールを無効にします。

    +この例では、サポートしている制約を取得し、`frameRate` 制約をサポートしていない場合、ユーザーがフレームレートを構成できるコントロールを無効にします。 -

    制約の定義方法

    +## 制約の定義方法 -

    単一の制約は、目的の値または値の範囲が指定されている制約可能なプロパティと名前が一致するオブジェクトです。 このオブジェクトには、0 個以上の個別の制約と、advanced というオプションのサブオブジェクトが含まれます。 このサブオブジェクトには、ユーザーエージェントが可能な限り満たす必要がある 0 個以上の制約の別のセットが含まれます。 ユーザーエージェントは、制約セットで指定された順序で制約を満たすことを試みます。

    +単一の制約は、目的の値または値の範囲が指定されている制約可能なプロパティと名前が一致するオブジェクトです。 このオブジェクトには、0 個以上の個別の制約と、`advanced` というオプションのサブオブジェクトが含まれます。 このサブオブジェクトには、ユーザーエージェントが可能な限り満たす必要がある 0 個以上の制約の別のセットが含まれます。 ユーザーエージェントは、制約セットで指定された順序で制約を満たすことを試みます。 -

    理解すべき最も重要なことは、ほとんどの制約は必要条件ではないということです。 それよりむしろ、それらは要求です。 例外があり、すぐにそれらに到達します。

    +理解すべき最も重要なことは、ほとんどの制約は必要条件ではないということです。 それよりむしろ、それらは要求です。 例外があり、すぐにそれらに到達します。 -

    設定に特定の値を要求

    +### 設定に特定の値を要求 -

    最も簡単には、各制約は、設定に必要な値を示す特定の値である場合があります。 例えば、次のようにです。

    +最も簡単には、各制約は、設定に必要な値を示す特定の値である場合があります。 例えば、次のようにです。 -
    let constraints = {
+```js
+let constraints = {
   width: 1920,
   height: 1080,
   aspectRatio: 1.777777778
 };
 
-myTrack.applyConstraints(constraints);
    +myTrack.applyConstraints(constraints); +``` -

    この場合、制約は、ほぼすべてのプロパティで任意の値が適切であることを示しますが、標準の 16：9 アスペクト比で標準の高解像度（HD）動画サイズが望ましいことを示します。 結果のトラックがこれらのいずれかに一致するという保証はありませんが、ユーザーエージェントは可能な限り一致するように最善を尽くす必要があります。

    +この場合、制約は、ほぼすべてのプロパティで任意の値が適切であることを示しますが、標準の 16：9 アスペクト比で標準の高解像度（HD）動画サイズが望ましいことを示します。 結果のトラックがこれらのいずれかに一致するという保証はありませんが、ユーザーエージェントは可能な限り一致するように最善を尽くす必要があります。 -

    プロパティの優先順位付けは簡単です。 2つのプロパティの要求値が相互に排他的である場合、制約セットの最初にリストされている値を使用します。 例として、上記のコードを実行しているブラウザーは 1920x1080 のトラックを提供できないが、1920x900 を提供できる場合、それを提供します。

    +プロパティの優先順位付けは簡単です。 2 つのプロパティの要求値が相互に排他的である場合、制約セットの最初にリストされている値を使用します。 例として、上記のコードを実行しているブラウザーは 1920x1080 のトラックを提供できないが、1920x900 を提供できる場合、それを提供します。 -

    単一の値を指定するこれらのような単純な制約は、常に必須でないものとして扱われます。 ユーザーエージェントは、あなたが要求したものを提供しようとしますが、あなたが得るものが一致することを保証しません。 しかしながら、{{domxref("MediaStreamTrack.applyConstraints()")}} を呼び出すときにプロパティに単純な値を使用すると、これらの値は必要条件ではなく要求と見なされるため、要求は常に成功します。

    +単一の値を指定するこれらのような単純な制約は、常に必須でないものとして扱われます。 ユーザーエージェントは、あなたが要求したものを提供しようとしますが、あなたが得るものが一致することを保証しません。 しかしながら、{{domxref("MediaStreamTrack.applyConstraints()")}} を呼び出すときにプロパティに単純な値を使用すると、これらの値は必要条件ではなく要求と見なされるため、要求は常に成功します。 -

    値の範囲の指定

    +### 値の範囲の指定 -

    場合によっては、範囲内の任意の値がプロパティの値として受け入れられることがあります。 範囲は、最小値（min）と最大値（max）のいずれかまたは両方を指定でき、必要に応じて範囲内で理想的な値（ideal）を最終結果として指定できます。 理想的な値を指定すると、ブラウザーは、指定された他の制約に応じて、その値にできるだけ一致するように近づけようとします。

    +場合によっては、範囲内の任意の値がプロパティの値として受け入れられることがあります。 範囲は、最小値（`min`）と最大値（`max`）のいずれかまたは両方を指定でき、必要に応じて範囲内で理想的な値（`ideal`）を最終結果として指定できます。 理想的な値を指定すると、ブラウザーは、指定された他の制約に応じて、その値にできるだけ一致するように近づけようとします。 -
    let supports = navigator.mediaDevices.getSupportedConstraints();
+```js
+let supports = navigator.mediaDevices.getSupportedConstraints();
 
 if (!supports["width"] || !supports["height"] || !supports["frameRate"] || !supports["facingMode"]) {
   // 必要なプロパティが不足しているため、そのエラーを処理します。
@@ -87,37 +90,34 @@ if (!supports["width"] || !supports["height"] || !supports["frameRate"] || !supp
     facingMode: { exact: "user" }
   };
 
-  myTrack.applyConstraints(constraints).then(function() => {
+  myTrack.applyConstraints(constraints).then(function() => {
     /* 制約が正常に適用されたら何かをする */
   }).catch(function(reason) {
     /* 制約を適用できませんでした。 reason が理由 */
   });
 }
-
    +``` -

    ここでは、一致を見つける必要のある制約可能なプロパティ（width、height、frameRate、facingMode）がサポートされていることを確認した後、幅は 640 以上 1920 以下（できれば 1920）、高さは 400 以上（理想的には 1080）、アスペクト比は 16：9（1.777777778）、フレームレートは 30 フレーム/秒以下を要求する制約を設定します。 さらに、唯一の許容可能な入力デバイスは、ユーザーに面したカメラ（自撮りカメラ）です。 width、height、frameRate、または facingMode の制約が満たされない場合、applyConstraints() によって返された promise は拒否されます。

    +ここでは、一致を見つける必要のある制約可能なプロパティ（`width`、`height`、`frameRate`、`facingMode`）がサポートされていることを確認した後、幅は 640 以上 1920 以下（できれば 1920）、高さは 400 以上（理想的には 1080）、アスペクト比は 16：9（1.777777778）、フレームレートは 30 フレーム/秒以下を要求する制約を設定します。 さらに、唯一の許容可能な入力デバイスは、ユーザーに面したカメラ（自撮りカメラ）です。 `width`、`height`、`frameRate`、または `facingMode` の制約が満たされない場合、`applyConstraints()` によって返された promise は拒否されます。 -
    -

    max、min、exact のいずれかまたはすべてを使用して指定された制約は、常に必須として扱われます。 applyConstraints() を呼び出して、使用する制約を1つ以上を満たすことができない場合、promise は拒否されます。

    -
    +> **Note:** `max`、`min`、`exact` のいずれかまたはすべてを使用して指定された制約は、常に必須として扱われます。 `applyConstraints()` を呼び出して、使用する制約を 1 つ以上を満たすことができない場合、promise は拒否されます。 -

    高度な制約

    +### 高度な制約 -

    advanced プロパティを制約セットに追加すると、いわゆる高度な制約が作成されます。 このプロパティの値は、オプションと見なされる追加の制約セットの配列です。 この機能のユースケースはほとんどなく、仕様から取り除くことに関心があるため、ここでは説明しません。 詳細については、Media Capture and Streams 仕様のセクション 11、過去の例 2 を参照してください。

    +`advanced` プロパティを制約セットに追加すると、いわゆる高度な制約が作成されます。 このプロパティの値は、オプションと見なされる追加の制約セットの配列です。 この機能のユースケースはほとんどなく、仕様から取り除くことに関心があるため、ここでは説明しません。 詳細については、[Media Capture and Streams 仕様のセクション 11、過去の例 2](https://www.w3.org/TR/mediacapture-streams/#idl-def-Constraints) を参照してください。 -

    能力の確認

    +## 能力の確認 -

    {{domxref("MediaStreamTrack.getCapabilities()")}} を呼び出して、サポートしているすべての能力と、そのそれぞれが現在のプラットフォームとユーザーエージェントで受け入れられる値または値の範囲のリストを取得できます。 この関数は、ブラウザーがサポートしている各制約可能なプロパティと、それらのプロパティのそれぞれがサポートしている値または値の範囲をリストする {{domxref("MediaTrackCapabilities")}} オブジェクトを返します。

    +{{domxref("MediaStreamTrack.getCapabilities()")}} を呼び出して、サポートしているすべての能力と、そのそれぞれが現在のプラットフォームとユーザーエージェントで受け入れられる値または値の範囲のリストを取得できます。 この関数は、ブラウザーがサポートしている各制約可能なプロパティと、それらのプロパティのそれぞれがサポートしている値または値の範囲をリストする {{domxref("MediaTrackCapabilities")}} オブジェクトを返します。 -
    -

    注: getCapabilities() は、まだすべての主要なブラウザーで実装されていません。 とりあえず、あなたは必要なものを手に入れようとする必要があり、もしそれができなければ、その時点で何をすべきかを決定します。 例えば、{{bug(1179084)}} を参照してください。

    -
    +> **Note:** **注**: `getCapabilities()` は、まだすべての主要なブラウザーで実装されていません。 とりあえず、あなたは必要なものを手に入れようとする必要があり、もしそれができなければ、その時点で何をすべきかを決定します。 例えば、{{bug(1179084)}} を参照してください。 -

    制約の適用

    +## 制約の適用 -

    制約を使用する最初の最も一般的な方法は、次のように {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を呼び出すときに制約を指定することです。

    +制約を使用する最初の最も一般的な方法は、次のように {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} を呼び出すときに制約を指定することです。 -
    navigator.mediaDevices.getUserMedia({
+```js
+navigator.mediaDevices.getUserMedia({
   video: {
     width: { min: 640, ideal: 1920 },
     height: { min: 400, ideal: 1080 },
@@ -127,106 +127,111 @@ if (!supports["width"] || !supports["height"] || !supports["frameRate"] || !supp
     sampleSize: 16,
     channelCount: 2
   }
-}).then(stream => {
+}).then(stream => {
   videoElement.srcObject = stream;
 }).catch(handleError);
-
    +``` -

    この例では、getUserMedia() の時点で制約が適用され、動画のためのフォールバックを備えた理想的なオプションのセットが要求されます。

    +この例では、`getUserMedia()` の時点で制約が適用され、動画のためのフォールバックを備えた理想的なオプションのセットが要求されます。 -
    -

    1つ以上のメディア入力デバイス ID を指定して、入力ソースが許可される制限を設定できます。 利用可能なデバイスのリストを収集するには、{{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} を呼び出してから、目的の条件を満たす各デバイスに対して、その deviceId を MediaConstraints オブジェクトに追加して、最終的に getUserMedia() に渡します。

    -
    +> **Note:** 1 つ以上のメディア入力デバイス ID を指定して、入力ソースが許可される制限を設定できます。 利用可能なデバイスのリストを収集するには、{{domxref("MediaDevices.enumerateDevices", "navigator.mediaDevices.enumerateDevices()")}} を呼び出してから、目的の条件を満たす各デバイスに対して、その `deviceId` を `MediaConstraints` オブジェクトに追加して、最終的に `getUserMedia()` に渡します。 -

    次のようにトラックの {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} メソッドを呼び出し、トラックに適用する制約を表すオブジェクトを渡すことで、既存の {{domxref("MediaStreamTrack")}} の制約を臨機応変に変更することもできます。

    +次のようにトラックの {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} メソッドを呼び出し、トラックに適用する制約を表すオブジェクトを渡すことで、既存の {{domxref("MediaStreamTrack")}} の制約を臨機応変に変更することもできます。 -
    videoTrack.applyConstraints({
+```js
+videoTrack.applyConstraints({
   width: 1920,
   height: 1080
 });
-
    +``` -

    このスニペットでは、videoTrack が参照する動画トラックが更新され、その解像度が可能な限り 1920x1080 ピクセル（1080p 高解像度）に一致するようになります。

    +このスニペットでは、`videoTrack` が参照する動画トラックが更新され、その解像度が可能な限り 1920x1080 ピクセル（1080p 高解像度）に一致するようになります。 -

    現在の制約と設定の取得

    +## 現在の制約と設定の取得 -

    制約と設定（settings）の違いを覚えておくことは重要です。 制約は、（{{domxref("MediaTrackConstraints")}} のドキュメントで説明されているように）さまざまな制約可能なプロパティに必要な値、希望する値、および受け入れる値を指定する方法です。 一方、設定は現在の各制約可能なプロパティの実際の値です。

    +**制約**と**設定**（settings）の違いを覚えておくことは重要です。 制約は、（{{domxref("MediaTrackConstraints")}} のドキュメントで説明されているように）さまざまな制約可能なプロパティに必要な値、希望する値、および受け入れる値を指定する方法です。 一方、設定は現在の各制約可能なプロパティの実際の値です。 -

    実施されている制約の取得

    +### 実施されている制約の取得 -

    現在メディアに適用されている制約セットを取得する必要がある場合は、次の例に示すように、{{domxref("MediaStreamTrack.getConstraints()")}} を呼び出すことでその情報を取得できます。

    +現在メディアに適用されている制約セットを取得する必要がある場合は、次の例に示すように、{{domxref("MediaStreamTrack.getConstraints()")}} を呼び出すことでその情報を取得できます。 -
    function switchCameras(track, camera) {
+```js
+function switchCameras(track, camera) {
   let constraints = track.getConstraints();
   constraints.facingMode = camera;
   track.applyConstraints(constraints);
-}
    +} +``` -

    この関数は、{{domxref("MediaStreamTrack")}} と使用するカメラに面するモードを示す文字列を受け入れ、現在の制約を取得し、{{domxref("MediaTrackConstraints.facingMode")}} の値を指定された値に設定し、更新された制約セットを適用します。

    +この関数は、{{domxref("MediaStreamTrack")}} と使用するカメラに面するモードを示す文字列を受け入れ、現在の制約を取得し、{{domxref("MediaTrackConstraints.facingMode")}} の値を指定された値に設定し、更新された制約セットを適用します。 -

    トラックの現在の設定の取得

    +### トラックの現在の設定の取得 -

    厳密な制約（exact）のみを使用しない限り（これは非常に制限的ですので、それの意味することを確認してください！）、制約が適用された後に実際に何が得られるかを保証するものではありません。 結果のメディアに実際に存在する制約可能なプロパティの値は、設定と呼ばれます。 メディアの実際の形式やその他のプロパティを知る必要がある場合は、{{domxref("MediaStreamTrack.getSettings()")}} を呼び出してこれらの設定を取得できます。 これは、ディクショナリ {{domxref("MediaTrackSettings")}} に基づくオブジェクトを返します。 例えば次のようにです。

    +厳密な制約（`exact`）のみを使用しない限り（これは非常に制限的ですので、それの意味することを確認してください！）、制約が適用された後に実際に何が得られるかを保証するものではありません。 結果のメディアに実際に存在する制約可能なプロパティの値は、設定と呼ばれます。 メディアの実際の形式やその他のプロパティを知る必要がある場合は、{{domxref("MediaStreamTrack.getSettings()")}} を呼び出してこれらの設定を取得できます。 これは、ディクショナリ {{domxref("MediaTrackSettings")}} に基づくオブジェクトを返します。 例えば次のようにです。 -
    function whichCamera(track) {
+```js
+function whichCamera(track) {
   return track.getSettings().facingMode;
-}
    +} +``` -

    この関数は、getSettings() を使用して、トラックの制約可能なプロパティの現在使用中の値を取得し、{{domxref("MediaTrackSettings.facingMode", "facingMode")}} の値を返します。

    +この関数は、`getSettings()` を使用して、トラックの制約可能なプロパティの現在使用中の値を取得し、{{domxref("MediaTrackSettings.facingMode", "facingMode")}} の値を返します。 -

    例: 制約エクササイザー

    +## 例: 制約エクササイザー -

    この例では、音声トラックと動画トラックの制約セットを記述するソースコードを編集して、メディアの制約を試すことができるエクササイザーを作成します。 その後、これらの変更を適用して、ストリームの外観や、新しい制約を適用した後の実際のメディア設定の両方を含む結果を確認できます。

    +この例では、音声トラックと動画トラックの制約セットを記述するソースコードを編集して、メディアの制約を試すことができるエクササイザーを作成します。 その後、これらの変更を適用して、ストリームの外観や、新しい制約を適用した後の実際のメディア設定の両方を含む結果を確認できます。 -

    この例の HTML と CSS は非常に単純であり、ここには示されていません。 {{LiveSampleLink("Example_Constraint_exerciser", "ここをクリックする")}}と、完全な例を見ることができます。

    +この例の HTML と CSS は非常に単純であり、ここには示されていません。 {{LiveSampleLink("Example_Constraint_exerciser", "ここをクリックする")}}と、完全な例を見ることができます。 - +Now let's take a look at the JavaScript code that makes everything work. -

    デフォルトと変数

    +#### デフォルトと変数 -

    最初に、文字列としてデフォルトの制約セットがあります。 これらの文字列は編集可能な {{HTMLElement("textarea")}} に表示されますが、これはストリームの初期構成です。

    +最初に、文字列としてデフォルトの制約セットがあります。 これらの文字列は編集可能な {{HTMLElement("textarea")}} に表示されますが、これはストリームの初期構成です。 -
    let videoDefaultConstraintString = '{\n  "width": 320,\n  "height": 240,\n  "frameRate": 30\n}';
+```js
+let videoDefaultConstraintString = '{\n  "width": 320,\n  "height": 240,\n  "frameRate": 30\n}';
 let audioDefaultConstraintString = '{\n  "sampleSize": 16,\n  "channelCount": 2,\n  "echoCancellation": false\n}';
-
    +``` -

    これらのデフォルトは、かなり一般的なカメラ構成を要求しますが、特に重要なプロパティであることを主張しません。 ブラウザーは、これらの設定に一致するように最善を尽くす必要がありますが、近い一致と見なされるものなら何でもそれで解決します。

    +これらのデフォルトは、かなり一般的なカメラ構成を要求しますが、特に重要なプロパティであることを主張しません。 ブラウザーは、これらの設定に一致するように最善を尽くす必要がありますが、近い一致と見なされるものなら何でもそれで解決します。 -

    次に、動画トラックおよび音声トラックの {{domxref("MediaTrackConstraints")}} オブジェクトを保持する変数と、動画トラックおよび音声トラック自体への参照を保持する変数を null に初期化します。

    +次に、動画トラックおよび音声トラックの {{domxref("MediaTrackConstraints")}} オブジェクトを保持する変数と、動画トラックおよび音声トラック自体への参照を保持する変数を `null` に初期化します。 -
    let videoConstraints = null;
+```js
+let videoConstraints = null;
 let audioConstraints = null;
 
 let audioTrack = null;
 let videoTrack = null;
-
    +``` -

    そして、アクセスする必要のあるすべての要素への参照を取得します。

    +そして、アクセスする必要のあるすべての要素への参照を取得します。 -
    let videoElement = document.getElementById("video");
+```js
+let videoElement = document.getElementById("video");
 let logElement = document.getElementById("log");
 let supportedConstraintList = document.getElementById("supportedConstraints");
 let videoConstraintEditor = document.getElementById("videoConstraintEditor");
 let audioConstraintEditor = document.getElementById("audioConstraintEditor");
 let videoSettingsText = document.getElementById("videoSettingsText");
 let audioSettingsText = document.getElementById("audioSettingsText");
-
    - -

    これらの要素は次のとおりです。

    - -
    -
    videoElement
    -
    ストリームを表示する {{HTMLElement("video")}} 要素。
    -
    logElement
    -
    エラーメッセージやその他のログの種類の出力が書き込まれる {{HTMLElement("div")}}。
    -
    supportedConstraintList
    -
    ユーザーのブラウザーがサポートしている各制約可能なプロパティの名前をプログラムで追加する {{HTMLElement("ul")}}（順序なしリスト）。
    -
    videoConstraintEditor
    -
    ユーザーが動画トラックの制約セットのコードを編集できるようにする {{HTMLElement("textarea")}} 要素。
    -
    audioConstraintEditor
    -
    ユーザーが音声トラックの制約セットのコードを編集できるようにする {{HTMLElement("textarea")}} 要素。
    -
    videoSettingsText
    -
    動画トラックの制約可能なプロパティの現在の設定を表示する {{HTMLElement("textarea")}}（常に disabled）。
    -
    audioSettingsText
    -
    音声トラックの制約可能なプロパティの現在の設定を表示する {{HTMLElement("textarea")}}（常に disabled）。
    -
    - -

    最後に、2つの制約セットエディター要素の現在の内容をデフォルトに設定します。

    - -
    videoConstraintEditor.value = videoDefaultConstraintString;
-audioConstraintEditor.value = audioDefaultConstraintString;
    - -

    設定の表示の更新

    - -

    各制約セットエディターの右側には、トラックの構成可能なプロパティの現在の構成を表示するために使用する2番目のテキストボックスがあります。 この表示を関数 getCurrentSettings() で更新します。 この関数は、音声トラックと動画トラックの現在の設定を取得し、{{htmlattrxref("value", "textarea")}} を設定することで対応するコードをトラックの設定表示ボックスに挿入します。

    - -
    function getCurrentSettings() {
+```
+
+これらの要素は次のとおりです。
+
+- `videoElement`
+  - : ストリームを表示する {{HTMLElement("video")}} 要素。
+- `logElement`
+  - : エラーメッセージやその他のログの種類の出力が書き込まれる {{HTMLElement("div")}}。
+- `supportedConstraintList`
+  - : ユーザーのブラウザーがサポートしている各制約可能なプロパティの名前をプログラムで追加する {{HTMLElement("ul")}}（順序なしリスト）。
+- `videoConstraintEditor`
+  - : ユーザーが動画トラックの制約セットのコードを編集できるようにする {{HTMLElement("textarea")}} 要素。
+- `audioConstraintEditor`
+  - : ユーザーが音声トラックの制約セットのコードを編集できるようにする {{HTMLElement("textarea")}} 要素。
+- `videoSettingsText`
+  - : 動画トラックの制約可能なプロパティの現在の設定を表示する {{HTMLElement("textarea")}}（常に `disabled`）。
+- `audioSettingsText`
+  - : 音声トラックの制約可能なプロパティの現在の設定を表示する {{HTMLElement("textarea")}}（常に `disabled`）。
+
+最後に、2 つの制約セットエディター要素の現在の内容をデフォルトに設定します。
+
+```js
+videoConstraintEditor.value = videoDefaultConstraintString;
+audioConstraintEditor.value = audioDefaultConstraintString;
+```
+
+#### 設定の表示の更新
+
+各制約セットエディターの右側には、トラックの構成可能なプロパティの現在の構成を表示するために使用する 2 番目のテキストボックスがあります。 この表示を関数 `getCurrentSettings()` で更新します。 この関数は、音声トラックと動画トラックの現在の設定を取得し、{{htmlattrxref("value", "textarea")}} を設定することで対応するコードをトラックの設定表示ボックスに挿入します。
+
+```js
+function getCurrentSettings() {
   if (videoTrack) {
     videoSettingsText.value = JSON.stringify(videoTrack.getSettings(), null, 2);
   }
@@ -345,15 +354,16 @@ audioConstraintEditor.value = audioDefaultConstraintString;
    audioSettingsText.value = JSON.stringify(audioTrack.getSettings(), null, 2); } } - +``` -

    これは、以下に示すように、更新した制約を適用するときだけでなく、ストリームの最初の起動後にも呼び出されます。

    +これは、以下に示すように、更新した制約を適用するときだけでなく、ストリームの最初の起動後にも呼び出されます。 -

    トラックの制約セットオブジェクトの構築

    +#### トラックの制約セットオブジェクトの構築 -

    buildConstraints() 関数は、2つのトラックの制約セット編集ボックス内のコードを使用して、音声トラックと動画トラックの {{domxref("MediaTrackConstraints")}} オブジェクトを構築します。

    +`buildConstraints()` 関数は、2 つのトラックの制約セット編集ボックス内のコードを使用して、音声トラックと動画トラックの {{domxref("MediaTrackConstraints")}} オブジェクトを構築します。 -
    function buildConstraints() {
+```js
+function buildConstraints() {
   try {
     videoConstraints = JSON.parse(videoConstraintEditor.value);
     audioConstraints = JSON.parse(audioConstraintEditor.value);
@@ -361,18 +371,16 @@ audioConstraintEditor.value = audioDefaultConstraintString;
    handleError(error); } } - +``` -

    これは {{jsxref("JSON.parse()")}} を使用して、各エディター内のコードをオブジェクトに解析します。 JSON.parse() の呼び出しのどちらかが例外をスローした場合、handleError() が呼び出されてエラーメッセージがログに出力されます。

    +これは {{jsxref("JSON.parse()")}} を使用して、各エディター内のコードをオブジェクトに解析します。 `JSON.parse()` の呼び出しのどちらかが例外をスローした場合、`handleError()` が呼び出されてエラーメッセージがログに出力されます。 -

    ストリームの構成と開始

    +#### ストリームの構成と開始 -

    startVideo() メソッドは、動画ストリームのセットアップと開始を処理します。

    +`startVideo()` メソッドは、動画ストリームのセットアップと開始を処理します。 -
      -
    - -
    function startVideo() {
+```js
+function startVideo() {
   buildConstraints();
   navigator.mediaDevices.getUserMedia({
     video: videoConstraints,
@@ -396,39 +404,37 @@ audioConstraintEditor.value = audioDefaultConstraintString;
    getCurrentSettings(); }).catch(handleError); } - +``` -

    ここには、次のようないくつかの手順があります。

    +ここには、次のようないくつかの手順があります。 -
      -
    1. buildConstraints() を呼び出して、編集ボックス内のコードから2つのトラックの {{domxref("MediaTrackConstraints")}} オブジェクトを作成します。
      2. -
    2. {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} を呼び出し、動画トラックおよび音声トラックの制約オブジェクトを渡します。 これにより、入力に一致するソースからの音声と動画を含む {{domxref("MediaStream")}} が返されます（通常はウェブカメラですが、適切な制約を指定すると他のソースからメディアを取得できます）。
      3. -
    3. ストリームを取得したら、画面に表示されるように {{HTMLElement("video")}} 要素に添付し、音声トラックと動画トラックを変数 audioTrack と videoTrack に取り込みます。
      4. -
    4. 次に、動画要素で {{event("onloadedmetadata")}} イベントが発生したときに解決する promise を設定します。
      5. -
    5. それが起こると、動画の再生を開始したことがわかるので、getCurrentSettings() 関数（上記を参照）を呼び出して、制約とハードウェアの能力を考慮した後にブラウザーが決定した実際の設定を表示します。
      6. -
    6. エラーが発生した場合は、この記事のもっと下で説明する handleError() メソッドを使用してログに記録します。
      7. -
    +1. `buildConstraints()` を呼び出して、編集ボックス内のコードから 2 つのトラックの {{domxref("MediaTrackConstraints")}} オブジェクトを作成します。 +2. {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} を呼び出し、動画トラックおよび音声トラックの制約オブジェクトを渡します。 これにより、入力に一致するソースからの音声と動画を含む {{domxref("MediaStream")}} が返されます（通常はウェブカメラですが、適切な制約を指定すると他のソースからメディアを取得できます）。 +3. ストリームを取得したら、画面に表示されるように {{HTMLElement("video")}} 要素に添付し、音声トラックと動画トラックを変数 `audioTrack` と `videoTrack` に取り込みます。 +4. 次に、動画要素で {{event("onloadedmetadata")}} イベントが発生したときに解決する promise を設定します。 +5. それが起こると、動画の再生を開始したことがわかるので、`getCurrentSettings()` 関数（上記を参照）を呼び出して、制約とハードウェアの能力を考慮した後にブラウザーが決定した実際の設定を表示します。 +6. エラーが発生した場合は、この記事のもっと下で説明する `handleError()` メソッドを使用してログに記録します。 -

    また、[動画の開始] ボタンがクリックされるのを監視するイベントリスナーを設定する必要があります。

    +また、\[動画の開始] ボタンがクリックされるのを監視するイベントリスナーを設定する必要があります。 -
    document.getElementById("startButton").addEventListener("click", function() {
+```js
+document.getElementById("startButton").addEventListener("click", function() {
   startVideo();
 }, false);
-
    +``` -

    制約セットの更新の適用

    +#### 制約セットの更新の適用 -

    次に、[制約の適用] ボタンのイベントリスナーを設定します。 クリックされ、まだ使用中のメディアがない場合は、startVideo() を呼び出し、指定された設定でストリームを開始する機能をその関数に処理させます。 それ以外の場合は、次の手順に従って、更新済みの制約を既にアクティブなストリームに適用します。

    +次に、\[制約の適用] ボタンのイベントリスナーを設定します。 クリックされ、まだ使用中のメディアがない場合は、`startVideo()` を呼び出し、指定された設定でストリームを開始する機能をその関数に処理させます。 それ以外の場合は、次の手順に従って、更新済みの制約を既にアクティブなストリームに適用します。 -
      -
    1. buildConstraints() を、音声トラック（audioConstraints）および動画トラック（videoConstraints）の更新された {{domxref("MediaTrackConstraints")}} オブジェクトを構築するために呼び出します。
      2. -
    2. {{domxref("MediaStreamTrack.applyConstraints()")}} を、新しい videoConstraints を適用するために動画トラック（存在する場合）で呼び出します。 これが成功したら、動画トラックの現在の設定ボックスの内容を、{{domxref("MediaStreamTrack.getSettings", "getSettings()")}} メソッドを呼び出した結果に基づいて更新します。
      3. -
    3. それが完了すると、新しい音声制約を適用するために、applyConstraints() を音声トラック（存在する場合）で呼び出します。 これが成功したら、音声トラックの現在の設定ボックスの内容を、{{domxref("MediaStreamTrack.getSettings", "getSettings()")}} メソッドを呼び出した結果に基づいて更新しす。
      4. -
    4. いずれかの制約セットを適用してエラーが発生した場合、handleError() を使用してメッセージをログに出力します。
      5. -
    +1. `buildConstraints()` を、音声トラック（`audioConstraints`）および動画トラック（`videoConstraints`）の更新された {{domxref("MediaTrackConstraints")}} オブジェクトを構築するために呼び出します。 +2. {{domxref("MediaStreamTrack.applyConstraints()")}} を、新しい `videoConstraints` を適用するために動画トラック（存在する場合）で呼び出します。 これが成功したら、動画トラックの現在の設定ボックスの内容を、{{domxref("MediaStreamTrack.getSettings", "getSettings()")}} メソッドを呼び出した結果に基づいて更新します。 +3. それが完了すると、新しい音声制約を適用するために、`applyConstraints()` を音声トラック（存在する場合）で呼び出します。 これが成功したら、音声トラックの現在の設定ボックスの内容を、{{domxref("MediaStreamTrack.getSettings", "getSettings()")}} メソッドを呼び出した結果に基づいて更新しす。 +4. いずれかの制約セットを適用してエラーが発生した場合、`handleError()` を使用してメッセージをログに出力します。 -
    document.getElementById("applyButton").addEventListener("click", function() {
-  if (!videoTrack && !audioTrack) {
+```js
+document.getElementById("applyButton").addEventListener("click", function() {
+  if (!videoTrack && !audioTrack) {
     startVideo();
   } else {
     buildConstraints();
@@ -445,13 +451,14 @@ audioConstraintEditor.value = audioDefaultConstraintString;
    } } }, false); - +``` -

    停止ボタンの処理

    +#### 停止ボタンの処理 -

    次に、[動画の停止] ボタンのハンドラーを設定します。

    +次に、\[動画の停止] ボタンのハンドラーを設定します。 -
    document.getElementById("stopButton").addEventListener("click", function() {
+```js
+document.getElementById("stopButton").addEventListener("click", function() {
   if (videoTrack) {
     videoTrack.stop();
   }
@@ -462,15 +469,16 @@ audioConstraintEditor.value = audioDefaultConstraintString;
    videoTrack = audioTrack = null; videoElement.srcObject = null; }); - +``` -

    これは単にアクティブなトラックを停止し、videoTrack 変数と audioTrack 変数を null に設定してそれらがなくなったことがわかるようにし、{{domxref("HTMLMediaElement.srcObject")}} を null に設定して {{HTMLElement("video")}} 要素からストリームを取り除きます。

    +これは単にアクティブなトラックを停止し、`videoTrack` 変数と `audioTrack` 変数を `null` に設定してそれらがなくなったことがわかるようにし、{{domxref("HTMLMediaElement.srcObject")}} を `null` に設定して {{HTMLElement("video")}} 要素からストリームを取り除きます。 -

    エディターでの単純な tab のサポート

    +#### エディターでの単純な tab のサポート -

    このコードは、いずれかの制約編集ボックスがフォーカスされているときに tab キーで2つのスペース文字を挿入することにより、{{HTMLElement("textarea")}} 要素に tab の単純なサポートを追加します。

    +このコードは、いずれかの制約編集ボックスがフォーカスされているときに tab キーで 2 つのスペース文字を挿入することにより、{{HTMLElement("textarea")}} 要素に tab の単純なサポートを追加します。 -
    function keyDownHandler(event) {
+```js
+function keyDownHandler(event) {
   if (event.key == "Tab") {
     let elem = event.target;
     let str = elem.value;
@@ -486,83 +494,67 @@ audioConstraintEditor.value = audioDefaultConstraintString;
    videoConstraintEditor.addEventListener("keydown", keyDownHandler, false); audioConstraintEditor.addEventListener("keydown", keyDownHandler, false); - +``` -

    ブラウザーがサポートする制約可能なプロパティの表示

    +#### ブラウザーがサポートする制約可能なプロパティの表示 -

    パズルの最後の重要な部分: ユーザーの参照用に、ブラウザーがサポートする制約可能なプロパティのリストを表示するコード。 各プロパティは、ユーザーの利便性のために MDN のドキュメントへのリンクです。 このコードの動作の詳細については、MediaDevices.getSupportedConstraints() の例を参照してください。

    +パズルの最後の重要な部分: ユーザーの参照用に、ブラウザーがサポートする制約可能なプロパティのリストを表示するコード。 各プロパティは、ユーザーの利便性のために MDN のドキュメントへのリンクです。 このコードの動作の詳細については、[`MediaDevices.getSupportedConstraints()` の例](/ja/docs/Web/API/MediaDevices/getSupportedConstraints#Example)を参照してください。 -
    -

    もちろん、このリストには非標準のプロパティが含まれている場合があります。 その場合、ドキュメントのリンクはあまり役に立たないでしょう。

    -
    +> **Note:** もちろん、このリストには非標準のプロパティが含まれている場合があります。 その場合、ドキュメントのリンクはあまり役に立たないでしょう。 -
    let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
+```js
+let supportedConstraints = navigator.mediaDevices.getSupportedConstraints();
 for (let constraint in supportedConstraints) {
   if (supportedConstraints.hasOwnProperty(constraint)) {
     let elem = document.createElement("li");
 
-    elem.innerHTML = "<code><a href='https://developer.mozilla.org/docs/Web/API/MediaTrackSupportedConstraints/"
-        .concat(constraint) + "' target='_blank'>" + constraint + "</a></code>";
+    elem.innerHTML = "" + constraint + "";
     supportedConstraintList.appendChild(elem);
   }
 }
-
    +``` -

    エラー処理

    +#### エラー処理 -

    また、いくつかの簡単なエラー処理コードがあります。 handleError() は失敗したプロミスを処理するために呼び出され、log() 関数は動画の下の特別なロギング {{HTMLElement("div")}} ボックスにエラーメッセージを追加します。

    +また、いくつかの簡単なエラー処理コードがあります。 `handleError()` は失敗したプロミスを処理するために呼び出され、`log()` 関数は動画の下の特別なロギング {{HTMLElement("div")}} ボックスにエラーメッセージを追加します。 -
    function log(msg) {
-  logElement.innerHTML += (msg + "<br>");
+```js
+function log(msg) {
+  logElement.innerHTML += (msg + "
    ");
 }
 
 function handleError(reason) {
-  log("Error <code>" + reason.name +
-      "</code> in constraint <code>" + reason.constraint +
-      "</code>: " + reason.message);
-}
    - -

    結果

    - -

    ここで、実際の完全な例を見ることができます。

    + log("Error " + reason.name + + " in constraint " + reason.constraint + + ": " + reason.message); +} +``` -

    {{EmbedLiveSample("Example_Constraint_exerciser", 650, 800, "", "", "", "microphone; camera")}}

    +### 結果 -

    仕様

    +ここで、実際の完全な例を見ることができます。 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('Media Capture', '#constrainable-interface', 'Constrainable pattern')}}{{Spec2('Media Capture')}}初期定義
    +{{EmbedLiveSample("Example_Constraint_exerciser", 650, 800, "", "", "", "microphone; camera")}} -

    ブラウザーの互換性

    +## 仕様 -

    MediaDevices.getSupportedConstraints

    +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------- | +| {{SpecName('Media Capture', '#constrainable-interface', 'Constrainable pattern')}} | {{Spec2('Media Capture')}} | 初期定義 | -
    +## ブラウザーの互換性 +### `MediaDevices.getSupportedConstraints` -

    {{Compat("api.MediaDevices.getSupportedConstraints")}}

    -
    +{{Compat("api.MediaDevices.getSupportedConstraints")}} -

    関連情報

    +## 関連情報 - +- [Media Capture and Streams API](/ja/docs/Web/API/Media_Streams_API) +- {{domxref("MediaTrackCapabilities")}} +- {{domxref("MediaTrackConstraints")}} +- {{domxref("MediaTrackSettings")}} +- {{domxref("MediaDevices.getSupportedConstraints()")}} +- {{domxref("MediaStreamTrack.applyConstraints()")}} +- {{domxref("MediaStreamTrack.getSettings()")}} diff --git a/files/ja/web/api/media_capture_and_streams_api/index.md b/files/ja/web/api/media_capture_and_streams_api/index.md index b5e45366e107a9..2477b111cd4d4d 100644 --- a/files/ja/web/api/media_capture_and_streams_api/index.md +++ b/files/ja/web/api/media_capture_and_streams_api/index.md @@ -15,61 +15,53 @@ tags: translation_of: Web/API/Media_Streams_API original_slug: Web/API/Media_Streams_API --- -
    {{DefaultAPISidebar("Media Capture and Streams")}}
    +{{DefaultAPISidebar("Media Capture and Streams")}} -

    Media Capture and Streams APIは一般的にMedia Stream APIやStream APIと呼ばれるWebRTCに関連したAPIです。このAPIでは、オーディオやビデオデータのストリーム、これらを操作するためのメソッド、データタイプに関連づけられた制約、データを非同期に利用する際の成功と失敗のコールバック、これらの処理を行なっている最中に発生するイベントなどをサポートします。

    +**Media Capture and Streams** API は一般的に*Media Stream API*や*Stream API*と呼ばれる[WebRTC](/ja/docs/WebRTC "/en-US/docs/WebRTC")に関連した API です。この API では、オーディオやビデオデータのストリーム、これらを操作するためのメソッド、データタイプに関連づけられた制約、データを非同期に利用する際の成功と失敗のコールバック、これらの処理を行なっている最中に発生するイベントなどをサポートします。 -

    基本概念

    +## 基本概念 -

    このAPIは、オーディオまたはビデオに関連づけられたデータの流れを表現するための{{domxref("MediaStream")}}オブジェクトの操作を基本としています。例としてGet the video(英語)をご覧ください。

    +この API は、オーディオまたはビデオに関連づけられたデータの流れを表現するための{{domxref("MediaStream")}}オブジェクトの操作を基本としています。例として[Get the video](/ja/docs/WebRTC/taking_webcam_photos#Get_the_video "/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video")(英語)をご覧ください。 -

    MediaStreamは0個以上の{{domxref("MediaStreamTrack")}}によって構成されます。MediaStreamTrackは様々なオーディオやビデオのトラックを表現します。それぞれのMediaStreamTrackは、1つ以上のチャンネルを持ちます。このチャンネルはメディアストリームの最小の単位を表現します。例えば、ステレオのオーディオトラックのleftとrightのチャンネルのそれぞれのように、与えられたスピーカーに関連づけられたオーディオ信号です。

    +`MediaStream`は 0 個以上の{{domxref("MediaStreamTrack")}}によって構成されます。`MediaStreamTrack`は様々なオーディオやビデオの**トラック**を表現します。それぞれの`MediaStreamTrack`は、1 つ以上の**チャンネル**を持ちます。このチャンネルはメディアストリームの最小の単位を表現します。例えば、ステレオのオーディオトラックの*left*と*right*のチャンネルのそれぞれのように、与えられたスピーカーに関連づけられたオーディオ信号です。 -

    MediaStreamオブジェクトは、1つの入力と1つの出力を持ちます。MediaStreamオブジェクトは、ローカルで呼び出される{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}によって生成され、ユーザーのカメラやマイクの1つを入力ソースとして持ちます。ローカルでないMediaStreamは、{{HTMLElement("video")}}や{{HTMLElement("audio")}}などのメディア要素や、WebRTC {{domxref("RTCPeerConnection")}} APIによって取得できるネットワーク越しに生成されたストリーム、Web Audio API {{domxref("MediaStreamAudioSourceNode")}}によって作成されたストリームとして表現されます。MediaStreamオブジェクトの出力はコンシューマ(consumer)に接続されます。出力として{{HTMLElement("audio")}}や{{HTMLElement("video")}}などのメディア要素、WebRTC {{domxref("RTCPeerConnection")}} API、Web Audio API {{domxref("MediaStreamAudioDestinationNode")}}が使用できます。

    +`MediaStream`オブジェクトは、1 つの**入力**と 1 つの**出力**を持ちます。`MediaStream`オブジェクトは、ローカルで呼び出される{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}によって生成され、ユーザーのカメラやマイクの 1 つを入力ソースとして持ちます。ローカルでない`MediaStream`は、{{HTMLElement("video")}}や{{HTMLElement("audio")}}などのメディア要素や、WebRTC {{domxref("RTCPeerConnection")}} API によって取得できるネットワーク越しに生成されたストリーム、[Web Audio API](/ja/docs/Web_Audio_API "/en-US/docs/Web_Audio_API") {{domxref("MediaStreamAudioSourceNode")}}によって作成されたストリームとして表現されます。`MediaStream`オブジェクトの出力は**コンシューマ**(consumer)に接続されます。出力として{{HTMLElement("audio")}}や{{HTMLElement("video")}}などのメディア要素、WebRTC {{domxref("RTCPeerConnection")}} API、[Web Audio API](/ja/docs/Web_Audio_API "/en-US/docs/Web_Audio_API") {{domxref("MediaStreamAudioDestinationNode")}}が使用できます。 -

    +## リファレンス -

    リファレンス

    +- {{event("addtrack")}} (event) +- {{domxref("AudioStreamTrack")}} +- {{domxref("BlobEvent")}} +- {{event("ended")}} (event) +- {{domxref("MediaStream")}} +- {{domxref("MediaStreamConstraints")}} +- {{domxref("MediaStreamEvent")}} +- {{domxref("MediaStreamTrack")}} +- {{domxref("MediaStreamTrackEvent")}} +- {{domxref("MediaTrackCapabilities")}} +- {{domxref("MediaTrackConstraints")}} +- {{domxref("MediaTrackSettings")}} +- {{domxref("MediaTrackSupportedConstraints")}} +- {{event("muted")}} (event) +- {{domxref("NavigatorUserMedia")}} +- {{domxref("NavigatorUserMediaError")}} +- {{event("overconstrained")}} (event) +- {{event("removetrack")}} (event) +- {{event("started")}} (event) +- {{event("unmuted")}} (event) +- {{domxref("URL")}} +- {{domxref("VideoStreamTrack")}} -
    -
      -
    • {{event("addtrack")}} (event)
      • -
    • {{domxref("AudioStreamTrack")}}
      • -
    • {{domxref("BlobEvent")}}
      • -
    • {{event("ended")}} (event)
      • -
    • {{domxref("MediaStream")}}
      • -
    • {{domxref("MediaStreamConstraints")}}
      • -
    • {{domxref("MediaStreamEvent")}}
      • -
    • {{domxref("MediaStreamTrack")}}
      • -
    • {{domxref("MediaStreamTrackEvent")}}
      • -
    • {{domxref("MediaTrackCapabilities")}}
      • -
    • {{domxref("MediaTrackConstraints")}}
      • -
    • {{domxref("MediaTrackSettings")}}
      • -
    • {{domxref("MediaTrackSupportedConstraints")}}
      • -
    • {{event("muted")}} (event)
      • -
    • {{domxref("NavigatorUserMedia")}}
      • -
    • {{domxref("NavigatorUserMediaError")}}
      • -
    • {{event("overconstrained")}} (event)
      • -
    • {{event("removetrack")}} (event)
      • -
    • {{event("started")}} (event)
      • -
    • {{event("unmuted")}} (event)
      • -
    • {{domxref("URL")}}
      • -
    • {{domxref("VideoStreamTrack")}}
      • -
    -
    +## ガイドとチュートリアル -

    ガイドとチュートリアル

    +{{LandingPageListSubpages}} -

    {{LandingPageListSubpages}}

    +## ブラウザ互換性 -

    ブラウザ互換性

    +{{Compat("api.MediaStream")}} -

    {{Compat("api.MediaStream")}}

    +## 関連項目 -

    関連項目

    - - +- [WebRTC](/ja/docs/WebRTC "/en-US/docs/WebRTC") - API の入門ページ +- {{domxref("mediaDevices.getUserMedia()")}} +- [Taking webcam photos](/ja/docs/WebRTC/taking_webcam_photos): `getUserMedia()`を用いたデモとチュートリアル diff --git a/files/ja/web/api/media_source_extensions_api/index.md b/files/ja/web/api/media_source_extensions_api/index.md index 81bdb59f611fb7..1ce059f7ba4432 100644 --- a/files/ja/web/api/media_source_extensions_api/index.md +++ b/files/ja/web/api/media_source_extensions_api/index.md @@ -13,99 +13,76 @@ tags: - streaming translation_of: Web/API/Media_Source_Extensions_API --- -

    {{DefaultAPISidebar("Media Source Extensions")}}

    +{{DefaultAPISidebar("Media Source Extensions")}} -

    Media Source Extensions API（MSE、メディアソース拡張機能 API）は、プラグイン不要で Web ベースのストリーミングメディアを可能にする機能を提供します。 MSE を使用すると、メディアストリームを JavaScript で作成し、{{htmlelement("audio")}} 要素 や {{htmlelement("video")}} 要素で再生できます。

    +**Media Source Extensions API**（MSE、メディアソース拡張機能 API）は、プラグイン不要で Web ベースのストリーミングメディアを可能にする機能を提供します。 MSE を使用すると、メディアストリームを JavaScript で作成し、{{htmlelement("audio")}} 要素 や {{htmlelement("video")}} 要素で再生できます。 -

    Media Source Extensions の概念と使用方法

    +## Media Source Extensions の概念と使用方法 -

    動画と音声の再生は、Web アプリにおいて、ここ数年間でプラグイン不要で利用可能になりましたが、提供される基本的な機能は、単一トラック全体を再生する場合にのみ有効でした。 例えば、配列バッファを結合/分割することはできません。 RTMP プロトコルを使用して動画ストリームを提供する Flash Media Server などの技術により、ストリーミングメディアは最近まで Flash の領分でした。

    +動画と音声の再生は、Web アプリにおいて、ここ数年間でプラグイン不要で利用可能になりましたが、提供される基本的な機能は、単一トラック全体を再生する場合にのみ有効でした。 例えば、配列バッファを結合/分割することはできません。 RTMP プロトコルを使用して動画ストリームを提供する Flash Media Server などの技術により、ストリーミングメディアは最近まで Flash の領分でした。 -

    MSE 標準

    +### MSE 標準 -

    Media Source Extensions（MSE）により、これは変化しています。 MSE を使用すると、メディア要素に渡す通常の単一トラックの src 値を MediaSource オブジェクトへの参照で置き換えることができます。 MediaSource オブジェクトは、再生するメディアの準備状態などの情報のコンテナであり、ストリーム全体を構成するメディアの異なるチャンク（大きな塊）を表す複数の SourceBuffer オブジェクトへの参照です。 MSE を使用すると、コンテンツを取得する量と頻度をよりきめ細かく制御でき、バッファを削除するタイミングなど、メモリ使用量の詳細をある程度制御できます。 拡張可能な API 上に構築される適応的ビットレートストリーミングクライアント（DASH や HLS を使用するクライアントなど）の基礎を築きます。

    +Media Source Extensions（MSE）により、これは変化しています。 MSE を使用すると、メディア要素に渡す通常の単一トラックの `src` 値を `MediaSource` オブジェクトへの参照で置き換えることができます。 `MediaSource` オブジェクトは、再生するメディアの準備状態などの情報のコンテナであり、ストリーム全体を構成するメディアの異なるチャンク（大きな塊）を表す複数の `SourceBuffer` オブジェクトへの参照です。 MSE を使用すると、コンテンツを取得する量と頻度をよりきめ細かく制御でき、バッファを削除するタイミングなど、メモリ使用量の詳細をある程度制御できます。 拡張可能な API 上に構築される適応的ビットレートストリーミングクライアント（DASH や HLS を使用するクライアントなど）の基礎を築きます。 -

    最新のブラウザーで MSE で動作するアセット（asset、静的コンテンツ）を作成するのは面倒なプロセスであり、かなりの時間、計算能力、エネルギーのすべてを必要とします。 コンテンツを適切な形式にもみほぐす外部ユーティリティの使用が必要です。 MSE を使用したさまざまなメディアコンテナのブラウザーサポートは不完全ですが、H.264 動画コーデック、AAC 音声コーデック、および MP4 コンテナ形式の使用が一般的なベースラインです。 MSE は、コンテナおよびコーデックのサポートの実行時検出用の API も提供します。

    +最新のブラウザーで MSE で動作するアセット（asset、静的コンテンツ）を作成するのは面倒なプロセスであり、かなりの時間、計算能力、エネルギーのすべてを必要とします。 コンテンツを適切な形式にもみほぐす外部ユーティリティの使用が必要です。 MSE を使用したさまざまなメディアコンテナのブラウザーサポートは不完全ですが、H.264 動画コーデック、AAC 音声コーデック、および MP4 コンテナ形式の使用が一般的なベースラインです。 MSE は、コンテナおよびコーデックのサポートの実行時検出用の API も提供します。 -

    時間経過に伴う動画品質、コンテンツの取得速度、またはメモリの削除速度を明示的に制御する必要がない場合は、{{htmlelement("video")}} タグと {{htmlelement("source")}} タグが簡単で適切な解決策になる可能性があります。

    +時間経過に伴う動画品質、コンテンツの取得速度、またはメモリの削除速度を明示的に制御する必要がない場合は、{{htmlelement("video")}} タグと {{htmlelement("source")}} タグが簡単で適切な解決策になる可能性があります。 -

    DASH

    +### DASH -

    Dynamic Adaptive Streaming over HTTP（DASH、HTTP を介した動的適応的ストリーミング）は、適応的コンテンツの取得方法を指定するためのプロトコルです。 これは、効率的に適応的ビットレートストリーミングクライアントを構築するために MSE の上に構築されたレイヤーです。 HTTP Live Streaming（HLS、HTTP ライブストリーミング）といった他のプロトコルを使用できますが、DASH はほとんどのプラットフォームをサポートしています。

    +**Dynamic Adaptive Streaming over HTTP**（DASH、HTTP を介した動的適応的ストリーミング）は、適応的コンテンツの取得方法を指定するためのプロトコルです。 これは、効率的に適応的ビットレートストリーミングクライアントを構築するために MSE の上に構築されたレイヤーです。 HTTP Live Streaming（HLS、HTTP ライブストリーミング）といった他のプロトコルを使用できますが、DASH はほとんどのプラットフォームをサポートしています。 -

    DASH は、多くのロジックをネットワークプロトコルからクライアント側アプリのロジックに移動し、より単純な HTTP プロトコルを使用してファイルを取得します。 実際、単純な静的ファイルサーバーで DASH をサポートでき、{{glossary("CDN")}} にも最適です。 これは、独自で非標準のクライアント/サーバープロトコルの実装に高価なライセンスを必要とした従来のストリーミングの解決策とは正反対です。

    +DASH は、多くのロジックをネットワークプロトコルからクライアント側アプリのロジックに移動し、より単純な HTTP プロトコルを使用してファイルを取得します。 実際、単純な静的ファイルサーバーで DASH をサポートでき、{{glossary("CDN")}} にも最適です。 これは、独自で非標準のクライアント/サーバープロトコルの実装に高価なライセンスを必要とした従来のストリーミングの解決策とは正反対です。 -

    DASH の2つの最も一般的な使用例では、コンテンツを「オンデマンド」または「ライブ」で視聴します。 オンデマンドでは、開発者が時間をかけてアセットをさまざまな品質の複数の解像度にトランスコード（transcoding）できます。

    +DASH の 2 つの最も一般的な使用例では、コンテンツを「オンデマンド」または「ライブ」で視聴します。 オンデマンドでは、開発者が時間をかけてアセットをさまざまな品質の複数の解像度にトランスコード（transcoding）できます。 -

    ライブプロファイルのコンテンツは、トランスコードとブロードキャストのために遅延を引き起こす可能性があるため、DASH は WebRTC のようなリアルタイム通信には適していません。 ただし、WebRTC よりもかなり多くのクライアント接続をサポートできます。

    +ライブプロファイルのコンテンツは、トランスコードとブロードキャストのために遅延を引き起こす可能性があるため、DASH は [WebRTC](/ja/docs/Web/API/WebRTC_API) のようなリアルタイム通信には適していません。 ただし、WebRTC よりもかなり多くのクライアント接続をサポートできます。 -

    コンテンツをトランスコードし、DASH、DASH ファイルサーバー、および JavaScript で記述された DASH クライアントライブラリで使用する準備を行うための、無料でオープンソースのツールが多数あります。

    +コンテンツをトランスコードし、DASH、DASH ファイルサーバー、および JavaScript で記述された DASH クライアントライブラリで使用する準備を行うための、無料でオープンソースのツールが多数あります。 -

    インターフェイス

    +## インターフェイス -
    -
    {{domxref("MediaSource")}}
    -
    {{domxref("HTMLMediaElement")}} オブジェクトを介して再生されるメディアソースを表します。
    -
    {{domxref("SourceBuffer")}}
    -
    MediaSource オブジェクトを介して {{domxref("HTMLMediaElement")}} に渡されるメディアのチャンクを表します。
    -
    {{domxref("SourceBufferList")}}
    -
    複数の SourceBuffer オブジェクトの単純なコンテナリスト。
    -
    {{domxref("VideoPlaybackQuality")}}
    -
    欠落や破損したフレーム数など、{{htmlelement("video")}} 要素で再生される動画の品質に関する情報が含まれます。 {{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} メソッドによって返されます。
    -
    {{domxref("TrackDefault")}}
    -
    メディアチャンクの初期化セグメント（initialization segments）に含まれていないトラックの種類、ラベル、および言語情報の情報を {{domxref("SourceBuffer")}} に提供します。
    -
    {{domxref("TrackDefaultList")}}
    -
    複数の TrackDefault オブジェクトの単純なコンテナリスト。
    -
    +- {{domxref("MediaSource")}} + - : {{domxref("HTMLMediaElement")}} オブジェクトを介して再生されるメディアソースを表します。 +- {{domxref("SourceBuffer")}} + - : `MediaSource` オブジェクトを介して {{domxref("HTMLMediaElement")}} に渡されるメディアのチャンクを表します。 +- {{domxref("SourceBufferList")}} + - : 複数の `SourceBuffer` オブジェクトの単純なコンテナリスト。 +- {{domxref("VideoPlaybackQuality")}} + - : 欠落や破損したフレーム数など、{{htmlelement("video")}} 要素で再生される動画の品質に関する情報が含まれます。 {{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} メソッドによって返されます。 +- {{domxref("TrackDefault")}} + - : メディアチャンクの初期化セグメント（[initialization segments](http://w3c.github.io/media-source/#init-segment)）に含まれていないトラックの種類、ラベル、および言語情報の情報を {{domxref("SourceBuffer")}} に提供します。 +- {{domxref("TrackDefaultList")}} + - : 複数の `TrackDefault` オブジェクトの単純なコンテナリスト。 -

    他のインターフェイスの拡張

    +## 他のインターフェイスの拡張 -
    -
    {{domxref("URL.createObjectURL()")}}
    -
    MediaSource オブジェクトを指すオブジェクト URL を作成します。 このオブジェクトは、メディアストリームを再生する HTML メディア要素の src 値として指定できます。
    -
    {{domxref("HTMLMediaElement.seekable")}}
    -
    MediaSource オブジェクトが HTML メディア要素によって再生されると、このプロパティは、ユーザーがシークできる時間範囲を含む {{domxref("TimeRanges")}} オブジェクトを返します。
    -
    {{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}}
    -
    現在再生されている動画の {{domxref("VideoPlaybackQuality")}} オブジェクトを返します。
    -
    {{domxref("AudioTrack.sourceBuffer")}}、{{domxref("VideoTrack.sourceBuffer")}}、{{domxref("TextTrack.sourceBuffer")}}
    -
    問題のトラックを作成した {{domxref("SourceBuffer")}} を返します。
    -
    +- {{domxref("URL.createObjectURL()")}} + - : `MediaSource` オブジェクトを指すオブジェクト URL を作成します。 このオブジェクトは、メディアストリームを再生する HTML メディア要素の `src` 値として指定できます。 +- {{domxref("HTMLMediaElement.seekable")}} + - : `MediaSource` オブジェクトが HTML メディア要素によって再生されると、このプロパティは、ユーザーがシークできる時間範囲を含む {{domxref("TimeRanges")}} オブジェクトを返します。 +- {{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} + - : 現在再生されている動画の {{domxref("VideoPlaybackQuality")}} オブジェクトを返します。 +- {{domxref("AudioTrack.sourceBuffer")}}、{{domxref("VideoTrack.sourceBuffer")}}、{{domxref("TextTrack.sourceBuffer")}} + - : 問題のトラックを作成した {{domxref("SourceBuffer")}} を返します。 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('Media Source Extensions')}}{{Spec2('Media Source Extensions')}}初期定義
    +| 仕様 | 状態 | コメント | +| ---------------------------------------------------- | ------------------------------------------------ | -------- | +| {{SpecName('Media Source Extensions')}} | {{Spec2('Media Source Extensions')}} | 初期定義 | -

    ブラウザーの互換性

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

    MediaSource インターフェイス

    +### MediaSource インターフェイス -
    +{{Compat("api.MediaSource", 0)}} +## 関連情報 -

    {{Compat("api.MediaSource", 0)}}

    -
    -
    - -

    関連情報

    - - +- [Media Source Extensions のためのアセットのトランスコード](/ja/docs/Web/API/Media_Source_Extensions_API/Transcoding_assets_for_MSE) +- MSE を使用した基本的なストリーミングサービスの作成（未定） +- MPEG DASH を使用したストリーミングアプリの作成（未定） +- {{htmlelement("audio")}} 要素と {{htmlelement("video")}} 要素 +- {{domxref("HTMLMediaElement")}}、{{domxref("HTMLVideoElement")}},、{{domxref("HTMLAudioElement")}} diff --git a/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md b/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md index d7a10c17b94663..c0e8885967f3f9 100644 --- a/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md +++ b/files/ja/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md @@ -10,96 +10,98 @@ tags: - adaptive translation_of: Web/API/Media_Source_Extensions_API/Transcoding_assets_for_MSE --- -

    Media Source Extensions を使用する場合、アセットをストリーミングする前に調整する必要がある可能性があります。 この記事では、要件を説明し、アセットを適切にエンコードするために使用できるツールチェーンを示します。

    +Media Source Extensions を使用する場合、アセットをストリーミングする前に調整する必要がある可能性があります。 この記事では、要件を説明し、アセットを適切にエンコードするために使用できるツールチェーンを示します。 -

    入門

    +## 入門 -
      -
    1. 最初で最も重要な手順は、ユーザーのブラウザーがサポートするコンテナとコーデックでファイルを構成することです。
      2. -
    2. コーデックによっては、ISO BMFF 仕様に準拠するためにファイルを断片化する必要がある場合があります。
      3. -
    3. （オプション）Dynamic Adaptive Streaming over HTTP（DASH、HTTP を介した動的適応的ストリーミング）を使用した適応的ビットレートストリーミングを使用する場合、アセットを複数の解像度にトランスコードする必要があります。 ほとんどの DASH クライアントは、対応する Media Presentation Description（MPD）マニフェストファイルを期待しています。 これは通常、複数の解像度のアセットファイルを生成するときに生成されます。
      4. -
    +1. 最初で最も重要な手順は、ユーザーのブラウザーがサポートするコンテナとコーデックでファイルを構成することです。 +2. コーデックによっては、[ISO BMFF 仕様](https://www.w3.org/TR/mse-byte-stream-format-isobmff/)に準拠するためにファイルを断片化する必要がある場合があります。 +3. （オプション）Dynamic Adaptive Streaming over HTTP（DASH、HTTP を介した動的適応的ストリーミング）を使用した適応的ビットレートストリーミングを使用する場合、アセットを複数の解像度にトランスコードする必要があります。 ほとんどの DASH クライアントは、対応する Media Presentation Description（MPD）マニフェストファイルを期待しています。 これは通常、複数の解像度のアセットファイルを生成するときに生成されます。 -

    以下では、これらのすべての手順を説明しますが、最初にこれをかなり簡単に行うために使用できるツールチェーンを見てみましょう。

    +以下では、これらのすべての手順を説明しますが、最初にこれをかなり簡単に行うために使用できるツールチェーンを見てみましょう。 -

    サンプルメディア

    +### サンプルメディア -

    ここにリストされている手順を実行したいが、実験するメディアがない場合は、Big Buck Bunny の予告編 [0] をここで入手できます。 Big Buck Bunny は、Creative Commons Attribution 3.0 ライセンスの下でライセンスされています。 このチュートリアル全体を通して、ダウンロードしたファイル名 trailer_1080p.mov を参照します。

    +ここにリストされている手順を実行したいが、実験するメディアがない場合は、Big Buck Bunny の予告編 \[0] を[ここ](http://wayback.archive.org/web/20161102172252id_/http://video.blendertestbuilds.de/download.php?file=download.blender.org/peach/trailer_1080p.mov)で入手できます。 Big Buck Bunny は、[Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0/) ライセンスの下でライセンスされています。 このチュートリアル全体を通して、ダウンロードしたファイル名 `trailer_1080p.mov` を参照します。 -

    [0] (c) Copyright 2008, Blender Foundation / www.bigbuckbunny.org / https://peach.blender.org/about/

    +\[0] (c) Copyright 2008, Blender Foundation / www\.bigbuckbunny.org / https\://peach.blender.org/about/ -

    必要なツール

    +### 必要なツール -

    MSE を使用する場合、次のツールが必要です。

    +MSE を使用する場合、次のツールが必要です。 -
      -
    1. ffmpeg — メディアを必要な形式にトランスコードするためのコマンドラインユーティリティ。 Download FFmpeg のページであなたのシステムのバージョンをダウンロードできます。 アーカイブファイルから実行可能ファイルを抽出し、その場所を PATH ステートメントに追加します。 OSX ユーザーは、homebrew を使用して ffmpeg をインストールすることもできます。
      2. -
    2. Bento4 — アセットのメタデータを取得し、DASH のコンテンツを作成するための一連のコマンドラインユーティリティ。 インストールするには、OS と設定に応じて、提供されたプロジェクトファイル/ソースファイルからアプリを自分でビルド/コンパイルする必要があります。 詳細については、構築手順を参照してください。 構築済みファイルがここにあります。 bin ディレクトリの内容を ffmpeg と同じ場所に入れておきます。
      3. -
    3. python2 — Bento4 が使います。
      4. -
    +1. [ffmpeg](http://ffmpeg.org/) — メディアを必要な形式にトランスコードするためのコマンドラインユーティリティ。 [Download FFmpeg のページ](http://ffmpeg.org/download.html)であなたのシステムのバージョンをダウンロードできます。 アーカイブファイルから実行可能ファイルを抽出し、その場所を PATH ステートメントに追加します。 OSX ユーザーは、[homebrew](http://brew.sh/) を使用して ffmpeg をインストールすることもできます。 +2. [Bento4](https://github.com/axiomatic-systems/Bento4) — アセットのメタデータを取得し、DASH のコンテンツを作成するための一連のコマンドラインユーティリティ。 インストールするには、OS と設定に応じて、提供されたプロジェクトファイル/ソースファイルからアプリを自分でビルド/コンパイルする必要があります。 詳細については、[構築手順](https://github.com/axiomatic-systems/Bento4#building)を参照してください。 構築済みファイルが[ここ](https://www.bento4.com/downloads/)にあります。 `bin` ディレクトリの内容を ffmpeg と同じ場所に入れておきます。 +3. python2 — Bento4 が使います。 -

    次のステップに進む前に、これらを正常にインストールしてください。

    +次のステップに進む前に、これらを正常にインストールしてください。 -

    サンプルメディアは、Bento4 の utils ディレクトリに入れておき、ここで作業します。

    +サンプルメディアは、Bento4 の `utils` ディレクトリに入れておき、ここで作業します。 -
    -

    注: 構築済みの ffmpeg には、ライセンスの関係で libfdk_aac が組み込まれていません。 これを Bento4 がデフォルトで使うので、必要なら、ffmpeg をコンパイルする必要があります。 必要なければ、mp4-dash-encode.py のコマンドラインに --audio-codec=aac を追加してください。

    -
    +> **Note:** **注**: 構築済みの ffmpeg には、ライセンスの関係で libfdk_aac が組み込まれていません。 これを Bento4 がデフォルトで使うので、必要なら、ffmpeg をコンパイルする必要があります。 必要なければ、`mp4-dash-encode.py` のコマンドラインに `--audio-codec=aac` を追加してください。 -

    コンテナとコーデックのサポート

    +### コンテナとコーデックのサポート -

    MSE 仕様のセクション1.1: Goals で指定されているように、MSE は特定のメディア形式またはコーデックのサポートを必要としないように設計されています。 これは紙の上では事実ですが、ブラウザーのサポートは特定のコンテナ/コーデックの組み合わせによって異なります。

    +[MSE 仕様のセクション 1.1: Goals](https://www.w3.org/TR/media-source/#goals) で指定されているように、MSE は特定のメディア形式またはコーデックのサポートを必要としないように設計されています。 これは紙の上では事実ですが、ブラウザーのサポートは特定のコンテナ/コーデックの組み合わせによって異なります。 -

    ブラウザーが特定のコンテナをサポートしているかどうかを確認するには、次のように MIME タイプの文字列を {{domxref("MediaSource.isTypeSupported")}} メソッドに渡します。

    +ブラウザーが特定のコンテナをサポートしているかどうかを確認するには、次のように MIME タイプの文字列を {{domxref("MediaSource.isTypeSupported")}} メソッドに渡します。 -
    MediaSource.isTypeSupported('audio/mp3'); // false
+```js
+MediaSource.isTypeSupported('audio/mp3'); // false
 MediaSource.isTypeSupported('video/mp4'); // true
-MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true
    +MediaSource.isTypeSupported('video/mp4; codecs="avc1.4D4028, mp4a.40.2"'); // true +``` -

    文字列はコンテナの MIME タイプであり、オプションでコーデックのリストが続きます。 MIME タイプは簡単に把握できますが、mp4info ユーティリティを使用してコーデック文字列を取得できます。

    +文字列はコンテナの MIME タイプであり、オプションでコーデックのリストが続きます。 MIME タイプは簡単に把握できますが、[mp4info](http://nickdesaulniers.github.io/mp4info/) ユーティリティを使用してコーデック文字列を取得できます。 -

    現在、H.264 動画コーデックと AAC 音声コーデックを備えた MP4 コンテナは、すべての最新ブラウザーでサポートされていますが、他のブラウザーではサポートされていません。

    +現在、H.264 動画コーデックと AAC 音声コーデックを備えた MP4 コンテナは、すべての最新ブラウザーでサポートされていますが、他のブラウザーではサポートされていません。 -

    サンプルメディアを QuickTime MOV コンテナから MP4 コンテナに変換するには、ffmpeg を使用できます。 MOV コンテナの音声コーデックは既に AAC であり、動画コーデックは H.264 であるため、トランスコードを実行しないように ffmpeg に指示できます。 代わりに、トランスコードを実行せずに音声トラックと動画トラックをコピーするだけです。 これは、トランスコードするよりも比較的高速です。

    +サンプルメディアを QuickTime MOV コンテナから MP4 コンテナに変換するには、ffmpeg を使用できます。 MOV コンテナの音声コーデックは既に AAC であり、動画コーデックは H.264 であるため、トランスコードを実行しないように ffmpeg に指示できます。 代わりに、トランスコードを実行せずに音声トラックと動画トラックをコピーするだけです。 これは、トランスコードするよりも比較的高速です。 -
    $ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy bunny.mp4
+```
+$ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy bunny.mp4
 $ ls
-bunny.mp4         trailer_1080p.mov
    +bunny.mp4 trailer_1080p.mov +``` -

    断片化の確認

    +### 断片化の確認 -

    MP4 を適切にストリーミングするには、アセットが ISO BMF 形式の MP4 である必要があります。 適切な断片化がなければ、特定の MP4 ファイルは MSE での動作が保証されません。 これは、コンテナ内にメタデータが分散され、まとめられていないことを意味します。

    +MP4 を適切にストリーミングするには、アセットが [ISO BMF](https://www.w3.org/TR/mse-byte-stream-format-isobmff/) 形式の MP4 である必要があります。 適切な断片化がなければ、特定の MP4 ファイルは MSE での動作が保証されません。 これは、コンテナ内にメタデータが分散され、まとめられていないことを意味します。 -

    MP4 ファイルが適切な MP4 ストリームであるかどうかを確認するには、mp4info ユーティリティを再度使用して MP4 のアトムを一覧表示できます。

    +MP4 ファイルが適切な MP4 ストリームであるかどうかを確認するには、[mp4info](http://nickdesaulniers.github.io/mp4info/) ユーティリティを再度使用して MP4 のアトムを一覧表示できます。 -
    -

    注: 断片化されたバージョンは、追加のメタデータがファイル全体に広がるため、元のバージョンよりわずかに大きくなります。 これは通常、ファイルサイズの 1% 以下の増加です。

    -
    +> **Note:** **注**: 断片化されたバージョンは、追加のメタデータがファイル全体に広がるため、元のバージョンよりわずかに大きくなります。 これは通常、ファイルサイズの 1% 以下の増加です。 -

    断片化

    +### 断片化 -

    まだ MP4 ではないアセットがある場合、ffmpeg は次のように -movflags frag_keyframe+empty_moov コマンドラインフラグを使用して、トランスコードプロセス中に適切に断片化された MP4 の発行を処理できます。

    +まだ MP4 ではないアセットがある場合、ffmpeg は次のように `-movflags frag_keyframe+empty_moov` コマンドラインフラグを使用して、トランスコードプロセス中に適切に断片化された MP4 の発行を処理できます。 -
    $ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4
    +```bash +$ ffmpeg -i trailer_1080p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4 +``` -

    すでに MP4 を持っているが、適切に断片化されていない場合は、ffmpeg を改めて使用できます。

    +すでに MP4 を持っているが、適切に断片化されていない場合は、ffmpeg を改めて使用できます。 -
    $ ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4
-
    +``` +$ ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4 +``` -

    どちらの場合でも、Chrome は次の追加のムービーフラグを設定する必要がある場合があります。

    +どちらの場合でも、Chrome は次の追加のムービーフラグを設定する必要がある場合があります。 -
    -movflags frag_keyframe+empty_moov+default_base_moof
    +```bash +-movflags frag_keyframe+empty_moov+default_base_moof +``` -

    適切に断片化された MP4 ファイルを用意するだけで開始できます。 適応的ビットレートストリーミングを使用する場合は、複数の解像度でエンコードを作成する必要があります。 MSE は柔軟に実装できるほど柔軟性がありますが、DASH は明確に指定されたアプリケーションプロトコルであるため、既存の DASH クライアントを使用することを強くお勧めします。

    +適切に断片化された MP4 ファイルを用意するだけで開始できます。 適応的ビットレートストリーミングを使用する場合は、複数の解像度でエンコードを作成する必要があります。 MSE は柔軟に実装できるほど柔軟性がありますが、DASH は明確に指定されたアプリケーションプロトコルであるため、既存の DASH クライアントを使用することを強くお勧めします。 -

    DASH 用のコンテンツの作成

    +### DASH 用のコンテンツの作成 -

    $PATH を介して ffmpeg と Bento4 のユーティリティにアクセスできる場合、Bento4 の mp4-dash-encode.py Python スクリプトを実行して、さまざまな解像度でコンテンツの複数のエンコーディングを生成できます。 Bento4 の mp4-dash.py Python スクリプトを使用して、クライアントが必要とする対応する MPD ファイルを生成できます。

    +$PATH を介して ffmpeg と Bento4 のユーティリティにアクセスできる場合、Bento4 の `mp4-dash-encode.py` Python スクリプトを実行して、さまざまな解像度でコンテンツの複数のエンコーディングを生成できます。 Bento4 の `mp4-dash.py` Python スクリプトを使用して、クライアントが必要とする対応する MPD ファイルを生成できます。 -

    次のコマンドを実行します（サンプル出力付き）。

    +次のコマンドを実行します（サンプル出力付き）。 -
    $ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4
+```bash
+$ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4
 Encoding 5 bitrates, min bitrate = 500.0 max bitrate = 2000.0
 Media Source: Video: resolution=640x360
 ENCODING bitrate: 500, resolution: 256x144
@@ -133,16 +135,13 @@ output
     ├── 4
     └── 5
 
-8 directories, 1 file
    +8 directories, 1 file +``` -
    -

    注: mp4-dash-encode.py は、ffmpeg のエラーメッセージを表示しないようにしています。 -d オプションを指定することで、それを見ることができます。

    -
    +> **Note:** **注**: `mp4-dash-encode.py` は、ffmpeg のエラーメッセージを表示しないようにしています。 `-d` オプションを指定することで、それを見ることができます。 -
    -

    注: エラーメッセージとして "Invalid duration specification for force_key_frames: 'expr:eq(mod(n" が表示されたら、mp4-dash-encode.py を修正して "-force_key_frames 'expr:eq(mod(n,%d),0)'" から "'" を2つ取り除きます。

    -
    +> **Note:** **注**: エラーメッセージとして `"Invalid duration specification for force_key_frames: 'expr:eq(mod(n"` が表示されたら、`mp4-dash-encode.py` を修正して `"-force_key_frames 'expr:eq(mod(n,%d),0)'"` から `"'"` を 2 つ取り除きます。 -

    まとめ

    +## まとめ -

    動画が適切にエンコードされ、適応的ビットレートメディアが生成されると、DASH と MSE を使用して Web で適応的ビットレートストリーミングを開始する準備が整いました。

    +動画が適切にエンコードされ、適応的ビットレートメディアが生成されると、DASH と MSE を使用して Web で適応的ビットレートストリーミングを開始する準備が整いました。 diff --git a/files/ja/web/api/offscreencanvas/getcontext/index.md b/files/ja/web/api/offscreencanvas/getcontext/index.md index baff96595f287a..d5f704936fa073 100644 --- a/files/ja/web/api/offscreencanvas/getcontext/index.md +++ b/files/ja/web/api/offscreencanvas/getcontext/index.md @@ -3,119 +3,90 @@ title: OffscreenCanvas.getContext() slug: Web/API/OffscreenCanvas/getContext translation_of: Web/API/OffscreenCanvas/getContext --- -
    {{APIRef("Canvas API")}} {{SeeCompatTable}}
    +{{APIRef("Canvas API")}} {{SeeCompatTable}} -

    The OffscreenCanvas.getContext() method returns a drawing context for an offscreen canvas, or {{jsxref("null")}} if the context identifier is not supported.

    +The **`OffscreenCanvas.getContext()`** method returns a drawing context for an offscreen canvas, or {{jsxref("null")}} if the context identifier is not supported. -
    -

    Note: This API is currently implemented for WebGL1 and WebGL2 contexts only. See {{bug(801176)}} for Canvas 2D API support from workers.

    -
    +> **Note:** This API is currently implemented for [WebGL1](/ja/docs/Web/API/WebGLRenderingContext) and [WebGL2](/ja/docs/Web/API/WebGL2RenderingContext) contexts only. See {{bug(801176)}} for [Canvas 2D API](/ja/docs/Web/API/Canvas_API) support from workers. -

    構文

    +**構文** +``` +offscreen.getContext(contextType, contextAttributes); +``` +### 引数 -
    offscreen.getContext(contextType, contextAttributes);
-
    +- `contextType` -

    引数

    + - : Is a {{domxref("DOMString")}} containing the context identifier defining the drawing context associated to the canvas. Possible values are: -
    -
    contextType
    -
    Is a {{domxref("DOMString")}} containing the context identifier defining the drawing context associated to the canvas. Possible values are: -
      -
    • "2d" creates a {{domxref("CanvasRenderingContext2D")}} object representing a two-dimensional rendering context.
      • -
    • "webgl" creates a {{domxref("WebGLRenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 1 (OpenGL ES 2.0).
      • -
    • "webgl2" creates a {{domxref("WebGL2RenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 2 (OpenGL ES 3.0). {{experimental_inline}}
      • -
    • -

      "bitmaprenderer" creates a {{domxref("ImageBitmapRenderingContext")}} which only provides functionality to replace the content of the canvas with a given {{domxref("ImageBitmap")}}.

      -
      • -
    + - **`"2d"`** creates a {{domxref("CanvasRenderingContext2D")}} object representing a two-dimensional rendering context. + - **`"webgl"`** creates a {{domxref("WebGLRenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement [WebGL](/ja/docs/Web/WebGL) version 1 (OpenGL ES 2.0). + - **`"webgl2"`** creates a {{domxref("WebGL2RenderingContext")}} object representing a three-dimensional rendering context. This context is only available on browsers that implement [WebGL](/ja/docs/Web/WebGL) version 2 (OpenGL ES 3.0). {{experimental_inline}} + - **`"bitmaprenderer"`** creates a {{domxref("ImageBitmapRenderingContext")}} which only provides functionality to replace the content of the canvas with a given {{domxref("ImageBitmap")}}. -

    Note: The identifiers "experimental-webgl" or "experimental-webgl2" are also used in implementations of WebGL. These implementations have not reached test suite conformance, or the graphic drivers situation on the platform is not yet stable. The Khronos Group certifies WebGL implementations under certain conformance rules.

    -
    -
    contextAttributes
    -
    -

    You can use several context attributes when creating your rendering context, for example:

    + Note: The identifiers **`"experimental-webgl"`** or **`"experimental-webgl2"`** are also used in implementations of WebGL. These implementations have not reached test suite conformance, or the graphic drivers situation on the platform is not yet stable. The [Khronos Group](https://www.khronos.org/) certifies WebGL implementations under certain [conformance rules](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt). - 
    offscreen.getContext("webgl",
-                 { antialias: false,
-                   depth: false });
    - 2d context attributes: +- `contextAttributes` -
      -
    • alpha: Boolean that indicates if the canvas contains an alpha channel. If set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.
      • -
    • {{non-standard_inline}} (Gecko only) willReadFrequently: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag gfx.canvas.willReadFrequently.enable is set to true (which, by default, is only the case for B2G/Firefox OS).
      • -
    • {{non-standard_inline}} (Blink only) storage: String that indicates which storage is used ("persistent" by default).
      • -
    - WebGL context attributes: + - : You can use several context attributes when creating your rendering context, for example: -
      -
    • alpha: Boolean that indicates if the canvas contains an alpha buffer.
      • -
    • depth: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
      • -
    • stencil: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.
      • -
    • antialias: Boolean that indicates whether or not to perform anti-aliasing.
      • -
    • premultipliedAlpha: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
      • -
    • preserveDrawingBuffer: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
      • -
    • -

      failIfMajorPerformanceCaveat: Boolean that indicates if a context will be created if the system performance is low.

      -
      • -
    -
    -
    + ```js + offscreen.getContext("webgl", + { antialias: false, + depth: false }); + ``` -

    　返値

    + 2d context attributes: -

    A {{domxref("RenderingContext")}} which is either a

    + - **`alpha`**: Boolean that indicates if the canvas contains an alpha channel. If set to `false`, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then. + - {{non-standard_inline}} (Gecko only) **`willReadFrequently`**: Boolean that indicates whether or not a lot of read-back operations are planned. This will force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} frequently. This option is only available, if the flag `gfx.canvas.willReadFrequently.enable` is set to `true` (which, by default, is only the case for B2G/Firefox OS). + - {{non-standard_inline}} (Blink only) **`storage`**: String that indicates which storage is used ("persistent" by default). - + WebGL context attributes: -

    If the contextType doesn't match a possible drawing context, null is returned.

    + - **`alpha`**: Boolean that indicates if the canvas contains an alpha buffer. + - **`depth`**: Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits. + - **`stencil`**: Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits. + - **`antialias`**: Boolean that indicates whether or not to perform anti-aliasing. + - **`premultipliedAlpha`**: Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha. + - **`preserveDrawingBuffer`**: If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author. + - **`failIfMajorPerformanceCaveat`**: Boolean that indicates if a context will be created if the system performance is low. -

    例

    +### 　返値 +A {{domxref("RenderingContext")}} which is either a +- {{domxref("CanvasRenderingContext2D")}} for `"2d"`, +- {{domxref("WebGLRenderingContext")}} for `"webgl"` and `"experimental-webgl"`, +- {{domxref("WebGL2RenderingContext")}} for `"webgl2"` and `"experimental-webgl2"` {{experimental_inline}}, or +- {{domxref("ImageBitmapRenderingContext")}} for `"bitmaprenderer"`. -
    var offscreen = new OffscreenCanvas(256, 256);
-var gl = offscreen.getContext("webgl");
+If the `contextType` doesn't match a possible drawing context, `null` is returned.
 
-gl; // WebGLRenderingContext
-gl.canvas; // OffscreenCanvas
    +## **例** -

    仕様書

    +```js +var offscreen = new OffscreenCanvas(256, 256); +var gl = offscreen.getContext("webgl"); - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('HTML WHATWG', "#dom-offscreencanvas-getcontext", "OffscreenCanvas.getContext()")}}{{Spec2('HTML WHATWG')}}
    +gl; // WebGLRenderingContext +gl.canvas; // OffscreenCanvas +``` -

    ブラウザの互換性

    +## **仕様書** -
    +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "#dom-offscreencanvas-getcontext", "OffscreenCanvas.getContext()")}} | {{Spec2('HTML WHATWG')}} | | +## **ブラウザの互換性** -

    {{Compat("api.OffscreenCanvas.getContext")}}

    -
    +{{Compat("api.OffscreenCanvas.getContext")}} -

    See also

    +## See also - +- The interface defining this method: {{domxref("OffscreenCanvas")}} +- {{domxref("HTMLCanvasElement.getContext()")}} +- Available rendering contexts: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}}, {{domxref("WebGL2RenderingContext")}}, and {{domxref("ImageBitmapRenderingContext")}} diff --git a/files/ja/web/api/offscreencanvas/index.md b/files/ja/web/api/offscreencanvas/index.md index 5c1c5f9f55957e..718bc495fc403d 100644 --- a/files/ja/web/api/offscreencanvas/index.md +++ b/files/ja/web/api/offscreencanvas/index.md @@ -9,62 +9,59 @@ tags: - NeedsTranslation - Reference - TopicStub -browser-compat: api.OffscreenCanvas translation_of: Web/API/OffscreenCanvas +browser-compat: api.OffscreenCanvas --- -
    {{APIRef("Canvas API")}} {{SeeCompatTable}}
    +{{APIRef("Canvas API")}} {{SeeCompatTable}} + +The **`OffscreenCanvas`** interface provides a canvas that can be rendered off screen. It is available in both the window and [worker](/ja/docs/Web/API/Web_Workers_API) contexts. + +## Constructors -

    The OffscreenCanvas interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.

    +- {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}} + - : `OffscreenCanvas` constructor. Creates a new `OffscreenCanvas` object. -

    Constructors

    +## Properties -
    -
    {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
    -
    OffscreenCanvas constructor. Creates a new OffscreenCanvas object.
    -
    +- {{domxref("OffscreenCanvas.height")}} + - : The height of the offscreen canvas. +- {{domxref("OffscreenCanvas.width")}} + - : The width of the offscreen canvas. -

    Properties

    +## Methods -
    -
    {{domxref("OffscreenCanvas.height")}}
    -
    The height of the offscreen canvas.
    -
    {{domxref("OffscreenCanvas.width")}}
    -
    The width of the offscreen canvas.
    -
    +- {{domxref("OffscreenCanvas.getContext()")}} + - : Returns a rendering context for the offscreen canvas. -

    Methods

    + -
    -
    {{domxref("OffscreenCanvas.getContext()")}}
    -
    Returns a rendering context for the offscreen canvas.
    -
    +- {{domxref("OffscreenCanvas.convertToBlob()")}} + - : Creates a {{domxref("Blob")}} object representing the image contained in the canvas. -
    -
    {{domxref("OffscreenCanvas.convertToBlob()")}}
    -
    Creates a {{domxref("Blob")}} object representing the image contained in the canvas.
    -
    + -
    -
    {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
    -
    Creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of the OffscreenCanvas.
    -
    +- {{domxref("OffscreenCanvas.transferToImageBitmap()")}} + - : Creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of the `OffscreenCanvas`. -

    Examples

    +## Examples -

    Synchronous display of frames produced by an OffscreenCanvas

    +### Synchronous display of frames produced by an `OffscreenCanvas` -

    One way to use the OffscreenCanvas API, is to use a {{domxref("RenderingContext")}} that has been obtained from an OffscreenCanvas object to generate new frames. Once a new frame has finished rendering in this context, the {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} method can be called to save the most recent rendered image. This method returns an {{domxref("ImageBitmap")}} object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.

    +One way to use the `OffscreenCanvas` API, is to use a {{domxref("RenderingContext")}} that has been obtained from an `OffscreenCanvas` object to generate new frames. Once a new frame has finished rendering in this context, the {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} method can be called to save the most recent rendered image. This method returns an {{domxref("ImageBitmap")}} object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy. -

    To display the ImageBitmap, you can use a {{domxref("ImageBitmapRenderingContext")}} context, which can be created by calling canvas.getContext("bitmaprenderer") on a (visible) canvas element. This context only provides functionality to replace the canvas's contents with the given ImageBitmap. A call to {{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}} with the previously rendered and saved ImageBitmap from the OffscreenCanvas, will display the ImageBitmap on the canvas and transfer its ownership to the canvas. A single OffscreenCanvas may transfer frames into an arbitrary number of other ImageBitmapRenderingContext objects.

    +To display the `ImageBitmap`, you can use a {{domxref("ImageBitmapRenderingContext")}} context, which can be created by calling `canvas.getContext("bitmaprenderer")` on a (visible) canvas element. This context only provides functionality to replace the canvas's contents with the given `ImageBitmap`. A call to {{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}} with the previously rendered and saved `ImageBitmap` from the OffscreenCanvas, will display the `ImageBitmap` on the canvas and transfer its ownership to the canvas. A single `OffscreenCanvas` may transfer frames into an arbitrary number of other `ImageBitmapRenderingContext` objects. -

    Given these two {{HTMLElement("canvas")}} elements

    +Given these two {{HTMLElement("canvas")}} elements -
    <canvas id="one"></canvas>
-<canvas id="two"></canvas>
    +```html + + +``` -

    the following code will provide the rendering using an OffscreenCanvas as described above.

    +the following code will provide the rendering using an `OffscreenCanvas` as described above. -
    var one = document.getElementById("one").getContext("bitmaprenderer");
+```js
+var one = document.getElementById("one").getContext("bitmaprenderer");
 var two = document.getElementById("two").getContext("bitmaprenderer");
 
 var offscreen = new OffscreenCanvas(256, 256);
@@ -81,34 +78,37 @@ one.transferFromImageBitmap(bitmapOne);
 // Commit rendering to the second canvas
 var bitmapTwo = offscreen.transferToImageBitmap();
 two.transferFromImageBitmap(bitmapTwo);
-
    +``` -

    Asynchronous display of frames produced by an OffscreenCanvas

    +### Asynchronous display of frames produced by an `OffscreenCanvas` -

    Another way to use the OffscreenCanvas API, is to call {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} on a {{HTMLElement("canvas")}} element, either on a worker or the main thread, which will return an OffscreenCanvas object from an {{domxref("HTMLCanvasElement")}} object from the main thread. Calling {{domxref("OffscreenCanvas.getContext", "getContext()")}} will then obtain a RenderingContext from that OffscreenCanvas.

    +Another way to use the `OffscreenCanvas` API, is to call {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} on a {{HTMLElement("canvas")}} element, either on a [worker](/ja/docs/Web/API/Web_Workers_API) or the main thread, which will return an `OffscreenCanvas` object from an {{domxref("HTMLCanvasElement")}} object from the main thread. Calling {{domxref("OffscreenCanvas.getContext", "getContext()")}} will then obtain a `RenderingContext` from that `OffscreenCanvas`. -

    main.js (main thread code):

    +main.js (main thread code): -
    var htmlCanvas = document.getElementById("canvas");
+```js
+var htmlCanvas = document.getElementById("canvas");
 var offscreen = htmlCanvas.transferControlToOffscreen();
 
 var worker = new Worker("offscreencanvas.js");
 worker.postMessage({canvas: offscreen}, [offscreen]);
-
    +``` -

    offscreencanvas.js (worker code):

    +offscreencanvas.js (worker code): -
    onmessage = function(evt) {
+```js
+onmessage = function(evt) {
   var canvas = evt.data.canvas;
   var gl = canvas.getContext("webgl");
 
   // ... some drawing using the gl context ...
 };
-
    +``` -

    You can also use requestAnimationFrame in workers

    +You can also use requestAnimationFrame in workers -
    onmessage = function(evt) {
+```js
+onmessage = function(evt) {
   const canvas = evt.data.canvas;
   const gl = canvas.getContext("webgl");
 
@@ -117,27 +117,22 @@ worker.postMessage({canvas: offscreen}, [offscreen]);
     requestAnimationFrame(render);
   }
   requestAnimationFrame(render);
-};
    +}; +``` -

    Specifications

    +## Specifications {{Specifications}} -

    Browser compatibility

    - -
    - +## Browser compatibility -

    {{Compat("api.OffscreenCanvas")}}

    -
    +{{Compat("api.OffscreenCanvas")}} -

    See also

    +## See also - +- [WebGL Off the Main Thread – Mozilla Hacks](https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/) +- {{domxref("CanvasRenderingContext2D")}} +- {{domxref("ImageBitmap")}} +- {{domxref("ImageBitmapRenderingContext")}} +- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} +- {{domxref("WebGLRenderingContext.commit()")}} diff --git a/files/ja/web/api/path2d/addpath/index.md b/files/ja/web/api/path2d/addpath/index.md index c41310eb8b6a3d..39e5ada15ab81c 100644 --- a/files/ja/web/api/path2d/addpath/index.md +++ b/files/ja/web/api/path2d/addpath/index.md @@ -3,31 +3,31 @@ title: Path2D.addPath() slug: Web/API/Path2D/addPath translation_of: Web/API/Path2D/addPath --- -
    {{APIRef("Canvas API")}}
    +{{APIRef("Canvas API")}} -

    Canvas 2D APIのPath2D.addPath()メソッドは、パスに対して引数でパスを追加します。

    +Canvas 2D API の**`Path2D`\*\***`.addPath()`\*\*メソッドは、パスに対して引数でパスを追加します。 -

    構文

    +## 構文 -
    void path.addPath(path [, transform]);
-
    +``` +void path.addPath(path [, transform]); +``` -

    パラメーター

    +### パラメーター -
    -
    path
    -
    追加する{{domxref("Path2D")}}パス
    -
    transform {{optional_inline}}
    -
    パスに追加する変換マトリックスとして使われる{{domxref("SVGMatrix")}}.
    -
    +- `path` + - : 追加する{{domxref("Path2D")}}パス +- `transform` {{optional_inline}} + - : パスに追加する変換マトリックスとして使われる{{domxref("SVGMatrix")}}. -

    例

    +## 例 -

    addPathメソッドを使用する

    +### `addPathメソッドを使用する` -

    これはaddPathメソッドを使用する簡単なコードスニペットです。

    +これは`addPathメソッドを使用する簡単なコードスニペットです。` -
    var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 // rectで新しいパスを作成する
@@ -49,35 +49,22 @@ p1.addPath(p2, m);
 
 // 最後に、1番目のパスをキャンバスに描画する
 ctx.fill(p1);
-
    +``` -

    以下のコードを編集して、その変更が canvas に反映されることを確かめてください(現在のブラウザーが実際にこのメソッドをサポートしているか、以下のブラウザー互換テーブルをチェックしてください)

    +以下のコードを編集して、その変更が canvas に反映されることを確かめてください(現在のブラウザーが実際にこのメソッドをサポートしているか、以下のブラウザー互換テーブルをチェックしてください) -

    {{ EmbedLiveSample('Playable_code', 700, 500) }}

    +{{ EmbedLiveSample('Playable_code', 700, 500) }} -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('HTML WHATWG', "scripting.html#dom-path2d-addpath", "Path2D.addPath()")}}{{Spec2('HTML WHATWG')}}初期定義
    +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-path2d-addpath", "Path2D.addPath()")}} | {{Spec2('HTML WHATWG')}} | 初期定義 | -

    ブラウザー互換性

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

    {{Compat("api.Path2D.addPath")}}

    +{{Compat("api.Path2D.addPath")}} -

    関連情報

    +## 関連情報 - +- このインターフェイスは{{domxref("Path2D")}}に定義されています。 diff --git a/files/ja/web/api/path2d/index.md b/files/ja/web/api/path2d/index.md index 136f42940af81b..b0493bd3477a65 100644 --- a/files/ja/web/api/path2d/index.md +++ b/files/ja/web/api/path2d/index.md @@ -11,67 +11,48 @@ tags: - TopicStub translation_of: Web/API/Path2D --- -
    {{APIRef("Canvas API")}} {{SeeCompatTable}}
    +{{APIRef("Canvas API")}} {{SeeCompatTable}} -

    The Path2D interface of the Canvas 2D API is used to declare paths that are then later used on {{domxref("CanvasRenderingContext2D")}} objects. The path methods of the CanvasRenderingContext2D interface are present on this interface as well and are allowing you to create paths that you can retain and replay as required on a canvas.

    +The **`Path2D`** interface of the Canvas 2D API is used to declare paths that are then later used on {{domxref("CanvasRenderingContext2D")}} objects. The[ path methods](/ja/docs/Web/API/CanvasRenderingContext2D#Paths) of the `CanvasRenderingContext2D` interface are present on this interface as well and are allowing you to create paths that you can retain and replay as required on a canvas. -

    Constructors

    +## Constructors -
    -
    {{domxref("Path2D.Path2D", "Path2D()")}}
    -
    Path2D constructor. Creates a new Path2D object.
    -
    +- {{domxref("Path2D.Path2D", "Path2D()")}} + - : `Path2D` constructor. Creates a new `Path2D` object. -

    Methods

    +## Methods -
    -
    {{domxref("Path2D.addPath()")}}
    -
    Adds a path to the current path.
    -
    {{domxref("CanvasRenderingContext2D.closePath", "Path2D.closePath()")}}
    -
    Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
    -
    {{domxref("CanvasRenderingContext2D.moveTo()", "Path2D.moveTo()")}}
    -
    Moves the starting point of a new sub-path to the (x, y) coordinates.
    -
    {{domxref("CanvasRenderingContext2D.lineTo()", "Path2D.lineTo()")}}
    -
    Connects the last point in the subpath to the x, y coordinates with a straight line.
    -
    {{domxref("CanvasRenderingContext2D.bezierCurveTo()", "Path2D.bezierCurveTo()")}}
    -
    Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
    -
    {{domxref("CanvasRenderingContext2D.quadraticCurveTo()", "Path2D.quadraticCurveTo()")}}
    -
    Adds a quadratic Bézier curve to the current path.
    -
    {{domxref("CanvasRenderingContext2D.arc()", "Path2D.arc()")}}
    -
    Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
    -
    {{domxref("CanvasRenderingContext2D.arcTo()", "Path2D.arcTo()")}}
    -
    Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
    -
    {{domxref("CanvasRenderingContext2D.ellipse()", "Path2D.ellipse()")}}
    -
    Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
    -
    {{domxref("CanvasRenderingContext2D.rect()", "Path2D.rect()")}}
    -
    Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
    -
    +- {{domxref("Path2D.addPath()")}} + - : Adds a path to the current path. +- {{domxref("CanvasRenderingContext2D.closePath", "Path2D.closePath()")}} + - : Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. +- {{domxref("CanvasRenderingContext2D.moveTo()", "Path2D.moveTo()")}} + - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. +- {{domxref("CanvasRenderingContext2D.lineTo()", "Path2D.lineTo()")}} + - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. +- {{domxref("CanvasRenderingContext2D.bezierCurveTo()", "Path2D.bezierCurveTo()")}} + - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()` before creating the Bézier curve. +- {{domxref("CanvasRenderingContext2D.quadraticCurveTo()", "Path2D.quadraticCurveTo()")}} + - : Adds a quadratic Bézier curve to the current path. +- {{domxref("CanvasRenderingContext2D.arc()", "Path2D.arc()")}} + - : Adds an arc to the path which is centered at _(x, y)_ position with radius _r_ starting at _startAngle_ and ending at _endAngle_ going in the given direction by _anticlockwise_ (defaulting to clockwise). +- {{domxref("CanvasRenderingContext2D.arcTo()", "Path2D.arcTo()")}} + - : Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line. +- {{domxref("CanvasRenderingContext2D.ellipse()", "Path2D.ellipse()")}} + - : Adds an ellipse to the path which is centered at _(x, y)_ position with the radii _radiusX_ and _radiusY_ starting at _startAngle_ and ending at _endAngle_ going in the given direction by _anticlockwise_ (defaulting to clockwise). +- {{domxref("CanvasRenderingContext2D.rect()", "Path2D.rect()")}} + - : Creates a path for a rectangle at\_ _position _(x, y)_ with a size that is determined by \_width_ and _height_. -

    Specifications

    +## Specifications - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('HTML WHATWG', "scripting.html#dom-path2d", "Path2D")}}{{Spec2('HTML WHATWG')}}
    +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-path2d", "Path2D")}} | {{Spec2('HTML WHATWG')}} | | -

    Browser compatibility

    +## Browser compatibility -

    {{Compat("api.Path2D")}}

    +{{Compat("api.Path2D")}} -

    See also

    +## See also - +- {{domxref("CanvasRenderingContext2D")}} diff --git a/files/ja/web/api/path2d/path2d/index.md b/files/ja/web/api/path2d/path2d/index.md index 62dfba9d18cba6..5ff50e41dae4b8 100644 --- a/files/ja/web/api/path2d/path2d/index.md +++ b/files/ja/web/api/path2d/path2d/index.md @@ -12,40 +12,39 @@ tags: - Reference translation_of: Web/API/Path2D/Path2D --- -
    {{APIRef("Canvas API")}}{{seeCompatTable}}
    +{{APIRef("Canvas API")}}{{seeCompatTable}} -

    Path2D() コンストラクターは、新たにインスタンス化した Path2D オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、SVG パス からなるデータを文字列で渡すこともできます。

    +**`Path2D()`** コンストラクターは、新たにインスタンス化した `Path2D` オブジェクトを返します。他のパスを引数に渡すこともできます(複製がつくられます)。また、[SVG パス](/ja/docs/Web/SVG/Tutorial/Paths) からなるデータを文字列で渡すこともできます。 -

    構文

    +## 構文 -
    new Path2D();
-new Path2D(path);
-new Path2D(d);
-
    +``` +new Path2D(); +new Path2D(path); +new Path2D(d); +``` -

    引数

    +### 引数 -
    -
    path {{optional_inline}}
    -
    他のPath2D オブジェクトを渡して呼び出すと、引数の path が複製されます。
    -
    d {{optional_inline}}
    -
    SVG パス からなる文字列を渡して呼出すと、その内容のパスが新たにつくられます。
    -
    +- `path` {{optional_inline}} + - : 他の`Path2D` オブジェクトを渡して呼び出すと、引数の `path` が複製されます。 +- `d` {{optional_inline}} + - : [SVG パス](/ja/docs/Web/SVG/Tutorial/Paths) からなる文字列を渡して呼出すと、その内容のパスが新たにつくられます。 -
    -
    + -

    例

    +## 例 -

    パスを複製してつくる

    +### パスを複製してつくる -

    これは、Path2D のパスを複製して作成する簡単なコードスニペットです。

    +これは、`Path2D` のパスを複製して作成する簡単なコードスニペットです。 - +```html hidden + +``` -
    const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 let path1 = new Path2D();
@@ -56,54 +55,38 @@ path2.moveTo(220, 60);
 path2.arc(170, 60, 50, 0, 2 * Math.PI);
 
 ctx.stroke(path2);
-
    +``` -

    {{ EmbedLiveSample('Creating_and_copying_paths', 700, 180) }}

    +{{ EmbedLiveSample('Creating_and_copying_paths', 700, 180) }} -

    SVG パスを使用する

    +### SVG パスを使用する -

    これは、SVG パスデータ を使用して Path2D のパスを作成する簡単なコードスニペットです。パスは点 (M10 10) に移ってから、水平に 80 ポイント右に移動し (h 80)、80 ポイント下がり (v 80)、80ポイント左に移動し (h -80)、開始点に戻ります (z)。

    +これは、[SVG パスデータ](/ja/docs/Web/SVG/Tutorial/Paths) を使用して `Path2D` のパスを作成する簡単なコードスニペットです。パスは点 (`M10 10`) に移ってから、水平に 80 ポイント右に移動し (`h 80`)、80 ポイント下がり (`v 80`)、80 ポイント左に移動し (`h -80`)、開始点に戻ります (`z`)。 - +```html hidden + +``` -
    const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
 ctx.fill(p);
-
    +``` -

    {{ EmbedLiveSample('Using_SVG_paths', 700, 180) }}

    +{{ EmbedLiveSample('Using_SVG_paths', 700, 180) }} -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('HTML WHATWG', '#dom-path2d', 'Path2D()')}}{{Spec2('HTML WHATWG')}}Initial definition.
    +| Specification | Status | Comment | +| ------------------------------------------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName('HTML WHATWG', '#dom-path2d', 'Path2D()')}} | {{Spec2('HTML WHATWG')}} | Initial definition. | -

    ブラウザー実装状況

    +## ブラウザー実装状況 -
    +{{Compat("api.Path2D")}} +## 関連情報 -

    {{Compat("api.Path2D")}}

    -
    - -

    関連情報

    - - +- {{domxref("Path2D")}} インタフェースに、このコンストラクタは属します。 diff --git a/files/ja/web/api/performance_timeline/index.md b/files/ja/web/api/performance_timeline/index.md index e826ee099c6173..34e686cc28b031 100644 --- a/files/ja/web/api/performance_timeline/index.md +++ b/files/ja/web/api/performance_timeline/index.md @@ -7,68 +7,60 @@ tags: - 概要 translation_of: Web/API/Performance_Timeline --- -
    {{DefaultAPISidebar("Performance Timeline API")}}
    +{{DefaultAPISidebar("Performance Timeline API")}} -

    パフォーマンスタイムライン API は、{{domxref("Performance")}} インターフェイスへの拡張を定義して、アプリケーション内のクライアントサイドの待ち時間の測定をサポートします。 拡張機能は、特定のフィルタ基準に基づいて{{domxref("PerformanceEntry","performance entry metrics", '', 'true')}} を取得するためのインターフェイスを提供します。この規格には、特定のパフォーマンスイベントがブラウザのパフォーマンスタイムラインに追加されたときに通知される ', 'true コールバックをアプリケーションで定義できるインターフェイスも含まれます。

    +**パフォーマンスタイムライン** API は、{{domxref("Performance")}} インターフェイスへの拡張を定義して、アプリケーション内のクライアントサイドの待ち時間の測定をサポートします。 拡張機能は、特定のフィルタ基準に基づいて{{domxref("PerformanceEntry","performance entry metrics", '', 'true')}} を取得するためのインターフェイスを提供します。この規格には、特定のパフォーマンスイベントがブラウザのパフォーマンスタイムラインに追加されたときに通知される _[performance observer](#performance_observers)_ コールバックをアプリケーションで定義できるインターフェイスも含まれます。 -

    このドキュメントは規格のインターフェイスの概要を提供します。インターフェイスの詳細については、リファレンスページおよびパフォーマンスタイムラインの使用を参照してください。

    +このドキュメントは規格のインターフェイスの概要を提供します。インターフェイスの詳細については、リファレンスページおよび[パフォーマンスタイムラインの使用](/ja/Web/API/Performance_Timeline/Using_Performance_Timeline)を参照してください。 -

    Performance 拡張

    +## Performance 拡張 -

    パフォーマンスタイムライン API は、{{domxref("Performance")}} インターフェイスを、指定されたフィルター基準に応じて一連の {{domxref("PerformanceEntry","パフォーマンスレコード (メトリック)")}} を取得するためのさまざまなメカニズムを提供する3つのメソッドで拡張します。メソッドは以下のとおりです。

    +パフォーマンスタイムライン API は、{{domxref("Performance")}} インターフェイスを、指定されたフィルター基準に応じて一連の {{domxref("PerformanceEntry","パフォーマンスレコード (メトリック)")}} を取得するためのさまざまなメカニズムを提供する 3 つのメソッドで拡張します。メソッドは以下のとおりです。 -
    -
    {{domxref("Performance.getEntries","getEntries()")}}
    -
    Returns all recorded {{domxref("PerformanceEntry","performance entries")}} or, optionally, the entries based on the specified {{domxref("PerformanceEntry.name","name")}}, {{domxref("PerformanceEntry.entryType","performance type")}} and/or the {{domxref("PerformanceEntry.initiatorType","initiatorType")}} (such as an HTML element).
    -
    {{domxref("Performance.getEntriesByName","getEntriesByName()")}}
    -
    Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.name","name")}} and optionally the {{domxref("PerformanceEntry.entryType","performance type")}}.
    -
    {{domxref("Performance.getEntriesByType","getEntriesByType()")}}
    -
    Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.entryType","performance type")}}.
    -
    +- {{domxref("Performance.getEntries","getEntries()")}} + - : Returns all recorded {{domxref("PerformanceEntry","performance entries")}} or, optionally, the entries based on the specified {{domxref("PerformanceEntry.name","name")}}, {{domxref("PerformanceEntry.entryType","performance type")}} and/or the {{domxref("PerformanceEntry.initiatorType","initiatorType")}} (such as an HTML element). +- {{domxref("Performance.getEntriesByName","getEntriesByName()")}} + - : Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.name","name")}} and optionally the {{domxref("PerformanceEntry.entryType","performance type")}}. +- {{domxref("Performance.getEntriesByType","getEntriesByType()")}} + - : Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.entryType","performance type")}}. -

    PerformanceEntry インターフェイス

    +## PerformanceEntry インターフェイス -

    The {{domxref("PerformanceEntry")}} interface encapsulates a single performance entry — that is, a single data point or metric in the performance timeline. This interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (such as {{domxref("PerformanceMark")}}):

    +The {{domxref("PerformanceEntry")}} interface encapsulates a single _performance entry_ — that is, a single data point or metric in the _performance timeline_. This interface has the following four properties, and these properties are extended (with additional constraints) by other interfaces (such as {{domxref("PerformanceMark")}}): -
    -
    {{domxref("PerformanceEntry.name","name")}}
    -
    The name of the performance entry when the metric was created.
    -
    {{domxref("PerformanceEntry.entryType","entryType")}}
    -
    The type of performance metric (for example, "mark").
    -
    {{domxref("PerformanceEntry.startTime","startTime")}}
    -
    A {{domxref("DOMHighResTimeStamp","high resolution timestamp")}} representing the starting time for the performance entry.
    -
    {{domxref("PerformanceEntry.duration","duration")}}
    -
    A {{domxref("DOMHighResTimeStamp","high resolution timestamp", '', 'true')}} representing the time value of the duration of the performance event. (Some performance {{domxref("PerformanceEntry.entryType","entry types", '', 'true')}} have no concept of duration and this value is set to '0' for such types.)
    -
    +- {{domxref("PerformanceEntry.name","name")}} + - : The name of the performance entry when the metric was created. +- {{domxref("PerformanceEntry.entryType","entryType")}} + - : The type of performance metric (for example, "`mark`"). +- {{domxref("PerformanceEntry.startTime","startTime")}} + - : A {{domxref("DOMHighResTimeStamp","high resolution timestamp")}} representing the starting time for the performance entry. +- {{domxref("PerformanceEntry.duration","duration")}} + - : A {{domxref("DOMHighResTimeStamp","high resolution timestamp", '', 'true')}} representing the time value of the duration of the performance event. (Some performance {{domxref("PerformanceEntry.entryType","entry types", '', 'true')}} have no concept of _duration_ and this value is set to `'0'` for such types.) -

    This interface includes a {{domxref("PerformanceEntry.toJSON","toJSON()")}} method that returns the serialization of the {{domxref("PerformanceEntry")}} object. The serialization is specific to the performance entry's {{domxref("PerformanceEntry.entryType","type")}}.

    +This interface includes a {{domxref("PerformanceEntry.toJSON","toJSON()")}} method that returns the serialization of the {{domxref("PerformanceEntry")}} object. The serialization is specific to the performance entry's {{domxref("PerformanceEntry.entryType","type")}}. -

    Performance オブザーバー

    +## Performance オブザーバー -

    {{SeeCompatTable}}

    +{{SeeCompatTable}} -

    The performance observer interfaces allow an application to register an observer for specific performance event types, and when one of those event types is recorded, the application is notified of the event via the observer's callback function that was specified when the observer was created.

    +The _performance observer_ interfaces allow an application to register an _observer_ for specific performance event types, and when one of those event types is recorded, the application is _notified_ of the event via the observer's callback function that was specified when the observer was created. -

    When the observer (callback) is invoked, the callback's parameters include a {{domxref("PerformanceObserverEntryList","performance observer entry list")}} that contains only observed {{domxref("PerformanceEntry","performance entries")}}. That is, the list contains entries only for the event types that were specified when the observer's {{domxref("PerformanceObserver.observe","observe()")}} method was invoked. The {{domxref("PerformanceObserverEntryList","performance observer entry list")}} interface has the same three getEntries*() methods as the {{domxref("Performance")}} interface. However, note there is one key difference with these methods; the {{domxref("PerformanceObserverEntryList","performance observer entry list")}} versions are used to retrieve observed performance entries within the observer callback.

    +When the observer (callback) is invoked, the callback's parameters include a _{{domxref("PerformanceObserverEntryList","performance observer entry list")}}_ that contains only _observed_ {{domxref("PerformanceEntry","performance entries")}}. That is, the list contains entries only for the event types that were specified when the observer's {{domxref("PerformanceObserver.observe","observe()")}} method was invoked. The {{domxref("PerformanceObserverEntryList","performance observer entry list")}} interface has the same three `getEntries*()` methods as the {{domxref("Performance")}} interface. However, note there is one key difference with these methods; the {{domxref("PerformanceObserverEntryList","performance observer entry list")}} versions are used to retrieve _observed_ performance entries within the observer callback. -

    Besides the {{domxref("PerformanceObserver","PerformanceObserver's")}} interface's {{domxref("PerformanceObserver.observe","observe()")}} method (which is used to register the {{domxref("PerformanceEntry.entryType","entry types")}} to observe), the {{domxref("PerformanceObserver")}} interface also has a {{domxref("PerformanceObserver.disconnect","disconnect()")}} method that stops an observer from receiving further events.

    +Besides the {{domxref("PerformanceObserver","PerformanceObserver's")}} interface's {{domxref("PerformanceObserver.observe","observe()")}} method (which is used to register the {{domxref("PerformanceEntry.entryType","entry types")}} to _observe_), the {{domxref("PerformanceObserver")}} interface also has a {{domxref("PerformanceObserver.disconnect","disconnect()")}} method that stops an observer from receiving further events. -

    Performance observers were added to the Level 2 version of the standard and were not widely implemented.

    +> **Note:** Performance observers were added to the `Level 2` version of the standard and were not widely implemented. -

    実装状況

    +## 実装状況 -

    A summary of the interfaces' implementation status is provided below, including a link to more detailed information.

    +A summary of the interfaces' implementation status is provided below, including a link to more detailed information. - +- Performance interface extensions: As shown in the {{domxref("Performance")}} interface's [Browser Compatibility](/Web/API/Performance#Browser_compatibility) table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices. +- PerformanceEntry: As shown in the {{domxref("PerformanceEntry")}} interface's [Browser Compatibility](/Web/API/PerformanceEntry#Browser_compatibility) table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices. +- Performance Observers {{experimental_inline}}: As shown in the {{domxref("PerformanceObserver")}} interface's [Browser Compatibility](/Web/API/PerformanceObserver#Browser_compatibility) table, this interface has no shipping implementations. -

    To test your browser's support for these interfaces, run the perf-api-support application.

    +To test your browser's support for these interfaces, run the [`perf-api-support`](http://mdn.github.io/web-performance/perf-api-support.html) application. -

    あわせて参照

    +## あわせて参照 - +- [A Primer for Web Performance Timing APIs](http://siusin.github.io/perf-timing-primer/) diff --git a/files/ja/web/api/performance_timeline/using_performance_timeline/index.md b/files/ja/web/api/performance_timeline/using_performance_timeline/index.md index 4885936054b6bb..ad38ec1201d0bd 100644 --- a/files/ja/web/api/performance_timeline/using_performance_timeline/index.md +++ b/files/ja/web/api/performance_timeline/using_performance_timeline/index.md @@ -6,20 +6,21 @@ tags: - ガイド translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline --- -
    {{DefaultAPISidebar("Performance Timeline API")}}
    +{{DefaultAPISidebar("Performance Timeline API")}} -

    パフォーマンスタイムライン標準は、アプリケーション内でクライアント側の待ち時間の測定をサポートするための {{domxref("Performance")}} インターフェイスへの拡張を定義します。この規格には、特定のパフォーマンスイベントが発生したときにアプリケーションに通知することを可能にするインターフェイスも含まれています。同時に、これらのインターフェイスを使用してアプリケーションのパフォーマンスボトルネックを特定することができます。

    +**[パフォーマンスタイムライン](https://w3c.github.io/performance-timeline/)**標準は、アプリケーション内でクライアント側の待ち時間の測定をサポートするための {{domxref("Performance")}} インターフェイスへの拡張を定義します。この規格には、特定のパフォーマンスイベントが発生したときにアプリケーションに通知することを可能にするインターフェイスも含まれています。同時に、これらのインターフェイスを使用してアプリケーションのパフォーマンスボトルネックを特定することができます。 -

    Performance 拡張

    +## Performance 拡張 -

    Performance Timeline extends the {{domxref("Performance")}} object with three methods that provide different mechanisms to get a set of {{domxref("PerformanceEntry","performance records (metrics)")}}, depending on the specified filter criteria. The following example show the usage of these methods {{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}} and {{domxref("Performance.getEntriesByType","getEntriesByType()")}}.

    +**Performance Timeline** extends the {{domxref("Performance")}} object with three methods that provide different mechanisms to get a set of {{domxref("PerformanceEntry","performance records (metrics)")}}, depending on the specified filter criteria. The following example show the usage of these methods {{domxref("Performance.getEntries","getEntries()")}}, {{domxref("Performance.getEntriesByName","getEntriesByName()")}} and {{domxref("Performance.getEntriesByType","getEntriesByType()")}}. -
    function log(s) {
+```js
+function log(s) {
   var o = document.getElementsByTagName("output")[0];
-  o.innerHTML += s + " <br>";
+  o.innerHTML += s + " 
    ";
 }
 function do_work (n) {
-  for (var i=0 ; i < n; i++) {
+  for (var i=0 ; i < n; i++) {
      var m = Math.random();
   }
 }
@@ -44,39 +45,40 @@ function print_PerformanceEntries() {
 
   // Use getEntries() to iterate all entries
   var p = performance.getEntries();
-  for (var i=0; i < p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("All Entry[" + i + "]");
     print_perf_entry(p[i]);
   }
 
   // Use getEntries(name, entryType) to get specific entries
   p = performance.getEntries({name : "Measure1", entryType: "measure"});
-  for (var i=0; i < p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("Begin and Measure [" + i + "]");
     print_perf_entry(p[i]);
   }
 
   // Use getEntriesByType() to get all "mark" entries
   p = performance.getEntriesByType("mark");
-  for (var i=0; i < p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log ("Mark only [" + i + "]");
     print_perf_entry(p[i]);
   }
 
   // Use getEntriesByName() to get all "mark" entries named "Begin"
   p = performance.getEntriesByName("Begin", "mark");
-  for (var i=0; i < p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log ("Begin and Mark [" + i + "]");
     print_perf_entry(p[i]);
   }
 }
-
    +``` -

    PerformanceEntry インターフェイス

    +## PerformanceEntry インターフェイス -

    The {{domxref("PerformanceEntry")}} interface encapsulates a single performance entry i.e. a single performance metric. This interface has four properties and a JSON serializer ({{domxref("Performance.toJSON","toJSON()")}}. The following example shows the use of these properties.

    +The `{{domxref("PerformanceEntry")}}` interface encapsulates a single _performance entry_ i.e. a single performance metric. This interface has four properties and a JSON _serializer_ ({{domxref("Performance.toJSON","toJSON()")}}. The following example shows the use of these properties. -
    function print_PerformanceEntry(ev) {
+```js
+function print_PerformanceEntry(ev) {
   var properties = ["name", "entryType", "startTime", "duration"];
 
   // Create a few performance entries
@@ -86,9 +88,9 @@ function print_PerformanceEntries() {
   performance.measure("measure-1");
 
   var p = performance.getEntries();
-  for (var i=0; i < p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("PerfEntry[" + i + "]");
-    for (var j=0; j < properties.length; j++) {
+    for (var j=0; j < properties.length; j++) {
       // check each property in window.performance
       var supported = properties[j] in p[i];
       if (supported) {
@@ -100,11 +102,12 @@ function print_PerformanceEntries() {
     }
   }
 }
-
    +``` -

    This interface also includes a {{domxref("PerformanceEntry.toJSON","toJSON()")}} method that returns the serialization of the {{domxref("PerformanceEntry")}} object. The following examples show the use of this method.

    +This interface also includes a {{domxref("PerformanceEntry.toJSON","toJSON()")}} method that returns the serialization of the {{domxref("PerformanceEntry")}} object. The following examples show the use of this method. -
    function PerfEntry_toJSON() {
+```js
+function PerfEntry_toJSON() {
 
   // Create a few performance entries
   performance.mark("mark-1");
@@ -124,36 +127,37 @@ function print_PerformanceEntries() {
   var s = JSON.stringify(json);
   log("PerformanceEntry.toJSON = " + s);
 }
-
    +``` -

    Performance オブザーバー

    +## Performance オブザーバー -

    {{SeeCompatTable}}

    +{{SeeCompatTable}} -

    The performance observer interfaces allow an application to register an observer for specific performance event types, and when one of those event types is recorded, the application is notified of the event via the observer's callback function that was specified at the time, the observer was created. When the observer (callback) is invoked the callback's parameters include a {{domxref("PerformanceObserverEntryList","performance observer entry list")}} that only contains observed {{domxref("PerformanceEntry","performance entries")}}. That is, the list only contains entries for the event types that were specified when the observer's {{domxref("PerformanceObserver.observe","observe()")}} method was invoked.

    +The _performance observer_ interfaces allow an application to register an _observer_ for specific performance event types, and when one of those event types is recorded, the application is _notified_ of the event via the observer's callback function that was specified at the time, the observer was created. When the observer (callback) is invoked the callback's parameters include a _{{domxref("PerformanceObserverEntryList","performance observer entry list")}}_ that only contains _observed_ {{domxref("PerformanceEntry","performance entries")}}. That is, the list only contains entries for the event types that were specified when the observer's {{domxref("PerformanceObserver.observe","observe()")}} method was invoked. -

    The following example shows how to register two observers: the first one registers for several event types and the second observer only registers for one event type.

    +The following example shows how to register two observers: the first one registers for several event types and the second observer only registers for one event type. -
    function PerformanceObservers() {
+```js
+function PerformanceObservers() {
   // Create observer for all performance event types
   var observe_all = new PerformanceObserver(function(list, obs) {
     var perfEntries;
 
     // Print all entries
     perfEntries = list.getEntries();
-    for (var i=0; i < perfEntries.length; i++) {
+    for (var i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
 
     // Print entries named "Begin" with type "mark"
     perfEntries = list.getEntriesByName("Begin", "mark");
-    for (var i=0; i < perfEntries.length; i++) {
+    for (var i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
 
     // Print entries with type "mark"
     perfEntries = list.getEntriesByType("mark");
-    for (var i=0; i < perfEntries.length; i++) {
+    for (var i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
   });
@@ -164,7 +168,7 @@ function print_PerformanceEntries() {
   var observe_mark = new PerformanceObserver(function(list, obs) {
     var perfEntries = list.getEntries();
     // Should only have 'mark' entries
-    for (var i=0; i < perfEntries.length; i++) {
+    for (var i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
   });
@@ -177,22 +181,18 @@ function print_perf_entry(pe) {
       "; startTime: " + pe.startTime +
       "; duration: "  + pe.duration);
 }
-
    +``` -

    The {{domxref("PerformanceObserverEntryList","performance observer entry list")}} interface has the same three getEntries*() methods as the {{domxref("Performance")}} interface and these methods are used to retrieve observed performance entries within the observer callback. These methods have been used in the above stated example.

    +The {{domxref("PerformanceObserverEntryList","performance observer entry list")}} interface has the same three `getEntries*()` methods as the {{domxref("Performance")}} interface and these methods are used to retrieve _observed_ performance entries within the observer callback. These methods have been used in the above stated example. -

    仕様

    +## 仕様 -

    The interfaces described in this document are defined in the Performance Timeline standard which has two levels:

    +The interfaces described in this document are defined in the **Performance Timeline** standard which has two levels: - +- [Performance Timeline Level 2](https://w3c.github.io/performance-timeline/); Editors Draft; Work In Progress. This version introduces _performance observers_ (and the {{domxref("PerformanceObserver")}} and {{domxref("PerformanceObserverEntryList")}} interfaces). +- [Performance Timeline](http://www.w3.org/TR/performance-timeline/); W3C Recommendation 12 December 2013 -

    あわせて参照

    +## あわせて参照 - +- [Performance Timeline (Overview)](/Web/API/Performance_Timeline) +- [A Primer for Web Performance Timing APIs](http://siusin.github.io/perf-timing-primer/) diff --git a/files/ja/web/api/permissions_api/index.md b/files/ja/web/api/permissions_api/index.md index aa3b289f9df58f..ccb788b6ecc880 100644 --- a/files/ja/web/api/permissions_api/index.md +++ b/files/ja/web/api/permissions_api/index.md @@ -8,82 +8,57 @@ tags: - Reference translation_of: Web/API/Permissions_API --- -
    {{DefaultAPISidebar("Permissions API")}}
    +{{DefaultAPISidebar("Permissions API")}} -
    -

    Permissions API は、現在のコンテキストに起因する API のパーミッションの状態を照会するための一貫したプログラム方法を提供します。 例えば、Permissions API を使用して、特定の API にアクセスするためのパーミッションが付与（granted）または拒否（denied）されているかどうかを確認できます。

    -
    +**Permissions API** は、現在のコンテキストに起因する API のパーミッションの状態を照会するための一貫したプログラム方法を提供します。 例えば、Permissions API を使用して、特定の API にアクセスするためのパーミッションが付与（granted）または拒否（denied）されているかどうかを確認できます。 -

    概念と使い方

    +## 概念と使い方 -

    歴史的に異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はできません（ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。 Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。

    +歴史的に異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、[Notifications API](/ja/docs/Web/API/Notifications_API) はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、[Geolocation API](/ja/docs/Web/API/Geolocation) はできません（ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。 Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。 -

    permissions プロパティが {{domxref("Navigator")}} オブジェクトで利用可能になり、標準の閲覧コンテキストとワーカーコンテキスト（{{domxref("WorkerNavigator")}} — したがって、ワーカー内でパーミッションの確認が可能）の両方で、Permissions API 機能へのアクセスを提供する {{domxref("Permissions")}} オブジェクトを返します。

    +`permissions` プロパティが {{domxref("Navigator")}} オブジェクトで利用可能になり、標準の閲覧コンテキストとワーカーコンテキスト（{{domxref("WorkerNavigator")}} — したがって、ワーカー内でパーミッションの確認が可能）の両方で、Permissions API 機能へのアクセスを提供する {{domxref("Permissions")}} オブジェクトを返します。 -

    このオブジェクトを取得した後は、{{domxref("Permissions.query()")}} メソッドを使用して特定の API の {{domxref("PermissionStatus")}} で解決される Promise を返すなど、パーミッション関連のタスクを実行できます。

    +このオブジェクトを取得した後は、{{domxref("Permissions.query()")}} メソッドを使用して特定の API の {{domxref("PermissionStatus")}} で解決される Promise を返すなど、パーミッション関連のタスクを実行できます。 -

    Permissions API を使用してすべての API のパーミッションの状態を照会できるわけではありません。 Permissions に対応している注目すべき API は次のとおりです。

    +Permissions API を使用してすべての API のパーミッションの状態を照会できるわけではありません。 Permissions に対応している注目すべき API は次のとおりです。 - +- [Clipboard API](/ja/docs/Web/API/Clipboard_API) +- [Notifications API](/ja/docs/Web/API/Notifications_API) +- [Push API](/ja/docs/Web/API/Push_API) +- Web MIDI API -

    今後、より多くの API が Permissions API のサポートを取得する予定です。

    +今後、より多くの API が Permissions API のサポートを取得する予定です。 -

    例

    +## 例 -

    Location Finder という簡単な例を用意しました。 例をライブで実行するか、Github でソースコードを見ることができます。

    +Location Finder という簡単な例を用意しました。 [例をライブで実行する](https://chrisdavidmills.github.io/location-finder-permissions-api/)か、[Github でソースコードを見る](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)ことができます。 -

    それがどのように機能するかについてもっと読むには Permissions API の使用を見てください。

    +それがどのように機能するかについてもっと読むには [Permissions API の使用](/ja/docs/Web/API/Permissions_API/Using_the_Permissions_API)を見てください。 -

    インターフェイス

    +## インターフェイス -
    -
    {{domxref("Navigator.permissions")}} と {{domxref("WorkerNavigator.permissions")}} {{readonlyinline}}
    -
    それぞれメインコンテキストとワーカーコンテキストから {{domxref("Permissions")}} オブジェクトへのアクセスを提供します。
    -
    {{domxref("Permissions")}}
    -
    パーミッションの照会や取り消しのためのメソッドなど、コアとなる Permission API 機能を提供します。
    -
    {{domxref("PermissionStatus")}}
    -
    パーミッションの現在の状態、およびパーミッションの状態の変更に応答するためのイベントハンドラーへのアクセスを提供します。
    -
    +- {{domxref("Navigator.permissions")}} と {{domxref("WorkerNavigator.permissions")}} {{readonlyinline}} + - : それぞれメインコンテキストとワーカーコンテキストから {{domxref("Permissions")}} オブジェクトへのアクセスを提供します。 +- {{domxref("Permissions")}} + - : パーミッションの照会や取り消しのためのメソッドなど、コアとなる Permission API 機能を提供します。 +- {{domxref("PermissionStatus")}} + - : パーミッションの現在の状態、およびパーミッションの状態の変更に応答するためのイベントハンドラーへのアクセスを提供します。 -

    仕様書

    +## 仕様書 - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('Permissions API')}}{{Spec2('Permissions API')}}初期定義
    +| 仕様書 | 状態 | 備考 | +| ---------------------------------------- | ------------------------------------ | -------- | +| {{SpecName('Permissions API')}} | {{Spec2('Permissions API')}} | 初期定義 | -

    ブラウザーの互換性

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

    Permissions インターフェイス

    +### Permissions インターフェイス -
    -

    {{Compat("api.Permissions")}}

    -
    -
    +{{Compat("api.Permissions")}} -

    関連情報

    +## 関連情報 - +- [Permissions API の使用](/ja/docs/Web/API/Permissions_API/Using_the_Permissions_API) +- [Permissions API を使用して、ユーザーがカメラへのアクセスを許可または拒否する頻度を検出する](https://blog.addpipe.com/using-permissions-api-to-detect-getusermedia-responses/)（英語） +- {{DOMxRef("Notification.permission")}} +- [プライバシー、パーミッション、そして情報セキュリティ](/ja/docs/Web/Privacy) diff --git a/files/ja/web/api/permissions_api/using_the_permissions_api/index.md b/files/ja/web/api/permissions_api/using_the_permissions_api/index.md index d955c886354bcc..1ebf8e8c773617 100644 --- a/files/ja/web/api/permissions_api/using_the_permissions_api/index.md +++ b/files/ja/web/api/permissions_api/using_the_permissions_api/index.md @@ -9,54 +9,51 @@ tags: - Permissions translation_of: Web/API/Permissions_API/Using_the_Permissions_API --- -

    {{DefaultAPISidebar("Permissions API")}}{{SeeCompatTable}}

    +{{DefaultAPISidebar("Permissions API")}}{{SeeCompatTable}} -

    この記事では、W3C の Permissions API を使用するための基本的なガイドを提供します。 これは、現在のコンテキストに起因する API のパーミッションの状態を照会するためのプログラムによる方法を提供します。

    +この記事では、W3C の Permissions API を使用するための基本的なガイドを提供します。 これは、現在のコンテキストに起因する API のパーミッションの状態を照会するためのプログラムによる方法を提供します。 -

    パーミッションを求めるのが面倒...

    +## パーミッションを求めるのが面倒... -

    ウェブ上のパーミッションは必要悪であり、そしてそれらは開発者として対処するのはそれほど面白くありませんが、それに立ち向かいましょう。

    +ウェブ上のパーミッションは必要悪であり、そしてそれらは開発者として対処するのはそれほど面白くありませんが、それに立ち向かいましょう。 -

    歴史的には、異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はそうではありません（以下に示すように、ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。

    +歴史的には、異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はそうではありません（以下に示すように、ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。 -

    Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。 例えば、特定の API を使用するためのパーミッションが付与されているか拒否されているかを照会し、API を使用するためのパーミッションを具体的に要求することができます。

    +[Permissions API](/ja/docs/Web/API/Permissions_API) は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。 例えば、特定の API を使用するためのパーミッションが付与されているか拒否されているかを照会し、API を使用するためのパーミッションを具体的に要求することができます。 -

    現時点では、API の実装は初期段階にあるため、ブラウザーでのサポートは次のようにかなりむらがあります。

    +現時点では、API の実装は初期段階にあるため、ブラウザーでのサポートは次のようにかなりむらがあります。 - +- Chrome 44 以降と Firefox 43 以降でしか見つかりません。 +- 現在サポートしている唯一のメソッドは {{domxref("Permissions.query()")}} で、これはパーミッションの状態を問い合わせます。 +- Chrome の Permissions API が現在認識している API は、[Geolocation](/ja/docs/Web/API/Geolocation) と Notification の 2 つだけです。 Firefox は [Push](/ja/docs/Web/API/Push_API) と WebMIDI も認識します。 -

    時間が経つにつれて、より多くの機能が追加されます。

    +時間が経つにつれて、より多くの機能が追加されます。 -

    簡単な例

    +## 簡単な例 -

    この記事では、Location Finder という簡単なデモをまとめました。 Geolocation を使用してユーザーの現在地を照会し、それをグーグルマップに表示します。

    +この記事では、Location Finder という簡単なデモをまとめました。 Geolocation を使用してユーザーの現在地を照会し、それをグーグルマップに表示します。 -

    英国 Greenfield の地図を表示したスクリーンショット。

    +![英国 Greenfield の地図を表示したスクリーンショット。](https://mdn.mozillademos.org/files/11501/location-finder-with-permissions-api.png) -

    サンプルをライブで実行するか、Github でソースコードを見ることができます。 コードの大部分は単純で目立たないものです。 以下では Permissions API 関連のコードを見ていきますので、他の部分を調べたい場合はコードを自分で確認してください。

    +[サンプルをライブで実行する](https://chrisdavidmills.github.io/location-finder-permissions-api/)か、[Github でソースコードを見る](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)ことができます。 コードの大部分は単純で目立たないものです。 以下では Permissions API 関連のコードを見ていきますので、他の部分を調べたい場合はコードを自分で確認してください。 -

    Permissions API へのアクセス

    +### Permissions API へのアクセス -

    グローバルな {{domxref("Permissions")}} オブジェクトへのアクセスを許可するために、{{domxref("Navigator.permissions")}} プロパティがブラウザーに追加されました。 現在、このオブジェクトには {{domxref("Permissions.query()")}} しか含まれていませんが、最終的にはパーミッションの照会、要求、および取り消しのためのメソッドが含まれます。 下記参照。

    +グローバルな {{domxref("Permissions")}} オブジェクトへのアクセスを許可するために、{{domxref("Navigator.permissions")}} プロパティがブラウザーに追加されました。 現在、このオブジェクトには {{domxref("Permissions.query()")}} しか含まれていませんが、最終的にはパーミッションの照会、要求、および取り消しのためのメソッドが含まれます。 下記参照。 -

    パーミッションの状態の照会

    +### パーミッションの状態の照会 -

    この例では、Permissions 機能は handlePermission() という1つの関数によって処理されます。 これは、{{domxref("Permissions.query()")}} を使用してパーミッションの状態を照会することから始まります。 Promise が解決されたときに返される {{domxref("PermissionStatus")}} オブジェクトの {{domxref("PermissionStatus.state", "state")}} プロパティの値に応じて、次のように反応は異なります。

    +この例では、Permissions 機能は `handlePermission()` という 1 つの関数によって処理されます。 これは、{{domxref("Permissions.query()")}} を使用してパーミッションの状態を照会することから始まります。 Promise が解決されたときに返される {{domxref("PermissionStatus")}} オブジェクトの {{domxref("PermissionStatus.state", "state")}} プロパティの値に応じて、次のように反応は異なります。 -
    -
    "granted"（付与）
    -
    [Geolocation を有効にする（Enable Geolocation）] ボタンは非表示です。 これは、Geolocation がすでにアクティブになっている場合は必要ないためです。
    -
    "prompt"（プロンプト）
    -
    [Geolocation を有効にする] ボタンは非表示です。 これは、ユーザーに Geolocation のパーミッションを付与するように求めるプロンプトが表示される場合は必要ないためです。 {{domxref("Geolocation.getCurrentPosition()")}} 関数を実行し、ユーザーにパーミッションを求めるプロンプトを表示します。 それは、パーミッションが付与されている場合、revealPosition() 関数を実行し（地図を表示します）、パーミッションが拒否されている場合、positionDenied() 関数を実行します（[Geolocation を有効にする] ボタンを表示します）。
    -
    "denied"（拒否）
    -
    [Geolocation を有効にする] ボタンを表示します（ページが最初に読み込まれたときに、パーミッションの状態がこのオリジンに対して既に拒否に設定されている場合も、このコードにくる必要があります）。
    -
    +- `"granted"`（付与） + - : \[Geolocation を有効にする（Enable Geolocation）] ボタンは非表示です。 これは、Geolocation がすでにアクティブになっている場合は必要ないためです。 +- `"prompt"`（プロンプト） + - : \[Geolocation を有効にする] ボタンは非表示です。 これは、ユーザーに Geolocation のパーミッションを付与するように求めるプロンプトが表示される場合は必要ないためです。 {{domxref("Geolocation.getCurrentPosition()")}} 関数を実行し、ユーザーにパーミッションを求めるプロンプトを表示します。 それは、パーミッションが付与されている場合、`revealPosition()` 関数を実行し（地図を表示します）、パーミッションが拒否されている場合、`positionDenied()` 関数を実行します（\[Geolocation を有効にする] ボタンを表示します）。 +- `"denied"`（拒否） + - : \[Geolocation を有効にする] ボタンを表示します（ページが最初に読み込まれたときに、パーミッションの状態がこのオリジンに対して既に拒否に設定されている場合も、このコードにくる必要があります）。 -
    function handlePermission() {
+```js
+function handlePermission() {
   navigator.permissions.query({name:'geolocation'}).then(function(result) {
     if (result.state == 'granted') {
       report(result.state);
@@ -79,17 +76,19 @@ function report(state) {
   console.log('Permission ' + state);
 }
 
-handlePermission();
    +handlePermission(); +``` -

    パーミッション記述子

    +### パーミッション記述子 -

    {{domxref("Permissions.query()")}} メソッドはパラメータとして PermissionDescriptor ディクショナリを取ります — これはあなたが興味を持っている API の名前を含みます。 いくつかの API は、デフォルトの PermissionDescriptor から継承した、追加情報を含んだ、より複雑な PermissionDescriptor を持っています。 例えば、PushPermissionDescriptor には、userVisibleOnly が true か false かを指定する Boolean も含める必要があります。

    +{{domxref("Permissions.query()")}} メソッドはパラメータとして `PermissionDescriptor` ディクショナリを取ります — これはあなたが興味を持っている API の名前を含みます。 いくつかの API は、デフォルトの `PermissionDescriptor` から継承した、追加情報を含んだ、より複雑な `PermissionDescriptor` を持っています。 例えば、`PushPermissionDescriptor` には、[`userVisibleOnly`](/ja/docs/Web/API/PushManager/subscribe#Parameters) が `true` か `false` かを指定する Boolean も含める必要があります。 -

    パーミッションの取り消し

    +### パーミッションの取り消し -

    Firefox 47 以降、{{domxref("Permissions.revoke()")}} メソッドを使用して既存のパーミッションを取り消すことができるようになりました。 これは {{domxref("Permissions.query()")}} メソッドとまったく同じように機能しますが、Promise が正常に解決されると、既存のパーミッションがデフォルトの状態（通常は prompt）に戻される点が異なります。 デモで次のコードを見てください。

    +Firefox 47 以降、{{domxref("Permissions.revoke()")}} メソッドを使用して既存のパーミッションを取り消すことができるようになりました。 これは {{domxref("Permissions.query()")}} メソッドとまったく同じように機能しますが、Promise が正常に解決されると、既存のパーミッションがデフォルトの状態（通常は `prompt`）に戻される点が異なります。 デモで次のコードを見てください。 -
    var revokeBtn = document.querySelector('.revoke');
+```js
+var revokeBtn = document.querySelector('.revoke');
 
   ...
 
@@ -103,23 +102,20 @@ function revokePermission() {
   navigator.permissions.revoke({name:'geolocation'}).then(function(result) {
     report(result.state);
   });
-}
    +} +``` -
    -

    Firefox 51 以降、Web Applications Security Working Group で設計が問題になっているため、revoke() 関数はデフォルトで無効になっています。 設定 dom.permissions.revoke.enable を true に設定することで再度有効にすることができます。

    -
    +> **Note:** Firefox 51 以降、[Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) で設計が問題になっているため、`revoke()` 関数はデフォルトで無効になっています。 設定 `dom.permissions.revoke.enable` を `true` に設定することで再度有効にすることができます。 -

    パーミッションの状態の変更への対応

    +### パーミッションの状態の変更への対応 -

    上記のコードには、{{domxref("PermissionStatus")}} オブジェクトにアタッチされた onchange イベントハンドラがあることに気付くでしょう。 これにより、関心のある API のパーミッションの状態の変更に対応できるようになります。 現時点では、状態の変化を報告しているだけです。

    +上記のコードには、{{domxref("PermissionStatus")}} オブジェクトにアタッチされた `onchange` イベントハンドラがあることに気付くでしょう。 これにより、関心のある API のパーミッションの状態の変更に対応できるようになります。 現時点では、状態の変化を報告しているだけです。 -

    まとめと今後の課題

    +## まとめと今後の課題 -

    現時点では、これは私たちがすでに持っていたもの以上のものを提供するものではありません。 パーミッションのプロンプトから位置を決して共有しないことを選択した場合（パーミッションを拒否した場合）、ブラウザーのメニューオプションを使用しないとパーミッションのプロンプトに戻ることはできません。

    +現時点では、これは私たちがすでに持っていたもの以上のものを提供するものではありません。 パーミッションのプロンプトから位置を決して共有しないことを選択した場合（パーミッションを拒否した場合）、ブラウザーのメニューオプションを使用しないとパーミッションのプロンプトに戻ることはできません。 - +- **Firefox**: \[ツール] > \[ページの情報] > \[サイト別設定] の順にクリックします。 \[位置情報の送信] で \[標準設定を使用する] をチェックします。 +- **Chrome**: \[ハンバーガーメニュー] > \[設定] > \[詳細設定] の順にクリックします。 \[プライバシーとセキュリティ] セクションで \[サイトの設定] をクリックします。 表示されたダイアログで、\[位置情報] セクションを探し、\[アクセスする前に確認する] を選択します。 最後に、\[すべてのサイトに保存されている権限とデータを表示する] をクリックして、関心のあるサイトに付与されているパーミッションを削除します。 -

    しかしながら、ブラウザー機能への将来の追加は request() メソッドを提供するべきです、それは私たちが好きなときにいつでもプログラム的にパーミッションを要求することを可能にするでしょう。 うまくいけばこれらはすぐに利用可能になるはずです。

    +しかしながら、ブラウザー機能への将来の追加は `request()` メソッドを提供するべきです、それは私たちが好きなときにいつでもプログラム的にパーミッションを要求することを可能にするでしょう。 うまくいけばこれらはすぐに利用可能になるはずです。 diff --git a/files/ja/web/api/resource_timing_api/index.md b/files/ja/web/api/resource_timing_api/index.md index 6e329878f9a20d..d31d513119de5a 100644 --- a/files/ja/web/api/resource_timing_api/index.md +++ b/files/ja/web/api/resource_timing_api/index.md @@ -3,68 +3,64 @@ title: Resource Timing API slug: Web/API/Resource_Timing_API translation_of: Web/API/Resource_Timing_API --- -
    {{DefaultAPISidebar("Resource Timing API")}}
    +{{DefaultAPISidebar("Resource Timing API")}} -

    Resource Timing インターフェイスは、アプリケーションのリソースのロードに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、たとえば、{{domxref("XMLHttpRequest")}}、{{SVGElement("SVG","SVG element")}}、画像、スクリプトなど特定のリソースをロードするのにかかる時間を決定できます。

    +**`Resource Timing`** インターフェイスは、アプリケーションの*リソース*のロードに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、たとえば、{{domxref("XMLHttpRequest")}}、{{SVGElement("SVG","SVG element")}}、画像、スクリプトなど特定のリソースをロードするのにかかる時間を決定できます。 -

    インターフェイスのプロパティは、リダイレクトの開始時間と終了時間、DNS ルックアップの開始時間と終了時間、リクエストの開始時間、レスポンスの開始時間と終了時間などネットワークイベントに対して {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} のリソースロードタイムラインを作成します。このインタフェースには、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供するその他のプロパティも含まれています。

    +インターフェイスのプロパティは、リダイレクトの開始時間と終了時間、DNS ルックアップの開始時間と終了時間、リクエストの開始時間、レスポンスの開始時間と終了時間などネットワークイベントに対して {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} のリソースロードタイムラインを作成します。このインタフェースには、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供するその他のプロパティも含まれています。 -

    このドキュメントでは、Resource Timing インターフェイスの概要を説明します。例を含むインターフェイスの詳細については、各インターフェイスのリファレンスページ、リソースタイミング API の使用、および あわせて参照 セクションの参照を参照してください。リソースタイミング処理モデルのグラフィック表示については、リソースタイミングフェーズの図を参照してください。

    +このドキュメントでは、`Resource Timing` インターフェイスの概要を説明します。例を含むインターフェイスの詳細については、各インターフェイスのリファレンスページ、[リソースタイミング API の使用](/ja/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API)、および [あわせて参照](#あわせて参照) セクションの参照を参照してください。リソースタイミング処理モデルのグラフィック表示については、[リソースタイミングフェーズ](https://w3c.github.io/resource-timing/#process)の図を参照してください。 -

    The PerformanceResourceTiming interface extends the {{domxref("PerformanceEntry")}} for {{domxref("PerformanceEntry","performance entries", "", 1)}} which have an {{domxref("PerformanceEntry.entryType","entryType")}} of "resource".

    +> **Note:** The `PerformanceResourceTiming` interface extends the {{domxref("PerformanceEntry")}} for {{domxref("PerformanceEntry","performance entries", "", 1)}} which have an {{domxref("PerformanceEntry.entryType","entryType")}} of "`resource`". -

    High-resolution タイムスタンプ

    +## High-resolution タイムスタンプ -

    Several of the Resource Timing properties return high-resolution timestamps. These timestamps have a {{domxref("DOMHighResTimeStamp")}} type and as its name implies, they represent a high-resolution point in time. This type is a double and its value is a discrete point in time or the difference in time between two discrete points in time.

    +Several of the `Resource Timing` properties return _high-resolution timestamps_. These timestamps have a `{{domxref("DOMHighResTimeStamp")}}` type and as its name implies, they represent a high-resolution point in time. This type is a `double` and its value is a discrete point in time or the difference in time between two discrete points in time. -

    The unit of DOMHighResTimeStamp is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond.

    +The unit of `DOMHighResTimeStamp` is milliseconds and should be accurate to 5 µs (microseconds). However, If the browser is unable to provide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the browser can represent a the value as a time in milliseconds accurate to a millisecond. -

    リソースロードタイムスタンプ

    +## リソースロードタイムスタンプ -

    An application can get timestamps for the various stages used to load a resource. The first property in the processing model is {{domxref("PerformanceEntry.startTime","startTime")}} which returns the timestamp immediately before the resource loading process begins. The {{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} timestamps follows and redirect processing (if applicable) and preceeds DNS lookup. The next stages are {{domxref('PerformanceResourceTiming.connectStart','connectStart')}} and {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} which are the timestamps immediately before and after connecting to the server, respectively. The last three timestamps are, in order: {{domxref('PerformanceResourceTiming.requestStart','requestStart')}} - the timestamp before the browser starts requesting the resource from the server; {{domxref('PerformanceResourceTiming.responseStart','responseStart')}} - the timestamp after the browser receives the first byte of the response from the server; and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}} - the timestamp after the browser receives the last byte of the resource. If the resource is loaded via a secure connection a {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} timestamp will be available between the connection start and end events.

    +An application can get timestamps for the various stages used to load a resource. The first property in the processing model is {{domxref("PerformanceEntry.startTime","startTime")}} which returns the timestamp immediately before the resource loading process begins. The {{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} timestamps follows and redirect processing (if applicable) and preceeds DNS lookup. The next stages are {{domxref('PerformanceResourceTiming.connectStart','connectStart')}} and {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}} which are the timestamps immediately before and after connecting to the server, respectively. The last three timestamps are, in order: {{domxref('PerformanceResourceTiming.requestStart','requestStart')}} - the timestamp before the browser starts requesting the resource from the server; {{domxref('PerformanceResourceTiming.responseStart','responseStart')}} - the timestamp after the browser receives the first byte of the response from the server; and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}} - the timestamp after the browser receives the last byte of the resource. If the resource is loaded via a secure connection a {{domxref('PerformanceResourceTiming.secureConnectionStart','secureConnectionStart')}} timestamp will be available between the connection start and end events. -
    -

    When {{Glossary("CORS")}} is in effect, many of these values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the Timing-Allow-Origin HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.

    +> **Note:** When {{Glossary("CORS")}} is in effect, many of these values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the `Timing-Allow-Origin` HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values. +> +> The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: `redirectStart`, `redirectEnd`, `domainLookupStart`, `domainLookupEnd`, `connectStart`, `connectEnd`, `secureConnectionStart`, `requestStart`, and `responseStart`. -

    The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, and responseStart.

    -
    +The `{{domxref("PerformanceResourceTiming")}}` interface also includes several network timing properties. The {{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for redirect start and end times, respectively. Likewise, the The {{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for DNS lookup start and end times, respectively. -

    The {{domxref("PerformanceResourceTiming")}} interface also includes several network timing properties. The {{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for redirect start and end times, respectively. Likewise, the The {{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}} properties return {{domxref("DOMHighResTimeStamp","timestamps")}} for DNS lookup start and end times, respectively.

    +_This would be a nice place to have a diagram showing the relationships between these segments of the resource loading time._ -

    This would be a nice place to have a diagram showing the relationships between these segments of the resource loading time.

    +## リソースサイズ -

    リソースサイズ

    +The {{domxref("PerformanceResourceTiming")}} interface has three properties that can be used to obtain size data about a resource. The {{domxref('PerformanceResourceTiming.transferSize','transferSize')}} property returns the size (in octets) of the fetched resource including the response header fields plus the response payload body. -

    The {{domxref("PerformanceResourceTiming")}} interface has three properties that can be used to obtain size data about a resource. The {{domxref('PerformanceResourceTiming.transferSize','transferSize')}} property returns the size (in octets) of the fetched resource including the response header fields plus the response payload body.

    +The {{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} property returns the size (in octets) received from the fetch (HTTP or cache), of the _payload body_, **before** removing any applied content-codings. {{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} returns the size (in octets) received from the fetch (HTTP or cache) of the _message body_, **after** removing any applied content-codings. -

    The {{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} property returns the size (in octets) received from the fetch (HTTP or cache), of the payload body, before removing any applied content-codings. {{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} returns the size (in octets) received from the fetch (HTTP or cache) of the message body, after removing any applied content-codings.

    +## その他のプロパティ -

    その他のプロパティ

    +The {{domxref('PerformanceResourceTiming.nextHopProtocol','nextHopProtocol')}} property returns the _network protocol_ used to fetch the resource. -

    The {{domxref('PerformanceResourceTiming.nextHopProtocol','nextHopProtocol')}} property returns the network protocol used to fetch the resource.

    +The {{domxref('PerformanceResourceTiming.initiatorType','initiatorType')}} property returns the _type_ of resource that initiated the performance entry such as "`css`" for a CSS resource, "`xmlhttprequest`" for an XMLHttpRequest and "`img`" for an image (such as a JPEG). -

    The {{domxref('PerformanceResourceTiming.initiatorType','initiatorType')}} property returns the type of resource that initiated the performance entry such as "css" for a CSS resource, "xmlhttprequest" for an XMLHttpRequest and "img" for an image (such as a JPEG).

    +If the current context is a {{domxref("Worker","worker")}}, the {{domxref('PerformanceResourceTiming.workerStart','workerStart')}} property can be used to obtain a {{domxref("DOMHighResTimeStamp")}} when the worker was started. -

    If the current context is a {{domxref("Worker","worker")}}, the {{domxref('PerformanceResourceTiming.workerStart','workerStart')}} property can be used to obtain a {{domxref("DOMHighResTimeStamp")}} when the worker was started.

    +## メソッド -

    メソッド

    +The Resource Timing API includes two methods that extend the {{domxref("Performance")}} interface. The {{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} method removes all "`resource`" type performance entries from the browser's _resource_ performance entry buffer. The {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} method sets the resource performance entry buffer size to the specified number of resource {{domxref("PerformanceEntry","performance entries")}}. -

    The Resource Timing API includes two methods that extend the {{domxref("Performance")}} interface. The {{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} method removes all "resource" type performance entries from the browser's resource performance entry buffer. The {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} method sets the resource performance entry buffer size to the specified number of resource {{domxref("PerformanceEntry","performance entries")}}.

    +The {{domxref("PerformanceResourceTiming")}} interface's {{domxref("PerformanceResourceTiming.toJSON","toJSON()")}} method returns a JSON serialization of a "`resource`" type {{domxref("PerformanceEntry","performance entry")}}. -

    The {{domxref("PerformanceResourceTiming")}} interface's {{domxref("PerformanceResourceTiming.toJSON","toJSON()")}} method returns a JSON serialization of a "resource" type {{domxref("PerformanceEntry","performance entry")}}.

    +## 実装状況 -

    実装状況

    +As shown in the {{domxref("PerformanceResourceTiming")}} interface's [Browser Compatibility](/Web/API/PerformanceResourceTiming#Browser_compatibility) table, most of these interfaces are broadly implemented by desktop browsers. However, note that some properties have little to no implementation so see each property's "Browser compatibility" section for more specific interoperability data. -

    As shown in the {{domxref("PerformanceResourceTiming")}} interface's Browser Compatibility table, most of these interfaces are broadly implemented by desktop browsers. However, note that some properties have little to no implementation so see each property's "Browser compatibility" section for more specific interoperability data.

    +To test your browser's support for these interfaces, run the [`perf-api-support`](https://mdn.github.io/dom-examples/performance-apis/perf-api-support.html) application. -

    To test your browser's support for these interfaces, run the perf-api-support application.

    +## あわせて参照 -

    あわせて参照

    - - +- [Resource Timing Standard](https://w3c.github.io/resource-timing/); W3C Editor's Draft +- [CanIUse data](http://caniuse.com/#search=resource-timing) +- [Resource Timing practical tips](http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/); Steve Souders; 2014 August 21 +- [Measuring network performance with Resource Timing API](http://googledevelopers.blogspot.ca/2013/12/measuring-network-performance-with.html); Ilya Grigorik; 2013 December 11 +- [A Primer for Web Performance Timing APIs](http://siusin.github.io/perf-timing-primer/); Xiaoqian Wu; W3C Editor's Draft diff --git a/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.md b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.md index 0b2127ec1eb985..748ded945e4df2 100644 --- a/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.md +++ b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.md @@ -12,30 +12,31 @@ tags: - リソースタイミング API translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API --- -
    {{DefaultAPISidebar("Resource Timing API")}}
    +{{DefaultAPISidebar("Resource Timing API")}} -

    Resource Timing API は、アプリケーションのリソースのロードに関する詳細なネットワークタイミングデータを取得して分析する方法を提供します。アプリケーションはタイミングメトリックを使用して、たとえば、{{domxref("XMLHttpRequest")}}、{{SVGElement("SVG","SVG element")}}、画像、スクリプトなど特定のリソースを取得するのにかかる時間を判断できます。

    +**Resource Timing API** は、アプリケーションのリソースのロードに関する詳細なネットワークタイミングデータを取得して分析する方法を提供します。アプリケーションはタイミングメトリックを使用して、たとえば、{{domxref("XMLHttpRequest")}}、{{SVGElement("SVG","SVG element")}}、画像、スクリプトなど特定のリソースを取得するのにかかる時間を判断できます。 -

    The interface's properties create a resource loading timeline with {{domxref("DOMHighResTimeStamp","high-resolution timestamps")}} for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, etc. The interface also includes other properties that provide data about the size of the fetched resource as well as the type of resource that initiated the fetch.

    +The interface's properties create a _resource loading timeline_ with {{domxref("DOMHighResTimeStamp","high-resolution timestamps")}} for network events such as redirect start and end times, fetch start, DNS lookup start and end times, response start and end times, etc. The interface also includes other properties that provide data about the size of the fetched resource as well as the _type_ of resource that initiated the fetch. -

    This document shows the use of Resource Timing interfaces. For more details about the interfaces, including examples, see each interface's reference page and the references in the See also section.

    +This document shows the use of Resource Timing interfaces. For more details about the interfaces, including examples, see each interface's reference page and the references in the [See also](#see_also) section. -

    A live version of the examples is available on Github, as is the source code. Pull requests and bug reports are welcome.

    +A _live_ version of the examples is available on [Github](https://mdn.github.io/dom-examples/performance-apis/Using_the_Resource_Timing_API.html), as is the [source code](https://github.com/mdn/dom-examples/blob/master/performance-apis/Using_the_Resource_Timing_API.html). Pull requests and [bug reports](https://github.com/mdn/dom-examples/issues) are welcome. -

    Resource loading phases

    +## Resource loading phases -

    An application can get timestamps for the various phases of resource loading such as redirection, DNS lookup, and TCP connection setup. Those phases and their property names are illustrated in Figure 1.

    +An application can get timestamps for the various phases of resource loading such as redirection, DNS lookup, and TCP connection setup. Those phases and their property names are illustrated in Figure 1. -

    Graphic of Resource Timing timestamps
    - Figure 1. Resource timing properties

    +![Graphic of Resource Timing timestamps](https://mdn.mozillademos.org/files/12093/ResourceTiming-TimeStamps.jpg) +Figure 1. Resource timing properties -

    An application developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues.

    +An application developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues. -

    Timing resource loading phases

    +## Timing resource loading phases -

    The following example illustrates using the resource timing properties to calculate the amount of time the following phases take: redirection ({{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} ), DNS lookup ({{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}}), TCP handshake ({{domxref('PerformanceResourceTiming.connectStart','connectStart')}} and {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}}), and response ({{domxref('PerformanceResourceTiming.responseStart','responseStart')}} and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}). This example also calculates the time from the start of the fetch and request start phases ({{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} and {{domxref("PerformanceResourceTiming.requestStart","requestStart")}}, respectively), until the response has ended ({{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}). This timing data provides a detailed profile of the resource loading phases and this data can be used to help identify performance bottlenecks.

    +The following example illustrates using the resource timing properties to calculate the amount of time the following phases take: redirection ({{domxref("PerformanceResourceTiming.redirectStart","redirectStart")}} and {{domxref("PerformanceResourceTiming.redirectEnd","redirectEnd")}} ), DNS lookup ({{domxref("PerformanceResourceTiming.domainLookupStart","domainLookupStart")}} and {{domxref("PerformanceResourceTiming.domainLookupEnd","domainLookupEnd")}}), TCP handshake ({{domxref('PerformanceResourceTiming.connectStart','connectStart')}} and {{domxref('PerformanceResourceTiming.connectEnd','connectEnd')}}), and response ({{domxref('PerformanceResourceTiming.responseStart','responseStart')}} and {{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}). This example also calculates the time from the start of the fetch and request start phases ({{domxref("PerformanceResourceTiming.fetchStart","fetchStart")}} and {{domxref("PerformanceResourceTiming.requestStart","requestStart")}}, respectively), until the response has ended ({{domxref('PerformanceResourceTiming.responseEnd','responseEnd')}}). This timing data provides a detailed profile of the resource loading phases and this data can be used to help identify performance bottlenecks. -
    function calculate_load_times() {
+```js
+function calculate_load_times() {
   // Check performance support
   if (performance === undefined) {
     console.log("= Calculate Load Times: performance NOT supported");
@@ -44,13 +45,13 @@ translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
 
   // Get a list of "resource" performance entries
   var resources = performance.getEntriesByType("resource");
-  if (resources === undefined || resources.length <= 0) {
+  if (resources === undefined || resources.length <= 0) {
     console.log("= Calculate Load Times: there are NO `resource` performance records");
     return;
   }
 
   console.log("= Calculate Load Times");
-  for (var i=0; i < resources.length; i++) {
+  for (var i=0; i < resources.length; i++) {
     console.log("== Resource[" + i + "] - " + resources[i].name);
     // Redirect time
     var t = resources[i].redirectEnd - resources[i].redirectStart;
@@ -65,7 +66,7 @@ translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
     console.log("... TCP time = " + t);
 
     // Secure connection time
-    t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
+    t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
     console.log("... Secure connection time = " + t);
 
     // Response time
@@ -73,27 +74,28 @@ translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
     console.log("... Response time = " + t);
 
     // Fetch until response end
-    t = (resources[i].fetchStart > 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";
+    t = (resources[i].fetchStart > 0) ? (resources[i].responseEnd - resources[i].fetchStart) : "0";
     console.log("... Fetch until response end time = " + t);
 
     // Request start until reponse end
-    t = (resources[i].requestStart > 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";
+    t = (resources[i].requestStart > 0) ? (resources[i].responseEnd - resources[i].requestStart) : "0";
     console.log("... Request start until response end time = " + t);
 
     // Start until reponse end
-    t = (resources[i].startTime > 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";
+    t = (resources[i].startTime > 0) ? (resources[i].responseEnd - resources[i].startTime) : "0";
     console.log("... Start until response end time = " + t);
   }
 }
-
    +``` -

    Size matters?

    +## Size matters? -

    アプリケーションのリソースのサイズはアプリケーションのパフォーマンスに影響を与える可能性があるため、リソースサイズに関する正確なデータを取得することが重要になる可能性があります（特に非ホストリソースの場合）。{{domxref("PerformanceResourceTiming")}} インターフェースには、リソースに関するサイズデータを取得するために使用できる3つのプロパティがあります。 {{domxref('PerformanceResourceTiming.transferSize','transferSize')}} プロパティは、レスポンスヘッダフィールドとレスポンスペイロードボディを含む、取得したリソースのサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} プロパティは、適用されたコンテンツコーディングを削除する前に、フェッチ（HTTPまたはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} は、適用されたコンテンツコーディングを削除した後、メッセージ本文のフェッチ（HTTPまたはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。

    +アプリケーションのリソースのサイズはアプリケーションのパフォーマンスに影響を与える可能性があるため、リソースサイズに関する正確なデータを取得することが重要になる可能性があります（特に非ホストリソースの場合）。{{domxref("PerformanceResourceTiming")}} インターフェースには、リソースに関するサイズデータを取得するために使用できる 3 つのプロパティがあります。 {{domxref('PerformanceResourceTiming.transferSize','transferSize')}} プロパティは、レスポンスヘッダフィールドとレスポンスペイロードボディを含む、取得したリソースのサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} プロパティは、適用されたコンテンツコーディングを削除する前に、フェッチ（HTTP またはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} は、適用されたコンテンツコーディングを削除した後、メッセージ本文のフェッチ（HTTP またはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。 -

    次の例は、これら3つのプロパティの使い方を示しています。

    +次の例は、これら 3 つのプロパティの使い方を示しています。 -
    function display_size_data(){
+```js
+function display_size_data(){
   // Check for support of the PerformanceResourceTiming.*size properties and print their values
   // if supported.
   if (performance === undefined) {
@@ -109,7 +111,7 @@ translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
 
   // For each "resource", display its *Size property values
   console.log("= Display Size Data");
-  for (var i=0; i < list.length; i++) {
+  for (var i=0; i < list.length; i++) {
     console.log("== Resource[" + i + "] - " + list[i].name);
     if ("decodedBodySize" in list[i])
       console.log("... decodedBodySize[" + i + "] = " + list[i].decodedBodySize);
@@ -127,17 +129,16 @@ translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
       console.log("... transferSize[" + i + "] = NOT supported");
   }
 }
-
    +``` -

    Managing the resource buffer

    +## Managing the resource buffer -

    ブラウザは、リソースタイミングバッファ内で少なくとも150のリソースタイミングパフォーマンスエントリをサポートする必要がありますが、アプリケーションによっては、その制限を超えるリソースを使用することがあります。開発者がバッファサイズを管理しやすくするために、Resource Timingは{{domxref("Performance")}}インターフェースを拡張する2つのメソッドを定義します。{{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} メソッドは、ブラウザのリソースパフォーマンスエントリバッファからすべての "リソース"タイプのパフォーマンスエントリを削除します。 {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} メソッドは、リソースパフォーマンスエントリのバッファサイズを、指定された数のリソースに設定します{{domxref("PerformanceEntry","performance entries")}}.。

    +ブラウザは、リソースタイミングバッファ内で少なくとも 150 のリソースタイミングパフォーマンスエントリをサポートする必要がありますが、アプリケーションによっては、その制限を超えるリソースを使用することがあります。開発者がバッファサイズを管理しやすくするために、Resource Timing は{{domxref("Performance")}}インターフェースを拡張する 2 つのメソッドを定義します。{{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} メソッドは、ブラウザのリソースパフォーマンスエントリバッファからすべての "リソース"タイプのパフォーマンスエントリを削除します。 {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} メソッドは、リソースパフォーマンスエントリのバッファサイズを、指定された数のリソースに設定します{{domxref("PerformanceEntry","performance entries")}}.。 +次の例は、これら 2 つの方法の使用方法を示しています。 - -

    次の例は、これら2つの方法の使用方法を示しています。

    - -
    function clear_resource_timings() {
+```js
+function clear_resource_timings() {
   if (performance === undefined) {
     console.log("= performance.clearResourceTimings(): peformance NOT supported");
     return;
@@ -175,11 +176,12 @@ function set_resource_timing_buffer_size(n) {
     console.log("... Performance.setResourceTimingBufferSize() = NOT supported");
   }
 }
-
    +``` -

    The {{domxref("Performance")}} interface has a {{domxref("Performance.onresourcetimingbufferfull","onresourcetimingbufferfull")}} event handler that gets called (with an {{domxref("Event")}} of type {{domxref("Event.type")}} of "{{event("resourcetimingbufferfull")}}") when the browser's resource performance entry buffer is full. The following code example sets a {{domxref("Performance.onresourcetimingbufferfull","onresourcetimingbufferfull")}} event callback in the init() function.

    +The {{domxref("Performance")}} interface has a {{domxref("Performance.onresourcetimingbufferfull","onresourcetimingbufferfull")}} event handler that gets called (with an {{domxref("Event")}} of type {{domxref("Event.type")}} of "{{event("resourcetimingbufferfull")}}") when the browser's resource performance entry buffer is full. The following code example sets a {{domxref("Performance.onresourcetimingbufferfull","onresourcetimingbufferfull")}} event callback in the `init()` function. -
    function buffer_full(event) {
+```js
+function buffer_full(event) {
   console.log("WARNING: Resource Timing Buffer is FULL!");
   set_resource_timing_buffer_size(200);
 }
@@ -194,21 +196,17 @@ function init() {
   // Set a callback if the resource buffer becomes filled
   performance.onresourcetimingbufferfull = buffer_full;
 }
-
    +``` -

    Coping with CORS

    +## Coping with CORS -

    When {{Glossary("CORS")}} is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the {{httpheader("Timing-Allow-Origin")}} HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.

    +When {{Glossary("CORS")}} is in effect, many of the timing properties' values are returned as zero unless the server's access policy permits these values to be shared. This requires the server providing the resource to send the {{httpheader("Timing-Allow-Origin")}} HTTP response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values. -
    -

    The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, and responseStart.

    -
    +> **Note:** The properties which are returned as 0 by default when loading a resource from a domain other than the one of the web page itself: `redirectStart`, `redirectEnd`, `domainLookupStart`, `domainLookupEnd`, `connectStart`, `connectEnd`, `secureConnectionStart`, `requestStart`, and `responseStart`. -

    あわせて参照

    +## あわせて参照 - +- [Firefox Performance Tool](/ja/docs/Tools/Performance) +- [Resource Timing Standard](https://w3c.github.io/resource-timing/); W3C Editor's Draft +- [Resource Timing practical tips](http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/); Steve Souders; 2014 August 21 +- [Measuring network performance with Resource Timing API](http://googledevelopers.blogspot.ca/2013/12/measuring-network-performance-with.html); Ilya Grigorik; 2013 December 11 diff --git a/files/ja/web/api/sharedworker/index.md b/files/ja/web/api/sharedworker/index.md index 2e1b89b3cba0a7..45de7d1c5ed06c 100644 --- a/files/ja/web/api/sharedworker/index.md +++ b/files/ja/web/api/sharedworker/index.md @@ -3,52 +3,50 @@ title: SharedWorker slug: Web/API/SharedWorker translation_of: Web/API/SharedWorker --- -
    {{APIRef("Web Workers API")}}
    +{{APIRef("Web Workers API")}} -

    SharedWorker インターフェースは複数のブラウザコンテキストからアクセス可能な Worker を提供します。複数のブラウザコンテキストとは、複数のウィンドウや iframe、Worker などを指します。Dedicated Worker とは異なるインタフェースと、異なるグローバルスコープを持ちます。スコープに関しては {{domxref("SharedWorkerGlobalScope")}} を参照してください。

    +**`SharedWorker`** インターフェースは複数のブラウザコンテキストからアクセス可能な Worker を提供します。複数のブラウザコンテキストとは、複数のウィンドウや iframe、Worker などを指します。Dedicated Worker とは異なるインタフェースと、異なるグローバルスコープを持ちます。スコープに関しては {{domxref("SharedWorkerGlobalScope")}} を参照してください。 -
    -

    付記：同じオリジン、つまりプロトコル、ホスト名、ポートが全て同じ場合にのみ、SharedWorker は異なるブラウザコンテキスト間で共有されます。

    -
    +> **Note:** **付記：**同じオリジン、つまりプロトコル、ホスト名、ポートが全て同じ場合にのみ、SharedWorker は異なるブラウザコンテキスト間で共有されます。 -

    コンストラクタ

    +## コンストラクタ -
    -
    {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
    -
    指定された URL のスクリプトを実行する SharedWorker を作成します。
    -
    +- {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} + - : 指定された URL のスクリプトを実行する SharedWorker を作成します。 -

    プロパティ

    +## プロパティ -

    {{domxref("EventTarget")}} のプロパティを継承し、 {{domxref("AbstractWorker")}} で定義されるプロパティを実装しています。

    +_{{domxref("EventTarget")}} のプロパティを継承し、 {{domxref("AbstractWorker")}} で定義されるプロパティを実装しています。_ -
    -
    {{domxref("AbstractWorker.onerror")}}
    -
    type error である {{domxref("ErrorEvent")}} がバブリングした時に呼ばれる {{domxref("EventListener")}}
    -
    {{domxref("SharedWorker.port")}} {{readonlyInline}}
    -
    通信とコントロールに利用される {{domxref("MessagePort")}} オブジェクトを返します。
    -
    +- {{domxref("AbstractWorker.onerror")}} + - : type `error` である {{domxref("ErrorEvent")}} がバブリングした時に呼ばれる {{domxref("EventListener")}} +- {{domxref("SharedWorker.port")}} {{readonlyInline}} + - : 通信とコントロールに利用される {{domxref("MessagePort")}} オブジェクトを返します。 -

    メソッド

    +## メソッド -

    {{domxref("EventTarget")}} のメソッドを継承し、 {{domxref("AbstractWorker")}} に定義されるメソッドを実装します。

    +_{{domxref("EventTarget")}} のメソッドを継承し、 {{domxref("AbstractWorker")}} に定義されるメソッドを実装します。_ -

    例

    +## 例 -

    SharedWorker の基本利用例 (ライブデモ) には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。それぞれのスクリプトは計算を行うために同じ JS ファイルを Worker に実行させています。2 つのページが別のウインドウで動作していたとしても、同じ Worker にアクセスできています。

    +[SharedWorker の基本利用例](https://github.com/mdn/simple-shared-worker) ([ライブデモ](http://mdn.github.io/simple-shared-worker/)) には 2 つの HTML ページがあり、それぞれでは JavaScript で単純な計算を行っています。それぞれのスクリプトは計算を行うために同じ JS ファイルを Worker に実行させています。2 つのページが別のウインドウで動作していたとしても、同じ Worker にアクセスできています。 -

    SharedWorker オブジェクトは {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} コンストラクタを利用して、次のように作成します：

    +`SharedWorker` オブジェクトは {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} コンストラクタを利用して、次のように作成します： -
    var myWorker = new SharedWorker("worker.js");
-
    +```js +var myWorker = new SharedWorker("worker.js"); +``` -

    それぞれのスクリプトは {{domxref("MessagePort")}} オブジェクトを通じて Worker にアクセスします。このオブジェクトは {{domxref("SharedWorker.port")}} プロパティから取得できます。addEventListener を読んで onmessage イベントのハンドラを登録したら、start() メソッドを呼んでポートを手動で開始できます：

    +それぞれのスクリプトは {{domxref("MessagePort")}} オブジェクトを通じて Worker にアクセスします。このオブジェクトは {{domxref("SharedWorker.port")}} プロパティから取得できます。addEventListener を読んで onmessage イベントのハンドラを登録したら、`start()` メソッドを呼んでポートを手動で開始できます： -
    myWorker.port.start();
    +```js +myWorker.port.start(); +``` -

    ポートが開始されたら、Worker に向けてメッセージを送ったり、送られたメッセージを受け取ったりできます。これらには port.postMessage() と port.onmessage を利用します:

    +ポートが開始されたら、Worker に向けてメッセージを送ったり、送られたメッセージを受け取ったりできます。これらには `port.postMessage()` と `port.onmessage` を利用します: -
    first.onchange = function() {
+```js
+first.onchange = function() {
     myWorker.port.postMessage([first.value,second.value]);
     console.log('Message posted to worker');
   }
@@ -61,11 +59,13 @@ translation_of: Web/API/SharedWorker
   myWorker.port.onmessage = function(e) {
     result1.textContent = e.data;
     console.log('Message received from worker');
-  }
    + } +``` -

    Worker の内部では {{domxref("SharedWorkerGlobalScope.onconnect")}} に対してハンドラを設定することで、上述したポートへの接続を処理できます。Worker に関連付けられたポートは {{event("connect")}} イベントの ports 属性で参照できます。{{domxref("MessagePort")}} の start() メソッドによるポート開始後は、onmessage ハンドラでメインスレッドからのメッセージを処理します。

    +Worker の内部では {{domxref("SharedWorkerGlobalScope.onconnect")}} に対してハンドラを設定することで、上述したポートへの接続を処理できます。Worker に関連付けられたポートは {{event("connect")}} イベントの `ports` 属性で参照できます。{{domxref("MessagePort")}} `の start()` メソッドによるポート開始後は、`onmessage` ハンドラでメインスレッドからのメッセージを処理します。 -
    onconnect = function(e) {
+```js
+onconnect = function(e) {
     var port = e.ports[0];
 
     port.addEventListener('message', function(e) {
@@ -74,34 +74,20 @@ translation_of: Web/API/SharedWorker
     });
 
     port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
-}
    - -

    仕様

    - - - - - - - - - - - - - - -
    仕様状況コメント
    {{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}{{Spec2('HTML WHATWG')}}{{SpecName("Web Workers")}} との差分なし
    +} +``` -

    ブラウザ互換性

    +## 仕様 +| 仕様 | 状況 | コメント | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------- | +| {{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}} | {{Spec2('HTML WHATWG')}} | {{SpecName("Web Workers")}} との差分なし | +## ブラウザ互換性 -

    {{Compat("api.SharedWorker")}}

    +{{Compat("api.SharedWorker")}} -

    関連情報

    +## 関連情報 - +- {{domxref("Worker")}} +- [Web workers の利用](/ja/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/ja/web/api/sharedworker/port/index.md b/files/ja/web/api/sharedworker/port/index.md index 870044d8632394..0f1f62c787e989 100644 --- a/files/ja/web/api/sharedworker/port/index.md +++ b/files/ja/web/api/sharedworker/port/index.md @@ -10,52 +10,41 @@ tags: - port translation_of: Web/API/SharedWorker/port --- -
    {{APIRef("Web Workers API")}}
    +{{APIRef("Web Workers API")}} -

    {{domxref("SharedWorker")}} インターフェースの port プロパティは、shared worker を制御したり通信したりするために使用する {{domxref("MessagePort")}} オブジェクトを返します。

    +{{domxref("SharedWorker")}} インターフェースの **`port`** プロパティは、shared worker を制御したり通信したりするために使用する {{domxref("MessagePort")}} オブジェクトを返します。 -

    構文

    +## 構文 -
    myWorker.port;
    +``` +myWorker.port; +``` -

    値

    +### 値 -

    {{domxref("MessagePort")}} オブジェクト

    +{{domxref("MessagePort")}} オブジェクト -

    例

    +## 例 -

    次のコードスニペットでは、{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} コンストラクターを使用して SharedWorker オブジェクトを生成しています。SharedWorker.port プロパティ経由で {{domxref("MessagePort")}} オブジェクトを使用して、複数のスクリプトから worker にアクセスできます — port は start() メソッドを使用して開始します:

    +次のコードスニペットでは、{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} コンストラクターを使用して `SharedWorker` オブジェクトを生成しています。`SharedWorker.port` プロパティ経由で {{domxref("MessagePort")}} オブジェクトを使用して、複数のスクリプトから worker にアクセスできます — port は `start()` メソッドを使用して開始します: -
    var myWorker = new SharedWorker('worker.js');
-myWorker.port.start();
    +```js +var myWorker = new SharedWorker('worker.js'); +myWorker.port.start(); +``` -

    完全なサンプルについては、Basic shared worker example (run shared worker) を参照してください。

    +完全なサンプルについては、[Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](http://mdn.github.io/simple-shared-worker/)) を参照してください。 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様ステータスコメント
    {{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}{{Spec2('HTML WHATWG')}}
    +| 仕様 | ステータス | コメント | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}} | {{Spec2('HTML WHATWG')}} | | -

    ブラウザー実装状況

    +## ブラウザー実装状況 +{{Compat("api.SharedWorker.port")}} +## 関連項目 -

    {{Compat("api.SharedWorker.port")}}

    - -

    関連項目

    - - +- {{domxref("SharedWorker")}} インターフェース diff --git a/files/ja/web/api/sharedworkerglobalscope/connect_event/index.md b/files/ja/web/api/sharedworkerglobalscope/connect_event/index.md index 806da66dc0625f..8f3d8259ff8704 100644 --- a/files/ja/web/api/sharedworkerglobalscope/connect_event/index.md +++ b/files/ja/web/api/sharedworkerglobalscope/connect_event/index.md @@ -11,38 +11,39 @@ tags: - イベント translation_of: Web/API/SharedWorkerGlobalScope/connect_event --- -
    {{APIRef}}
    +{{APIRef}} -

    connect イベントは、新しいクライアントが接続したときに共有ワーカーの {{domxref("SharedWorkerGlobalScope")}} に発生します。

    +**`connect`** イベントは、新しいクライアントが接続したときに共有ワーカーの {{domxref("SharedWorkerGlobalScope")}} に発生します。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
    バブリングなし
    キャンセル可能いいえ
    インターフェイス{{DOMxRef("MessageEvent")}}
    イベントハンドラープロパティ{{domxref("SharedWorkerGlobalScope.onconnect")}}
    バブリングなし
    キャンセル可能いいえ
    インターフェイス{{DOMxRef("MessageEvent")}}
    イベントハンドラープロパティ{{domxref("SharedWorkerGlobalScope.onconnect")}}
    -

    例

    +## 例 -

    この例は共有ワーカーファイルを示しています。メインスレッドから {{domxref("MessagePort")}} を通して Worker へのコネクションが発生したとき、 onconnect イベントハンドラーが呼び出されます。イベントオブジェクトは {{domxref("MessageEvent")}} です。

    +この例は共有ワーカーファイルを示しています。メインスレッドから {{domxref("MessagePort")}} を通して Worker へのコネクションが発生したとき、 `onconnect` イベントハンドラーが呼び出されます。イベントオブジェクトは {{domxref("MessageEvent")}} です。 -

    接続しようとしているポート番号は、イベントオブジェクトの ports 引数で参照することができます。この参照にはポートを通じて来るメッセージを扱うために割り当てられた onmessage ハンドラーがあり、その postMessage() メソッドに Worker を使用してメインスレッドにメッセージを送り返すために使用することができます。

    +接続しようとしているポート番号は、イベントオブジェクトの `ports` 引数で参照することができます。この参照にはポートを通じて来るメッセージを扱うために割り当てられた `onmessage` ハンドラーがあり、その `postMessage()` メソッドに Worker を使用してメインスレッドにメッセージを送り返すために使用することができます。 -
    self.onconnect = function(e) {
+```js
+self.onconnect = function(e) {
     var port = e.ports[0];
 
     port.onmessage = function(e) {
@@ -51,15 +52,17 @@ translation_of: Web/API/SharedWorkerGlobalScope/connect_event
     }
 
     port.start();
-}
    +} +``` -

    実行している例を完成させるには、 Basic shared worker example (共有ワーカーを実行) をご覧ください。

    +実行している例を完成させるには、 [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([共有ワーカーを実行](http://mdn.github.io/simple-shared-worker/)) をご覧ください。 -

    addEventListener による同等の処理

    +### addEventListener による同等の処理 -

    {{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用してイベントハンドラーを設定することもできます。

    +{{domxref("EventTarget/addEventListener", "addEventListener()")}} メソッドを使用してイベントハンドラーを設定することもできます。 -
    self.addEventListener('connect', function(e) {
+```js
+self.addEventListener('connect', function(e) {
   var port = e.ports[0];
 
   port.onmessage = function(e) {
@@ -67,32 +70,20 @@ translation_of: Web/API/SharedWorkerGlobalScope/connect_event
     port.postMessage(workerResult);
   }
 
-});
    - -

    仕様書

    - - - - - - - - - - - - - - -
    仕様書状態
    {{SpecName('HTML WHATWG', "indices.html#event-workerglobalscope-connect", "connect event")}}{{Spec2('HTML WHATWG')}}
    +}); +``` + +## 仕様書 + +| 仕様書 | 状態 | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', "indices.html#event-workerglobalscope-connect", "connect event")}} | {{Spec2('HTML WHATWG')}} | -

    ブラウザーの互換性

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

    {{Compat("api.SharedWorkerGlobalScope.connect_event")}}

    +{{Compat("api.SharedWorkerGlobalScope.connect_event")}} -

    関連情報

    +## 関連情報 - +- [Web Worker の使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) +- {{domxref("SharedWorkerGlobalScope")}} diff --git a/files/ja/web/api/sharedworkerglobalscope/index.md b/files/ja/web/api/sharedworkerglobalscope/index.md index ab6a7c63e1b9f5..ac5264ef616905 100644 --- a/files/ja/web/api/sharedworkerglobalscope/index.md +++ b/files/ja/web/api/sharedworkerglobalscope/index.md @@ -11,120 +11,91 @@ tags: - ウェブワーカー translation_of: Web/API/SharedWorkerGlobalScope --- -
    {{APIRef("Web Workers API")}}
    - -

    SharedWorkerGlobalScope オブジェクト ( {{domxref("SharedWorker")}} グローバルスコープ) は、 {{domxref("window.self","self")}} キーワードでアクセスできます。一部の追加のグローバル関数、名前空間オブジェクト、コンストラクターは、通常はワーカーのグローバルスコープに関連付けられていませんが、利用することができ、 JavaScript リファレンスに列挙されています。ワーカーで利用できる機能の完全なリストを参照してください。

    - -

    プロパティ

    - -

    このインターフェイスは {{domxref("WorkerGlobalScope")}}、またその親の {{domxref("EventTarget")}} インターフェイスからプロパティを継承しており、したがって {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}} のプロパティを実装しています。

    - -
    -
    {{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}}
    -
    The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes.
    -
    {{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}}
    -
    This property returns the {{domxref("ApplicationCache")}} object for the worker (see Using the application cache).
    -
    - -

    WorkerGlobalScope から継承しているプロパティ

    - -
    -
    {{domxref("WorkerGlobalScope.self")}}
    -
    Returns an object reference to the DedicatedWorkerGlobalScope object itself.
    -
    {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
    -
    Returns the {{domxref("Console")}} associated with the worker.
    -
    {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
    -
    Returns the {{domxref("WorkerLocation")}} associated with the worker. WorkerLocation is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
    -
    {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
    -
    Returns the {{domxref("WorkerNavigator")}} associated with the worker. WorkerNavigator is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
    -
    {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
    -
    Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.
    -
    - -

    イベントハンドラー

    - -

    This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

    - -
    -
    {{domxref("SharedWorkerGlobalScope.onconnect")}}
    -
    Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread.
    -
    - -

    メソッド

    - -

    This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

    - -
    -
    {{domxref("SharedWorkerGlobalScope.close()")}}
    -
    Discards any tasks queued in the SharedWorkerGlobalScope's event loop, effectively closing this particular scope.
    -
    - -

    WorkerGlobalScope から継承したもの

    - -
    -
    {{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}}
    -
    Discards any tasks queued in the WorkerGlobalScope's event loop, effectively closing this particular scope.
    -
    {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
    -
    Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.
    -
    {{domxref("WorkerGlobalScope.importScripts()")}}
    -
    Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: importScripts('foo.js', 'bar.js');
    -
    - -

    他の場所から実装したもの

    - -
    -
    {{domxref("WindowBase64.atob()")}}
    -
    Decodes a string of data which has been encoded using base-64 encoding.
    -
    {{domxref("WindowBase64.btoa()")}}
    -
    Creates a base-64 encoded ASCII string from a string of binary data.
    -
    {{domxref("WindowTimers.clearInterval()")}}
    -
    Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
    -
    {{domxref("WindowTimers.clearTimeout()")}}
    -
    Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
    -
    {{domxref("WindowTimers.setInterval()")}}
    -
    Schedules the execution of a function every X milliseconds.
    -
    {{domxref("WindowTimers.setTimeout()")}}
    -
    Sets a delay for executing a function.
    -
    - -

    イベント

    - -

    Listen to this event using addEventListener() or by assigning an event listener to the oneventname property of this interface.

    - -
    -
    connect
    -
    Fired on shared workers when a new client connects.
    - Also available via the onconnect property.
    -
    - -

    仕様書

    - - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('HTML WHATWG', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}}{{Spec2('HTML WHATWG')}}
    - -

    ブラウザーの互換性

    - -

    {{Compat("api.SharedWorkerGlobalScope")}}

    - -

    関連情報

    - - +{{APIRef("Web Workers API")}} + +**`SharedWorkerGlobalScope`** オブジェクト ( {{domxref("SharedWorker")}} グローバルスコープ) は、 {{domxref("window.self","self")}} キーワードでアクセスできます。一部の追加のグローバル関数、名前空間オブジェクト、コンストラクターは、通常はワーカーのグローバルスコープに関連付けられていませんが、利用することができ、 [JavaScript リファレンス](/ja/docs/Web/JavaScript/Reference)に列挙されています。[ワーカーで利用できる機能](/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)の完全なリストを参照してください。 + +## プロパティ + +_このインターフェイスは {{domxref("WorkerGlobalScope")}}、またその親の {{domxref("EventTarget")}} インターフェイスからプロパティを継承しており、したがって {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, {{domxref("WindowEventHandlers")}} のプロパティを実装しています。_ + +- {{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}} + - : The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes. +- {{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}} + - : This property returns the {{domxref("ApplicationCache")}} object for the worker (see [Using the application cache](/ja/docs/Web/HTML/Using_the_application_cache)). + +### WorkerGlobalScope から継承しているプロパティ + +- {{domxref("WorkerGlobalScope.self")}} + - : Returns an object reference to the `DedicatedWorkerGlobalScope` object itself. +- {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} + - : Returns the {{domxref("Console")}} associated with the worker. +- {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}} + - : Returns the {{domxref("WorkerLocation")}} associated with the worker. `WorkerLocation` is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers. +- {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}} + - : Returns the {{domxref("WorkerNavigator")}} associated with the worker. `WorkerNavigator` is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers. +- {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}} + - : Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available. + +### イベントハンドラー + +_This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}._ + +- {{domxref("SharedWorkerGlobalScope.onconnect")}} + - : Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread. + +## メソッド + +_This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}._ + +- {{domxref("SharedWorkerGlobalScope.close()")}} + - : Discards any tasks queued in the `SharedWorkerGlobalScope`'s event loop, effectively closing this particular scope. + +### WorkerGlobalScope から継承したもの + +- {{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}} + - : Discards any tasks queued in the `WorkerGlobalScope`'s event loop, effectively closing this particular scope. +- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}} + - : Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers. +- {{domxref("WorkerGlobalScope.importScripts()")}} + - : Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:` importScripts('foo.js', 'bar.js');` + +### 他の場所から実装したもの + +- {{domxref("WindowBase64.atob()")}} + - : Decodes a string of data which has been encoded using base-64 encoding. +- {{domxref("WindowBase64.btoa()")}} + - : Creates a base-64 encoded ASCII string from a string of binary data. +- {{domxref("WindowTimers.clearInterval()")}} + - : Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}. +- {{domxref("WindowTimers.clearTimeout()")}} + - : Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}. +- {{domxref("WindowTimers.setInterval()")}} + - : Schedules the execution of a function every X milliseconds. +- {{domxref("WindowTimers.setTimeout()")}} + - : Sets a delay for executing a function. + +## イベント + +Listen to this event using [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) or by assigning an event listener to the `oneventname` property of this interface. + +- [`connect`](/ja/docs/Web/API/SharedWorkerGlobalScope/connect_event) + - : Fired on shared workers when a new client connects. + Also available via the [`onconnect`](/ja/docs/Web/API/SharedWorkerGlobalScope/onconnect) property. + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}} | {{Spec2('HTML WHATWG')}} | | + +## ブラウザーの互換性 + +{{Compat("api.SharedWorkerGlobalScope")}} + +## 関連情報 + +- {{domxref("SharedWorker")}} +- {{domxref("WorkerGlobalScope")}} +- [ウェブワーカーの使用](/ja/docs/Web/API/Web_Workers_API/Using_web_workers) +- [ワーカーで使用できる関数](/ja/docs/Web/Guide/Needs_categorization/Functions_available_to_workers) diff --git a/files/ja/web/api/sourcebufferlist/index.md b/files/ja/web/api/sourcebufferlist/index.md index a5986203c802de..89c4d26c8b4165 100644 --- a/files/ja/web/api/sourcebufferlist/index.md +++ b/files/ja/web/api/sourcebufferlist/index.md @@ -13,71 +13,48 @@ tags: - Video translation_of: Web/API/SourceBufferList --- -

    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

    +{{APIRef("Media Source Extensions")}}{{SeeCompatTable}} -

    SourceBufferList インターフェイスは、複数の {{domxref("SourceBuffer")}} オブジェクトの単純なコンテナリストを表します。

    +**`SourceBufferList`** インターフェイスは、複数の {{domxref("SourceBuffer")}} オブジェクトの単純なコンテナリストを表します。 -

    特定の MediaSource に追加された SourceBuffer を含むソースバッファのリストは、{{domxref("MediaSource.sourceBuffers")}} プロパティを使用して取得できます。 個々のソースバッファは、配列演算子（つまり []）または {{jsxref("Array.forEach", "forEach()")}} などの関数を使用してアクセスできます。

    +特定の `MediaSource` に追加された `SourceBuffer` を含むソースバッファのリストは、{{domxref("MediaSource.sourceBuffers")}} プロパティを使用して取得できます。 個々のソースバッファは、配列演算子（つまり `[]`）または {{jsxref("Array.forEach", "forEach()")}} などの関数を使用してアクセスできます。 -

    {{InheritanceDiagram}}

    +{{InheritanceDiagram}} -

    プロパティ

    +## プロパティ -
    -
    {{domxref("SourceBufferList.length")}} {{readonlyInline}}
    -
    リスト内の {{domxref("SourceBuffer")}} オブジェクトの数を返します。
    -
    +- {{domxref("SourceBufferList.length")}} {{readonlyInline}} + - : リスト内の {{domxref("SourceBuffer")}} オブジェクトの数を返します。 -

    イベントハンドラ

    +### イベントハンドラ -
    -
    {{domxref("SourceBufferList.onaddsourcebuffer")}}
    -
    addsourcebuffer イベントのイベントハンドラ。
    -
    {{domxref("SourceBufferList.onremovesourcebuffer")}}
    -
    removesourcebuffer イベントのイベントハンドラ。
    -
    +- {{domxref("SourceBufferList.onaddsourcebuffer")}} + - : `addsourcebuffer` イベントのイベントハンドラ。 +- {{domxref("SourceBufferList.onremovesourcebuffer")}} + - : `removesourcebuffer` イベントのイベントハンドラ。 -

    メソッド

    +## メソッド -

    親インターフェイスである {{domxref("EventTarget")}} からメソッドを継承します。

    +_親インターフェイスである {{domxref("EventTarget")}} からメソッドを継承します。_ -
    -
    SourceBufferList: indexed property getter
    -
    このゲッターにより、リスト内の SourceBuffer オブジェクトに配列演算子（つまり []）でアクセスできます。
    -
    +- [`SourceBufferList`: indexed property getter](/ja/docs/Web/API/SourceBufferList/SourceBuffer) + - : このゲッターにより、リスト内の `SourceBuffer` オブジェクトに配列演算子（つまり `[]`）でアクセスできます。 -

    例

    +## 例 -

    未定

    +未定 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('Media Source Extensions', '#sourcebufferlist', 'SourceBufferList')}}{{Spec2('Media Source Extensions')}}初期定義
    +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------- | +| {{SpecName('Media Source Extensions', '#sourcebufferlist', 'SourceBufferList')}} | {{Spec2('Media Source Extensions')}} | 初期定義 | -

    ブラウザーの互換性

    +## ブラウザーの互換性 -
    +{{Compat("api.SourceBufferList")}} +## 関連情報 -

    {{Compat("api.SourceBufferList")}}

    -
    - -

    関連情報

    - - +- {{domxref("MediaSource")}} +- {{domxref("SourceBuffer")}} diff --git a/files/ja/web/api/sourcebufferlist/length/index.md b/files/ja/web/api/sourcebufferlist/length/index.md index 5b287201803193..fb9a234b722432 100644 --- a/files/ja/web/api/sourcebufferlist/length/index.md +++ b/files/ja/web/api/sourcebufferlist/length/index.md @@ -13,48 +13,35 @@ tags: - length translation_of: Web/API/SourceBufferList/length --- -
    {{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
    +{{APIRef("Media Source Extensions")}}{{SeeCompatTable}} -

    {{domxref("SourceBufferList")}} インターフェイスの length 読み取り専用プロパティは、リスト内の {{domxref("SourceBuffer")}} オブジェクトの数を返します。

    +{{domxref("SourceBufferList")}} インターフェイスの **`length`** 読み取り専用プロパティは、リスト内の {{domxref("SourceBuffer")}} オブジェクトの数を返します。 -

    構文

    +## 構文 -
    var myListLength = sourceBufferList.length;
    +``` +var myListLength = sourceBufferList.length; +``` -

    値

    +### 値 -

    unsigned long 型の数。

    +unsigned long 型の数。 -

    例

    +## 例 -

    未定

    +未定 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('Media Source Extensions', '#idl-def-sourcebufferlist-length', 'length')}}{{Spec2('Media Source Extensions')}}初期定義
    +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------- | +| {{SpecName('Media Source Extensions', '#idl-def-sourcebufferlist-length', 'length')}} | {{Spec2('Media Source Extensions')}} | 初期定義 | -

    ブラウザーの互換性

    +## ブラウザーの互換性 +{{Compat("api.SourceBufferList.length")}} +## 関連情報 -

    {{Compat("api.SourceBufferList.length")}}

    - -

    関連情報

    - - +- {{domxref("MediaSource")}} +- {{domxref("SourceBuffer")}} diff --git a/files/ja/web/api/speechrecognitionalternative/index.md b/files/ja/web/api/speechrecognitionalternative/index.md index 37081e081251db..6583c21cadc44f 100644 --- a/files/ja/web/api/speechrecognitionalternative/index.md +++ b/files/ja/web/api/speechrecognitionalternative/index.md @@ -12,24 +12,23 @@ tags: - speech translation_of: Web/API/SpeechRecognitionAlternative --- -

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    +{{APIRef("Web Speech API")}}{{SeeCompatTable}} -

    Web Speech API の SpeechRecognitionAlternative インターフェイスは、音声認識サービスにより認識されている一つの単語を表します。

    +[Web Speech API](/ja/docs/Web/API/Web_Speech_API) の **`SpeechRecognitionAlternative`** インターフェイスは、音声認識サービスにより認識されている一つの単語を表します。 -

    プロパティ

    +## プロパティ -
    -
    {{domxref("SpeechRecognitionAlternative.transcript")}} {{readonlyinline}}
    -
    認識された単語の transcript を含む文字列を返します。
    -
    {{domxref("SpeechRecognitionAlternative.confidence")}} {{readonlyinline}}
    -
    音声認識システムの認識の正しさの信頼度を表す評価を数値で返します。
    -
    +- {{domxref("SpeechRecognitionAlternative.transcript")}} {{readonlyinline}} + - : 認識された単語の transcript を含む文字列を返します。 +- {{domxref("SpeechRecognitionAlternative.confidence")}} {{readonlyinline}} + - : 音声認識システムの認識の正しさの信頼度を表す評価を数値で返します。 -

    例

    +## 例 -

    このコードは、私たちの Speech color changer の例から抜粋しました。

    +このコードは、私たちの [Speech color changer](https://github.com/mdn/web-speech-api/blob/master/speech-color-changer/script.js) の例から抜粋しました。 -
    recognition.onresult = function(event) {
+```js
+recognition.onresult = function(event) {
   // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
   // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
   // It has a getter so it can be accessed like an array
@@ -41,53 +40,40 @@ translation_of: Web/API/SpeechRecognitionAlternative
   var color = event.results[0][0].transcript;
   diagnostic.textContent = 'Result received: ' + color + '.';
   bg.style.backgroundColor = color;
-}
    +} +``` +## 仕様 -

    仕様

    +| 仕様書 | 策定状況 | 備考 | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---- | +| {{SpecName('Web Speech API', '#speechreco-alternative', 'SpeechRecognitionAlternative')}} | {{Spec2('Web Speech API')}} | | - - - - - - - - - - - - - -
    仕様書策定状況備考
    {{SpecName('Web Speech API', '#speechreco-alternative', 'SpeechRecognitionAlternative')}}{{Spec2('Web Speech API')}}
    +## ブラウザーの実装状況 -

    ブラウザーの実装状況

    +{{Compat("api.SpeechRecognitionAlternative")}} -
    +### Firefox OS の許可設定 +アプリ内で音声認識を使用するには、[manifest](/ja/docs/Web/Apps/Build/Manifest) ファイルに次の許可設定を指定する必要があります: -

    {{Compat("api.SpeechRecognitionAlternative")}}

    -
    - -

    Firefox OS の許可設定

    - -

    アプリ内で音声認識を使用するには、manifest ファイルに次の許可設定を指定する必要があります:

    - -
    "permissions": {
+```json
+"permissions": {
   "audio-capture" : {
     "description" : "Audio capture"
   },
   "speech-recognition" : {
     "description" : "Speech recognition"
   }
-}
    +} +``` -

    特権アプリも必要なため、以下も同様に含める必要があります:

    +特権アプリも必要なため、以下も同様に含める必要があります: -
      "type": "privileged"
    +```json + "type": "privileged" +``` -

    関連項目

    +## 関連項目 - +- [Web Speech API](/ja/docs/Web/API/Web_Speech_API) diff --git a/files/ja/web/api/speechrecognitionalternative/transcript/index.md b/files/ja/web/api/speechrecognitionalternative/transcript/index.md index 09ab3e29179e02..3f2198ba912717 100644 --- a/files/ja/web/api/speechrecognitionalternative/transcript/index.md +++ b/files/ja/web/api/speechrecognitionalternative/transcript/index.md @@ -13,25 +13,28 @@ tags: - transcript translation_of: Web/API/SpeechRecognitionAlternative/transcript --- -

    {{APIRef("Web Speech API")}}{{ SeeCompatTable() }}

    +{{APIRef("Web Speech API")}}{{ SeeCompatTable() }} -

    {{domxref("SpeechRecognitionResult")}} インターフェースの transcript 読み取り専用プロパティは、認識したワードの記録を含む文字列を返します。

    +{{domxref("SpeechRecognitionResult")}} インターフェースの **`transcript`** 読み取り専用プロパティは、認識したワードの記録を含む文字列を返します。 -

    連続認識において、連続した {{domxref("SpeechRecognitionResult")}} の連結がセッションの適切な記録を生成するように、必要に応じて先頭または末尾の空白が含まれます。

    +連続認識において、連続した {{domxref("SpeechRecognitionResult")}} の連結がセッションの適切な記録を生成するように、必要に応じて先頭または末尾の空白が含まれます。 -

    構文

    +## 構文 -
    var myTranscript = speechRecognitionAlternativeInstance.transcript;
    +``` +var myTranscript = speechRecognitionAlternativeInstance.transcript; +``` -

    戻り値

    +### 戻り値 -

    {{domxref("DOMString")}}。

    +{{domxref("DOMString")}}。 -

    例

    +## 例 -

    このコードは、Speech color changer から抜き出しています。

    +このコードは、[Speech color changer](https://github.com/mdn/web-speech-api/blob/master/speech-color-changer/script.js) から抜き出しています。 -
    recognition.onresult = function(event) {
+```js
+recognition.onresult = function(event) {
   // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
   // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
   // It has a getter so it can be accessed like an array
@@ -43,55 +46,47 @@ translation_of: Web/API/SpeechRecognitionAlternative/transcript
   var color = event.results[0][0].transcript;
   diagnostic.textContent = 'Result received: ' + color + '.';
   bg.style.backgroundColor = color;
-}
    +} +``` -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様ステータスコメント
    {{SpecName('Web Speech API', '#dfn-transcript', 'transcript')}}{{Spec2('Web Speech API')}}
    +| 仕様 | ステータス | コメント | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------- | +| {{SpecName('Web Speech API', '#dfn-transcript', 'transcript')}} | {{Spec2('Web Speech API')}} | | -

    ブラウザー実装状況

    +## ブラウザー実装状況 +{{Compat("api.SpeechRecognitionAlternative.transcript")}} +- \[1] Chrome では、SpeechRecognitionare インターフェースにプレフィックスが必要です。そのため、インターフェース名に `webkitSpeechRecognition` のようなプレフィックスが必要です; また、認識を動作させるには、Web サーバ上から提供する必要があります。 +- \[2] -

    {{Compat("api.SpeechRecognitionAlternative.transcript")}}

    + about:config - + の `media.webspeech.recognition.enable` フラグで有効にできますが、現在の音声認識はデスクトップ版の Firefox では機能しません - 必要な内部権限が整理されればすぐに適切に公開されます。 -

    Firefox OS 許可

    +### Firefox OS 許可 -

    アプリで音声認識を使用するには、manifest で次の許可が必要です:

    +アプリで音声認識を使用するには、[manifest](/ja/docs/Web/Apps/Build/Manifest) で次の許可が必要です: -
    "permissions": {
+```json
+"permissions": {
   "audio-capture" : {
     "description" : "Audio capture"
   },
   "speech-recognition" : {
     "description" : "Speech recognition"
   }
-}
    +} +``` -

    特権アプリも必要なため、次のものも含める必要があります。

    +特権アプリも必要なため、次のものも含める必要があります。 -
      "type": "privileged"
    +```json + "type": "privileged" +``` -

    関連項目

    +## 関連項目 - +- [Web Speech API](/ja/docs/Web/API/Web_Speech_API) diff --git a/files/ja/web/api/speechrecognitionresult/index.md b/files/ja/web/api/speechrecognitionresult/index.md index abf172bba4a851..cfdcfe373ded3b 100644 --- a/files/ja/web/api/speechrecognitionresult/index.md +++ b/files/ja/web/api/speechrecognitionresult/index.md @@ -14,31 +14,28 @@ tags: - speech translation_of: Web/API/SpeechRecognitionResult --- -

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    +{{APIRef("Web Speech API")}}{{SeeCompatTable}} -

    The SpeechRecognitionResult interface of the Web Speech API represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects.

    +The **`SpeechRecognitionResult`** interface of the [Web Speech API](/ja/docs/Web/API/Web_Speech_API) represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects. -

    Properties

    +## Properties -
    -
    {{domxref("SpeechRecognitionResult.isFinal")}} {{readonlyinline}}
    -
    A {{domxref("Boolean")}} that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on.
    -
    {{domxref("SpeechRecognitionResult.length")}} {{readonlyinline}}
    -
    Returns the length of the "array" — the number of {{domxref("SpeechRecognitionAlternative")}} objects contained in the result (also referred to as "n-best alternatives".)
    -
    +- {{domxref("SpeechRecognitionResult.isFinal")}} {{readonlyinline}} + - : A {{domxref("Boolean")}} that states whether this result is final (true) or not (false) — if so, then this is the final time this result will be returned; if not, then this result is an interim result, and may be updated later on. +- {{domxref("SpeechRecognitionResult.length")}} {{readonlyinline}} + - : Returns the length of the "array" — the number of {{domxref("SpeechRecognitionAlternative")}} objects contained in the result (also referred to as "n-best alternatives".) -

    Methods

    +## Methods -
    -
    {{domxref("SpeechRecognitionResult.item")}}
    -
    A standard getter that allows {{domxref("SpeechRecognitionAlternative")}} objects within the result to be accessed via array syntax.
    -
    +- {{domxref("SpeechRecognitionResult.item")}} + - : A standard getter that allows {{domxref("SpeechRecognitionAlternative")}} objects within the result to be accessed via array syntax. -

    Examples

    +## Examples -

    This code is excerpted from our Speech color changer example.

    +This code is excerpted from our [Speech color changer](https://github.com/mdn/web-speech-api/blob/master/speech-color-changer/script.js) example. -
    recognition.onresult = function(event) {
+```js
+recognition.onresult = function(event) {
   // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
   // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
   // It has a getter so it can be accessed like an array
@@ -50,52 +47,40 @@ translation_of: Web/API/SpeechRecognitionResult
   var color = event.results[0][0].transcript;
   diagnostic.textContent = 'Result received: ' + color + '.';
   bg.style.backgroundColor = color;
-}
    +} +``` -

    Specifications

    +## Specifications - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('Web Speech API', '#speechreco-result', 'SpeechRecognitionResult')}}{{Spec2('Web Speech API')}}
    +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Speech API', '#speechreco-result', 'SpeechRecognitionResult')}} | {{Spec2('Web Speech API')}} | | -

    Browser compatibility

    +## Browser compatibility -
    +{{Compat("api.SpeechRecognitionResult")}} +### Firefox OS permissions -

    {{Compat("api.SpeechRecognitionResult")}}

    -
    +To use speech recognition in an app, you need to specify the following permissions in your [manifest](/ja/docs/Web/Apps/Build/Manifest): -

    Firefox OS permissions

    - -

    To use speech recognition in an app, you need to specify the following permissions in your manifest:

    - -
    "permissions": {
+```json
+"permissions": {
   "audio-capture" : {
     "description" : "Audio capture"
   },
   "speech-recognition" : {
     "description" : "Speech recognition"
   }
-}
    +} +``` -

    You also need a privileged app, so you need to include this as well:

    +You also need a privileged app, so you need to include this as well: -
      "type": "privileged"
    +```json + "type": "privileged" +``` -

    See also

    +## See also - +- [Web Speech API](/ja/docs/Web/API/Web_Speech_API) diff --git a/files/ja/web/api/speechrecognitionresult/isfinal/index.md b/files/ja/web/api/speechrecognitionresult/isfinal/index.md index 6afad1a17bc962..580bc50eeb3257 100644 --- a/files/ja/web/api/speechrecognitionresult/isfinal/index.md +++ b/files/ja/web/api/speechrecognitionresult/isfinal/index.md @@ -13,21 +13,24 @@ tags: - speech translation_of: Web/API/SpeechRecognitionResult/isFinal --- -

    {{APIRef("Web Speech API")}}{{ SeeCompatTable() }}

    +{{APIRef("Web Speech API")}}{{ SeeCompatTable() }} -

    {{domxref("SpeechRecognitionResult")}}インターフェイスの isFinal リードオンリーのプロパティは結果がファイナルかどうかの ({{domxref("Boolean")}} 型) のことです。true の場合は、これは結果を返す最終の時間です。false の場合は、暫定の結果を返し、後々それは更新されます。

    +{{domxref("SpeechRecognitionResult")}}インターフェイスの **`isFinal`** リードオンリーのプロパティは結果がファイナルかどうかの ({{domxref("Boolean")}} 型) のことです。true の場合は、これは結果を返す最終の時間です。false の場合は、暫定の結果を返し、後々それは更新されます。 -

    構文

    +## 構文 -
    var myIsFinal = speechRecognitionResultInstance.isFinal;
    +``` +var myIsFinal = speechRecognitionResultInstance.isFinal; +``` -

    返り値

    +### 返り値 -

    A {{domxref("Boolean")}}.

    +A {{domxref("Boolean")}}. -

    例

    +## 例 -
    recognition.onresult = function(event) {
+```js
+recognition.onresult = function(event) {
   // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
   // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects.
   // It has a getter so it can be accessed like an array
@@ -41,50 +44,40 @@ translation_of: Web/API/SpeechRecognitionResult/isFinal
   bg.style.backgroundColor = color;
 
   console.log(event.results[0].isFinal);
-}
    +} +``` -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('Web Speech API', '#dfn-isFinal', 'isFinal')}}{{Spec2('Web Speech API')}}
    +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------- | ------------------------------------ | -------- | +| {{SpecName('Web Speech API', '#dfn-isFinal', 'isFinal')}} | {{Spec2('Web Speech API')}} | | -

    ブラウザー実装状況

    +## ブラウザー実装状況 +{{Compat("api.SpeechRecognitionResult.isFinal")}} +### Firefox OS 権限 -

    {{Compat("api.SpeechRecognitionResult.isFinal")}}

    +アプリで音声認識を利用する前に、下記の権限を [manifest](/ja/docs/Web/Apps/Build/Manifest) に追加する必要があります。 -

    Firefox OS 権限

    - -

    アプリで音声認識を利用する前に、下記の権限を manifest に追加する必要があります。

    - -
    "permissions": {
+```json
+"permissions": {
   "audio-capture" : {
     "description" : "Audio capture"
   },
   "speech-recognition" : {
     "description" : "Speech recognition"
   }
-}
    +} +``` -

    privileged アプリ権限も必要なので、下記も追加が必要です。

    +privileged アプリ権限も必要なので、下記も追加が必要です。 -
      "type": "privileged"
    +```json + "type": "privileged" +``` -

    関連情報

    +## 関連情報 - +- [Web Speech API](/ja/docs/Web/API/Web_Speech_API) diff --git a/files/ja/web/api/speechsynthesisutterance/index.md b/files/ja/web/api/speechsynthesisutterance/index.md index 3f61b5e27f36b6..1cad43409beefe 100644 --- a/files/ja/web/api/speechsynthesisutterance/index.md +++ b/files/ja/web/api/speechsynthesisutterance/index.md @@ -12,62 +12,57 @@ tags: - synthesis translation_of: Web/API/SpeechSynthesisUtterance --- -

    {{APIRef("Web Speech API")}}{{SeeCompatTable}}

    - -

    Web Speech API の SpeechSynthesisUtterance インターフェイスは、発話リクエストを表します。これには、speech サービスが読み上げるコンテンツと、その読み上げ方についての情報 (言語、音の高低、音量) が含まれます。

    - -

    コンストラクター

    - -
    -
    {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
    -
    新しい SpeechSynthesisUtterance オブジェクトのインスタンスを返します。
    -
    - -

    プロパティ

    - -

    SpeechSynthesisUtterance は、その親インターフェイスである {{domxref("EventTarget")}} からのプロパティも継承します。

    - -
    -
    {{domxref("SpeechSynthesisUtterance.lang")}}
    -
    utterance (発声) の言語を取得または設定します。
    -
    {{domxref("SpeechSynthesisUtterance.pitch")}}
    -
    utterance が発話される際のピッチ (音の高低) を取得または設定します。
    -
    {{domxref("SpeechSynthesisUtterance.rate")}}
    -
    utterance が発話される際の速度を取得または設定します。
    -
    {{domxref("SpeechSynthesisUtterance.text")}}
    -
    utterance が発話される際の合成されるテキストを取得または設定します。
    -
    {{domxref("SpeechSynthesisUtterance.voice")}}
    -
    utterance の発話に使用される音声を取得または設定します。
    -
    {{domxref("SpeechSynthesisUtterance.volume")}}
    -
    utterance が発話される際の音量を取得または設定します。
    -
    - -

    イベントハンドラー

    - -
    -
    {{domxref("SpeechSynthesisUtterance.onboundary")}}
    -
    発話された utterance が単語または文の境界に達した時に発火します。
    -
    {{domxref("SpeechSynthesisUtterance.onend")}}
    -
    utterance の発話が完了した時に発火します。
    -
    {{domxref("SpeechSynthesisUtterance.onerror")}}
    -
    utterance の正常な発話を妨げるエラーが発生した時に発火します。
    -
    {{domxref("SpeechSynthesisUtterance.onmark")}}
    -
    発話された utterance が SSML (音声合成マークアップ言語) の "mark" タグに達した時に発火します。
    -
    {{domxref("SpeechSynthesisUtterance.onpause")}}
    -
    utterance の発話が途中で一時停止された時に発火します。
    -
    {{domxref("SpeechSynthesisUtterance.onresume")}}
    -
    一時停止された utterance の発話が再開された時に発火します。
    -
    {{domxref("SpeechSynthesisUtterance.onstart")}}
    -
    utterance の発話が開始された時に発火します。
    -
    - -

    例

    - -

    私たちの基本的な 音声合成のデモ では、最初に window.speechSynthesis を使用して SpeechSynthesis コントローラーへの参照を取得します。必要な変数の定義後、 {{domxref("SpeechSynthesis.getVoices()")}} を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。

    - -

    inputForm.onsubmit ハンドラー内部では、preventDefault() でフォーム送信を停止し、テキスト {{htmlelement("input")}} に入力されたテキストを含む新しい {{domxref("SpeechSynthesisUtterance")}} インスタンスを作成します。その発声にユーザーが {{htmlelement("select")}} 要素で選択した音声を設定し、{{domxref("SpeechSynthesis.speak()")}} メソッドを通して発声の発話を開始します。

    - -
    var synth = window.speechSynthesis;
+{{APIRef("Web Speech API")}}{{SeeCompatTable}}
+
+[Web Speech API](/ja/docs/Web/API/Web_Speech_API) の **`SpeechSynthesisUtterance`** インターフェイスは、発話リクエストを表します。これには、speech サービスが読み上げるコンテンツと、その読み上げ方についての情報 (言語、音の高低、音量) が含まれます。
+
+## コンストラクター
+
+- {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
+  - : 新しい `SpeechSynthesisUtterance` オブジェクトのインスタンスを返します。
+
+## プロパティ
+
+_`SpeechSynthesisUtterance` は、その親インターフェイスである {{domxref("EventTarget")}} からのプロパティも継承します。_
+
+- {{domxref("SpeechSynthesisUtterance.lang")}}
+  - : utterance (発声) の言語を取得または設定します。
+- {{domxref("SpeechSynthesisUtterance.pitch")}}
+  - : utterance が発話される際のピッチ (音の高低) を取得または設定します。
+- {{domxref("SpeechSynthesisUtterance.rate")}}
+  - : utterance が発話される際の速度を取得または設定します。
+- {{domxref("SpeechSynthesisUtterance.text")}}
+  - : utterance が発話される際の合成されるテキストを取得または設定します。
+- {{domxref("SpeechSynthesisUtterance.voice")}}
+  - : utterance の発話に使用される音声を取得または設定します。
+- {{domxref("SpeechSynthesisUtterance.volume")}}
+  - : utterance が発話される際の音量を取得または設定します。
+
+### イベントハンドラー
+
+- {{domxref("SpeechSynthesisUtterance.onboundary")}}
+  - : 発話された utterance が単語または文の境界に達した時に発火します。
+- {{domxref("SpeechSynthesisUtterance.onend")}}
+  - : utterance の発話が完了した時に発火します。
+- {{domxref("SpeechSynthesisUtterance.onerror")}}
+  - : utterance の正常な発話を妨げるエラーが発生した時に発火します。
+- {{domxref("SpeechSynthesisUtterance.onmark")}}
+  - : 発話された utterance が SSML (音声合成マークアップ言語) の "mark" タグに達した時に発火します。
+- {{domxref("SpeechSynthesisUtterance.onpause")}}
+  - : utterance の発話が途中で一時停止された時に発火します。
+- {{domxref("SpeechSynthesisUtterance.onresume")}}
+  - : 一時停止された utterance の発話が再開された時に発火します。
+- {{domxref("SpeechSynthesisUtterance.onstart")}}
+  - : utterance の発話が開始された時に発火します。
+
+## 例
+
+私たちの基本的な [音声合成のデモ](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis) では、最初に `window.speechSynthesis` を使用して SpeechSynthesis コントローラーへの参照を取得します。必要な変数の定義後、 {{domxref("SpeechSynthesis.getVoices()")}} を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。
+
+`inputForm.onsubmit` ハンドラー内部では、[preventDefault()](/ja/docs/Web/API/Event/preventDefault) でフォーム送信を停止し、テキスト {{htmlelement("input")}} に入力されたテキストを含む新しい {{domxref("SpeechSynthesisUtterance")}} インスタンスを作成します。その発声にユーザーが {{htmlelement("select")}} 要素で選択した音声を設定し、{{domxref("SpeechSynthesis.speak()")}} メソッドを通して発声の発話を開始します。
+
+```js
+var synth = window.speechSynthesis;
 
 var inputForm = document.querySelector('form');
 var inputTxt = document.querySelector('input');
@@ -75,7 +70,7 @@ var voiceSelect = document.querySelector('select');
 
 var voices = synth.getVoices();
 
-for(i = 0; i < voices.length ; i++) {
+for(i = 0; i < voices.length ; i++) {
   var option = document.createElement('option');
   option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
   option.setAttribute('data-lang', voices[i].lang);
@@ -88,42 +83,26 @@ inputForm.onsubmit = function(event) {
 
   var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
   var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i < voices.length ; i++) {
+  for(i = 0; i < voices.length ; i++) {
     if(voices[i].name === selectedOption) {
       utterThis.voice = voices[i];
     }
   }
   synth.speak(utterThis);
   inputTxt.blur();
-}
    - -

    仕様

    - - - - - - - - - - - - - - -
    仕様書策定状況備考
    {{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}{{Spec2('Web Speech API')}}
    +} +``` -

    ブラウザーの実装状況

    +## 仕様 -
    +| 仕様書 | 策定状況 | 備考 | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---- | +| {{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}} | {{Spec2('Web Speech API')}} | | +## ブラウザーの実装状況 -

    {{Compat("api.SpeechSynthesisUtterance")}}

    -
    +{{Compat("api.SpeechSynthesisUtterance")}} -

    関連項目

    +## 関連項目 - +- [Web Speech API](/ja/docs/Web/API/Web_Speech_API) diff --git a/files/ja/web/api/speechsynthesisutterance/lang/index.md b/files/ja/web/api/speechsynthesisutterance/lang/index.md index 6952b6e3b5137f..f3fadc093309df 100644 --- a/files/ja/web/api/speechsynthesisutterance/lang/index.md +++ b/files/ja/web/api/speechsynthesisutterance/lang/index.md @@ -3,34 +3,32 @@ title: SpeechSynthesisUtterance.lang slug: Web/API/SpeechSynthesisUtterance/lang translation_of: Web/API/SpeechSynthesisUtterance/lang --- -
    {{APIRef("Web Speech API")}} {{SeeCompatTable}}
    -{{domxref("SpeechSynthesisUtterance")}}インターフェースのlangプロパティは、発話の言語を取得、設定します。
    +{{APIRef("Web Speech API")}} {{SeeCompatTable}} +{{domxref("SpeechSynthesisUtterance")}}インターフェースの**lang**プロパティは、発話の言語を取得、設定します。 -
    +If unset, the app's (i.e. the {{htmlelement("html")}} {{htmlattrxref("lang", "html")}} value) lang will be used, or the user-agent default if that is unset too. -

    +## Syntax -

    If unset, the app's (i.e. the {{htmlelement("html")}} {{htmlattrxref("lang", "html")}} value) lang will be used, or the user-agent default if that is unset too.

    - -

    Syntax

    - -
    var myLang = speechSynthesisUtteranceInstance.lang;
+```
+var myLang = speechSynthesisUtteranceInstance.lang;
 speechSynthesisUtteranceInstance.lang = 'en-US';
-
    +``` -

    Value

    +### Value -

    A {{domxref("DOMString")}} representing a BCP 47 language tag.

    +A {{domxref("DOMString")}} representing a BCP 47 language tag. -

    Examples

    +## Examples -
    var synth = window.speechSynthesis;
+```js
+var synth = window.speechSynthesis;
 
-var inputForm = document.querySelector('form');
-var inputTxt = document.querySelector('input');
-var voiceSelect = document.querySelector('select');
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('input');
+var voiceSelect = document.querySelector('select');
 
-var voices = synth.getVoices();
+var voices = synth.getVoices();
 
   ...
 
@@ -39,7 +37,7 @@ inputForm.onsubmit = function(event) {
 
   var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
   var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i < voices.length ; i++) {
+  for(i = 0; i < voices.length ; i++) {
     if(voices[i].name === selectedOption) {
       utterThis.voice = voices[i];
     }
@@ -47,31 +45,19 @@ inputForm.onsubmit = function(event) {
   utterThis.lang = 'en-US';
   synth.speak(utterThis);
   inputTxt.blur();
-}
    - -

    Specifications

    - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('Web Speech API', '#dfn-utterancelang', 'lang')}}{{Spec2('Web Speech API')}}
    - -

    Browser compatibility

    - -

    {{Compat("api.SpeechSynthesisUtterance.lang")}}

    - -

    See also

    - - +} +``` + +## Specifications + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Speech API', '#dfn-utterancelang', 'lang')}} | {{Spec2('Web Speech API')}} | | + +## Browser compatibility + +{{Compat("api.SpeechSynthesisUtterance.lang")}} + +## See also + +- [Web Speech API](/ja/docs/Web/API/Web_Speech_API) diff --git a/files/ja/web/api/storage_access_api/index.md b/files/ja/web/api/storage_access_api/index.md index 853faa4325d36d..3d646ba6fee1e0 100644 --- a/files/ja/web/api/storage_access_api/index.md +++ b/files/ja/web/api/storage_access_api/index.md @@ -8,86 +8,78 @@ tags: - Storage Access API translation_of: Web/API/Storage_Access_API --- -
    {{DefaultAPISidebar("Storage Access API")}}{{seecompattable}}
    +{{DefaultAPISidebar("Storage Access API")}}{{seecompattable}} -

    Storage Access API（ストレージアクセス API）は、埋め込まれたクロスオリジンのコンテンツが、通常はファーストパーティのコンテキストでのみアクセスできるストレージ（これをオリジンのファーストパーティストレージと呼びます）に無制限にアクセスする方法を提供します。 API は、埋め込まれたリソースがファーストパーティストレージに現在アクセスできるかどうかを確認し、ユーザーエージェントからファーストパーティストレージへのアクセスを要求できるメソッドを提供します。

    +Storage Access API（ストレージアクセス API）は、埋め込まれたクロスオリジンのコンテンツが、通常はファーストパーティのコンテキストでのみアクセスできるストレージ（これをオリジンの*ファーストパーティ*ストレージと呼びます）に無制限にアクセスする方法を提供します。 API は、埋め込まれたリソースがファーストパーティストレージに現在アクセスできるかどうかを確認し、ユーザーエージェントからファーストパーティストレージへのアクセスを要求できるメソッドを提供します。 -

    概念と使用方法

    +## 概念と使用方法 -

    ほとんどのブラウザーは、埋め込まれたクロスオリジンリソースのクッキーおよびサイトデータへのアクセスを制限する多くのストレージアクセスポリシーを実装しています。 これらの制限は、各最上位オリジンの下に埋め込まれたリソースに一意のストレージスペースを与えることから、サードパーティのコンテキストでリソースが読み込まれたときのストレージアクセスの完全なブロックにまで及びます。

    +ほとんどのブラウザーは、埋め込まれたクロスオリジンリソースのクッキーおよびサイトデータへのアクセスを制限する多くのストレージアクセスポリシーを実装しています。 これらの制限は、各最上位オリジンの下に埋め込まれたリソースに一意のストレージスペースを与えることから、サードパーティのコンテキストでリソースが読み込まれたときのストレージアクセスの完全なブロックにまで及びます。 -

    特にサードパーティのクッキーブロックポリシーに関する意味論はブラウザーごとに異なりますが、コア機能は似ています: サードパーティのコンテキストに埋め込まれたクロスオリジンリソースには、ファーストパーティのコンテキストで読み込まれたときにアクセスできるのと同じクッキーとサイトストレージへのアクセスが与えられません。

    +特にサードパーティのクッキーブロックポリシーに関する意味論はブラウザーごとに異なりますが、コア機能は似ています: サードパーティのコンテキストに埋め込まれたクロスオリジンリソースには、ファーストパーティのコンテキストで読み込まれたときにアクセスできるのと同じクッキーとサイトストレージへのアクセスが与えられません。 -

    これらのクッキーブロックポリシーは、ファーストパーティストレージへのアクセスを必要とする埋め込まれたクロスオリジンコンテンツを中断することが知られています。 例として、フェデレーションログイン（federated login、複数組織にまたがったログイン）では、ファーストパーティストレージに保存されている認証クッキーへのアクセスが必要になることが多く、これらのクッキーが利用できない場合、ユーザーは各サイトに個別にサインインする（または完全に中断する）必要があります。 中断した場合、サイト所有者は、ユーザーにサイトを例外として追加するか、ポリシーを完全に無効にすることを推奨することがよくあります。 結果として、埋め込まれたコンテンツとのやり取りを継続することを希望するユーザーは、すべての埋め込まれたオリジンおよびおそらくすべてのウェブサイトから読み込まれたリソースのブロックポリシーを大幅に緩和する必要があります。

    +これらのクッキーブロックポリシーは、ファーストパーティストレージへのアクセスを必要とする埋め込まれたクロスオリジンコンテンツを中断することが知られています。 例として、フェデレーションログイン（federated login、複数組織にまたがったログイン）では、ファーストパーティストレージに保存されている認証クッキーへのアクセスが必要になることが多く、これらのクッキーが利用できない場合、ユーザーは各サイトに個別にサインインする（または完全に中断する）必要があります。 中断した場合、サイト所有者は、ユーザーにサイトを例外として追加するか、ポリシーを完全に無効にすることを推奨することがよくあります。 結果として、埋め込まれたコンテンツとのやり取りを継続することを希望するユーザーは、すべての埋め込まれたオリジンおよびおそらくすべてのウェブサイトから読み込まれたリソースのブロックポリシーを大幅に緩和する必要があります。 -

    Storage Access API は、この問題を解決することを目的としています。 埋め込まれたクロスオリジンのコンテンツは、{{domxref("Document.requestStorageAccess()")}} メソッドを介してサイトごとにファーストパーティストレージへの無制限のアクセスを要求し、{{domxref("Document.hasStorageAccess()")}} メソッドを介して既にアクセス権があるかどうかを確認できます。

    +Storage Access API は、この問題を解決することを目的としています。 埋め込まれたクロスオリジンのコンテンツは、{{domxref("Document.requestStorageAccess()")}} メソッドを介してサイトごとにファーストパーティストレージへの無制限のアクセスを要求し、{{domxref("Document.hasStorageAccess()")}} メソッドを介して既にアクセス権があるかどうかを確認できます。 -

    さらに、セキュリティ上の理由から、サンドボックス化した {{htmlelement("iframe")}} にはデフォルトでストレージアクセスを許可できません。 そのため、API は、allow-storage-access-by-user-activation sandbox トークンも追加します。 次のように、埋め込まれたウェブサイトは、これを追加してストレージアクセス要求が成功することを許可するとともに、allow-scripts と allow-same-origin を使用して API の呼び出しを許可し、クッキーを持つことができるオリジンで実行します。

    +さらに、セキュリティ上の理由から、サンドボックス化した {{htmlelement("iframe")}} にはデフォルトでストレージアクセスを許可できません。 そのため、API は、`allow-storage-access-by-user-activation` [sandbox トークン](/ja/docs/Web/HTML/Element/iframe#attr-sandbox)も追加します。 次のように、埋め込まれたウェブサイトは、これを追加してストレージアクセス要求が成功することを許可するとともに、`allow-scripts` と `allow-same-origin` を使用して API の呼び出しを許可し、クッキーを持つことができるオリジンで実行します。 -
    <iframe sandbox="allow-storage-access-by-user-activation
+```html
+
+```
 
-
    API は、潜在的なストレージの例外を、ユーザーがやり取りする意図を示したオリジンに制限するように設計されています。 これは、次の制約によって実施されます。
    
+API は、潜在的なストレージの例外を、ユーザーがやり取りする意図を示したオリジンに制限するように設計されています。 これは、次の制約によって実施されます。
 
-
      
- 
    • 埋め込まれたコンテンツがタップやクリックなどのユーザージェスチャーを現在処理していない限り、アクセス要求は自動的に拒否されます。 これにより、ページに埋め込まれたコンテンツが過剰なアクセス要求でブラウザーまたはユーザーにスパムすることも防止されます。
      • 
- 
    • ファーストパーティとしてやり取りしたことがないオリジンには、ファーストパーティストレージの概念がありません。 ユーザーの観点から見ると、そのオリジンとサードパーティの関係性しかありません。 ブラウザーが、ユーザーがファーストパーティのコンテキストで埋め込まれたコンテンツと最近やり取りしていないことをブラウザーが検出した場合、アクセス要求は自動的に拒否されます（Firefox では、「最近」は「30日以内」です）。
      • 
-
    
+- 埋め込まれたコンテンツがタップやクリックなどのユーザージェスチャーを現在処理していない限り、アクセス要求は自動的に拒否されます。 これにより、ページに埋め込まれたコンテンツが過剰なアクセス要求でブラウザーまたはユーザーにスパムすることも防止されます。
+- ファーストパーティとしてやり取りしたことがないオリジンには、ファーストパーティストレージの概念がありません。 ユーザーの観点から見ると、そのオリジンとサードパーティの関係性しかありません。 ブラウザーが、ユーザーがファーストパーティのコンテキストで埋め込まれたコンテンツと最近やり取りしていないことをブラウザーが検出した場合、アクセス要求は自動的に拒否されます（Firefox では、「最近」は「30 日以内」です）。
 
-
    ブラウザーは、到来するストレージアクセス要求を許可するかどうかの決定にユーザーを関与させることを決定する場合があります。 ストレージ許可の存続期間とブラウザーがユーザーに通知することを決定する状況に関する詳細は現在作業中であり、準備ができ次第発表されます。
    
+ブラウザーは、到来するストレージアクセス要求を許可するかどうかの決定にユーザーを関与させることを決定する場合があります。 ストレージ許可の存続期間とブラウザーがユーザーに通知することを決定する状況に関する詳細は現在作業中であり、準備ができ次第発表されます。
 
-
    ユーザープロンプト
    
+## ユーザープロンプト
 
-
    埋め込まれたクロスオリジンの文書によって requestStorageAccess() が呼び出されると、ユーザーエージェントは、要求オリジンにストレージアクセスを許可するかどうかの決定にユーザーを関与させることを選択できます。 現在、プロンプトヒューリスティック（Prompting heuristics、プロンプトするべきかを決める発見的方法）は Storage Access API の2つの実装者によって異なります。 Safari は、以前にストレージアクセスを受け取っていないすべての埋め込まれた追跡コンテンツにプロンプトを表示します。 Firefox は、追跡オリジンがサイトのしきい値数を超えてストレージアクセスを要求した後にのみユーザーにプロンプトします。 詳細については、{{domxref("Document.requestStorageAccess()")}} を参照してください。
    
+埋め込まれたクロスオリジンの文書によって `requestStorageAccess()` が呼び出されると、ユーザーエージェントは、要求オリジンにストレージアクセスを許可するかどうかの決定にユーザーを関与させることを選択できます。 現在、プロンプトヒューリスティック（Prompting heuristics、プロンプトするべきかを決める発見的方法）は Storage Access API の 2 つの実装者によって異なります。 Safari は、以前にストレージアクセスを受け取っていないすべての埋め込まれた追跡コンテンツにプロンプトを表示します。 Firefox は、追跡オリジンがサイトのしきい値数を超えてストレージアクセスを要求した後にのみユーザーにプロンプトします。 詳細については、{{domxref("Document.requestStorageAccess()")}} を参照してください。
 
-
    Safari の実装との違い
    
+## Safari の実装との違い
 
-
    API の表面は同じですが、Storage Access API を使用するウェブサイトは、Firefox と Safari の間で受け取るストレージアクセスのレベルと範囲に違いがあることを予期する必要があります。 これは、2つのブラウザーに実装されているストレージアクセスポリシーの違いが原因です。 Firefox に固有の設計プロパティを以下に要約します。
    
+API の表面は同じですが、Storage Access API を使用するウェブサイトは、Firefox と Safari の間で受け取るストレージアクセスのレベルと範囲に違いがあることを予期する必要があります。 これは、2 つのブラウザーに実装されているストレージアクセスポリシーの違いが原因です。 Firefox に固有の設計プロパティを以下に要約します。
 
-
      
- 
    • 埋め込まれたオリジン tracker.example が最上位オリジン foo.example でファーストパーティストレージへのアクセスを既に取得しており、ユーザーが foo.example からのページに埋め込まれた tracker.example からのページに、30日以内に再度訪問した場合、埋め込まれたオリジンは、読み込まれるとすぐにストレージにアクセスできます。
      • 
- 
    • 最上位オリジン foo.example のページに tracker.example の複数の {{htmlelement("iframe")}} が埋め込まれ、それらの <iframe> の1つが Storage Access API を使用してストレージアクセスを正常に取得した場合、foo.example 最上位オリジン上の tracker.example からの他のすべての iframe は、requestStorageAccess() を個別に呼び出す必要なく、すぐにストレージアクセスを取得します。
      • 
- 
    • tracker.example から埋め込まれたページが以前に最上位オリジン foo.example でストレージアクセスを正常に取得していた場合、foo.example 上の tracker.example からのすべての埋め込まれたサブリソース（スクリプト、画像、スタイルシートなど）がファーストパーティストレージにアクセスして読み込まれます。 つまり、Cookie ヘッダーを送って、到来する {{httpheader("Set-Cookie")}} ヘッダーを尊重する可能性があります。
      • 
- 
    • Firefox では、requestStorageAccess() から返された Promise が解決されると、埋め込まれたページは、クッキーだけでなく、ファーストパーティストレージ全体にアクセスできます。 これには、Web Storage、IndexedDB、DOM Cache などの API へのアクセスが含まれます。
      • 
- 
    • Firefox では、ストレージアクセス許可は30暦日が経過すると段階的に廃止されますが、Safari では、ブラウザーの使用がユーザーの操作なしで30日が経過するとストレージアクセス許可が段階的に廃止されます。 これは現在、Firefox 実装の制限であり、将来のバージョンで対処する可能性があります。 Safari では、Storage Access API を正常に使用すると、このカウンターがリセットされます。
      • 
-
    
+- 埋め込まれたオリジン `tracker.example` が最上位オリジン `foo.example` でファーストパーティストレージへのアクセスを既に取得しており、ユーザーが `foo.example` からのページに埋め込まれた `tracker.example` からのページに、30 日以内に再度訪問した場合、埋め込まれたオリジンは、読み込まれるとすぐにストレージにアクセスできます。
+- 最上位オリジン `foo.example` のページに `tracker.example` の複数の {{htmlelement("iframe")}} が埋め込まれ、それらの `
+```
 
-
    次に、埋め込まれた文書内で実行されるコードに進みます。 現在ストレージにアクセスできるかどうかはわからないため、最初に {{domxref("Document.hasStorageAccess()")}} を呼び出す必要があります。 その呼び出しが false を返す場合、{{domxref("Document.requestStorageAccess()")}} を呼び出すことができます。 それが返した結果は、前の Promise 呼び出しにチェーンできます。 最後の then では、ファーストパーティストレージへのアクセスが可能になります。
    
+次に、埋め込まれた文書内で実行されるコードに進みます。 現在ストレージにアクセスできるかどうかはわからないため、最初に {{domxref("Document.hasStorageAccess()")}} を呼び出す必要があります。 その呼び出しが `false` を返す場合、{{domxref("Document.requestStorageAccess()")}} を呼び出すことができます。 それが返した結果は、前の Promise 呼び出しにチェーンできます。 最後の `then` では、ファーストパーティストレージへのアクセスが可能になります。
 
-
    document.hasStorageAccess().then(hasAccess => {
+```js
+document.hasStorageAccess().then(hasAccess => {
   if (!hasAccess) {
     return document.requestStorageAccess();
   }
-}).then(_ => {
+}).then(_ => {
   // これで、ファーストパーティストレージにアクセスできます！
 
   // ファーストパーティのクッキージャーからいくつかのアイテムにアクセスしましょう
   document.cookie = "foo=bar";              // クッキーを設定
   localStorage.setItem("username", "John"); // localStorage エントリにアクセス
-}).catch(_ => {
+}).catch(_ => {
   // ストレージアクセスの取得エラー。
-});
    
+});
+```
 
-
    埋め込まれたコンテンツがタップやクリックなどのユーザージェスチャーを現在処理していない限り、アクセス要求は自動的に拒否されることに注意してください。 このコードは、例えば、次のようなユーザージェスチャーベースのイベントハンドラー内で実行する必要があります。
    
+埋め込まれたコンテンツがタップやクリックなどのユーザージェスチャーを現在処理していない限り、アクセス要求は自動的に拒否されることに注意してください。 このコードは、例えば、次のようなユーザージェスチャーベースのイベントハンドラー内で実行する必要があります。
 
-
    btn.addEventListener('click', () => {
+```js
+btn.addEventListener('click', () => {
   // ここでコードを実行します
-});
    
+});
+```
diff --git a/files/ja/web/api/subtlecrypto/digest/index.md b/files/ja/web/api/subtlecrypto/digest/index.md
index 87a91bf34645d5..0524502fb968dd 100644
--- a/files/ja/web/api/subtlecrypto/digest/index.md
+++ b/files/ja/web/api/subtlecrypto/digest/index.md
@@ -11,73 +11,65 @@ tags:
   - メソッド
 translation_of: Web/API/SubtleCrypto/digest
 ---
-
    {{APIRef("Web Crypto API")}}{{SecureContext_header}}
    
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
 
-
    {{domxref("SubtleCrypto")}} インターフェースの digest() メソッドは、指定されたデータの {{Glossary("digest")}} を返します。ダイジェストとは、可変長の入力に由来する固定長の短い値です。暗号的ダイジェスト値は耐衝突性を示すため、同じダイジェスト値を持つ2つの異なる入力を見つけるのは非常に困難です。
    
+{{domxref("SubtleCrypto")}} インターフェースの **`digest()`** メソッドは、指定されたデータの {{Glossary("digest")}} を返します。ダイジェストとは、可変長の入力に由来する固定長の短い値です。暗号的ダイジェスト値は耐衝突性を示すため、同じダイジェスト値を持つ 2 つの異なる入力を見つけるのは非常に困難です。
 
-
    引数として、使用するダイジェストアルゴリズムの識別子とダイジェスト値の元となるデータを受け取ります。ダイジェスト値で解決される {{jsxref("Promise")}} を返します。
    
+引数として、使用するダイジェストアルゴリズムの識別子とダイジェスト値の元となるデータを受け取ります。ダイジェスト値で解決される {{jsxref("Promise")}} を返します。
 
-
    構文
    
+## 構文
 
-
    const digest = crypto.subtle.digest(algorithm, data);
-
    
+```
+const digest = crypto.subtle.digest(algorithm, data);
+```
 
-
    引数
    
+### 引数
 
-
      
- 
    • algorithm は、使用するダイジェストアルゴリズムを定義する {{domxref("DOMString")}} です。サポートされる値は次のとおりです:
+- `algorithm` は、使用するダイジェストアルゴリズムを定義する {{domxref("DOMString")}} です。サポートされる値は次のとおりです:
 
-  
        
-   
      • SHA-1 (暗号化アプリケーションではこれを使用しないでください)
        • 
-   
      • SHA-256
        • 
-   
      • SHA-384
        • 
-   
      • SHA-512
        • 
-  
      
- 
      • 
- 
    • data は、ダイジェスト値の元となるデータを含む {{jsxref("ArrayBuffer")}} もしくは {{domxref("ArrayBufferView")}} です。
      • 
-
    
+  - `SHA-1` (暗号化アプリケーションではこれを使用しないでください)
+  - `SHA-256`
+  - `SHA-384`
+  - `SHA-512`
 
-
    返値
    
+- `data` は、ダイジェスト値の元となるデータを含む {{jsxref("ArrayBuffer")}} もしくは {{domxref("ArrayBufferView")}} です。
 
-
      
- 
    • digest は {{jsxref("Promise")}} であり、ダイジェスト値を含む {{jsxref("ArrayBuffer")}} で解決されます。
      • 
-
    
+### 返値
 
-
    対応しているアルゴリズム
    
+- `digest` は {{jsxref("Promise")}} であり、ダイジェスト値を含む {{jsxref("ArrayBuffer")}} で解決されます。
 
-
    ダイジェストアルゴリズムは 暗号ハッシュ関数 とも呼ばれ、任意の大きなデータブロックを固定サイズの出力 (通常は入力よりもはるかに短い出力) に変換します。暗号化にはさまざまな用途があります。
    
+## 対応しているアルゴリズム
 
-
    SHA-1
    
+ダイジェストアルゴリズムは [暗号ハッシュ関数](/ja/docs/Glossary/Cryptographic_hash_function) とも呼ばれ、任意の大きなデータブロックを固定サイズの出力 (通常は入力よりもはるかに短い出力) に変換します。暗号化にはさまざまな用途があります。
 
-
    このアルゴリズムは FIPS 180-4, section 6.1 で定義されており、160 bit 長の出力を生成します。
    
+### SHA-1
 
-
    
-
    警告: このアルゴリズムは現在脆弱であると見なされているため、暗号化アプリケーションには使用しないでください。
    
-
    
+このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.1 で定義されており、160 bit 長の出力を生成します。
 
-
    SHA-256
    
+> **Warning:** **警告**: このアルゴリズムは現在脆弱であると見なされているため、暗号化アプリケーションには使用しないでください。
 
-
    このアルゴリズムは FIPS 180-4, section 6.2 で定義されており、256 bit 長の出力を生成します。
    
+### SHA-256
 
-
    SHA-384
    
+このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.2 で定義されており、256 bit 長の出力を生成します。
 
-
    このアルゴリズムは FIPS 180-4, section 6.5 で定義されており、384 bit 長の出力を生成します。
    
+### SHA-384
 
-
    SHA-512
    
+このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.5 で定義されており、384 bit 長の出力を生成します。
 
-
    このアルゴリズムは FIPS 180-4, section 6.4 で定義されており、512 bit 長の出力を生成します。
    
+### SHA-512
 
-
    
-
    ヒント: キー付きハッシュメッセージ認証コード (HMAC), の作成方法をここで探している場合は、代わりに SubtleCrypto.sign() を使用する必要があります。
    
-
    
+このアルゴリズムは [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.4 で定義されており、512 bit 長の出力を生成します。
 
-
    例
    
+> **Note:** ヒント: キー付きハッシュメッセージ認証コード ([HMAC](/ja/docs/Glossary/HMAC)), の作成方法をここで探している場合は、代わりに [SubtleCrypto.sign()](/ja/docs/Web/API/SubtleCrypto/sign#HMAC) を使用する必要があります。
 
-
    基本的な例
    
+## 例
 
-
    この例では、メッセージをエンコードし、 SHA-256 ダイジェスト値を計算して、ダイジェスト長を記録します:
    
+### 基本的な例
 
-
    const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+この例では、メッセージをエンコードし、 SHA-256 ダイジェスト値を計算して、ダイジェスト長を記録します:
+
+```js
+const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
 
 async function digestMessage(message) {
   const encoder = new TextEncoder();
@@ -88,56 +80,40 @@ async function digestMessage(message) {
 
 const digestBuffer = await digestMessage(text);
 console.log(digestBuffer.byteLength);
-
    
+```
 
-
    ダイジェスト値を16進文字列に変換する
    
+### ダイジェスト値を 16 進文字列に変換する
 
-
    ダイジェストはArrayBufferとして返されますが、比較および表示のために、ダイジェスト値は多くの場合16進文字列として表されます。 この例では、ダイジェストを計算し、ArrayBufferを16進文字列に変換します:
    
+ダイジェストは`ArrayBuffer`として返されますが、比較および表示のために、ダイジェスト値は多くの場合 16 進文字列として表されます。 この例では、ダイジェストを計算し、`ArrayBuffer`を 16 進文字列に変換します:
 
-
    const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+```js
+const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
 
 async function digestMessage(message) {
   const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
   const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
   const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
-  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
   return hashHex;
 }
 
 const digestHex = await digestMessage(text);
 console.log(digestHex);
-
    
-
-
    仕様書
    
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}初回定義
    
-
-
    ブラウザーの互換性
    
-
-
    {{Compat("api.SubtleCrypto.digest")}}
    
-
-
    
-
    Chrome 60 では、 TLS 接続出ない場合に crypto.subtle を無効化する機能が追加されました。
    
-
    
-
-
    関連情報
    
-
-
+```
+
+## 仕様書
+
+| 仕様書                                                                                                                   | 状態                                 | 備考     |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------- |
+| {{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}} | {{Spec2('Web Crypto API')}} | 初回定義 |
+
+## ブラウザーの互換性
+
+{{Compat("api.SubtleCrypto.digest")}}
+
+> **Note:** Chrome 60 では、 TLS 接続出ない場合に crypto.subtle を無効化する機能が追加されました。
+
+## 関連情報
+
+- [Chromium secure origins specification](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features)
+- [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf) specifies the SHA family of digest algorithms.
diff --git a/files/ja/web/api/subtlecrypto/index.md b/files/ja/web/api/subtlecrypto/index.md
index f313b73907b7a8..8dd963cde5afa3 100644
--- a/files/ja/web/api/subtlecrypto/index.md
+++ b/files/ja/web/api/subtlecrypto/index.md
@@ -8,74 +8,55 @@ tags:
   - Web Crypto API
 translation_of: Web/API/SubtleCrypto
 ---
-
    {{APIRef("Web Crypto API")}}
    
+{{APIRef("Web Crypto API")}}
 
-
    SubtleCrypto インターフェイスは、暗号プリミティブのセットを表します。これは、window コンテキスト ({{domxref("Window.crypto")}}) 内で利用可能な {{domxref("Crypto.subtle")}} プロパティを通して利用できます。
    
+**`SubtleCrypto`** インターフェイスは、暗号プリミティブのセットを表します。これは、window コンテキスト ({{domxref("Window.crypto")}}) 内で利用可能な {{domxref("Crypto.subtle")}} プロパティを通して利用できます。
 
-
    
-
    仕様書より引用 (拙訳): "開発者は、SubtleCrypto インターフェイスを使用する際に、提供される様々なアルゴリズムの設計と実装の両面でセキュリティに関わる問題に注意を払うことが期待されます。生のアルゴリズムは、その使用に必要とされる独自のセキュリティパラメーターとコンポジションを表す多様なプロトコルとアプリケーションの実装において、開発者に最大限の柔軟性を許すために提供されます。"
    
-
    
+> **Warning:** 仕様書より引用 (拙訳): "開発者は、SubtleCrypto インターフェイスを使用する際に、提供される様々なアルゴリズムの設計と実装の両面でセキュリティに関わる問題に注意を払うことが期待されます。生のアルゴリズムは、その使用に必要とされる独自のセキュリティパラメーターとコンポジションを表す多様なプロトコルとアプリケーションの実装において、開発者に最大限の柔軟性を許すために提供されます。"
 
-
    プロパティ
    
+## プロパティ
 
-
    このインターフェイスはどのプロパティも定義または継承しません。
    
+_このインターフェイスはどのプロパティも定義または継承しません。_
 
-
    メソッド
    
+## メソッド
 
-
    このインターフェイスはどのメソッドも継承しません。
    
+このインターフェイスはどのメソッドも継承しません。
 
-
    
- 
    {{domxref("SubtleCrypto.encrypt()")}}
    
- 
    引数に与えられた平文テキストおよびアルゴリズム、鍵に対応する暗号化されたデータの {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.decrypt()")}}
    
- 
    引数に与えられた暗号化されたテキストおよびアルゴリズム、鍵に対応する平文データの {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.sign()")}}
    
- 
    引数に与えられたテキストおよびアルゴリズム、鍵に対応する署名の {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.verify()")}}
    
- 
    引数に与えられた署名が、同じく引数に与えられたテキストおよびアルゴリズム、鍵と一致するかどうかを示す {{jsxref("Boolean")}} 値の {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.digest()")}}
    
- 
    引数に与えられたアルゴリズムとテキストから生成されたダイジェストの {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.generateKey()")}}
    
- 
    引数に与えられたアルゴリズム、抽出可能性、使用法と一致する、対称アルゴリズムでは新たに生成された {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を、非対称アルゴリズムでは 2 個の新たに生成された鍵を含む {{domxref("CryptoKeyPair")}} の {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.deriveKey()")}}
    
- 
    引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.deriveBits()")}}
    
- 
    引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、疑似乱数ビットの新たに生成されたバッファーの {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.importKey()")}}
    
- 
    引数に与えられた書式およびアルゴリズム、生の鍵データ、使用法、抽出可能性に対応する {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.exportKey()")}}
    
- 
    要求された書式内の鍵を含むバッファーの {{jsxref("Promise")}} を返します。
    
- 
    {{domxref("SubtleCrypto.wrapKey()")}}
    
- 
    安全でない環境での使用法 (transfer, storage) について、ラップされた対称鍵の {{jsxref("Promise")}} を返します。返されるラップされたバッファーは、引数に与えられた書式内にあり、与えられたアルゴリズムで与えられたラッピング鍵によりラップされた鍵を含みます。
    
- 
    {{domxref("SubtleCrypto.unwrapKey()")}}
    
- 
    引数に与えられたラップされた鍵に対応する {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
    
-
    
+- {{domxref("SubtleCrypto.encrypt()")}}
+  - : 引数に与えられた平文テキストおよびアルゴリズム、鍵に対応する暗号化されたデータの {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.decrypt()")}}
+  - : 引数に与えられた暗号化されたテキストおよびアルゴリズム、鍵に対応する平文データの {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.sign()")}}
+  - : 引数に与えられたテキストおよびアルゴリズム、鍵に対応する署名の {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.verify()")}}
+  - : 引数に与えられた署名が、同じく引数に与えられたテキストおよびアルゴリズム、鍵と一致するかどうかを示す {{jsxref("Boolean")}} 値の {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.digest()")}}
+  - : 引数に与えられたアルゴリズムとテキストから生成されたダイジェストの {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.generateKey()")}}
+  - : 引数に与えられたアルゴリズム、抽出可能性、使用法と一致する、対称アルゴリズムでは新たに生成された {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を、非対称アルゴリズムでは 2 個の新たに生成された鍵を含む {{domxref("CryptoKeyPair")}} の {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.deriveKey()")}}
+  - : 引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、新たに生成された {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.deriveBits()")}}
+  - : 引数に与えられたマスターキーと特定のアルゴリズムによりもたらされる、疑似乱数ビットの新たに生成されたバッファーの {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.importKey()")}}
+  - : 引数に与えられた書式およびアルゴリズム、生の鍵データ、使用法、抽出可能性に対応する {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.exportKey()")}}
+  - : 要求された書式内の鍵を含むバッファーの {{jsxref("Promise")}} を返します。
+- {{domxref("SubtleCrypto.wrapKey()")}}
+  - : 安全でない環境での使用法 (transfer, storage) について、ラップされた対称鍵の {{jsxref("Promise")}} を返します。返されるラップされたバッファーは、引数に与えられた書式内にあり、与えられたアルゴリズムで与えられたラッピング鍵によりラップされた鍵を含みます。
+- {{domxref("SubtleCrypto.unwrapKey()")}}
+  - : 引数に与えられたラップされた鍵に対応する {{domxref("CryptoKey")}} の {{jsxref("Promise")}} を返します。
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様書策定状況備考
    {{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}{{ Spec2('Web Crypto API') }}初期定義。
    
+| 仕様書                                                                                               | 策定状況                                 | 備考       |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------- |
+| {{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }} | {{ Spec2('Web Crypto API') }} | 初期定義。 |
 
-
    ブラウザーの実装状況
    
+## ブラウザーの実装状況
 
+{{Compat("api.SubtleCrypto")}}
 
+## 関連情報
 
-
    {{Compat("api.SubtleCrypto")}}
    
-
-
    関連情報
    
-
-
      
- 
    • {{domxref("Crypto")}} および {{domxref("Crypto.subtle")}}。
      • 
-
    
+- {{domxref("Crypto")}} および {{domxref("Crypto.subtle")}}。
diff --git a/files/ja/web/api/svggraphicselement/getbbox/index.md b/files/ja/web/api/svggraphicselement/getbbox/index.md
index 68e2885a79d3ae..5257e6fe091a3b 100644
--- a/files/ja/web/api/svggraphicselement/getbbox/index.md
+++ b/files/ja/web/api/svggraphicselement/getbbox/index.md
@@ -11,43 +11,45 @@ tags:
   - メソッド
 translation_of: Web/API/SVGGraphicsElement/getBBox
 ---
-
    {{APIRef}}
    
+{{APIRef}}
 
-
    SVGGraphicsElement.getBBox() で、オブジェクトが収まる最小の矩形の座標を特定することができます。返される座標は、現在の SVG 空間、すなわち対象の要素に含まれる位置に関する属性すべてを適用した後の空間に従います。
    
+**`SVGGraphicsElement.getBBox()`** で、オブジェクトが収まる最小の矩形の座標を特定することができます。返される座標は、現在の SVG 空間、すなわち対象の要素に含まれる位置に関する属性すべてを適用した後の空間に従います。
 
-
    メモ: getBBox は要素がまだレンダリングされていない場合でも、メソッドが呼び出されたときに実際の境界ボックスを返します。また、要素またはその親に適用される変換は無視します。
    
+メモ: `getBBox` は要素がまだレンダリングされていない場合でも、メソッドが呼び出されたときに実際の境界ボックスを返します。また、要素またはその親に適用される変換は無視します。
 
-
    
-
    getBBox は {{domxref("Element.getBoundingClientRect()", "getBoundingClientRect()")}} とは異なる値を返します。後者はビューポートからの相対値を返します。
    
-
    
+> **Note:** `getBBox` は {{domxref("Element.getBoundingClientRect()", "getBoundingClientRect()")}} とは異なる値を返します。後者はビューポートからの相対値を返します。
 
-
    構文
    
+## 構文
 
-
    let bboxRect = object.getBBox();
    
+```
+let bboxRect = object.getBBox();
+```
 
-
    返値
    
+### 返値
 
-
    返値は {{domxref("SVGRect")}} オブジェクトで、境界ボックスを定義します。この値はその要素や親要素に適用された変形属性を無視したものです。
    
+返値は {{domxref("SVGRect")}} オブジェクトで、境界ボックスを定義します。この値はその要素や親要素に適用された変形属性を無視したものです。
 
-
    例
    
+## 例
 
-
    HTML
    
+### HTML
 
-
    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-    <g id="group_text_1">
-        <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
-        <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">Hello World Again!</text>
-    </g>
-    <!-- Shows BBox in green -->
-    <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect>
-    <!-- Shows BoundingClientRect in red -->
-    <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect>
-</svg>
-
    
+```html
+
+    
+        Hello World!
+        Hello World Again!
+    
+    
+     
+    
+    
+
+```
 
-
    JavaScript
    
+### JavaScript
 
-
    var rectBBox = document.querySelector('#rect_1');
+```js
+var rectBBox = document.querySelector('#rect_1');
 var rectBoundingClientRect = document.querySelector('#rect_2');
 var groupElement = document.querySelector('#group_text_1');
 
@@ -61,29 +63,15 @@ var boundingClientRectGroup = groupElement.getBoundingClientRect();
 rectBoundingClientRect.setAttribute('x', boundingClientRectGroup.x);
 rectBoundingClientRect.setAttribute('y', boundingClientRectGroup.y);
 rectBoundingClientRect.setAttribute('width', boundingClientRectGroup.width);
-rectBoundingClientRect.setAttribute('height', boundingClientRectGroup.height);
    
-
-
    仕様書
    
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{SpecName('SVG1.1', 'types.html#__svg__SVGLocatable__getBBox', 'getBBox')}}{{Spec2('SVG1.1')}}初回定義 (SVG 要素のみに適用).
    
-
-
    関連情報
    
-
-
+rectBoundingClientRect.setAttribute('height', boundingClientRectGroup.height);
+```
+
+## 仕様書
+
+| 仕様書                                                                                               | 状態                     | 備考                           |
+| ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------ |
+| {{SpecName('SVG1.1', 'types.html#__svg__SVGLocatable__getBBox', 'getBBox')}} | {{Spec2('SVG1.1')}} | 初回定義 (SVG 要素のみに適用). |
+
+## 関連情報
+
+- [getBBox in SVG Primer](https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#getBBox)
diff --git a/files/ja/web/api/svggraphicselement/index.md b/files/ja/web/api/svggraphicselement/index.md
index 6ca8f103464484..6046e2ad11ef2b 100644
--- a/files/ja/web/api/svggraphicselement/index.md
+++ b/files/ja/web/api/svggraphicselement/index.md
@@ -9,59 +9,38 @@ tags:
   - SVG OM
 translation_of: Web/API/SVGGraphicsElement
 ---
-
    {{APIRef("SVG")}}
    
+{{APIRef("SVG")}}
 
-
    SVGGraphicsElement インターフェイスは、直接グループにグラフィックを描画することを主な目的とした SVG 要素を表します。
    
+**`SVGGraphicsElement`** インターフェイスは、直接グループにグラフィックを描画することを主な目的とした SVG 要素を表します。
 
-
    {{InheritanceDiagram(600, 120)}}
    
+{{InheritanceDiagram(600, 120)}}
 
-
    
-
    メモ: このインターフェイスは SVG 2 で導入され、 SVG 1.1 で導入された {{domxref("SVGLocatable")}} および {{domxref("SVGTransformable")}} インターフェイスを置き換えています。
    
-
    
+> **Note:** **メモ:** このインターフェイスは SVG 2 で導入され、 SVG 1.1 で導入された {{domxref("SVGLocatable")}} および {{domxref("SVGTransformable")}} インターフェイスを置き換えています。
 
-
    プロパティ
    
+## プロパティ
 
-
    このインターフェイスは親である {{domxref("SVGElement")}} からプロパティを継承しています。
    
+_このインターフェイスは親である {{domxref("SVGElement")}} からプロパティを継承しています。_
 
-
    
- 
    {{domxref("SVGGraphicsElement.transform")}} {{ReadOnlyInline}}
    
- 
    {{domxref("SVGAnimatedTransformList")}} で、指定された要素の {{cssxref("transform")}} プロパティおよび関連する {{SVGAttr("transform")}} 属性の計算値を反映します。
    
-
    
+- {{domxref("SVGGraphicsElement.transform")}} {{ReadOnlyInline}}
+  - : {{domxref("SVGAnimatedTransformList")}} で、指定された要素の {{cssxref("transform")}} プロパティおよび関連する {{SVGAttr("transform")}} 属性の計算値を反映します。
 
-
    メソッド
    
+## メソッド
 
-
    このインターフェイスは親である {{domxref("SVGElement")}} からメソッドを継承しています。
    
+_このインターフェイスは親である {{domxref("SVGElement")}} からメソッドを継承しています。_
 
-
    
- 
    {{domxref("SVGGraphicsElement.getBBox()")}}
    
- 
    {{domxref("DOMRect")}} で、現在の要素の計算上の囲みボックスを返します。
    
- 
    {{domxref("SVGGraphicsElement.getCTM()")}}
    
- 
    {{domxref("DOMMatrix")}} で、現在の要素の座標系をその SVG ビューポートの座標系に変換する行列を返します。
    
- 
    {{domxref("SVGGraphicsElement.getScreenCTM()")}}
    
- 
    {{domxref("DOMMatrix")}} で、現在の要素の座標系を SVG 文書フラグメントの SVG ビューポートの座標系に変換する行列を返します。
    
-
    
+- {{domxref("SVGGraphicsElement.getBBox()")}}
+  - : {{domxref("DOMRect")}} で、現在の要素の計算上の囲みボックスを返します。
+- {{domxref("SVGGraphicsElement.getCTM()")}}
+  - : {{domxref("DOMMatrix")}} で、現在の要素の座標系をその SVG ビューポートの座標系に変換する行列を返します。
+- {{domxref("SVGGraphicsElement.getScreenCTM()")}}
+  - : {{domxref("DOMMatrix")}} で、現在の要素の座標系を SVG 文書フラグメントの SVG ビューポートの座標系に変換する行列を返します。
 
-
    仕様書
    
+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{SpecName("SVG2", "types.html#InterfaceSVGGraphicsElement", "SVGGraphicsElement")}}{{Spec2("SVG2")}}初回定義
    
+| 仕様書                                                                                                           | 状態                     | 備考     |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- |
+| {{SpecName("SVG2", "types.html#InterfaceSVGGraphicsElement", "SVGGraphicsElement")}} | {{Spec2("SVG2")}} | 初回定義 |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
-
-
    {{Compat("api.SVGGraphicsElement")}}
    
+{{Compat("api.SVGGraphicsElement")}}
diff --git a/files/ja/web/api/texttrack/cuechange_event/index.md b/files/ja/web/api/texttrack/cuechange_event/index.md
index 3911bcb2eea81d..649148dab40578 100644
--- a/files/ja/web/api/texttrack/cuechange_event/index.md
+++ b/files/ja/web/api/texttrack/cuechange_event/index.md
@@ -15,92 +15,85 @@ tags:
   - トラック
 translation_of: Web/API/TextTrack/cuechange_event
 ---
-
    {{APIRef}}
    
+{{APIRef}}
 
-
    cuechange イベントは、 {{domxref("TextTrack")}} が現在表示しているキューが変更されたときに発生します。このイベントは、もし表示されているものがあれば、 TextTrack および {{domxref("HTMLTrackElement")}} の両方に発生します。
    
+**`cuechange`** イベントは、 {{domxref("TextTrack")}} が現在表示しているキューが変更されたときに発生します。このイベントは、もし表示されているものがあれば、 `TextTrack` _および_ {{domxref("HTMLTrackElement")}} の両方に発生します。
 
 
- 
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
-  
-   
-   
-  
- 
+  
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+    
+      
+      
+    
+  
    バブリングなし
    キャンセル不可
    インターフェイス{{domxref("Event")}}
    イベントハンドラープロパティ{{domxref("GlobalEventHandlers.oncuechange")}}
    バブリングなし
    キャンセル不可
    インターフェイス{{domxref("Event")}}
    イベントハンドラープロパティ{{domxref("GlobalEventHandlers.oncuechange")}}
    
 
    
 
-
    例
    
+## 例
 
-
    TextTrack 上で
    
+### TextTrack 上で
 
-
    cuechange イベントのリスナーを TextTrack に設定するには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用します。
    
+`cuechange` イベントのリスナーを `TextTrack` に設定するには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用します。
 
-
    track.addEventListener('cuechange', function () {
+```js
+track.addEventListener('cuechange', function () {
   let cues = track.activeCues;  // 現在のキューの配列
 });
-
    
+```
 
-
    あるいは、 oncuechange イベントハンドラ－プロパティを設定しても構いません。
    
+あるいは、 [`oncuechange`](/ja/docs/Web/API/TextTrack/oncuechange) イベントハンドラ－プロパティを設定しても構いません。
 
-
    track.oncuechange = function () {
+```js
+track.oncuechange = function () {
   let cues = track.activeCues; // 現在のキューの配列
-}
    
+}
+```
 
-
    track 要素上で
    
+### track 要素上で
 
-
    基本となる {{domxref("TextTrack")}} は、 {{domxref("HTMLTrackElement.track", "track")}} プロパティで識別されますが、現在表示されているキューが変更されるたびに {{domxref("TextTrack.cuechange_event", "cuechange")}} イベントを受け取ります。これは、トラックがメディア要素に結び付けられていなくても発生します。
    
+基本となる {{domxref("TextTrack")}} は、 {{domxref("HTMLTrackElement.track", "track")}} プロパティで識別されますが、現在表示されているキューが変更されるたびに {{domxref("TextTrack.cuechange_event", "cuechange")}} イベントを受け取ります。これは、トラックがメディア要素に結び付けられていなくても発生します。
 
-
    トラックがメディア要素に結び付けられている場合、 {{HTMLElement("track")}} 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素の子として使用すると、 cuechange イベントは {{domxref("HTMLTrackElement")}} にも送信されます。
    
+トラックがメディア要素に結び付けられて*いる*場合、 {{HTMLElement("track")}} 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素の子として使用すると、 `cuechange` イベントは {{domxref("HTMLTrackElement")}} にも送信されます。
 
-
    let textTrackElem = document.getElementById("texttrack");
+```js
+let textTrackElem = document.getElementById("texttrack");
 
-textTrackElem.addEventListener("cuechange", (event) => {
+textTrackElem.addEventListener("cuechange", (event) => {
   let cues = event.target.track.activeCues;
 });
-
    
+```
 
-
    また、oncuechange イベントハンドラーを使用することもできます。
    
+また、`oncuechange` イベントハンドラーを使用することもできます。
 
-
    let textTrackElem = document.getElementById("texttrack");
+```js
+let textTrackElem = document.getElementById("texttrack");
 
-textTrackElem.oncuechange = (event) => {
+textTrackElem.oncuechange = (event) => {
   let cues = event.target.track.activeCues;
-});
    
-
-
    仕様書
    
-
-
- 
-  
-   
-   
-  
- 
- 
-  
-   
-   
-  
- 
-
    仕様書状態
    {{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}{{Spec2('HTML WHATWG')}}
    
+});
+```
+
+## 仕様書
+
+| 仕様書                                                                                   | 状態                             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}} | {{Spec2('HTML WHATWG')}} |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
    {{Compat("api.TextTrack.cuechange_event")}}
    
+{{Compat("api.TextTrack.cuechange_event")}}
 
-
    関連情報
    
+## 関連情報
 
-
      
- 
    • {{glossary("WebVTT")}}
      • 
-
    
+- {{glossary("WebVTT")}}
diff --git a/files/ja/web/api/texttrack/index.md b/files/ja/web/api/texttrack/index.md
index 33346e512bc9ef..730834e7e20208 100644
--- a/files/ja/web/api/texttrack/index.md
+++ b/files/ja/web/api/texttrack/index.md
@@ -13,88 +13,66 @@ tags:
   - インターフェイス
 translation_of: Web/API/TextTrack
 ---
-
    {{APIRef("WebVTT")}}
    
-
-
    
-
    TextTrack インターフェイスは — WebVTT (メディア表示上のテキストトラック) を扱う API の一部ですが — 特定の {{HTMLElement("track")}} 要素に関連付けられたテキストトラックを記述および制御します。
    
-
    
-
-
    プロパティ
    
-
-
    このインターフェイスは {{domxref("EventTarget")}} からプロパティを継承しています。
    
-
-
    
- 
    {{domxref("TextTrack.activeCues")}} {{readonlyInline}}
    
- 
    現在アクティブなテキストトラックキューのセットをリストする {{domxref("TextTrackCueList")}} オブジェクト。メディアの現在の再生位置がキューの開始時間と終了時間の間にある場合、トラックキューはアクティブです。つまり、キャプションや字幕のような表示されるキューでは、アクティブキューが現在表示されているものです。
    
- 
    {{domxref("TextTrack.cues")}} {{readonlyInline}}
    
- 
    トラックのすべてのキューを含む {{domxref("TextTrackCueList")}}。
    
- 
    {{domxref("TextTrack.id")}} {{readonlyInline}}
    
- 
    トラックがある場合は、それを識別する {{domxref("DOMString")}}。 ID がない場合、この値は空の文字列 ("") です。 TextTrack が {{HTMLElement("track")}} 要素に関連付けられている場合、トラックの ID は要素の ID と一致します。
    
- 
    {{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}
    
- 
    トラックのインバンドメタデータトラックディスパッチタイプ（in-band metadata track dispatch type）を示す {{domxref("DOMString")}} を返します。 詳細が必要
    
- 
    {{domxref("TextTrack.kind")}} {{readonlyInline}}
    
- 
    TextTrack が記述するテキストトラックの kind を示す {{domxref("DOMString")}} を返します。 値は TextTrackKind 列挙型のいずれかでなければなりません。
    
- 
    {{domxref("TextTrack.label")}} {{readonlyInline}}
    
- 
    テキストトラックのラベルがあれば、それを含む人間が読める {{domxref("DOMString")}}。 それ以外の場合、これは空の文字列（""）になります。 空の文字列の場合、トラックのラベルをユーザーに公開する必要がある場合は、トラックの他の属性を使用してコードでカスタムラベルを生成する必要があります。
    
- 
    {{domxref("TextTrack.language")}} {{readonlyInline}}
    
- 
    テキストトラックの内容が書かれているテキスト言語を指定する {{domxref("DOMString")}}。 値は、HTML の lang 属性と同じように、IETF の言語を識別するためのタグ（BCP 47）文書で指定されている形式に準拠する必要があります。 例えば、米国英語の場合は "en-US"、ブラジルポルトガル語の場合は "pt-BR" になります。
    
- 
    {{domxref("TextTrack.mode")}}
    
- 
    トラックの現在のモードを指定する {{domxref("DOMString")}}。 このプロパティの値を変更すると、トラックの現在のモードが一致するように変更されます。 許容値はテキストトラックモード定数にリストされています。既定値は disabled ですが、 {{HTMLElement("track")}} 要素の {{htmlattrxref("default", "track")}} 論理属性が指定されていた場合は、既定のモードは started になります。
    
-
    
-
-
    イベント
    
-
-
    
- 
    {{domxref("TextTrack.cuechange_event","cuechange")}}
    
- 
    キューが出入りしたときに発生します。 特定のテキストキューは、キューに入ると表示され、キューから出ると消えます。
    
- {{domxref("TextTrack.oncuechange","oncuechange")}} プロパティからも利用できます。
    
-
    
-
-
    メソッド
    
-
-
    このインターフェイスは {{domxref("EventTarget")}} からもメソッドを継承しています。
    
-
-
    
- 
    {{domxref("TextTrack.addCue()")}}
    
- 
    ({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューをトラックのキューのリストに追加します。
    
- 
    {{domxref("TextTrack.removeCue()")}}
    
- 
    トラックのキューのリストから ({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューを取り除きます。
    
-
    
-
-
    
-
    
-
-
    例
    
-
-
    作成中
    
-
-
    仕様書
    
-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }}{{ Spec2('HTML WHATWG') }}
    
-
-
    ブラウザーの互換性
    
-
-
    {{Compat("api.TextTrack")}}
    
-
-
    関連情報
    
-
-
      
- 
    • WebVTT
      • 
- 
    • {{domxref("TextTrackCueList")}}
      • 
- 
    • {{domxref("VTTCue")}}
      • 
- 
    • {{HTMLElement("track")}}
      • 
- 
    • {{domxref("HTMLTrackElement")}}
      • 
-
    
+{{APIRef("WebVTT")}}
+
+`TextTrack` インターフェイスは — WebVTT (メディア表示上のテキストトラック) を扱う API の一部ですが — 特定の {{HTMLElement("track")}} 要素に関連付けられたテキストトラックを記述および制御します。
+
+## プロパティ
+
+_このインターフェイスは {{domxref("EventTarget")}} からプロパティを継承しています。_
+
+- {{domxref("TextTrack.activeCues")}} {{readonlyInline}}
+  - : 現在アクティブなテキストトラックキューのセットをリストする {{domxref("TextTrackCueList")}} オブジェクト。メディアの現在の再生位置がキューの開始時間と終了時間の間にある場合、トラックキューはアクティブです。つまり、キャプションや字幕のような表示されるキューでは、アクティブキューが現在表示されているものです。
+- {{domxref("TextTrack.cues")}} {{readonlyInline}}
+  - : トラックのすべてのキューを含む {{domxref("TextTrackCueList")}}。
+- {{domxref("TextTrack.id")}} {{readonlyInline}}
+  - : トラックがある場合は、それを識別する {{domxref("DOMString")}}。 ID がない場合、この値は空の文字列 (`""`) です。 `TextTrack` が {{HTMLElement("track")}} 要素に関連付けられている場合、トラックの ID は要素の ID と一致します。
+- {{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}
+  - : トラックのインバンドメタデータトラックディスパッチタイプ（in-band metadata track dispatch type）を示す {{domxref("DOMString")}} を返します。 _**詳細が必要**_
+- {{domxref("TextTrack.kind")}} {{readonlyInline}}
+  - : `TextTrack` が記述するテキストトラックの kind を示す {{domxref("DOMString")}} を返します。 値は `TextTrackKind` 列挙型のいずれかでなければなりません。
+- {{domxref("TextTrack.label")}} {{readonlyInline}}
+  - : テキストトラックのラベルがあれば、それを含む人間が読める {{domxref("DOMString")}}。 それ以外の場合、これは空の文字列（`""`）になります。 空の文字列の場合、トラックのラベルをユーザーに公開する必要がある場合は、トラックの他の属性を使用してコードでカスタムラベルを生成する必要があります。
+- {{domxref("TextTrack.language")}} {{readonlyInline}}
+  - : テキストトラックの内容が書かれているテキスト言語を指定する {{domxref("DOMString")}}。 値は、HTML の lang 属性と同じように、IETF の[言語を識別するためのタグ](https://tools.ietf.org/html/bcp47)（[BCP 47](https://tools.ietf.org/html/bcp47)）文書で指定されている形式に準拠する必要があります。 例えば、米国英語の場合は `"en-US"`、ブラジルポルトガル語の場合は `"pt-BR"` になります。
+- {{domxref("TextTrack.mode")}}
+  - : トラックの現在のモードを指定する {{domxref("DOMString")}}。 このプロパティの値を変更すると、トラックの現在のモードが一致するように変更されます。 許容値は[テキストトラックモード定数](/ja/docs/Web/API/TextTrack/mode#Text_track_mode_constants)にリストされています。既定値は `disabled` ですが、 {{HTMLElement("track")}} 要素の {{htmlattrxref("default", "track")}} 論理属性が指定されていた場合は、既定のモードは `started` になります。
+
+## イベント
+
+- {{domxref("TextTrack.cuechange_event","cuechange")}}
+  - : キューが出入りしたときに発生します。 特定のテキストキューは、キューに入ると表示され、キューから出ると消えます。
+    {{domxref("TextTrack.oncuechange","oncuechange")}} プロパティからも利用できます。
+
+## メソッド
+
+_このインターフェイスは {{domxref("EventTarget")}} からもメソッドを継承しています。_
+
+- {{domxref("TextTrack.addCue()")}}
+  - : ({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューをトラックのキューのリストに追加します。
+- {{domxref("TextTrack.removeCue()")}}
+  - : トラックのキューのリストから ({{domxref("TextTrackCue")}} オブジェクトとして指定された) キューを取り除きます。
+
+
+
+## 例
+
+作成中
+
+## 仕様書
+
+| 仕様書                                                                       | 状態                                 | 備考 |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ---- |
+| {{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }} | {{ Spec2('HTML WHATWG') }} |      |
+
+## ブラウザーの互換性
+
+{{Compat("api.TextTrack")}}
+
+## 関連情報
+
+- [WebVTT](/ja/docs/Web/API/WebVTT_API)
+- {{domxref("TextTrackCueList")}}
+- {{domxref("VTTCue")}}
+- {{HTMLElement("track")}}
+- {{domxref("HTMLTrackElement")}}
diff --git a/files/ja/web/api/texttrack/mode/index.md b/files/ja/web/api/texttrack/mode/index.md
index 434fda57eb956e..377a84e800e42a 100644
--- a/files/ja/web/api/texttrack/mode/index.md
+++ b/files/ja/web/api/texttrack/mode/index.md
@@ -11,98 +11,81 @@ tags:
   - mode
 translation_of: Web/API/TextTrack/mode
 ---
-
    {{APIRef("WebVTT")}}
    
+{{APIRef("WebVTT")}}
 
-
    {{domxref("TextTrack")}} インターフェイスの mode プロパティは、テキストトラックのモードを指定して制御する disabled, hidden, showing のいずれかの文字列です。この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。
    
+{{domxref("TextTrack")}} インターフェイスの **`mode`** プロパティは、テキストトラックのモードを指定して制御する `disabled`, `hidden`, `showing` のいずれかの文字列です。この値を読み取って現在のモードを決定したり、この値を変更してモードを切り替えることができます。
 
-
    さらに、 Safari でサブタイトルのキューを表示するには、独自のビデオプレーヤーコントロールを実装する際に、 default 論理値属性を true に設定する必要があります。
    
+> **Note:** さらに、 Safari でサブタイトルのキューを表示するには、独自のビデオプレーヤーコントロールを実装する際に、 **`default`** 論理値属性を true に設定する必要があります。
 
-
    構文
    
+## 構文
 
-
    var mode = textTrack.mode;
+```
+var mode = textTrack.mode;
 
-textTrack.mode = "disabled" | "hidden" | "showing";
    
+textTrack.mode = "disabled" | "hidden" | "showing";
+```
 
-
    値
    
+### 値
 
-
    トラックの現在のモードを示す {{domxref("DOMString")}}。 テキストトラックモードは、テキストトラックモード定数にリストされている値の1つです。
    
+トラックの現在のモードを示す {{domxref("DOMString")}}。 テキストトラックモードは、[テキストトラックモード定数](#text_track_mode_constants)にリストされている値の 1 つです。
 
-
    テキストトラックモード定数
    
+#### テキストトラックモード定数
 
-
    テキストトラックモードは IDL 列挙型 TextTrackMode を使用して識別されることもあり、次のいずれかの値にする必要があります。
    
+テキストトラックモードは IDL 列挙型 `TextTrackMode` を使用して識別されることもあり、次のいずれかの値にする必要があります。
 
-
    
- 
    disabled
    
- 
    テキストトラックは現在無効になっています。トラックの存在は DOM で公開されていますが、ユーザーエージェントはそれ以外の場合は無視しています。キューはアクティブではなく、イベントは発行されておらず、ユーザーエージェントはトラックのキューを取得しようとしません。テキストトラックが {{htmlattrxref("default", "track")}} 論理値属性を持っている場合の既定値は showing です。
    
- 
    hidden
    
- 
    テキストトラックは現在アクティブですが、キューを表示しません。 ユーザーエージェントがまだトラックのキューを取得しようとしていない場合は、すぐに取得します（それにより、トラックの {{domxref("TextTrack.cues")}} プロパティが設定されます）。 テキストが表示されていなくても、ユーザーエージェントはアクティブなキューのリストを（トラックの {{domxref("TextTrack.activeCues", "activeCues")}} プロパティに）保持しており、イベントは対応する時間に発生します。
    
- 
    showing
    
- 
    テキストトラックは現在有効になっており、表示しています。トラックのキューリストをまだ取得していない場合は、すぐに取得します。 {{domxref("TextTrack.activeCues", "activeCues")}} リストは維持されており、イベントは適切なタイミングで発生します。 トラックのテキストも、スタイリングとトラックの {{domxref("TextTrack.kind", "kind")}} に基づいて適切に描画します。
    
-
    
+- `disabled`
+  - : テキストトラックは現在無効になっています。トラックの存在は DOM で公開されていますが、ユーザーエージェントはそれ以外の場合は無視しています。キューはアクティブではなく、イベントは発行されておらず、ユーザーエージェントはトラックのキューを取得しようとしません。テキストトラックが {{htmlattrxref("default", "track")}} 論理値属性を持っている場合の既定値は `showing` です。
+- `hidden`
+  - : テキストトラックは現在アクティブですが、キューを表示しません。 ユーザーエージェントがまだトラックのキューを取得しようとしていない場合は、すぐに取得します（それにより、トラックの {{domxref("TextTrack.cues")}} プロパティが設定されます）。 テキストが表示されていなくても、ユーザーエージェントはアクティブなキューのリストを（トラックの {{domxref("TextTrack.activeCues", "activeCues")}} プロパティに）保持しており、イベントは対応する時間に発生します。
+- `showing`
+  - : テキストトラックは現在有効になっており、表示しています。トラックのキューリストをまだ取得していない場合は、すぐに取得します。 {{domxref("TextTrack.activeCues", "activeCues")}} リストは維持されており、イベントは適切なタイミングで発生します。 トラックのテキストも、スタイリングとトラックの {{domxref("TextTrack.kind", "kind")}} に基づいて適切に描画します。
 
-
    使用上の注意
    
+## 使用上の注意
 
-
    mode の既定値は、 {{htmlattrxref("default", "track")}} 論理値属性が指定されていない場合は disabled で、指定されている場合の mode の既定値は showing です。テキストトラックが disabled の状態で読み込まれると、対応する WebVTT ファイルは、状態が showing または hidden のいずれかに変わるまで読み込まれません。このようにして、キューが実際に必要とされない限り、リソースの取得とメモリの使用は回避されます。
    
+`mode` の既定値は、 {{htmlattrxref("default", "track")}} 論理値属性が指定されていない場合は `disabled` で、指定されている場合の `mode` の既定値は `showing` です。テキストトラックが `disabled` の状態で読み込まれると、対応する WebVTT ファイルは、状態が `showing` または `hidden` のいずれかに変わるまで読み込まれません。このようにして、キューが実際に必要とされない限り、リソースの取得とメモリの使用は回避されます。
 
-
    しかし、これは、例えば、ページ読み込み時にキューのいくつかの側面を処理するために {{event("load")}} イベントを処理している間にトラックのキューに関係するアクションを実行したい場合、トラックモードが最初に disabled になっていた場合、キューの読み込みを起動するために mode を hidden または showing のいずれかに変更しなければならないことを意味しています。
    
+しかし、これは、例えば、ページ読み込み時にキューのいくつかの側面を処理するために {{event("load")}} イベントを処理している間にトラックのキューに関係するアクションを実行したい場合、トラックモードが最初に `disabled` になっていた場合、キューの読み込みを起動するために `mode` を `hidden` または `showing` のいずれかに変更しなければならないことを意味しています。
 
-
    モードが showing の場合、テキストトラックはその {{domxref("TextTrack.kind", "kind")}} によって異なる方法で実行されます。 一般に次のとおりです。
    
+モードが `showing` の場合、テキストトラックはその {{domxref("TextTrack.kind", "kind")}} によって異なる方法で実行されます。 一般に次のとおりです。
 
-
      
- 
    • kind が subtitles (字幕) または captions (キャプション) のトラックは、動画の上にキューを重ねてレンダリングされます。
      • 
- 
    • kind が descriptions (説明) であるトラックは、視覚的ではない形式で表示されます (例えば、動画においてテキストはアクションを声で説明することがあります)。
      • 
- 
    • kind が chapters（チャプター、章）のトラックは、ユーザーエージェントまたはウェブサイトまたはウェブアプリによって、名前付きチャプターをナビゲートするためのインターフェイスを構築して表示するために使用されます。 ここで、リスト内の各キューはメディア内のチャプターを表します。 その後、ユーザーは、キューの開始位置で開始し、キューの終了位置で終了する目的のチャプターに移動できます。
      • 
-
    
+- `kind` が `subtitles` (字幕) または `captions` (キャプション) のトラックは、動画の上にキューを重ねてレンダリングされます。
+- `kind` が `descriptions` (説明) であるトラックは、視覚的ではない形式で表示されます (例えば、動画においてテキストはアクションを声で説明することがあります)。
+- `kind` が `chapters`（チャプター、章）のトラックは、ユーザーエージェントまたはウェブサイトまたはウェブアプリによって、名前付きチャプターをナビゲートするためのインターフェイスを構築して表示するために使用されます。 ここで、リスト内の各キューはメディア内のチャプターを表します。 その後、ユーザーは、キューの開始位置で開始し、キューの終了位置で終了する目的のチャプターに移動できます。
 
-
    例
    
+## 例
 
-
    この例では、キューが終了するたびに動画が自動的に再生を一時停止するように、テキストトラックのキューを設定します。これは、各キューの {{domxref("TextTrackCue.pauseonExit", "pauseOnExit")}} プロパティを true に設定することで実現します。ただし、トラックのキューを確実に利用できるようにするために、まず mode を showingに設定します。
    
+この例では、キューが終了するたびに動画が自動的に再生を一時停止するように、テキストトラックのキューを設定します。これは、各キューの {{domxref("TextTrackCue.pauseonExit", "pauseOnExit")}} プロパティを `true` に設定することで実現します。ただし、トラックのキューを確実に利用できるようにするために、まず `mode` を `showing`に設定します。
 
-
    window.addEventListener("load", event => {
+```js
+window.addEventListener("load", event => {
   let trackElem = document.querySelector("track");
   let track = trackElem.track;
 
   track.mode = "showing";
 
-  for (let index=0; index < track.cues.length; index++) {
+  for (let index=0; index < track.cues.length; index++) {
     let cue = track.cues[index];
     cue.pauseOnExit = true;
   };
-});
    
-
-
    仕様書
    
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{ SpecName('HTML WHATWG', '#dom-texttrack-mode', 'mode') }}{{ Spec2('HTML WHATWG') }}
    
-
-
    ブラウザーの互換性
    
-
-
    
-
    {{Compat("api.TextTrack.mode")}}
    
-
    
-
-
    関連情報
    
-
-
      
- 
    • WebVTT
      • 
- 
    • {{domxref("TextTrack")}}
      • 
- 
    • {{domxref("TextTrackList")}}
      • 
- 
    • {{domxref("TextTrackCueList")}}
      • 
- 
    • {{domxref("VTTCue")}}
      • 
- 
    • {{HTMLElement("track")}}
      • 
- 
    • {{domxref("HTMLTrackElement")}}
      • 
-
    
+});
+```
+
+## 仕様書
+
+| 仕様書                                                                           | 状態                                 | 備考 |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ---- |
+| {{ SpecName('HTML WHATWG', '#dom-texttrack-mode', 'mode') }} | {{ Spec2('HTML WHATWG') }} |      |
+
+## ブラウザーの互換性
+
+{{Compat("api.TextTrack.mode")}}
+
+## 関連情報
+
+- [WebVTT](/ja/docs/Web/API/WebVTT_API)
+- {{domxref("TextTrack")}}
+- {{domxref("TextTrackList")}}
+- {{domxref("TextTrackCueList")}}
+- {{domxref("VTTCue")}}
+- {{HTMLElement("track")}}
+- {{domxref("HTMLTrackElement")}}
diff --git a/files/ja/web/api/timeranges/end/index.md b/files/ja/web/api/timeranges/end/index.md
index 2c81c48a852f66..02a294859e4804 100644
--- a/files/ja/web/api/timeranges/end/index.md
+++ b/files/ja/web/api/timeranges/end/index.md
@@ -10,33 +10,31 @@ tags:
   - TimeRanges
 translation_of: Web/API/TimeRanges/end
 ---
-
    {{APIRef("DOM")}}
    
+{{APIRef("DOM")}}
 
-
    指定された時間範囲が終わる時間オフセットを返します。
    
+指定された時間範囲が終わる時間オフセットを返します。
 
-
    構文
    
+## 構文
 
-
    endTime = TimeRanges.end(index)
-
    
+```
+endTime = TimeRanges.end(index)
+```
 
-
    パラメーター
    
+### パラメーター
 
-
      
- 
    • index は、終了時間を返す範囲の番号です。
      • 
-
    
+- `index` は、終了時間を返す範囲の番号です。
 
-
    例外
    
+### 例外
 
-
    
- 
    INDEX_SIZE_ERR
    
- 
    指定されたインデックスが既存の範囲に対応しない場合にスローされる DOMException。
    
-
    
+- INDEX_SIZE_ERR
+  - : 指定されたインデックスが既存の範囲に対応しない場合にスローされる `DOMException`。
 
-
    例
    
+## 例
 
-
    ID が "myVideo" の動画要素がある場合、
    
+ID が "myVideo" の動画要素がある場合、
 
-
    var v = document.getElementById("myVideo");
+```js
+var v = document.getElementById("myVideo");
 
 var buf = v.buffered;
 
@@ -44,36 +42,21 @@ var numRanges = buf.length;
 
 if (buf.length == 1) {
   // 1つの範囲のみ
-  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
+  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
     // 1つの範囲が動画の最初から始まり、
     // 動画の最後で終わるため、すべてが読み込まれています
   }
 }
-
    
+```
 
-
    この例では、時間範囲を見て、動画全体が読み込まれたかどうかを確認します。
    
+この例では、時間範囲を見て、動画全体が読み込まれたかどうかを確認します。
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName("HTML WHATWG", "#dom-timeranges-end", "TimeRanges.end()")}}{{Spec2("HTML WHATWG")}}初期定義
    
+| 仕様                                                                                         | 状態                             | コメント |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName("HTML WHATWG", "#dom-timeranges-end", "TimeRanges.end()")}} | {{Spec2("HTML WHATWG")}} | 初期定義 |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
-
-
    {{Compat("api.TimeRanges.end")}}
    
+{{Compat("api.TimeRanges.end")}}
diff --git a/files/ja/web/api/timeranges/index.md b/files/ja/web/api/timeranges/index.md
index 1773e892062a6d..d51b1965ae6c4d 100644
--- a/files/ja/web/api/timeranges/index.md
+++ b/files/ja/web/api/timeranges/index.md
@@ -11,51 +11,32 @@ tags:
   - TopicStub
 translation_of: Web/API/TimeRanges
 ---
-
    {{APIRef("DOM")}}
    
+{{APIRef("DOM")}}
 
-
    TimeRanges インターフェイスは、主に {{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素で使用するためにメディアをロードするときにメディアのどの部分がバッファリングされたかを追跡する目的で、一連の時間範囲を表すために使用します。
    
+**`TimeRanges`** インターフェイスは、主に {{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素で使用するためにメディアをロードするときにメディアのどの部分がバッファリングされたかを追跡する目的で、一連の時間範囲を表すために使用します。
 
-
    TimeRanges オブジェクトには、1つ以上の時間範囲が含まれ、それぞれが開始時間と終了時間のオフセットで指定されます。 各時間範囲を参照するには、start() メソッドおよび end() メソッドを使用して、取得する時間範囲のインデックス番号を渡します。
    
+`TimeRanges` オブジェクトには、1 つ以上の時間範囲が含まれ、それぞれが開始時間と終了時間のオフセットで指定されます。 各時間範囲を参照するには、`start()` メソッドおよび `end()` メソッドを使用して、取得する時間範囲のインデックス番号を渡します。
 
-
    「正規化された TimeRanges オブジェクト（英語）」という用語は、そのようなオブジェクトの範囲が順序付けられ、重なり合わず、空ではなく、触れていないことを示します（隣接する範囲は1つの大きな範囲に折り畳まれます）。
    
+「[正規化された TimeRanges オブジェクト](https://www.w3.org/TR/html52/semantics-embedded-content.html#normalized-timeranges-object)（英語）」という用語は、そのようなオブジェクトの範囲が順序付けられ、重なり合わず、空ではなく、触れていないことを示します（隣接する範囲は 1 つの大きな範囲に折り畳まれます）。
 
-
    プロパティ
    
+## プロパティ
 
-
    
- 
    {{domxref("TimeRanges.length")}} {{ReadOnlyInline}}
    
- 
     時間範囲オブジェクトによって表される時間範囲の数を unsigned long 型で返します。
    
-
    
+- {{domxref("TimeRanges.length")}} {{ReadOnlyInline}}
+  - : 時間範囲オブジェクトによって表される時間範囲の数を `unsigned long` 型で返します。
 
-
    メソッド
    
+## メソッド
 
-
    
- 
    {{domxref("TimeRanges.start()")}}
    
- 
    指定されたインデックスを持つ範囲の開始時間を返します。
    
- 
    {{domxref("TimeRanges.end()")}}
    
- 
    指定された範囲の終了時間を返します。
    
-
    
+- {{domxref("TimeRanges.start()")}}
+  - : 指定されたインデックスを持つ範囲の開始時間を返します。
+- {{domxref("TimeRanges.end()")}}
+  - : 指定された範囲の終了時間を返します。
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName("HTML WHATWG", "#time-ranges", "TimeRanges")}}{{Spec2("HTML WHATWG")}}初期定義
    
+| 仕様                                                                         | 状態                             | コメント |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName("HTML WHATWG", "#time-ranges", "TimeRanges")}} | {{Spec2("HTML WHATWG")}} | 初期定義 |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
-
-
    {{Compat("api.TimeRanges")}}
    
+{{Compat("api.TimeRanges")}}
diff --git a/files/ja/web/api/timeranges/length/index.md b/files/ja/web/api/timeranges/length/index.md
index 967022eaaf59bd..994c19424ddbc6 100644
--- a/files/ja/web/api/timeranges/length/index.md
+++ b/files/ja/web/api/timeranges/length/index.md
@@ -11,21 +11,22 @@ tags:
   - TimeRanges
 translation_of: Web/API/TimeRanges/length
 ---
-
    {{APIRef("DOM")}}
    
+{{APIRef("DOM")}}
 
-
    TimeRanges.length 読み取り専用プロパティは、オブジェクト内の範囲の数を返します。
    
-  
    
+**`TimeRanges.length`** 読み取り専用プロパティは、オブジェクト内の範囲の数を返します。
 
-
    構文
    
+## 構文
 
-
    length = TimeRanges.length;
-
    
+```
+length = TimeRanges.length;
+```
 
-
    例
    
+## 例
 
-
    ID が "myVideo" の動画要素がある場合、
    
+ID が "myVideo" の動画要素がある場合、
 
-
    var v = document.GetElementById("myVideo");
+```js
+var v = document.GetElementById("myVideo");
 
 var buf = v.buffered;
 
@@ -33,36 +34,21 @@ var numRanges = buf.length;
 
 if (buf.length == 1) {
   // 1つの範囲のみ
-  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
+  if (buf.start(0) == 0 && buf.end(0) == v.duration) {
     // 1つの範囲が動画の最初から始まり、
     // 動画の最後で終わるため、すべてが読み込まれています
   }
 }
-
    
+```
 
-
    この例では、時間範囲を見て、動画全体が読み込まれたかどうかを確認します。
    
+この例では、時間範囲を見て、動画全体が読み込まれたかどうかを確認します。
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName("HTML WHATWG", "#dom-timeranges-length", "TimeRanges.length()")}}{{Spec2("HTML WHATWG")}}初期定義
    
+| 仕様                                                                                                 | 状態                             | コメント |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName("HTML WHATWG", "#dom-timeranges-length", "TimeRanges.length()")}} | {{Spec2("HTML WHATWG")}} | 初期定義 |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
-
-
    {{Compat("api.TimeRanges.length")}}
    
+{{Compat("api.TimeRanges.length")}}
diff --git a/files/ja/web/api/touchlist/index.md b/files/ja/web/api/touchlist/index.md
index faa466573e0f2d..8947bc3c89b70e 100644
--- a/files/ja/web/api/touchlist/index.md
+++ b/files/ja/web/api/touchlist/index.md
@@ -12,61 +12,38 @@ tags:
   - touch
 translation_of: Web/API/TouchList
 ---
-
    {{APIRef("Touch Events")}}
    
+{{APIRef("Touch Events")}}
 
-
    TouchList インターフェイスは、タッチ面上の接触点のリストを表します。例えば、ユーザーがタッチ面 (画面やトラックパッドなど) を 3 本指で操作している場合、対応する TouchList オブジェクトは 1 本の指あたり 1 つの {{domxref("Touch")}} オブジェクトを持ち、全部で 3 要素になります。
    
+**`TouchList`** インターフェイスは、タッチ面上の接触点のリストを表します。例えば、ユーザーがタッチ面 (画面やトラックパッドなど) を 3 本指で操作している場合、対応する `TouchList` オブジェクトは 1 本の指あたり 1 つの {{domxref("Touch")}} オブジェクトを持ち、全部で 3 要素になります。
 
-
    プロパティ
    
+## プロパティ
 
-
    
- 
    {{domxref("TouchList.length")}} {{readonlyInline}}
    
- 
    TouchList 中の {{domxref("Touch")}} オブジェクトの個数
    
-
    
+- {{domxref("TouchList.length")}} {{readonlyInline}}
+  - : `TouchList` 中の {{domxref("Touch")}} オブジェクトの個数
 
-
    メソッド
    
+## メソッド
 
-
    
- 
    {{domxref("TouchList.identifiedTouch()")}}
    
- 
    識別子が指定された値と一致するリスト内の、最初の {{domxref("Touch")}} 要素を返す
    
- 
    {{domxref("TouchList.item()")}}
    
- 
    リスト内の指定した位置の {{domxref("Touch")}} オブジェクトを返します。
    
-
    
+- {{domxref("TouchList.identifiedTouch()")}}
+  - : 識別子が指定された値と一致するリスト内の、最初の {{domxref("Touch")}} 要素を返す
+- {{domxref("TouchList.item()")}}
+  - : リスト内の指定した位置の {{domxref("Touch")}} オブジェクトを返します。
 
-
    例
    
+## 例
 
-
    タッチイベントのメイン記事にある例をご覧ください。
    
+[タッチイベントのメイン記事にある例](/ja/docs/Web/API/Touch_events#Example)をご覧ください。
 
-
    仕様書
    
+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{SpecName('Touch Events 2','#touchlist-interface')}}{{Spec2('Touch Events 2')}}Non-stable version.
    {{SpecName('Touch Events', '#touchlist-interface')}}{{Spec2('Touch Events')}}初回定義
    
+| 仕様書                                                                   | 状態                                 | 備考                |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Touch Events 2','#touchlist-interface')}} | {{Spec2('Touch Events 2')}} | Non-stable version. |
+| {{SpecName('Touch Events', '#touchlist-interface')}}     | {{Spec2('Touch Events')}}     | 初回定義            |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
    {{Compat("api.TouchList")}}
    
+{{Compat("api.TouchList")}}
 
-
    関連情報
    
+## 関連情報
 
-
+- [タッチイベント](/ja/docs/Web/API/Touch_events)
+- {{domxref("Document.createTouchList()")}}
diff --git a/files/ja/web/api/touchlist/length/index.md b/files/ja/web/api/touchlist/length/index.md
index 2ff2f4db94f446..9dd4bfb8c24a80 100644
--- a/files/ja/web/api/touchlist/length/index.md
+++ b/files/ja/web/api/touchlist/length/index.md
@@ -8,17 +8,20 @@ tags:
   - touch
 translation_of: Web/API/TouchList/length
 ---
-
    
- {{ApiRef}}
    
-
    概要
    
-
    この読取専用プロパティは {{domxref("TouchList")}} 内の項目数を表します。
    
-
    構文
    
-
    numTouches = touchList.length;
-
    
-
      
- 
    • numTouches : {{domxref("TouchList")}} 内の {{domxref("Touch")}} オブジェクトの個数を表す整数値
      • 
-
    
-
    仕様
    
-
+{{ApiRef}}
+
+## 概要
+
+この読取専用プロパティは {{domxref("TouchList")}} 内の項目数を表します。
+
+## 構文
+
+```
+numTouches = touchList.length;
+```
+
+- `numTouches` : {{domxref("TouchList")}} 内の {{domxref("Touch")}} オブジェクトの個数を表す整数値
+
+## 仕様
+
+- [Touch Events Specification](http://www.w3.org/TR/touch-events/)
diff --git a/files/ja/web/api/trackevent/index.md b/files/ja/web/api/trackevent/index.md
index bbd314cc83e73a..7ead0952f7336a 100644
--- a/files/ja/web/api/trackevent/index.md
+++ b/files/ja/web/api/trackevent/index.md
@@ -12,47 +12,40 @@ tags:
   - Video
 translation_of: Web/API/TrackEvent
 ---
-
    {{APIRef("HTML DOM")}}
    
+{{APIRef("HTML DOM")}}
 
-
    HTML DOM 仕様の一部である TrackEvent インターフェイスは、HTML メディア要素で使用可能なトラックのセットに対する変更を表すイベントに使用されます。 これらのイベントは {{event("addtrack")}} と {{event("removetrack")}} です。 TrackEvent を {{domxref("RTCPeerConnection")}} の一部であるトラックに使用される {{domxref("RTCTrackEvent")}} インターフェイスと混同しないでください。
    
-  
    
+HTML DOM 仕様の一部である **`TrackEvent`** インターフェイスは、HTML メディア要素で使用可能なトラックのセットに対する変更を表すイベントに使用されます。 これらのイベントは {{event("addtrack")}} と {{event("removetrack")}} です。 `TrackEvent` を {{domxref("RTCPeerConnection")}} の一部であるトラックに使用される {{domxref("RTCTrackEvent")}} インターフェイスと混同しないでください。
 
-
    TrackEvent に基づくイベントは、常に次のメディアトラックリストの種類のいずれかに送信されます。
    
+`TrackEvent` に基づくイベントは、常に次のメディアトラックリストの種類のいずれかに送信されます。
 
-
      
- 
    • 動画トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.videoTracks")}} にある {{domxref("VideoTrackList")}} に送信されます。
      • 
- 
    • 音声トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.audioTracks")}} で指定された {{domxref("AudioTrackList")}} に送信されます。
      • 
- 
    • テキストトラックに影響を与えるイベントは、{{domxref("HTMLMediaElement.textTracks")}} によって示される {{domxref("TextTrackList")}} オブジェクトに送信されます。
      • 
-
    
+- 動画トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.videoTracks")}} にある {{domxref("VideoTrackList")}} に送信されます。
+- 音声トラックに関連するイベントは、常に {{domxref("HTMLMediaElement.audioTracks")}} で指定された {{domxref("AudioTrackList")}} に送信されます。
+- テキストトラックに影響を与えるイベントは、{{domxref("HTMLMediaElement.textTracks")}} によって示される {{domxref("TextTrackList")}} オブジェクトに送信されます。
 
-
    
-
    
+
 
-
    コンストラクタ
    
+## コンストラクタ
 
-
    
- 
    {{domxref("TrackEvent.TrackEvent", "TrackEvent()")}}
    
- 
    指定されたイベントタイプとオプションの追加プロパティで、新しい TrackEvent オブジェクトを作成して初期化します。
    
-
    
+- {{domxref("TrackEvent.TrackEvent", "TrackEvent()")}}
+  - : 指定されたイベントタイプとオプションの追加プロパティで、新しい `TrackEvent` オブジェクトを作成して初期化します。
 
-
    プロパティ
    
+## プロパティ
 
-
    TrackEvent は {{domxref("Event")}} に基づいているため、Event のプロパティは TrackEvent オブジェクトでも利用できます。
    
+_`TrackEvent` は {{domxref("Event")}} に基づいているため、`Event` のプロパティは `TrackEvent` オブジェクトでも利用できます。_
 
-
    
- 
    {{domxref("TrackEvent.track", "track")}} {{ReadOnlyInline}}
    
- 
    イベントが参照している DOM のトラックオブジェクト。 null でない場合、これは常にメディアトラックの種類のうちの1つのオブジェクト（{{domxref("AudioTrack")}}、{{domxref("VideoTrack")}}、または {{domxref("TextTrack")}}）です。
    
-
    
+- {{domxref("TrackEvent.track", "track")}} {{ReadOnlyInline}}
+  - : イベントが参照している DOM のトラックオブジェクト。 `null` でない場合、これは常にメディアトラックの種類のうちの 1 つのオブジェクト（{{domxref("AudioTrack")}}、{{domxref("VideoTrack")}}、または {{domxref("TextTrack")}}）です。
 
-
    メソッド
    
+## メソッド
 
-
    TrackEvent には独自のメソッドはありません。 しかし、それは {{domxref("Event")}} に基づいているので、Event オブジェクトで利用可能なメソッドを提供します。
    
+_`TrackEvent` には独自のメソッドはありません。 しかし、それは {{domxref("Event")}} に基づいているので、`Event` オブジェクトで利用可能なメソッドを提供します。_
 
-
    例
    
+## 例
 
-
    この例では、handleTrackEvent() 関数を設定します。 この関数は、文書内で見つかった最初の {{HTMLElement("video")}} 要素の {{event("addtrack")}} イベントまたは {{event("removetrack")}} イベントに対して呼び出されます。
    
+この例では、`handleTrackEvent()` 関数を設定します。 この関数は、文書内で見つかった最初の {{HTMLElement("video")}} 要素の {{event("addtrack")}} イベントまたは {{event("removetrack")}} イベントに対して呼び出されます。
 
-
    var videoElem = document.querySelector("video");
+```js
+var videoElem = document.querySelector("video");
 
 videoElem.videoTracks.addEventListener("addtrack", handleTrackEvent, false);
 videoElem.videoTracks.addEventListener("removetrack", handleTrackEvent, false);
@@ -83,34 +76,17 @@ function handleTrackEvent(event) {
       break;
   }
 }
-
    
+```
 
-
    イベントハンドラは、JavaScript の instanceof 演算子を使用してイベントが発生したトラックの種類を判断し、それがどの種類のトラックであるか、および要素に追加されているのか、要素から取り除かれているのかを示すメッセージをコンソールに出力します。
    
+イベントハンドラは、JavaScript の [`instanceof`](/ja/docs/Web/JavaScript/Reference/Operators/instanceof) 演算子を使用してイベントが発生したトラックの種類を判断し、それがどの種類のトラックであるか、および要素に追加されているのか、要素から取り除かれているのかを示すメッセージをコンソールに出力します。
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName('HTML WHATWG', "media.html#the-trackevent-interface", "TrackEvent")}}{{Spec2('HTML WHATWG')}}初期定義
    {{SpecName('HTML5 W3C', "embedded-content-0.html#trackevent", "TrackEvent")}}{{Spec2('HTML5 W3C')}}初期定義
    
+| 仕様                                                                                                         | 状態                             | コメント |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', "media.html#the-trackevent-interface", "TrackEvent")}} | {{Spec2('HTML WHATWG')}} | 初期定義 |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#trackevent", "TrackEvent")}}     | {{Spec2('HTML5 W3C')}}     | 初期定義 |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
-
-
    {{Compat("api.TrackEvent")}}
    
+{{Compat("api.TrackEvent")}}
diff --git a/files/ja/web/api/trackevent/track/index.md b/files/ja/web/api/trackevent/track/index.md
index 72a0f6f9c73921..ddcb2b8ae5bead 100644
--- a/files/ja/web/api/trackevent/track/index.md
+++ b/files/ja/web/api/trackevent/track/index.md
@@ -15,42 +15,27 @@ tags:
   - track
 translation_of: Web/API/TrackEvent/track
 ---
-
    {{APIRef("HTML DOM")}}
    
+{{APIRef("HTML DOM")}}
 
-
    {{domxref("TrackEvent")}} インターフェイスの読み取り専用の track プロパティは、イベントが適用されるメディアトラックオブジェクトを指定します。 これは {{domxref("AudioTrack")}}、{{domxref("VideoTrack")}}、または {{domxref("TextTrack")}} のオブジェクトになります。
    
+{{domxref("TrackEvent")}} インターフェイスの読み取り専用の **`track`** プロパティは、イベントが適用されるメディアトラックオブジェクトを指定します。 これは {{domxref("AudioTrack")}}、{{domxref("VideoTrack")}}、または {{domxref("TextTrack")}} のオブジェクトになります。
 
-
    構文
    
+## 構文
 
-
    track = TrackEvent.track;
    
+```
+track = TrackEvent.track;
+```
 
-
    値
    
+### 値
 
-
    トラックで表されるメディアの種類に応じて、{{domxref("AudioTrack")}}、{{domxref("VideoTrack")}}、または {{domxref("TextTrack")}} のいずれかの種類のオブジェクトです。 これは、イベントが適用されるトラックを識別します。
    
+トラックで表されるメディアの種類に応じて、{{domxref("AudioTrack")}}、{{domxref("VideoTrack")}}、または {{domxref("TextTrack")}} のいずれかの種類のオブジェクトです。 これは、イベントが適用されるトラックを識別します。
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName('HTML WHATWG', "media.html#dom-trackevent-track", "TrackEvent.track")}}{{Spec2('HTML WHATWG')}}初期定義
    {{SpecName('HTML5 W3C', "embedded-content-0.html#dom-trackevent-track", "TrackEvent.track")}}{{Spec2('HTML5 W3C')}}初期定義
    
+| 仕様                                                                                                                         | 状態                             | コメント |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', "media.html#dom-trackevent-track", "TrackEvent.track")}}                 | {{Spec2('HTML WHATWG')}} | 初期定義 |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#dom-trackevent-track", "TrackEvent.track")}} | {{Spec2('HTML5 W3C')}}     | 初期定義 |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
-
-
    {{Compat("api.TrackEvent.track")}}
    
+{{Compat("api.TrackEvent.track")}}
diff --git a/files/ja/web/api/trackevent/trackevent/index.md b/files/ja/web/api/trackevent/trackevent/index.md
index 622f86dfbe74f0..a4b8652d4b1e31 100644
--- a/files/ja/web/api/trackevent/trackevent/index.md
+++ b/files/ja/web/api/trackevent/trackevent/index.md
@@ -13,62 +13,44 @@ tags:
   - Video
 translation_of: Web/API/TrackEvent/TrackEvent
 ---
-
    {{APIRef("HTML DOM")}}
    
+{{APIRef("HTML DOM")}}
 
-
    TrackEvent() コンストラクタは、トラックのリスト（{{domxref("AudioTrackList")}}、{{domxref("VideoTrackList")}}、または {{domxref("TextTrackList")}}）で発生したイベントを記述する新しい {{domxref("TrackEvent")}} オブジェクトを作成して返します。
    
+`TrackEvent()` コンストラクタは、トラックのリスト（{{domxref("AudioTrackList")}}、{{domxref("VideoTrackList")}}、または {{domxref("TextTrackList")}}）で発生したイベントを記述する新しい {{domxref("TrackEvent")}} オブジェクトを作成して返します。
 
-
    構文
    
+## 構文
 
-
    trackEvent = new TrackEvent(type, eventInfo);
    
+```
+trackEvent = new TrackEvent(type, eventInfo);
+```
 
-
    パラメーター
    
+### パラメーター
 
-
    
- 
    type
    
- 
    オブジェクトによって記述されるトラックイベントの種類: "addtrack" または "removetrack"。
    
- 
    eventInfo {{optional_inline}}
    
- 
    新しいイベントを構成する追加情報を提供するオプションの辞書。 次のフィールドを自由に組み合わせて含めることができます。
- 
    
-  
    track {{optional_inline}}
    
-  
    イベントが参照するトラック。 これはデフォルトでは null ですが、トラックの種類に応じて {{domxref("VideoTrack")}}、{{domxref("AudioTrack")}}、または {{domxref("TextTrack")}} に設定する必要があります。
    
-  
    bubbles {{optional_inline}}
    
-  
    イベントをバブリングするかどうかを示す Boolean。
    
-  
    cancelable {{optional_inline}}
    
-  
    イベントをキャンセルできるかどうかを示す Boolean。
    
-  
    composed {{optional_inline}}
    
-  
    イベントがシャドウルートの外側でリスナーをトリガーするかどうかを示す Boolean。 詳細については {{domxref("Event.composed")}} をご覧ください。
    
- 
    
- 
    
-
    
+- `type`
+  - : オブジェクトによって記述されるトラックイベントの種類: `"addtrack"` または `"removetrack"`。
+- `eventInfo` {{optional_inline}}
 
-
    戻り値
    
+  - : 新しいイベントを構成する追加情報を提供するオプションの辞書。 次のフィールドを自由に組み合わせて含めることができます。
 
-
    新しく作成された {{domxref("TrackEvent")}} オブジェクト。 コンストラクタへの入力の説明に従って初期化されます。
    
+    - `track` {{optional_inline}}
+      - : イベントが参照するトラック。 これはデフォルトでは `null` ですが、トラックの種類に応じて {{domxref("VideoTrack")}}、{{domxref("AudioTrack")}}、または {{domxref("TextTrack")}} に設定する必要があります。
+    - `bubbles` {{optional_inline}}
+      - : イベントをバブリングするかどうかを示す Boolean。
+    - `cancelable` {{optional_inline}}
+      - : イベントをキャンセルできるかどうかを示す Boolean。
+    - `composed` {{optional_inline}}
+      - : イベントがシャドウルートの外側でリスナーをトリガーするかどうかを示す Boolean。 詳細については {{domxref("Event.composed")}} をご覧ください。
 
-
    仕様
    
+### 戻り値
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName('HTML WHATWG', "media.html#dom-trackevent-trackevent", "TrackEvent()")}}{{Spec2('HTML WHATWG')}}初期定義
    {{SpecName('HTML5 W3C', "semantics-embedded-content.html#dom-trackevent-trackevent", "TrackEvent()")}}{{Spec2('HTML5 W3C')}}初期定義
    
+新しく作成された {{domxref("TrackEvent")}} オブジェクト。 コンストラクタへの入力の説明に従って初期化されます。
 
-
    ブラウザーの互換性
    
+## 仕様
 
+| 仕様                                                                                                                                     | 状態                             | コメント |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', "media.html#dom-trackevent-trackevent", "TrackEvent()")}}                         | {{Spec2('HTML WHATWG')}} | 初期定義 |
+| {{SpecName('HTML5 W3C', "semantics-embedded-content.html#dom-trackevent-trackevent", "TrackEvent()")}} | {{Spec2('HTML5 W3C')}}     | 初期定義 |
 
+## ブラウザーの互換性
 
-
    {{Compat("api.TrackEvent.TrackEvent")}}
    
+{{Compat("api.TrackEvent.TrackEvent")}}
diff --git a/files/ja/web/api/transitionevent/index.md b/files/ja/web/api/transitionevent/index.md
index 72371099c876e2..cdbe5825e5b2e2 100644
--- a/files/ja/web/api/transitionevent/index.md
+++ b/files/ja/web/api/transitionevent/index.md
@@ -10,78 +10,55 @@ tags:
   - Reference
 translation_of: Web/API/TransitionEvent
 ---
-
    {{APIRef("CSSOM")}} {{SeeCompatTable}}
    
-
-
    TransitionEvent インターフェイスは、トランジションに関する情報を提供するイベントを表します。
    
-
-
    コンストラクター
    
-
-
    
- 
    {{domxref("TransitionEvent.TransitionEvent", "TransitionEvent()")}}
    
- 
    指定された引数で TransitionEvent イベントを作成します。
    
-
    
-
-
    プロパティ
    
-
-
    親である {{domxref("Event")}} から継承したプロパティもあります。
    
-
-
    
- 
    {{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}
    
- 
    {{domxref("DOMString")}} で、トランジションに関連付けられた CSS プロパティの名前が入ります。
    
- 
    {{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}
    
- 
    float で、このイベントが発生した時点でトランジションが実行している時間を秒単位で表します。この値は {{cssxref("transition-delay")}} プロパティの影響を受けません。
    
- 
    {{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}
    
- 
    {{domxref("DOMString")}} で、 :: で始まる、アニメーションが実行される擬似要素の名前が入ります。トランジションが擬似要素上ではなく要素上で実行されている場合は、空文字列 '' になります。
    
-
    
-
-
    TransitionEvent の種類
    
-
-
    
- 
    {{domxref("HTMLElement.transitioncancel_event", "transitioncancel")}}
    
- 
    {{domxref("Event")}} で、 CSS トランジションが中断されたときに発生します。
    
- 
    {{domxref("HTMLElement.transitionend_event", "transitionend")}}
    
- 
    {{domxref("Event")}} で、 CSS トランジションの実行が終了したときに発生します。
    
- 
    {{domxref("HTMLElement.transitionrun_event", "transitionrun")}}
    
- 
    {{domxref("Event")}} で、 CSS トランジションが生成されたとき、実行中のトランジションに追加されたときに発生し、必ずしも開始時に発生するとは限りません。
    
- 
    {{domxref("HTMLElement.transitionstart_event", "transitionstart")}}
    
- 
    {{domxref("Event")}} で、 CSS トランジションの推移が開始したときに発生します。
    
-
    
-
-
    メソッド
    
-
-
    親である {{domxref("Event")}} から継承したプロパティもあります。
    
-
-
    
- 
    {{domxref("TransitionEvent.initTransitionEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
    
- 
    非推奨の {{domxref("Document.createEvent()", "Document.createEvent(\"TransitionEvent\")")}} メソッドを使用して生成された TransitionEvent を初期化します。
    
-
    
-
-
    仕様書
    
-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様書状態備考
    {{ SpecName('CSS3 Transitions', '#interface-transitionevent', 'TransitionEvent') }}{{ Spec2('CSS3 Transitions') }}初回定義
    
-
-
    ブラウザーの互換性
    
-
-
    {{Compat("api.TransitionEvent")}}
    
-
-
    関連情報
    
-
-
      
- 
    • CSS トランジションの使用
      • 
- 
    • CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
      • 
-
    
+{{APIRef("CSSOM")}} {{SeeCompatTable}}
+
+**`TransitionEvent`** インターフェイスは、[トランジション](/ja/docs/Web/Guide/CSS/Using_CSS_transitions)に関する情報を提供するイベントを表します。
+
+## コンストラクター
+
+- {{domxref("TransitionEvent.TransitionEvent", "TransitionEvent()")}}
+  - : 指定された引数で `TransitionEvent` イベントを作成します。
+
+## プロパティ
+
+_親である {{domxref("Event")}} から継承したプロパティもあります。_
+
+- {{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}
+  - : {{domxref("DOMString")}} で、トランジションに関連付けられた CSS プロパティの名前が入ります。
+- {{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}
+  - : `float` で、このイベントが発生した時点でトランジションが実行している時間を秒単位で表します。この値は {{cssxref("transition-delay")}} プロパティの影響を受けません。
+- {{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}
+  - : {{domxref("DOMString")}} で、 `::` で始まる、アニメーションが実行される[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)の名前が入ります。トランジションが擬似要素上ではなく要素上で実行されている場合は、空文字列 `''` になります。
+
+## `TransitionEvent` の種類
+
+- {{domxref("HTMLElement.transitioncancel_event", "transitioncancel")}}
+  - : {{domxref("Event")}} で、 [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)が中断されたときに発生します。
+- {{domxref("HTMLElement.transitionend_event", "transitionend")}}
+  - : {{domxref("Event")}} で、 [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)の実行が終了したときに発生します。
+- {{domxref("HTMLElement.transitionrun_event", "transitionrun")}}
+  - : {{domxref("Event")}} で、 [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)が生成されたとき、実行中のトランジションに追加されたときに発生し、必ずしも開始時に発生するとは限りません。
+- {{domxref("HTMLElement.transitionstart_event", "transitionstart")}}
+  - : {{domxref("Event")}} で、 [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)の推移が開始したときに発生します。
+
+## メソッド
+
+_親である {{domxref("Event")}} から継承したプロパティもあります。_
+
+- {{domxref("TransitionEvent.initTransitionEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
+  - : 非推奨の {{domxref("Document.createEvent()", "Document.createEvent(\"TransitionEvent\")")}} メソッドを使用して生成された `TransitionEvent` を初期化します。
+
+## 仕様書
+
+| 仕様書                                                                                                           | 状態                                     | 備考     |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------- |
+| {{ SpecName('CSS3 Transitions', '#interface-transitionevent', 'TransitionEvent') }} | {{ Spec2('CSS3 Transitions') }} | 初回定義 |
+
+## ブラウザーの互換性
+
+{{Compat("api.TransitionEvent")}}
+
+## 関連情報
+
+- [CSS トランジションの使用](/ja/docs/Web/Guide/CSS/Using_CSS_transitions)
+- CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
diff --git a/files/ja/web/api/transitionevent/pseudoelement/index.md b/files/ja/web/api/transitionevent/pseudoelement/index.md
index d92ffe28e518c1..bac3dbe7f540ad 100644
--- a/files/ja/web/api/transitionevent/pseudoelement/index.md
+++ b/files/ja/web/api/transitionevent/pseudoelement/index.md
@@ -12,42 +12,27 @@ tags:
   - TransitionEvent
 translation_of: Web/API/TransitionEvent/pseudoElement
 ---
-
    {{ apiref("CSSOM") }} {{SeeCompatTable}}
    
+{{ apiref("CSSOM") }} {{SeeCompatTable}}
 
-
    TransitionEvent.pseudoElement 読み取り専用プロパティは、 {{domxref("DOMString")}} であり、 '::' で始まり、アニメーションが実行される疑似要素の名前が含まれています。トランジションが擬似要素で実行されない場合は、要素は空文字です: '' 。
    
+**`TransitionEvent.pseudoElement`** 読み取り専用プロパティは、 {{domxref("DOMString")}} であり、 `'::'` で始まり、アニメーションが実行される[疑似要素](/ja/docs/Web/CSS/Pseudo-elements "/en-US/docs/Web/CSS/Pseudo-elements")の名前が含まれています。トランジションが擬似要素で実行されない場合は、要素は空文字です: `''` 。
 
-
    構文
    
+## 構文
 
-
    name = TransitionEvent.pseudoElement
    
+```
+name = TransitionEvent.pseudoElement
+```
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
- 
-
    仕様ステータス備考
    {{ SpecName('CSS3 Transitions', '#Events-TransitionEvent-pseudoElement', 'TransitionEvent.pseudoElement') }}{{ Spec2('CSS3 Transitions')}}初回定義。
    
+| 仕様                                                                                                                                             | ステータス                               | 備考       |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------- |
+| {{ SpecName('CSS3 Transitions', '#Events-TransitionEvent-pseudoElement', 'TransitionEvent.pseudoElement') }} | {{ Spec2('CSS3 Transitions')}} | 初回定義。 |
 
-
    ブラウザー実装状況
    
+## ブラウザー実装状況
 
+{{Compat("api.TransitionEvent.pseudoElement")}}
 
+## 関連項目
 
-
    {{Compat("api.TransitionEvent.pseudoElement")}}
    
-
-
    関連項目
    
-
-
      
- 
    • CSS トランジションの使用
      • 
- 
    • {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
      • 
-
    
+- [CSS トランジションの使用](/ja/docs/Web/Guide/CSS/Using_CSS_transitions)
+- {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
diff --git a/files/ja/web/api/vttcue/index.md b/files/ja/web/api/vttcue/index.md
index 2d6abe92942bb3..ed8def5408edce 100644
--- a/files/ja/web/api/vttcue/index.md
+++ b/files/ja/web/api/vttcue/index.md
@@ -8,77 +8,60 @@ tags:
   - vtt
 translation_of: Web/API/VTTCue
 ---
-
    {{APIRef("WebVTT")}}
    
- WebVTT（メディアプレゼンテーションに関するテキストトラック）を処理するための API の一部である VTTCue インターフェイスは、特定の {{HTMLElement("track")}} 要素に関連付けられたテキストトラックを記述および制御します。
    
-
-
    コンストラクタ
    
-
-
    
- 
    {{domxref("VTTCue.VTTCue", "VTTCue(startTime, endTime, text)")}}
    
- 
    指定された時間範囲をカバーし、指定されたテキストを持つ、新しく作成された VTTCue オブジェクトを返します。
    
-
    
-
-
    プロパティ
    
-
-
    このインターフェイスは {{domxref("TextTrackCue")}} からもプロパティを継承しています。
    
-
-
    
- 
    {{domxref("VTTCue.region")}}
    
- 
    キューが描画される動画のサブ領域を説明する {{domxref("VTTRegion")}} オブジェクト。 割り当てられていない場合は null。
    
- 
    {{domxref("VTTCue.vertical")}}
    
- 
    キューの書き込み方向を表す列挙型を返します。
    
- 
    {{domxref("VTTCue.snapToLines")}}
    
- 
    {{domxref("VTTCue.line")}} 属性が整数の行数または動画サイズのパーセントである場合、true を返します。
    
- 
    {{domxref("VTTCue.line")}}
    
- 
    キューの行位置を返します。 これは、文字列 auto またはその解釈が {{domxref("VTTCue.snapToLines")}} の値に依存する数値になります。
    
- 
    {{domxref("VTTCue.lineAlign")}}
    
- 
    {{domxref("VTTCue.line")}} の配置を表す列挙型を返します。
    
- 
    {{domxref("VTTCue.position")}}
    
- 
    行内のキューのインデントを返します。 これは、文字列 auto または {{domxref("VTTCue.region")}} のパーセントを表す数値、または {{domxref("VTTCue.region")}} が null の場合は動画サイズです。
    
- 
    {{domxref("VTTCue.positionAlign")}}
    
- 
    キューの配置を表す列挙型を返します。 これは {{domxref("VTTCue.position")}} が何に固定されているかを決定するために使用されます。
    
- 
    {{domxref("VTTCue.size")}}
    
- 
    キューのサイズを表す double 型を動画サイズのパーセントで返します。
    
- 
    {{domxref("VTTCue.textAlign")}}
    
- 
    キューボックス内のすべてのテキスト行の配置を表す列挙型を返します。
    
- 
    {{domxref("VTTCue.text")}}
    
- 
    キューの内容を含む {{domxref("DOMString")}} を返します。
    
-
    
-
-
    メソッド
    
-
-
    
- 
    {{domxref("VTTCue.getCueAsHTML")}}
    
- 
    キューのテキストを {{domxref("DocumentFragment")}} として返します。
    
-
    
-
-
    例
    
-
-
    var cue = new VTTCue(2, 3, 'かっこいい文章を表示する');
+{{APIRef("WebVTT")}}
+WebVTT（メディアプレゼンテーションに関するテキストトラック）を処理するための API の一部である `VTTCue` インターフェイスは、特定の {{HTMLElement("track")}} 要素に関連付けられたテキストトラックを記述および制御します。
+
+## コンストラクタ
+
+- {{domxref("VTTCue.VTTCue", "VTTCue(startTime, endTime, text)")}}
+  - : 指定された時間範囲をカバーし、指定されたテキストを持つ、新しく作成された `VTTCue` オブジェクトを返します。
+
+## プロパティ
+
+_このインターフェイスは {{domxref("TextTrackCue")}} からもプロパティを継承しています。_
+
+- {{domxref("VTTCue.region")}}
+  - : キューが描画される動画のサブ領域を説明する {{domxref("VTTRegion")}} オブジェクト。 割り当てられていない場合は `null`。
+- {{domxref("VTTCue.vertical")}}
+  - : キューの書き込み方向を表す列挙型を返します。
+- {{domxref("VTTCue.snapToLines")}}
+  - : {{domxref("VTTCue.line")}} 属性が整数の行数または動画サイズのパーセントである場合、`true` を返します。
+- {{domxref("VTTCue.line")}}
+  - : キューの行位置を返します。 これは、文字列 `auto` またはその解釈が {{domxref("VTTCue.snapToLines")}} の値に依存する数値になります。
+- {{domxref("VTTCue.lineAlign")}}
+  - : {{domxref("VTTCue.line")}} の配置を表す列挙型を返します。
+- {{domxref("VTTCue.position")}}
+  - : 行内のキューのインデントを返します。 これは、文字列 `auto` または {{domxref("VTTCue.region")}} のパーセントを表す数値、または {{domxref("VTTCue.region")}} が `null` の場合は動画サイズです。
+- {{domxref("VTTCue.positionAlign")}}
+  - : キューの配置を表す列挙型を返します。 これは {{domxref("VTTCue.position")}} が何に固定されているかを決定するために使用されます。
+- {{domxref("VTTCue.size")}}
+  - : キューのサイズを表す `double` 型を動画サイズのパーセントで返します。
+- {{domxref("VTTCue.textAlign")}}
+  - : キューボックス内のすべてのテキスト行の配置を表す列挙型を返します。
+- {{domxref("VTTCue.text")}}
+  - : キューの内容を含む {{domxref("DOMString")}} を返します。
+
+## メソッド
+
+- {{domxref("VTTCue.getCueAsHTML")}}
+  - : キューのテキストを {{domxref("DocumentFragment")}} として返します。
+
+## 例
+
+```js
+var cue = new VTTCue(2, 3, 'かっこいい文章を表示する');
 var tracks = document.querySelector('video').textTracks;
-tracks[0].addCue(cue);
    
-
-
    新しいキューを作成したら、それを {{domxref("TextTrack")}} に追加する必要があります。 追加すると、このキューを2秒から3秒の間に描画し、「かっこいい文章を表示する」というテキストを表示します。
    
-
-
    仕様
    
+tracks[0].addCue(cue);
+```
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName("WebVTT")}}{{Spec2("WebVTT")}} 
    
+新しいキューを作成したら、それを {{domxref("TextTrack")}} に追加する必要があります。 追加すると、このキューを 2 秒から 3 秒の間に描画し、「`かっこいい文章を表示する`」というテキストを表示します。
 
-
    ブラウザーの互換性
    
+## 仕様
 
+| 仕様                         | 状態                     | コメント |
+| ---------------------------- | ------------------------ | -------- |
+| {{SpecName("WebVTT")}} | {{Spec2("WebVTT")}} |          |
 
+## ブラウザーの互換性
 
-
    {{Compat("api.VTTCue")}}
    
+{{Compat("api.VTTCue")}}
diff --git a/files/ja/web/api/vttcue/vttcue/index.md b/files/ja/web/api/vttcue/vttcue/index.md
index 64b07802ca5039..49193567d201e4 100644
--- a/files/ja/web/api/vttcue/vttcue/index.md
+++ b/files/ja/web/api/vttcue/vttcue/index.md
@@ -8,49 +8,38 @@ tags:
   - WebVTT
 translation_of: Web/API/VTTCue/VTTCue
 ---
-
    {{APIRef("WebVTT")}}
    
+{{APIRef("WebVTT")}}
 
-
    VTTCue() コンストラクタは新しい {{domxref("VTTCue")}} オブジェクトを返します。
    
+**`VTTCue()`** コンストラクタは新しい {{domxref("VTTCue")}} オブジェクトを返します。
 
-
    構文
    
+## 構文
 
-
     vttCue = new VTTCue(startTime, endTime, text);
    
+```
+ vttCue = new VTTCue(startTime, endTime, text);
+```
 
-
    パラメーター
    
+### パラメーター
 
-
    
- 
    startTime
    
- 
    これは、キューを表示し始める動画の時間を表す double 型です。
    
- 
    endTime
    
- 
    これは、キューを表示しなくなる動画の時間を表す double 型です。
    
- 
    text
    
- 
    これは表示するテキストを表す {{domxref("DOMString")}} です。
    
-
    
+- _startTime_
+  - : これは、キューを表示し始める動画の時間を表す `double` 型です。
+- _endTime_
+  - : これは、キューを表示しなくなる動画の時間を表す `double` 型です。
+- _text_
+  - : これは表示するテキストを表す {{domxref("DOMString")}} です。
 
-
    例
    
+## 例
 
-
    // 2から3秒の間に表示するキューを作成し、指定されたテキストを使用します。
-var cue = new VTTCue(2, 3, 'かっこいい文章を表示する');
    
+```js
+// 2から3秒の間に表示するキューを作成し、指定されたテキストを使用します。
+var cue = new VTTCue(2, 3, 'かっこいい文章を表示する');
+```
 
-
    仕様
    
+## 仕様
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様状態コメント
    {{SpecName("WebVTT", "#dom-vttcue-vttcue", "VTTCue()")}}{{Spec2("WebVTT")}} 
    
+| 仕様                                                                         | 状態                     | コメント |
+| ---------------------------------------------------------------------------- | ------------------------ | -------- |
+| {{SpecName("WebVTT", "#dom-vttcue-vttcue", "VTTCue()")}} | {{Spec2("WebVTT")}} |          |
 
-
    ブラウザーの互換性
    
+## ブラウザーの互換性
 
-
-
-
    {{Compat("api.VTTCue.VTTCue")}}
    
+{{Compat("api.VTTCue.VTTCue")}}
diff --git a/files/ja/web/api/web_speech_api/index.md b/files/ja/web/api/web_speech_api/index.md
index ab17eadc213a0f..7e4b48faa252f4 100644
--- a/files/ja/web/api/web_speech_api/index.md
+++ b/files/ja/web/api/web_speech_api/index.md
@@ -12,105 +12,81 @@ tags:
   - synthesis
 translation_of: Web/API/Web_Speech_API
 ---
-
    {{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
    
-
-
    
-
    Web Speech API は、音声データをウェブアプリに組み入れることを可能にします。Web Speech API は、SpeechSynthesis (Text-to-Speech; 音声合成) と SpeechRecognition (Asynchronous Speech Recognition; 非同期音声認識) の 2 つの部分から成り立っています。
    
-
    
-
-
    Web Speech API のコンセプトと使用法
    
-
-
    Web Speech API は、ウェブアプリが音声データを扱えるようにします。この API には 2 つの構成要素があります。
    
-
-
      
- 
    • 音声認識は {{domxref("SpeechRecognition")}} インターフェイス経由でアクセスされます。これは、音声入力 (通常はデバイスのデフォルト音声認識サービスを経由) から音声の文脈を認識し、適切に応答する機能を提供します。通常は、インターフェイスのコンストラクターを使用して新しい {{domxref("SpeechRecognition")}} オブジェクトを生成します。このオブジェクトは、デバイスのマイクを通して入力された音声を検知するための、いくつものイベントハンドラーを持ちます。{{domxref("SpeechGrammar")}} インターフェイスは、あなたのアプリが認識すべき特定の文法群のコンテナーを表します。文法は、JSpeech Grammar Format (JSGF) を使用して定義されています。
      • 
- 
    • 音声合成は、{{domxref("SpeechSynthesis")}} インターフェイス経由でアクセスされます。これは、プログラムに、そのテキストコンテンツを読み上げる機能を提供します (通常はデバイスのデフォルトの音声合成を経由)。異なる音声の種類は、{{domxref("SpeechSynthesisVoice")}} オブジェクトで表され、発話してほしいテキストの異なる部分は、{{domxref("SpeechSynthesisUtterance")}} オブジェクトで表されます。これらを {{domxref("SpeechSynthesis.speak()")}} メソッドに渡すことによって発話されます。
      • 
-
    
-
-
    これらの機能の使い方についての詳細は、Using the Web Speech API を参照してください。
    
-
-
    Web Speech API インターフェイス
    
-
-
    音声認識
    
-
-
    
- 
    {{domxref("SpeechRecognition")}}
    
- 
    認識サービスのコントローラーインターフェイスです。認識サービスから送信された {{domxref("SpeechRecognitionEvent")}} も扱います。
    
- 
    {{domxref("SpeechRecognitionAlternative")}}
    
- 
    音声認識サービスにより認識されている単語を表します。
    
- 
    {{domxref("SpeechRecognitionError")}}
    
- 
    認識サービスからのエラーメッセージを表します。
    
- 
    {{domxref("SpeechRecognitionEvent")}}
    
- 
    {{event("result")}} イベントおよび {{event("nomatch")}} イベントのためのイベントオブジェクトです。暫定あるいは最終の音声認識結果に関連付けられたすべてのデータを含みます。
    
- 
    {{domxref("SpeechGrammar")}}
    
- 
    認識サービスに認識してほしい言葉または言葉のパターンです。
    
- 
    {{domxref("SpeechGrammarList")}}
    
- 
    {{domxref("SpeechGrammar")}} オブジェクトのリストを表します。
    
- 
    {{domxref("SpeechRecognitionResult")}}
    
- 
    一致した一つの認識結果を表します。これには、複数の {{domxref("SpeechRecognitionAlternative")}} オブジェクトが含まれることがあります。
    
- 
    {{domxref("SpeechRecognitionResultList")}}
    
- 
    {{domxref("SpeechRecognitionResult")}} オブジェクトのリストを表します。または、{{domxref("SpeechRecognition.continuous","continuous")}} モードで結果が捕捉された場合は、一つだけになります。
    
-
    
-
-
    音声合成
    
-
-
    
- 
    {{domxref("SpeechSynthesis")}}
    
- 
    音声サービスのコントローラーインターフェイスです。これは、デバイスで利用可能な合成音声についての情報を取得したり、発話の開始や一時停止などのコマンドを実行するために使用されます。
    
- 
    {{domxref("SpeechSynthesisErrorEvent")}}
    
- 
    音声サービスで {{domxref("SpeechSynthesisUtterance")}} オブジェクトの処理中に発生したあらゆるエラーについての情報を含みます。
    
- 
    {{domxref("SpeechSynthesisEvent")}}
    
- 
    音声サービスで処理されている {{domxref("SpeechSynthesisUtterance")}} オブジェクトの現在の状態についての情報を含みます。
    
- 
    {{domxref("SpeechSynthesisUtterance")}}
    
- 
    音声リクエストを表します。これは、音声サービスが読み上げるコンテンツとその読み上げ方 (言語、音声の高低、音量など) についての情報を含みます。
    
-
    
-
-
    
- 
    {{domxref("SpeechSynthesisVoice")}}
    
- 
    システムがサポートする音声を表します。すべての SpeechSynthesisVoice は、それ自身に関連する音声サービス (言語、名前、URI についての情報を含む) を持ちます。
    
- 
    {{domxref("Window.speechSynthesis")}}
    
- 
    SpeechSynthesisGetter と呼ばれる [NoInterfaceObject] インターフェイスの一部として定義され、Window オブジェクトによって実装されたことで、speechSynthesis プロパティは {{domxref("SpeechSynthesis")}} コントローラーへのアクセスを提供します。したがって、音声合成機能へのエントリーポイントになります。
    
-
    
-
-
    例
    
-
-
    Github 上の Web Speech API リポジトリー には、音声合成や音声認識を説明するデモが含まれています。
    
-
-
    仕様
    
-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様書策定状況備考
    {{SpecName('Web Speech API')}}{{Spec2('Web Speech API')}}初期定義
    
-
-
    ブラウザーの実装状況
    
-
-
    SpeechRecognition
    
-
-
    
-
-
-
    {{Compat("api.SpeechRecognition", 0)}}
    
-
-
    SpeechSynthesis
    
-
-
    {{Compat("api.SpeechSynthesis", 0)}}
    
-
-
    関連項目
    
-
-
    
+{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
+
+Web Speech API は、音声データをウェブアプリに組み入れることを可能にします。Web Speech API は、SpeechSynthesis (Text-to-Speech; 音声合成) と SpeechRecognition (Asynchronous Speech Recognition; 非同期音声認識) の 2 つの部分から成り立っています。
+
+## Web Speech API のコンセプトと使用法
+
+Web Speech API は、ウェブアプリが音声データを扱えるようにします。この API には 2 つの構成要素があります。
+
+- 音声認識は {{domxref("SpeechRecognition")}} インターフェイス経由でアクセスされます。これは、音声入力 (通常はデバイスのデフォルト音声認識サービスを経由) から音声の文脈を認識し、適切に応答する機能を提供します。通常は、インターフェイスのコンストラクターを使用して新しい {{domxref("SpeechRecognition")}} オブジェクトを生成します。このオブジェクトは、デバイスのマイクを通して入力された音声を検知するための、いくつものイベントハンドラーを持ちます。{{domxref("SpeechGrammar")}} インターフェイスは、あなたのアプリが認識すべき特定の文法群のコンテナーを表します。文法は、[JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**) を使用して定義されています。
+- 音声合成は、{{domxref("SpeechSynthesis")}} インターフェイス経由でアクセスされます。これは、プログラムに、そのテキストコンテンツを読み上げる機能を提供します (通常はデバイスのデフォルトの音声合成を経由)。異なる音声の種類は、{{domxref("SpeechSynthesisVoice")}} オブジェクトで表され、発話してほしいテキストの異なる部分は、{{domxref("SpeechSynthesisUtterance")}} オブジェクトで表されます。これらを {{domxref("SpeechSynthesis.speak()")}} メソッドに渡すことによって発話されます。
+
+これらの機能の使い方についての詳細は、[Using the Web Speech API](/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) を参照してください。
+
+## Web Speech API インターフェイス
+
+### 音声認識
+
+- {{domxref("SpeechRecognition")}}
+  - : 認識サービスのコントローラーインターフェイスです。認識サービスから送信された {{domxref("SpeechRecognitionEvent")}} も扱います。
+- {{domxref("SpeechRecognitionAlternative")}}
+  - : 音声認識サービスにより認識されている単語を表します。
+- {{domxref("SpeechRecognitionError")}}
+  - : 認識サービスからのエラーメッセージを表します。
+- {{domxref("SpeechRecognitionEvent")}}
+  - : {{event("result")}} イベントおよび {{event("nomatch")}} イベントのためのイベントオブジェクトです。暫定あるいは最終の音声認識結果に関連付けられたすべてのデータを含みます。
+- {{domxref("SpeechGrammar")}}
+  - : 認識サービスに認識してほしい言葉または言葉のパターンです。
+- {{domxref("SpeechGrammarList")}}
+  - : {{domxref("SpeechGrammar")}} オブジェクトのリストを表します。
+- {{domxref("SpeechRecognitionResult")}}
+  - : 一致した一つの認識結果を表します。これには、複数の {{domxref("SpeechRecognitionAlternative")}} オブジェクトが含まれることがあります。
+- {{domxref("SpeechRecognitionResultList")}}
+  - : {{domxref("SpeechRecognitionResult")}} オブジェクトのリストを表します。または、{{domxref("SpeechRecognition.continuous","continuous")}} モードで結果が捕捉された場合は、一つだけになります。
+
+### 音声合成
+
+- {{domxref("SpeechSynthesis")}}
+  - : 音声サービスのコントローラーインターフェイスです。これは、デバイスで利用可能な合成音声についての情報を取得したり、発話の開始や一時停止などのコマンドを実行するために使用されます。
+- {{domxref("SpeechSynthesisErrorEvent")}}
+  - : 音声サービスで {{domxref("SpeechSynthesisUtterance")}} オブジェクトの処理中に発生したあらゆるエラーについての情報を含みます。
+- {{domxref("SpeechSynthesisEvent")}}
+  - : 音声サービスで処理されている {{domxref("SpeechSynthesisUtterance")}} オブジェクトの現在の状態についての情報を含みます。
+- {{domxref("SpeechSynthesisUtterance")}}
+  - : 音声リクエストを表します。これは、音声サービスが読み上げるコンテンツとその読み上げ方 (言語、音声の高低、音量など) についての情報を含みます。
+
+
+
+- {{domxref("SpeechSynthesisVoice")}}
+  - : システムがサポートする音声を表します。すべての `SpeechSynthesisVoice` は、それ自身に関連する音声サービス (言語、名前、URI についての情報を含む) を持ちます。
+- {{domxref("Window.speechSynthesis")}}
+  - : `SpeechSynthesisGetter` と呼ばれる `[NoInterfaceObject]` インターフェイスの一部として定義され、`Window` オブジェクトによって実装されたことで、`speechSynthesis` プロパティは {{domxref("SpeechSynthesis")}} コントローラーへのアクセスを提供します。したがって、音声合成機能へのエントリーポイントになります。
+
+## 例
+
+Github 上の [Web Speech API リポジトリー](https://github.com/mdn/web-speech-api/) には、音声合成や音声認識を説明するデモが含まれています。
+
+## 仕様
+
+| 仕様書                                   | 策定状況                             | 備考     |
+| ---------------------------------------- | ------------------------------------ | -------- |
+| {{SpecName('Web Speech API')}} | {{Spec2('Web Speech API')}} | 初期定義 |
+
+## ブラウザーの実装状況
+
+### `SpeechRecognition`
+
+{{Compat("api.SpeechRecognition", 0)}}
+
+### `SpeechSynthesis`
+
+{{Compat("api.SpeechSynthesis", 0)}}
+
+## 関連項目
+
+- [Using the Web Speech API](/ja/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
+- [SitePoint の記事](http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/)
+- [HTML5Rocks の記事](http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API)
+- [デモ](http://aurelio.audero.it/demo/speech-synthesis-api-demo.html) \[aurelio.audero.it]
diff --git a/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md
index d0cf0d9f353684..076c6fbad5b9f8 100644
--- a/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md
+++ b/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -3,213 +3,224 @@ title: Web Speech APIを使う
 slug: Web/API/Web_Speech_API/Using_the_Web_Speech_API
 translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
 ---
-
    Web Speech API は、音声認識と音声合成（text to speech または tts としても知られています）という 2 つの異なる分野の機能を提供しており、アクセシビリティと制御メカニズムに興味深い新しい可能性をもたらします。この記事では、両方の分野の簡単な紹介とデモを提供します。
    
+Web Speech API は、音声認識と音声合成（text to speech または tts としても知られています）という 2 つの異なる分野の機能を提供しており、アクセシビリティと制御メカニズムに興味深い新しい可能性をもたらします。この記事では、両方の分野の簡単な紹介とデモを提供します。
 
-
    音声認識
    
+## 音声認識
 
-
    音声認識ではデバイスのマイクを通して音声を受信し、音声認識サービスによって文法のリスト（基本的には特定のアプリで認識させたいボキャブラリー）と照合されます。単語やフレーズが正常に認識されると、結果（または結果のリスト）がテキスト文字列として返され、その結果としてさらなるアクションを開始することができます。
    
+音声認識ではデバイスのマイクを通して音声を受信し、音声認識サービスによって文法のリスト（基本的には特定のアプリで認識させたいボキャブラリー）と照合されます。単語やフレーズが正常に認識されると、結果（または結果のリスト）がテキスト文字列として返され、その結果としてさらなるアクションを開始することができます。
 
-
    Web Speech API には、このための主要なコントローラインターフェイスである {{domxref("SpeechRecognition")}} と、文法や結果などを表現するためのいくつかの密接に関連したインターフェースがあります。一般的には、デバイス上で利用可能なデフォルトの音声認識システムが音声認識に使用されます — 最近のほとんどのOSには音声コマンドを発行するための音声認識システムが搭載されています。macOSのDictation、iOSのSiri、Windows 10のCortana、AndroidのSpeechなどを考えてみてください。
    
+Web Speech API には、このための主要なコントローラインターフェイスである {{domxref("SpeechRecognition")}} と、文法や結果などを表現するためのいくつかの密接に関連したインターフェースがあります。一般的には、デバイス上で利用可能なデフォルトの音声認識システムが音声認識に使用されます — 最近のほとんどの OS には音声コマンドを発行するための音声認識システムが搭載されています。macOS の Dictation、iOS の Siri、Windows 10 の Cortana、Android の Speech などを考えてみてください。
 
-
    
-
    注釈: Chrome などの一部のブラウザでは、Web ページで音声認識を使用するためにサーバーベースの認識エンジンが必要です。音声が認識処理のためにウェブサービスに送信されるため、オフラインでは機能しません。
    
-
    
+> **Note:** **注釈**: Chrome などの一部のブラウザでは、Web ページで音声認識を使用するためにサーバーベースの認識エンジンが必要です。音声が認識処理のためにウェブサービスに送信されるため、オフラインでは機能しません。
 
-
    デモ
    
+### デモ
 
-
    Web音声認識の簡単な使い方を示すために、Speech color changerというデモを書いてみました。画面をタップ/クリックし、HTMLの色のキーワードを言うと、アプリの背景色がその色に変わります。
    
+Web 音声認識の簡単な使い方を示すために、[Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer)というデモを書いてみました。画面をタップ/クリックし、HTML の色のキーワードを言うと、アプリの背景色がその色に変わります。
 
-
    The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.
    
+![The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.](https://mdn.mozillademos.org/files/11975/speech-color-changer.png)
 
-
    デモを実行するには、それが一部となっているGithubリポジトリをクローン（または直接ダウンロード）し、サポートされているデスクトップブラウザでHTML indexファイルを開くか、ChromeのようなサポートされているモバイルブラウザでライブデモのURLに移動することができます。
    
+デモを実行するには、それが一部となっている Github リポジトリをクローン（または[直接ダウンロード](https://github.com/mdn/web-speech-api/archive/master.zip)）し、サポートされているデスクトップブラウザで HTML index ファイルを開くか、Chrome のようなサポートされているモバイルブラウザで[ライブデモの URL](https://mdn.github.io/web-speech-api/speech-color-changer/)に移動することができます。
 
-
    ブラウザ対応
    
+### ブラウザ対応
 
-
    Web Speech API 音声認識のサポートは、通常 Chrome for Desktop と Android に限られています — Chrome はバージョン 33 付近からサポートしていますが、プレフィックス付きのインターフェイスを使用しているため、 webkitSpeechRecognition などのプレフィックス付きバージョンを含める必要があります。
    
+Web Speech API 音声認識のサポートは、通常 Chrome for Desktop と Android に限られています — Chrome はバージョン 33 付近からサポートしていますが、プレフィックス付きのインターフェイスを使用しているため、 `webkitSpeechRecognition` などのプレフィックス付きバージョンを含める必要があります。
 
-
    HTMLとCSS
    
+### HTML と CSS
 
-
    アプリのHTMLとCSSは本当に簡単です。タイトル、説明段落、診断メッセージを出力するdivがあるだけです。
    
+アプリの HTML と CSS は本当に簡単です。タイトル、説明段落、診断メッセージを出力する div があるだけです。
 
-
    <h1>Speech color changer</h1>
-<p>Tap/click then say a color to change the background color of the app.</p>
-<div>
-  <p class="output"><em>...diagnostic messages</em></p>
-</div>
    
+```html
+
    Speech color changer
    
+
    Tap/click then say a color to change the background color of the app.
    
+
    
+  
    ...diagnostic messages
    
+
    
+```
 
-
    このCSSでは、デバイスをまたいでも問題なく見えるように、非常にシンプルなレスポンシブ・スタイリングを提供しています。
    
+この CSS では、デバイスをまたいでも問題なく見えるように、非常にシンプルなレスポンシブ・スタイリングを提供しています。
 
-
    JavaScript
    
+### JavaScript
 
-
    JavaScriptをもう少し詳しく見てみましょう。
    
+JavaScript をもう少し詳しく見てみましょう。
 
-
    Chrome対応
    
+#### Chrome 対応
 
-
    前述したように、Chrome は現在プレフィックス付きのプロパティで音声認識をサポートしているので、適切なオブジェクトを Chrome に供給し、そして将来的な実装でプレフィックスなしの機能をサポートする可能性も踏まえ、以下の行をコードの最初に追加しています。
    
+前述したように、Chrome は現在プレフィックス付きのプロパティで音声認識をサポートしているので、適切なオブジェクトを Chrome に供給し、そして将来的な実装でプレフィックスなしの機能をサポートする可能性も踏まえ、以下の行をコードの最初に追加しています。
 
-
    var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+```js
+var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
 var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
-var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
    
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+```
 
-
    文法
    
+#### 文法
 
-
    コードの次の部分では、アプリが認識する文法を定義します。次の変数は文法を保持するために定義されています。
    
+コードの次の部分では、アプリが認識する文法を定義します。次の変数は文法を保持するために定義されています。
 
-
    var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
-var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
    
+```js
+var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public  = ' + colors.join(' | ') + ' ;'
+```
 
-
    使用されている文法形式は JSpeech Grammar Format (JSGF) です — それについての詳細はリンク先の仕様書を参照してください。しかし、今のところは手っ取り早く実行してみましょう。
    
+使用されている文法形式は [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**) です — それについての詳細はリンク先の仕様書を参照してください。しかし、今のところは手っ取り早く実行してみましょう。
 
-
      
- 
    • 行の区切りはJavaScriptと同じようにセミコロンで区切られています。
      • 
- 
    • 最初の行 — #JSGF V1.0; — は、使用されているフォーマットとバージョンを示します。これは常に最初に含める必要があります。
      • 
- 
    • 2行目は認識したい用語のタイプを示します。public はパブリックルールであることを宣言し、角括弧内の文字列はこの用語の認識名 (color) を定義し、等号の後に続く項目のリストは、用語の適切な値として認識され受け入れられる代替値です。それぞれがパイプ文字で区切られていることに注意してください。
      • 
- 
    • 上記の構造に沿って別の行に好きなだけ多くの用語を定義し、かなり複雑な文法定義を含めることができます。この基本的なデモのために私たちは物事をシンプルにしています。 
      • 
-
    
+- 行の区切りは JavaScript と同じようにセミコロンで区切られています。
+- 最初の行 — `#JSGF V1.0;` — は、使用されているフォーマットとバージョンを示します。これは常に最初に含める必要があります。
+- 2 行目は認識したい用語のタイプを示します。`public` はパブリックルールであることを宣言し、角括弧内の文字列はこの用語の認識名 (`color`) を定義し、等号の後に続く項目のリストは、用語の適切な値として認識され受け入れられる代替値です。それぞれがパイプ文字で区切られていることに注意してください。
+- 上記の構造に沿って別の行に好きなだけ多くの用語を定義し、かなり複雑な文法定義を含めることができます。この基本的なデモのために私たちは物事をシンプルにしています。
 
-
    文法を音声認識にプラグインする
    
+#### 文法を音声認識にプラグインする
 
-
    次にやるべきことは、アプリケーションの認識を制御する音声認識インスタンスを定義することです。これは {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} コンストラクタを使用して行います。また、{{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} コンストラクタを使用して、文法を含む新しい音声文法リストも作成します。
    
+次にやるべきことは、アプリケーションの認識を制御する音声認識インスタンスを定義することです。これは {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} コンストラクタを使用して行います。また、{{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} コンストラクタを使用して、文法を含む新しい音声文法リストも作成します。
 
-
    var recognition = new SpeechRecognition();
-var speechRecognitionList = new SpeechGrammarList();
    
+```js
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+```
 
-
    {{domxref("SpeechGrammarList.addFromString()")}} メソッドを使ってリストに grammar を追加します。 このメソッドは追加したい文字列をパラメータとして受けとり、さらにオプションで、リスト内で利用可能な他の文法との関係においてこの文法の重要度を指定する重み値を受け取ります（0から1までの範囲で指定できます）。追加された文法は{{domxref("SpeechGrammar")}} オブジェクトのインスタンスとしてリスト内で利用できます。
    
+{{domxref("SpeechGrammarList.addFromString()")}} メソッドを使ってリストに `grammar` を追加します。 このメソッドは追加したい文字列をパラメータとして受けとり、さらにオプションで、リスト内で利用可能な他の文法との関係においてこの文法の重要度を指定する重み値を受け取ります（0 から 1 までの範囲で指定できます）。追加された文法は{{domxref("SpeechGrammar")}} オブジェクトのインスタンスとしてリスト内で利用できます。
 
-
    speechRecognitionList.addFromString(grammar, 1);
    
+```js
+speechRecognitionList.addFromString(grammar, 1);
+```
 
-
    次に、 {{domxref("SpeechGrammarList")}} を {{domxref("SpeechRecognition.grammars")}} プロパティの値に設定することで、音声認識インスタンスに {{domxref("SpeechGrammarList")}} を追加します。次に進む前に、認識インスタンスの他のいくつかのプロパティも設定します。
    
+次に、 {{domxref("SpeechGrammarList")}} を {{domxref("SpeechRecognition.grammars")}} プロパティの値に設定することで、音声認識インスタンスに {{domxref("SpeechGrammarList")}} を追加します。次に進む前に、認識インスタンスの他のいくつかのプロパティも設定します。
 
-
      
- 
    • {{domxref("SpeechRecognition.continuous")}}: 認識が開始されるたびに連続した結果をキャプチャする (true) か、または単一の結果だけをキャプチャする (false) かを制御します。
      • 
- 
    • {{domxref("SpeechRecognition.lang")}}: 認識の言語を設定します。これを設定することは良い習慣であるため、推奨されます。
      • 
- 
    • {{domxref("SpeechRecognition.interimResults")}}: 音声認識システムが中間的な結果を返すか、最終的な結果だけを返すか定義します。このシンプルなデモでは最終的な結果で十分です。
      • 
- 
    • {{domxref("SpeechRecognition.maxAlternatives")}}: 結果ごとに返される代替候補数を設定します。これは、結果が完全に明確ではなく、ユーザーが正しいものを選択できるように代替候補のリストを表示したい場合などに便利な場合があります。しかし、このシンプルなデモでは必要ないのでここでは1つだけ指定します（これは実際にはデフォルトです）。
      • 
-
    
+- {{domxref("SpeechRecognition.continuous")}}: 認識が開始されるたびに連続した結果をキャプチャする (`true`) か、または単一の結果だけをキャプチャする (`false`) かを制御します。
+- {{domxref("SpeechRecognition.lang")}}: 認識の言語を設定します。これを設定することは良い習慣であるため、推奨されます。
+- {{domxref("SpeechRecognition.interimResults")}}: 音声認識システムが中間的な結果を返すか、最終的な結果だけを返すか定義します。このシンプルなデモでは最終的な結果で十分です。
+- {{domxref("SpeechRecognition.maxAlternatives")}}: 結果ごとに返される代替候補数を設定します。これは、結果が完全に明確ではなく、ユーザーが正しいものを選択できるように代替候補のリストを表示したい場合などに便利な場合があります。しかし、このシンプルなデモでは必要ないのでここでは 1 つだけ指定します（これは実際にはデフォルトです）。
 
-
    recognition.grammars = speechRecognitionList;
+```js
+recognition.grammars = speechRecognitionList;
 recognition.continuous = false;
 recognition.lang = 'en-US';
 recognition.interimResults = false;
-recognition.maxAlternatives = 1;
    
+recognition.maxAlternatives = 1;
+```
 
-
    音声認識の開始
    
+#### 音声認識の開始
 
-
    出力 {{htmlelement("div")}} とHTML要素への参照を取得（診断メッセージを出力したり、後でアプリの背景色を更新したりできるようにするため）した後、画面がタップ/クリックされたときに音声認識サービスが開始されるように onclick ハンドラを実装します。これは {{domxref("SpeechRecognition.start()")}} を呼び出すことで実現しています。 forEach() メソッドは何色を言っているかを示す色付きインジケータを出力するために使われています。
    
+出力 {{htmlelement("div")}} と HTML 要素への参照を取得（診断メッセージを出力したり、後でアプリの背景色を更新したりできるようにするため）した後、画面がタップ/クリックされたときに音声認識サービスが開始されるように onclick ハンドラを実装します。これは {{domxref("SpeechRecognition.start()")}} を呼び出すことで実現しています。 `forEach()` メソッドは何色を言っているかを示す色付きインジケータを出力するために使われています。
 
-
    var diagnostic = document.querySelector('.output');
+```js
+var diagnostic = document.querySelector('.output');
 var bg = document.querySelector('html');
 var hints = document.querySelector('.hints');
 
 var colorHTML= '';
 colors.forEach(function(v, i, a){
   console.log(v, i);
-  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
+  colorHTML += ' ' + v + ' ';
 });
 hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
 
 document.body.onclick = function() {
   recognition.start();
   console.log('Ready to receive a color command.');
-}
    
+}
+```
 
-
    結果の受け取りとハンドリング
    
+#### 結果の受け取りとハンドリング
 
-
    音声認識が開始されると、結果やその他の周辺情報を取得するために使用できる多くのイベントハンドラがあります（SpeechRecognition のイベントハンドラのリスト を参照してください）。最も一般的なものは {{domxref("SpeechRecognition.onresult")}} で、成功した結果を受信したときに発火されます。
    
+音声認識が開始されると、結果やその他の周辺情報を取得するために使用できる多くのイベントハンドラがあります（[`SpeechRecognition` のイベントハンドラのリスト](/ja/docs/Web/API/SpeechRecognition#Event_handlers) を参照してください）。最も一般的なものは {{domxref("SpeechRecognition.onresult")}} で、成功した結果を受信したときに発火されます。
 
-
    recognition.onresult = function(event) {
+```js
+recognition.onresult = function(event) {
   var color = event.results[0][0].transcript;
   diagnostic.textContent = 'Result received: ' + color + '.';
   bg.style.backgroundColor = color;
   console.log('Confidence: ' + event.results[0][0].confidence);
-}
    
+}
+```
 
-
    ここの2行目はちょっと複雑そうなので、順を追って説明していきましょう。{{domxref("SpeechRecognitionEvent.results")}}プロパティは、 {{domxref("SpeechRecognitionResult")}} オブジェクトを含む {{domxref("SpeechRecognitionResultList")}} オブジェクトを返します。これはゲッターを持っているので配列のようにアクセスでき、最初の[0]は0の位置にあるSpeechRecognitionResultを返します。各 SpeechRecognitionResult オブジェクトには、個々に認識された単語を含む {{domxref("SpeechRecognitionAlternative")}} オブジェクトが含まれています。これらは配列のようにアクセスできるようにゲッターも持っています  — 2 番目の[0]は、したがって位置 0 の SpeechRecognitionAlternative を返します。次に、その transcript プロパティを返して個々の認識結果を含む文字列を文字列として取得し、背景色をその色に設定し、認識された色をUIの診断メッセージとして報告します。
    
+ここの 2 行目はちょっと複雑そうなので、順を追って説明していきましょう。{{domxref("SpeechRecognitionEvent.results")}}プロパティは、 {{domxref("SpeechRecognitionResult")}} オブジェクトを含む {{domxref("SpeechRecognitionResultList")}} オブジェクトを返します。これはゲッターを持っているので配列のようにアクセスでき、最初の`[0]`は 0 の位置にある`SpeechRecognitionResult`を返します。各 `SpeechRecognitionResult` オブジェクトには、個々に認識された単語を含む {{domxref("SpeechRecognitionAlternative")}} オブジェクトが含まれています。これらは配列のようにアクセスできるようにゲッターも持っています — 2 番目の`[0]`は、したがって位置 0 の `SpeechRecognitionAlternative` を返します。次に、その `transcript` プロパティを返して個々の認識結果を含む文字列を文字列として取得し、背景色をその色に設定し、認識された色を UI の診断メッセージとして報告します。
 
-
    また、 {{domxref("SpeechRecognition.onspeechend")}} ハンドラを使用して音声認識サービスの実行を停止します（1つの単語が認識され、それが発話され終わったら {{domxref("SpeechRecognition.stop()")}}) を使用します）。
    
+また、 {{domxref("SpeechRecognition.onspeechend")}} ハンドラを使用して音声認識サービスの実行を停止します（1 つの単語が認識され、それが発話され終わったら {{domxref("SpeechRecognition.stop()")}}) を使用します）。
 
-
    recognition.onspeechend = function() {
+```js
+recognition.onspeechend = function() {
   recognition.stop();
-}
    
+}
+```
 
-
    エラーや認識されない発話のハンドリング
    
+#### エラーや認識されない発話のハンドリング
 
-
    最後の 2 つのハンドラは、定義された文法にない音声が認識されたケースやエラーが発生したケースを処理するためのものです。{{domxref("SpeechRecognition.onnomatch")}} は最初に言及したケースを処理することになっているようですが、今のところ正しく動作しているようには見えないことに注意してください（とにかく認識されたものを返すだけです）。
    
+最後の 2 つのハンドラは、定義された文法にない音声が認識されたケースやエラーが発生したケースを処理するためのものです。{{domxref("SpeechRecognition.onnomatch")}} は最初に言及したケースを処理することになっているようですが、今のところ正しく動作しているようには見えないことに注意してください（とにかく認識されたものを返すだけです）。
 
-
    recognition.onnomatch = function(event) {
+```js
+recognition.onnomatch = function(event) {
   diagnostic.textContent = 'I didnt recognise that color.';
-}
    
+}
+```
 
-
    {{domxref("SpeechRecognition.onerror")}} は、認識に成功して実際にエラーが発生したケースを処理します — {{domxref("SpeechRecognitionError.error")}} プロパティには、返された実際のエラーが含まれます。
    
+{{domxref("SpeechRecognition.onerror")}} は、認識に成功して実際にエラーが発生したケースを処理します — {{domxref("SpeechRecognitionError.error")}} プロパティには、返された実際のエラーが含まれます。
 
-
    recognition.onerror = function(event) {
+```js
+recognition.onerror = function(event) {
   diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
-}
    
+}
+```
 
-
    Speech synthesis
    
+## Speech synthesis
 
-
    Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.
    
+Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.
 
-
    The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.
    
+The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.
 
-
    Demo
    
+### Demo
 
-
    To show simple usage of Web speech synthesis, we've provided a demo called Speak easy synthesis. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press Enter/Return to hear it spoken.
    
+To show simple usage of Web speech synthesis, we've provided a demo called [Speak easy synthesis](https://mdn.github.io/web-speech-api/speak-easy-synthesis/). This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press Enter/Return to hear it spoken.
 
-
    UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.
    
+![UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.](https://mdn.mozillademos.org/files/11977/speak-easy-synthesis.png)
 
-
    To run the demo, you can clone (or directly download) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the live demo URL in a supporting mobile browser like Chrome, or Firefox OS.
    
+To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS.
 
-
    Browser support
    
+### Browser support
 
-
    Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:
    
+Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:
 
-
      
- 
    • 
-  
      Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the media.webspeech.synth.enabled flag to true in about:config.
      
- 
      • 
- 
    • 
-  
      Firefox OS 2.5+ supports it, by default, and without the need for any permissions.
      
- 
      • 
- 
    • 
-  
      Chrome for Desktop and Android have supported it since around version 33, without prefixes.
      
- 
      • 
-
    
+- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`.
+- Firefox OS 2.5+ supports it, by default, and without the need for any permissions.
+- Chrome for Desktop and Android have supported it since around version 33, without prefixes.
 
-
    HTML and CSS
    
+### HTML and CSS
 
-
    The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)
    
+The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)
 
-
    <h1>Speech synthesiser</h1>
+```html
+
    Speech synthesiser
    
 
-<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
+
    Enter some text in the input below and press return to hear it. change voices using the dropdown menu.
    
 
-<form>
-  <input type="text" class="txt">
-  <div>
-    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
-    <div class="rate-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <div>
-    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
-    <div class="pitch-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <select>
+
    
+  
+  
    
+    
+    
    1
    
+    
    
+  
    
+  
    
+    
+    
    1
    
+    
    
+  
    
+  
+
    
+```
 
-
    JavaScript
    
+### JavaScript
 
-
    Let's investigate the JavaScript that powers this app.
    
+Let's investigate the JavaScript that powers this app.
 
-
    Setting variables
    
+#### Setting variables
 
-
    First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.
    
+First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.
 
-
    var synth = window.speechSynthesis;
+```js
+var synth = window.speechSynthesis;
 
 var inputForm = document.querySelector('form');
 var inputTxt = document.querySelector('.txt');
@@ -221,18 +232,19 @@ var rate = document.querySelector('#rate');
 var rateValue = document.querySelector('.rate-value');
 
 var voices = [];
-
    
+```
 
-
    Populating the select element
    
+#### Populating the select element
 
-
    To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a populateVoiceList() function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and -- DEFAULT if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns true.)
    
+To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a `populateVoiceList()` function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and `-- DEFAULT` if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns `true`.)
 
-
    We also create data- attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.
    
+We also create `data-` attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.
 
-
    function populateVoiceList() {
+```js
+function populateVoiceList() {
   voices = synth.getVoices();
 
-  for(i = 0; i < voices.length ; i++) {
+  for(i = 0; i < voices.length ; i++) {
     var option = document.createElement('option');
     option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
 
@@ -244,58 +256,69 @@ var voices = [];
     option.setAttribute('data-name', voices[i].name);
     voiceSelect.appendChild(option);
   }
-}
    
+}
+```
 
-
    When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.
    
+When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.
 
-
    populateVoiceList();
+```js
+populateVoiceList();
 if (speechSynthesis.onvoiceschanged !== undefined) {
   speechSynthesis.onvoiceschanged = populateVoiceList;
-}
    
+}
+```
 
-
    Speaking the entered text
    
+#### Speaking the entered text
 
-
    Next, we create an event handler to start speaking the text entered into the text field. We are using an onsubmit handler on the form so that the action happens when Enter/Return is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.
    
+Next, we create an event handler to start speaking the text entered into the text field. We are using an [onsubmit](/ja/docs/Web/API/GlobalEventHandlers/onsubmit) handler on the form so that the action happens when Enter/Return is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.
 
-
    Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} selectedOptions property to return the currently selected {{htmlelement("option")}} element. We then use this element's data-name attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.
    
+Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} `selectedOptions` property to return the currently selected {{htmlelement("option")}} element. We then use this element's `data-name` attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.
 
-
    Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.
    
+Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.
 
-
    inputForm.onsubmit = function(event) {
+```js
+inputForm.onsubmit = function(event) {
   event.preventDefault();
 
   var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
   var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i < voices.length ; i++) {
+  for(i = 0; i < voices.length ; i++) {
     if(voices[i].name === selectedOption) {
       utterThis.voice = voices[i];
     }
   }
   utterThis.pitch = pitch.value;
   utterThis.rate = rate.value;
-  synth.speak(utterThis);
    
+  synth.speak(utterThis);
+```
 
-
    In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.
    
+In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.
 
-
       utterThis.onpause = function(event) {
+```js
+   utterThis.onpause = function(event) {
     var char = event.utterance.text.charAt(event.charIndex);
     console.log('Speech paused at character ' + event.charIndex + ' of "' +
     event.utterance.text + '", which is "' + char + '".');
-  }
    
+  }
+```
 
-
    Finally, we call blur() on the text input. This is mainly to hide the keyboard on Firefox OS.
    
+Finally, we call [blur()](/ja/docs/Web/API/HTMLElement/blur) on the text input. This is mainly to hide the keyboard on Firefox OS.
 
-
      inputTxt.blur();
-}
    
+```js
+  inputTxt.blur();
+}
+```
 
-
    Updating the displayed pitch and rate values
    
+#### Updating the displayed pitch and rate values
 
-
    The last part of the code simply updates the pitch/rate values displayed in the UI, each time the slider positions are moved.
    
+The last part of the code simply updates the `pitch`/`rate` values displayed in the UI, each time the slider positions are moved.
 
-
    pitch.onchange = function() {
+```js
+pitch.onchange = function() {
   pitchValue.textContent = pitch.value;
 }
 
 rate.onchange = function() {
   rateValue.textContent = rate.value;
-}
    
+}
+```
diff --git a/files/ja/web/api/web_storage_api/index.md b/files/ja/web/api/web_storage_api/index.md
index 1a2b228ef913b2..651150ba691ad3 100644
--- a/files/ja/web/api/web_storage_api/index.md
+++ b/files/ja/web/api/web_storage_api/index.md
@@ -10,105 +10,74 @@ tags:
   - sessionStorage
 translation_of: Web/API/Web_Storage_API
 ---
-
    {{DefaultAPISidebar("Web Storage API")}}
    
+{{DefaultAPISidebar("Web Storage API")}}
 
-
    Web Storage API は、{{Glossary("Cookie","クッキー")}}を使用するよりも直感的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。
    
+**Web Storage API** は、{{Glossary("Cookie","クッキー")}}を使用するよりも直感的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。
 
-
    Web Storage の概念と使用方法
    
+## Web Storage の概念と使用方法
 
-
    Web Storage には、以下の 2 種類の仕組みがあります:
    
+Web Storage には、以下の 2 種類の仕組みがあります:
 
-
      
- 
    • sessionStorage は、ページのセッション中 (ページの再読み込みや復元を含む、ブラウザーを開いている間) に使用可能な、{{glossary("origin","オリジン")}}ごとに区切られた保存領域を管理します。
+- `sessionStorage` は、ページのセッション中 (ページの再読み込みや復元を含む、ブラウザーを開いている間) に使用可能な、{{glossary("origin","オリジン")}}ごとに区切られた保存領域を管理します。
 
-  
        
-   
      • セッションデータのみを保存します。つまり、データはブラウザ（またはタブ）が閉じられるまで保存されます。
        • 
-   
      • データがサーバに転送されることはありません。
        • 
-   
      • ストレージの制限がクッキーよりも大きいです（最大 5MB ）。
        • 
-  
      
- 
      • 
- 
    • localStorage も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
-  
        
-   
      • 有効期限なしでデータを保存し、 JavaScript を介してクリアされます。もしくは、ブラウザキャッシュ/ローカルに保存したデータのクリアによりクリアされます。
        • 
-   
      • ストレージ制限は3つの中で最大です。
        • 
-  
      
- 
      • 
-
    
+  - セッションデータのみを保存します。つまり、データはブラウザ（またはタブ）が閉じられるまで保存されます。
+  - データがサーバに転送されることはありません。
+  - ストレージの制限がクッキーよりも大きいです（最大 5MB ）。
 
-
    これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、サポートするブラウザーは Window オブジェクトが WindowLocalStorage および WindowSessionStorage オブジェクトを実装しており、これらに localStorage および sessionStorage プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して sessionStorage と localStorage は、別の Storage オブジェクトを使用します。 これらは別々に制御されて機能します。
    
+- `localStorage` も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
 
-
    
-
    注記: Firefox 45 より、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。 Web Storage の使用量が過大であることによって発生するメモリの問題を避けるために、制限を設定しました。
    
-
    
+  - 有効期限なしでデータを保存し、 JavaScript を介してクリアされます。もしくは、ブラウザキャッシュ/ローカルに保存したデータのクリアによりクリアされます。
+  - ストレージ制限は 3 つの中で最大です。
 
-
    
-
    注記: ユーザーがサードパーティのクッキーを禁止している（英語）場合は、サードパーティの iframe から Web Storage にアクセスできません (Firefox 43 から、この動作を実装しています)。
    
-
    
+これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、サポートするブラウザーは `Window` オブジェクトが `WindowLocalStorage` および `WindowSessionStorage` オブジェクトを実装しており、これらに `localStorage` および `sessionStorage` プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して `sessionStorage` と `localStorage` は、別の Storage オブジェクトを使用します。 これらは別々に制御されて機能します。
 
-
    
-
    注記: Web Storage は、mozStorage (SQLite 用の、Mozilla の XPCOM インターフェイス) や Session store API (拡張機能で使用するための、XPCOM ストレージユーティリティ) とは異なります。
    
-
    
+> **Note:** **注記**: Firefox 45 より、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。 Web Storage の使用量が過大であることによって発生するメモリの問題を避けるために、制限を設定しました。
 
-
    Web Storage インターフェイス
    
+> **Note:** **注記**: ユーザーが[サードパーティのクッキーを禁止している](https://support.mozilla.org/kb/disable-third-party-cookies)（英語）場合は、サードパーティの iframe から Web Storage にアクセスできません ([Firefox 43](/ja/docs/Mozilla/Firefox/Releases/43) から、この動作を実装しています)。
 
-
    
- 
    {{domxref("Storage")}}
    
- 
    特定のドメインおよびストレージタイプ (session または local) に対して、データを保存、取り出し、削除できます。
    
- 
    {{domxref("Window")}}
    
- 
    Web Storage API は {{domxref("Window")}} オブジェクトを、{{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} という新たなプロパティで拡張します。 これらは、それぞれ現在のドメインの session および local {{domxref("Storage")}} オブジェクトへのアクセス手段を提供します。 また、保存領域が変更される (例えば新たなアイテムを保存する) と発生する、{{domxref("Window.onstorage")}} イベントハンドラもあります。
    
- 
    {{domxref("StorageEvent")}}
    
- 
    storage イベントは、保存領域が変更されたときにドキュメントの Window オブジェクトで発生します。
    
-
    
+> **Note:** **注記:** Web Storage は、[mozStorage](/ja/docs/Storage "Storage") (SQLite 用の、Mozilla の XPCOM インターフェイス) や [Session store API](/ja/docs/Session_store_API "Session_store_API") (拡張機能で使用するための、[XPCOM](/ja/docs/XPCOM "XPCOM") ストレージユーティリティ) とは異なります。
 
-
    例
    
+## Web Storage インターフェイス
 
-
    Web Storage の典型的な使用法を示すため、想像力豊かに Web Storage Demo と名づけたシンプルな例を作成しました。 ランディングページには、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。 別の選択肢を選ぶと、即座にページが更新されます。 さらに、選択内容を localStorage に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。
    
+- {{domxref("Storage")}}
+  - : 特定のドメインおよびストレージタイプ (session または local) に対して、データを保存、取り出し、削除できます。
+- {{domxref("Window")}}
+  - : Web Storage API は {{domxref("Window")}} オブジェクトを、{{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} という新たなプロパティで拡張します。 これらは、それぞれ現在のドメインの session および local {{domxref("Storage")}} オブジェクトへのアクセス手段を提供します。 また、保存領域が変更される (例えば新たなアイテムを保存する) と発生する、{{domxref("Window.onstorage")}} イベントハンドラもあります。
+- {{domxref("StorageEvent")}}
+  - : `storage` イベントは、保存領域が変更されたときにドキュメントの `Window` オブジェクトで発生します。
 
-
    また、event output ページも提供します。 このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。
    
+## 例
 
-
    仕様
    
+Web Storage の典型的な使用法を示すため、想像力豊かに [Web Storage Demo](https://github.com/mdn/dom-examples/tree/master/web-storage) と名づけたシンプルな例を作成しました。[ ランディングページ](https://mdn.github.io/dom-examples/web-storage/)には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。 別の選択肢を選ぶと、即座にページが更新されます。 さらに、選択内容を `localStorage` に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。
 
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
    仕様書策定状況コメント
    {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
    
+また、[event output ページ](https://mdn.github.io/dom-examples/web-storage/event.html)も提供します。 このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。
 
-
    ブラウザー実装状況
    
+## 仕様
 
-
    Window.localStorage
    
+| 仕様書                                                                       | 策定状況                         | コメント |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} | {{Spec2('HTML WHATWG')}} |          |
 
-
    
-
    {{Compat("api.Window.localStorage")}}
    
+## ブラウザー実装状況
 
-
    Window.sessionStorage
    
+### `Window.localStorage`
 
-
    
-
    {{Compat("api.Window.sessionStorage")}}
    
-
    
-
    
+{{Compat("api.Window.localStorage")}}
 
-
    プライベートブラウジング / シークレットモード
    
+### `Window.sessionStorage`
 
-
    ほとんどの現行ブラウザーは 'シークレット' や 'プライベートブラウジング' などと呼ばれる、履歴やクッキーといったデータを保存しないプライバシーモードをサポートしています。 これらは明白な理由で、Web Storage とは根本的に互換性がありません。 それでもブラウザーベンダーは、この非互換性をどのように扱うかを、さまざまなシナリオで実験しています。
    
+{{Compat("api.Window.sessionStorage")}}
 
-
    ほとんどのブラウザーは Storage API を有効にして、見かけ上完全に機能する方針をとっていますが、保存したデータはすべて、ブラウザーを閉じた後に消去されることが大きな違いです。 これらのブラウザーでは、既存の保存済みデータ (通常のブラウジングセッションで保存したもの) をどう扱うかについて、まださまざまな解釈が存在します。 このデータはプライベートモードで読み出せるべきでしょうか? 一部のブラウザー、特に Safari ではストレージは使用できますが空であり、また割り当てられたクォータが 0 バイトであるため事実上データを書き込めないという解決策をとっています。
    
+## プライベートブラウジング / シークレットモード
 
-
    開発者はこれらのさまざまな実装を意識して、Web Storage API に依存する Web サイトを開発する際に考慮するべきです。 詳しくはこのトピックを扱った、WHATWG のブログ記事（英語）をご覧ください。
    
+ほとんどの現行ブラウザーは 'シークレット' や 'プライベートブラウジング' などと呼ばれる、履歴やクッキーといったデータを保存しないプライバシーモードをサポートしています。 これらは明白な理由で、Web Storage とは根本的に互換性がありません。 それでもブラウザーベンダーは、この非互換性をどのように扱うかを、さまざまなシナリオで実験しています。
 
-
    関連情報
    
+ほとんどのブラウザーは Storage API を有効にして、見かけ上完全に機能する方針をとっていますが、保存したデータはすべて、ブラウザーを閉じた後に消去されることが大きな違いです。 これらのブラウザーでは、既存の保存済みデータ (通常のブラウジングセッションで保存したもの) をどう扱うかについて、まださまざまな解釈が存在します。 このデータはプライベートモードで読み出せるべきでしょうか? 一部のブラウザー、特に Safari ではストレージは使用できますが空であり、また割り当てられたクォータが 0 バイトであるため事実上データを書き込めないという解決策をとっています。
 
-
+開発者はこれらのさまざまな実装を意識して、Web Storage API に依存する Web サイトを開発する際に考慮するべきです。 詳しくはこのトピックを扱った、[WHATWG のブログ記事](https://blog.whatwg.org/tag/localstorage)（英語）をご覧ください。
+
+## 関連情報
+
+- [Web Storage API を使用する](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ブラウザーのストレージ制限と削除基準](/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria)
+- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b)
diff --git a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
index bc01e7d0cd7a99..2a2c78f3344132 100644
--- a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -10,48 +10,47 @@ tags:
   - sessionStorage
 translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
 ---
-
    {{DefaultAPISidebar("Web Storage API")}}
    
+{{DefaultAPISidebar("Web Storage API")}}
 
-
    Web Storage API は、ブラウザーがキーと値のペアを安全に保存できる仕組みを提供します。
    
+Web Storage API は、ブラウザーがキーと値のペアを安全に保存できる仕組みを提供します。
 
-
    この記事は、この技術を利用する方法のチュートリアルを提供します。
    
+この記事は、この技術を利用する方法のチュートリアルを提供します。
 
-
    基本概念
    
+## 基本概念
 
-
    Storage オブジェクトはシンプルなキーと値の組み合わせを保存しており、オブジェクトに似ていますが、これらは何度ページを読み込んでも存在し続けます。キーは常に文字列です (なお、オブジェクトと同様、整数のキーは自動的に文字列に変換されます)。これらの値にアクセスするにはオブジェクトと同様に、または {{domxref("Storage.getItem()")}} と {{domxref("Storage.setItem()")}} メソッドを使用して行います。以下の 3 行はすべて、(同じ) colorSetting という項目を設定します。
    
+Storage オブジェクトはシンプルなキーと値の組み合わせを保存しており、オブジェクトに似ていますが、これらは何度ページを読み込んでも存在し続けます。キーは常に文字列です (なお、オブジェクトと同様、整数のキーは自動的に文字列に変換されます)。これらの値にアクセスするにはオブジェクトと同様に、または {{domxref("Storage.getItem()")}} と {{domxref("Storage.setItem()")}} メソッドを使用して行います。以下の 3 行はすべて、(同じ) colorSetting という項目を設定します。
 
-
    localStorage.colorSetting = '#a4509b';
+```js
+localStorage.colorSetting = '#a4509b';
 localStorage['colorSetting'] = '#a4509b';
-localStorage.setItem('colorSetting', '#a4509b');
    
+localStorage.setItem('colorSetting', '#a4509b');
+```
 
-
    
-
    注: Web Storage API (setItem, getItem, removeItem, key, length) の使用が推奨されており、これは単純なオブジェクトをキーバリューストアとして使うという落とし穴を防ぐためです。
    
-
    
+> **Note:** **注**: Web Storage API (`setItem`, `getItem`, `removeItem`, `key`, `length`) の使用が推奨されており、これは単純なオブジェクトをキーバリューストアとして使うという[落とし穴](http://www.2ality.com/2012/01/objects-as-maps.html)を防ぐためです。
 
-
    Web Storage には、以下の 2 種類の仕組みがあります。
    
+Web Storage には、以下の 2 種類の仕組みがあります。
 
-
      
- 
    • セッションストレージ (sessionStorage) は、各オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) に使用可能です。
      • 
- 
    • ローカルストレージ (localStorage) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
      • 
-
    
+- セッションストレージ (**`sessionStorage`**) は、各オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) に使用可能です。
+- ローカルストレージ (**`localStorage`**) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
 
-
    これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、対応しているブラウザーは Window オブジェクトが WindowLocalStorage および WindowSessionStorage オブジェクトを実装しており、これらに localStorage および sessionStorage プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。同じ生成元に対して sessionStorage と localStorage は、別の Storage オブジェクトを使用します。これらは別々に制御されて機能します。
    
+これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、対応しているブラウザーは `Window` オブジェクトが `WindowLocalStorage` および `WindowSessionStorage` オブジェクトを実装しており、これらに `localStorage` および `sessionStorage` プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。同じ生成元に対して `sessionStorage` と `localStorage` は、別の Storage オブジェクトを使用します。これらは別々に制御されて機能します。
 
-
    よって例えば、始めに文書上で localStorage を呼び出すと {{domxref("Storage")}} が返ります。その後に文書上で sessionStorage を呼び出すと、別の {{domxref("Storage")}} オブジェクトが返ります。どちらも同じ方法で操作することができますが、操作は個別に行われます。
    
+よって例えば、始めに文書上で `localStorage` を呼び出すと {{domxref("Storage")}} が返ります。その後に文書上で `sessionStorage` を呼び出すと、別の {{domxref("Storage")}} オブジェクトが返ります。どちらも同じ方法で操作することができますが、操作は個別に行われます。
 
-
    localStorage の機能検出
    
+## localStorage の機能検出
 
-
    ローカルストレージを利用できるようにするには、まず対応済みであり、現在のブラウザーセッションで利用可能であるかを確かめるべきです。
    
+ローカルストレージを利用できるようにするには、まず対応済みであり、現在のブラウザーセッションで利用可能であるかを確かめるべきです。
 
-
    利用可能かどうかのを検証
    
+### 利用可能かどうかのを検証
 
-
    ローカルストレージに対応しているブラウザーは、 window オブジェクトに localStorage という名称のプロパティを持っています。しかしさまざまな理由で、プロパティが存在すると主張するだけで例外が発生する可能性があります。ローカルストレージが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに対応していても、ページ上のスクリプトでは利用できる状態ではない場合があります。
    
+ローカルストレージに対応しているブラウザーは、 window オブジェクトに localStorage という名称のプロパティを持っています。しかしさまざまな理由で、プロパティが存在すると主張するだけで例外が発生する可能性があります。ローカルストレージが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに*対応していても*、ページ上のスクリプトでは*利用できる状態ではない*場合があります。
 
-
    例えば Safari はプライベートブラウジングモードでは、容量が 0 で空のローカルストレージを提供しますので、事実上使用できません。逆に、正規の QuotaExceededError が発生した場合、これはストレージ領域を使い切ったことを意味しますが、ストレージは実際に利用可能です。機能検出時には、これらのシナリオを考慮に入れるべきです。
    
+例えば Safari はプライベートブラウジングモードでは、容量が 0 で空のローカルストレージを提供しますので、事実上使用できません。逆に、正規の QuotaExceededError が発生した場合、これはストレージ領域を使い切ったことを意味しますが、ストレージは実際に*利用可能*です。機能検出時には、これらのシナリオを考慮に入れるべきです。
 
-
    ローカルストレージに対応済みかつ使用可能であるかどうかを検出する関数を、以下に示します。
    
+ローカルストレージに対応済みかつ使用可能であるかどうかを検出する関数を、以下に示します。
 
-
    function storageAvailable(type) {
+```js
+function storageAvailable(type) {
     var storage;
     try {
         storage = window[type];
@@ -61,7 +60,7 @@ localStorage.setItem('colorSetting', '#a4509b');
    
         return true;
     }
     catch(e) {
-        return e instanceof DOMException && (
+        return e instanceof DOMException && (
             // everything except Firefox
             e.code === 22 ||
             // Firefox
@@ -70,58 +69,62 @@ localStorage.setItem('colorSetting', '#a4509b');
    
             // everything except Firefox
             e.name === 'QuotaExceededError' ||
             // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
             // acknowledge QuotaExceededError only if there's something already stored
-            (storage && storage.length !== 0);
+            (storage && storage.length !== 0);
     }
-}
    +} +``` -

    また、この関数の使い方は以下のとおりです。

    +また、この関数の使い方は以下のとおりです。 -
    if (storageAvailable('localStorage')) {
+```js
+if (storageAvailable('localStorage')) {
   // やったあ! ローカルストレージをちゃんと利用できます
 }
 else {
   // 残念、ローカルストレージは利用できません
-}
    +} +``` -

    storageAvailable('sessionStorage') を呼び出すと、代わりにセッションストレージを確認できます。

    +`storageAvailable('sessionStorage')` を呼び出すと、代わりにセッションストレージを確認できます。 -

    ローカルストレージの機能を検出する方法の略歴をご覧ください。

    +[ローカルストレージの機能を検出する方法の略歴](https://gist.github.com/paulirish/5558557)をご覧ください。 -

    例

    +## 例 -

    ウェブストレージの典型的な使用法を示すため、想像力豊かに Web Storage Demo と名づけたシンプルな例を作成しました。ランディングページ には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります:

    +ウェブストレージの典型的な使用法を示すため、想像力豊かに **Web Storage Demo** と名づけたシンプルな例を作成しました。[ランディングページ](https://mdn.github.io/dom-examples/web-storage/) には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります: -

    別の選択肢を選ぶと、即座にページが更新されます。さらに、選択内容を localStorage に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。

    +![](https://mdn.mozillademos.org/files/9685/landing.png)別の選択肢を選ぶと、即座にページが更新されます。さらに、選択内容を `localStorage` に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。 -

    また、 event output ページも提供します。このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。

    +また、 [event output ページ](https://mdn.github.io/dom-examples/web-storage/event.html)も提供します。このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。 -

    +![](https://mdn.mozillademos.org/files/9687/event-output.png) -
    -

    メモ: 上記のリンクから実際のページを参照することができます。また、ソースコードも確認できます。

    -
    +> **Note:** **メモ**: 上記のリンクから実際のページを参照することができます。また、[ソースコードも確認できます](https://github.com/mdn/dom-examples/tree/master/web-storage)。 -

    ストレージが存在しているかを確認する

    +### ストレージが存在しているかを確認する -

    始めに main.js で、ストレージオブジェクトがすでに存在しているか (すなわち、過去にページへアクセスしていたか) を確認します。

    +始めに [main.js](https://github.com/mdn/dom-examples/blob/master/web-storage/main.js) で、ストレージオブジェクトがすでに存在しているか (すなわち、過去にページへアクセスしていたか) を確認します。 -
    if(!localStorage.getItem('bgcolor')) {
+```js
+if(!localStorage.getItem('bgcolor')) {
   populateStorage();
 } else {
   setStyles();
-}
    +} +``` -

    {{domxref("Storage.getItem()")}} メソッドは、ストレージからデータアイテムを取得するために使用します。この例では、 bgcolor アイテムが存在するかを確認しています。アイテムが存在しなければ、既存のカスタマイズ値をストレージへ追加するために populateStorage() を実行します。すでに値が存在する場合は、ページのスタイルを保存済みの値で更新するために setStyles() を実行します。

    +{{domxref("Storage.getItem()")}} メソッドは、ストレージからデータアイテムを取得するために使用します。この例では、 `bgcolor` アイテムが存在するかを確認しています。アイテムが存在しなければ、既存のカスタマイズ値をストレージへ追加するために `populateStorage()` を実行します。すでに値が存在する場合は、ページのスタイルを保存済みの値で更新するために `setStyles()` を実行します。 -

    メモ: {{domxref("Storage.length")}} を使用して、ストレージオブジェクトが空であるかを確認することもできます。

    +**メモ**: {{domxref("Storage.length")}} を使用して、ストレージオブジェクトが空であるかを確認することもできます。 -

    ストレージから値を取得する

    +### ストレージから値を取得する -

    前述のとおり {{domxref("Storage.getItem()")}} を使用して、ストレージから値を取り出すことができます。これはデータアイテムのキーが引数であり、またデータの値を返します。例えば以下のようにします。

    +前述のとおり {{domxref("Storage.getItem()")}} を使用して、ストレージから値を取り出すことができます。これはデータアイテムのキーが引数であり、またデータの値を返します。例えば以下のようにします。 -
    function setStyles() {
+```js
+function setStyles() {
   var currentColor = localStorage.getItem('bgcolor');
   var currentFont = localStorage.getItem('font');
   var currentImage = localStorage.getItem('image');
@@ -133,92 +136,78 @@ else {
   htmlElem.style.backgroundColor = '#' + currentColor;
   pElem.style.fontFamily = currentFont;
   imgElem.setAttribute('src', currentImage);
-}
    +} +``` -

    この例で、最初の 3 行はローカルストレージから値を取得しています。次に、フォーム要素で表示する値をこれらの値に更新して、ページを再読み込みしたときに同期するようにします。最後に、ページのスタイルや装飾画像を更新して、再読み込み時にカスタマイズ設定を復元します。

    +この例で、最初の 3 行はローカルストレージから値を取得しています。次に、フォーム要素で表示する値をこれらの値に更新して、ページを再読み込みしたときに同期するようにします。最後に、ページのスタイルや装飾画像を更新して、再読み込み時にカスタマイズ設定を復元します。 -

    ストレージに値を設定する

    +### ストレージに値を設定する -

    {{domxref("Storage.setItem()")}} は新たなデータアイテムを作成するため、および (データアイテムがすでに存在していれば) 既存の値を更新するために使用します。これは引数が 2 つあり、ひとつは作成または変更するデータアイテムのキー、もうひとつはデータアイテムに保存する値です。

    +{{domxref("Storage.setItem()")}} は新たなデータアイテムを作成するため、および (データアイテムがすでに存在していれば) 既存の値を更新するために使用します。これは引数が 2 つあり、ひとつは作成または変更するデータアイテムのキー、もうひとつはデータアイテムに保存する値です。 -
    function populateStorage() {
+```js
+function populateStorage() {
   localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
   localStorage.setItem('font', document.getElementById('font').value);
   localStorage.setItem('image', document.getElementById('image').value);
 
   setStyles();
-}
    +} +``` -

    populateStorage() 関数は、背景色、フォント、画像のパスの 3 つのアイテムをローカルストレージに保存します。そして、ページのスタイルなどを更新するために setStyles() 関数を実行します。

    +`populateStorage()` 関数は、背景色、フォント、画像のパスの 3 つのアイテムをローカルストレージに保存します。そして、ページのスタイルなどを更新するために `setStyles()` 関数を実行します。 -

    また、それぞれのフォーム要素に onchange ハンドラーを含めておき、フォームの値が変更されるたびにデータやスタイルを更新します。

    +また、それぞれのフォーム要素に `onchange` ハンドラーを含めておき、フォームの値が変更されるたびにデータやスタイルを更新します。 -
    bgcolorForm.onchange = populateStorage;
+```js
+bgcolorForm.onchange = populateStorage;
 fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;
    +imageForm.onchange = populateStorage; +``` -

    StorageEvent を使用してストレージの変更に反応する

    +### StorageEvent を使用してストレージの変更に反応する -

    {{domxref("StorageEvent")}} は、{{domxref("Storage")}} オブジェクトが変更されるたびに発生します (sessionStorage の変更では発生しません) 。これは、変更を行ったページ上では効果がないでしょう。実際は、ストレージを使用するドメイン上の別のページで、ストレージの変更に同期するための手段です。別のドメイン上のページは、前述のストレージオブジェクトにアクセスできません。

    +{{domxref("StorageEvent")}} は、{{domxref("Storage")}} オブジェクトが変更されるたびに発生します (sessionStorage の変更では発生しません) 。これは、変更を行ったページ上では効果がないでしょう。実際は、ストレージを使用するドメイン上の別のページで、ストレージの変更に同期するための手段です。別のドメイン上のページは、前述のストレージオブジェクトにアクセスできません。 -

    イベントページ (events.js をご覧ください) には、以下の JavaScript しかありません。

    +イベントページ ([events.js](https://github.com/mdn/dom-examples/blob/master/web-storage/event.js) をご覧ください) には、以下の JavaScript しかありません。 -
    window.addEventListener('storage', function(e) {
+```js
+window.addEventListener('storage', function(e) {
   document.querySelector('.my-key').textContent = e.key;
   document.querySelector('.my-old').textContent = e.oldValue;
   document.querySelector('.my-new').textContent = e.newValue;
   document.querySelector('.my-url').textContent = e.url;
   document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
-});
    +}); +``` -

    ここでは window オブジェクトに、現在のオリジンに関連付けられた {{domxref("Storage")}} オブジェクトが変更されたときに発生するイベントリスナを追加しています。上記の例でわかるとおり、このイベントに関連付けられたイベントオブジェクトは、変更されたデータのキー、変更前の古い値、変更後の新しい値、ストレージを変更した文書の URL、ストレージオブジェクト自体 (その中身を見えるように文字化しています) といった、役に立つ情報を含んでいるいくつものプロパティを持っています。

    +ここでは `window` オブジェクトに、現在のオリジンに関連付けられた {{domxref("Storage")}} オブジェクトが変更されたときに発生するイベントリスナを追加しています。上記の例でわかるとおり、このイベントに関連付けられたイベントオブジェクトは、変更されたデータのキー、変更前の古い値、変更後の新しい値、ストレージを変更した文書の URL、ストレージオブジェクト自体 (その中身を見えるように文字化しています) といった、役に立つ情報を含んでいるいくつものプロパティを持っています。 -

    データレコードの削除

    +### データレコードの削除 -

    ウェブストレージには、データを削除するためのシンプルなメソッドが 2 つあります。このデモでは使用していませんが、プロジェクトへとても簡単に追加できます:

    +ウェブストレージには、データを削除するためのシンプルなメソッドが 2 つあります。このデモでは使用していませんが、プロジェクトへとても簡単に追加できます: - +- {{domxref("Storage.removeItem()")}} は引数が 1 つあり、削除したいデータアイテムのキーです。これは、当該ドメインのストレージオブジェクトからデータアイテムを削除します。 +- {{domxref("Storage.clear()")}} は引数がなく、当該ドメインのストレージオブジェクト全体を空にします。 -

    仕様書

    +## 仕様書 - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
    +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------- | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} | {{Spec2('HTML WHATWG')}} | | -

    ブラウザーの互換性

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

    Window.localStorage

    +### `Window.localStorage` -
    -

    {{Compat("api.Window.localStorage")}}

    +{{Compat("api.Window.localStorage")}} -

    Window.sessionStorage

    +### `Window.sessionStorage` -
    -

    {{Compat("api.Window.sessionStorage")}}

    -
    -
    +{{Compat("api.Window.sessionStorage")}} -

    すべてのブラウザーで、ローカルストレージおよびセッションストレージが受け入れる容量は異なります。さまざまなブラウザーのストレージ容量を報告しているページがあります。

    +すべてのブラウザーで、ローカルストレージおよびセッションストレージが受け入れる容量は異なります。[さまざまなブラウザーのストレージ容量を報告しているページ](http://dev-test.nemikor.com/web-storage/support-test/)があります。 -

    関連情報

    +## 関連情報 - +- [Web Storage API のランディングページ](/ja/docs/Web/API/Web_Storage_API) diff --git a/files/ja/web/api/xmldocument/async/index.md b/files/ja/web/api/xmldocument/async/index.md index 49e312b681e35b..115b111a9b2369 100644 --- a/files/ja/web/api/xmldocument/async/index.md +++ b/files/ja/web/api/xmldocument/async/index.md @@ -14,15 +14,16 @@ tags: translation_of: Web/API/XMLDocument/async original_slug: Web/API/Document/async --- -

    {{APIRef("DOM")}}{{Non-standard_header}}{{Deprecated_header}}

    +{{APIRef("DOM")}}{{Non-standard_header}}{{Deprecated_header}} -

    document.async は、 {{DOMxRef("XMLDocument.load()")}} の呼び出しを同期で行うか、または非同期で行うかの指示を真偽値で設定します。 true が初期値であり、これは文書を非同期的に読み込むよう要求するものです。

    +`document.async` は、 {{DOMxRef("XMLDocument.load()")}} の呼び出しを同期で行うか、または非同期で行うかの指示を真偽値で設定します。 `true` が初期値であり、これは文書を非同期的に読み込むよう要求するものです。 -

    (1.4 アルファから、同期的に文書を読み込めるようになりました。)

    +(1.4 アルファから、同期的に文書を読み込めるようになりました。) -

    例

    +## 例 -
    function loadXMLData(e) {
+```js
+function loadXMLData(e) {
   alert(new XMLSerializer().serializeToString(e.target)); // querydata.xml の内容を文字列として取得
 }
 
@@ -30,15 +31,14 @@ var xmlDoc = document.implementation.createDocument("", "test", null);
 
 xmlDoc.async = false;
 xmlDoc.onload = loadXMLData;
-xmlDoc.load('querydata.xml');
    +xmlDoc.load('querydata.xml'); +``` -

    ブラウザーの互換性

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

    {{Compat("api.XMLDocument.async")}}

    +{{Compat("api.XMLDocument.async")}} -

    関連情報

    +## 関連情報 - +- [XML in Mozilla](/ja/docs/XML_in_Mozilla "XML_in_Mozilla") +- {{DOMxRef("XMLDocument.load()")}} diff --git a/files/ja/web/api/xmldocument/index.md b/files/ja/web/api/xmldocument/index.md index fbfbf8ae580e68..1751ec3c227317 100644 --- a/files/ja/web/api/xmldocument/index.md +++ b/files/ja/web/api/xmldocument/index.md @@ -9,60 +9,37 @@ tags: - XMLDocument translation_of: Web/API/XMLDocument --- -

    {{APIRef("DOM")}}

    +{{APIRef("DOM")}} -

    XMLDocument インターフェイスは XML ドキュメントを示します。汎用的な {{DOMxRef("Document")}} を継承し、特定のメソッドやプロパティを追加しません: それでも２つのタイプのドキュメントでは、いくつかのアルゴリズムの動作がことなります。

    +**XMLDocument** インターフェイスは XML ドキュメントを示します。汎用的な {{DOMxRef("Document")}} を継承し、特定のメソッドやプロパティを追加しません: それでも２つのタイプのドキュメントでは、いくつかのアルゴリズムの動作がことなります。 -

    {{InheritanceDiagram}}

    +{{InheritanceDiagram}} -

    プロパティ

    +## プロパティ -

    また、 {{DOMxRef("Document")}} からプロパティを継承します

    +_また、 {{DOMxRef("Document")}} からプロパティを継承します_ -
    -
    {{DOMxRef("XMLDocument.async")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
    -
    {{DOMxRef("XMLDocument.load()")}} と併用して、非同期リクエストを示します。
    -
    +- {{DOMxRef("XMLDocument.async")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : {{DOMxRef("XMLDocument.load()")}} と併用して、非同期リクエストを示します。 -

    メソッド

    +## メソッド -

    また、 {{DOMxRef("Document")}} からメソッドを継承します

    +_また、 {{DOMxRef("Document")}} からメソッドを継承します_ -
    -
    {{DOMxRef("XMLDocument.load()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
    -
    XML ドキュメントをロードします。
    -
    +- {{DOMxRef("XMLDocument.load()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} + - : XML ドキュメントをロードします。 -

    仕様

    +## 仕様 - - - - - - - - - - - - - - - - - - -
    仕様ステータス備考
    {{SpecName("DOM WHATWG", "#xmldocument", "XMLDocument")}}{{Spec2("DOM WHATWG")}}変更なし。
    {{SpecName("DOM4", "#xmldocument", "XMLDocument")}}{{Spec2("DOM4")}}初回定義。
    +| 仕様 | ステータス | 備考 | +| ---------------------------------------------------------------------------- | -------------------------------- | ---------- | +| {{SpecName("DOM WHATWG", "#xmldocument", "XMLDocument")}} | {{Spec2("DOM WHATWG")}} | 変更なし。 | +| {{SpecName("DOM4", "#xmldocument", "XMLDocument")}} | {{Spec2("DOM4")}} | 初回定義。 | -

    ブラウザー実装状況

    +## ブラウザー実装状況 +{{Compat("api.XMLDocument")}} +## 関連項目 -

    {{Compat("api.XMLDocument")}}

    - -

    関連項目

    - - +- [The DOM interfaces index.](/ja/docs/DOM/DOM_Reference "/en-US/docs/DOM/DOM_Reference") diff --git a/files/ja/web/api/xpathresult/index.md b/files/ja/web/api/xpathresult/index.md index 166f1ae6e440fa..96bfd2e78179d8 100644 --- a/files/ja/web/api/xpathresult/index.md +++ b/files/ja/web/api/xpathresult/index.md @@ -3,120 +3,65 @@ title: XPathResult slug: Web/API/XPathResult translation_of: Web/API/XPathResult --- -

    {{APIRef}}

    - -

    Properties

    - -
    -
    {{domxref("XPathResult.booleanValue")}}
    -
    readonly boolean
    -
    - -
    -
    {{domxref("XPathResult.invalidIteratorState")}}
    -
    readonly boolean
    -
    - -
    -
    {{domxref("XPathResult.numberValue")}}
    -
    readonly float
    -
    - -
    -
    {{domxref("XPathResult.resultType")}}
    -
    readonly integer (short)
    -
    - -
    -
    {{domxref("XPathResult.singleNodeValue")}}
    -
    readonly Node
    -
    - -
    -
    {{domxref("XPathResult.snapshotLength")}}
    -
    readonly Integer
    -
    - -
    -
    {{domxref("XPathResult.stringValue")}}
    -
    readonly String
    -
    - -

    Methods

    - -
    -
    {{domxref("XPathResult.iterateNext()")}}
    -
    ...
    -
    {{domxref("XPathResult.snapshotItem()")}}
    -
    ...
    -
    - -

    Constants

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Result Type Defined ConstantValueDescription
    ANY_TYPE0A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.
    NUMBER_TYPE1A result containing a single number. This is useful for example, in an XPath expression using the count() function.
    STRING_TYPE2A result containing a single string.
    BOOLEAN_TYPE3A result containing a single boolean value. This is useful for example, in an XPath expression using the not() function.
    UNORDERED_NODE_ITERATOR_TYPE4A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
    ORDERED_NODE_ITERATOR_TYPE5A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
    UNORDERED_NODE_SNAPSHOT_TYPE6A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
    ORDERED_NODE_SNAPSHOT_TYPE7A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
    ANY_UNORDERED_NODE_TYPE8A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
    FIRST_ORDERED_NODE_TYPE9A result node-set containing the first node in the document that matches the expression.
    - -

    See also

    - - +{{APIRef}} + +## Properties + +- {{domxref("XPathResult.booleanValue")}} + - : readonly boolean + + + +- {{domxref("XPathResult.invalidIteratorState")}} + - : readonly boolean + + + +- {{domxref("XPathResult.numberValue")}} + - : readonly float + + + +- {{domxref("XPathResult.resultType")}} + - : readonly integer (short) + + + +- {{domxref("XPathResult.singleNodeValue")}} + - : readonly Node + + + +- {{domxref("XPathResult.snapshotLength")}} + - : readonly Integer + + + +- {{domxref("XPathResult.stringValue")}} + - : readonly String + +## Methods + +- {{domxref("XPathResult.iterateNext()")}} + - : ... +- {{domxref("XPathResult.snapshotItem()")}} + - : ... + +## Constants + +| Result Type Defined Constant | Value | Description | +| ---------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ANY_TYPE | 0 | A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type. | +| NUMBER_TYPE | 1 | A result containing a single number. This is useful for example, in an XPath expression using the `count()` function. | +| STRING_TYPE | 2 | A result containing a single string. | +| BOOLEAN_TYPE | 3 | A result containing a single boolean value. This is useful for example, in an XPath expression using the `not()` function. | +| UNORDERED_NODE_ITERATOR_TYPE | 4 | A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document. | +| ORDERED_NODE_ITERATOR_TYPE | 5 | A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document. | +| UNORDERED_NODE_SNAPSHOT_TYPE | 6 | A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document. | +| ORDERED_NODE_SNAPSHOT_TYPE | 7 | A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document. | +| ANY_UNORDERED_NODE_TYPE | 8 | A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression. | +| FIRST_ORDERED_NODE_TYPE | 9 | A result node-set containing the first node in the document that matches the expression. | + +### See also + +- {{domxref("Document.evaluate()")}} diff --git a/files/ja/web/api/xpathresult/snapshotitem/index.md b/files/ja/web/api/xpathresult/snapshotitem/index.md index 40f379dd38fbf0..c1442fc0f71cf2 100644 --- a/files/ja/web/api/xpathresult/snapshotitem/index.md +++ b/files/ja/web/api/xpathresult/snapshotitem/index.md @@ -11,73 +11,61 @@ tags: - メソッド translation_of: Web/API/XPathResult/snapshotItem --- -
    {{APIRef("DOM XPath")}}
    +{{APIRef("DOM XPath")}} -

    snapshotItem() は {{domxref("XPathResult")}} インターフェイスのメソッドで、アイテムのスナップショットのコレクション、または添字がノードの範囲を外れている場合は null を返します。イテレーターの返値とは異なり、スナップショットは無効になることはありませんが、変更したときに現在の文書に対応しない場合があります。

    +**`snapshotItem()`** は {{domxref("XPathResult")}} インターフェイスのメソッドで、アイテムのスナップショットのコレクション、または添字がノードの範囲を外れている場合は `null` を返します。イテレーターの返値とは異なり、スナップショットは無効になることはありませんが、変更したときに現在の文書に対応しない場合があります。 -

    構文

    +## 構文 -
    var node = result.snapshotItem(i);
-
    +``` +var node = result.snapshotItem(i); +``` -

    返値

    +### 返値 -

    XPathResult のノードセット内の指定された添字の {{domxref("Node")}} です。

    +`XPathResult` のノードセット内の指定された添字の {{domxref("Node")}} です。 -

    例外

    +### 例外 -

    TYPE_ERR

    +#### TYPE_ERR -

    {{domxref("XPathResult.resultType")}} が UNORDERED_NODE_SNAPSHOT_TYPE または ORDERED_NODE_SNAPSHOT_TYPE でない場合、 {{domxref("XPathException")}} による例外が TYPE_ERR 型で発生します。

    +{{domxref("XPathResult.resultType")}} が `UNORDERED_NODE_SNAPSHOT_TYPE` または `ORDERED_NODE_SNAPSHOT_TYPE` でない場合、 {{domxref("XPathException")}} による例外が `TYPE_ERR` 型で発生します。 -

    例

    +## 例 -

    以下の例は snapshotItem() メソッドの使用例を表しています。

    +以下の例は `snapshotItem()` メソッドの使用例を表しています。 -

    HTML

    +### HTML -
    <div>XPath example</div>
-<div>Tag names of the matched nodes: <output></output></div>
-
    +```html +
    XPath example
    +
    Tag names of the matched nodes:
    +``` -

    JavaScript

    +### JavaScript -
    var xpath = "//div";
+```js
+var xpath = "//div";
 var result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 var node = null;
 var tagNames = [];
-for(var i = 0; i < result.snapshotLength; i++) {
+for(var i = 0; i < result.snapshotLength; i++) {
   var node = result.snapshotItem(i);
   tagNames.push(node.localName);
 }
 document.querySelector("output").textContent = tagNames.join(", ");
-
    - -

    結果

    - -

    {{EmbedLiveSample('Example', 400, 70)}}

    - -

    仕様書

    - - - - - - - - - - - - - - - - -
    仕様書状態備考
    {{SpecName("DOM3 XPath", "xpath.html#XPathResult-snapshotItem", "XPathResult.snapshotItem()")}}{{Spec2("DOM3 XPath")}}初回定義
    - -

    ブラウザーの互換性

    - -
    -

    {{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}

    -
    +``` + +### 結果 + +{{EmbedLiveSample('Example', 400, 70)}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- | +| {{SpecName("DOM3 XPath", "xpath.html#XPathResult-snapshotItem", "XPathResult.snapshotItem()")}} | {{Spec2("DOM3 XPath")}} | 初回定義 | + +## ブラウザーの互換性 + +{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}} diff --git a/files/ja/web/api/xrboundedreferencespace/boundsgeometry/index.md b/files/ja/web/api/xrboundedreferencespace/boundsgeometry/index.md index 3263644ff0763a..265a85bd2b14a6 100644 --- a/files/ja/web/api/xrboundedreferencespace/boundsgeometry/index.md +++ b/files/ja/web/api/xrboundedreferencespace/boundsgeometry/index.md @@ -23,59 +23,50 @@ tags: - space translation_of: Web/API/XRBoundedReferenceSpace/boundsGeometry --- -

    {{APIRef("WebXR Device API")}}{{secureContext_header}}

    +{{APIRef("WebXR Device API")}}{{secureContext_header}} -

    {{domxref("XRBoundedReferenceSpace")}} の boundsGeometry 読み取り専用プロパティは、ビューアーが移動できる多角形の内部を構成する点を指定する {{domxref("DOMPointReadOnly")}} オブジェクトの配列です。 各点は2次元の点として扱われ、地面レベルに配置する必要があります（つまり、その y 座標は 0 である必要があります）。

    +{{domxref("XRBoundedReferenceSpace")}} の **`boundsGeometry`** 読み取り専用プロパティは、ビューアーが移動できる多角形の内部を構成する点を指定する {{domxref("DOMPointReadOnly")}} オブジェクトの配列です。 各点は 2 次元の点として扱われ、地面レベルに配置する必要があります（つまり、その `y` 座標は 0 である必要があります）。 -

    この境界は通常、XR ハードウェアを制御するソフトウェアを使用してユーザーが構成します。 これは、使用したい空間の境界を歩くか、XR 入力デバイスを使用して部屋の形状を描くことによって行うことができます。 理論的には、より高度なシステムでは、センサーやその他の検出方法を使用して、専用の XR ルーム（それを慎重にホロデッキとは呼んでいないことに気づきましたか？）の境界を決定する場合があります。

    +この境界は通常、XR ハードウェアを制御するソフトウェアを使用してユーザーが構成します。 これは、使用したい空間の境界を歩くか、XR 入力デバイスを使用して部屋の形状を描くことによって行うことができます。 理論的には、より高度なシステムでは、センサーやその他の検出方法を使用して、専用の XR ルーム（それを慎重にホロデッキとは呼んでいないことに気づきましたか？）の境界を決定する場合があります。 -

    構文

    +## 構文 -
    bounds = xrReferenceSpace.boundsGeometry;
    +``` +bounds = xrReferenceSpace.boundsGeometry; +``` -

    値

    +### 値 -

    boundsGeometry プロパティは、{{domxref("DOMPointReadOnly")}} オブジェクトの配列であり、各オブジェクトは、ビューアーが留まる必要がある多角形（polygon、ポリゴン）内の1つの頂点を定義します。 各点は床レベルにあり、y 座標の値は 0 に設定されている必要があります。 さらに、w の値は、配列内のすべての点で常に 1 です。 さらに、点は時計回りにリストする必要があります。

    +`boundsGeometry` プロパティは、{{domxref("DOMPointReadOnly")}} オブジェクトの配列であり、各オブジェクトは、ビューアーが留まる必要がある多角形（polygon、ポリゴン）内の 1 つの頂点を定義します。 各点は床レベルにあり、`y` 座標の値は 0 に設定されている必要があります。 さらに、`w` の値は、配列内のすべての点で常に 1 です。 さらに、点は時計回りにリストする*必要があります*。 -

    boundsGeometry の各エントリーは、部屋のネイティブの境界ジオメトリー点のリストのエントリーと同じであり、原点オフセットの逆数が事前に乗算されています。 言い換えると、境界は使用可能な空間の物理的な制限であり、参照空間の境界点がすべて XRBoundedReferenceSpace の実際の原点に対して定義されるようにシフトされます。

    +`boundsGeometry` の各エントリーは、部屋のネイティブの境界ジオメトリー点のリストのエントリーと同じであり、原点オフセットの逆数が事前に乗算されています。 言い換えると、境界は使用可能な空間の物理的な制限であり、参照空間の境界点がすべて `XRBoundedReferenceSpace` の実際の原点に対して定義されるようにシフトされます。 -

    使用上の注意

    +## 使用上の注意 -

    制限付き参照空間の原点は常に地面レベルにあり、y は 0 です。 原則として、基盤となるプラットフォームまたは XR ハードウェアに応じたものとして、x と z の原点は空間の中心またはその近くにあり、向きは論理的前方を向いています。

    +制限付き参照空間の原点は常に地面レベルにあり、`y` は 0 です。 原則として、基盤となるプラットフォームまたは XR ハードウェアに応じたものとして、`x` と `z` の原点は空間の中心またはその近くにあり、向きは論理的前方を向いています。 -

    部屋の境界がフィンガープリントの目的で使用されるリスクを減らすために、boundsGeometry 配列の各点は、丸められるか、ある程度調整される場合があります。 仕様では、ブラウザーが点を最も近い5センチメートルにシフトすることを推奨しています（ハードウェアの物理的な制限の外側に出ないようにしながら）。

    +部屋の境界がフィンガープリントの目的で使用されるリスクを減らすために、`boundsGeometry` 配列の各点は、丸められるか、ある程度調整される場合があります。 仕様では、ブラウザーが点を最も近い 5 センチメートルにシフトすることを推奨しています（ハードウェアの物理的な制限の外側に出ないようにしながら）。 -

    境界の大きさ

    +### 境界の大きさ -

    XRBoundedReferenceSpace は、非常に大きな制限付き領域に使用することを目的としていません。 それよりも、ネイティブの原点から任意の方向に使用可能な移動空間が約 15 メートル以下の1部屋の空間に使用することを目的としています。 とはいえ、境界は2次元でのみ定義されるため、境界は無限に上向きに拡張されます。

    +`XRBoundedReferenceSpace` は、非常に大きな制限付き領域に使用することを目的としていません。 それよりも、ネイティブの原点から任意の方向に使用可能な移動空間が約 15 メートル以下の 1 部屋の空間に使用することを目的としています。 とはいえ、境界は 2 次元でのみ定義されるため、境界は無限に上向きに拡張されます。 -

    複数部屋の空間を作成する必要がある場合、または非常に大きい空間やさまざまな床レベルが必要な場合は、代わりに無制限の {{domxref("XRReferenceSpace")}} を使用し、必要に応じて独自に境界を適用する必要があります。

    +複数部屋の空間を作成する必要がある場合、または非常に大きい空間やさまざまな床レベルが必要な場合は、代わりに無制限の {{domxref("XRReferenceSpace")}} を使用し、必要に応じて独自に境界を適用する必要があります。 -

    境界の形状

    +### 境界の形状 -

    boundsGeometry によって定義される形状は、正方形のように単純な場合もあれば、必要に応じて複雑な場合もあり、凹部や凸部を含む可能性があります。 ただし、XRBoundedReferenceSpace を使用して、床レベルが不均一な空間を表すことはできません。 地面は常に y = 0 にあります。

    +`boundsGeometry` によって定義される形状は、正方形のように単純な場合もあれば、必要に応じて複雑な場合もあり、凹部や凸部を含む可能性があります。 ただし、`XRBoundedReferenceSpace` を使用して、床レベルが不均一な空間を表すことはできません。 地面は*常に* `y` = 0 にあります。 -

    ユーザーが boundsGeometry で指定された境界から出る必要があるようにコンテンツを設計していないことが重要です。 ただし、ユーザーの周囲が定義された境界を超えるように移動することを許可している場合、コンテンツはその状況を適切に処理できる必要があり、これはエラー状態とは見なされません。

    +ユーザーが `boundsGeometry` で指定された境界から出る必要があるようにコンテンツを設計していないことが重要です。 ただし、ユーザーの周囲が定義された境界を超えるように移動することを許可している場合、コンテンツはその状況を適切に処理できる必要があり、これはエラー状態とは見なされません。 -

    一部のサンプルは、メッシュまたはその他の形状をレンダリングしてユーザーに境界を表示しますが、実際のアプリケーションでは、これを行うべきではありません。 ただし、ブラウザーは、リスク（移動し続けると、物理的な壁にぶつかる恐れなど）についてユーザーに適切な警告を提供する必要があります。

    +一部のサンプルは、メッシュまたはその他の形状をレンダリングしてユーザーに境界を表示しますが、実際のアプリケーションでは、これを行うべきではありません。 ただし、ブラウザーは、リスク（移動し続けると、物理的な壁にぶつかる恐れなど）についてユーザーに適切な警告を提供する必要があります。 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#dom-xrboundedreferencespace-boundsgeometry','boundsGeometry')}}{{Spec2('WebXR')}}初期定義
    +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#dom-xrboundedreferencespace-boundsgeometry','boundsGeometry')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRBoundedReferenceSpace.boundsGeometry")}}

    +{{Compat("api.XRBoundedReferenceSpace.boundsGeometry")}} diff --git a/files/ja/web/api/xrboundedreferencespace/index.md b/files/ja/web/api/xrboundedreferencespace/index.md index 382a7bc4b5ecbf..fbcc7602d3fd5f 100644 --- a/files/ja/web/api/xrboundedreferencespace/index.md +++ b/files/ja/web/api/xrboundedreferencespace/index.md @@ -17,50 +17,35 @@ tags: - augmented translation_of: Web/API/XRBoundedReferenceSpace --- -

    {{APIRef("WebXR Device API")}}{{secureContext_header}}

    +{{APIRef("WebXR Device API")}}{{secureContext_header}} -

    .WebXR Device API の XRBoundedReferenceSpace インターフェイスは、事前設定された境界を持つ仮想世界の参照空間を記述します。 これは {{domxref("XRReferenceSpace")}} を拡張して、ビューアーの位置の周囲の本質的に制限のない空間を記述します。 これらの境界は、点の配列を使用して定義し、各点は、ユーザーがその中で移動することができる多角形の頂点を定義します。

    +.[WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) の **`XRBoundedReferenceSpace`** インターフェイスは、事前設定された境界を持つ仮想世界の[参照空間](/ja/docs/Web/API/WebXR_Device_API/Geometry)を記述します。 これは {{domxref("XRReferenceSpace")}} を拡張して、ビューアーの位置の周囲の本質的に制限のない空間を記述します。 これらの境界は、点の配列を使用して定義し、各点は、ユーザーがその中で移動することができる多角形の頂点を定義します。 -

    これは通常、XR システムがユーザーの開始位置から限られた距離内でユーザーの物理的な移動を追跡できる場合に使用します。 指定された境界は、実際には、WebXR サイトまたはアプリケーションがユーザーが現実世界の壁やその他の障害物と衝突するのを防ぐために、ユーザーがいる部屋の形状とサイズを表す場合があります。 少なくとも、境界は、XR デバイスがユーザーの移動を追跡できる領域を示します。 制限付き空間の仕組みとその有用性の詳細については、制限付き参照空間の使用の記事を参照してください。

    +これは通常、XR システムがユーザーの開始位置から限られた距離内でユーザーの物理的な移動を追跡できる場合に使用します。 指定された境界は、実際には、WebXR サイトまたはアプリケーションがユーザーが現実世界の壁やその他の障害物と衝突するのを防ぐために、ユーザーがいる部屋の形状とサイズを表す場合があります。 少なくとも、境界は、XR デバイスがユーザーの移動を追跡できる領域を示します。 制限付き空間の仕組みとその有用性の詳細については、[制限付き参照空間の使用](/ja/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces)の記事を参照してください。 -

    プロパティ

    +## プロパティ -

    {{domxref("XRReferenceSpace")}} のプロパティに加えて、XRBoundedReferenceSpace には次のものが含まれています。

    +_{{domxref("XRReferenceSpace")}} のプロパティに加えて、`XRBoundedReferenceSpace` には次のものが含まれています。_ -
    -
    {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} {{ReadOnlyInline}}
    -
    {{domxref("DOMPointReadOnly")}} オブジェクトの配列。 各オブジェクトは、ユーザーが留まる必要がある境界を定義する多角形の頂点を定義します。 これらの頂点は、ビューアーの位置の周囲を時計回りに移動するように並べ替える必要があります。
    -
    +- {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} {{ReadOnlyInline}} + - : {{domxref("DOMPointReadOnly")}} オブジェクトの配列。 各オブジェクトは、ユーザーが留まる必要がある境界を定義する多角形の頂点を定義します。 これらの頂点は、ビューアーの位置の周囲を*時計回り*に移動するように並べ替える*必要があります*。 -

    メソッド

    +## メソッド -

    XRBoundedReferenceSpace は、その親インターフェイスである {{domxref("XRReferenceSpace")}} のメソッドを継承します。 それ以上のメソッドはありません。

    +_`XRBoundedReferenceSpace` は、その親インターフェイスである {{domxref("XRReferenceSpace")}} のメソッドを継承します。 それ以上のメソッドはありません。_ -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#xrboundedreferencespace-interface','XRBoundedReferenceSpace')}}{{Spec2('WebXR')}}初期定義
    +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#xrboundedreferencespace-interface','XRBoundedReferenceSpace')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRBoundedReferenceSpace")}}

    +{{Compat("api.XRBoundedReferenceSpace")}} -

    関連情報

    +## 関連情報 - +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [WebXR の幾何学と参照空間](/ja/docs/Web/API/WebXR_Device_API/Geometry) +- [視点とビューアー: WebXR でのカメラのシミュレーション](/ja/docs/Web/API/WebXR_Device_API/Cameras) diff --git a/files/ja/web/api/xrinputsource/gripspace/index.md b/files/ja/web/api/xrinputsource/gripspace/index.md index 87c326186cce0f..b45ee1fd825f90 100644 --- a/files/ja/web/api/xrinputsource/gripspace/index.md +++ b/files/ja/web/api/xrinputsource/gripspace/index.md @@ -16,51 +16,36 @@ tags: - gripSpace translation_of: Web/API/XRInputSource/gripSpace --- -
    {{securecontext_header}}{{APIRef("WebXR")}}
    +{{securecontext_header}}{{APIRef("WebXR")}} -

    {{domxref("XRInputSource")}} の gripSpace 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この XRSpace のネイティブの原点は、ユーザーの拳のおおよその重心にあります。

    +{{domxref("XRInputSource")}} の **`gripSpace`** 読み取り専用プロパティは、ネイティブの原点がユーザーの手に保持している（またはユーザーの手の一部の）ように見える仮想オブジェクトのレンダリングに使用するポーズを追跡する {{domxref("XRSpace")}} を返します。 例えば、ユーザーが仮想の真っ直ぐな棒を持っている場合、この `XRSpace` のネイティブの原点は、ユーザーの拳のおおよその重心にあります。 -

    構文

    +## 構文 -
    var xrSpace = xrInputSource.gripSpace;
    +``` +var xrSpace = xrInputSource.gripSpace; +``` -

    値

    +### 値 -

    仮想空間での入力デバイスの位置と向きを表す {{domxref("XRSpace")}} オブジェクト。 デバイスの画像をシーンにレンダリングするのに適しています。 入力ソースが本質的に追跡できない場合、gripSpace は null です。 例えば、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が tracked-pointer である入力のみが gripSpace を提供します。

    +仮想空間での入力デバイスの位置と向きを表す {{domxref("XRSpace")}} オブジェクト。 デバイスの画像をシーンにレンダリングするのに適しています。 入力ソースが本質的に追跡できない場合、`gripSpace` は `null` です。 例えば、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が `tracked-pointer` である入力のみが `gripSpace` を提供します。 -

    コントローラーがまっすぐな棒のような形をしていて、ユーザーの拳で握られていると想像してみてください。 グリップ空間の本来の原点は、ユーザーの拳の重心にあり、ユーザーの手の位置を追跡します。

    +コントローラーがまっすぐな棒のような形をしていて、ユーザーの拳で握られていると想像してみてください。 グリップ空間の本来の原点は、ユーザーの拳の重心にあり、ユーザーの手の位置を追跡します。 -
    -
    -
    -
    左手のグリップ空間の座標系。
    +**左手のグリップ空間の座標系。**![グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。](https://mdn.mozillademos.org/files/17260/GripSpace-LeftHand-Light.svg)**右手のグリップ空間の座標系。**![グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。](https://mdn.mozillademos.org/files/17261/GripSpace-RightHand-Light.svg) -
    グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。
    -
    -
    +上の図に示すように、座標系は次のように方向付けられています。 -
    -
    -
    右手のグリップ空間の座標系。
    +- x 軸は、ユーザーの手のひらに垂直であり、手の甲から外側に伸びる方向は、コントローラーがユーザーの右手にある場合は +X 、コントローラーが左手にある場合は -X です。 +- z 軸は、棒の長さに沿い、ユーザーの手のひらに平行で、グリップの長さに沿います。 -Z はユーザーの親指の方向であり、+Z は反対方向です。 +- y 軸は、他の 2 つの軸間の関係によって示されます。 いつものように、それは他の 2 つの軸の外積です（X 軸と Z 軸の両方から 90° 離れています）。 -
    グリップ空間が、世界に対するプレーヤーの手のローカル座標系をどのように示しているかを示す図。
    -
    -
    -
    +## 例 -

    上の図に示すように、座標系は次のように方向付けられています。

    +この例では、フレームレンダリングコールバックから取得した `gripSpace` を使用して、仮想環境でのコントローラーの位置と向きを表すメッシュをレンダリングします。 - - -

    例

    - -

    この例では、フレームレンダリングコールバックから取得した gripSpace を使用して、仮想環境でのコントローラーの位置と向きを表すメッシュをレンダリングします。

    - -
    for (let source in xrSession.inputSources) {
+```js
+for (let source in xrSession.inputSources) {
   if (source.gripSpace) {
     let gripPose = frame.getPose(source.gripSpace, xrRefSpace);
 
@@ -69,29 +54,16 @@ translation_of: Web/API/XRInputSource/gripSpace
     }
   }
 }
-
    - -

    このループは、gripSpace の値を持つ各入力ソースについて、gripSpace によって記述される位置と向きを表す {{domxref("XRPose")}} を取得します。 有効なポーズが返された場合、メソッド myDrawMeshUsingTransform() を呼び出して、グリップポーズの変換行列を使用して変換されたコントローラーのメッシュを描画します。

    - -

    仕様

    +``` - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#dom-xrinputsource-gripspace','XRInputSource.gripSpace')}}{{Spec2('WebXR')}}初期定義
    +このループは、`gripSpace` の値を持つ各入力ソースについて、`gripSpace` によって記述される位置と向きを表す {{domxref("XRPose")}} を取得します。 有効なポーズが返された場合、メソッド `myDrawMeshUsingTransform()` を呼び出して、グリップポーズの変換行列を使用して変換されたコントローラーのメッシュを描画します。 -

    ブラウザーの互換性

    +## 仕様 +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#dom-xrinputsource-gripspace','XRInputSource.gripSpace')}} | {{Spec2('WebXR')}} | 初期定義 | +## ブラウザーの互換性 -

    {{Compat("api.XRInputSource.gripSpace")}}

    +{{Compat("api.XRInputSource.gripSpace")}} diff --git a/files/ja/web/api/xrinputsource/index.md b/files/ja/web/api/xrinputsource/index.md index 3e963169d63a9c..7932f5ff34a5f6 100644 --- a/files/ja/web/api/xrinputsource/index.md +++ b/files/ja/web/api/xrinputsource/index.md @@ -17,93 +17,70 @@ tags: - control translation_of: Web/API/XRInputSource --- -
    {{securecontext_header}}{{APIRef("WebXR Device API")}}
    +{{securecontext_header}}{{APIRef("WebXR Device API")}} -

    WebXR Device API の XRInputSource インターフェースは、ユーザーの WebXR 互換の仮想現実または拡張現実のシステムの一部であるコントロール入力の単一ソースを記述します。 デバイスは使用されているプラットフォームに固有ですが、それが向けられている方向を提供し、ユーザーがデバイスを使用してアクションを実行することをトリガーにした場合、オプションでイベントを生成することができます。

    +[WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) の **`XRInputSource`** インターフェースは、ユーザーの WebXR 互換の仮想現実または拡張現実のシステムの一部であるコントロール入力の単一ソースを記述します。 デバイスは使用されているプラットフォームに固有ですが、それが向けられている方向を提供し、ユーザーがデバイスを使用してアクションを実行することをトリガーにした場合、オプションでイベントを生成することができます。 -

    プロパティ

    +## プロパティ -
    -
    {{domxref("XRInputSource.gamepad", "gamepad")}} {{ReadOnlyInline}}{{experimental_inline}}
    -
    -

    XR 入力ソースのボタンと軸の状態を説明する {{domxref("Gamepad")}} オブジェクト（ゲームパッドまたは同等のデバイスの場合）。 デバイスがゲームパッドのようなデバイスでない場合、このプロパティの値は NULL です。

    +- {{domxref("XRInputSource.gamepad", "gamepad")}} {{ReadOnlyInline}}{{experimental_inline}} -
    注: XRInputSource は Gamepad API の {{domxref("Gamepad")}} インターフェイスを使用しますが、この入力デバイスは WebXR ハードウェアに厳密に関連付けられており、汎用のゲームデバイスではありません。
    -
    -
    {{domxref('XRInputSource.gripSpace', 'gripSpace')}}{{readonlyInline}}
    -
    handedness で示された手に持っているように見えるオブジェクトをレンダリングするために使用するポーズを原点が追跡する {{domxref("XRSpace")}}。この空間の向きは、手がオブジェクトをつかんでいる角度を示します。 この空間の使用方法の詳細については、{{domxref("XRInputSource.gripSpace", "gripSpace")}} のメイン記事をお読みください。
    -
    {{domxref('XRInputSource.handedness', 'handedness')}}{{readonlyInline}}
    -
    この XRInputSource によって表されるデバイスを使用している手がある場合はそれを示す {{domxref("DOMString")}}。 値は、left、right、または none になります。
    -
    {{domxref('XRInputSource.profiles', 'profiles')}}{{readonlyInline}}
    -
    DOMString オブジェクトの配列。 それぞれが、この入力ソースの望ましい視覚的表現と振る舞いを説明する入力プロファイルの名前を指定します。
    -
    {{domxref('XRInputSource.targetRayMode', 'targetRayMode')}}{{readonlyInline}}
    -
    -

    ターゲット光線を生成するために使用する方法を gaze、tracked-pointer、または screen で示す DOMString。

    -
    -
    {{domxref('XRInputSource.targetRaySpace', 'targetRaySpace')}}{{readonlyInline}}
    -
    ターゲット光線の原点とそれが伸びる方向を定義する {{domxref("XRSpace")}} オブジェクト。 この空間は、targetRayMode で定義された方法を使用して確立されます。
    -
    + - : XR 入力ソースのボタンと軸の状態を説明する {{domxref("Gamepad")}} オブジェクト（ゲームパッドまたは同等のデバイスの場合）。 デバイスがゲームパッドのようなデバイスでない場合、このプロパティの値は `NULL` です。 -


    - メソッド

    + > **Note:** **注**: `XRInputSource` は [Gamepad API](/ja/docs/Web/API/Gamepad_API) の {{domxref("Gamepad")}} インターフェイスを使用しますが、この入力デバイスは WebXR ハードウェアに厳密に関連付けられており、汎用のゲームデバイスではありません。 -

    XRInputSource インターフェイスはメソッドを定義しません。

    +- {{domxref('XRInputSource.gripSpace', 'gripSpace')}}{{readonlyInline}} + - : `handedness` で示された手に持っているように見えるオブジェクトをレンダリングするために使用するポーズを原点が追跡する {{domxref("XRSpace")}}。この空間の向きは、手がオブジェクトをつかんでいる角度を示します。 この空間の使用方法の詳細については、{{domxref("XRInputSource.gripSpace", "gripSpace")}} のメイン記事をお読みください。 +- {{domxref('XRInputSource.handedness', 'handedness')}}{{readonlyInline}} + - : この `XRInputSource` によって表されるデバイスを使用している手がある場合はそれを示す {{domxref("DOMString")}}。 値は、`left`、`right`、または `none` になります。 +- {{domxref('XRInputSource.profiles', 'profiles')}}{{readonlyInline}} + - : DOMString オブジェクトの配列。 それぞれが、この入力ソースの望ましい視覚的表現と振る舞いを説明する入力プロファイルの名前を指定します。 +- {{domxref('XRInputSource.targetRayMode', 'targetRayMode')}}{{readonlyInline}} + - : ターゲット光線を生成するために使用する方法を `gaze`、`tracked-pointer`、または `screen` で示す `DOMString`。 +- {{domxref('XRInputSource.targetRaySpace', 'targetRaySpace')}}{{readonlyInline}} + - : ターゲット光線の原点とそれが伸びる方向を定義する {{domxref("XRSpace")}} オブジェクト。 この空間は、`targetRayMode` で定義された方法を使用して確立されます。 -

    使用上の注意

    +##
    メソッド -

    アクションとターゲット光線

    +_`XRInputSource` インターフェイスはメソッドを定義しません。_ -

    デバイスがそれが向けられている方向を示す場合、これはターゲット光線（target ray）を使用して行われます。 これは、デバイスの位置から、デバイスが向けられている方向に外側に伸びる光線です。

    +## 使用上の注意 -
    -
    -
    ハンドコントローラから放出されるターゲット光線。
    -ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット
    -
    +### アクションとターゲット光線 -

    デバイスにトリガーまたは他のスクイーズ可能な入力（ユーザーが拳を握ったことを認識するハンドジェスチャーデバイスなど）が含まれている場合、そのアクションはプライマリースクイーズアクション（primary squeeze action）と呼ばれます。 プライマリースクイーズアクションは、オブジェクトをつかんだり、ツールや武器のトリガーを押したりするなど、実際のグリップアクションに対応している必要があります。 ユーザーがトリガーを押したりグリップを締め付けたりするなどしてスクイーズアクションが開始されると、{{domxref("XRSession.squeezestart_event", "squeezestart")}} イベントが XRSession に送信されます。 アクションが完了し、ユーザーがトリガーまたはグリップを放すと、{{domxref("XRSession.squeeze_event", "squeeze")}} イベントが送信されます。 この後に {{domxref("XRSession.squeezeend_event", "squeezeend")}} が続き、アクションが完了ではなく中止された場合にも送信されます。

    +デバイスがそれが向けられている方向を示す場合、これは**ターゲット光線**（target ray）を使用して行われます。 これは、デバイスの位置から、デバイスが向けられている方向に外側に伸びる光線です。 -

    デバイスにボタンまたはその他の押すことができる入力コントロールがある場合、それはプライマリ入力ソース（primary input source）であり、このボタンはプライマリーアクション（primary action）です。 プライマリーアクションは、ユーザーがボタンを押すか、タッチパッドまたはサムスティックのトップボタンをクリックするか、ボタンのようなアクションを呼び出す手のジェスチャーまたは音声コマンドを使用するときに発生する可能性があります。 プライマリーアクションが開始されると、{{domxref("XRSession.selectstart_event", "selectstart")}} イベントが {{domxref("XRSession")}} に送信されます。 アクションが完了すると（ユーザーがボタンを離したときなど）、{{domxref("XRSession.select_event", "select")}} イベントが送信されます。 最後に、それが完了すると、またはユーザーがアクションを中止すると、{{domxref("XRSession.selectend_event", "selectend")}} イベントがセッションオブジェクトに送信されます。

    +**ハンドコントローラから放出されるターゲット光線。** +![ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット](https://mdn.mozillademos.org/files/17089/example-target-ray.gif) -

    アクションは、ユーザーがデバイス固有の方法で中止するか、アクションが完了する前に入力デバイスが切断された場合に中止される可能性があります。

    +デバイスにトリガーまたは他のスクイーズ可能な入力（ユーザーが拳を握ったことを認識するハンドジェスチャーデバイスなど）が含まれている場合、そのアクションは**プライマリースクイーズアクション**（primary squeeze action）と呼ばれます。 プライマリースクイーズアクションは、オブジェクトをつかんだり、ツールや武器のトリガーを押したりするなど、実際のグリップアクションに対応している必要があります。 ユーザーがトリガーを押したりグリップを締め付けたりするなどしてスクイーズアクションが開始されると、{{domxref("XRSession.squeezestart_event", "squeezestart")}} イベントが `XRSession` に送信されます。 アクションが完了し、ユーザーがトリガーまたはグリップを放すと、{{domxref("XRSession.squeeze_event", "squeeze")}} イベントが送信されます。 この後に {{domxref("XRSession.squeezeend_event", "squeezeend")}} が続き、アクションが完了ではなく中止された場合にも送信されます。 -

    ローカル座標系

    +デバイスにボタンまたはその他の押すことができる入力コントロールがある場合、それは**プライマリ入力ソース**（primary input source）であり、このボタンは**プライマリーアクション**（primary action）です。 プライマリーアクションは、ユーザーがボタンを押すか、タッチパッドまたはサムスティックのトップボタンをクリックするか、ボタンのようなアクションを呼び出す手のジェスチャーまたは音声コマンドを使用するときに発生する可能性があります。 プライマリーアクションが開始されると、{{domxref("XRSession.selectstart_event", "selectstart")}} イベントが {{domxref("XRSession")}} に送信されます。 アクションが完了すると（ユーザーがボタンを離したときなど）、{{domxref("XRSession.select_event", "select")}} イベントが送信されます。 最後に、それが完了すると、またはユーザーがアクションを中止すると、{{domxref("XRSession.selectend_event", "selectend")}} イベントがセッションオブジェクトに送信されます。 -

    各入力ソースには独自のローカル座標系があります。 これは、入力の座標系を世界座標系にマッピングするために使用する {{domxref("XRSpace")}} である {{domxref("XRInputSource.gripSpace", "gripSpace")}} プロパティによって記述されます。 次に、グリップ空間の座標系を使用してオブジェクトをレンダリングし、ユーザーの手に持っているように見せることができます。

    +アクションは、ユーザーがデバイス固有の方法で中止するか、アクションが完了する前に入力デバイスが切断された場合に中止される可能性があります。 -

    GripSpace プロパティで定義された座標系を示す図

    +### ローカル座標系 -

    入力ソースの座標系の詳細については、{{domxref("XRInputSource.gripSpace", "gripSpace")}} プロパティについて詳しく説明している記事を参照してください。

    +各入力ソースには独自のローカル座標系があります。 これは、入力の座標系を世界座標系にマッピングするために使用する {{domxref("XRSpace")}} である {{domxref("XRInputSource.gripSpace", "gripSpace")}} プロパティによって記述されます。 次に、グリップ空間の座標系を使用してオブジェクトをレンダリングし、ユーザーの手に持っているように見せることができます。 -

    仕様

    +![GripSpace プロパティで定義された座標系を示す図](https://mdn.mozillademos.org/files/17215/xr-hand-axes.svg) - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#xrinputsource-interface','XRInputSource')}}{{Spec2('WebXR')}}初期定義
    +入力ソースの座標系の詳細については、{{domxref("XRInputSource.gripSpace", "gripSpace")}} プロパティについて詳しく説明している記事を参照してください。 -

    ブラウザーの互換性

    +## 仕様 +| 仕様 | 状態 | コメント | +| ------------------------------------------------------------------------------------ | ------------------------ | -------- | +| {{SpecName('WebXR','#xrinputsource-interface','XRInputSource')}} | {{Spec2('WebXR')}} | 初期定義 | +## ブラウザーの互換性 -

    {{Compat("api.XRInputSource")}}

    +{{Compat("api.XRInputSource")}} -

    関連情報

    +## 関連情報 - +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) +- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads) +- {{domxref("XRInputSourceArray")}} +- {{domxref("XRSpace")}} diff --git a/files/ja/web/api/xrinputsource/profiles/index.md b/files/ja/web/api/xrinputsource/profiles/index.md index b2e6010100fbc0..f85abeedbd12e3 100644 --- a/files/ja/web/api/xrinputsource/profiles/index.md +++ b/files/ja/web/api/xrinputsource/profiles/index.md @@ -20,62 +20,47 @@ tags: - profile translation_of: Web/API/XRInputSource/profiles --- -

    {{APIRef("WebXR")}}{{securecontext_header}}

    +{{APIRef("WebXR")}}{{securecontext_header}} -

    {{domxref("XRInputSource")}} の profiles 読み取り専用プロパティは、文字列の配列を返します。 各文字列は、入力ソースの構成プロファイルを記述します。 プロファイル文字列は、具体性の高い順にリストされ、最も具体的なプロファイルが最初にリストされます。

    +{{domxref("XRInputSource")}} の **`profiles`** 読み取り専用プロパティは、文字列の配列を返します。 各文字列は、入力ソースの構成プロファイルを記述します。 プロファイル文字列は、具体性の高い順にリストされ、最も具体的なプロファイルが最初にリストされます。 -
    -

    注: WebXR セッションがインラインモードの場合、profiles リストは常に空です。

    -
    +> **Note:** **注**: WebXR セッションがインラインモードの場合、`profiles` リストは常に空です。 -

    構文

    +## 構文 -
    let profileList = xrInputSource.profiles;
    +``` +let profileList = xrInputSource.profiles; +``` -

    値

    +### 値 -

    XRInputSource オブジェクトが表す入力デバイスの構成プロファイルをそれぞれ記述した {{domxref("DOMString")}} オブジェクトの配列。 各入力プロファイルは、入力ソースの好ましい視覚的表現と振る舞いを指定します。

    +`XRInputSource` オブジェクトが表す入力デバイスの構成プロファイルをそれぞれ記述した {{domxref("DOMString")}} オブジェクトの配列。 各入力プロファイルは、入力ソースの好ましい視覚的表現と振る舞いを指定します。 -

    使用上の注意

    +## 使用上の注意 -

    入力プロファイル名

    +### 入力プロファイル名 -

    入力プロファイル名は、入力ソースが使用するように構成できる視覚的表現と振る舞いを説明する文字列です。 各文字列は、

    +入力プロファイル名は、入力ソースが使用するように構成できる視覚的表現と振る舞いを説明する文字列です。 各文字列は、 - +- スペースはありません。 代わりに、単語はハイフン（"-"）文字で区切られます。 +- プラットフォームがそれを利用可能にする場合、USB のベンダー ID と製品 ID が提供される場合がありますが、信頼することはできません。 +- 特定のデバイスを一意に識別しません。 むしろ、製品が使用できる構成を識別します。 +- 該当する場合、デバイスの handedness に関する情報を提供しません。 -

    WebXR 入力プロファイルレジストリー（WebXR Input Profiles Registry）は、デバイス開発者とブラウザー開発者が、使用するブラウザーや他の{{Glossary("user agent","ユーザーエージェント")}}に関係なく、特定のデバイスが同じプロファイル文字列を報告するようにするために使用します。

    +WebXR 入力プロファイルレジストリー（[WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry)）は、デバイス開発者とブラウザー開発者が、使用するブラウザーや他の{{Glossary("user agent","ユーザーエージェント")}}に関係なく、特定のデバイスが同じプロファイル文字列を報告するようにするために使用します。 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#dom-xrinputsource-profiles','XRInputSource.profiles')}}{{Spec2('WebXR')}}初期定義
    +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#dom-xrinputsource-profiles','XRInputSource.profiles')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRInputSource.profiles")}}

    +{{Compat("api.XRInputSource.profiles")}} -

    関連情報

    +## 関連情報 - +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) +- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads) diff --git a/files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.md b/files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.md index e0676ca4dd8da6..c871778d5ebb05 100644 --- a/files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.md +++ b/files/ja/web/api/xrreferencespace/getoffsetreferencespace/index.md @@ -23,68 +23,72 @@ tags: - movement translation_of: Web/API/XRReferenceSpace/getOffsetReferenceSpace --- -

    {{APIRef("WebXR Device API")}}{{secureContext_header}}

    +{{APIRef("WebXR Device API")}}{{secureContext_header}} -

    {{domxref("XRReferenceSpace")}} インターフェイスの getOffsetReferenceSpace() メソッドは、メソッドが呼び出されたオブジェクトと 3D 空間内の特定の点との間の位置の相対的な違いを表す新しい参照空間オブジェクトを返します。 getOffsetReferenceSpace() によって返されるオブジェクトは、{{domxref("XRReferenceSpace")}} で呼び出された場合は XRReferenceSpace であり、{{domxref("XRBoundedReferenceSpace")}} で呼び出された場合は XRBoundedReferenceSpace です。

    +{{domxref("XRReferenceSpace")}} インターフェイスの **`getOffsetReferenceSpace()`** メソッドは、メソッドが呼び出されたオブジェクトと 3D 空間内の特定の点との間の位置の相対的な違いを表す新しい参照空間オブジェクトを返します。 `getOffsetReferenceSpace()` によって返されるオブジェクトは、{{domxref("XRReferenceSpace")}} で呼び出された場合は `XRReferenceSpace` であり、{{domxref("XRBoundedReferenceSpace")}} で呼び出された場合は `XRBoundedReferenceSpace` です。 -

    つまり、3D 空間にオブジェクトがあり、それに対して別のオブジェクトを相対的に配置する必要がある場合は、getOffsetReferenceSpace() を呼び出して、getOffsetReferenceSpace() を呼び出すオブジェクトの位置と向きを基準にして、2番目のオブジェクトに持たせる位置と向きを渡します。

    +つまり、3D 空間にオブジェクトがあり、それに対して別のオブジェクトを相対的に配置する必要がある場合は、`getOffsetReferenceSpace()` を呼び出して、*`getOffsetReferenceSpace()` を呼び出すオブジェクトの位置と向きを基準*にして、2 番目のオブジェクトに持たせる位置と向きを渡します。 -

    次に、シーンを描画するときに、オフセット参照空間を使用して、オブジェクトを相互に相対的に配置するだけでなく、必要な変換を適用して、ビューアーの位置に基づいてオブジェクトを適切にレンダリングできます。 これは、非 XR 入力に基づく回転の実装の例で示されています。 この例では、この方法を使用して、ユーザーがマウスを使用して視野角をピッチおよびヨーできるようにする方法を示しています。

    +次に、シーンを描画するときに、オフセット参照空間を使用して、オブジェクトを相互に相対的に配置するだけでなく、必要な変換を適用して、ビューアーの位置に基づいてオブジェクトを適切にレンダリングできます。 これは、[非 XR 入力に基づく回転の実装](#implementing_rotation_based_on_non-xr_inputs)の例で示されています。 この例では、この方法を使用して、ユーザーがマウスを使用して視野角をピッチおよびヨーできるようにする方法を示しています。 -

    構文

    +## 構文 -
    offsetReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(originOffset);
    +``` +offsetReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(originOffset); +``` -

    パラメーター

    +### パラメーター -
    -
    originOffset
    -
    新しい参照空間の原点へのオフセットを指定する {{domxref("XRRigidTransform")}}。 これらの値は、現在の参照空間の位置と向きに追加され、その結果は、新しく作成された {{domxref("XRReferenceSpace")}} の位置と向きとして使用されます。
    -
    +- `originOffset` + - : 新しい参照空間の原点へのオフセットを指定する {{domxref("XRRigidTransform")}}。 これらの値は、現在の参照空間の位置と向きに追加され、その結果は、新しく作成された {{domxref("XRReferenceSpace")}} の位置と向きとして使用されます。 -

    返り値

    +### 返り値 -

    メソッドが呼び出された参照空間と同じネイティブの原点を持つが、オブジェクトから originOffset で指定された点までの隔たりを示す原点オフセットを持つ参照空間を記述する新しい {{domxref("XRReferenceSpace")}} オブジェクト。

    +メソッドが呼び出された参照空間と同じネイティブの原点を持つが、オブジェクトから `originOffset` で指定された点までの隔たりを示す原点オフセットを持つ参照空間を記述する新しい {{domxref("XRReferenceSpace")}} オブジェクト。 -

    このメソッドを呼び出すオブジェクトが {{domxref("XRBoundedReferenceSpace")}} の場合、返されるオブジェクトも XRBoundedReferenceSpace です。 新しい参照空間の {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} には、元のオブジェクトの boundsGeometry が設定され、それぞれの点に originOffset の逆行列（inverse）が乗算されます。

    +このメソッドを呼び出すオブジェクトが {{domxref("XRBoundedReferenceSpace")}} の場合、返されるオブジェクトも `XRBoundedReferenceSpace` です。 新しい参照空間の {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} には、元のオブジェクトの `boundsGeometry` が設定され、それぞれの点に `originOffset` の逆行列（inverse）が乗算されます。 -

    例

    +## 例 -

    以下は、getOffsetReferenceSpace() の使用方法を示すいくつかの例です。

    +以下は、`getOffsetReferenceSpace()` の使用方法を示すいくつかの例です。 -

    ビューアーのテレポートまたは位置の設定

    +### ビューアーのテレポートまたは位置の設定 -

    シーンを最初に作成するときに、3D 世界内でのユーザーの位置を設定する必要がある場合があります。 getOffsetReferenceSpace() を使用してこれを行うことができます。

    +シーンを最初に作成するときに、3D 世界内でのユーザーの位置を設定する必要がある場合があります。 `getOffsetReferenceSpace()` を使用してこれを行うことができます。 -
    xrSession.requestReferenceSpace("local")
-.then((refSpace) => {
+```js
+xrSession.requestReferenceSpace("local")
+.then((refSpace) => {
   xrReferenceSpace = refSpace;
   xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(
         new XRRigidTransform(startPosition, {x:0, y:0, z:1.0, w: 1.0}));
   xrSession.requestAnimationFrame(drawFrame);
-});
    +}); +``` -

    このコードでは、ローカル参照空間を取得し、getOffsetReferenceSpace() を使用して、原点を startPosition で指定された位置に調整し、向きが Z 軸に直に沿った新しい空間を作成します。 次に、{{domxref("XRSession")}} の {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を使用して最初のアニメーションフレームを要求します。

    +このコードでは、ローカル参照空間を取得し、`getOffsetReferenceSpace()` を使用して、原点を `startPosition` で指定された位置に調整し、向きが Z 軸に直に沿った新しい空間を作成します。 次に、{{domxref("XRSession")}} の {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を使用して最初のアニメーションフレームを要求します。 -

    非 XR 入力に基づく回転の実装

    +### 非 XR 入力に基づく回転の実装 -

    WebXR が直接サポートしている入力コントロールは、すべて専用の VR または AR の入力デバイスです。 マウス、キーボード、またはその他の入力デバイスを使用して 3D 空間内のオブジェクトを移動または変換したり、ユーザーが空間内を移動できるようにするには、入力を読み取って移動するためのコードを記述する必要があります。

    +WebXR が直接サポートしている入力コントロールは、すべて専用の VR または AR の入力デバイスです。 マウス、キーボード、またはその他の入力デバイスを使用して 3D 空間内のオブジェクトを移動または変換したり、ユーザーが空間内を移動できるようにするには、入力を読み取って移動するためのコードを記述する必要があります。 -

    これは、getOffsetReferenceSpace() のもう1つの良いユースケースです。 この例では、ユーザーがマウスを右クリックしながら動かすことで、視野角の変更により周囲を見回せるコードを示します。

    +これは、`getOffsetReferenceSpace()` のもう 1 つの良いユースケースです。 この例では、ユーザーがマウスを右クリックしながら動かすことで、視野角の変更により周囲を見回せるコードを示します。 -

    まず、{{domxref("Element.mousemove_event", "mousemove")}} イベントのイベントハンドラーを追加します。 これは、マウスの右ボタンが押されている場合に回転を実行するコードを呼び出します。 {{domxref("Element.oncontextmenu", "oncontextmenu")}} イベントで {{domxref("Event.preventDefault", "preventDefault()")}} を呼び出すことにより、このイベントが無視されるように設定していることにも注意してください。 これにより、右クリックによってコンテキストメニューがブラウザーに表示されなくなります。

    +まず、{{domxref("Element.mousemove_event", "mousemove")}} イベントのイベントハンドラーを追加します。 これは、マウスの右ボタンが押されている場合に回転を実行するコードを呼び出します。 {{domxref("Element.oncontextmenu", "oncontextmenu")}} イベントで {{domxref("Event.preventDefault", "preventDefault()")}} を呼び出すことにより、このイベントが無視されるように設定していることにも注意してください。 これにより、右クリックによってコンテキストメニューがブラウザーに表示されなくなります。 -
    canvas.oncontextmenu = (event) => { event.preventDefault(); };
-canvas.addEventListener("mousemove", (event) => {
-  if (event.buttons & 2) {
+```js
+canvas.oncontextmenu = (event) => { event.preventDefault(); };
+canvas.addEventListener("mousemove", (event) => {
+  if (event.buttons & 2) {
     rotateViewBy(event.movementX, event.movementY);
   }
 });
-
    +``` -

    次に、rotateViewBy() 関数は、mousemove イベントからのマウスデルタ値に基づいて、マウスルック（mouse look）方向のヨーとピッチを更新します。 ピッチを制限しているため、真上と真下を超えて見ることはできません。 これが呼び出されるたびに、新しいオフセットを使用して、mousePitch と mouseYaw の現在の値が更新されます。

    +次に、`rotateViewBy()` 関数は、`mousemove` イベントからのマウスデルタ値に基づいて、マウスルック（mouse look）方向のヨーとピッチを更新します。 ピッチを制限しているため、真上と真下を超えて見ることはできません。 これが呼び出されるたびに、新しいオフセットを使用して、`mousePitch` と `mouseYaw` の現在の値が更新されます。 -
    let mouseYaw = 0.0;
+```js
+let mouseYaw = 0.0;
 let mousePitch = 0.0;
 const inverseOrientation = quat.create();
 const MOUSE_SPEED = 0.003;
@@ -93,17 +97,19 @@ function rotateViewBy(dx, dy) {
   mouseYaw += dx * MOUSE_SPEED;
   mousePitch += dy * MOUSE_SPEED;
 
-  if (mousePitch < -Math.PI * 0.5) {
+  if (mousePitch < -Math.PI * 0.5) {
     mousePitch = -Math.PI * 0.5;
-  } else if (mousePitch > Math.PI * 0.5) {
+  } else if (mousePitch > Math.PI * 0.5) {
     mousePitch = Math.PI * 0.5;
   }
-}
    +} +``` -

    最後に、計算したヨーとピッチをビューアーの向きに実際に適用するコードが必要です。 この関数 applyMouseMovement() は、次のことを処理します。

    +最後に、計算したヨーとピッチをビューアーの向きに実際に適用するコードが必要です。 この関数 `applyMouseMovement()` は、次のことを処理します。 -
    function applyMouseMovement(refSpace) {
-  if (!mouseYaw && !mousePitch) {
+```js
+function applyMouseMovement(refSpace) {
+  if (!mouseYaw && !mousePitch) {
     return refSpace;
   }
 
@@ -116,31 +122,21 @@ function rotateViewBy(dx, dy) {
                           z: inverseOrientation[2], w: inverseOrientation[3]});
 
   return refSpace.getOffsetReferenceSpace(newTransform);
-}
    +} +``` -

    この関数は、現在のピッチ値とヨー値からビューアーの向きを決めるために使用する逆向き行列を作成し、{{domxref("XRRigidTransform.XRRigidTransform", "new XRRigidTransform()")}} を呼び出すときにその行列を向きのソースとして使用します。 次に、新しい {{domxref("XRRigidTransform")}} の参照空間がフェッチされ、呼び出し元に返されます。

    +この関数は、現在のピッチ値とヨー値からビューアーの向きを決めるために使用する逆向き行列を作成し、{{domxref("XRRigidTransform.XRRigidTransform", "new XRRigidTransform()")}} を呼び出すときにその行列を向きのソースとして使用します。 次に、新しい {{domxref("XRRigidTransform")}} の参照空間がフェッチされ、呼び出し元に返されます。 -

    この新しい参照空間は、ビューアーの位置は変更しませんが、蓄積されたマウス入力から生成されたピッチとヨーの値に基づいて向きを変更します。 applyMouseMovement() は、フレームを描画するときに、{{domxref("XRFrame.getViewerPose", "getViewerPose()")}} を使用してビューアーのポーズをフェッチする直前に呼び出す必要があり、レンダリングはこの参照空間で実行する必要があります。

    +この新しい参照空間は、ビューアーの位置は変更しませんが、蓄積されたマウス入力から生成されたピッチとヨーの値に基づいて向きを変更します。 `applyMouseMovement()` は、フレームを描画するときに、{{domxref("XRFrame.getViewerPose", "getViewerPose()")}} を使用してビューアーのポーズをフェッチする直前に呼び出す必要があり、レンダリングはこの参照空間で実行する必要があります。 -

    これに似たコードが、移動、向き、モーションという WebXR チュートリアルの幅広い記事で使用されているのを見ることができます。 特に、WebXR セッションの開始というセクションを確認してください。

    +これに似たコードが、[移動、向き、モーション](/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion)という WebXR チュートリアルの幅広い記事で使用されているのを見ることができます。 特に、[WebXR セッションの開始](/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion#Starting_up_the_WebXR_session)というセクションを確認してください。 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#dom-xrreferencespace-getoffsetreferencespace','getOffsetReferenceSpace()')}}{{Spec2('WebXR')}}初期定義
    +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#dom-xrreferencespace-getoffsetreferencespace','getOffsetReferenceSpace()')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRReferenceSpace.getOffsetReferenceSpace")}}

    +{{Compat("api.XRReferenceSpace.getOffsetReferenceSpace")}} diff --git a/files/ja/web/api/xrreferencespace/reset_event/index.md b/files/ja/web/api/xrreferencespace/reset_event/index.md index 236db2667be314..eeb046ecdcc5bb 100644 --- a/files/ja/web/api/xrreferencespace/reset_event/index.md +++ b/files/ja/web/api/xrreferencespace/reset_event/index.md @@ -19,100 +19,89 @@ tags: - reset translation_of: Web/API/XRReferenceSpace/reset_event --- -

    {{APIRef("WebXR Device API")}}{{secureContext_header}}

    +{{APIRef("WebXR Device API")}}{{secureContext_header}} -

    ネイティブの原点または実際の原点のいずれかで不連続が検出されると、reset イベントが {{domxref("XRReferenceSpace")}} オブジェクトに送信され、参照空間を使用して方向付けられたオブジェクトの位置または方向がジャンプします。 これは、ユーザーが XR デバイスを較正または再較正する場合、またはデバイスがユーザーの追跡を失った後に原点を自動的に変更してから再び取得する場合によく見られます。

    +ネイティブの原点または実際の原点のいずれかで不連続が検出されると、**`reset`** イベントが {{domxref("XRReferenceSpace")}} オブジェクトに送信され、参照空間を使用して方向付けられたオブジェクトの位置または方向がジャンプします。 これは、ユーザーが XR デバイスを較正または再較正する場合、またはデバイスがユーザーの追跡を失った後に原点を自動的に変更してから再び取得する場合によく見られます。 -

    {{domxref("XRBoundedReferenceSpace")}} オブジェクトの場合、{{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} が変更されたときに reset イベントを発生させることもできます。

    +{{domxref("XRBoundedReferenceSpace")}} オブジェクトの場合、{{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} が変更されたときに `reset` イベントを発生させることもできます。 -

    いずれの場合も、イベントは、新しい原点を利用する WebXR アニメーションフレームが実行される前に送信されます。

    +いずれの場合も、イベントは、新しい原点を利用する WebXR アニメーションフレームが実行される前に送信されます。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
    バブリングあり
    キャンセル不可
    インターフェイス{{domxref("XRReferenceSpaceEvent")}}
    イベントハンドラープロパティ{{domxref("XRReferenceSpace/onreset", "onreset")}}
    バブリングあり
    キャンセル不可
    インターフェイス{{domxref("XRReferenceSpaceEvent")}}
    イベントハンドラープロパティ + {{domxref("XRReferenceSpace/onreset", "onreset")}} +
    -

    使用上の注意

    +## 使用上の注意 -

    reset イベントは、参照空間の原点を変更し、イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティで示されるように移動および回転することにより、座標系がリセットまたは再構成されたことを示します。 イベントは、アニメーションフレームのコールバックが実行されて保留中のフレームがレンダリングされる前に送信され、これらのコールバックで更新された座標系が使用可能であることを確認します。

    +`reset` イベントは、参照空間の原点を変更し、イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティで示されるように移動および回転することにより、座標系がリセットまたは再構成されたことを示します。 イベントは、アニメーションフレームのコールバックが実行されて保留中のフレームがレンダリングされる前に送信され、これらのコールバックで更新された座標系が使用可能であることを確認します。 -

    リセットが発生する理由はいくつかあります。 それらの間で最も一般的なものは次のとおりです。

    +リセットが発生する理由はいくつかあります。 それらの間で最も一般的なものは次のとおりです。 - +- ユーザーが、顔の向きおよびハンドコントローラーがユーザーの実際の位置および顔の向きと同期するようにヘッドセット自体の再較正を要求するなどして、手動で座標系をリセットしました。 これは主に、`local` または `local-floor` の参照空間の問題です。 +- `bounded-floor` 参照空間では、ユーザーが参照空間の境界を出て新しい参照空間に入る場合、座標系をリセットできます（ゲーム内のあるレベルから別のレベルに横断する場合など、各レベルは独自の座標系を持つ独自のマップです）。 +- 追跡システムは一時的にユーザーを見失い、その後再びユーザーを取り戻しましたが、最後に知られた位置のすぐ近くを離れるのに十分な距離を移動した後になってからでした。 主に `unbounded` 参照空間の問題です。 +- ユーザーは、`unbounded` 参照空間にいて、開始位置（参照空間の原点）から十分に離れているため、浮動小数点またはその他の形式の誤差またはドリフトが問題になります。 このため座標系は、ユーザーの現在の位置またはその近くの新しい原点でリセットされます。 +- WebXR インフラストラクチャーまたはハードウェアドライバーは、デバイスが一時的に追跡を失い、ハードウェアとソフトウェアの位置と方向が同期していないことを検出しました。 -
    -

    注: 参照空間が以前の原点の追跡を取り戻すことができる場合、reset イベントは発生しません。 これは、原点が強制的に再配置されていないことを意味します。 このイベントは、追跡喪失から回復するために原点を再配置する必要がある場合にのみ発生します。

    -
    +> **Note:** **注**: 参照空間が以前の原点の追跡を取り戻すことができる場合、`reset` イベントは発生*しません*。 これは、原点が強制的に再配置されていないことを意味します。 このイベントは、追跡喪失から回復するために原点を再配置する必要がある場合にのみ発生します。 -

    手動リセット

    +### 手動リセット -

    VR ヘッドセットを使用したことがある人なら、起動したときに正面を向いているのに、ヘッドセットは空や床を見ていると勘違いしたり、ハンドコントローラーをまっすぐ前に向けているのに、どこか上や右に向けていると勘違いしたりしたことがあるでしょう。このような場合、通常はどこかのボタンを押し続けると、世界がデバイスの現在の向きに再同期されます。 これは、ヘッドセットの向きに基づいた1つまたは複数の参照空間に `reset` イベントを送信することで機能します。

    +VR ヘッドセットを使用したことがある人なら、起動したときに正面を向いているのに、ヘッドセットは空や床を見ていると勘違いしたり、ハンドコントローラーをまっすぐ前に向けているのに、どこか上や右に向けていると勘違いしたりしたことがあるでしょう。このような場合、通常はどこかのボタンを押し続けると、世界がデバイスの現在の向きに再同期されます。 これは、ヘッドセットの向きに基づいた 1 つまたは複数の参照空間に \`reset\` イベントを送信することで機能します。 -

    不連続性の処理

    +### 不連続性の処理 -

    ビューアーの位置のジャンプは、{{domxref("XRPose")}} の Boolean プロパティ {{domxref("XRPose.emulatedPosition", "emulatedPosition")}} を監視することで処理できます。 ビューアーの位置のジャンプが、emulatedPosition が true から false に切り替わるのと同時に起こった場合、ビューアーは追跡を回復し、新しい位置は以前にエミュレートされた値からの補正を表します。 これは、サイトまたはアプリが、（XR デバイスが移動を導入するために使用するユーザーの物理的な移動ではなく）ビューアーの位置や向きを明示的に変更することによる空間内のモーションをシミュレートしない場合に一般的に望ましい振る舞いです。

    +ビューアーの位置のジャンプは、{{domxref("XRPose")}} の Boolean プロパティ {{domxref("XRPose.emulatedPosition", "emulatedPosition")}} を監視することで処理できます。 ビューアーの位置のジャンプが、`emulatedPosition` が `true` から `false` に切り替わるのと同時に起こった場合、ビューアーは追跡を回復し、新しい位置は以前にエミュレートされた値からの補正を表します。 これは、サイトまたはアプリが、（XR デバイスが移動を導入するために使用するユーザーの物理的な移動ではなく）ビューアーの位置や向きを明示的に変更することによる空間内のモーションをシミュレートしない場合に一般的に望ましい振る舞いです。 -

    ただし、そのような「テレポート」が使用されている場合は、追跡を回復した後に、追加の潜在的に不快なジャンプが発生する可能性があり、実際にはユーザーの位置をジャンプしないようにする必要があります。 これを許可する代わりに、{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を呼び出す前に計算されたテレポーテーションオフセットに emulatedPosition を統合して、更新された実際の原点が前のフレームからビューアーの位置がジャンプした隔たりによって調整された新しい参照空間を作成できます。 このようにして、ユーザーの位置を2回ではなく1回だけ変更します。

    +ただし、そのような「テレポート」が使用されている場合は、追跡を回復した後に、追加の潜在的に不快なジャンプが発生する可能性があり、実際にはユーザーの位置をジャンプしないようにする必要があります。 これを許可する代わりに、{{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を呼び出す前に計算されたテレポーテーションオフセットに `emulatedPosition` を統合して、更新された実際の原点が前のフレームからビューアーの位置がジャンプした隔たりによって調整された新しい参照空間を作成できます。 このようにして、ユーザーの位置を 2 回ではなく 1 回だけ変更します。 -

    不連続の大きさの効果

    +### 不連続の大きさの効果 -

    不連続が十分に小さく、デバイスが同じ追跡領域内で追跡を取り戻せる場合、reset イベントは発生しません。 また、ユーザーの近くで空間の安定性を維持するために、時間の経過とともにネイティブの原点に小さな調整を加えるため、unbounded 参照空間で発生することもありません。 大きな不連続のみがリセットをトリガーします。

    +不連続が十分に小さく、デバイスが同じ追跡領域内で追跡を取り戻せる場合、`reset` イベントは発生しません。 また、ユーザーの近くで空間の安定性を維持するために、時間の経過とともにネイティブの原点に小さな調整を加えるため、unbounded 参照空間で発生することもありません。 大きな不連続のみがリセットをトリガーします。 -

    例

    +## 例 -

    reset イベントのハンドラーを追加するには、2つの方法のいずれかを使用できます。 まず、次のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用できます。

    +`reset` イベントのハンドラーを追加するには、2 つの方法のいずれかを使用できます。 まず、次のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} メソッドを使用できます。 -
    viewerRefSpace.addEventListener("reset", (event) => {
+```js
+viewerRefSpace.addEventListener("reset", (event) => {
   /* perform reset related tasks */
 });
-
    +``` -

    2番目のオプションは、次のように XRReferenceSpace オブジェクトの {{domxref("XRReferenceSpace.onreset", "onreset")}} イベントハンドラープロパティを設定することです。

    +2 番目のオプションは、次のように `XRReferenceSpace` オブジェクトの {{domxref("XRReferenceSpace.onreset", "onreset")}} イベントハンドラープロパティを設定することです。 -
    viewerRefSpace.onreset = (event) => {
+```js
+viewerRefSpace.onreset = (event) => {
   /* perform reset related tasks */
 };
-
    - -

    仕様

    - - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#eventdef-xrreferencespace-reset','reset event')}}{{Spec2('WebXR')}}初期定義
    +``` + +## 仕様 + +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#eventdef-xrreferencespace-reset','reset event')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRReferenceSpace.onreset")}}

    +{{Compat("api.XRReferenceSpace.onreset")}} diff --git a/files/ja/web/api/xrreferencespaceevent/index.md b/files/ja/web/api/xrreferencespaceevent/index.md index e097425e83a499..5579b8198d8c1c 100644 --- a/files/ja/web/api/xrreferencespaceevent/index.md +++ b/files/ja/web/api/xrreferencespaceevent/index.md @@ -20,56 +20,39 @@ tags: - augmented translation_of: Web/API/XRReferenceSpaceEvent --- -

    {{APIRef("WebXR Device API")}}{{SecureContext_header}}

    +{{APIRef("WebXR Device API")}}{{SecureContext_header}} -

    WebXR Device API の XRReferenceSpaceEvent インターフェイスは、{{domxref("XRReferenceSpace")}} に送信されるイベントを表します。 現在、この型を使用するイベントは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。

    +[WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) の **`XRReferenceSpaceEvent`** インターフェイスは、{{domxref("XRReferenceSpace")}} に送信されるイベントを表します。 現在、この型を使用するイベントは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。 -

    コンストラクター

    +## コンストラクター -
    -
    {{domxref("XRReferenceSpaceEvent.XRReferenceSpaceEvent", "XRReferenceSpaceEvent()")}}
    -
    指定されたタイプで、指定された {{domxref("XRReferenceSpaceEventInit")}} ディクショナリーの値を使用して構成された新しい XRReferenceSpaceEvent を返します。
    -
    +- {{domxref("XRReferenceSpaceEvent.XRReferenceSpaceEvent", "XRReferenceSpaceEvent()")}} + - : 指定されたタイプで、指定された {{domxref("XRReferenceSpaceEventInit")}} ディクショナリーの値を使用して構成された新しい `XRReferenceSpaceEvent` を返します。 -

    プロパティ

    +## プロパティ -

    親インターフェイスである {{domxref("Event")}} で使用可能なプロパティを継承することに加えて、XRReferenceSpaceEvent オブジェクトには次のプロパティが含まれます。

    +_親インターフェイスである {{domxref("Event")}} で使用可能なプロパティを継承することに加えて、`XRReferenceSpaceEvent` オブジェクトには次のプロパティが含まれます。_ -
    -
    {{domxref("XRReferenceSpaceEvent.referenceSpace", "referenceSpace")}} {{ReadOnlyInline}}
    -
    イベントを生成した参照空間を示す {{domxref("XRReferenceSpace")}}。
    -
    {{domxref("XRReferenceSpaceEvent.transform", "transform")}} {{ReadOnlyInline}}
    -
    イベント前の座標系を基準にして定義された、イベント後の指定された referenceSpace のネイティブの原点の位置と向きを示す {{domxref("XRRigidTransform")}} オブジェクト。
    -
    +- {{domxref("XRReferenceSpaceEvent.referenceSpace", "referenceSpace")}} {{ReadOnlyInline}} + - : イベントを生成した参照空間を示す {{domxref("XRReferenceSpace")}}。 +- {{domxref("XRReferenceSpaceEvent.transform", "transform")}} {{ReadOnlyInline}} + - : イベント前の座標系を基準にして定義された、イベント後の指定された `referenceSpace` のネイティブの原点の位置と向きを示す {{domxref("XRRigidTransform")}} オブジェクト。 -

    メソッド

    +## メソッド -

    XRReferenceSpaceEvent はメソッドを定義しませんが、親インターフェイスである {{domxref("Event")}} のメソッドを継承します。

    +_`XRReferenceSpaceEvent` はメソッドを定義しませんが、親インターフェイスである {{domxref("Event")}} のメソッドを継承します。_ -

    イベントタイプ

    +## イベントタイプ -
    -
    {{domxref("XRReferenceSpace.reset_event", "reset")}}
    -
    reset イベントは、不連続、再較正、またはデバイスのリセットによってネイティブの原点が変更されたときに参照空間に送信されます。 これは、アプリが保存されている変換、位置/向き情報などを更新したり、必要に応じて再計算できるように参照の空間の原点に基づいてキャッシュされた値をダンプする機会です。
    -
    +- {{domxref("XRReferenceSpace.reset_event", "reset")}} + - : `reset` イベントは、不連続、再較正、またはデバイスのリセットによってネイティブの原点が変更されたときに参照空間に送信されます。 これは、アプリが保存されている変換、位置/向き情報などを更新したり、必要に応じて再計算できるように参照の空間の原点に基づいてキャッシュされた値をダンプする機会です。 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#xrreferencespaceevent','XRReferenceSpaceEvent')}}{{Spec2('WebXR')}}初期定義
    +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#xrreferencespaceevent','XRReferenceSpaceEvent')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRReferenceSpaceEvent")}}

    +{{Compat("api.XRReferenceSpaceEvent")}} diff --git a/files/ja/web/api/xrreferencespaceevent/referencespace/index.md b/files/ja/web/api/xrreferencespaceevent/referencespace/index.md index 19223fe83f2047..dd1d67f587d58c 100644 --- a/files/ja/web/api/xrreferencespaceevent/referencespace/index.md +++ b/files/ja/web/api/xrreferencespaceevent/referencespace/index.md @@ -21,37 +21,28 @@ tags: - source translation_of: Web/API/XRReferenceSpaceEvent/referenceSpace --- -

    {{APIRef("WebXR Device API")}}{{SecureContext_header}}

    +{{APIRef("WebXR Device API")}}{{SecureContext_header}} -

    {{domxref("XRReferenceSpaceEvent")}} の referenceSpace 読み取り専用プロパティは、イベントの発生元である参照空間を指定します。

    +{{domxref("XRReferenceSpaceEvent")}} の **`referenceSpace`** 読み取り専用プロパティは、イベントの発生元である参照空間を指定します。 -

    構文

    +## 構文 -
    let refSpace = xrReferenceSpaceEvent.referenceSpace;
    +``` +let refSpace = xrReferenceSpaceEvent.referenceSpace; +``` -

    値

    +### 値 -

    イベントのソースを示す {{domxref("XRReferenceSpace")}}。

    +イベントのソースを示す {{domxref("XRReferenceSpace")}}。 -

    例

    +## 例 -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#dom-xrreferencespaceevent-referencespace','XRReferenceSpaceEvent.referenceSpace')}}{{Spec2('WebXR')}}初期定義
    +| 仕様 | 状態 | コメント | +| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#dom-xrreferencespaceevent-referencespace','XRReferenceSpaceEvent.referenceSpace')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRReferenceSpaceEvent.referenceSpace")}}

    +{{Compat("api.XRReferenceSpaceEvent.referenceSpace")}} diff --git a/files/ja/web/api/xrreferencespaceevent/transform/index.md b/files/ja/web/api/xrreferencespaceevent/transform/index.md index acd8333c95ec84..273a3a91ab631e 100644 --- a/files/ja/web/api/xrreferencespaceevent/transform/index.md +++ b/files/ja/web/api/xrreferencespaceevent/transform/index.md @@ -26,52 +26,44 @@ tags: - transform translation_of: Web/API/XRReferenceSpaceEvent/transform --- -

    {{APIRef("WebXR Device API")}}{{SecureContext_header}}

    +{{APIRef("WebXR Device API")}}{{SecureContext_header}} -

    {{domxref("XRReferenceSpaceEvent")}} の transform 読み取り専用プロパティは、イベントが表す変更が適用された後の、影響を受ける {{domxref("XRReferenceSpaceEvent.referenceSpace", "referenceSpace")}} のネイティブの原点の位置と向きを示します。 transform は古い座標系を使用して定義します。 これにより、座標をイベント前の座標系からイベント後の座標系に変換するために使用できます。

    +{{domxref("XRReferenceSpaceEvent")}} の **`transform`** 読み取り専用プロパティは、イベントが表す変更が適用された後の、影響を受ける {{domxref("XRReferenceSpaceEvent.referenceSpace", "referenceSpace")}} のネイティブの原点の位置と向きを示します。 `transform` は古い座標系を使用して定義します。 これにより、座標をイベント前の座標系からイベント後の座標系に変換するために使用できます。 -

    構文

    +## 構文 -
    let refSpace = xrReferenceSpaceEvent.transform;
    +``` +let refSpace = xrReferenceSpaceEvent.transform; +``` -

    値

    +### 値 -

    座標をイベント前の座標系からイベント後の座標系に変換するために使用できる変換を提供する {{domxref("XRRigidTransform")}} オブジェクト。

    +座標をイベント前の座標系からイベント後の座標系に変換するために使用できる変換を提供する {{domxref("XRRigidTransform")}} オブジェクト。 -

    使用上の注意

    +## 使用上の注意 -

    reset イベントを受信すると、キャッシュされた位置または向きの情報に変換を適用して、それらを更新された座標系にシフトできます。 または、キャッシュされた位置情報を破棄して、最初から再計算することもできます。 あなたが取るアプローチはあなたのニーズに依存します。

    +`reset` イベントを受信すると、キャッシュされた位置または向きの情報に変換を適用して、それらを更新された座標系にシフトできます。 または、キャッシュされた位置情報を破棄して、最初から再計算することもできます。 あなたが取るアプローチはあなたのニーズに依存します。 -

    reset イベントの原因と対応方法の詳細については、{{domxref("XRReferenceSpaceEvent.reset_event", "reset")}} イベントのドキュメントを参照してください。

    +`reset` イベントの原因と対応方法の詳細については、{{domxref("XRReferenceSpaceEvent.reset_event", "reset")}} イベントのドキュメントを参照してください。 -

    例

    +## 例 -

    この例では、シーン内のすべてのオブジェクトをウォークスルーし、各オブジェクトの位置にイベントの指定された transform を掛けて更新することにより、reset イベントを処理します。 シーンは scene オブジェクトで表され、その中にある objects と呼ばれる配列にすべてのオブジェクトが含まれています。

    +この例では、シーン内のすべてのオブジェクトをウォークスルーし、各オブジェクトの位置にイベントの指定された `transform` を掛けて更新することにより、`reset` イベントを処理します。 シーンは `scene` オブジェクトで表され、その中にある `objects` と呼ばれる配列にすべてのオブジェクトが含まれています。 -
    xrReferenceSpace.addEventListener("reset", event => {
+```js
+xrReferenceSpace.addEventListener("reset", event => {
   for (let obj of scene.objects) {
     mat4.multiply(obj.transform, obj.transform, event.transform);
   }
 });
-
    +``` -

    仕様

    +## 仕様 - - - - - - - - - - - - - -
    仕様状態コメント
    {{SpecName('WebXR','#dom-xrreferencespaceevent-transform','XRReferenceSpaceEvent.transform')}}{{Spec2('WebXR')}}初期定義
    +| 仕様 | 状態 | コメント | +| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | +| {{SpecName('WebXR','#dom-xrreferencespaceevent-transform','XRReferenceSpaceEvent.transform')}} | {{Spec2('WebXR')}} | 初期定義 | -

    ブラウザーの互換性

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

    {{Compat("api.XRReferenceSpaceEvent.transform")}}

    +{{Compat("api.XRReferenceSpaceEvent.transform")}} diff --git a/files/ja/web/api/xsltprocessor/basic_example/index.md b/files/ja/web/api/xsltprocessor/basic_example/index.md index 9b42202e36902d..16879d94719ba0 100644 --- a/files/ja/web/api/xsltprocessor/basic_example/index.md +++ b/files/ja/web/api/xsltprocessor/basic_example/index.md @@ -5,47 +5,56 @@ tags: - XSLT translation_of: Web/API/XSLTProcessor/Basic_Example --- -

    基本的な例

    +## 基本的な例 -

    最初の例は、ブラウザーで XSLT 変換の設定の基本を実演します。 この例は、人が読むことのできる書式で書かれた記事についての情報 (タイトル、著者の一覧、本文) を含む XML 文書を取得します。

    -

    図 1 は基本的な XSLT の例のソースです。 XML 文書 (example.xml) は記事についての情報を含んでいます。 ?xml-stylesheet? で処理を指示すると、その href 属性を通して XSLT スタイルシートへリンクします。

    -

    XSLT スタイルシートは、最終的な出力を生成するためのすべてのテンプレートを含む、xsl:stylesheet 要素で開始します。図 1 の例には二つのテンプレートがあります。一つはルートノードに対応し、一つは Author ノードに対応します。ルートノードが出力する記事のタイトルにテンプレートが一致すると、(apply-templates を通して) Authors ノードの子の、すべての Author ノードに対応するテンプレートが処理されます。

    +最初の例は、ブラウザーで XSLT 変換の設定の基本を実演します。 この例は、人が読むことのできる書式で書かれた記事についての情報 (タイトル、著者の一覧、本文) を含む XML 文書を取得します。 -

    図 1 : 簡単な XSLT の例

    -

    XML 文書 (example.xml) :

    +図 1 は基本的な XSLT の例のソースです。 XML 文書 (example.xml) は記事についての情報を含んでいます。 `?xml-stylesheet?` で処理を指示すると、その href 属性を通して XSLT スタイルシートへリンクします。 -
    <?xml version="1.0"?>
-<?xml-stylesheet type="text/xsl" href="example.xsl"?>
-<Article>
-  <Title>My Article</Title>
-  <Authors>
-    <Author>Mr. Foo</Author>
-    <Author>Mr. Bar</Author>
-  </Authors>
-  <Body>This is my article text.</Body>
-</Article>
    +XSLT スタイルシートは、最終的な出力を生成するためのすべてのテンプレートを含む、`xsl:stylesheet` 要素で開始します。図 1 の例には二つのテンプレートがあります。一つはルートノードに対応し、一つは Author ノードに対応します。ルートノードが出力する記事のタイトルにテンプレートが一致すると、(`apply-templates` を通して) Authors ノードの子の、すべての Author ノードに対応するテンプレートが処理されます。 -

    XSL スタイルシート (example.xsl) :

    +図 1 : 簡単な XSLT の例 -
    <?xml version="1.0"?>
-<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+XML 文書 (example.xml) :
 
-  <xsl:output method="text"/>
+```xml
+
+
+
    
+  My Article
+  
+    Mr. Foo
+    Mr. Bar
+  
+  This is my article text.
+
    
+```
 
-  <xsl:template match="/">
-    Article - <xsl:value-of select="/Article/Title"/>
-    Authors: <xsl:apply-templates select="/Article/Authors/Author"/>
-  </xsl:template>
+XSL スタイルシート (example.xsl) :
 
-  <xsl:template match="Author">
-    - <xsl:value-of select="." />
-  </xsl:template>
+```xml
+
+
 
-</xsl:stylesheet>
    + -

    ブラウザーの出力:

    + + Article - + Authors: + -
    Article - My Article
+  
+    - 
+  
+
+
+```
+
+ブラウザーの出力:
+
+```
+Article - My Article
 Authors:
 - Mr. Foo
-- Mr. Bar
    +- Mr. Bar +``` diff --git a/files/ja/web/api/xsltprocessor/index.md b/files/ja/web/api/xsltprocessor/index.md index 2f16fb2bf966c9..509e2bc91e99d3 100644 --- a/files/ja/web/api/xsltprocessor/index.md +++ b/files/ja/web/api/xsltprocessor/index.md @@ -7,137 +7,86 @@ tags: - DOM Reference - Reference - XSLT -browser-compat: api.XSLTProcessor translation_of: Web/API/XSLTProcessor +browser-compat: api.XSLTProcessor --- -
    {{Non-standard_header}}{{SeeCompatTable}}{{APIRef("XSLT")}}
    - -

    XSLTProcessor は、XSLT スタイルシート変換を XML 文書に適用して、新しい XML 文書を出力として生成します。 XSLT スタイルシートをロードし、<xsl:param> 引数の値を操作し、変換処理を文書に適用するメソッドを持っています。

    - -

    構文

    - -

    コンストラクターに引数はありません。

    - -
    new XSLTProcessor()
    - -

    メソッド

    - -
    -
    [Throws] void {{domxref("XSLTProcessor.importStylesheet")}}({{domxref("Node")}} styleSheet)
    -
    XSLT スタイルシートをインポートします。指定されたノードがドキュメントノードの場合は、完全な XSL Transform またはリテラルの結果要素の変換を渡すことができます。それ以外の場合は、<xsl:stylesheet> または <xsl:transform> 要素でなければなりません。
    -
    [Throws] {{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}({{domxref("Node")}} source, {{domxref("Document")}} owner)
    -
    {{domxref("XSLTProcessor.importStylesheet()")}} 関数を使用してインポートしたスタイルシートを適用して、ノードソースを変換します。結果として得られる文書フラグメントの文書オーナーは所有者ノードです。
    -
    [Throws] {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}({{domxref("Node")}} source)
    -
    -

    {{domxref("XSLTProcessor.importStylesheet()")}} 関数を使用してインポートされたスタイルシートを適用して、ノードソースを変換します。

    - -

    結果のオブジェクトはスタイルシートのメソッド出力に依存します。

    - - - - - - - - - - - - - - - - - - - - - - -
    メソッド出力結果のタイプ
    html{{domxref("HTMLDocument")}}
    xml{{domxref("XMLDocument")}}
    text{{domxref("XMLDocument")}} と単一のルート要素 <transformiix:result> に子としてテキストがついたもの
    -
    -
    - [Throws] void {{domxref("XSLTProcessor.setParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName, any value) -
    -
    インポートされた XSLT スタイルシートに引数を設定します。 (<xsl:param> の値を設定します)。namespaceURI の値が null の場合は、空の文字列と同じように扱われます。
    -
    - [Throws] any {{domxref("XSLTProcessor.getParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName) -
    -
    XSLT スタイルシートから引数の値を取得します。 namespaceURI の値が null の場合は、空の文字列と同じように扱われます。
    -
    - [Throws] void {{domxref("XSLTProcessor.removeParameter")}}({{jsxref("String")}} namespaceURI, {{jsxref("String")}} localName) -
    -
    パラメータが以前に設定されていた場合は削除します。これにより、XSLTProcessor はスタイルシートで指定されたパラメータの既定値を使用します。namespaceURI の値が null の場合は、空の文字列と同じように扱われます。
    -
    void {{domxref("XSLTProcessor.clearParameters()")}}
    -
    XSLTProcessor からすべての設定パラメータを削除します。 XSLTProcessor は XSLT スタイルシートで指定されているデフォルトを使用します。
    -
    void {{domxref("XSLTProcessor.reset()")}}
    -
    すべてのパラメータとスタイルシートを XSLTProcessor から削除します。
    -
    - -

    プロパティ

    - -

    ウェブで公開されないプロパティ

    - -

    次のプロパティは [ChromeOnly] で、ウェブコンテンツには公開されません。

    - -
    -
    - [ChromeOnly] attribute unsigned long {{domxref("XSLTProcessor.flags")}} -
    -
    -

    プロセッサの動作を調整するフラグ。{{domxref("XSLTProcessor.reset()")}} を呼び出してもリセットされません。既定値: 0

    - -

    取りうる値は次のとおりです。

    - - - - - - - - - - - - - - - - - - - - - -
    名前値エフェクト
    (None)0なし
    DISABLE_ALL_LOADS1外部ドキュメントの読み込みを無効にする (例: <xsl:import> および document())
    -
    -
    - -

    例

    - -
      -
    1. 基本的な例
      2. -
    2. 高度な例
      3. -
    3. 追加の例
      4. -
    - -

    仕様書

    - -

    どの仕様書にも含まれていません。これは Gecko に由来する独自のインターフェースです。

    - -

    Gecko IDL

    - -
      -
    • {{ Source("dom/webidl/XSLTProcessor.webidl", "XSLTProcessor.webidl") }}
      • -
    • {{ Source("dom/xslt/nsIXSLTProcessor.idl", "nsIXSLTProcessor.idl") }}
      • -
    - -

    ブラウザーの互換性

    - -

    {{Compat}}

    - -

    関連情報

    - - +{{Non-standard_header}}{{SeeCompatTable}}{{APIRef("XSLT")}} + +**`XSLTProcessor`** は、[XSLT](/ja/docs/Web/XSLT) スタイルシート変換を XML 文書に適用して、新しい XML 文書を出力として生成します。 XSLT スタイルシートをロードし、`` 引数の値を操作し、変換処理を文書に適用するメソッドを持っています。 + +## 構文 + +コンストラクターに引数はありません。 + +```js +new XSLTProcessor() +``` + +## メソッド + +- `[Throws] void `{{domxref("XSLTProcessor.importStylesheet")}}`(`{{domxref("Node")}}` styleSheet)` + - : XSLT スタイルシートをインポートします。指定されたノードがドキュメントノードの場合は、完全な XSL Transform または[リテラルの結果要素の変換](https://www.w3.org/TR/xslt#result-element-stylesheet)を渡すことができます。それ以外の場合は、`` または `` 要素でなければなりません。 +- `[Throws] `{{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}`(`{{domxref("Node")}}` source, `{{domxref("Document")}}` owner)` + - : {{domxref("XSLTProcessor.importStylesheet()")}} 関数を使用してインポートしたスタイルシートを適用して、ノードソースを変換します。結果として得られる文書フラグメントの文書オーナーは所有者ノードです。 +- [`[Throws]`](/ja/docs/Mozilla/WebIDL_bindings#Throws) {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}`(`{{domxref("Node")}}` source)` + + - : {{domxref("XSLTProcessor.importStylesheet()")}} 関数を使用してインポートされたスタイルシートを適用して、ノードソースを変換します。 + + 結果のオブジェクトはスタイルシートの[メソッド出力](https://www.w3.org/TR/xslt#output)に依存します。 + + | メソッド出力 | 結果のタイプ | + | ------------ | -------------------------------------------------------------------------------------------------------------- | + | `html` | {{domxref("HTMLDocument")}} | + | `xml` | {{domxref("XMLDocument")}} | + | `text` | {{domxref("XMLDocument")}} と単一のルート要素 `` に子としてテキストがついたもの | + +- `[Throws] void `{{domxref("XSLTProcessor.setParameter")}}`(`{{jsxref("String")}}` namespaceURI, `{{jsxref("String")}}` localName, any value)` + - : インポートされた XSLT スタイルシートに引数を設定します。 (`` の値を設定します)。`namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。 +- `[Throws] any `{{domxref("XSLTProcessor.getParameter")}}`(`{{jsxref("String")}}` namespaceURI, `{{jsxref("String")}}` localName)` + - : XSLT スタイルシートから引数の値を取得します。 `namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。 +- `[Throws] void `{{domxref("XSLTProcessor.removeParameter")}}`(`{{jsxref("String")}}` namespaceURI, `{{jsxref("String")}}` localName)` + - : パラメータが以前に設定されていた場合は削除します。これにより、`XSLTProcessor` はスタイルシートで指定されたパラメータの既定値を使用します。`namespaceURI` の値が null の場合は、空の文字列と同じように扱われます。 +- `void `{{domxref("XSLTProcessor.clearParameters()")}} + - : `XSLTProcessor` からすべての設定パラメータを削除します。 `XSLTProcessor` は XSLT スタイルシートで指定されているデフォルトを使用します。 +- `void `{{domxref("XSLTProcessor.reset()")}} + - : すべてのパラメータとスタイルシートを `XSLTProcessor` から削除します。 + +## プロパティ + +### ウェブで公開されないプロパティ + +次のプロパティは [`[ChromeOnly]`](/ja/docs/Mozilla/WebIDL_bindings#ChromeOnly) で、ウェブコンテンツには公開されません。 + +- `[ChromeOnly] attribute unsigned long `{{domxref("XSLTProcessor.flags")}} + + - : プロセッサの動作を調整するフラグ。{{domxref("XSLTProcessor.reset()")}} を呼び出してもリセットされません。既定値: `0` + + 取りうる値は次のとおりです。 + + | 名前 | 値 | エフェクト | + | ------------------- | --- | ------------------------------------------------------------------------------- | + | (None) | `0` | なし | + | `DISABLE_ALL_LOADS` | `1` | 外部ドキュメントの読み込みを無効にする (例: `` および `document()`) | + +## 例 + +1. [基本的な例](/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Basic_Example) +2. [高度な例](/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example) +3. [追加の例](/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/JavaScript_XSLT_Bindings) + +## 仕様書 + +*どの仕様書にも含まれていません。*これは Gecko に由来する独自のインターフェースです。 + +## Gecko IDL + +- `{{ Source("dom/webidl/XSLTProcessor.webidl", "XSLTProcessor.webidl") }}` +- `{{ Source("dom/xslt/nsIXSLTProcessor.idl", "nsIXSLTProcessor.idl") }}` + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Mozilla JavaScript インターフェイスを使用した XSL 変換](/ja/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations) diff --git a/files/ja/web/api/xsltprocessor/resources/index.md b/files/ja/web/api/xsltprocessor/resources/index.md index 60f9a0a2f01504..2732d8a019e129 100644 --- a/files/ja/web/api/xsltprocessor/resources/index.md +++ b/files/ja/web/api/xsltprocessor/resources/index.md @@ -3,15 +3,11 @@ title: Resources slug: Web/API/XSLTProcessor/Resources translation_of: Web/API/XSLTProcessor/Resources --- -

    +## 参考 -

    参考

    - - +- [Transforming XML: Netscape and XSLT](http://devedge.netscape.com/library/manuals/2001/xslt/1.0/) +- [What kind of language is XSLT?](http://www-106.ibm.com/developerworks/library/x-xslt/) ([IBM developerWorks](http://www-106.ibm.com/developerworks/)) +- [XSLT Tutorial](http://www.zvon.org/xxl/XSLTutorial/Books/Book1/index.html) ([zvon.org](http://www.zvon.org/)) +- [XPath Tutorial](http://www.zvon.org/xxl/XPathTutorial/General/examples.html) ([zvon.org](http://www.zvon.org/)) +- [Using the Mozilla JavaScript interface to do XSL Transformations](http://www.mozilla.org/projects/xslt/js-interface.html) ([mozilla.org](http://www.mozilla.org/)) +- [Mozilla.org の XSLT プロジェクトページ](http://www.mozilla.org/projects/xslt/) (よく起こる問題についてのセクションを含む)