Skip to content

Commit

Permalink
Convert ja/web/api to Markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Aug 13, 2022
1 parent 19a80c1 commit ddfc51c
Show file tree
Hide file tree
Showing 1,164 changed files with 40,620 additions and 63,474 deletions.
85 changes: 33 additions & 52 deletions files/ja/web/api/abortsignal/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,39 @@ tags:
- 実験的
translation_of: Web/API/AbortSignal
---
<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
{{APIRef("DOM")}}{{SeeCompatTable}}

<p><strong><code>AbortSignal</code></strong> インターフェイスは DOM 要求 (Fetch など) と通信し、必要に応じて {{domxref("AbortController")}} オブジェクトを介して中断することを可能にするシグナルオブジェクトを表します。</p>
**`AbortSignal`** インターフェイスは DOM 要求 (Fetch など) と通信し、必要に応じて {{domxref("AbortController")}} オブジェクトを介して中断することを可能にするシグナルオブジェクトを表します。

<h2 id="Properties" name="Properties">プロパティ</h2>
## プロパティ

<p><em>AbortSignal インターフェイスはまた、親のインターフェースである、 {{domxref("EventTarget")}} からプロパティを継承しています。</em></p>
_AbortSignal インターフェイスはまた、親のインターフェースである、 {{domxref("EventTarget")}} からプロパティを継承しています。_

<dl>
<dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
<dd>シグナルが通信しているリクエスト(複数回も)が中断しているかを示す {{domxref("Boolean")}} で、(<code>true</code>) が中断している 、(<code>false</code>) は中断していないを表します。</dd>
</dl>
- {{domxref("AbortSignal.aborted")}} {{readonlyInline}}
- : シグナルが通信しているリクエスト(複数回も)が中断しているかを示す {{domxref("Boolean")}} で、(`true`) が中断している 、(`false`) は中断していないを表します。

<h2 id="Events" name="Events">イベント</h2>
## イベント

<p><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> を使うかこのインターフェースの <code>on<em>eventname</em></code> プロパティにイベントリスナーを割り当てることでこのイベントへのアクセスに待機します。</p>
[`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使うかこのインターフェースの `oneventname` プロパティにイベントリスナーを割り当てることでこのイベントへのアクセスに待機します。

<dl>
<dt><code><a href="/ja/docs/Web/API/AbortSignal/abort_event">abort</a></code></dt>
<dd>シグナルが通信している DOM リクエスト (複数回も) の中断を呼び出す。<br>
また <code><a href="/ja/docs/Web/API/AbortSignal/onabort">onabort</a></code> プロパティを介して利用可能です。</dd>
</dl>
- [`abort`](/ja/docs/Web/API/AbortSignal/abort_event)
- : シグナルが通信している DOM リクエスト (複数回も) の中断を呼び出す。
また [`onabort`](/ja/docs/Web/API/AbortSignal/onabort) プロパティを介して利用可能です。

<h2 id="Methods" name="Methods">メソッド</h2>
## メソッド

<p><em>AbortSignal インターフェースは親インタフェースである、{{domxref("EventTarget")}} からメソッドを継承します。</em></p>
_AbortSignal インターフェースは親インタフェースである、{{domxref("EventTarget")}} からメソッドを継承します。_

<h2 id="Examples" name="Examples">例</h2>
## 例

<p>この後の短いコードで、<a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> を使用してビデオをダウンロードします。</p>
この後の短いコードで、[Fetch API](/ja/docs/Web/API/Fetch_API) を使用してビデオをダウンロードします。

<p>まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、{{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。</p>
まず {{domxref("AbortController.AbortController","AbortController()")}} コンストラクターを使ってコントローラーを生成し、{{domxref("AbortController.signal")}} プロパティを使用して関連する {{domxref("AbortSignal")}} オブジェクトへの参照を取得します。

<p><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">読み込みリクエスト</a> が初期化すると、リクエストのオプションオブジェクト (下記 <code>{signal}</code> を参照) の内部のオプションとして <code>AbortSignal</code> を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。</p>
[読み込みリクエスト](/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch) が初期化すると、リクエストのオプションオブジェクト (下記 `{signal}` を参照) の内部のオプションとして `AbortSignal` を渡します。これによりシグナルと読み込みリクエストのコントローラーは関連付き、{{domxref("AbortController.abort()")}} を呼び出すことで下記の 2 つ目のイベントリスナーに見られるように中断が許可されます。

<pre class="brush: js">var controller = new AbortController();
```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
Expand All @@ -65,42 +62,26 @@ function fetchVideo() {
}).catch(function(e) {
reports.textContent = 'Download error: ' + e.message;
})
}</pre>
}
```

<div class="note">
<p><strong>注記</strong>: <code>abort()</code> が呼ばれると、<code>fetch()</code> promise は <code>AbortError</code> で失敗します。</p>
</div>
> **Note:** **注記**: `abort()` が呼ばれると、`fetch()` promise は `AbortError` で失敗します。
<div class="warning">
<p>現在のバージョンの Firefox は、<code>DOMException</code> で失敗します。</p>
</div>
> **Warning:** 現在のバージョンの Firefox は、`DOMException` で失敗します。
<p>GitHub で完全に動作する例を見ることができます — <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (または <a href="https://mdn.github.io/dom-examples/abort-api/">実際に動作する様子</a> を参照) を参照してください。</p>
GitHub で完全に動作する例を見ることができます — [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api) (または [実際に動作する様子](https://mdn.github.io/dom-examples/abort-api/) を参照) を参照してください。

<h2 id="Specifications" name="Specifications">仕様</h2>
## 仕様

<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">ステータス</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
| 仕様書 | ステータス | コメント |
| ---------------------------------------------------------------------------------------- | -------------------------------- | -------- |
| {{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}} | {{Spec2('DOM WHATWG')}} | 初回定義 |

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2>
## ブラウザの実装状況

<p>{{Compat("api.AbortSignal")}}</p>
{{Compat("api.AbortSignal")}}

<h2 id="関連情報">関連情報</h2>
## 関連情報

<ul>
<li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li>
<li>Jake Archibald による <a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a></li>
</ul>
- [Fetch API](/ja/docs/Web/API/Fetch_API)
- Jake Archibald による [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch)
197 changes: 78 additions & 119 deletions files/ja/web/api/analysernode/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,102 +3,73 @@ title: AnalyserNode
slug: Web/API/AnalyserNode
translation_of: Web/API/AnalyserNode
---
<p>{{APIRef("Web Audio API")}}</p>

<p><strong><code>AnalyserNode</code></strong>インタフェースはリアルタイム時間領域/周波数領域分析情報を表現します。{{domxref("AudioNode")}}は、入力から出力の流れにおいてaudio streamそのものは変えず、データ加工や音声の可視化をすることができます。</p>

<p>１つの<code>AnalyzerNode</code>は必ず１つの入力と出力を持ちます。出力先がなくてもAnalyzerNodeは問題ありません。</p>

<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/9707/WebAudioFFT.png" style="height: 174px; width: 661px;"></p>

<table class="properties">
<tbody>
<tr>
<th scope="row">Number of inputs</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Number of outputs</th>
<td><code>1</code> (but may be left unconnected)</td>
</tr>
<tr>
<th scope="row">Channel count mode</th>
<td><code>"explicit"</code></td>
</tr>
<tr>
<th scope="row">Channel count</th>
<td><code>1</code></td>
</tr>
<tr>
<th scope="row">Channel interpretation</th>
<td><code>"speakers"</code></td>
</tr>
</tbody>
</table>

<h2 id="Inheritance">Inheritance</h2>

<p>このインタフェースは以下のインタフェースと継承関係にあります。:</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Properties">Properties</h2>

<p><em> 以下は、</em><em>{{domxref("AudioNode")}}からプロパティを継承する</em>.</p>

<dl>
<dt>{{domxref("AnalyserNode.fftSize")}}</dt>
<dd>
<p>符号なしのlong型の値でFFT（<a href="http://en.wikipedia.org/wiki/Fast_Fourier_transform">高速フーリエ変換</a>）において周波数領域を決定するために使われているサイズを表している。</p>
</dd>
<dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
<dd>符号なしのlong型でFFT（高速フーリエ変換）のサイズの半分の値。一般的に音声再生時の可視化に用いられる。</dd>
<dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
<dd>
<p>unsigned byte型値へ変換するFFT分析データのスケーリング時の最小のパワー値を表すdouble型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最小値として明記される。</p>
</dd>
<dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
<dd>
<p>unsigned byte型値へ変換するFFT分析データのスケーリング時の最大のパワー値を表すdouble型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最大値として明記される。</p>
</dd>
<dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
<dd>分析フレームの平均間隔を表すdouble型の値で、使用例として時間的にスペクトルを平滑化させるのに用いられる。</dd>
</dl>

<h2 id="Methods">Methods</h2>

<p><em>{{domxref("AudioNode")}}からメソッドを継承する</em>.</p>

<dl>
<dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
<dd>周波数データを引数として渡されたFloat32Array配列へコピーする。</dd>
</dl>

<dl>
<dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
<dd>周波数データを引数として渡されたUint8Array配列(unsigned byte配列)へコピーする。</dd>
</dl>

<dl>
<dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
<dd>音声波形データを引数として渡されたFloat32Array配列へコピーする。</dd>
<dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
<dd>音声波形データを引数として渡されたUint8Array配列(unsigned byte配列)へコピーする。</dd>
</dl>

<h2 id="Examples">Examples</h2>

<div class="note">
<p><strong>Note</strong>: オーディオヴィジュアライゼーションのためのWeb Audio APIを使ったヴィジュアライゼーションガイドを御覧ください。</p>
</div>

<h3 id="Basic_usage">Basic usage</h3>

<p>以下の例では、AudioContextから１つのAnalyserNodeを作成しており、requestAnimationFrameと&lt;canvas&gt;へ繰り返し時間波形データを繰り返し集め現入力を“オシロスコープスタイル”で出力し描画している。</p>

<p>より多くのサンプルは 我々の <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> デモにご覧頂けます。 (see <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a> for relevant code).</p>

<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
{{APIRef("Web Audio API")}}

**`AnalyserNode`**インタフェースはリアルタイム時間領域/周波数領域分析情報を表現します。{{domxref("AudioNode")}}は、入力から出力の流れにおいて audio stream そのものは変えず、データ加工や音声の可視化をすることができます。

１つの`AnalyzerNode`は必ず１つの入力と出力を持ちます。出力先がなくても AnalyzerNode は問題ありません。

![Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.](https://mdn.mozillademos.org/files/9707/WebAudioFFT.png)

| Number of inputs | `1` |
| ---------------------- | --------------------------------- |
| Number of outputs | `1` (but may be left unconnected) |
| Channel count mode | `"explicit"` |
| Channel count | `1` |
| Channel interpretation | `"speakers"` |

## Inheritance

このインタフェースは以下のインタフェースと継承関係にあります。:

{{InheritanceDiagram}}

## Properties

_以下は、\_\_{{domxref("AudioNode")}}からプロパティを継承する_.

- {{domxref("AnalyserNode.fftSize")}}
- : 符号なしの long 型の値で FFT（[高速フーリエ変換](http://en.wikipedia.org/wiki/Fast_Fourier_transform)）において周波数領域を決定するために使われているサイズを表している。
- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
- : 符号なしの long 型で FFT（高速フーリエ変換）のサイズの半分の値。一般的に音声再生時の可視化に用いられる。
- {{domxref("AnalyserNode.minDecibels")}}
- : unsigned byte 型値へ変換する FFT 分析データのスケーリング時の最小のパワー値を表す double 型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最小値として明記される。
- {{domxref("AnalyserNode.maxDecibels")}}
- : unsigned byte 型値へ変換する FFT 分析データのスケーリング時の最大のパワー値を表す double 型の値である。一般的に、この値は、getByteFrequencyData()の使用時の結果の範囲の最大値として明記される。
- {{domxref("AnalyserNode.smoothingTimeConstant")}}
- : 分析フレームの平均間隔を表す double 型の値で、使用例として時間的にスペクトルを平滑化させるのに用いられる。

## Methods

_{{domxref("AudioNode")}}からメソッドを継承する_.

- {{domxref("AnalyserNode.getFloatFrequencyData()")}}
- : 周波数データを引数として渡された Float32Array 配列へコピーする。

<!---->

- {{domxref("AnalyserNode.getByteFrequencyData()")}}
- : 周波数データを引数として渡された Uint8Array 配列(unsigned byte 配列)へコピーする。

<!---->

- {{domxref("AnalyserNode.getFloatTimeDomainData()")}}
- : 音声波形データを引数として渡された Float32Array 配列へコピーする。
- {{domxref("AnalyserNode.getByteTimeDomainData()")}}
- : 音声波形データを引数として渡された Uint8Array 配列(unsigned byte 配列)へコピーする。

## Examples

> **Note:** オーディオヴィジュアライゼーションのための Web Audio API を使ったヴィジュアライゼーションガイドを御覧ください。
### Basic usage

以下の例では、AudioContext から１つの AnalyserNode を作成しており、requestAnimationFrame と\<canvas>へ繰り返し時間波形データを繰り返し集め現入力を“オシロスコープスタイル”で出力し描画している。

より多くのサンプルは 我々の [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) デモにご覧頂けます。 (see [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205) for relevant code).

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();

...
Expand Down Expand Up @@ -127,7 +98,7 @@ function draw() {
var sliceWidth = WIDTH * 1.0 / bufferLength;
var x = 0;

for(var i = 0; i &lt; bufferLength; i++) {
for(var i = 0; i < bufferLength; i++) {

var v = dataArray[i] / 128.0;
var y = v * HEIGHT/2;
Expand All @@ -145,31 +116,19 @@ function draw() {
canvasCtx.stroke();
};

draw();</pre>
draw();
```

<h2 id="Specifications">Specifications</h2>
## Specifications

<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
<td>{{Spec2('Web Audio API')}}</td>
<td> </td>
</tr>
</tbody>
</table>
| Specification | Status | Comment |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- |
| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | |

<h2 id="Browser_compatibility">Browser compatibility</h2>
## Browser compatibility

<p>{{Compat("api.AnalyserNode")}}</p>
{{Compat("api.AnalyserNode")}}

<h2 id="See_also">See also</h2>
## See also

<ul>
<li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
</ul>
- [Using the Web Audio API](/ja/docs/Web_Audio_API/Using_Web_Audio_API)
Loading

0 comments on commit ddfc51c

Please sign in to comment.