From c0ba92a9287ec00d564211f31e4f53fd12f9143e Mon Sep 17 00:00:00 2001 From: Akane Nakayama <31214487+ShirasuGyoza@users.noreply.github.com> Date: Sun, 18 Jul 2021 01:15:35 +0900 Subject: update: Web API の紹介 の未訳箇所 (#1245) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update: Web API の紹介 の未訳箇所 * 表記の修正 * リンクの自動修正 * 半角スペースを追加（漏れ） --- .../client-side_web_apis/introduction/index.html | 84 +++++++++++----------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html index 521cd6d234..f685066a4d 100644 --- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html +++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html @@ -24,7 +24,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction 前提条件: - 基本的なコンピュータの知識および利用能力、HTML と CSS の基本的な理解、JavaScript の基本 (第一歩、構成要素, JavaScriptオブジェクト). + 基本的なコンピューターの知識および利用能力、HTML と CSS の基本的な理解、JavaScript の基本 (第一歩、構成要素, JavaScriptオブジェクト). 目的: @@ -39,11 +39,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

実世界の例として、あなたの家、アパートや他の住処にある電気のコンセントについて考えて下さい。あなたの家で機器を使いたい時には、電源コードのプラグをコンセントに差し込めば事足ります。電源に直接結線したりしないでしょう — そんなのは非効率ですし、あなたが電気工事士でなければ、やってみるには難しいし危険です。

-

+

画像提供: 超タコ足コンセント by The Clear Communication People, Flickr より

-

それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピュータの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。

+

それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピューターの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。

注記: API という語についてもっと詳しいことは APIの用語解説 を参照して下さい。

@@ -54,15 +54,15 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

クライアントサイド API では、実際非常にたくさんのAPIが使えます — それらは JavaScript 言語本体の一部ではなく、あなたにスーパーパワーを与えるべく JavaScript 言語のコアの上に築かれた代物です。それらはおおよそ二つのカテゴリに分けられます:

-

+

@@ -71,28 +71,28 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

ここまででクライアントサイド API とは何か、JavaScript 言語とどう関係しているのかお話しました。もっとはっきりさせるために一度おさらいして、ついでに他の JavaScript ツールがどう関係してくるのかもお話しましょう:

API で何ができる?

-

モダンなブラウザではすごい数の API を利用できるので、コードからとてもいろいろな事ができます。 MDN API 索引を見てみればわかると思います。

+

モダンなブラウザーではすごい数の API を利用できるので、コードからとてもいろいろな事ができます。 MDN API 索引を見てみればわかると思います。

-

一般的なブラウザ API

+

一般的なブラウザー API

-

特に、あなたが使うであろう最も一般的なブラウザ API のカテゴリ (このモジュールでとても詳しい所まで網羅していきます) は:

+

特に、あなたが使うであろう最も一般的なブラウザー API のカテゴリ (このモジュールでとても詳しい所まで網羅していきます) は:

一般的なサードパーティAPI

@@ -120,21 +120,21 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction

オブジェクトに基づいています

-

あなたのコードは一つ以上の JavaScript オブジェクトを通じて API とやりとりし、オブジェクトは API が使用するデータ (オブジェクトのプロパティとして持つ) や API が提供する機能(オブジェクトメソッドとして持つ) の容れ物として使われます。

+

あなたのコードは一つ以上の JavaScript オブジェクトを通じて API とやりとりし、オブジェクトは API が使用するデータ (オブジェクトのプロパティとして持つ) や API が提供する機能(オブジェクトメソッドとして持つ) の容れ物として使われます。

-

注記: もしまだオブジェクトがどのように動作するかについて理解があやふやなら、先に進む前に JavaScript オブジェクト モジュールを読みなおし、練習するのをおすすめします。

+

注記: もしまだオブジェクトがどのように動作するかについて理解があやふやなら、先に進む前に JavaScript オブジェクト モジュールを読みなおし、練習するのをおすすめします。

-

Let's return to the example of the Web Audio API — this is a fairly complex API, which consists of a number of objects. The most obvious ones are:

+

Web Audio API の例に戻ってみましょう。Web Audio API はとても複雑な API で、たくさんのオブジェクトから成り立っています。わかりやすいものでいうと下記が挙げられます：

-

So how do these objects interact? If you look at our simple web audio example (see it live also), you'll first see the following HTML:

+

では、どのようにこれらのオブジェクトは互いに作用するのでしょうか？ こちらのシンプルな web audio の例 (デモページ)を見ると、最初に以下のような HTML が書かれています。

<audio src="outfoxing.mp3"></audio>
 
@@ -142,16 +142,16 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
 <br>
 <input type="range" min="0" max="1" step="0.01" value="1" class="volume">
-

We, first of all, include an <audio> element with which we embed an MP3 into the page. We don't include any default browser controls. Next, we include a {{htmlelement("button")}} that we'll use to play and stop the music, and an {{htmlelement("input")}} element of type range, which we'll use to adjust the volume of the track while it's playing.

+

最初に、 <audio> 要素を記述してページに MP3 を埋め込みます。デフォルトのブラウザーのコントロールは記しません。次に音楽を再生・停止させるのに使う {{htmlelement("button")}} 、再生中の音楽の音量を調整するのに使う range タイプの {{htmlelement("input")}} 要素を記述します。

-

Next, let's look at the JavaScript for this example.

+

次にこの例の JavaScript を見てみましょう。

-

We start by creating an AudioContext instance inside which to manipulate our track:

+

まず、トラックを操作するための AudioContext インスタンスを作成します。

const AudioContext = window.AudioContext || window.webkitAudioContext;
 const audioCtx = new AudioContext();
-

Next, we create constants that store references to our <audio>, <button>, and <input> elements, and use the {{domxref("AudioContext.createMediaElementSource()")}} method to create a MediaElementAudioSourceNode representing the source of our audio — the <audio> element will be played from:

+

次に、 <audio> 、 <button> 、および <input> 要素への参照を格納する定数を作成し、 {{domxref("AudioContext.createMediaElementSource()")}} メソッドを使用して、音声のソースを表す MediaElementAudioSourceNode を作成します。<audio> 要素はここから再生されます。

const audioElement = document.querySelector('audio');
 const playBtn = document.querySelector('button');
@@ -159,7 +159,7 @@ const volumeSlider = document.querySelector('.volume');
 
 const audioSource = audioCtx.createMediaElementSource(audioElement);
-

Next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing:

+

次に、ボタンが押されたら再生と停止を切り替えるイベントハンドラーと、曲が再生し終わったら最初に戻るイベントハンドラーを記述します。

// play/pause audio
 playBtn.addEventListener('click', function() {
@@ -188,10 +188,10 @@ audioElement.addEventListener('ended', function() {
 });
-

Note: Some of you may notice that the play() and pause() methods being used to play and pause the track are not part of the Web Audio API; they are part of the {{domxref("HTMLMediaElement")}} API, which is different but closely-related.

+

Note: 気づいた方もいるかも知れませんが、音声を再生・停止する play() と pause() メソッドは Web Audio API の一部ではなく、 {{domxref("HTMLMediaElement")}} API の一部です。これらは異なりますが密接に関連しています。

-

Next, we create a {{domxref("GainNode")}} object using the {{domxref("AudioContext.createGain()")}} method, which can be used to adjust the volume of audio fed through it, and create another event handler that changes the value of the audio graph's gain (volume) whenever the slider value is changed:

+

次に、 {{domxref("BaseAudioContext.createGain")}} を使用して {{domxref("GainNode")}} オブジェクトを作成します。このオブジェクトを使用して音声全体の音量を調整し、スライダーの値が変更される度にオーディオグラフのゲイン（音量）の値を変更する別のイベントハンドラーを作成します。

const gainNode = audioCtx.createGain();
 
@@ -199,11 +199,11 @@ volumeSlider.addEventListener('input', function() {
     gainNode.gain.value = this.value;
 });
-

The final thing to do to get this to work is to connect the different nodes in the audio graph up, which is done using the {{domxref("AudioNode.connect()")}} method available on every node type:

+

これを機能させるために最後に行うことは、オーディオグラフ内のさまざまなノードを接続することです。これは、すべてのノードタイプで使用可能な {{domxref("AudioNode.connect()")}} メソッドを使用して行われます。

audioSource.connect(gainNode).connect(audioCtx.destination);
-

The audio starts in the source, which is then connected to the gain node so the audio's volume can be adjusted. The gain node is then connected to the destination node so the sound can be played on your computer (the {{domxref("AudioContext.destination")}} property represents whatever is the default {{domxref("AudioDestinationNode")}} available on your computer's hardware, e.g. your speakers).

+

音声はソースから始まり、ソースはゲインノードに接続されるため、音声の音量を調整できます。次に、ゲインノードが宛先ノードに接続され、コンピューターでサウンドを再生できるようになります。（{{domxref("BaseAudioContext.destination")}} は、スピーカーなど、コンピューターのハードウエアで使用可能なデフォルトの {{domxref("AudioDestinationNode")}} を表します。)

認識できる入口があります

@@ -216,7 +216,7 @@ const para = document.querySelector('p'); // reference an existing p element em.textContent = 'Hello there!'; // give em some text content para.appendChild(em); // embed em inside para -

Canvas API は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:

+

Canvas API は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:

const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');
@@ -231,7 +231,7 @@ const ctx = canvas.getContext('2d'); };
-

注記: この実例を弾むボールのデモ (ライブ実行 も見てね)で見られます。

+

注記: この実例を弾むボールのデモ (ライブ実行 も見てね)で見られます。

状態の変化を捉えるのにイベントを使います

@@ -259,7 +259,7 @@ request.onload = function() { }
-

注記: ajax.html でこの例の動作を見られます(ライブ実行版もどうぞ)。

+

注記: ajax.html でこの例の動作を見られます(ライブ実行版もどうぞ)。

最初の 5 行で取得したいリソースを指定し、XMLHttpRequest() コンストラクタを使って新しいリクエストオブジェクトを生成し、指定のリソースを取得するために GET リクエストを作り、レスポンスを JSON 形式として吐き出すよう指定、そしてリクエストを送信します。

@@ -268,13 +268,13 @@ request.onload = function() {

必要なところには追加のセキュリティ機構があります

-

WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば same-origin ポリシー) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中に はHTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (ServiceWorkers や Push など)。

+

WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば same-origin ポリシー) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中に はHTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (ServiceWorkers や Push など)。

-

さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、Notifications API (通知 API) はポップアップのダイアログボックスを用いて許可を要求します:

+

さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、Notifications API (通知 API) はポップアップのダイアログボックスを用いて許可を要求します:

-

+

-

Web Audio および {{domxref("HTMLMediaElement")}} API には、自動再生 (autoplay) ポリシー と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。

+

Web Audio および {{domxref("HTMLMediaElement")}} API には、自動再生 (autoplay) ポリシー と呼ばれるセキュリティ機構が適用されます。これは、基本的に、ページの読み込み時に音声を自動的に再生できないことを意味します。ユーザーに次のことを許可する必要があります。ボタンのようなコントロールを介して音声再生を開始します。これは、音声の自動再生は通常非常に煩わしいものであり、ユーザーにそれを課すべきではないためです。

注記: ブラウザーの厳格さによっては、このようなセキュリティ機構により、例がローカルで機能しなくなる場合があります。つまり、ローカルの例のファイルをウェブサーバーから実行するのではなく、ブラウザーに読み込んだ場合です。執筆時点では、Web Audio API の例はローカルでは Google Chrome で動作しません。動作する前に、GitHub にアップロードする必要がありました。

@@ -293,7 +293,7 @@ request.onload = function() {
  • ドキュメントの操作
  • サーバからのデータ取得
  • サードパーティ API
    • -
  • グラフィックの描画
    • +
  • グラフィックの描画
  • 動画と音声の API
  • クライアント側ストレージ
    • -- cgit v1.2.3-54-g00ecf