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()")}}.
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
-
-
-
-
-
Specification
-
Status
-
Comment
-
-
-
-
-
{{SpecName('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}}
-
{{Spec2('Media Capture DOM Elements')}}
-
Initial definition
-
-
-
-
-
Browser compatibility
-
-
-
-
-
{{Compat("api.CanvasCaptureMediaStreamTrack")}}
-
-
-
See also
-
-
-
{{domxref("HTMLCanvasElement.captureStream()")}} to begin capturing frames from a canvas
-
diff --git a/files/ja/web/api/canvascapturemediastreamtrack/index.md b/files/ja/web/api/canvascapturemediastreamtrack/index.md
new file mode 100644
index 00000000000000..a725a4531bbe4a
--- /dev/null
+++ b/files/ja/web/api/canvascapturemediastreamtrack/index.md
@@ -0,0 +1,49 @@
+---
+title: CanvasCaptureMediaStreamTrack
+slug: Web/API/CanvasCaptureMediaStreamTrack
+tags:
+ - CanvasCaptureMediaStreamTrack
+ - Experimental
+ - Frame Capture
+ - Interface
+ - Media
+ - Media Capture
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+ - Web
+translation_of: Web/API/CanvasCaptureMediaStreamTrack
+---
+{{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()")}}.
+
+Part of the [Media Capture and Streams API](/ja/docs/Web/API/Media_Streams_API).
+
+## Properties
+
+_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.
+
+## Methods
+
+_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()")}}.
+
+## Specifications
+
+| Specification | Status | Comment |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------------------ |
+| {{SpecName('Media Capture DOM Elements', '#the-canvascapturemediastreamtrack', 'CanvasCaptureMediaStreamTrack')}} | {{Spec2('Media Capture DOM Elements')}} | Initial definition |
+
+## Browser compatibility
+
+{{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.html b/files/ja/web/api/canvascapturemediastreamtrack/requestframe/index.html
deleted file mode 100644
index 2499b39efef818..00000000000000
--- a/files/ja/web/api/canvascapturemediastreamtrack/requestframe/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: CanvasCaptureMediaStreamTrack.requestFrame()
-slug: Web/API/CanvasCaptureMediaStreamTrack/requestFrame
-tags:
- - Canvas
- - CanvasCaptureMediaStream
- - DOM
- - Experimental
- - Frame Capture
- - Media
- - Method
- - Reference
- - requestFrame
-translation_of: Web/API/CanvasCaptureMediaStreamTrack/requestFrame
----
-
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.
-
-
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.
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:
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.
-
-
-
This data, particularly the duration timestamp, can be used to help identify performance problems.
-
-
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.
-
-
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
-
-
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
-
-
{{experimental_inline}}As shown in the {{domxref("PerformanceFrameTiming")}} interface's Browser Compatibility table, this interface has no implementations.
diff --git a/files/ja/web/api/frame_timing_api/index.md b/files/ja/web/api/frame_timing_api/index.md
new file mode 100644
index 00000000000000..e26021700c3002
--- /dev/null
+++ b/files/ja/web/api/frame_timing_api/index.md
@@ -0,0 +1,52 @@
+---
+title: Frame Timing API
+slug: Web/API/Frame_Timing_API
+tags:
+ - Guide
+ - NeedsTranslation
+ - Overview
+ - TopicStub
+ - Web Performance
+translation_of: Web/API/Frame_Timing_API
+---
+{{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](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.
+
+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`
+
+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](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.
+
+## 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.
+
+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
+
+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
+
+{{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
+
+- [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.html b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html
deleted file mode 100644
index ae5be9ee247d20..00000000000000
--- a/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.html
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: フレームタイミング API の使用
-slug: Web/API/Frame_Timing_API/Using_the_Frame_Timing_API
-tags:
- - Web パフォーマンス
- - ガイド
-translation_of: Web/API/Frame_Timing_API/Using_the_Frame_Timing_API
----
-
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.
-
-
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.
-
-
フレームオブザーバー
-
-
{{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.
-
-
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++) {
- console.log("OBS #1: [" + i + "] = " + perfEntries[i].name);
- }
- });
- // Only observe 'frame' events
- observe_frame.observe({entryTypes: ['frame']});
-}
-
-function init () {
- create_frame_observer();
-
- var obs = new PerformanceObserver(frame_observer_2);
- obs.observe({entryTypes: ['frame']});
-}
-
-function frame_observer_2(list) {
- // Log the frame entries
- var perfEntries = list.getEntriesByType("frame");
- 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.
-
-
通知を登録する
-
-
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) {
- // 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.
-
-
var observe_all = new PerformanceObserver(function(list) {
- var perfEntries = list.getEntries();
- 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;
- case "measure": process_measure(perfEntries[i]); break;
- case "resource": process_resource(perfEntries[i]); break;
- default: console.log("Unexpected performance entry type: " + perfEntries[i].entryType);
- }
- }
- });
- // 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:
Returns a list of explicitly observed {{domxref("PerformanceEntry")}} objects based on the list of entry types given to {{domxref("PerformanceObserver.observe()")}}.
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.
-
-
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) {
- 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.
-
-
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 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).
-
-
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.
-
-
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.
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
new file mode 100644
index 00000000000000..e8488e3cf47b1d
--- /dev/null
+++ b/files/ja/web/api/frame_timing_api/using_the_frame_timing_api/index.md
@@ -0,0 +1,137 @@
+---
+title: フレームタイミング API の使用
+slug: Web/API/Frame_Timing_API/Using_the_Frame_Timing_API
+tags:
+ - Web パフォーマンス
+ - ガイド
+translation_of: Web/API/Frame_Timing_API/Using_the_Frame_Timing_API
+---
+{{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](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.
+
+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.
+
+## オブザーバーを作成する
+
+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.
+
+```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++) {
+ console.log("OBS #1: [" + i + "] = " + perfEntries[i].name);
+ }
+ });
+ // Only observe 'frame' events
+ observe_frame.observe({entryTypes: ['frame']});
+}
+
+function init () {
+ create_frame_observer();
+
+ var obs = new PerformanceObserver(frame_observer_2);
+ obs.observe({entryTypes: ['frame']});
+}
+
+function frame_observer_2(list) {
+ // Log the frame entries
+ var perfEntries = list.getEntriesByType("frame");
+ for (var i=0; i < perfEntries.length; i++) {
+ console.log("OBS #2: [" + i + "] = " + perfEntries[i].name);
+ }
+}
+
+
+```
+
+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.
+
+```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.
+
+```js
+ var observe_all = new PerformanceObserver(function(list) {
+ var perfEntries = list.getEntries();
+ 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;
+ case "measure": process_measure(perfEntries[i]); break;
+ case "resource": process_resource(perfEntries[i]); break;
+ default: console.log("Unexpected performance entry type: " + perfEntries[i].entryType);
+ }
+ }
+ });
+ // 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:
+
+- {{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.
+
+```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) {
+ 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.
+
+### 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](/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](/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](/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
+
+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.html b/files/ja/web/api/history_api/example/index.md
similarity index 60%
rename from files/ja/web/api/history_api/example/index.html
rename to files/ja/web/api/history_api/example/index.md
index c7057171b45fd9..0da93a5d85c53d 100644
--- a/files/ja/web/api/history_api/example/index.html
+++ b/files/ja/web/api/history_api/example/index.md
@@ -3,151 +3,149 @@
slug: Web/API/History_API/Example
translation_of: Web/API/History_API/Example
---
-
+- {{ domxref("window.history") }}
+- {{ domxref("window.onpopstate") }}
diff --git a/files/ja/web/api/history_api/index.html b/files/ja/web/api/history_api/index.html
deleted file mode 100644
index f9a577390c3b16..00000000000000
--- a/files/ja/web/api/history_api/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: History API
-slug: Web/API/History_API
-tags:
- - API
- - Advanced
- - DOM
- - HTML5
- - History
- - 履歴
-translation_of: Web/API/History_API
----
-
{{DefaultAPISidebar("History API")}}
-
-
DOM の {{DOMxRef("Window")}} オブジェクトは、ブラウザーのセッション履歴 (WebExtensions history と混同しないように) へのアクセスを {{DOMxRef("Window.history","history")}} オブジェクトを介して提供しています。このオブジェクトは、ユーザーの履歴の中を前のページや後のページへ移動したり、履歴スタックの中を操作したりするのに便利なメソッドやプロパティが提供されています。
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.
-
-
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")}}).
-
-
The interface {{domxref("IDBOpenDBRequest")}} is derived from IDBRequest.
-
-
{{AvailableInWorkers}}
-
-
{{InheritanceDiagram}}
-
-
Properties
-
-
Also inherits properties from {{domxref("EventTarget")}}.
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.
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.
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
-
-
No methods, but inherits methods from {{domxref("EventTarget")}}.
-
-
Events
-
-
Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.
Fired when an IDBRequest succeeds.
- Also available via the onsuccess property.
-
-
-
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.)
-
-
var db;
-
-// Let us open our database
-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>';
-};
-
-DBOpenRequest.onsuccess = function(event) {
- note.innerHTML += '<li>Database initialised.</li>';
-
- // store the result of opening the database.
- db = DBOpenRequest.result;
-};
diff --git a/files/ja/web/api/idbrequest/index.md b/files/ja/web/api/idbrequest/index.md
new file mode 100644
index 00000000000000..695dd7adc2efa2
--- /dev/null
+++ b/files/ja/web/api/idbrequest/index.md
@@ -0,0 +1,105 @@
+---
+title: IDBRequest
+slug: Web/API/IDBRequest
+tags:
+ - API
+ - Database
+ - IDBRequest
+ - IndexedDB
+ - Interface
+ - NeedsTranslation
+ - Reference
+ - Storage
+ - TopicStub
+translation_of: Web/API/IDBRequest
+---
+{{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 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.
+
+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`.
+
+{{AvailableInWorkers}}
+
+{{InheritanceDiagram}}
+
+## Properties
+
+_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).
+
+## Methods
+
+_No methods, but inherits methods from {{domxref("EventTarget")}}._
+
+## Events
+
+Listen to these events using `addEventListener()` or by assigning an event listener to the `oneventname` property of this interface.
+
+- [`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
+
+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/).)
+
+```js
+var db;
+
+// Let us open our database
+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 += '
{{DefaultAPISidebar("Media Capture and Streams")}}
-
-
Media Capture and Streams APIは一般的にMedia Stream APIやStream APIと呼ばれるWebRTCに関連したAPIです。このAPIでは、オーディオやビデオデータのストリーム、これらを操作するためのメソッド、データタイプに関連づけられた制約、データを非同期に利用する際の成功と失敗のコールバック、これらの処理を行なっている最中に発生するイベントなどをサポートします。
-
-
基本概念
-
-
このAPIは、オーディオまたはビデオに関連づけられたデータの流れを表現するための{{domxref("MediaStream")}}オブジェクトの操作を基本としています。例としてGet the video(英語)をご覧ください。
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.
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")}}.
-
-
-
-
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:
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:
-
-
-
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".
-
-
-
If the contextType doesn't match a possible drawing context, null is returned.
-
-
例
-
-
-
-
var offscreen = new OffscreenCanvas(256, 256);
-var gl = offscreen.getContext("webgl");
-
-gl; // WebGLRenderingContext
-gl.canvas; // OffscreenCanvas
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/getcontext/index.md b/files/ja/web/api/offscreencanvas/getcontext/index.md
new file mode 100644
index 00000000000000..d5f704936fa073
--- /dev/null
+++ b/files/ja/web/api/offscreencanvas/getcontext/index.md
@@ -0,0 +1,92 @@
+---
+title: OffscreenCanvas.getContext()
+slug: Web/API/OffscreenCanvas/getContext
+translation_of: Web/API/OffscreenCanvas/getContext
+---
+{{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.
+
+> **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);
+```
+
+### 引数
+
+- `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](/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](https://www.khronos.org/) certifies WebGL implementations under certain [conformance rules](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt).
+
+- `contextAttributes`
+
+ - : You can use several context attributes when creating your rendering context, for example:
+
+ ```js
+ offscreen.getContext("webgl",
+ { antialias: false,
+ depth: false });
+ ```
+
+ 2d context attributes:
+
+ - **`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:
+
+ - **`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"`.
+
+If the `contextType` doesn't match a possible drawing context, `null` is returned.
+
+## **例**
+
+```js
+var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext("webgl");
+
+gl; // WebGLRenderingContext
+gl.canvas; // OffscreenCanvas
+```
+
+## **仕様書**
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "#dom-offscreencanvas-getcontext", "OffscreenCanvas.getContext()")}} | {{Spec2('HTML WHATWG')}} | |
+
+## **ブラウザの互換性**
+
+{{Compat("api.OffscreenCanvas.getContext")}}
+
+## 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.html b/files/ja/web/api/offscreencanvas/index.html
deleted file mode 100644
index 5c1c5f9f55957e..00000000000000
--- a/files/ja/web/api/offscreencanvas/index.html
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: OffscreenCanvas
-slug: Web/API/OffscreenCanvas
-tags:
- - API
- - Canvas
- - Experimental
- - Interface
- - NeedsTranslation
- - Reference
- - TopicStub
-browser-compat: api.OffscreenCanvas
-translation_of: Web/API/OffscreenCanvas
----
-
{{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 contexts.
Creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of the OffscreenCanvas.
-
-
-
Examples
-
-
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.
-
-
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
the following code will provide the rendering using an OffscreenCanvas as described above.
-
-
var one = document.getElementById("one").getContext("bitmaprenderer");
-var two = document.getElementById("two").getContext("bitmaprenderer");
-
-var offscreen = new OffscreenCanvas(256, 256);
-var gl = offscreen.getContext('webgl');
-
-// ... some drawing for the first canvas using the gl context ...
-
-// Commit rendering to the first canvas
-var bitmapOne = offscreen.transferToImageBitmap();
-one.transferFromImageBitmap(bitmapOne);
-
-// ... some more drawing for the second canvas using the gl context ...
-
-// Commit rendering to the second canvas
-var bitmapTwo = offscreen.transferToImageBitmap();
-two.transferFromImageBitmap(bitmapTwo);
-
-
-
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.
-
-
main.js (main thread code):
-
-
var htmlCanvas = document.getElementById("canvas");
-var offscreen = htmlCanvas.transferControlToOffscreen();
-
-var worker = new Worker("offscreencanvas.js");
-worker.postMessage({canvas: offscreen}, [offscreen]);
-
-
-
offscreencanvas.js (worker code):
-
-
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
-
-
onmessage = function(evt) {
- const canvas = evt.data.canvas;
- const gl = canvas.getContext("webgl");
-
- function render(time) {
- // ... some drawing using the gl context ...
- requestAnimationFrame(render);
- }
- requestAnimationFrame(render);
-};
diff --git a/files/ja/web/api/offscreencanvas/index.md b/files/ja/web/api/offscreencanvas/index.md
new file mode 100644
index 00000000000000..718bc495fc403d
--- /dev/null
+++ b/files/ja/web/api/offscreencanvas/index.md
@@ -0,0 +1,138 @@
+---
+title: OffscreenCanvas
+slug: Web/API/OffscreenCanvas
+tags:
+ - API
+ - Canvas
+ - Experimental
+ - Interface
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+translation_of: Web/API/OffscreenCanvas
+browser-compat: api.OffscreenCanvas
+---
+{{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
+
+- {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
+ - : `OffscreenCanvas` constructor. Creates a new `OffscreenCanvas` object.
+
+## Properties
+
+- {{domxref("OffscreenCanvas.height")}}
+ - : The height of the offscreen canvas.
+- {{domxref("OffscreenCanvas.width")}}
+ - : The width of 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.transferToImageBitmap()")}}
+ - : Creates an {{domxref("ImageBitmap")}} object from the most recently rendered image of the `OffscreenCanvas`.
+
+## Examples
+
+### 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.
+
+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
+
+```html
+
+
+```
+
+the following code will provide the rendering using an `OffscreenCanvas` as described above.
+
+```js
+var one = document.getElementById("one").getContext("bitmaprenderer");
+var two = document.getElementById("two").getContext("bitmaprenderer");
+
+var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+
+// ... some drawing for the first canvas using the gl context ...
+
+// Commit rendering to the first canvas
+var bitmapOne = offscreen.transferToImageBitmap();
+one.transferFromImageBitmap(bitmapOne);
+
+// ... some more drawing for the second canvas using the gl context ...
+
+// Commit rendering to the second canvas
+var bitmapTwo = offscreen.transferToImageBitmap();
+two.transferFromImageBitmap(bitmapTwo);
+```
+
+### 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](/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):
+
+```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):
+
+```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
+
+```js
+onmessage = function(evt) {
+ const canvas = evt.data.canvas;
+ const gl = canvas.getContext("webgl");
+
+ function render(time) {
+ // ... some drawing using the gl context ...
+ requestAnimationFrame(render);
+ }
+ requestAnimationFrame(render);
+};
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat("api.OffscreenCanvas")}}
+
+## 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.html b/files/ja/web/api/path2d/addpath/index.html
deleted file mode 100644
index c41310eb8b6a3d..00000000000000
--- a/files/ja/web/api/path2d/addpath/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: Path2D.addPath()
-slug: Web/API/Path2D/addPath
-translation_of: Web/API/Path2D/addPath
----
-
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.
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.
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.
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).
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).
diff --git a/files/ja/web/api/path2d/index.md b/files/ja/web/api/path2d/index.md
new file mode 100644
index 00000000000000..b0493bd3477a65
--- /dev/null
+++ b/files/ja/web/api/path2d/index.md
@@ -0,0 +1,58 @@
+---
+title: Path2D
+slug: Web/API/Path2D
+tags:
+ - API
+ - Canvas
+ - Interface
+ - NeedsTranslation
+ - Path2D
+ - Reference
+ - TopicStub
+translation_of: Web/API/Path2D
+---
+{{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](/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
+
+- {{domxref("Path2D.Path2D", "Path2D()")}}
+ - : `Path2D` constructor. Creates a new `Path2D` object.
+
+## 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_.
+
+## Specifications
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-path2d", "Path2D")}} | {{Spec2('HTML WHATWG')}} | |
+
+## Browser compatibility
+
+{{Compat("api.Path2D")}}
+
+## See also
+
+- {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/ja/web/api/path2d/path2d/index.html b/files/ja/web/api/path2d/path2d/index.html
deleted file mode 100644
index 62dfba9d18cba6..00000000000000
--- a/files/ja/web/api/path2d/path2d/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Path2D()
-slug: Web/API/Path2D/Path2D
-tags:
- - API
- - Canvas
- - Constructor
- - Drawing
- - Graphics
- - Path2D
- - Paths
- - Reference
-translation_of: Web/API/Path2D/Path2D
----
-
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);
-
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).
Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.name","name")}} and optionally the {{domxref("PerformanceEntry.entryType","performance type")}}.
Returns the recorded {{domxref("PerformanceEntry","performance entries")}} based on the specified {{domxref("PerformanceEntry.entryType","performance type")}}.
-
-
-
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")}}):
-
-
-
{{domxref("PerformanceEntry.name","name")}}
-
The name of the performance entry when the metric was created.
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")}}.
-
-
Performance オブザーバー
-
-
{{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.
-
-
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.
-
-
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.
-
-
-
Performance interface extensions: As shown in the {{domxref("Performance")}} interface's 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 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 table, this interface has no shipping implementations.
-
-
-
To test your browser's support for these interfaces, run the perf-api-support application.
diff --git a/files/ja/web/api/performance_timeline/index.md b/files/ja/web/api/performance_timeline/index.md
new file mode 100644
index 00000000000000..34e686cc28b031
--- /dev/null
+++ b/files/ja/web/api/performance_timeline/index.md
@@ -0,0 +1,66 @@
+---
+title: パフォーマンスタイムライン
+slug: Web/API/Performance_Timeline
+tags:
+ - Web パフォーマンス
+ - ガイド
+ - 概要
+translation_of: Web/API/Performance_Timeline
+---
+{{DefaultAPISidebar("Performance Timeline API")}}
+
+**パフォーマンスタイムライン** API は、{{domxref("Performance")}} インターフェイスへの拡張を定義して、アプリケーション内のクライアントサイドの待ち時間の測定をサポートします。 拡張機能は、特定のフィルタ基準に基づいて{{domxref("PerformanceEntry","performance entry metrics", '', 'true')}} を取得するためのインターフェイスを提供します。この規格には、特定のパフォーマンスイベントがブラウザのパフォーマンスタイムラインに追加されたときに通知される _[performance observer](#performance_observers)_ コールバックをアプリケーションで定義できるインターフェイスも含まれます。
+
+このドキュメントは規格のインターフェイスの概要を提供します。インターフェイスの詳細については、リファレンスページおよび[パフォーマンスタイムラインの使用](/ja/Web/API/Performance_Timeline/Using_Performance_Timeline)を参照してください。
+
+## Performance 拡張
+
+パフォーマンスタイムライン 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")}}.
+
+## 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")}}):
+
+- {{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")}}.
+
+## Performance オブザーバー
+
+{{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.
+
+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.
+
+> **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.
+
+- 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`](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.html b/files/ja/web/api/performance_timeline/using_performance_timeline/index.html
deleted file mode 100644
index 4885936054b6bb..00000000000000
--- a/files/ja/web/api/performance_timeline/using_performance_timeline/index.html
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: パフォーマンスタイムラインの使用
-slug: Web/API/Performance_Timeline/Using_Performance_Timeline
-tags:
- - Web パフォーマンス
- - ガイド
-translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline
----
-
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) {
- var o = document.getElementsByTagName("output")[0];
- o.innerHTML += s + " <br>";
-}
-function do_work (n) {
- for (var i=0 ; i < n; i++) {
- var m = Math.random();
- }
-}
-function print_perf_entry(pe) {
- log("..name: " + pe.name +
- "; entryType: " + pe.entryType +
- "; startTime: " + pe.startTime +
- "; duration: " + pe.duration);
-}
-function print_PerformanceEntries() {
- if (performance.mark === undefined) {
- log("... performance.mark Not supported");
- return;
- }
-
- // Create some performance entries via the mark() and measure() methods
- performance.mark("Begin");
- do_work(50000);
- performance.mark("End");
- do_work(50000);
- performance.measure("Measure1", "Begin", "End");
-
- // Use getEntries() to iterate all entries
- var p = performance.getEntries();
- 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++) {
- 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++) {
- 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++) {
- log ("Begin and Mark [" + i + "]");
- print_perf_entry(p[i]);
- }
-}
-
-
-
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.
-
-
function print_PerformanceEntry(ev) {
- var properties = ["name", "entryType", "startTime", "duration"];
-
- // Create a few performance entries
- performance.mark("Start");
- do_work(50000);
- performance.mark("Stop");
- performance.measure("measure-1");
-
- var p = performance.getEntries();
- for (var i=0; i < p.length; i++) {
- log("PerfEntry[" + i + "]");
- for (var j=0; j < properties.length; j++) {
- // check each property in window.performance
- var supported = properties[j] in p[i];
- if (supported) {
- var pe = p[i];
- log("... " + properties[j] + " = " + pe[properties[j]]);
- } else {
- log("... " + properties[j] + " = Not supported");
- }
- }
- }
-}
-
-
-
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() {
-
- // Create a few performance entries
- performance.mark("mark-1");
- performance.mark("mark-2");
- performance.measure("meas-1", "mark-1", "mark-2");
-
- var peList = performance.getEntries();
- var pe = peList[0];
-
- if (pe.toJSON === undefined) {
- log ("PerformanceEntry.toJSON() is NOT supported");
- return;
- }
-
- // Print the PerformanceEntry object
- var json = pe.toJSON();
- var s = JSON.stringify(json);
- log("PerformanceEntry.toJSON = " + s);
-}
-
-
-
Performance オブザーバー
-
-
{{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 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() {
- // 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++) {
- 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++) {
- print_perf_entry(perfEntries[i]);
- }
-
- // Print entries with type "mark"
- perfEntries = list.getEntriesByType("mark");
- for (var i=0; i < perfEntries.length; i++) {
- print_perf_entry(perfEntries[i]);
- }
- });
- // subscribe to all performance event types
- observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
-
- // Create observer for just the "mark" event type
- 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++) {
- print_perf_entry(perfEntries[i]);
- }
- });
- // subscribe to only the 'mark' event
- observe_mark.observe({entryTypes: ['mark']});
-}
-function print_perf_entry(pe) {
- log("name: " + pe.name +
- "; entryType: " + pe.entryType +
- "; 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 interfaces described in this document are defined in the Performance Timeline standard which has two levels:
-
-
-
Performance Timeline Level 2; Editors Draft; Work In Progress. This version introduces performance observers (and the {{domxref("PerformanceObserver")}} and {{domxref("PerformanceObserverEntryList")}} interfaces).
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
new file mode 100644
index 00000000000000..01746f51bb047f
--- /dev/null
+++ b/files/ja/web/api/performance_timeline/using_performance_timeline/index.md
@@ -0,0 +1,198 @@
+---
+title: パフォーマンスタイムラインの使用
+slug: Web/API/Performance_Timeline/Using_Performance_Timeline
+tags:
+ - Web パフォーマンス
+ - ガイド
+translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline
+---
+{{DefaultAPISidebar("Performance Timeline API")}}
+
+**[パフォーマンスタイムライン](https://w3c.github.io/performance-timeline/)** 標準は、アプリケーション内でクライアント側の待ち時間の測定をサポートするための {{domxref("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()")}}.
+
+```js
+function log(s) {
+ var o = document.getElementsByTagName("output")[0];
+ o.innerHTML += s + " ";
+}
+function do_work (n) {
+ for (var i=0 ; i < n; i++) {
+ var m = Math.random();
+ }
+}
+function print_perf_entry(pe) {
+ log("..name: " + pe.name +
+ "; entryType: " + pe.entryType +
+ "; startTime: " + pe.startTime +
+ "; duration: " + pe.duration);
+}
+function print_PerformanceEntries() {
+ if (performance.mark === undefined) {
+ log("... performance.mark Not supported");
+ return;
+ }
+
+ // Create some performance entries via the mark() and measure() methods
+ performance.mark("Begin");
+ do_work(50000);
+ performance.mark("End");
+ do_work(50000);
+ performance.measure("Measure1", "Begin", "End");
+
+ // Use getEntries() to iterate all entries
+ var p = performance.getEntries();
+ 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++) {
+ 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++) {
+ 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++) {
+ log ("Begin and Mark [" + i + "]");
+ print_perf_entry(p[i]);
+ }
+}
+```
+
+## 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.
+
+```js
+function print_PerformanceEntry(ev) {
+ var properties = ["name", "entryType", "startTime", "duration"];
+
+ // Create a few performance entries
+ performance.mark("Start");
+ do_work(50000);
+ performance.mark("Stop");
+ performance.measure("measure-1");
+
+ var p = performance.getEntries();
+ for (var i=0; i < p.length; i++) {
+ log("PerfEntry[" + i + "]");
+ for (var j=0; j < properties.length; j++) {
+ // check each property in window.performance
+ var supported = properties[j] in p[i];
+ if (supported) {
+ var pe = p[i];
+ log("... " + properties[j] + " = " + pe[properties[j]]);
+ } else {
+ log("... " + properties[j] + " = Not supported");
+ }
+ }
+ }
+}
+```
+
+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.
+
+```js
+function PerfEntry_toJSON() {
+
+ // Create a few performance entries
+ performance.mark("mark-1");
+ performance.mark("mark-2");
+ performance.measure("meas-1", "mark-1", "mark-2");
+
+ var peList = performance.getEntries();
+ var pe = peList[0];
+
+ if (pe.toJSON === undefined) {
+ log ("PerformanceEntry.toJSON() is NOT supported");
+ return;
+ }
+
+ // Print the PerformanceEntry object
+ var json = pe.toJSON();
+ var s = JSON.stringify(json);
+ log("PerformanceEntry.toJSON = " + s);
+}
+```
+
+## Performance オブザーバー
+
+{{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 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.
+
+```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++) {
+ 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++) {
+ print_perf_entry(perfEntries[i]);
+ }
+
+ // Print entries with type "mark"
+ perfEntries = list.getEntriesByType("mark");
+ for (var i=0; i < perfEntries.length; i++) {
+ print_perf_entry(perfEntries[i]);
+ }
+ });
+ // subscribe to all performance event types
+ observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'resource', 'server']});
+
+ // Create observer for just the "mark" event type
+ 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++) {
+ print_perf_entry(perfEntries[i]);
+ }
+ });
+ // subscribe to only the 'mark' event
+ observe_mark.observe({entryTypes: ['mark']});
+}
+function print_perf_entry(pe) {
+ log("name: " + pe.name +
+ "; entryType: " + pe.entryType +
+ "; 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 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.html b/files/ja/web/api/permissions_api/index.html
deleted file mode 100644
index aa3b289f9df58f..00000000000000
--- a/files/ja/web/api/permissions_api/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Permissions API
-slug: Web/API/Permissions_API
-tags:
- - API
- - Overview
- - Permissions
- - Reference
-translation_of: Web/API/Permissions_API
----
-
{{DefaultAPISidebar("Permissions API")}}
-
-
-
Permissions API は、現在のコンテキストに起因する API のパーミッションの状態を照会するための一貫したプログラム方法を提供します。 例えば、Permissions API を使用して、特定の API にアクセスするためのパーミッションが付与（granted）または拒否（denied）されているかどうかを確認できます。
-
-
-
概念と使い方
-
-
歴史的に異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はできません（ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。 Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。
-
-
permissions プロパティが {{domxref("Navigator")}} オブジェクトで利用可能になり、標準の閲覧コンテキストとワーカーコンテキスト（{{domxref("WorkerNavigator")}} — したがって、ワーカー内でパーミッションの確認が可能）の両方で、Permissions API 機能へのアクセスを提供する {{domxref("Permissions")}} オブジェクトを返します。
-
-
このオブジェクトを取得した後は、{{domxref("Permissions.query()")}} メソッドを使用して特定の API の {{domxref("PermissionStatus")}} で解決される Promise を返すなど、パーミッション関連のタスクを実行できます。
-
-
Permissions API を使用してすべての API のパーミッションの状態を照会できるわけではありません。 Permissions に対応している注目すべき API は次のとおりです。
歴史的には、異なる API は独自のパーミッションを一貫性のない方法で扱います。 例えば、Notifications API はパーミッションの状態の明示的なチェックとパーミッションの要求を許可しますが、Geolocation API はそうではありません（以下に示すように、ユーザーが最初のパーミッションの要求を拒否すると問題を引き起こします）。
-
-
Permissions API は、パーミッションに関する限り、開発者がより良いユーザーエクスペリエンスを実装できるようにするためのツールを提供します。 例えば、特定の API を使用するためのパーミッションが付与されているか拒否されているかを照会し、API を使用するためのパーミッションを具体的に要求することができます。
このドキュメントでは、Resource Timing インターフェイスの概要を説明します。例を含むインターフェイスの詳細については、各インターフェイスのリファレンスページ、リソースタイミング API の使用、および あわせて参照 セクションの参照を参照してください。リソースタイミング処理モデルのグラフィック表示については、リソースタイミングフェーズの図を参照してください。
-
-
The PerformanceResourceTiming interface extends the {{domxref("PerformanceEntry")}} for {{domxref("PerformanceEntry","performance entries", "", 1)}} which have an {{domxref("PerformanceEntry.entryType","entryType")}} of "resource".
-
-
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.
-
-
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.
-
-
-
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 {{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.
-
-
リソースサイズ
-
-
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.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).
-
-
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 {{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 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 application.
diff --git a/files/ja/web/api/resource_timing_api/index.md b/files/ja/web/api/resource_timing_api/index.md
new file mode 100644
index 00000000000000..d31d513119de5a
--- /dev/null
+++ b/files/ja/web/api/resource_timing_api/index.md
@@ -0,0 +1,66 @@
+---
+title: Resource Timing API
+slug: Web/API/Resource_Timing_API
+translation_of: Web/API/Resource_Timing_API
+---
+{{DefaultAPISidebar("Resource Timing API")}}
+
+**`Resource Timing`** インターフェイスは、アプリケーションの*リソース*のロードに関する詳細なネットワークタイミングデータの取得と分析を可能にします。アプリケーションはタイミングメトリックを使用して、たとえば、{{domxref("XMLHttpRequest")}}、{{SVGElement("SVG","SVG element")}}、画像、スクリプトなど特定のリソースをロードするのにかかる時間を決定できます。
+
+インターフェイスのプロパティは、リダイレクトの開始時間と終了時間、DNS ルックアップの開始時間と終了時間、リクエストの開始時間、レスポンスの開始時間と終了時間などネットワークイベントに対して {{domxref("DOMHighResTimeStamp","high-resolution timestamps", "", 1)}} のリソースロードタイムラインを作成します。このインタフェースには、取得したリソースのサイズや取得を開始したリソースの種類に関するデータを提供するその他のプロパティも含まれています。
+
+このドキュメントでは、`Resource Timing` インターフェイスの概要を説明します。例を含むインターフェイスの詳細については、各インターフェイスのリファレンスページ、[リソースタイミング API の使用](/ja/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API)、および [あわせて参照](#あわせて参照) セクションの参照を参照してください。リソースタイミング処理モデルのグラフィック表示については、[リソースタイミングフェーズ](https://w3c.github.io/resource-timing/#process)の図を参照してください。
+
+> **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 タイムスタンプ
+
+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.
+
+## リソースロードタイムスタンプ
+
+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.
+
+> **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 `{{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._
+
+## リソースサイズ
+
+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.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).
+
+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 {{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.
+
+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.
+
+## あわせて参照
+
+- [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.html b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html
deleted file mode 100644
index 0b2127ec1eb985..00000000000000
--- a/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.html
+++ /dev/null
@@ -1,214 +0,0 @@
----
-title: Using the Resource Timing API
-slug: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
-tags:
- - API
- - Web
- - Web パフォーマンス
- - Web 開発
- - タイミング
- - パフォーマンス
- - リソースタイミング
- - リソースタイミング API
-translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
----
-
{{DefaultAPISidebar("Resource Timing API")}}
-
-
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.
-
-
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.
-
-
A live version of the examples is available on Github, as is the source code. Pull requests and bug reports are welcome.
-
-
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.
-
-
- 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.
-
-
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.
-
-
function calculate_load_times() {
- // Check performance support
- if (performance === undefined) {
- console.log("= Calculate Load Times: performance NOT supported");
- return;
- }
-
- // Get a list of "resource" performance entries
- var resources = performance.getEntriesByType("resource");
- 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++) {
- console.log("== Resource[" + i + "] - " + resources[i].name);
- // Redirect time
- var t = resources[i].redirectEnd - resources[i].redirectStart;
- console.log("... Redirect time = " + t);
-
- // DNS time
- t = resources[i].domainLookupEnd - resources[i].domainLookupStart;
- console.log("... DNS lookup time = " + t);
-
- // TCP handshake time
- t = resources[i].connectEnd - resources[i].connectStart;
- console.log("... TCP time = " + t);
-
- // Secure connection time
- t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
- console.log("... Secure connection time = " + t);
-
- // Response time
- t = resources[i].responseEnd - resources[i].responseStart;
- console.log("... Response time = " + t);
-
- // Fetch until response end
- 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";
- 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";
- console.log("... Start until response end time = " + t);
- }
-}
-
function clear_resource_timings() {
- if (performance === undefined) {
- console.log("= performance.clearResourceTimings(): peformance NOT supported");
- return;
- }
- // Check if Performance.clearResourceTiming() is supported
- console.log ("= Print performance.clearResourceTimings()");
- var supported = typeof performance.clearResourceTimings == "function";
- if (supported) {
- console.log("... Performance.clearResourceTimings() = supported");
- performance.clearResourceTimings();
- } else {
- console.log("... Performance.clearResourceTiming() = NOT supported");
- return;
- }
- // getEntries should now return zero
- var p = performance.getEntriesByType("resource");
- if (p.length == 0)
- console.log("... Performance data buffer cleared");
- else
- console.log("... Performance data buffer NOT cleared (still have `" + p.length + "` items");
-}
-
-function set_resource_timing_buffer_size(n) {
- if (performance === undefined) {
- console.log("= performance.setResourceTimingBufferSize(): peformance NOT supported");
- return;
- }
- // Check if Performance.setResourceTimingBufferSize() is supported
- console.log ("= performance.setResourceTimingBufferSize()");
- var supported = typeof performance.setResourceTimingBufferSize == "function";
- if (supported) {
- console.log("... Performance.setResourceTimingBufferSize() = supported");
- performance.setResourceTimingBufferSize(n);
- } else {
- 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.
-
-
function buffer_full(event) {
- console.log("WARNING: Resource Timing Buffer is FULL!");
- set_resource_timing_buffer_size(200);
-}
-
-function init() {
- // load some image to trigger "resource" fetch events
- var image1 = new Image();
- image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png";
- var image2 = new Image();
- image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg"
-
- // Set a callback if the resource buffer becomes filled
- performance.onresourcetimingbufferfull = buffer_full;
-}
-
-
-
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.
-
-
-
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.
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
new file mode 100644
index 00000000000000..748ded945e4df2
--- /dev/null
+++ b/files/ja/web/api/resource_timing_api/using_the_resource_timing_api/index.md
@@ -0,0 +1,212 @@
+---
+title: Using the Resource Timing API
+slug: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
+tags:
+ - API
+ - Web
+ - Web パフォーマンス
+ - Web 開発
+ - タイミング
+ - パフォーマンス
+ - リソースタイミング
+ - リソースタイミング API
+translation_of: Web/API/Resource_Timing_API/Using_the_Resource_Timing_API
+---
+{{DefaultAPISidebar("Resource Timing API")}}
+
+**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.
+
+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](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
+
+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.
+
+
+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.
+
+## 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.
+
+```js
+function calculate_load_times() {
+ // Check performance support
+ if (performance === undefined) {
+ console.log("= Calculate Load Times: performance NOT supported");
+ return;
+ }
+
+ // Get a list of "resource" performance entries
+ var resources = performance.getEntriesByType("resource");
+ 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++) {
+ console.log("== Resource[" + i + "] - " + resources[i].name);
+ // Redirect time
+ var t = resources[i].redirectEnd - resources[i].redirectStart;
+ console.log("... Redirect time = " + t);
+
+ // DNS time
+ t = resources[i].domainLookupEnd - resources[i].domainLookupStart;
+ console.log("... DNS lookup time = " + t);
+
+ // TCP handshake time
+ t = resources[i].connectEnd - resources[i].connectStart;
+ console.log("... TCP time = " + t);
+
+ // Secure connection time
+ t = (resources[i].secureConnectionStart > 0) ? (resources[i].connectEnd - resources[i].secureConnectionStart) : "0";
+ console.log("... Secure connection time = " + t);
+
+ // Response time
+ t = resources[i].responseEnd - resources[i].responseStart;
+ console.log("... Response time = " + t);
+
+ // Fetch until response end
+ 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";
+ 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";
+ console.log("... Start until response end time = " + t);
+ }
+}
+```
+
+## Size matters?
+
+アプリケーションのリソースのサイズはアプリケーションのパフォーマンスに影響を与える可能性があるため、リソースサイズに関する正確なデータを取得することが重要になる可能性があります（特に非ホストリソースの場合）。{{domxref("PerformanceResourceTiming")}} インターフェースには、リソースに関するサイズデータを取得するために使用できる 3 つのプロパティがあります。 {{domxref('PerformanceResourceTiming.transferSize','transferSize')}} プロパティは、レスポンスヘッダフィールドとレスポンスペイロードボディを含む、取得したリソースのサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.encodedBodySize','encodedBodySize')}} プロパティは、適用されたコンテンツコーディングを削除する前に、フェッチ（HTTP またはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。{{domxref('PerformanceResourceTiming.decodedBodySize','decodedBodySize')}} は、適用されたコンテンツコーディングを削除した後、メッセージ本文のフェッチ（HTTP またはキャッシュ）から受け取ったサイズ（オクテット単位）を返します。
+
+次の例は、これら 3 つのプロパティの使い方を示しています。
+
+```js
+function display_size_data(){
+ // Check for support of the PerformanceResourceTiming.*size properties and print their values
+ // if supported.
+ if (performance === undefined) {
+ console.log("= Display Size Data: performance NOT supported");
+ return;
+ }
+
+ var list = performance.getEntriesByType("resource");
+ if (list === undefined) {
+ console.log("= Display Size Data: performance.getEntriesByType() is NOT supported");
+ return;
+ }
+
+ // For each "resource", display its *Size property values
+ console.log("= Display Size Data");
+ 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);
+ else
+ console.log("... decodedBodySize[" + i + "] = NOT supported");
+
+ if ("encodedBodySize" in list[i])
+ console.log("... encodedBodySize[" + i + "] = " + list[i].encodedBodySize);
+ else
+ console.log("... encodedBodySize[" + i + "] = NOT supported");
+
+ if ("transferSize" in list[i])
+ console.log("... transferSize[" + i + "] = " + list[i].transferSize);
+ else
+ console.log("... transferSize[" + i + "] = NOT supported");
+ }
+}
+```
+
+## Managing the resource buffer
+
+ブラウザは、リソースタイミングバッファ内で少なくとも 150 のリソースタイミングパフォーマンスエントリをサポートする必要がありますが、アプリケーションによっては、その制限を超えるリソースを使用することがあります。開発者がバッファサイズを管理しやすくするために、Resource Timing は{{domxref("Performance")}}インターフェースを拡張する 2 つのメソッドを定義します。{{domxref("Performance.clearResourceTimings","clearResourceTimings()")}} メソッドは、ブラウザのリソースパフォーマンスエントリバッファからすべての "リソース"タイプのパフォーマンスエントリを削除します。 {{domxref("Performance.setResourceTimingBufferSize","setResourceTimingBufferSize()")}} メソッドは、リソースパフォーマンスエントリのバッファサイズを、指定された数のリソースに設定します{{domxref("PerformanceEntry","performance entries")}}.。
+
+次の例は、これら 2 つの方法の使用方法を示しています。
+
+```js
+function clear_resource_timings() {
+ if (performance === undefined) {
+ console.log("= performance.clearResourceTimings(): peformance NOT supported");
+ return;
+ }
+ // Check if Performance.clearResourceTiming() is supported
+ console.log ("= Print performance.clearResourceTimings()");
+ var supported = typeof performance.clearResourceTimings == "function";
+ if (supported) {
+ console.log("... Performance.clearResourceTimings() = supported");
+ performance.clearResourceTimings();
+ } else {
+ console.log("... Performance.clearResourceTiming() = NOT supported");
+ return;
+ }
+ // getEntries should now return zero
+ var p = performance.getEntriesByType("resource");
+ if (p.length == 0)
+ console.log("... Performance data buffer cleared");
+ else
+ console.log("... Performance data buffer NOT cleared (still have `" + p.length + "` items");
+}
+
+function set_resource_timing_buffer_size(n) {
+ if (performance === undefined) {
+ console.log("= performance.setResourceTimingBufferSize(): peformance NOT supported");
+ return;
+ }
+ // Check if Performance.setResourceTimingBufferSize() is supported
+ console.log ("= performance.setResourceTimingBufferSize()");
+ var supported = typeof performance.setResourceTimingBufferSize == "function";
+ if (supported) {
+ console.log("... Performance.setResourceTimingBufferSize() = supported");
+ performance.setResourceTimingBufferSize(n);
+ } else {
+ 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.
+
+```js
+function buffer_full(event) {
+ console.log("WARNING: Resource Timing Buffer is FULL!");
+ set_resource_timing_buffer_size(200);
+}
+
+function init() {
+ // load some image to trigger "resource" fetch events
+ var image1 = new Image();
+ image1.src = "https://developer.mozilla.org/static/img/opengraph-logo.png";
+ var image2 = new Image();
+ image2.src = "http://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.e2c1fc556816.jpg"
+
+ // Set a callback if the resource buffer becomes filled
+ performance.onresourcetimingbufferfull = buffer_full;
+}
+```
+
+## 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.
+
+> **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.html b/files/ja/web/api/sharedworker/index.html
deleted file mode 100644
index 2e1b89b3cba0a7..00000000000000
--- a/files/ja/web/api/sharedworker/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: SharedWorker
-slug: Web/API/SharedWorker
-translation_of: Web/API/SharedWorker
----
-
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.
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.
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.
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.
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.
diff --git a/files/ja/web/api/sharedworkerglobalscope/index.md b/files/ja/web/api/sharedworkerglobalscope/index.md
new file mode 100644
index 00000000000000..ac5264ef616905
--- /dev/null
+++ b/files/ja/web/api/sharedworkerglobalscope/index.md
@@ -0,0 +1,101 @@
+---
+title: SharedWorkerGlobalScope
+slug: Web/API/SharedWorkerGlobalScope
+tags:
+ - API
+ - Interface
+ - Reference
+ - SharedWorkerGlobalScope
+ - Web Workers
+ - インターフェイス
+ - ウェブワーカー
+translation_of: Web/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.html b/files/ja/web/api/sourcebufferlist/index.html
deleted file mode 100644
index a5986203c802de..00000000000000
--- a/files/ja/web/api/sourcebufferlist/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: SourceBufferList
-slug: Web/API/SourceBufferList
-tags:
- - API
- - Audio
- - Experimental
- - Interface
- - MSE
- - Media Source Extensions
- - Reference
- - SourceBufferList
- - Video
-translation_of: Web/API/SourceBufferList
----
-
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
- // The first [0] returns the SpeechRecognitionResult at position 0.
- // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
- // These also have getters so they can be accessed like arrays.
- // The second [0] returns the SpeechRecognitionAlternative at position 0.
- // We then return the transcript property of the SpeechRecognitionAlternative object
- var color = event.results[0][0].transcript;
- diagnostic.textContent = 'Result received: ' + color + '.';
- bg.style.backgroundColor = color;
-}
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
- // The first [0] returns the SpeechRecognitionResult at position 0.
- // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
- // These also have getters so they can be accessed like arrays.
- // The second [0] returns the SpeechRecognitionAlternative at position 0.
- // We then return the transcript property of the SpeechRecognitionAlternative object
- var color = event.results[0][0].transcript;
- diagnostic.textContent = 'Result received: ' + color + '.';
- bg.style.backgroundColor = color;
-}
diff --git a/files/ja/web/api/speechrecognitionalternative/transcript/index.md b/files/ja/web/api/speechrecognitionalternative/transcript/index.md
new file mode 100644
index 00000000000000..3f2198ba912717
--- /dev/null
+++ b/files/ja/web/api/speechrecognitionalternative/transcript/index.md
@@ -0,0 +1,92 @@
+---
+title: SpeechRecognitionAlternative.transcript
+slug: Web/API/SpeechRecognitionAlternative/transcript
+tags:
+ - API
+ - Experimental
+ - Property
+ - Reference
+ - SpeechRecognitionAlternative
+ - Web Speech API
+ - recognition
+ - speech
+ - transcript
+translation_of: Web/API/SpeechRecognitionAlternative/transcript
+---
+{{APIRef("Web Speech API")}}{{ SeeCompatTable() }}
+
+{{domxref("SpeechRecognitionResult")}} インターフェースの **`transcript`** 読み取り専用プロパティは、認識したワードの記録を含む文字列を返します。
+
+連続認識において、連続した {{domxref("SpeechRecognitionResult")}} の連結がセッションの適切な記録を生成するように、必要に応じて先頭または末尾の空白が含まれます。
+
+## 構文
+
+```
+var myTranscript = speechRecognitionAlternativeInstance.transcript;
+```
+
+### 戻り値
+
+{{domxref("DOMString")}}。
+
+## 例
+
+このコードは、[Speech color changer](https://github.com/mdn/web-speech-api/blob/master/speech-color-changer/script.js) から抜き出しています。
+
+```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
+ // The first [0] returns the SpeechRecognitionResult at position 0.
+ // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
+ // These also have getters so they can be accessed like arrays.
+ // The second [0] returns the SpeechRecognitionAlternative at position 0.
+ // We then return the transcript property of the SpeechRecognitionAlternative object
+ 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')}} | |
+
+## ブラウザー実装状況
+
+{{Compat("api.SpeechRecognitionAlternative.transcript")}}
+
+- \[1] Chrome では、SpeechRecognitionare インターフェースにプレフィックスが必要です。そのため、インターフェース名に `webkitSpeechRecognition` のようなプレフィックスが必要です; また、認識を動作させるには、Web サーバ上から提供する必要があります。
+- \[2]
+
+ about:config
+
+ の `media.webspeech.recognition.enable` フラグで有効にできますが、現在の音声認識はデスクトップ版の Firefox では機能しません - 必要な内部権限が整理されればすぐに適切に公開されます。
+
+### Firefox OS 許可
+
+アプリで音声認識を使用するには、[manifest](/ja/docs/Web/Apps/Build/Manifest) で次の許可が必要です:
+
+```json
+"permissions": {
+ "audio-capture" : {
+ "description" : "Audio capture"
+ },
+ "speech-recognition" : {
+ "description" : "Speech recognition"
+ }
+}
+```
+
+特権アプリも必要なため、次のものも含める必要があります。
+
+```json
+ "type": "privileged"
+```
+
+## 関連項目
+
+- [Web Speech API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechrecognitionresult/index.html b/files/ja/web/api/speechrecognitionresult/index.html
deleted file mode 100644
index abf172bba4a851..00000000000000
--- a/files/ja/web/api/speechrecognitionresult/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: SpeechRecognitionResult
-slug: Web/API/SpeechRecognitionResult
-tags:
- - API
- - Experimental
- - Interface
- - NeedsTranslation
- - Reference
- - SpeechRecognitionResult
- - TopicStub
- - Web Speech API
- - recognition
- - speech
-translation_of: Web/API/SpeechRecognitionResult
----
-
{{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.
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.
Returns the length of the "array" — the number of {{domxref("SpeechRecognitionAlternative")}} objects contained in the result (also referred to as "n-best alternatives".)
-
-
-
Methods
-
-
-
{{domxref("SpeechRecognitionResult.item")}}
-
A standard getter that allows {{domxref("SpeechRecognitionAlternative")}} objects within the result to be accessed via array syntax.
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
- // The first [0] returns the SpeechRecognitionResult at position 0.
- // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
- // These also have getters so they can be accessed like arrays.
- // The second [0] returns the SpeechRecognitionAlternative at position 0.
- // We then return the transcript property of the SpeechRecognitionAlternative object
- var color = event.results[0][0].transcript;
- diagnostic.textContent = 'Result received: ' + color + '.';
- bg.style.backgroundColor = color;
-}
diff --git a/files/ja/web/api/speechrecognitionresult/index.md b/files/ja/web/api/speechrecognitionresult/index.md
new file mode 100644
index 00000000000000..cfdcfe373ded3b
--- /dev/null
+++ b/files/ja/web/api/speechrecognitionresult/index.md
@@ -0,0 +1,86 @@
+---
+title: SpeechRecognitionResult
+slug: Web/API/SpeechRecognitionResult
+tags:
+ - API
+ - Experimental
+ - Interface
+ - NeedsTranslation
+ - Reference
+ - SpeechRecognitionResult
+ - TopicStub
+ - Web Speech API
+ - recognition
+ - speech
+translation_of: Web/API/SpeechRecognitionResult
+---
+{{APIRef("Web Speech API")}}{{SeeCompatTable}}
+
+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
+
+- {{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
+
+- {{domxref("SpeechRecognitionResult.item")}}
+ - : A standard getter that allows {{domxref("SpeechRecognitionAlternative")}} objects within the result to be accessed via array syntax.
+
+## Examples
+
+This code is excerpted from our [Speech color changer](https://github.com/mdn/web-speech-api/blob/master/speech-color-changer/script.js) example.
+
+```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
+ // The first [0] returns the SpeechRecognitionResult at position 0.
+ // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
+ // These also have getters so they can be accessed like arrays.
+ // The second [0] returns the SpeechRecognitionAlternative at position 0.
+ // We then return the transcript property of the SpeechRecognitionAlternative object
+ var color = event.results[0][0].transcript;
+ diagnostic.textContent = 'Result received: ' + color + '.';
+ bg.style.backgroundColor = color;
+}
+```
+
+## Specifications
+
+| Specification | Status | Comment |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- |
+| {{SpecName('Web Speech API', '#speechreco-result', 'SpeechRecognitionResult')}} | {{Spec2('Web Speech API')}} | |
+
+## Browser compatibility
+
+{{Compat("api.SpeechRecognitionResult")}}
+
+### Firefox OS permissions
+
+To use speech recognition in an app, you need to specify the following permissions in your [manifest](/ja/docs/Web/Apps/Build/Manifest):
+
+```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:
+
+```json
+ "type": "privileged"
+```
+
+## See also
+
+- [Web Speech API](/ja/docs/Web/API/Web_Speech_API)
diff --git a/files/ja/web/api/speechrecognitionresult/isfinal/index.html b/files/ja/web/api/speechrecognitionresult/isfinal/index.html
deleted file mode 100644
index 6afad1a17bc962..00000000000000
--- a/files/ja/web/api/speechrecognitionresult/isfinal/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: SpeechRecognitionResult.isFinal
-slug: Web/API/SpeechRecognitionResult/isFinal
-tags:
- - API
- - Experimental
- - Property
- - Reference
- - SpeechRecognitionResult
- - Web Speech API
- - isFinal
- - recognition
- - speech
-translation_of: Web/API/SpeechRecognitionResult/isFinal
----
-
var myIsFinal = speechRecognitionResultInstance.isFinal;
-
-
返り値
-
-
A {{domxref("Boolean")}}.
-
-
例
-
-
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
- // The first [0] returns the SpeechRecognitionResult at position 0.
- // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
- // These also have getters so they can be accessed like arrays.
- // The second [0] returns the SpeechRecognitionAlternative at position 0.
- // We then return the transcript property of the SpeechRecognitionAlternative object
- var color = event.results[0][0].transcript;
- diagnostic.textContent = 'Result received: ' + color + '.';
- bg.style.backgroundColor = color;
-
- console.log(event.results[0].isFinal);
-}
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;
-speechSynthesisUtteranceInstance.lang = 'en-US';
-
-
-
Value
-
-
A {{domxref("DOMString")}} representing a BCP 47 language tag.
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();
- const data = encoder.encode(message);
- const hash = await crypto.subtle.digest('SHA-256', data);
- return hash;
-}
-
-const digestBuffer = await digestMessage(text);
-console.log(digestBuffer.byteLength);
-
Web Speech API には、このための主要なコントローラインターフェイスである {{domxref("SpeechRecognition")}} と、文法や結果などを表現するためのいくつかの密接に関連したインターフェースがあります。一般的には、デバイス上で利用可能なデフォルトの音声認識システムが音声認識に使用されます — 最近のほとんどのOSには音声コマンドを発行するための音声認識システムが搭載されています。macOSのDictation、iOSのSiri、Windows 10のCortana、AndroidのSpeechなどを考えてみてください。
<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>
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>';
-});
-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.');
-}
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.
-
-
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 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.
-
-
Browser support
-
-
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.
-
-
-
-
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.)
-
-
<h1>Speech synthesiser</h1>
-
-<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
-
-<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>
-
- </select>
-</form>
-
-
JavaScript
-
-
Let's investigate the JavaScript that powers this app.
-
-
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.
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.
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.
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 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.
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) {
- 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.
-
-
inputTxt.blur();
-}
-
-
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.
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
new file mode 100644
index 00000000000000..076c6fbad5b9f8
--- /dev/null
+++ b/files/ja/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -0,0 +1,324 @@
+---
+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 には、このための主要なコントローラインターフェイスである {{domxref("SpeechRecognition")}} と、文法や結果などを表現するためのいくつかの密接に関連したインターフェースがあります。一般的には、デバイス上で利用可能なデフォルトの音声認識システムが音声認識に使用されます — 最近のほとんどの OS には音声コマンドを発行するための音声認識システムが搭載されています。macOS の Dictation、iOS の Siri、Windows 10 の Cortana、Android の Speech などを考えてみてください。
+
+> **Note:** **注釈**: Chrome などの一部のブラウザでは、Web ページで音声認識を使用するためにサーバーベースの認識エンジンが必要です。音声が認識処理のためにウェブサービスに送信されるため、オフラインでは機能しません。
+
+### デモ
+
+Web 音声認識の簡単な使い方を示すために、[Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer)というデモを書いてみました。画面をタップ/クリックし、HTML の色のキーワードを言うと、アプリの背景色がその色に変わります。
+
+
+
+デモを実行するには、それが一部となっている 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` などのプレフィックス付きバージョンを含める必要があります。
+
+### HTML と CSS
+
+アプリの HTML と CSS は本当に簡単です。タイトル、説明段落、診断メッセージを出力する div があるだけです。
+
+```html
+
Speech color changer
+
Tap/click then say a color to change the background color of the app.
+
+
...diagnostic messages
+
+```
+
+この CSS では、デバイスをまたいでも問題なく見えるように、非常にシンプルなレスポンシブ・スタイリングを提供しています。
+
+### JavaScript
+
+JavaScript をもう少し詳しく見てみましょう。
+
+#### Chrome 対応
+
+前述したように、Chrome は現在プレフィックス付きのプロパティで音声認識をサポートしているので、適切なオブジェクトを Chrome に供給し、そして将来的な実装でプレフィックスなしの機能をサポートする可能性も踏まえ、以下の行をコードの最初に追加しています。
+
+```js
+var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+```
+
+#### 文法
+
+コードの次の部分では、アプリが認識する文法を定義します。次の変数は文法を保持するために定義されています。
+
+```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](http://www.w3.org/TR/jsgf/) (**JSGF**) です — それについての詳細はリンク先の仕様書を参照してください。しかし、今のところは手っ取り早く実行してみましょう。
+
+- 行の区切りは JavaScript と同じようにセミコロンで区切られています。
+- 最初の行 — `#JSGF V1.0;` — は、使用されているフォーマットとバージョンを示します。これは常に最初に含める必要があります。
+- 2 行目は認識したい用語のタイプを示します。`public` はパブリックルールであることを宣言し、角括弧内の文字列はこの用語の認識名 (`color`) を定義し、等号の後に続く項目のリストは、用語の適切な値として認識され受け入れられる代替値です。それぞれがパイプ文字で区切られていることに注意してください。
+- 上記の構造に沿って別の行に好きなだけ多くの用語を定義し、かなり複雑な文法定義を含めることができます。この基本的なデモのために私たちは物事をシンプルにしています。
+
+#### 文法を音声認識にプラグインする
+
+次にやるべきことは、アプリケーションの認識を制御する音声認識インスタンスを定義することです。これは {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} コンストラクタを使用して行います。また、{{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} コンストラクタを使用して、文法を含む新しい音声文法リストも作成します。
+
+```js
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+```
+
+{{domxref("SpeechGrammarList.addFromString()")}} メソッドを使ってリストに `grammar` を追加します。 このメソッドは追加したい文字列をパラメータとして受けとり、さらにオプションで、リスト内で利用可能な他の文法との関係においてこの文法の重要度を指定する重み値を受け取ります（0 から 1 までの範囲で指定できます）。追加された文法は{{domxref("SpeechGrammar")}} オブジェクトのインスタンスとしてリスト内で利用できます。
+
+```js
+speechRecognitionList.addFromString(grammar, 1);
+```
+
+次に、 {{domxref("SpeechGrammarList")}} を {{domxref("SpeechRecognition.grammars")}} プロパティの値に設定することで、音声認識インスタンスに {{domxref("SpeechGrammarList")}} を追加します。次に進む前に、認識インスタンスの他のいくつかのプロパティも設定します。
+
+- {{domxref("SpeechRecognition.continuous")}}: 認識が開始されるたびに連続した結果をキャプチャする (`true`) か、または単一の結果だけをキャプチャする (`false`) かを制御します。
+- {{domxref("SpeechRecognition.lang")}}: 認識の言語を設定します。これを設定することは良い習慣であるため、推奨されます。
+- {{domxref("SpeechRecognition.interimResults")}}: 音声認識システムが中間的な結果を返すか、最終的な結果だけを返すか定義します。このシンプルなデモでは最終的な結果で十分です。
+- {{domxref("SpeechRecognition.maxAlternatives")}}: 結果ごとに返される代替候補数を設定します。これは、結果が完全に明確ではなく、ユーザーが正しいものを選択できるように代替候補のリストを表示したい場合などに便利な場合があります。しかし、このシンプルなデモでは必要ないのでここでは 1 つだけ指定します（これは実際にはデフォルトです）。
+
+```js
+recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+```
+
+#### 音声認識の開始
+
+出力 {{htmlelement("div")}} と HTML 要素への参照を取得（診断メッセージを出力したり、後でアプリの背景色を更新したりできるようにするため）した後、画面がタップ/クリックされたときに音声認識サービスが開始されるように onclick ハンドラを実装します。これは {{domxref("SpeechRecognition.start()")}} を呼び出すことで実現しています。 `forEach()` メソッドは何色を言っているかを示す色付きインジケータを出力するために使われています。
+
+```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 += ' ' + 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` のイベントハンドラのリスト](/ja/docs/Web/API/SpeechRecognition#Event_handlers) を参照してください）。最も一般的なものは {{domxref("SpeechRecognition.onresult")}} で、成功した結果を受信したときに発火されます。
+
+```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 の診断メッセージとして報告します。
+
+また、 {{domxref("SpeechRecognition.onspeechend")}} ハンドラを使用して音声認識サービスの実行を停止します（1 つの単語が認識され、それが発話され終わったら {{domxref("SpeechRecognition.stop()")}}) を使用します）。
+
+```js
+recognition.onspeechend = function() {
+ recognition.stop();
+}
+```
+
+#### エラーや認識されない発話のハンドリング
+
+最後の 2 つのハンドラは、定義された文法にない音声が認識されたケースやエラーが発生したケースを処理するためのものです。{{domxref("SpeechRecognition.onnomatch")}} は最初に言及したケースを処理することになっているようですが、今のところ正しく動作しているようには見えないことに注意してください（とにかく認識されたものを返すだけです）。
+
+```js
+recognition.onnomatch = function(event) {
+ diagnostic.textContent = 'I didnt recognise that color.';
+}
+```
+
+{{domxref("SpeechRecognition.onerror")}} は、認識に成功して実際にエラーが発生したケースを処理します — {{domxref("SpeechRecognitionError.error")}} プロパティには、返された実際のエラーが含まれます。
+
+```js
+recognition.onerror = function(event) {
+ diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}
+```
+
+## 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.
+
+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
+
+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.
+
+
+
+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
+
+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.
+
+### 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.)
+
+```html
+
Speech synthesiser
+
+
Enter some text in the input below and press return to hear it. change voices using the dropdown menu.
+
+
+```
+
+### JavaScript
+
+Let's investigate the JavaScript that powers this app.
+
+#### 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.
+
+```js
+var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+```
+
+#### 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`.)
+
+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.
+
+```js
+function populateVoiceList() {
+ voices = synth.getVoices();
+
+ for(i = 0; i < voices.length ; i++) {
+ var option = document.createElement('option');
+ option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+ if(voices[i].default) {
+ option.textContent += ' -- DEFAULT';
+ }
+
+ option.setAttribute('data-lang', voices[i].lang);
+ 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.
+
+```js
+populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+ speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+```
+
+#### 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](/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.
+
+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.
+
+```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++) {
+ if(voices[i].name === selectedOption) {
+ utterThis.voice = voices[i];
+ }
+ }
+ utterThis.pitch = pitch.value;
+ utterThis.rate = rate.value;
+ 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.
+
+```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()](/ja/docs/Web/API/HTMLElement/blur) on the text input. This is mainly to hide the keyboard on Firefox OS.
+
+```js
+ inputTxt.blur();
+}
+```
+
+#### 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.
+
+```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.html b/files/ja/web/api/web_storage_api/index.html
deleted file mode 100644
index 1a2b228ef913b2..00000000000000
--- a/files/ja/web/api/web_storage_api/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: Web Storage API
-slug: Web/API/Web_Storage_API
-tags:
- - API
- - Reference
- - Storage
- - Web Storage
- - localStorage
- - sessionStorage
-translation_of: Web/API/Web_Storage_API
----
-
{{DefaultAPISidebar("Web Storage API")}}
-
-
Web Storage API は、{{Glossary("Cookie","クッキー")}}を使用するよりも直感的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。
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/index.md b/files/ja/web/api/xpathresult/index.md
new file mode 100644
index 00000000000000..96bfd2e78179d8
--- /dev/null
+++ b/files/ja/web/api/xpathresult/index.md
@@ -0,0 +1,67 @@
+---
+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 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.html b/files/ja/web/api/xpathresult/snapshotitem/index.html
deleted file mode 100644
index 40f379dd38fbf0..00000000000000
--- a/files/ja/web/api/xpathresult/snapshotitem/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: XPathResult.snapshotItem()
-slug: Web/API/XPathResult/snapshotItem
-tags:
- - API
- - DOM XPath API
- - Method
- - Reference
- - XPath
- - XPathResult
- - メソッド
-translation_of: Web/API/XPathResult/snapshotItem
----
-
WebXR が直接サポートしている入力コントロールは、すべて専用の VR または AR の入力デバイスです。 マウス、キーボード、またはその他の入力デバイスを使用して 3D 空間内のオブジェクトを移動または変換したり、ユーザーが空間内を移動できるようにするには、入力を読み取って移動するためのコードを記述する必要があります。
別の選択肢を選ぶと、即座にページが更新されます。さらに、選択内容を 
-
-
