オーディオソースからデータを抽出するには {{ domxref("AudioContext.createAnalyser()") }} メソッドを使用して作成された {{ domxref("AnalyserNode") }} が必要です。 例:
-
-アナライザノードは、{{domxref("AnalyserNode.fftSize")}}プロパティ値（指定されていない場合は、デフォルトは 2048 です）として指定する内容に応じて、特定の周波数ドメインで高速フーリエ変換（fft）を使用してオーディオデータをキャプチャします。
-
-データを取得するには、周波数データを取得するために{{domxref("AnalyserNode.getFloatFrequencyData()")}}および{{domxref("AnalyserNode.getByteFrequencyData()")}}メソッドを使用する必要があります。{{domxref("AnalyserNode.getByteTimeDomainData()")}}と{{domxref(" AnalyserNode.getFloatTimeDomainData()")}}を使用して波形データを取得します。
-
-これらのメソッドはデータを指定された配列にコピーするので、データを受け取る前に新しい配列を作成して呼び出す必要があります。最初のものは 32 ビットの浮動小数点数を生成し、2番目と 3番目のものは 8 ビットの符号なし整数を生成するため、標準の JavaScript配列ではなく、扱うデータに応じて{{domxref("Float32Array")}}または {{domxref("Uint8Array")}}配列を使う必要があります。
-
-たとえば、2048 の fft サイズを扱っているとします、fft の半分である{{domxref("AnalyserNode.frequencyBinCount")}}の値を返し、frequencyBinCount を引数として Uint8Array()を呼び出します。これがその fft サイズで収集するデータポイントの数です。
-
-オーディオデータを配列に取り込んだ時点で可視化することができます。たとえば、HTML5 {{htmlelement("canvas")}}にプロットすることができます。
-
-キャンバスの幅を配列の長さ(先ほど定義した frequencyBinCount と等しい)で除算することによって描かれる線の各セグメントの幅を決定し、次に、変数 x を定義して、パスの各セグメントを描画するために移動する位置を定義します。
-
-次にループを実行して、バッファ内の各ポイントの波の小さなセグメントの位置を、配列からのデータポイント値に基づいて特定の高さに定義し、線を次の波セグメントが描画されるべき場所に移動させます。
-
-次に作成する素敵な小さなサウンドビジュアライゼーションは、Winamp のような周波数棒グラフの 1 つです。私たちは Voice-change-O-matic で入手できるものを持っています。それがどのように行われたかを見てみましょう。
-
-今度はバーの幅をキャンバスの幅をバーの数で割った値（バッファの長さ）に等しくなるように設定します。しかし、その幅を 2.5倍にしています。なぜなら、毎日聞いている音の大部分が特定の低い周波数帯にあるので、ほとんどの周波数がその中にオーディオを持たないものとして戻ってくるからです。空の棒グラフを表示したくないので、棒の位置をずらして、意味のある高さを持つものでキャンバスの表示を埋めます。
-
-一部のブラウザでは、{{domxref("Crypto")}} というインターフェイスが明確に定義されておらず、暗号化されていなくても実装されていました。混乱を避けるために、このインタフェイスのメソッドとプロパティは Web Crypto API を実装しているブラウザから削除され、すべての Web Crypto API メソッドは新しいインターフェイス、つまり {{domxref("SubtleCrypto")}} で利用可能になりました。{{domxref("Crypto.subtle")}} プロパティはそれを実装しているオブジェクトへのアクセスを提供します
-
-Web Periodic Background Synchonization APIは、 {{domxref('Service Worker API','service worker')}} 上で定期的にネットワーク通信ができる状況で走るタスクを登録する機能を提供します。それらのタスクを周期的なバックグラウンド同期リクエスト (periodic background sync requests) と呼びます。
-
-Periodic Background Sync API により、ウェブアプリケーションが定期的にサービスワーカーにアップデートを行うよう知らせることができます。利用法としては、デバイスがWiFiに接続している間に最新のコンテンツを取得したり、アプリケーションをバックグラウンドでアップデートしたりすることが挙げられます。
-
-APIが呼び出された際には最小の時間間隔がセットされますが、サービスワーカーがそのイベントを受け取るタイミングに影響を与える様々な要素をユーザーエージェントは考慮します。その要素には、例えばウェブサイトのエンゲージメントや特定のネットワークへの接続などがあります。
-
-{{domxref('PeriodicSyncManager')}} インターフェースは {{domxref('ServiceWorkerRegistration.periodicSync')}} によって提供されます。一意のタグが sync イベントの 'name' として設定され、これは {{domxref('ServiceWorker')}} スクリプト内で取得することができます。イベントを受け取った際には、キャッシュのアップデートや新たなリソースの取得といった任意の利用可能な機能を実行することができます
-
-The following additions to the {{domxref('Service Worker API')}} are specified in the Periodic Background Sync specification to provide an entry point for using Periodic Background Sync.
-
-The following examples show how to use the interface.
-
-The following asynchronous function registers a periodic background sync at a minimum interval of one day from a browsing context:
-
-This code checks to see if a Periodic Background Sync task with a given tag is registered.
-
-The following code removes a Periodic Background Sync task to stop articles syncing in the background.
-
-The following example shows how to respond to a periodic sync event in the service worker.
-
-Web Speech API は、音声認識と音声合成（text to speech または tts としても知られています）という 2 つの異なる分野の機能を提供しており、アクセシビリティと制御メカニズムに興味深い新しい可能性をもたらします。この記事では、両方の分野の簡単な紹介とデモを提供します。
-
-音声認識ではデバイスのマイクを通して音声を受信し、音声認識サービスによって文法のリスト（基本的には特定のアプリで認識させたいボキャブラリー）と照合されます。単語やフレーズが正常に認識されると、結果（または結果のリスト）がテキスト文字列として返され、その結果としてさらなるアクションを開始することができます。
-
-Web Speech API には、このための主要なコントローラインターフェイスである {{domxref("SpeechRecognition")}} と、文法や結果などを表現するためのいくつかの密接に関連したインターフェースがあります。一般的には、デバイス上で利用可能なデフォルトの音声認識システムが音声認識に使用されます — 最近のほとんどのOSには音声コマンドを発行するための音声認識システムが搭載されています。macOSのDictation、iOSのSiri、Windows 10のCortana、AndroidのSpeechなどを考えてみてください。
-
-Web Speech API 音声認識のサポートは、通常 Chrome for Desktop と Android に限られています — Chrome はバージョン 33 付近からサポートしていますが、プレフィックス付きのインターフェイスを使用しているため、 webkitSpeechRecognition などのプレフィックス付きバージョンを含める必要があります。
-
-前述したように、Chrome は現在プレフィックス付きのプロパティで音声認識をサポートしているので、適切なオブジェクトを Chrome に供給し、そして将来的な実装でプレフィックスなしの機能をサポートする可能性も踏まえ、以下の行をコードの最初に追加しています。
-
-次にやるべきことは、アプリケーションの認識を制御する音声認識インスタンスを定義することです。これは {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} コンストラクタを使用して行います。また、{{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} コンストラクタを使用して、文法を含む新しい音声文法リストも作成します。
-
-次に、 {{domxref("SpeechGrammarList")}} を {{domxref("SpeechRecognition.grammars")}} プロパティの値に設定することで、音声認識インスタンスに {{domxref("SpeechGrammarList")}} を追加します。次に進む前に、認識インスタンスの他のいくつかのプロパティも設定します。
-
-出力 {{htmlelement("div")}} とHTML要素への参照を取得（診断メッセージを出力したり、後でアプリの背景色を更新したりできるようにするため）した後、画面がタップ/クリックされたときに音声認識サービスが開始されるように onclick ハンドラを実装します。これは {{domxref("SpeechRecognition.start()")}} を呼び出すことで実現しています。 forEach() メソッドは何色を言っているかを示す色付きインジケータを出力するために使われています。
-
-ここの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()")}}) を使用します）。
-
-最後の 2 つのハンドラは、定義された文法にない音声が認識されたケースやエラーが発生したケースを処理するためのものです。{{domxref("SpeechRecognition.onnomatch")}} は最初に言及したケースを処理することになっているようですが、今のところ正しく動作しているようには見えないことに注意してください（とにかく認識されたものを返すだけです）。
-
-{{domxref("SpeechRecognition.onerror")}} は、認識に成功して実際にエラーが発生したケースを処理します — {{domxref("SpeechRecognitionError.error")}} プロパティには、返された実際のエラーが含まれます。
-
-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.
-
-Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:
-
-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.)
-
-Let's investigate the JavaScript that powers this app.
-
-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.)
-
-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.
-
-Tap/click then say a color to change the background color of the app.
+ = ' + 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","クッキー")}}を使用するよりも直感的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。
-
-Web Storage の概念と使用方法
-
-Web Storage には、以下の 2 種類の仕組みがあります:
-
-
- sessionStorage は、ページのセッション中 (ページの再読み込みや復元を含む、ブラウザーを開いている間) に使用可能な、{{glossary("origin","オリジン")}}ごとに区切られた保存領域を管理します。
-
-
- - セッションデータのみを保存します。つまり、データはブラウザ（またはタブ）が閉じられるまで保存されます。
- - データがサーバに転送されることはありません。
- - ストレージの制限がクッキーよりも大きいです（最大 5MB ）。
-
- localStorage も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
-
- - 有効期限なしでデータを保存し、 JavaScript を介してクリアされます。もしくは、ブラウザキャッシュ/ローカルに保存したデータのクリアによりクリアされます。
- - ストレージ制限は3つの中で最大です。
-
-
-
-これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、サポートするブラウザーは Window オブジェクトが WindowLocalStorage および WindowSessionStorage オブジェクトを実装しており、これらに localStorage および sessionStorage プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して sessionStorage と localStorage は、別の Storage オブジェクトを使用します。 これらは別々に制御されて機能します。
-
-
-
注記: Firefox 45 より、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。 Web Storage の使用量が過大であることによって発生するメモリの問題を避けるために、制限を設定しました。
-
Web Storage インターフェイス
-
-
- - {{domxref("Storage")}}
- - 特定のドメインおよびストレージタイプ (session または local) に対して、データを保存、取り出し、削除できます。
- - {{domxref("Window")}}
- - Web Storage API は {{domxref("Window")}} オブジェクトを、{{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} という新たなプロパティで拡張します。 これらは、それぞれ現在のドメインの session および local {{domxref("Storage")}} オブジェクトへのアクセス手段を提供します。 また、保存領域が変更される (例えば新たなアイテムを保存する) と発生する、{{domxref("Window.onstorage")}} イベントハンドラもあります。
- - {{domxref("StorageEvent")}}
- storage イベントは、保存領域が変更されたときにドキュメントの Window オブジェクトで発生します。
-
-例
-
-Web Storage の典型的な使用法を示すため、想像力豊かに Web Storage Demo と名づけたシンプルな例を作成しました。 ランディングページには、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。 別の選択肢を選ぶと、即座にページが更新されます。 さらに、選択内容を localStorage に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。
-
-また、event output ページも提供します。 このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。
-
-仕様
-
-
-
-
- | 仕様書 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} |
- {{Spec2('HTML WHATWG')}} |
- |
-
-
-
-
-ブラウザー実装状況
-
-Window.localStorage
-
-
-
{{Compat("api.Window.localStorage")}}
-
-
Window.sessionStorage
-
-
-
{{Compat("api.Window.sessionStorage")}}
-
-
プライベートブラウジング / シークレットモード
-
-ほとんどの現行ブラウザーは 'シークレット' や 'プライベートブラウジング' などと呼ばれる、履歴やクッキーといったデータを保存しないプライバシーモードをサポートしています。 これらは明白な理由で、Web Storage とは根本的に互換性がありません。 それでもブラウザーベンダーは、この非互換性をどのように扱うかを、さまざまなシナリオで実験しています。
-
-ほとんどのブラウザーは Storage API を有効にして、見かけ上完全に機能する方針をとっていますが、保存したデータはすべて、ブラウザーを閉じた後に消去されることが大きな違いです。 これらのブラウザーでは、既存の保存済みデータ (通常のブラウジングセッションで保存したもの) をどう扱うかについて、まださまざまな解釈が存在します。 このデータはプライベートモードで読み出せるべきでしょうか? 一部のブラウザー、特に Safari ではストレージは使用できますが空であり、また割り当てられたクォータが 0 バイトであるため事実上データを書き込めないという解決策をとっています。
-
-開発者はこれらのさまざまな実装を意識して、Web Storage API に依存する Web サイトを開発する際に考慮するべきです。 詳しくはこのトピックを扱った、WHATWG のブログ記事（英語）をご覧ください。
-
-関連情報
-
-
diff --git a/files/ja/web/api/web_storage_api/index.md b/files/ja/web/api/web_storage_api/index.md
new file mode 100644
index 00000000000000..651150ba691ad3
--- /dev/null
+++ b/files/ja/web/api/web_storage_api/index.md
@@ -0,0 +1,83 @@
+---
+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","クッキー")}}を使用するよりも直感的な方法で、ブラウザーがキーと値のペアを保存できる仕組みを提供します。
+
+## Web Storage の概念と使用方法
+
+Web Storage には、以下の 2 種類の仕組みがあります:
+
+- `sessionStorage` は、ページのセッション中 (ページの再読み込みや復元を含む、ブラウザーを開いている間) に使用可能な、{{glossary("origin","オリジン")}}ごとに区切られた保存領域を管理します。
+
+ - セッションデータのみを保存します。つまり、データはブラウザ（またはタブ）が閉じられるまで保存されます。
+ - データがサーバに転送されることはありません。
+ - ストレージの制限がクッキーよりも大きいです（最大 5MB ）。
+
+- `localStorage` も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
+
+ - 有効期限なしでデータを保存し、 JavaScript を介してクリアされます。もしくは、ブラウザキャッシュ/ローカルに保存したデータのクリアによりクリアされます。
+ - ストレージ制限は 3 つの中で最大です。
+
+これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、サポートするブラウザーは `Window` オブジェクトが `WindowLocalStorage` および `WindowSessionStorage` オブジェクトを実装しており、これらに `localStorage` および `sessionStorage` プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。 同じオリジンに対して `sessionStorage` と `localStorage` は、別の Storage オブジェクトを使用します。 これらは別々に制御されて機能します。
+
+> **Note:** **注記**: Firefox 45 より、ブラウザーがクラッシュまたは再起動したとき、オリジンごとに保存されるデータ量は 10MB に制限されます。 Web Storage の使用量が過大であることによって発生するメモリの問題を避けるために、制限を設定しました。
+
+> **Note:** **注記**: ユーザーが[サードパーティのクッキーを禁止している](https://support.mozilla.org/kb/disable-third-party-cookies)（英語）場合は、サードパーティの iframe から Web Storage にアクセスできません ([Firefox 43](/ja/docs/Mozilla/Firefox/Releases/43) から、この動作を実装しています)。
+
+> **Note:** **注記:** Web Storage は、[mozStorage](/ja/docs/Storage "Storage") (SQLite 用の、Mozilla の XPCOM インターフェイス) や [Session store API](/ja/docs/Session_store_API "Session_store_API") (拡張機能で使用するための、[XPCOM](/ja/docs/XPCOM "XPCOM") ストレージユーティリティ) とは異なります。
+
+## Web Storage インターフェイス
+
+- {{domxref("Storage")}}
+ - : 特定のドメインおよびストレージタイプ (session または local) に対して、データを保存、取り出し、削除できます。
+- {{domxref("Window")}}
+ - : Web Storage API は {{domxref("Window")}} オブジェクトを、{{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} という新たなプロパティで拡張します。 これらは、それぞれ現在のドメインの session および local {{domxref("Storage")}} オブジェクトへのアクセス手段を提供します。 また、保存領域が変更される (例えば新たなアイテムを保存する) と発生する、{{domxref("Window.onstorage")}} イベントハンドラもあります。
+- {{domxref("StorageEvent")}}
+ - : `storage` イベントは、保存領域が変更されたときにドキュメントの `Window` オブジェクトで発生します。
+
+## 例
+
+Web Storage の典型的な使用法を示すため、想像力豊かに [Web Storage Demo](https://github.com/mdn/dom-examples/tree/master/web-storage) と名づけたシンプルな例を作成しました。[ ランディングページ](https://mdn.github.io/dom-examples/web-storage/)には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります。 別の選択肢を選ぶと、即座にページが更新されます。 さらに、選択内容を `localStorage` に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。
+
+また、[event output ページ](https://mdn.github.io/dom-examples/web-storage/event.html)も提供します。 このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。
+
+## 仕様
+
+| 仕様書 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} | {{Spec2('HTML WHATWG')}} | |
+
+## ブラウザー実装状況
+
+### `Window.localStorage`
+
+{{Compat("api.Window.localStorage")}}
+
+### `Window.sessionStorage`
+
+{{Compat("api.Window.sessionStorage")}}
+
+## プライベートブラウジング / シークレットモード
+
+ほとんどの現行ブラウザーは 'シークレット' や 'プライベートブラウジング' などと呼ばれる、履歴やクッキーといったデータを保存しないプライバシーモードをサポートしています。 これらは明白な理由で、Web Storage とは根本的に互換性がありません。 それでもブラウザーベンダーは、この非互換性をどのように扱うかを、さまざまなシナリオで実験しています。
+
+ほとんどのブラウザーは Storage API を有効にして、見かけ上完全に機能する方針をとっていますが、保存したデータはすべて、ブラウザーを閉じた後に消去されることが大きな違いです。 これらのブラウザーでは、既存の保存済みデータ (通常のブラウジングセッションで保存したもの) をどう扱うかについて、まださまざまな解釈が存在します。 このデータはプライベートモードで読み出せるべきでしょうか? 一部のブラウザー、特に Safari ではストレージは使用できますが空であり、また割り当てられたクォータが 0 バイトであるため事実上データを書き込めないという解決策をとっています。
+
+開発者はこれらのさまざまな実装を意識して、Web Storage API に依存する Web サイトを開発する際に考慮するべきです。 詳しくはこのトピックを扱った、[WHATWG のブログ記事](https://blog.whatwg.org/tag/localstorage)（英語）をご覧ください。
+
+## 関連情報
+
+- [Web Storage API を使用する](/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [ブラウザーのストレージ制限と削除基準](/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria)
+- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b)
diff --git a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.html
deleted file mode 100644
index bc01e7d0cd7a99..00000000000000
--- a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.html
+++ /dev/null
@@ -1,224 +0,0 @@
----
-title: Web Storage API の使用
-slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
-tags:
- - API
- - Guide
- - Storage
- - Web Storage API
- - localStorage
- - sessionStorage
-translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
----
-{{DefaultAPISidebar("Web Storage API")}}
-
-Web Storage API は、ブラウザーがキーと値のペアを安全に保存できる仕組みを提供します。
-
-この記事は、この技術を利用する方法のチュートリアルを提供します。
-
-基本概念
-
-Storage オブジェクトはシンプルなキーと値の組み合わせを保存しており、オブジェクトに似ていますが、これらは何度ページを読み込んでも存在し続けます。キーは常に文字列です (なお、オブジェクトと同様、整数のキーは自動的に文字列に変換されます)。これらの値にアクセスするにはオブジェクトと同様に、または {{domxref("Storage.getItem()")}} と {{domxref("Storage.setItem()")}} メソッドを使用して行います。以下の 3 行はすべて、(同じ) colorSetting という項目を設定します。
-
-localStorage.colorSetting = '#a4509b';
-localStorage['colorSetting'] = '#a4509b';
-localStorage.setItem('colorSetting', '#a4509b');
-
-
-
注: Web Storage API (setItem, getItem, removeItem, key, length) の使用が推奨されており、これは単純なオブジェクトをキーバリューストアとして使うという落とし穴を防ぐためです。
-
Web Storage には、以下の 2 種類の仕組みがあります。
-
-
- - セッションストレージ (
sessionStorage) は、各オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) に使用可能です。
- - ローカルストレージ (
localStorage) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
-
-
-これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、対応しているブラウザーは Window オブジェクトが WindowLocalStorage および WindowSessionStorage オブジェクトを実装しており、これらに localStorage および sessionStorage プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。同じ生成元に対して sessionStorage と localStorage は、別の Storage オブジェクトを使用します。これらは別々に制御されて機能します。
-
-よって例えば、始めに文書上で localStorage を呼び出すと {{domxref("Storage")}} が返ります。その後に文書上で sessionStorage を呼び出すと、別の {{domxref("Storage")}} オブジェクトが返ります。どちらも同じ方法で操作することができますが、操作は個別に行われます。
-
-localStorage の機能検出
-
-ローカルストレージを利用できるようにするには、まず対応済みであり、現在のブラウザーセッションで利用可能であるかを確かめるべきです。
-
-利用可能かどうかのを検証
-
-ローカルストレージに対応しているブラウザーは、 window オブジェクトに localStorage という名称のプロパティを持っています。しかしさまざまな理由で、プロパティが存在すると主張するだけで例外が発生する可能性があります。ローカルストレージが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに対応していても、ページ上のスクリプトでは利用できる状態ではない場合があります。
-
-例えば Safari はプライベートブラウジングモードでは、容量が 0 で空のローカルストレージを提供しますので、事実上使用できません。逆に、正規の QuotaExceededError が発生した場合、これはストレージ領域を使い切ったことを意味しますが、ストレージは実際に利用可能です。機能検出時には、これらのシナリオを考慮に入れるべきです。
-
-ローカルストレージに対応済みかつ使用可能であるかどうかを検出する関数を、以下に示します。
-
-function storageAvailable(type) {
- var storage;
- try {
- storage = window[type];
- var x = '__storage_test__';
- storage.setItem(x, x);
- storage.removeItem(x);
- return true;
- }
- catch(e) {
- return e instanceof DOMException && (
- // everything except Firefox
- e.code === 22 ||
- // Firefox
- e.code === 1014 ||
- // test name field too, because code might not be present
- // everything except Firefox
- e.name === 'QuotaExceededError' ||
- // Firefox
- e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
- // acknowledge QuotaExceededError only if there's something already stored
- (storage && storage.length !== 0);
- }
-}
-
-また、この関数の使い方は以下のとおりです。
-
-if (storageAvailable('localStorage')) {
- // やったあ! ローカルストレージをちゃんと利用できます
-}
-else {
- // 残念、ローカルストレージは利用できません
-}
-
-storageAvailable('sessionStorage') を呼び出すと、代わりにセッションストレージを確認できます。
-
-ローカルストレージの機能を検出する方法の略歴をご覧ください。
-
-例
-
-ウェブストレージの典型的な使用法を示すため、想像力豊かに Web Storage Demo と名づけたシンプルな例を作成しました。ランディングページ には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります:
-
-
別の選択肢を選ぶと、即座にページが更新されます。さらに、選択内容を localStorage に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。
-
-また、 event output ページも提供します。このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。
-
-
-
-
-
-ストレージが存在しているかを確認する
-
-始めに main.js で、ストレージオブジェクトがすでに存在しているか (すなわち、過去にページへアクセスしていたか) を確認します。
-
-if(!localStorage.getItem('bgcolor')) {
- populateStorage();
-} else {
- setStyles();
-}
-
-{{domxref("Storage.getItem()")}} メソッドは、ストレージからデータアイテムを取得するために使用します。この例では、 bgcolor アイテムが存在するかを確認しています。アイテムが存在しなければ、既存のカスタマイズ値をストレージへ追加するために populateStorage() を実行します。すでに値が存在する場合は、ページのスタイルを保存済みの値で更新するために setStyles() を実行します。
-
-メモ: {{domxref("Storage.length")}} を使用して、ストレージオブジェクトが空であるかを確認することもできます。
-
-ストレージから値を取得する
-
-前述のとおり {{domxref("Storage.getItem()")}} を使用して、ストレージから値を取り出すことができます。これはデータアイテムのキーが引数であり、またデータの値を返します。例えば以下のようにします。
-
-function setStyles() {
- var currentColor = localStorage.getItem('bgcolor');
- var currentFont = localStorage.getItem('font');
- var currentImage = localStorage.getItem('image');
-
- document.getElementById('bgcolor').value = currentColor;
- document.getElementById('font').value = currentFont;
- document.getElementById('image').value = currentImage;
-
- htmlElem.style.backgroundColor = '#' + currentColor;
- pElem.style.fontFamily = currentFont;
- imgElem.setAttribute('src', currentImage);
-}
-
-この例で、最初の 3 行はローカルストレージから値を取得しています。次に、フォーム要素で表示する値をこれらの値に更新して、ページを再読み込みしたときに同期するようにします。最後に、ページのスタイルや装飾画像を更新して、再読み込み時にカスタマイズ設定を復元します。
-
-ストレージに値を設定する
-
-{{domxref("Storage.setItem()")}} は新たなデータアイテムを作成するため、および (データアイテムがすでに存在していれば) 既存の値を更新するために使用します。これは引数が 2 つあり、ひとつは作成または変更するデータアイテムのキー、もうひとつはデータアイテムに保存する値です。
-
-function populateStorage() {
- localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
- localStorage.setItem('font', document.getElementById('font').value);
- localStorage.setItem('image', document.getElementById('image').value);
-
- setStyles();
-}
-
-populateStorage() 関数は、背景色、フォント、画像のパスの 3 つのアイテムをローカルストレージに保存します。そして、ページのスタイルなどを更新するために setStyles() 関数を実行します。
-
-また、それぞれのフォーム要素に onchange ハンドラーを含めておき、フォームの値が変更されるたびにデータやスタイルを更新します。
-
-bgcolorForm.onchange = populateStorage;
-fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;
-
-StorageEvent を使用してストレージの変更に反応する
-
-{{domxref("StorageEvent")}} は、{{domxref("Storage")}} オブジェクトが変更されるたびに発生します (sessionStorage の変更では発生しません) 。これは、変更を行ったページ上では効果がないでしょう。実際は、ストレージを使用するドメイン上の別のページで、ストレージの変更に同期するための手段です。別のドメイン上のページは、前述のストレージオブジェクトにアクセスできません。
-
-イベントページ (events.js をご覧ください) には、以下の JavaScript しかありません。
-
-window.addEventListener('storage', function(e) {
- document.querySelector('.my-key').textContent = e.key;
- document.querySelector('.my-old').textContent = e.oldValue;
- document.querySelector('.my-new').textContent = e.newValue;
- document.querySelector('.my-url').textContent = e.url;
- document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
-});
-
-ここでは window オブジェクトに、現在のオリジンに関連付けられた {{domxref("Storage")}} オブジェクトが変更されたときに発生するイベントリスナを追加しています。上記の例でわかるとおり、このイベントに関連付けられたイベントオブジェクトは、変更されたデータのキー、変更前の古い値、変更後の新しい値、ストレージを変更した文書の URL、ストレージオブジェクト自体 (その中身を見えるように文字化しています) といった、役に立つ情報を含んでいるいくつものプロパティを持っています。
-
-データレコードの削除
-
-ウェブストレージには、データを削除するためのシンプルなメソッドが 2 つあります。このデモでは使用していませんが、プロジェクトへとても簡単に追加できます:
-
-
- - {{domxref("Storage.removeItem()")}} は引数が 1 つあり、削除したいデータアイテムのキーです。これは、当該ドメインのストレージオブジェクトからデータアイテムを削除します。
- - {{domxref("Storage.clear()")}} は引数がなく、当該ドメインのストレージオブジェクト全体を空にします。
-
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
-
-
- | {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} |
- {{Spec2('HTML WHATWG')}} |
- |
-
-
-
-
-ブラウザーの互換性
-
-Window.localStorage
-
-
-
{{Compat("api.Window.localStorage")}}
-
-
Window.sessionStorage
-
-
-
{{Compat("api.Window.sessionStorage")}}
-
-
すべてのブラウザーで、ローカルストレージおよびセッションストレージが受け入れる容量は異なります。さまざまなブラウザーのストレージ容量を報告しているページがあります。
-
-関連情報
-
-
diff --git a/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
new file mode 100644
index 00000000000000..2a2c78f3344132
--- /dev/null
+++ b/files/ja/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -0,0 +1,213 @@
+---
+title: Web Storage API の使用
+slug: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+tags:
+ - API
+ - Guide
+ - Storage
+ - Web Storage API
+ - localStorage
+ - sessionStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+{{DefaultAPISidebar("Web Storage API")}}
+
+Web Storage API は、ブラウザーがキーと値のペアを安全に保存できる仕組みを提供します。
+
+この記事は、この技術を利用する方法のチュートリアルを提供します。
+
+## 基本概念
+
+Storage オブジェクトはシンプルなキーと値の組み合わせを保存しており、オブジェクトに似ていますが、これらは何度ページを読み込んでも存在し続けます。キーは常に文字列です (なお、オブジェクトと同様、整数のキーは自動的に文字列に変換されます)。これらの値にアクセスするにはオブジェクトと同様に、または {{domxref("Storage.getItem()")}} と {{domxref("Storage.setItem()")}} メソッドを使用して行います。以下の 3 行はすべて、(同じ) colorSetting という項目を設定します。
+
+```js
+localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+```
+
+> **Note:** **注**: Web Storage API (`setItem`, `getItem`, `removeItem`, `key`, `length`) の使用が推奨されており、これは単純なオブジェクトをキーバリューストアとして使うという[落とし穴](http://www.2ality.com/2012/01/objects-as-maps.html)を防ぐためです。
+
+Web Storage には、以下の 2 種類の仕組みがあります。
+
+- セッションストレージ (**`sessionStorage`**) は、各オリジン毎に分割された保存領域を管理し、これはページセッションの間 (ブラウザーを開いている間、ページの再読み込みや復元を含む) に使用可能です。
+- ローカルストレージ (**`localStorage`**) も同様ですが、こちらはブラウザーを閉じたり再び開いたりしても持続します。
+
+これらの仕組みは {{domxref("Window.sessionStorage")}} および {{domxref("Window.localStorage")}} プロパティ (正確には、対応しているブラウザーは `Window` オブジェクトが `WindowLocalStorage` および `WindowSessionStorage` オブジェクトを実装しており、これらに `localStorage` および `sessionStorage` プロパティがあります) を通して使用でき、いずれかのプロパティを使用すると {{domxref("Storage")}} オブジェクトのインスタンスを生成して、データアイテムの保存、取り出し、削除ができます。同じ生成元に対して `sessionStorage` と `localStorage` は、別の Storage オブジェクトを使用します。これらは別々に制御されて機能します。
+
+よって例えば、始めに文書上で `localStorage` を呼び出すと {{domxref("Storage")}} が返ります。その後に文書上で `sessionStorage` を呼び出すと、別の {{domxref("Storage")}} オブジェクトが返ります。どちらも同じ方法で操作することができますが、操作は個別に行われます。
+
+## localStorage の機能検出
+
+ローカルストレージを利用できるようにするには、まず対応済みであり、現在のブラウザーセッションで利用可能であるかを確かめるべきです。
+
+### 利用可能かどうかのを検証
+
+ローカルストレージに対応しているブラウザーは、 window オブジェクトに localStorage という名称のプロパティを持っています。しかしさまざまな理由で、プロパティが存在すると主張するだけで例外が発生する可能性があります。ローカルストレージが存在していたとしても、さまざまなブラウザーがローカルストレージを無効化する設定を設けていますので、ローカルストレージが利用できる保証はありません。よってブラウザーがローカルストレージに*対応していても*、ページ上のスクリプトでは*利用できる状態ではない*場合があります。
+
+例えば Safari はプライベートブラウジングモードでは、容量が 0 で空のローカルストレージを提供しますので、事実上使用できません。逆に、正規の QuotaExceededError が発生した場合、これはストレージ領域を使い切ったことを意味しますが、ストレージは実際に*利用可能*です。機能検出時には、これらのシナリオを考慮に入れるべきです。
+
+ローカルストレージに対応済みかつ使用可能であるかどうかを検出する関数を、以下に示します。
+
+```js
+function storageAvailable(type) {
+ var storage;
+ try {
+ storage = window[type];
+ var x = '__storage_test__';
+ storage.setItem(x, x);
+ storage.removeItem(x);
+ return true;
+ }
+ catch(e) {
+ return e instanceof DOMException && (
+ // everything except Firefox
+ e.code === 22 ||
+ // Firefox
+ e.code === 1014 ||
+ // test name field too, because code might not be present
+ // everything except Firefox
+ e.name === 'QuotaExceededError' ||
+ // Firefox
+ e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+ // acknowledge QuotaExceededError only if there's something already stored
+ (storage && storage.length !== 0);
+ }
+}
+```
+
+また、この関数の使い方は以下のとおりです。
+
+```js
+if (storageAvailable('localStorage')) {
+ // やったあ! ローカルストレージをちゃんと利用できます
+}
+else {
+ // 残念、ローカルストレージは利用できません
+}
+```
+
+`storageAvailable('sessionStorage')` を呼び出すと、代わりにセッションストレージを確認できます。
+
+[ローカルストレージの機能を検出する方法の略歴](https://gist.github.com/paulirish/5558557)をご覧ください。
+
+## 例
+
+ウェブストレージの典型的な使用法を示すため、想像力豊かに **Web Storage Demo** と名づけたシンプルな例を作成しました。[ランディングページ](https://mdn.github.io/dom-examples/web-storage/) には、色、フォント、装飾画像をカスタマイズするためのコントロールがあります:
+
+別の選択肢を選ぶと、即座にページが更新されます。さらに、選択内容を `localStorage` に保存しますので、別のページに移動した後に再びこのページを読み込むと、選択内容が維持されています。
+
+また、 [event output ページ](https://mdn.github.io/dom-examples/web-storage/event.html)も提供します。このページを別のタブで開くと、ランディングページで選択肢を変更したときに {{domxref("StorageEvent")}} が発生するのに応じて、更新されたストレージの情報が出力されるのを確認できます。
+
+
+
+> **Note:** **メモ**: 上記のリンクから実際のページを参照することができます。また、[ソースコードも確認できます](https://github.com/mdn/dom-examples/tree/master/web-storage)。
+
+### ストレージが存在しているかを確認する
+
+始めに [main.js](https://github.com/mdn/dom-examples/blob/master/web-storage/main.js) で、ストレージオブジェクトがすでに存在しているか (すなわち、過去にページへアクセスしていたか) を確認します。
+
+```js
+if(!localStorage.getItem('bgcolor')) {
+ populateStorage();
+} else {
+ setStyles();
+}
+```
+
+{{domxref("Storage.getItem()")}} メソッドは、ストレージからデータアイテムを取得するために使用します。この例では、 `bgcolor` アイテムが存在するかを確認しています。アイテムが存在しなければ、既存のカスタマイズ値をストレージへ追加するために `populateStorage()` を実行します。すでに値が存在する場合は、ページのスタイルを保存済みの値で更新するために `setStyles()` を実行します。
+
+**メモ**: {{domxref("Storage.length")}} を使用して、ストレージオブジェクトが空であるかを確認することもできます。
+
+### ストレージから値を取得する
+
+前述のとおり {{domxref("Storage.getItem()")}} を使用して、ストレージから値を取り出すことができます。これはデータアイテムのキーが引数であり、またデータの値を返します。例えば以下のようにします。
+
+```js
+function setStyles() {
+ var currentColor = localStorage.getItem('bgcolor');
+ var currentFont = localStorage.getItem('font');
+ var currentImage = localStorage.getItem('image');
+
+ document.getElementById('bgcolor').value = currentColor;
+ document.getElementById('font').value = currentFont;
+ document.getElementById('image').value = currentImage;
+
+ htmlElem.style.backgroundColor = '#' + currentColor;
+ pElem.style.fontFamily = currentFont;
+ imgElem.setAttribute('src', currentImage);
+}
+```
+
+この例で、最初の 3 行はローカルストレージから値を取得しています。次に、フォーム要素で表示する値をこれらの値に更新して、ページを再読み込みしたときに同期するようにします。最後に、ページのスタイルや装飾画像を更新して、再読み込み時にカスタマイズ設定を復元します。
+
+### ストレージに値を設定する
+
+{{domxref("Storage.setItem()")}} は新たなデータアイテムを作成するため、および (データアイテムがすでに存在していれば) 既存の値を更新するために使用します。これは引数が 2 つあり、ひとつは作成または変更するデータアイテムのキー、もうひとつはデータアイテムに保存する値です。
+
+```js
+function populateStorage() {
+ localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+ localStorage.setItem('font', document.getElementById('font').value);
+ localStorage.setItem('image', document.getElementById('image').value);
+
+ setStyles();
+}
+```
+
+`populateStorage()` 関数は、背景色、フォント、画像のパスの 3 つのアイテムをローカルストレージに保存します。そして、ページのスタイルなどを更新するために `setStyles()` 関数を実行します。
+
+また、それぞれのフォーム要素に `onchange` ハンドラーを含めておき、フォームの値が変更されるたびにデータやスタイルを更新します。
+
+```js
+bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+```
+
+### StorageEvent を使用してストレージの変更に反応する
+
+{{domxref("StorageEvent")}} は、{{domxref("Storage")}} オブジェクトが変更されるたびに発生します (sessionStorage の変更では発生しません) 。これは、変更を行ったページ上では効果がないでしょう。実際は、ストレージを使用するドメイン上の別のページで、ストレージの変更に同期するための手段です。別のドメイン上のページは、前述のストレージオブジェクトにアクセスできません。
+
+イベントページ ([events.js](https://github.com/mdn/dom-examples/blob/master/web-storage/event.js) をご覧ください) には、以下の JavaScript しかありません。
+
+```js
+window.addEventListener('storage', function(e) {
+ document.querySelector('.my-key').textContent = e.key;
+ document.querySelector('.my-old').textContent = e.oldValue;
+ document.querySelector('.my-new').textContent = e.newValue;
+ document.querySelector('.my-url').textContent = e.url;
+ document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});
+```
+
+ここでは `window` オブジェクトに、現在のオリジンに関連付けられた {{domxref("Storage")}} オブジェクトが変更されたときに発生するイベントリスナを追加しています。上記の例でわかるとおり、このイベントに関連付けられたイベントオブジェクトは、変更されたデータのキー、変更前の古い値、変更後の新しい値、ストレージを変更した文書の URL、ストレージオブジェクト自体 (その中身を見えるように文字化しています) といった、役に立つ情報を含んでいるいくつものプロパティを持っています。
+
+### データレコードの削除
+
+ウェブストレージには、データを削除するためのシンプルなメソッドが 2 つあります。このデモでは使用していませんが、プロジェクトへとても簡単に追加できます:
+
+- {{domxref("Storage.removeItem()")}} は引数が 1 つあり、削除したいデータアイテムのキーです。これは、当該ドメインのストレージオブジェクトからデータアイテムを削除します。
+- {{domxref("Storage.clear()")}} は引数がなく、当該ドメインのストレージオブジェクト全体を空にします。
+
+## 仕様書
+
+| 仕様書 | 状態 | 備考 |
+| ---------------------------------------------------------------------------- | -------------------------------- | ---- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} | {{Spec2('HTML WHATWG')}} | |
+
+## ブラウザーの互換性
+
+### `Window.localStorage`
+
+{{Compat("api.Window.localStorage")}}
+
+### `Window.sessionStorage`
+
+{{Compat("api.Window.sessionStorage")}}
+
+すべてのブラウザーで、ローカルストレージおよびセッションストレージが受け入れる容量は異なります。[さまざまなブラウザーのストレージ容量を報告しているページ](http://dev-test.nemikor.com/web-storage/support-test/)があります。
+
+## 関連情報
+
+- [Web Storage API のランディングページ](/ja/docs/Web/API/Web_Storage_API)
diff --git a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
deleted file mode 100644
index 00db6871a46f05..00000000000000
--- a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.html
+++ /dev/null
@@ -1,380 +0,0 @@
----
-title: Web Workers が使用できる関数とクラス
-slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
-tags:
- - Reference
- - Web
- - Web Worker
- - Worker
-translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
----
-標準的な JavaScript の関数（{{jsxref("String")}} や {{jsxref("Array")}}、{{jsxref("Object")}}、 {{jsxref("JSON")}} など）に加えて、DOMから worker に利用できる様々な関数があります。この記事ではそれらの機能のリストを提供します。
-
-Worker は、現在の window とは異なるグローバルコンテキスト、 {{domxref("DedicatedWorkerGlobalScope")}} で実行されます。既定では {{domxref("Window")}} のメソッドとプロパティは使用できませんが、Window に似ている {{domxref("DedicatedWorkerGlobalScope")}} は {{domxref("WindowTimers")}} と {{domxref("WindowBase64")}} を実装しています。
-
-worker の種類別のプロパティとメソッドの比較
-
-
-
-
-
-
-
-
-
-
-
-
- | {{domxref("WindowBase64.atob", "atob()")}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("Window")}} で使用可能。 |
-
-
- | {{domxref("WindowBase64.btoa", "btoa()")}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("Window")}} で使用可能。 |
-
-
- | {{domxref("WindowTimers.clearInterval", "clearInterval()")}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("Window")}} で使用可能。 |
-
-
- | {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("Window")}} で使用可能。 |
-
-
- | {{domxref("Window.dump()", "dump()")}} {{non-standard_inline}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("Window")}} で使用可能。 |
-
-
- | {{domxref("WindowTimers.setInterval", "setInterval()")}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("Window")}} で使用可能。 |
-
-
- | {{domxref("WindowTimers.setTimeout", "setTimeout()")}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("Window")}} で使用可能。 |
-
-
- | {{domxref("WorkerGlobalScope.importScripts", "importScripts()")}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- 使用不可。 |
-
-
- | {{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}} |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- {{domxref("WorkerGlobalScope")}} で使用可能。 |
- 使用可能だが、何も実行しない。 |
- 不明。 |
- 使用不可。 |
-
-
- | {{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}} |
- {{domxref("DedicatedWorkerGlobalScope")}} で使用可能。 |
- 使用不可。 |
- 使用不可。 |
- 不明。 |
- 使用不可。 |
-
-
-
-
-worker で使用できる API
-
-
-
-
-
-
-
-
-
-
-
-
- | {{domxref("Broadcast_Channel_API","Broadcast Channel API")}} |
- 同じ {{glossary("origin", "オリジン")}}（通常は同じサイトのページ）で {{glossary("browsing context", "ブラウジングコンテキスト")}}（window 、 tab、frame、あるいはiframe）間の単純な通信ができる。 |
- {{ CompatGeckoDesktop(38)}} |
- {{CompatNo}} |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{domxref("Cache", "Cache")}} |
- Cache API は現在のオリジンと関連付けられたキャッシュストレージをプログラムで制御する機能を提供する。 |
- {{CompatVersionUnknown}} |
- {{CompatNo}} |
- {{ CompatChrome(43) }} |
- {{CompatUnknown}} |
-
-
- | {{domxref("Channel_Messaging_API", "Channel Messaging API")}} |
-
- 同じ document に添付されている異なるブラウジングコンテキスト（たとえば、2つのiFrame、あるいはメインの document とiFrame、{{domxref("SharedWorker")}} を介した2つの document 、あるいは2つの worker ）にて、2つの別々のスクリプトが2 つのポートを介して 直接通信できる。
- |
- {{ CompatGeckoDesktop(41)}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{domxref("Console", "Console API")}} |
- ブラウザーのデバッグコンソールへのアクセスを提供する（たとえば、Firefox の Web コンソール）。どのように動作するかの詳細はブラウザーごとに異なるが、一般的に提供されている機能セットのデファクトである。 |
- {{ CompatGeckoDesktop(38)}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{domxref("CustomEvent")}} |
- CustomEvent インターフェースは、あらゆる用途でアプリケーションによって初期化されるイベントを表す。 |
- {{ CompatGeckoDesktop(48)}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{domxref("Data_Store_API", "Data Store")}} |
- 複数の Firefox OS アプリケーションで、素早く効率的かつセキュアな相互のデータの保存や共有を行うための強力で柔軟なストレージ機構。 |
- v1.0.1 から、Firefox OS 内部（認定の通った）アプリケーションのみ。 |
- {{CompatNo}} |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{domxref("DOMRequest")}} と {{domxref("DOMCursor")}} |
- それぞれ、これらのオブジェクトは進行中の操作と（たとえば、成功時や失敗時の操作に反応するリスナを使って）、結果リストを跨いだ進行中の操作を表す。 |
- {{ CompatGeckoDesktop(41)}} |
- {{CompatUnknown}} |
- {{CompatUnknown}} |
- {{CompatUnknown}} |
-
-
- | {{domxref("Fetch_API", "Fetch")}} |
- Fetch 仕様はリソースを取得について、最新定義と、取得用の API （たとえば、ネットワーク経由で）を提供する。 |
- 多くは{{ CompatGeckoDesktop(34)}} に（設定が必要）、いくつかの機能はそれ以降で。 |
- {{CompatNo}} |
- {{ CompatChrome(42) }}
- {{ CompatChrome(41) }} 設定が必要 |
- {{CompatNo}} |
-
-
- | {{domxref("FileReader")}} |
- この API では、 {{domxref("Blob")}} と {{domxref("File")}} オブジェクトの非同期読み取りが可能。 |
- {{CompatGeckoDesktop(46)}} |
- {{CompatNo}} |
- {{CompatVersionUnknown}} |
- {{CompatNo}} |
-
-
- | {{domxref("FileReaderSync")}} |
- この API では、{{domxref("Blob")}} と {{domxref("File")}} オブジェクトの同期読み取りが可能。worker 内でのみ実行可能な API。 |
- {{CompatGeckoDesktop(8)}} |
- {{CompatNo}} |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{domxref("FormData")}} |
- FormData オブジェクトは、XMLHttpRequest send() メソッドを使用して送信できる Form フィールドとその値を表す key/value ペアのセットを簡単に構築する方法を提供する。 |
- {{CompatUnknown}} （{{CompatGeckoDesktop(39)}} で実装されているはずである） |
- {{CompatUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatUnknown}} |
-
-
- | {{domxref("ImageData")}} |
- {{domxref("canvas")}} 要素の領域の下にあるピクセルデータ。このデータ操作は、Web Worker に委任したほうが適しているような、複雑な処理になりうる。 |
- {{CompatGeckoDesktop(25)}} |
- {{CompatNo}} |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{domxref("IndexedDB_API", "IndexedDB")}} |
- シンプルな値と階層的なオブジェクトを保持するレコードを保存するデータベース。 |
- {{CompatGeckoDesktop(37)}}, {{domxref("IDBCursorWithValue")}} は {{CompatGeckoDesktop(42)}} から。 |
- 10.0 |
- {{CompatVersionUnknown}} |
- {{CompatNo}} |
-
-
- | Network Information API |
- システムの接続についての情報を汎用的な接続タイプ(例えば 'wifi', 'cellular' など)の用語で提供する。 |
- {{CompatGeckoMobile(53)}} モバイルのみ |
- {{CompatVersionUnknown}} モバイルのみ |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{domxref("Notifications_API", "Notifications")}} |
- Web ページがエンドユーザーへのシステム通知の表示を制御できるようにする。 |
- {{CompatGeckoDesktop(41)}} |
- {{CompatUnknown}} |
- {{CompatUnknown}} |
- {{CompatUnknown}} |
-
-
- | {{domxref("Performance")}} |
- Performance インターフェースは、指定されたページのタイミング関連のパフォーマンス情報を表す。 |
- {{ CompatGeckoDesktop("34.0") }} |
- {{CompatUnknown}} |
- {{ CompatChrome("33.0") }} |
- {{CompatUnknown}} |
-
-
- | {{domxref("PerformanceEntry")}}, {{domxref("PerformanceMeasure")}}, {{domxref("PerformanceMark")}}, {{domxref("PerformanceObserver")}}, {{domxref("PerformanceResourceTiming")}} |
- アプリケーションのネットワークの性能についていくつかの面から詳細なデータを獲得、分析することを可能にする。 |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{jsxref("Promise")}} |
- 非同期関数を記述できる JavaScript オブジェクト。 |
- {{CompatGeckoDesktop(28)}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | Server-sent events |
- サーバーから、接続が開いた後に、あらゆる箇所のウェブページにデータをプッシュさせる。 |
- {{CompatGeckoDesktop(53)}} (今のところ専用 worker と共有 worker でのみ有効; service worker では無効) |
- {{CompatUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatUnknown}} |
-
-
- | {{domxref("ServiceWorkerRegistration")}} |
- 標準 worker の内部から service worker を登録して、関連する機能を使用できる。 |
- {{CompatGeckoDesktop(40)}} |
- {{CompatNo}} |
- {{CompatVersionUnknown}} |
- {{CompatNo}} |
-
-
- | {{domxref("TextEncoder")}} と {{domxref("TextDecoder")}} |
- 特定のエンコーディングに エンコード、またはでコードできる新しい {{domxref("TextEncoder")}} や {{domxref("TextDecoder")}} を生成して返す。 |
- {{CompatGeckoDesktop(20)}} |
- {{CompatNo}} |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{ domxref("URL") }} |
-
- Worker にアクセスできる {{domxref("Blob")}} とともに URL.createObjectURL と URL.revokeObjectURL 静的メソッドを使用できる。
- Worker は {{domxref("URL.URL", "URL()")}} コンストラクタを使用して新しい URL を生成し、返されたオブジェクトの通常のメソッドを呼び出せる。
- |
- {{CompatGeckoDesktop(21)}}。URL() コンストラクタは {{CompatGeckoDesktop(26)}} から。 |
- {{CompatNo}} |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{domxref("OffscreenCanvas")}} の WebGL |
- WebGL（Web グラフィックライブラリ）は、プラグインを使用せずにブラウザー互換性を保ちながらインタラクティブな 3D と 2D レンダリングができる JavaScript API である。 |
- {{CompatGeckoDesktop(44)}}（設定で有効化する）。about:config で、gfx.offscreencanvas.enabled を true に設定する。 |
- {{CompatNo}} |
- {{CompatNo}} |
- {{CompatNo}} |
-
-
- | {{domxref("WebSocket")}} |
- 新しい {{domxref("WebSocket")}} オブジェクトを生成して返す。これは標準の WebSocket() コンストラクタの動作を模倣する。 |
- {{CompatGeckoDesktop(37)}} |
- 11.0 |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{domxref("Worker")}} |
- 新しい {{ domxref("Worker") }} を生成する。worker はより多くの worker を生成できる。 |
- {{CompatGeckoDesktop("1.9.1")}} |
- 10.0 |
- {{CompatNo}} crbug.com/31666 を見てください。 |
- {{CompatNo}} |
-
-
- | {{domxref("WorkerGlobalScope")}} |
- グローバルスコープの worker。このオブジェクトは Worker 特有の関数を定義する。 |
- {{CompatVersionUnknown}} |
- 10.0 |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{domxref("WorkerLocation")}} |
- worker で使用可能な {{domxref("Location")}} インターフェースのサブセット。 |
- {{CompatGeckoDesktop(1.9.2)}} |
- 10.0 |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{domxref("WorkerNavigator")}} |
- worker で使用可能な {{domxref("Navigator")}} インターフェースのサブセット。 |
-
- 基本実装 {{CompatVersionUnknown}}
- {{domxref("NavigatorID.appCodeName", "appCodeName")}}、{{domxref("NavigatorID.product", "product")}}、{{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}：{{CompatGeckoDesktop(28)}}
- {{domxref("WorkerNavigator.onLine", "onLine")}}：{{CompatGeckoDesktop(29)}}
- {{domxref("NavigatorLanguage")}}: {{CompatVersionUnknown}}
- |
- {{domxref("NavigatorID.appName", "appName")}}、{{domxref("NavigatorID.appVersion", "appVersion")}}、{{domxref("WorkerNavigator.onLine", "onLine")}}、{{domxref("NavigatorID.platform", "platform")}}、{{domxref("NavigatorID.userAgent", "userAgent")}}： 10.0
- Other： {{CompatNo}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
- | {{domxref("XMLHttpRequest")}} |
- 新しい {{domxref("XMLHttpRequest")}} オブジェクトを生成して返す。これは標準の XMLHttpRequest() コンストラクタの動作を模倣する。XMLHttpRequest の responseXML と channel 属性は常に null を返すことに注意。 |
-
- 基本： {{CompatGeckoDesktop("1.9.1")}}
-
- {{domxref("XMLHttpRequest.response", "response")}} と {{domxref("XMLHttpRequest.responseType", "responseType")}} は、{{CompatGeckoDesktop("10")}} から使用可能。
-
- {{domxref("XMLHttpRequest.timeout", "timeout")}} と {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} は、{{CompatGeckoDesktop("13")}} から使用可能。
- |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
- {{CompatVersionUnknown}} |
-
-
-
-
-関連項目
-
-
diff --git a/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
new file mode 100644
index 00000000000000..59d38585b075fe
--- /dev/null
+++ b/files/ja/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
@@ -0,0 +1,67 @@
+---
+title: Web Workers が使用できる関数とクラス
+slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+tags:
+ - Reference
+ - Web
+ - Web Worker
+ - Worker
+translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
+---
+標準的な [JavaScript](/ja/docs/Web/JavaScript) の関数（{{jsxref("String")}} や {{jsxref("Array")}}、{{jsxref("Object")}}、 {{jsxref("JSON")}} など）に加えて、DOM から worker に利用できる様々な関数があります。この記事ではそれらの機能のリストを提供します。
+
+**Worker は、現在の window とは異なるグローバルコンテキスト、 {{domxref("DedicatedWorkerGlobalScope")}} で実行されます。**既定では {{domxref("Window")}} のメソッドとプロパティは使用できませんが、`Window` に似ている {{domxref("DedicatedWorkerGlobalScope")}} は {{domxref("WindowTimers")}} と {{domxref("WindowBase64")}} を実装しています。
+
+## worker の種類別のプロパティとメソッドの比較
+
+| 関数 | 専用 workers | 共有 workers | サービス workers | Chrome workers {{Non-standard_inline}} | workers の外側 |
+| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------- |
+| {{domxref("WindowBase64.atob", "atob()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 |
+| {{domxref("WindowBase64.btoa", "btoa()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 |
+| {{domxref("WindowTimers.clearInterval", "clearInterval()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 |
+| {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 |
+| {{domxref("Window.dump()", "dump()")}} {{non-standard_inline}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 |
+| {{domxref("WindowTimers.setInterval", "setInterval()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 |
+| {{domxref("WindowTimers.setTimeout", "setTimeout()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("Window")}} で使用可能。 |
+| {{domxref("WorkerGlobalScope.importScripts", "importScripts()")}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | 使用不可。 |
+| {{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}} | {{domxref("WorkerGlobalScope")}} で使用可能。 | {{domxref("WorkerGlobalScope")}} で使用可能。 | 使用可能だが、何も実行しない。 | 不明。 | 使用不可。 |
+| {{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}} | {{domxref("DedicatedWorkerGlobalScope")}} で使用可能。 | 使用不可。 | 使用不可。 | 不明。 | 使用不可。 |
+
+## worker で使用できる API
+
+| 関数 | 機能 | Gecko（Firefox）のサポート状況 | IE のサポート状況 | Blink（Chrome と Opera） のサポート状況 | WebKit（Safari） のサポート状況 |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{domxref("Broadcast_Channel_API","Broadcast Channel API")}} | 同じ {{glossary("origin", "オリジン")}}（通常は同じサイトのページ）で {{glossary("browsing context", "ブラウジングコンテキスト")}}（_window_ 、 _tab_、*frame、*あるいは*iframe*）間の単純な通信ができる。 | {{ CompatGeckoDesktop(38)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
+| {{domxref("Cache", "Cache")}} | Cache API は現在のオリジンと関連付けられたキャッシュストレージをプログラムで制御する機能を提供する。 | {{CompatVersionUnknown}} | {{CompatNo}} | {{ CompatChrome(43) }} | {{CompatUnknown}} |
+| {{domxref("Channel_Messaging_API", "Channel Messaging API")}} | 同じ document に添付されている異なるブラウジングコンテキスト（たとえば、2 つの iFrame、あるいはメインの document と iFrame、{{domxref("SharedWorker")}} を介した 2 つの document 、あるいは 2 つの worker ）にて、2 つの別々のスクリプトが 2 つのポートを介して 直接通信できる。 | {{ CompatGeckoDesktop(41)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{domxref("Console", "Console API")}} | ブラウザーのデバッグコンソールへのアクセスを提供する（たとえば、Firefox の [Web コンソール](/ja/docs/Tools/Web_Console)）。どのように動作するかの詳細はブラウザーごとに異なるが、一般的に提供されている機能セットの*デファクト*である。 | {{ CompatGeckoDesktop(38)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{domxref("CustomEvent")}} | **`CustomEvent`** インターフェースは、あらゆる用途でアプリケーションによって初期化されるイベントを表す。 | {{ CompatGeckoDesktop(48)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{domxref("Data_Store_API", "Data Store")}} | 複数の Firefox OS アプリケーションで、素早く効率的かつセキュアな相互のデータの保存や共有を行うための強力で柔軟なストレージ機構。 | v1.0.1 から、Firefox OS 内部（認定の通った）アプリケーションのみ。 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
+| {{domxref("DOMRequest")}} と {{domxref("DOMCursor")}} | それぞれ、これらのオブジェクトは進行中の操作と（たとえば、成功時や失敗時の操作に反応するリスナを使って）、結果リストを跨いだ進行中の操作を表す。 | {{ CompatGeckoDesktop(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
+| {{domxref("Fetch_API", "Fetch")}} | Fetch 仕様はリソースを取得について、最新定義と、取得用の API （たとえば、ネットワーク経由で）を提供する。 | 多くは{{ CompatGeckoDesktop(34)}} に（設定が必要）、いくつかの機能はそれ以降で。 | {{CompatNo}} | {{ CompatChrome(42) }} {{ CompatChrome(41) }} 設定が必要 | {{CompatNo}} |
+| {{domxref("FileReader")}} | この API では、 {{domxref("Blob")}} と {{domxref("File")}} オブジェクトの非同期読み取りが可能。 | {{CompatGeckoDesktop(46)}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} |
+| {{domxref("FileReaderSync")}} | この API では、{{domxref("Blob")}} と {{domxref("File")}} オブジェクトの同期読み取りが可能。worker 内でのみ実行可能な API。 | {{CompatGeckoDesktop(8)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
+| {{domxref("FormData")}} | `FormData` オブジェクトは、XMLHttpRequest [`send()`]( "XMLHttpRequest#send()") メソッドを使用して送信できる Form フィールドとその値を表す key/value ペアのセットを簡単に構築する方法を提供する。 | {{CompatUnknown}} （{{CompatGeckoDesktop(39)}} で実装されているはずである） | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} |
+| {{domxref("ImageData")}} | {{domxref("canvas")}} 要素の領域の下にあるピクセルデータ。このデータ操作は、Web Worker に委任したほうが適しているような、複雑な処理になりうる。 | {{CompatGeckoDesktop(25)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
+| {{domxref("IndexedDB_API", "IndexedDB")}} | シンプルな値と階層的なオブジェクトを保持するレコードを保存するデータベース。 | {{CompatGeckoDesktop(37)}}, {{domxref("IDBCursorWithValue")}} は {{CompatGeckoDesktop(42)}} から。 | 10.0 | {{CompatVersionUnknown}} | {{CompatNo}} |
+| [Network Information API](/ja/docs/Web/API/Network_Information_API) | システムの接続についての情報を汎用的な接続タイプ(例えば 'wifi', 'cellular' など)の用語で提供する。 | {{CompatGeckoMobile(53)}} モバイルのみ | {{CompatVersionUnknown}} モバイルのみ | {{CompatNo}} | {{CompatNo}} |
+| {{domxref("Notifications_API", "Notifications")}} | Web ページがエンドユーザーへのシステム通知の表示を制御できるようにする。 | {{CompatGeckoDesktop(41)}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
+| {{domxref("Performance")}} | **`Performance`** インターフェースは、指定されたページのタイミング関連のパフォーマンス情報を表す。 | {{ CompatGeckoDesktop("34.0") }} | {{CompatUnknown}} | {{ CompatChrome("33.0") }} | {{CompatUnknown}} |
+| {{domxref("PerformanceEntry")}}, {{domxref("PerformanceMeasure")}}, {{domxref("PerformanceMark")}}, {{domxref("PerformanceObserver")}}, {{domxref("PerformanceResourceTiming")}} | アプリケーションのネットワークの性能についていくつかの面から詳細なデータを獲得、分析することを可能にする。 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{jsxref("Promise")}} | 非同期関数を記述できる JavaScript オブジェクト。 | {{CompatGeckoDesktop(28)}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| [Server-sent events](/ja/docs/Web/API/Server-sent_events) | サーバーから、接続が開いた後に、あらゆる箇所のウェブページにデータをプッシュさせる。 | {{CompatGeckoDesktop(53)}} (今のところ専用 worker と共有 worker でのみ有効; service worker では無効) | {{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatUnknown}} |
+| {{domxref("ServiceWorkerRegistration")}} | 標準 worker の内部から service worker を登録して、関連する機能を使用できる。 | {{CompatGeckoDesktop(40)}} | {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatNo}} |
+| {{domxref("TextEncoder")}} と {{domxref("TextDecoder")}} | 特定のエンコーディングに エンコード、またはでコードできる新しい {{domxref("TextEncoder")}} や {{domxref("TextDecoder")}} を生成して返す。 | {{CompatGeckoDesktop(20)}} | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
+| {{ domxref("URL") }} | Worker にアクセスできる {{domxref("Blob")}} とともに [URL.createObjectURL](/ja/docs/DOM/window.URL.createObjectURL) と [URL.revokeObjectURL](/ja/docs/DOM/window.URL.revokeObjectURL) 静的メソッドを使用できる。 Worker は {{domxref("URL.URL", "URL()")}} コンストラクタを使用して新しい URL を生成し、返されたオブジェクトの通常のメソッドを呼び出せる。 | {{CompatGeckoDesktop(21)}}。URL() コンストラクタは {{CompatGeckoDesktop(26)}} から。 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
+| {{domxref("OffscreenCanvas")}} の [WebGL](/ja/docs/Web/API/WebGL_API) | WebGL（Web グラフィックライブラリ）は、プラグインを使用せずにブラウザー互換性を保ちながらインタラクティブな 3D と 2D レンダリングができる JavaScript API である。 | {{CompatGeckoDesktop(44)}}（設定で有効化する）。`about:config` で、`gfx.offscreencanvas.enabled` を true に設定する。 | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} |
+| {{domxref("WebSocket")}} | 新しい {{domxref("WebSocket")}} オブジェクトを生成して返す。これは標準の `WebSocket()` コンストラクタの動作を模倣する。 | {{CompatGeckoDesktop(37)}} | 11.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{domxref("Worker")}} | 新しい {{ domxref("Worker") }} を生成する。worker はより多くの worker を生成できる。 | {{CompatGeckoDesktop("1.9.1")}} | 10.0 | {{CompatNo}} [crbug.com/31666](https://code.google.com/p/chromium/issues/detail?id=31666) を見てください。 | {{CompatNo}} |
+| {{domxref("WorkerGlobalScope")}} | グローバルスコープの worker。このオブジェクトは [Worker 特有の関数](#workerscope)を定義する。 | {{CompatVersionUnknown}} | 10.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{domxref("WorkerLocation")}} | worker で使用可能な {{domxref("Location")}} インターフェースのサブセット。 | {{CompatGeckoDesktop(1.9.2)}} | 10.0 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{domxref("WorkerNavigator")}} | worker で使用可能な {{domxref("Navigator")}} インターフェースのサブセット。 | 基本実装 {{CompatVersionUnknown}} {{domxref("NavigatorID.appCodeName", "appCodeName")}}、{{domxref("NavigatorID.product", "product")}}、{{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}：{{CompatGeckoDesktop(28)}} {{domxref("WorkerNavigator.onLine", "onLine")}}：{{CompatGeckoDesktop(29)}} {{domxref("NavigatorLanguage")}}: {{CompatVersionUnknown}} | {{domxref("NavigatorID.appName", "appName")}}、{{domxref("NavigatorID.appVersion", "appVersion")}}、{{domxref("WorkerNavigator.onLine", "onLine")}}、{{domxref("NavigatorID.platform", "platform")}}、{{domxref("NavigatorID.userAgent", "userAgent")}}： 10.0 Other： {{CompatNo}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+| {{domxref("XMLHttpRequest")}} | 新しい {{domxref("XMLHttpRequest")}} オブジェクトを生成して返す。これは標準の `XMLHttpRequest()` コンストラクタの動作を模倣する。`XMLHttpRequest` の `responseXML` と `channel` 属性は常に `null` を返すことに注意。 | 基本： {{CompatGeckoDesktop("1.9.1")}}{{domxref("XMLHttpRequest.response", "response")}} と {{domxref("XMLHttpRequest.responseType", "responseType")}} は、{{CompatGeckoDesktop("10")}} から使用可能。{{domxref("XMLHttpRequest.timeout", "timeout")}} と {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} は、{{CompatGeckoDesktop("13")}} から使用可能。 | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
+
+## 関連項目
+
+- [web worker を使用する](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
+- {{domxref("Worker")}}
diff --git a/files/ja/web/api/web_workers_api/index.html b/files/ja/web/api/web_workers_api/index.html
deleted file mode 100644
index be51d1648345b9..00000000000000
--- a/files/ja/web/api/web_workers_api/index.html
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: Web Workers API
-slug: Web/API/Web_Workers_API
-tags:
- - API
- - DOM
- - Web Workers
- - Workers
-translation_of: Web/API/Web_Workers_API
----
-{{DefaultAPISidebar("Web Workers API")}}
-
-Web Worker とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。
-
-Web Worker の概念と使い方
-
-{{DOMxRef("Worker")}} オブジェクトは {{DOMxRef("Worker.Worker", "Worker()")}} などのコンストラクターで生成されるオブジェクトで、名前を持つ JavaScript ファイルを実行します。 Worker のスレッドで実行されるコードはこのファイルに書かれており、今いる {{DOMxRef("window")}} とは別のグローバルなコンテキストの中で Worker がコードを実行します。Dedicated Worker (専用ワーカー) の場合、そのコンテキストは {{DOMxRef("DedicatedWorkerGlobalScope")}} オブジェクトで表現されます (通常の Worker は単一のスクリプトで使用されますが、 Worker を共有する際は {{DOMxRef("SharedWorkerGlobalScope")}} を使用します)。
-
-Worker のスレッドではあらゆるコードを実行できますが、いくつか例外があります。例えば、 Worker から DOM を直接操作することは出来ません。また、 {{DOMxRef("window")}} にデフォルトで用意されているメソッドやプロパティには Worker から使用できないものもあります。しかし、 WebSockets や IndexedDB のようなデータストレージに加え、 Firefox OS における Data Store API など、 window に含まれていても使用できるものは数多くあります。詳しくは Worker から使用できる関数とクラス を参照してください。
-
-Worker とメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は postMessage() メソッドを使ってメッセージを送信し、受け取ったメッセージには onmessage イベントハンドラーで返信します (メッセージは {{Event("Message")}} イベントの data 属性に格納されます)。なお、送信したデータは受取先でコピーされます (共有ではありません)。
-
-メインスレッドのページと同じオリジンであれば、 Web Workers は新しい Worker をいくつでも生成できます。また、 Worker はネットワーク I/O において XMLHttpRequest を使用しますが、 XMLHttpRequest における responseXML と channel 属性は必ず null を返す点で通常と異なります。
-
-Dedicated Worker の他にも、 Worker の種類には以下のようなものがあります。
-
-
- - Shared Worker (共有ワーカー) は、 iframe などの異なる window で実行されている複数のスクリプトから利用できる Worker です。それらのスクリプトと Worker は同じドメイン内にある必要があります。スクリプトどうしがアクティブなポートで通信しなければならないので、 Dedicated Worker よりも少し複雑です。詳しくは {{DOMxRef("SharedWorker")}} を参照してください。
- - ServiceWorker は、複数のウェブアプリケーション間やブラウザ、 (利用可能なら) ネットワークとの間でプロキシサーバーとして動くものです。他の Worker とは異なり、 Service Worker はオフラインでのユーザーエクスペリエンスを実現するために設計されています。ネットワークへのリクエストに割り込み、オンライン・オフラインそれぞれの場合に適した結果をユーザに返します。また、サーバ上のリソースの更新も担います。 Service Worker を使うことで、プッシュ通知やバックグラウンド同期の API も利用可能になります。
- - Chrome Worker は Firefox 上でのみ使える Worker です。アドオンの開発時、拡張機能で Web Workers を使いたいとき、または Worker の中で js-ctypes を使いたいときに用いることが出来ます。詳しくは {{DOMxRef("ChromeWorker")}} を参照してください。
- - Audio Worker は、音声処理を Worker のコンテキスト内でスクリプトで直接実行する能力を提供します。
-
-
-
-
メモ: Web Worker の仕様にあるように、Worker のエラーイベントはバブルするべきではありません (see {{bug(1188141)}}。これは Firefox 42 で実装されました。
-
-
-
Web Worker インターフェイス
-
-
- - {{DOMxRef("AbstractWorker")}}
- - {{DOMxRef("Worker")}} や {{DOMxRef("SharedWorker")}} など、すべての Worker に共通な抽象オブジェクトです。
- - {{DOMxRef("Worker")}}
- - 実行している Worker のスレッドを表します。実行している Worker のコードへメッセージを送る際に用います。
- - {{DOMxRef("WorkerLocation")}}
- - {{DOMxRef("Worker")}} で実行されるスクリプトの絶対位置を定義します。
- - {{DOMxRef("SharedWorker")}}
- - 複数のウィンドウ、 iframe、ワーカーなどいくつかの{{glossary("browsing context", "閲覧コンテキスト")}}から「アクセス可能な」具体的な種類の Worker を表します。
- - {{DOMxRef("WorkerGlobalScope")}}
- - {{DOMxRef("Window")}} のように通常のウェブコンテンツと同じ動作をする Worker の一般的なスコープを表します。これと異なる種類の Worker は、このインタフェースに独自の機能をいくつか加えたスコープを持ちます。
- - {{DOMxRef("DedicatedWorkerGlobalScope")}}
- - Dedicated Worker のスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。
- - {{DOMxRef("SharedWorkerGlobalScope")}}
- - Shared Worker のスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。
- - {{DOMxRef("WorkerNavigator")}}
- - ユーザエージェント (クライアント) に関する識別名と状態を表します。
-
-
-例
-
-簡単なデモと基本的な使い方は以下を参照してください。
-
-
-
-このデモの動く仕組みを詳しく知りたい場合は Web Worker を使用するを参照してください。
-
-仕様
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
- | {{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}} |
- {{Spec2("HTML WHATWG")}} |
- 初回定義 |
-
-
-
-
-あわせて参照
-
-
diff --git a/files/ja/web/api/web_workers_api/index.md b/files/ja/web/api/web_workers_api/index.md
new file mode 100644
index 00000000000000..03b60377c99a77
--- /dev/null
+++ b/files/ja/web/api/web_workers_api/index.md
@@ -0,0 +1,76 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+tags:
+ - API
+ - DOM
+ - Web Workers
+ - Workers
+translation_of: Web/API/Web_Workers_API
+---
+{{DefaultAPISidebar("Web Workers API")}}
+
+**Web Worker** とは、ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。
+
+## Web Worker の概念と使い方
+
+{{DOMxRef("Worker")}} オブジェクトは {{DOMxRef("Worker.Worker", "Worker()")}} などのコンストラクターで生成されるオブジェクトで、名前を持つ JavaScript ファイルを実行します。 Worker のスレッドで実行されるコードはこのファイルに書かれており、今いる {{DOMxRef("window")}} とは別のグローバルなコンテキストの中で Worker がコードを実行します。Dedicated Worker (専用ワーカー) の場合、そのコンテキストは {{DOMxRef("DedicatedWorkerGlobalScope")}} オブジェクトで表現されます (通常の Worker は単一のスクリプトで使用されますが、 Worker を共有する際は {{DOMxRef("SharedWorkerGlobalScope")}} を使用します)。
+
+Worker のスレッドではあらゆるコードを実行できますが、いくつか例外があります。例えば、 Worker から DOM を直接操作することは出来ません。また、 {{DOMxRef("window")}} にデフォルトで用意されているメソッドやプロパティには Worker から使用できないものもあります。しかし、 [WebSockets](/ja/docs/Web/API/WebSockets_API) や [IndexedDB](/ja/docs/Web/API/IndexedDB_API) のようなデータストレージに加え、 Firefox OS における [Data Store API](/ja/docs/Web/API/Data_Store_API) など、 `window` に含まれていても使用できるものは数多くあります。詳しくは [Worker から使用できる関数とクラス](/ja/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) を参照してください。
+
+Worker とメインスレッドとの間では、メッセージのシステムを通してデータがやり取りされます。両者は `postMessage()` メソッドを使ってメッセージを送信し、受け取ったメッセージには `onmessage` イベントハンドラーで返信します (メッセージは {{Event("Message")}} イベントの `data` 属性に格納されます)。なお、送信したデータは受取先でコピーされます (共有ではありません)。
+
+メインスレッドのページと同じオリジンであれば、 Web Workers は新しい Worker をいくつでも生成できます。また、 Worker はネットワーク I/O において [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) を使用しますが、 `XMLHttpRequest` における `responseXML` と `channel` 属性は必ず `null` を返す点で通常と異なります。
+
+Dedicated Worker の他にも、 Worker の種類には以下のようなものがあります。
+
+- Shared Worker (共有ワーカー) は、 iframe などの異なる window で実行されている複数のスクリプトから利用できる Worker です。それらのスクリプトと Worker は同じドメイン内にある必要があります。スクリプトどうしがアクティブなポートで通信しなければならないので、 Dedicated Worker よりも少し複雑です。詳しくは {{DOMxRef("SharedWorker")}} を参照してください。
+- [ServiceWorker](/ja/docs/Web/API/ServiceWorker_API) は、複数のウェブアプリケーション間やブラウザ、 (利用可能なら) ネットワークとの間でプロキシサーバーとして動くものです。他の Worker とは異なり、 Service Worker はオフラインでのユーザーエクスペリエンスを実現するために設計されています。ネットワークへのリクエストに割り込み、オンライン・オフラインそれぞれの場合に適した結果をユーザに返します。また、サーバ上のリソースの更新も担います。 Service Worker を使うことで、プッシュ通知やバックグラウンド同期の API も利用可能になります。
+- Chrome Worker は Firefox 上でのみ使える Worker です。アドオンの開発時、拡張機能で Web Workers を使いたいとき、または Worker の中で [js-ctypes](/ja/js-ctypes) を使いたいときに用いることが出来ます。詳しくは {{DOMxRef("ChromeWorker")}} を参照してください。
+- [Audio Worker](/ja/docs/Web/API/Web_Audio_API#Audio_Workers) は、音声処理を Worker のコンテキスト内でスクリプトで直接実行する能力を提供します。
+
+> **Note:** **メモ**: [Web Worker の仕様](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2)にあるように、Worker のエラーイベントはバブルするべきではありません (see {{bug(1188141)}}。これは Firefox 42 で実装されました。
+
+## Web Worker インターフェイス
+
+- {{DOMxRef("AbstractWorker")}}
+ - : {{DOMxRef("Worker")}} や {{DOMxRef("SharedWorker")}} など、すべての Worker に共通な抽象オブジェクトです。
+- {{DOMxRef("Worker")}}
+ - : 実行している Worker のスレッドを表します。実行している Worker のコードへメッセージを送る際に用います。
+- {{DOMxRef("WorkerLocation")}}
+ - : {{DOMxRef("Worker")}} で実行されるスクリプトの絶対位置を定義します。
+- {{DOMxRef("SharedWorker")}}
+ - : 複数のウィンドウ、 iframe、ワーカーなどいくつかの{{glossary("browsing context", "閲覧コンテキスト")}}から「アクセス可能な」具体的な種類の Worker を表します。
+- {{DOMxRef("WorkerGlobalScope")}}
+ - : {{DOMxRef("Window")}} のように通常のウェブコンテンツと同じ動作をする Worker の一般的なスコープを表します。これと異なる種類の Worker は、このインタフェースに独自の機能をいくつか加えたスコープを持ちます。
+- {{DOMxRef("DedicatedWorkerGlobalScope")}}
+ - : Dedicated Worker のスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。
+- {{DOMxRef("SharedWorkerGlobalScope")}}
+ - : Shared Worker のスコープを表します。 {{DOMxRef("WorkerGlobalScope")}} を継承しており、独自の機能がいくつか加えられています。
+- {{DOMxRef("WorkerNavigator")}}
+ - : ユーザエージェント (クライアント) に関する識別名と状態を表します。
+
+## 例
+
+簡単なデモと基本的な使い方は以下を参照してください。
+
+- [Basic dedicated worker example](https://github.com/mdn/simple-web-worker) ([run dedicated worker](http://mdn.github.io/simple-web-worker/)).
+- [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](http://mdn.github.io/simple-shared-worker/)).
+
+このデモの動く仕組みを詳しく知りたい場合は [Web Worker を使用する](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)を参照してください。
+
+## 仕様
+
+| 仕様書 | 状態 | 備考 |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}} | {{Spec2("HTML WHATWG")}} | 初回定義 |
+
+## あわせて参照
+
+- [Web Worker を使用する](/ja/docs/Web/API/Web_Workers_API/Using_web_workers)
+- [Worker インターフェイス](/ja/docs/Web/API/Worker)
+- [SharedWorker インターフェイス](/ja/docs/Web/API/SharedWorker)
+- [ServiceWorker API](/ja/docs/Web/API/ServiceWorker_API)
+- [Web Workers が使用できる関数とクラス](/ja/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
+- [Web Worker を使用する](/ja/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples)
+- [ChromeWorker](/ja/docs/Web/API/ChromeWorker): Worker の特権/クロームコードでの使用
diff --git a/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.html b/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.html
deleted file mode 100644
index e9e3424198f73e..00000000000000
--- a/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: 構造化複製アルゴリズム
-slug: Web/API/Web_Workers_API/Structured_clone_algorithm
-translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
----
-構造化複製アルゴリズム は複雑な JavaScript オブジェクトをコピーするためのアルゴリズムです。これは {{domxref("Worker.postMessage()", "postMessage()")}} を介して Worker と送受信するとき、IndexedDB にオブジェクトを格納するとき、他の API のためにオブジェクトをコピーするときなど、データ転送時に内部で用いられています。無限ループを避けるため、以前にアクセスした参照のマップを保持しながら、入力オブジェクトを再帰処理することで複製していきます。
-
-構造化複製で動作しないもの
-
-
- Function オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると DATA_CLONE_ERR 例外が送出されます。- DOM ノードを複製するときも同様に
DATA_CLONE_ERR 例外が送出されます。
- - 以下に挙げるオブジェクトのパラメーターは保持されません。
-
- RegExp オブジェクトの lastIndex フィールドは保持されません。- プロパティ記述子、セッター、ゲッター (もしくは同様のメタデータ系機能) は複製されません。たとえば、オブジェクトに プロパティ記述子 を使用して読み取り専用にしている場合でも、複製したものではデフォルトの条件である読み取り/書き込みに変わります。
- - プロトタイプチェーンは探索、複製されません。
-
-
-
-
-
-
メモ: ネイティブの Error 型は Chrome では複製できます。Firefox は 対応中 です。
-
サポート済みの型
-
-
-
-
- | オブジェクトの型 |
- 備考 |
-
-
-
-
- | すべてのプリミティブ型 |
- symbol を除く |
-
-
- | Boolean オブジェクト |
- |
-
-
- | String オブジェクト |
- |
-
-
- | Date |
- |
-
-
- | RegExp |
- lastIndex フィールドは保持されません。 |
-
-
- | {{ domxref("Blob") }} |
- |
-
-
- | {{ domxref("File") }} |
- |
-
-
- | {{ domxref("FileList") }} |
- |
-
-
- | ArrayBuffer |
- |
-
-
- | ArrayBufferView |
- 他の 型付き配列 を含む |
-
-
- | {{ domxref("ImageBitmap") }} |
- |
-
-
- | {{ domxref("ImageData") }} |
- |
-
-
- | Array |
- |
-
-
- | Object |
- これはプレーンオブジェクト (オブジェクトリテラルなど) のみ を含みます |
-
-
- | Map |
- |
-
-
- | Set |
- |
-
-
-
-
-関連情報
-
-
diff --git a/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.md
new file mode 100644
index 00000000000000..fe7b95db93785e
--- /dev/null
+++ b/files/ja/web/api/web_workers_api/structured_clone_algorithm/index.md
@@ -0,0 +1,48 @@
+---
+title: 構造化複製アルゴリズム
+slug: Web/API/Web_Workers_API/Structured_clone_algorithm
+translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
+---
+**構造化複製アルゴリズム** は複雑な JavaScript オブジェクトをコピーするためのアルゴリズムです。これは {{domxref("Worker.postMessage()", "postMessage()")}} を介して [Worker](/ja/docs/Web/API/Worker) と送受信するとき、[IndexedDB](/ja/docs/Glossary/IndexedDB) にオブジェクトを格納するとき、[他の API](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm$edit#See_Also) のためにオブジェクトをコピーするときなど、データ転送時に内部で用いられています。無限ループを避けるため、以前にアクセスした参照のマップを保持しながら、入力オブジェクトを再帰処理することで複製していきます。
+
+## 構造化複製で動作しないもの
+
+- [`Function`](/ja/JavaScript/Reference/Global_Objects/Function "en/JavaScript/Reference/Global Objects/Function") オブジェクトは構造化複製アルゴリズムでは複製されません。複製しようとすると `DATA_CLONE_ERR` 例外が送出されます。
+- DOM ノードを複製するときも同様に `DATA_CLONE_ERR` 例外が送出されます。
+- 以下に挙げるオブジェクトのパラメーターは保持されません。
+
+ - [`RegExp`](/ja/JavaScript/Reference/Global_Objects/RegExp "en/JavaScript/Reference/Global Objects/regexp") オブジェクトの `lastIndex` フィールドは保持されません。
+ - プロパティ記述子、セッター、ゲッター (もしくは同様のメタデータ系機能) は複製されません。たとえば、オブジェクトに [プロパティ記述子](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) を使用して読み取り専用にしている場合でも、複製したものではデフォルトの条件である読み取り/書き込みに変わります。
+ - プロトタイプチェーンは探索、複製されません。
+
+> **Note:** **メモ**: ネイティブの [`Error`](/ja/JavaScript/Reference/Global_Objects/Error "en/JavaScript/Reference/Global Objects/Error") 型は Chrome では複製できます。Firefox は [対応中](https://bugzilla.mozilla.org/show_bug.cgi?id=1556604) です。
+
+## サポート済みの型
+
+| オブジェクトの型 | 備考 |
+| ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
+| [すべてのプリミティブ型](/ja/docs/Web/JavaScript/Data_structures#Primitive_values) | symbol を除く |
+| [Boolean](/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean) オブジェクト | |
+| [String](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/String) オブジェクト | |
+| [Date](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date) | |
+| [RegExp](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp) | `lastIndex` フィールドは保持されません。 |
+| {{ domxref("Blob") }} | |
+| {{ domxref("File") }} | |
+| {{ domxref("FileList") }} | |
+| [ArrayBuffer](/ja/docs/Web/API/ArrayBuffer) | |
+| [ArrayBufferView](/ja/docs/Web/API/ArrayBufferView) | 他の [型付き配列](/ja/docs/Web/JavaScript/Typed_arrays) を含む |
+| {{ domxref("ImageBitmap") }} | |
+| {{ domxref("ImageData") }} | |
+| [Array](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array) | |
+| [Object](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object) | これはプレーンオブジェクト (オブジェクトリテラルなど) **のみ** を含みます |
+| [Map](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map) | |
+| [Set](/ja/docs/Web/JavaScript/Reference/Global_Objects/Set) | |
+
+## 関連情報
+
+- [HTML Specification: Safe passing of structured data](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data)
+- {{ domxref("window.history") }}
+- {{ domxref("window.postMessage()") }}
+- [Web Workers](/ja/docs/Web/API/Web_Workers_API)
+- [IndexedDB](/ja/docs/Web/API/IndexedDB_API)
+- [Components.utils.cloneInto](/ja/docs/Components.utils.cloneInto)
diff --git a/files/ja/web/api/webgl_api/basic_2d_animation_example/index.html b/files/ja/web/api/webgl_api/basic_2d_animation_example/index.html
deleted file mode 100644
index bad0c8dd0e1abd..00000000000000
--- a/files/ja/web/api/webgl_api/basic_2d_animation_example/index.html
+++ /dev/null
@@ -1,324 +0,0 @@
----
-title: 基本的な 2D WebGL アニメーションの例
-slug: Web/API/WebGL_API/Basic_2D_animation_example
-tags:
- - 2D Animation
- - 2D Graphics
- - Animation
- - Drawing
- - Example
- - WebGL
- - WebGL API
-translation_of: Web/API/WebGL_API/Basic_2D_animation_example
----
-{{WebGLSidebar}}
-
-
-
この WebGL の例では、キャンバスを作成し、その中に WebGL を使用して回転する四角形をレンダリングします。シーンを表すために使用する座標系は、キャンバスの座標系と同じです。つまり、(0, 0) は左上隅にあり、右下隅は (600, 460) となります。
-
-
頂点シェーダー
-
-
まず頂点シェーダーを見てみましょう。いつものように、シーンに使用している座標をクリップスペース座標に変換することです (つまり (0, 0) がコンテキストの中心にあり、コンテキストの実際のサイズに関係なく各軸が -1.0 から 1.0 に伸びるシステムです)
-
-
<script id="vertex-shader" type="x-shader/x-vertex">
- attribute vec2 aVertexPosition;
-
- uniform vec2 uScalingFactor;
- uniform vec2 uRotationVector;
-
- void main() {
- vec2 rotatedPosition = vec2(
- aVertexPosition.x * uRotationVector.y +
- aVertexPosition.y * uRotationVector.x,
- aVertexPosition.y * uRotationVector.y -
- aVertexPosition.x * uRotationVector.x
- );
-
- gl_Position = vec4(rotatedPosition * uScalingFactor, 0.0, 1.0);
- }
-</script>
-
-
メインプログラムは属性 aVertexPosition を共有します。これは使用している座標系の頂点の位置です。位置の両方のコンポーネントが -1.0 から 1.0 の範囲になるように、これらの値を変換する必要があります。これは、コンテキストのアスペクト比に基づいたスケーリング係数を掛けることで簡単に実行できます。この計算については、後ほど説明します。
-
-
形状も回転し、変換を適用することでそれを行うことができます。最初にそれを行います。頂点の回転位置は、JavaScript コードによって計算された均一な uRotationVector にある回転ベクトルを適用して計算されます。
-
-
次に、uScalingFactor の JavaScript コードによって提供されるスケーリングベクトルを回転位置に乗算することにより、最終位置が計算されます。2D で描画しているため、z と w の値はそれぞれ 0.0 と 1.0 に固定されています。
-
-
次に、標準 WebGL グローバル変数の gl_Position へ変換および回転された頂点の位置を設定します。
-
-
フラグメントシェーダー
-
-
次はフラグメントシェーダーです。その役割はレンダリングされる形状の各ピクセルの色を返すことです。ライティングが適用されていない、テクスチャのないソリッドオブジェクトを描画しているため、これは非常に簡単です:
-
-
<script id="fragment-shader" type="x-shader/x-fragment">
- #ifdef GL_ES
- precision highp float;
- #endif
-
- uniform vec4 uGlobalColor;
-
- void main() {
- gl_FragColor = uGlobalColor;
- }
-</script>
-
-
これは必要に応じて float 型の精度を指定することから始まります次に uniform 修飾子付きの uGlobalColor の値をグローバル変数 gl_FragColor へ設定します。これは、JavaScript コードにより正方形の描画に使用される色に設定されます。
-
-
HTML
-
-
HTML は、WebGL コンテキストを取得する {{HTMLElement("canvas")}} のみで構成されています。
-
-
<canvas id="glcanvas" width="600" height="460">
- Oh no! Your browser doesn't support canvas!
-</canvas>
-
-
JavaScript
-
-
グローバル変数と初期化
-
-
まず、グローバル変数。ここではこれらについては説明しません。代わりに、今後のコードで使用される場合について説明します。
-
-
let gl = null;
-let glCanvas = null;
-
-// Aspect ratio and coordinate system
-// details
-
-let aspectRatio;
-let currentRotation = [0, 1];
-let currentScale = [1.0, 1.0];
-
-// Vertex information
-
-let vertexArray;
-let vertexBuffer;
-let vertexNumComponents;
-let vertexCount;
-
-// Rendering data shared with the
-// scalers.
-
-let uScalingFactor;
-let uGlobalColor;
-let uRotationVector;
-let aVertexPosition;
-
-// Animation timing
-
-let previousTime = 0.0;
-let degreesPerSecond = 90.0;
-
-
-
プログラムの初期化は startup() と呼ばれる {{event("load")}} イベントハンドラーによって処理します:
-
-
window.addEventListener("load", startup, false);
-
-function startup() {
- glCanvas = document.getElementById("glcanvas");
- gl = glCanvas.getContext("webgl");
-
- const shaderSet = [
- {
- type: gl.VERTEX_SHADER,
- id: "vertex-shader"
- },
- {
- type: gl.FRAGMENT_SHADER,
- id: "fragment-shader"
- }
- ];
-
- shaderProgram = buildShaderProgram(shaderSet);
-
- aspectRatio = glCanvas.width/glCanvas.height;
- currentRotation = [0, 1];
- currentScale = [1.0, aspectRatio];
-
- vertexArray = new Float32Array([
- -0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
- -0.5, 0.5, 0.5, -0.5, -0.5, -0.5
- ]);
-
- vertexBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
-
- vertexNumComponents = 2;
- vertexCount = vertexArray.length/vertexNumComponents;
-
- currentAngle = 0.0;
- rotationRate = 6;
-
- animateScene();
-}
-
-
WebGL コンテキスト gl を取得し、シェーダープログラムを構築することから始める必要があります。ここでは、プログラムに複数のシェーダーを非常に簡単に追加できるように設計されたコードを使用しています。配列 shaderSet にはオブジェクトのリストが含まれ、各オブジェクトはプログラムにコンパイルされる 1 つのシェーダー関数を記述しています。各関数には、タイプ (gl.VERTEX_SHADER または gl.FRAGMENT_SHADER のいずれか) と ID (シェーダーのコードを含む {{HTMLElement("script")}} 要素の ID)。
-
-
シェーダーセットは buildShaderProgram() 関数に渡され、コンパイルされリンクされたシェーダープログラムを返します。次にこれがどのように機能するかを見ていきます。
-
-
シェーダープロシェグラムが構築し、幅を高さで割ってからコンテキストのアスペクト比を計算します。次に、アニメーションの現在の回転ベクトルを [0, 1] に設定し、スケーリングベクトルを [1.0, aspectRatio] に設定します。頂点シェーダーで見たスケーリングベクトルは、-1.0 から 1.0 の範囲に合うように座標をスケーリングするために使用されます。
-
-
次に頂点の配列が {{jsxref("Float32Array")}} として作成され、三角形ごとに 6 つの座標 (3 つの 2D 頂点) が描画され、合計 12 個の値が作成されます。
-
-
ご覧のとおり、各軸に -1.0 〜 1.0 の座標系を使用しています。なぜ調整する必要があるのでしょうか？これは単にコンテキストが正方形ではないためです。幅 600 ピクセル、高さ 460 のコンテキストを使用しています。これらの各ディメンションは、-1.0 〜 1.0 の範囲にマッピングされます。2 つの軸は同じ長さではないため、2 つの軸のいずれかの値を調整しないと、正方形は一方または他方に引き伸ばされます。したがって、これらの値を正規化する必要があります。
-
-
頂点配列が作成されたら、{{domxref("WebGLRenderingContext.createBuffer", "gl.createBuffer()")}} を呼び出し、それらを含む新しい GL バッファーを作成します。{{domxref("WebGLRenderingContext.bindBuffer", "gl.bindBuffer()")}} を呼び出して標準の WebGL 配列バッファー参照をバインドし、{{domxref("WebGLRenderingContext.bufferData", "gl.bufferData()")}} を使用して頂点データをバッファーにコピーします。gl.STATIC_DRAW の使用法が指定されており、データは 1 回だけ設定され、変更されることはありませんが、繰り返し使用されることを WebGL に伝えます。これにより、WebGL は、その情報に基づいてパフォーマンスを向上させる可能性のある、適用可能な最適化を検討します。
-
-
WebGL に提供される頂点データを使用して、vertexNumComponents を各頂点のコンポーネントの数 (2D 頂点であるため 2) に設定し、vertexCount を頂点リストの頂点の数に設定します。
-
-
次に、まだ回転を実行していないため、現在の回転角度 (度) を 0.0 に設定し、回転速度 (画面の更新期間ごとの度、通常 60 FPS) を 6 に設定します。
-
-
最後に、animateScene() が呼び出されて、最初のフレームをレンダリングし、アニメーションの次のフレームのレンダリングをスケジュールします。
-
-
シェーダープログラムのコンパイルとリンク
-
-
プログラムの構築とリンク
-
-
buildShaderProgram() 関数は、シェーダープログラムにコンパイルおよびリンクされるシェーダー関数のセットを記述するオブジェクトの配列を入力として受け取り、ビルドおよびリンク後にシェーダープログラムを返します。
-
-
function buildShaderProgram(shaderInfo) {
- let program = gl.createProgram();
-
- shaderInfo.forEach(function(desc) {
- let shader = compileShader(desc.id, desc.type);
-
- if (shader) {
- gl.attachShader(program, shader);
- }
- });
-
- gl.linkProgram(program)
-
- if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
- console.log("Error linking shader program:");
- console.log(gl.getProgramInfoLog(program));
- }
-
- return program;
-}
-
-
まず、{{domxref("WebGLRenderingContext.createProgram", "gl.createProgram()")}} は新しい空の GLSL プログラムを作成するために呼び出されます。
-
-
次に、指定されたシェーダーのリスト内の各シェーダーに対して、compileShader() 関数を呼び出してコンパイルし、ビルドするシェーダー関数のIDとタイプを渡します。前述のように、これらの各オブジェクトには、シェーダーコードが存在する <script> 要素の ID とシェーダーのタイプが含まれます。コンパイルされたシェーダーは、{{domxref("WebGLRenderingContext.attachShader", "gl.attachShader()")}} へ渡すことでシェーダープログラムにアタッチされます。
-
-
-
実際には、ここよりさらに一歩進んで、<script> 要素の type 属性の値を見て、シェーダーのタイプを判断できます。
-
-
-
すべてのシェーダーがコンパイルされると、{{domxref("WebGLRenderingContext.linkProgram", "gl.linkProgram()")}} を使用してプログラムがリンクされます。
-
-
プログラムのリンク中にエラーが発生した場合、エラーメッセージはコンソールに記録されます。
-
-
最後に、コンパイルされたプログラムが呼び出し元に返されます。
-
-
個々のシェーダーをコンパイルする
-
-
以下の compileShader() 関数は、単一のシェーダーをコンパイルするために buildShaderProgram() によって呼び出されます。
-
-
function compileShader(id, type) {
- let code = document.getElementById(id).firstChild.nodeValue;
- let shader = gl.createShader(type);
-
- gl.shaderSource(shader, code);
- gl.compileShader(shader);
-
- if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
- console.log(`Error compiling ${type === gl.VERTEX_SHADER ? "vertex" : "fragment"} shader:`);
- console.log(gl.getShaderInfoLog(shader));
- }
- return shader;
-}
-
-
コードは指定された ID を持つ {{HTMLElement("script")}} 要素内に含まれるテキストノードの値を取得することにより、HTML ドキュメントから取得されます。次に {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} を使用して、指定されたタイプの新しいシェーダーが作成されます。
-
-
ソースコードは {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} を通して新しいシェーダーに送信され、そのときシェーダーは {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} を使用してコンパイルされます。
-
-
コンパイルエラーはコンソールに記録されます。生成されるメッセージに正しいシェーダータイプの文字列を挿入するためのテンプレートリテラル文字列の使用に注意してください。実際のエラーの詳細は、{{domxref("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}を呼び出すことによって取得されます。
-
-
最後に、コンパイルされたシェーダーが呼び出し元 (buildShaderProgram() 関数) へ返します。
-
-
シーンの描画とアニメーション化
-
-
animateScene() 関数は各アニメーションフレームをレンダリングするために呼び出されます。
-
-
function animateScene() {
- gl.viewport(0, 0, glCanvas.width, glCanvas.height);
- gl.clearColor(0.8, 0.9, 1.0, 1.0);
- gl.clear(gl.COLOR_BUFFER_BIT);
-
- let radians = currentAngle * Math.PI / 180.0;
- currentRotation[0] = Math.sin(radians);
- currentRotation[1] = Math.cos(radians);
-
- gl.useProgram(shaderProgram);
-
- uScalingFactor =
- gl.getUniformLocation(shaderProgram, "uScalingFactor");
- uGlobalColor =
- gl.getUniformLocation(shaderProgram, "uGlobalColor");
- uRotationVector =
- gl.getUniformLocation(shaderProgram, "uRotationVector");
-
- gl.uniform2fv(uScalingFactor, currentScale);
- gl.uniform2fv(uRotationVector, currentRotation);
- gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
-
- gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-
- aVertexPosition =
- gl.getAttribLocation(shaderProgram, "aVertexPosition");
-
- gl.enableVertexAttribArray(aVertexPosition);
- gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
- gl.FLOAT, false, 0, 0);
-
- gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
-
- window.requestAnimationFrame(function(currentTime) {
- let deltaAngle = ((currentTime - previousTime) / 1000.0)
- * degreesPerSecond;
-
- currentAngle = (currentAngle + deltaAngle) % 360;
-
- previousTime = currentTime;
- animateScene();
- });
-}
-
-
アニメーションのフレームを描画するために最初に行う必要があるのは、背景を目的の色にクリアすることです。この場合、{{HTMLElement("canvas")}} のサイズに基づいてビューポートを設定し、{{domxref("WebGLRenderingContext.clearColor", "clearColor()")}} を呼び出して使用する色を設定します。コンテンツをクリアするとき、{{domxref("WebGLRenderingContext.clear", "clear()")}} でバッファーをクリアします。
-
-
次に、現在の回転ベクトルは、現在の回転角度 (currentAngle) を {{interwiki("wikipedia", "ラジアン")}} に変換し、回転ベクトルの最初のコンポーネントを {{interwiki("wikipedia", "三角関数", "sin")}} に設定し、2 番目のコンポーネントを {{interwiki("wikipedia", "三角関数", "cos")}} へ設定します。currentRotation ベクトルは、現在の角度 currentAngle にある {{interwiki("wikipedia", "単位円")}} 上のポイントの位置です。
-
-
{{domxref("WebGLRenderingContext.useProgram", "useProgram()")}} は、以前に確立した GLSL シェーディングプログラムをアクティブにするために呼び出されます。次に、JavaScript コードとシェーダー間 ({{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}} を使用) で情報を共有するために使用される各 uniform の位置を取得します。
-
-
uScalingFactor という名前の uniform は、以前に計算された currentScale 値に設定されます。覚えているかもしれませんが、これはコンテキストのアスペクト比に基づいて座標系を調整するために使用される値です。これは {{domxref("WebGLRenderingContext.uniform2fv", "uniform2fv()")}} を使用して行われます (これは 2 値の浮動小数点ベクトルであるため)。
-
-
uRotationVector は、同じく uniform2fv() を使用して、現在の回転ベクトル (currentRotation) に設定されます。
-
-
uGlobalColor は {{domxref("WebGLRenderingContext.uniform4fv", "uniform4fv()")}} を使用して、正方形を描画するときに使用する色に設定されます。これは 4 コンポーネントの浮動小数点ベクトルです (赤、緑、青、およびアルファごとに 1 つのコンポーネント)。
-
-
これですべてが終ったので、頂点バッファーを設定して形状を描画できます。まず、{{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}} を呼び出すことにより、形状の三角形の描画に使用される頂点のバッファーを設定します。次に、{{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}} を呼び出して、シェーダープログラムから頂点位置属性のインデックスを取得します。
-
-
頂点位置属性のインデックスが aVertexPosition で利用可能になったので、enableVertexAttribArray() を呼び出して位置属性を有効にし、シェーダープログラム (特に頂点シェーダー) で使用できるようにします。
-
-
次に、{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}} を呼び出すことにより、頂点バッファーが aVertexPosition 属性にバインドされます。このステップはほとんど副作用であるため、このステップは明らかではありません。ただし、結果として、aVertexPosition にアクセスすると、頂点バッファーからデータを取得するようになります。
-
-
シェイプの頂点バッファーと頂点を 1 つずつ頂点シェーダーに配信するために使用される aVertexPosition 属性との間に関連付けがあれば、{{domxref("WebGLRenderingContext.drawArrays", "drawArrays()")}} を呼び出してシェイプを描画する準備が整います。
-
-
この時点で、フレームが描画されました。あとは、次の描画をスケジュールするだけです。ここでは {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出して、ブラウザーが画面を更新する準備ができたときにコールバック関数を実行するように要求します。
-
-
requestAnimationFrame() コールバックは、フレーム描画が開始された時間を指定する単一のパラメーター currentTime を入力として受け取ります。それと、最後のフレームが描画された保存時間、previousTime、および正方形が回転する1秒あたりの度数 (degreesPerSecond) を使用して、currentAngle の新しい値を計算します。次に、previousTime の値が更新され、animateScene() を呼び出して次のフレームを描画します (そして、次のフレームが描画されるように無限にスケジュールします )。
-
結果
-
-これは 1 つの単純なオブジェクトを描画しているだけの非常に単純な例ですが、ここで使用されている概念ははるかに複雑なアニメーションに拡張されます。
-
-{{EmbedLiveSample("live-sample", 660, 500)}}
-
-参照
-
-
diff --git a/files/ja/web/api/webgl_api/basic_2d_animation_example/index.md b/files/ja/web/api/webgl_api/basic_2d_animation_example/index.md
new file mode 100644
index 00000000000000..c12d5fc8546a13
--- /dev/null
+++ b/files/ja/web/api/webgl_api/basic_2d_animation_example/index.md
@@ -0,0 +1,333 @@
+---
+title: 基本的な 2D WebGL アニメーションの例
+slug: Web/API/WebGL_API/Basic_2D_animation_example
+tags:
+ - 2D Animation
+ - 2D Graphics
+ - Animation
+ - Drawing
+ - Example
+ - WebGL
+ - WebGL API
+translation_of: Web/API/WebGL_API/Basic_2D_animation_example
+---
+{{WebGLSidebar}}
+
+この WebGL の例では、キャンバスを作成し、その中に WebGL を使用して回転する四角形をレンダリングします。シーンを表すために使用する座標系は、キャンバスの座標系と同じです。つまり、(0, 0) は左上隅にあり、右下隅は (600, 460) となります。
+
+## 頂点シェーダー
+
+まず頂点シェーダーを見てみましょう。いつものように、シーンに使用している座標をクリップスペース座標に変換することです (つまり (0, 0) がコンテキストの中心にあり、コンテキストの実際のサイズに関係なく各軸が -1.0 から 1.0 に伸びるシステムです)
+
+```html
+
+```
+
+メインプログラムは属性 `aVertexPosition` を共有します。これは使用している座標系の頂点の位置です。位置の両方のコンポーネントが -1.0 から 1.0 の範囲になるように、これらの値を変換する必要があります。これは、コンテキストのアスペクト比に基づいたスケーリング係数を掛けることで簡単に実行できます。この計算については、後ほど説明します。
+
+形状も回転し、変換を適用することでそれを行うことができます。最初にそれを行います。頂点の回転位置は、JavaScript コードによって計算された均一な `uRotationVector` にある回転ベクトルを適用して計算されます。
+
+次に、`uScalingFactor` の JavaScript コードによって提供されるスケーリングベクトルを回転位置に乗算することにより、最終位置が計算されます。2D で描画しているため、`z` と `w` の値はそれぞれ 0.0 と 1.0 に固定されています。
+
+次に、標準 WebGL グローバル変数の `gl_Position` へ変換および回転された頂点の位置を設定します。
+
+## フラグメントシェーダー
+
+次はフラグメントシェーダーです。その役割はレンダリングされる形状の各ピクセルの色を返すことです。ライティングが適用されていない、テクスチャのないソリッドオブジェクトを描画しているため、これは非常に簡単です:
+
+```html
+
+```
+
+これは必要に応じて `float` 型の精度を指定することから始まります次に uniform 修飾子付きの `uGlobalColor` の値をグローバル変数 `gl_FragColor` へ設定します。これは、JavaScript コードにより正方形の描画に使用される色に設定されます。
+
+## HTML
+
+HTML は、WebGL コンテキストを取得する {{HTMLElement("canvas")}} のみで構成されています。
+
+```html
+
+```
+
+## JavaScript
+
+### グローバル変数と初期化
+
+まず、グローバル変数。ここではこれらについては説明しません。代わりに、今後のコードで使用される場合について説明します。
+
+```js
+let gl = null;
+let glCanvas = null;
+
+// Aspect ratio and coordinate system
+// details
+
+let aspectRatio;
+let currentRotation = [0, 1];
+let currentScale = [1.0, 1.0];
+
+// Vertex information
+
+let vertexArray;
+let vertexBuffer;
+let vertexNumComponents;
+let vertexCount;
+
+// Rendering data shared with the
+// scalers.
+
+let uScalingFactor;
+let uGlobalColor;
+let uRotationVector;
+let aVertexPosition;
+
+// Animation timing
+
+let previousTime = 0.0;
+let degreesPerSecond = 90.0;
+```
+
+プログラムの初期化は `startup()` と呼ばれる {{event("load")}} イベントハンドラーによって処理します:
+
+```js
+window.addEventListener("load", startup, false);
+
+function startup() {
+ glCanvas = document.getElementById("glcanvas");
+ gl = glCanvas.getContext("webgl");
+
+ const shaderSet = [
+ {
+ type: gl.VERTEX_SHADER,
+ id: "vertex-shader"
+ },
+ {
+ type: gl.FRAGMENT_SHADER,
+ id: "fragment-shader"
+ }
+ ];
+
+ shaderProgram = buildShaderProgram(shaderSet);
+
+ aspectRatio = glCanvas.width/glCanvas.height;
+ currentRotation = [0, 1];
+ currentScale = [1.0, aspectRatio];
+
+ vertexArray = new Float32Array([
+ -0.5, 0.5, 0.5, 0.5, 0.5, -0.5,
+ -0.5, 0.5, 0.5, -0.5, -0.5, -0.5
+ ]);
+
+ vertexBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, vertexArray, gl.STATIC_DRAW);
+
+ vertexNumComponents = 2;
+ vertexCount = vertexArray.length/vertexNumComponents;
+
+ currentAngle = 0.0;
+ rotationRate = 6;
+
+ animateScene();
+}
+```
+
+WebGL コンテキスト `gl` を取得し、シェーダープログラムを構築することから始める必要があります。ここでは、プログラムに複数のシェーダーを非常に簡単に追加できるように設計されたコードを使用しています。配列 `shaderSet` にはオブジェクトのリストが含まれ、各オブジェクトはプログラムにコンパイルされる 1 つのシェーダー関数を記述しています。各関数には、タイプ (`gl.VERTEX_SHADER` または `gl.FRAGMENT_SHADER` のいずれか) と ID (シェーダーのコードを含む {{HTMLElement("script")}} 要素の ID)。
+
+シェーダーセットは `buildShaderProgram()` 関数に渡され、コンパイルされリンクされたシェーダープログラムを返します。次にこれがどのように機能するかを見ていきます。
+
+シェーダープロシェグラムが構築し、幅を高さで割ってからコンテキストのアスペクト比を計算します。次に、アニメーションの現在の回転ベクトルを `[0, 1]` に設定し、スケーリングベクトルを `[1.0, aspectRatio]` に設定します。頂点シェーダーで見たスケーリングベクトルは、-1.0 から 1.0 の範囲に合うように座標をスケーリングするために使用されます。
+
+次に頂点の配列が {{jsxref("Float32Array")}} として作成され、三角形ごとに 6 つの座標 (3 つの 2D 頂点) が描画され、合計 12 個の値が作成されます。
+
+ご覧のとおり、各軸に -1.0 〜 1.0 の座標系を使用しています。なぜ調整する必要があるのでしょうか？これは単にコンテキストが正方形ではないためです。幅 600 ピクセル、高さ 460 のコンテキストを使用しています。これらの各ディメンションは、-1.0 〜 1.0 の範囲にマッピングされます。2 つの軸は同じ長さではないため、2 つの軸のいずれかの値を調整しないと、正方形は一方または他方に引き伸ばされます。したがって、これらの値を正規化する必要があります。
+
+頂点配列が作成されたら、{{domxref("WebGLRenderingContext.createBuffer", "gl.createBuffer()")}} を呼び出し、それらを含む新しい GL バッファーを作成します。{{domxref("WebGLRenderingContext.bindBuffer", "gl.bindBuffer()")}} を呼び出して標準の WebGL 配列バッファー参照をバインドし、{{domxref("WebGLRenderingContext.bufferData", "gl.bufferData()")}} を使用して頂点データをバッファーにコピーします。`gl.STATIC_DRAW` の使用法が指定されており、データは 1 回だけ設定され、変更されることはありませんが、繰り返し使用されることを WebGL に伝えます。これにより、WebGL は、その情報に基づいてパフォーマンスを向上させる可能性のある、適用可能な最適化を検討します。
+
+WebGL に提供される頂点データを使用して、`vertexNumComponents` を各頂点のコンポーネントの数 (2D 頂点であるため 2) に設定し、`vertexCount` を頂点リストの頂点の数に設定します。
+
+次に、まだ回転を実行していないため、現在の回転角度 (度) を 0.0 に設定し、回転速度 (画面の更新期間ごとの度、通常 60 FPS) を 6 に設定します。
+
+最後に、`animateScene()` が呼び出されて、最初のフレームをレンダリングし、アニメーションの次のフレームのレンダリングをスケジュールします。
+
+### シェーダープログラムのコンパイルとリンク
+
+#### プログラムの構築とリンク
+
+`buildShaderProgram()` 関数は、シェーダープログラムにコンパイルおよびリンクされるシェーダー関数のセットを記述するオブジェクトの配列を入力として受け取り、ビルドおよびリンク後にシェーダープログラムを返します。
+
+```js
+function buildShaderProgram(shaderInfo) {
+ let program = gl.createProgram();
+
+ shaderInfo.forEach(function(desc) {
+ let shader = compileShader(desc.id, desc.type);
+
+ if (shader) {
+ gl.attachShader(program, shader);
+ }
+ });
+
+ gl.linkProgram(program)
+
+ if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+ console.log("Error linking shader program:");
+ console.log(gl.getProgramInfoLog(program));
+ }
+
+ return program;
+}
+```
+
+まず、{{domxref("WebGLRenderingContext.createProgram", "gl.createProgram()")}} は新しい空の GLSL プログラムを作成するために呼び出されます。
+
+次に、指定されたシェーダーのリスト内の各シェーダーに対して、`compileShader()` 関数を呼び出してコンパイルし、ビルドするシェーダー関数の ID とタイプを渡します。前述のように、これらの各オブジェクトには、シェーダーコードが存在する `
+```
+
+頂点の位置が算出されると、頂点に対応するテクセルの座標が算出され、頂点のシェーディングの計算ができるようになります。
+
+始めに行うのは、頂点の法線に正規行列を乗じることで、法線を現在のキューブの向きと位置に基づくものに変換することです。次に、変換された法線と方向ベクトル (光線が来る方向) の点乗積を計算することにより、頂点に適用されるべき指向性光源の光量を算出することができます。光量を 0 より小さくすることはできませんので、算出結果が 0 より小さくなった場合は、その値を 0 に固定します。
+
+指向性光源の光量が算出されたら、環境光を取り込みさらに指向性光源の色と光量を足し込むことでライティングの値を決めることができます。この結果、フラグメントシェーダーが描画する各ピクセルの色を調整するために用いる RGB 値を得ることができます。
+
+### フラグメントシェーダー
+
+フラグメントシェーダーは、バーテックスシェーダーが算出した光量の値を考慮するように更新する必要があります:
+
+```js
+
+```
+
+ここでは以前の例で行ったようにテクセルの色を取り出しますが、フラグメントの色を設定する前に、光源の影響を考慮してテクセルの色を調整するため、テクセルの色に光量の値を掛け合わせます。
+
+以上で完成です!
+
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510)}}
+
+[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [新しいページでデモを開く](http://mdn.github.io/webgl-examples/tutorial/sample7/)
+
+## 読者への課題
+
+基本的な頂点ごとのライティングを実装した今回の例は、単純なものであることは明らかです。より高度なグラフィックとしてピクセルごとのライティングを実装したいと考えるのは、正しい方向性です。
+
+同様に、光源の方向、光源の色などについても実験してみるとよいでしょう。
+
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}
diff --git a/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
deleted file mode 100644
index 3d59b2ee471b24..00000000000000
--- a/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: シェーダーを用いた WebGL での色の指定
-slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
-tags:
- - Tutorial
- - WebGL
-translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
----
-{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}
-
-前のデモンストレーションで正方形を作り出すことができたら、次に明らかなステップは、それに色をつけることです。これは、シェーダーを変更することで実現できます。
-
-頂点に色を適用する
-
-GL ではオブジェクトは頂点のセットを用いて構築され、各頂点は位置と色の情報を持っています。デフォルトでは、他のピクセルの色 (および位置など、その他の属性すべて) は線形補完法を用いて計算され、自動的になめらかなグラデーションを生成します。前に使用したバーテックスシェーダーでは頂点に色の情報を適用していませんでした。バーテックスシェーダーとフラグメントシェーダーで各ピクセルに白色を固定で割り当てており、正方形全体が白一色で描画されました。
-
-例えば、四隅が異なる色 (赤、青、緑、白) である正方形にグラデーションを作成したいとします。始めに行うことは、4 つの頂点にこれらの色を設定することです。これを行うには、まず頂点の色の配列を作成し、次にその配列を WebGL のバッファに格納します。これらは、以下に挙げるコードを initBuffers() 関数に追加することで実行します:
-
- var colors = [
- 1.0, 1.0, 1.0, 1.0, // 白
- 1.0, 0.0, 0.0, 1.0, // 赤
- 0.0, 1.0, 0.0, 1.0, // 緑
- 0.0, 0.0, 1.0, 1.0 // 青
- ];
-
- squareVerticesColorBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-}
-
-
-このコードは 4 つの値が 4 組含まれている JavaScript の配列を作成することから始まります。各組は、それぞれの頂点の色を示します。続いてこれらの色情報を格納する WebGL バッファを新たに割り当てます。そして、配列を WebGL 浮動小数点数に変換してバッファに格納します。
-
-これらの色情報を実際に使うためには、カラーバッファから適切な色情報を取り出すようにバーテックスシェーダーを変更しなければなりません:
-
- <script id="shader-vs" type="x-shader/x-vertex">
- attribute vec3 aVertexPosition;
- attribute vec4 aVertexColor;
-
- uniform mat4 uMVMatrix;
- uniform mat4 uPMatrix;
-
- varying lowp vec4 vColor;
-
- void main(void) {
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
- vColor = aVertexColor;
- }
- </script>
-
-
-ここでの各頂点に関する重要な違いは、色の配列内で対応する値を、頂点の色情報として設定していることです。
-
-フラグメントに色をつける
-
-復習として、以前はフラグメントシェーダーを以下のようにしていました:
-
- <script id="shader-fs" type="x-shader/x-fragment">
- void main(void) {
- gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
- }
- </script>
-
-
-各ピクセルが補完された色を取り込むようにするため、vColor 変数から値を取り出すようにシェーダーを変更しなければなりません:
-
- <script id="shader-fs" type="x-shader/x-fragment">
- varying lowp vec4 vColor;
-
- void main(void) {
- gl_FragColor = vColor;
- }
- </script>
-
-
-これは単純な変更です。これにより各フラグメントは固定値ではなく、頂点からの相対的な位置に基づいて補完された色情報を受け取ります。
-
-色情報を用いて描画する
-
-次に、シェーダープログラムの色属性を初期化するコードを initShaders() ルーチンに追加しなければなりません:
-
- vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
- gl.enableVertexAttribArray(vertexColorAttribute);
-
-
-そして、実際に色情報を用いて正方形を描画するように drawScene() を変更することが可能になります:
-
- gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
- gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
-
-
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510)}}
-
-コードを確認する | 新しいページでデモを開く
-
-{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}
diff --git a/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
new file mode 100644
index 00000000000000..f0cae52125cbfd
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
@@ -0,0 +1,102 @@
+---
+title: シェーダーを用いた WebGL での色の指定
+slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+tags:
+ - Tutorial
+ - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}
+
+[前のデモンストレーション](/ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context)で正方形を作り出すことができたら、次に明らかなステップは、それに色をつけることです。これは、シェーダーを変更することで実現できます。
+
+## 頂点に色を適用する
+
+GL ではオブジェクトは頂点のセットを用いて構築され、各頂点は位置と色の情報を持っています。デフォルトでは、他のピクセルの色 (および位置など、その他の属性すべて) は線形補完法を用いて計算され、自動的になめらかなグラデーションを生成します。前に使用したバーテックスシェーダーでは頂点に色の情報を適用していませんでした。バーテックスシェーダーとフラグメントシェーダーで各ピクセルに白色を固定で割り当てており、正方形全体が白一色で描画されました。
+
+例えば、四隅が異なる色 (赤、青、緑、白) である正方形にグラデーションを作成したいとします。始めに行うことは、4 つの頂点にこれらの色を設定することです。これを行うには、まず頂点の色の配列を作成し、次にその配列を WebGL のバッファに格納します。これらは、以下に挙げるコードを `initBuffers()` 関数に追加することで実行します:
+
+```js
+ var colors = [
+ 1.0, 1.0, 1.0, 1.0, // 白
+ 1.0, 0.0, 0.0, 1.0, // 赤
+ 0.0, 1.0, 0.0, 1.0, // 緑
+ 0.0, 0.0, 1.0, 1.0 // 青
+ ];
+
+ squareVerticesColorBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+```
+
+このコードは 4 つの値が 4 組含まれている JavaScript の配列を作成することから始まります。各組は、それぞれの頂点の色を示します。続いてこれらの色情報を格納する WebGL バッファを新たに割り当てます。そして、配列を WebGL 浮動小数点数に変換してバッファに格納します。
+
+これらの色情報を実際に使うためには、カラーバッファから適切な色情報を取り出すようにバーテックスシェーダーを変更しなければなりません:
+
+```html
+
+```
+
+ここでの各頂点に関する重要な違いは、色の配列内で対応する値を、頂点の色情報として設定していることです。
+
+## フラグメントに色をつける
+
+復習として、以前はフラグメントシェーダーを以下のようにしていました:
+
+```html
+
+```
+
+各ピクセルが補完された色を取り込むようにするため、`vColor` 変数から値を取り出すようにシェーダーを変更しなければなりません:
+
+```html
+
+```
+
+これは単純な変更です。これにより各フラグメントは固定値ではなく、頂点からの相対的な位置に基づいて補完された色情報を受け取ります。
+
+## 色情報を用いて描画する
+
+次に、シェーダープログラムの色属性を初期化するコードを `initShaders()` ルーチンに追加しなければなりません:
+
+```js
+ vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+ gl.enableVertexAttribArray(vertexColorAttribute);
+```
+
+そして、実際に色情報を用いて正方形を描画するように drawScene() を変更することが可能になります:
+
+```js
+ gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+ gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+```
+
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510)}}
+
+[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [新しいページでデモを開く](http://mdn.github.io/webgl-examples/tutorial/sample3/)
+
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}
diff --git a/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
deleted file mode 100644
index 4bd95359121f01..00000000000000
--- a/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
+++ /dev/null
@@ -1,209 +0,0 @@
----
-title: WebGL でのテクスチャの使用
-slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
-tags:
- - Tutorial
- - WebGL
-translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
----
-{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
-
-現在、サンプルプログラムは回転する 3D キューブを描画します。今回はキューブの表面を単色で塗りつぶすのではなく、テクスチャをマッピングしてみましょう。
-
-テクスチャを読み込む
-
-始めに、テクスチャを読み込むコードを追加します。今回は 1 個のテクスチャを用いて、そのテクスチャをキューブの 6 面に貼り付けますが、テクスチャがいくつある場合でも同じ方法を適用できます。
-
-注記: テクスチャの読み込みは
クロスドメインの規則に従うことへの注意が重要です。従ってコンテンツが CORS で認可されているサイトからのみ、テクスチャを読み込むことができます。クロスドメインのテクスチャについては、後ほど説明します。
-
-テクスチャを読み込むコードは以下のようになります:
-
-function initTextures() {
- cubeTexture = gl.createTexture();
- cubeImage = new Image();
- cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
- cubeImage.src = "cubetexture.png";
-}
-
-function handleTextureLoaded(image, texture) {
- gl.bindTexture(gl.TEXTURE_2D, texture);
- gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
- gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
- gl.generateMipmap(gl.TEXTURE_2D);
- gl.bindTexture(gl.TEXTURE_2D, null);
-}
-
-
-initTextures() ルーチンは GL の createTexture() 関数を呼び出して、GL のテクスチャオブジェクト cubeTexture を作成することから始まります。そして、テクスチャを画像ファイルから読み込むために Image オブジェクトを作成して、そのオブジェクトにテクスチャとして使用したい画像ファイルをロードします。handleTextureLoaded() コールバックルーチンは、画像の読み込みが完了したときに実行されます。
-
-実際にテクスチャを作成するために、新しいテクスチャが操作したいカレントのテクスチャであることを、gl.TEXTURE_2D にバインドすることで指定します。その後読み込んだ画像は、テクスチャとして書き込むために texImage2D() へ渡されます。
-
-注記: テクスチャの幅と高さのピクセル数は
ほとんどの場合において、それぞれ 2 のべき乗 (1、2、4、8、16……) にしなければなりません。例外については、"
2 のべき乗ではないテクスチャ" のセクションをご覧ください。
-
-その次の 2 行はテクスチャのフィルタリングを設定しています。これは画像が拡大縮小される際に適用するフィルタの設定です。今回は、画像を拡大する場合はリニアフィルタ、縮小する場合はミップマップを使用します。ミップマップは generateMipMap() を呼び出すことで生成され、最後は null を gl.TEXTURE_2D にバインドしてテクスチャの操作を終了することで完了します。
-
-2 のべき乗ではないテクスチャ
-
-一般的に、辺の長さが 2 のべき乗であるテクスチャを使うことが理想的です。これはビデオメモリへ効率よく保存され、また使用方法が制限されません。制作されたテクスチャを近い 2 のべき乗のサイズにスケーリングするか、2 のべき乗のサイズで制作を始めます。それぞれの辺の長さを 1、2、4、8、16、32、64、128、256、512、1024、あるいは 2048 ピクセルにすべきです。また、多くのデバイス (すべてではありません) が 4096 ピクセルをサポートします。さらに、8192 ピクセル以上をサポートするものもあります。
-
-ときおり、特殊な事情で 2 のべき乗のテクスチャを使用することが困難な場合があります。サードパーティーの素材を使用する場合はたいてい、WebGL へ渡す前に HTML5 canvas を使用して 2 のべき乗のサイズに変換すると最良の結果を得られます。引き伸ばしが明白である場合は、UV 座標も必要でしょう。
-
-一方、2 のべき乗ではない (NPOT) テクスチャが不可欠である場合でも、WebGL は限定的にネイティブサポートしています。NPOT テクスチャは主に、テクスチャの寸法をモニターなど他の解像度に揃えなければならない場合や、前出の提案に従うだけの価値がない場合に有用です。しかし、このようなテクスチャはミップマッピングで使用することができません。また、"繰り返し" (タイルまたはラップ) を行ってはいけません。
-
-テクスチャの繰り返しは、例えば小さなレンガの画像をタイリングしてレンガの壁を作ることです。
-
-ミップマッピングや UV リピートは、bindTexture() を使用してテクスチャを作成する際に texParameteri() で無効化できます。これによりミップマッピング、UV ラッピング、UV タイリングを犠牲にして NPOT テクスチャを使用できます。また、デバイスがテクスチャをどのように扱うかを制御できます。
-
-// gl.LINEAR の代わりに gl.NEAREST も可能。ミップマップは不可
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-// S 座標のラッピング (繰り返し) を禁止
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-// T 座標のラッピング (繰り返し) を禁止
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-
-繰り返しますがこれらのパラメータを付加すると、WebGL デバイスは自動的に (サポートする最大サイズまでの) 任意の解像度のテクスチャを受け入れます。しかしこれらの設定を行わないと、WebGL は黒色 (rgba(0,0,0,1)) を返すことになり、NPOT テクスチャの全サンプルを受け入れてはなりません。
-
-テクスチャを表面にマッピングする
-
-以上で、テクスチャの読み込みと使用する準備ができました。しかしテクスチャが使用できるようになるには、まずキューブの面の頂点にテクスチャの座標をマッピングする必要があります。これは initBuffers() にある、キューブの各面に色を設定する既存のコードの置き換えになります。
-
- cubeVerticesTextureCoordBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
-
- var textureCoordinates = [
- // 前面
- 0.0, 0.0,
- 1.0, 0.0,
- 1.0, 1.0,
- 0.0, 1.0,
- // 背面
- 0.0, 0.0,
- 1.0, 0.0,
- 1.0, 1.0,
- 0.0, 1.0,
- // 上面
- 0.0, 0.0,
- 1.0, 0.0,
- 1.0, 1.0,
- 0.0, 1.0,
- // 底面
- 0.0, 0.0,
- 1.0, 0.0,
- 1.0, 1.0,
- 0.0, 1.0,
- // 右側面
- 0.0, 0.0,
- 1.0, 0.0,
- 1.0, 1.0,
- 0.0, 1.0,
- // 左側面
- 0.0, 0.0,
- 1.0, 0.0,
- 1.0, 1.0,
- 0.0, 1.0
- ];
-
- gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
- gl.STATIC_DRAW);
-
-
-このコードは始めに各面のテクスチャの座標を収める GL のバッファを作成して、そのバッファを書き込みを行う配列としてバインドします。
-
-textureCoordinates 配列は、各面の各座標に対応するテクスチャの座標を定義します。テクスチャの座標の範囲は 0.0 から 1.0 であることに注意してください。テクスチャマッピングのために、テクスチャの寸法は実際の大きさに関わらず 0.0 から 1.0 の範囲に正規化されます。
-
-テクスチャマッピングの配列を設定したら、配列をバッファに渡すことで GL がそのデータを使用する準備が完了します。
-
-注記: WebKit ベースのブラウザでは、WebGLFloatArray の代わりに Float32Array を使用しなければならないでしょう。
-
-シェーダーを更新する
-
-シェーダープログラム (およびシェーダーを初期化するコード) も、単色に代わりテクスチャを使用するように更新する必要があります。
-
-始めに initShaders() で必要になる、シンプルな変更点を見てみましょう:
-
- textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
- gl.enableVertexAttribArray(textureCoordAttribute);
-
-
-これは頂点の色属性を設定するコードを、各頂点のテクスチャ座標を包含するコードに置き換えます。
-
-バーテックスシェーダー
-
-次にバーテックスシェーダーを、色のデータを取り出すものからテクスチャ座標のデータを取り出すものに置き換える必要があります。
-
- <script id="shader-vs" type="x-shader/x-vertex">
- attribute vec3 aVertexPosition;
- attribute vec2 aTextureCoord;
-
- uniform mat4 uMVMatrix;
- uniform mat4 uPMatrix;
-
- varying highp vec2 vTextureCoord;
-
- void main(void) {
- gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
- vTextureCoord = aTextureCoord;
- }
- </script>
-
-
-重要な変更点は、頂点の色を取り出すのに代わりテクスチャ座標を設定していることです。これは頂点に対応する、テクスチャ内の位置を指し示します。
-
-フラグメントシェーダー
-
-フラグメントシェーダーも同様に更新する必要があります:
-
- <script id="shader-fs" type="x-shader/x-fragment">
- varying highp vec2 vTextureCoord;
-
- uniform sampler2D uSampler;
-
- void main(void) {
- gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
- }
- </script>
-
-
-色の値をフラグメントの色に割り当てるのに代わり、フラグメントの色は、サンプラーが最適とするフラグメントの位置のテクセル (テクスチャ内のピクセル) を取り出すことで算出されます。
-
-テクスチャを貼り付けたキューブを描画する
-
-drawScene() 関数の変更点は簡単です (コードを明瞭にするために、キューブを空間中で動かすアニメーションのコードを取り除いて単に回転するようにした点は除きます)。
-
-色を割り当てるコードをテクスチャを割り当てるようにするためには、以下のように置き換えます:
-
- gl.activeTexture(gl.TEXTURE0);
- gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
- gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
-
-
-GL は 32 個のテクスチャレジスタを提供し、その 1 つ目が gl.TEXTURE0 です。前に読み込んだテクスチャをそのレジスタに結びつけて、そのテクスチャを使用するためにシェーダーサンプラー uSampler (シェーダープログラムにより明示されます) を設定します。
-
-以上でテクスチャが貼り付けられた、回転するキューブが完成します。
-
-{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510)}}
-
-コードを確認する | 新しいページでデモを開く
-
-クロスドメインのテクスチャ
-
-WebGL のテクスチャの読み込みは、クロスドメインアクセス制御に従います。コンテンツで他のドメインからテクスチャを読み込むためには、CORS で許可を得なければなりません。CORS について詳しくは、HTTP access control をご覧ください。
-
-CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を こちらの hacks.mozilla.org の記事 に掲載していますので、サンプル と合わせてご覧ください。
-
-
-
注記: WebGL テクスチャ向けの CORS サポートと、画像要素の crossOrigin 属性は {{Gecko("8.0")}} で実装されました。
-
汚染された (書き込みのみ) 2D canvas を WebGL のテクスチャとして使用することはできません。2D {{HTMLElement("canvas")}} が汚染されたとは例えば、クロスドメインの画像が canvas 上に描画された状態を指します。
-
-
-
注記: Canvas 2D drawImage 向けの CORS サポートを {{Gecko("9.0")}} で実装しました。これは、CORS で許可されたクロスドメインの画像が 2D canvas を汚染しないので、2D canvas を WebGL のテクスチャ素材として引き続き使用できることを意味します。
-
-
注記: クロスドメインの動画に対する CORS サポートと、{{HTMLElement("video")}} 要素のcrossorigin 属性は {{Gecko("12.0")}} で実装されました。
-
{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
diff --git a/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
new file mode 100644
index 00000000000000..e1b03addadbc9e
--- /dev/null
+++ b/files/ja/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
@@ -0,0 +1,211 @@
+---
+title: WebGL でのテクスチャの使用
+slug: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+tags:
+ - Tutorial
+ - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
+
+現在、サンプルプログラムは回転する 3D キューブを描画します。今回はキューブの表面を単色で塗りつぶすのではなく、テクスチャをマッピングしてみましょう。
+
+## テクスチャを読み込む
+
+始めに、テクスチャを読み込むコードを追加します。今回は 1 個のテクスチャを用いて、そのテクスチャをキューブの 6 面に貼り付けますが、テクスチャがいくつある場合でも同じ方法を適用できます。
+
+> **Note:** **注記:** テクスチャの読み込みは[クロスドメインの規則](/ja/docs/Web/HTTP/Access_control_CORS)に従うことへの注意が重要です。従ってコンテンツが CORS で認可されているサイトからのみ、テクスチャを読み込むことができます。クロスドメインのテクスチャについては、後ほど説明します。
+
+テクスチャを読み込むコードは以下のようになります:
+
+```js
+function initTextures() {
+ cubeTexture = gl.createTexture();
+ cubeImage = new Image();
+ cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+ cubeImage.src = "cubetexture.png";
+}
+
+function handleTextureLoaded(image, texture) {
+ gl.bindTexture(gl.TEXTURE_2D, texture);
+ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+ gl.generateMipmap(gl.TEXTURE_2D);
+ gl.bindTexture(gl.TEXTURE_2D, null);
+}
+```
+
+`initTextures()` ルーチンは GL の `createTexture()` 関数を呼び出して、GL のテクスチャオブジェクト `cubeTexture` を作成することから始まります。そして、テクスチャを画像ファイルから読み込むために `Image` オブジェクトを作成して、そのオブジェクトにテクスチャとして使用したい画像ファイルをロードします。`handleTextureLoaded()` コールバックルーチンは、画像の読み込みが完了したときに実行されます。
+
+実際にテクスチャを作成するために、新しいテクスチャが操作したいカレントのテクスチャであることを、`gl.TEXTURE_2D` にバインドすることで指定します。その後読み込んだ画像は、テクスチャとして書き込むために `texImage2D()` へ渡されます。
+
+> **Note:** **注記:** テクスチャの幅と高さのピクセル数は**ほとんどの場合**において、それぞれ 2 のべき乗 (1、2、4、8、16……) にしなければなりません。例外については、"[2 のべき乗ではないテクスチャ](/ja/docs/Web/WebGL/Using_textures_in_WebGL#Non_power-of-two_textures "Web/WebGL/Using_textures_in_WebGL#Using_non_Power-Of-Two_textures")" のセクションをご覧ください。
+
+その次の 2 行はテクスチャのフィルタリングを設定しています。これは画像が拡大縮小される際に適用するフィルタの設定です。今回は、画像を拡大する場合はリニアフィルタ、縮小する場合はミップマップを使用します。ミップマップは `generateMipMap()` を呼び出すことで生成され、最後は null を `gl.TEXTURE_2D` にバインドしてテクスチャの操作を終了することで完了します。
+
+### 2 のべき乗ではないテクスチャ
+
+一般的に、辺の長さが 2 のべき乗であるテクスチャを使うことが理想的です。これはビデオメモリへ効率よく保存され、また使用方法が制限されません。制作されたテクスチャを近い 2 のべき乗のサイズにスケーリングするか、2 のべき乗のサイズで制作を始めます。それぞれの辺の長さを 1、2、4、8、16、32、64、128、256、512、1024、あるいは 2048 ピクセルにすべきです。また、多くのデバイス (すべてではありません) が 4096 ピクセルをサポートします。さらに、8192 ピクセル以上をサポートするものもあります。
+
+ときおり、特殊な事情で 2 のべき乗のテクスチャを使用することが困難な場合があります。サードパーティーの素材を使用する場合はたいてい、WebGL へ渡す前に HTML5 canvas を使用して 2 のべき乗のサイズに変換すると最良の結果を得られます。引き伸ばしが明白である場合は、UV 座標も必要でしょう。
+
+一方、2 のべき乗ではない (NPOT) テクスチャが**不可欠である**場合でも、WebGL は限定的にネイティブサポートしています。NPOT テクスチャは主に、テクスチャの寸法をモニターなど他の解像度に揃えなければならない場合や、前出の提案に従うだけの価値がない場合に有用です。しかし、このようなテクスチャはミップマッピングで使用することが**できません**。また、"繰り返し" (タイルまたはラップ) を**行ってはいけません**。
+
+テクスチャの繰り返しは、例えば小さなレンガの画像をタイリングしてレンガの壁を作ることです。
+
+ミップマッピングや UV リピートは、`bindTexture()` を使用してテクスチャを作成する際に `texParameteri()` で無効化できます。これによりミップマッピング、UV ラッピング、UV タイリングを犠牲にして NPOT テクスチャを使用できます。また、デバイスがテクスチャをどのように扱うかを制御できます。
+
+```js
+// gl.LINEAR の代わりに gl.NEAREST も可能。ミップマップは不可
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// S 座標のラッピング (繰り返し) を禁止
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// T 座標のラッピング (繰り返し) を禁止
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+```
+
+繰り返しますがこれらのパラメータを付加すると、WebGL デバイスは自動的に (サポートする最大サイズまでの) 任意の解像度のテクスチャを受け入れます。しかしこれらの設定を行わないと、WebGL は黒色 (`rgba(0,0,0,1)`) を返すことになり、NPOT テクスチャの全サンプルを受け入れてはなりません。
+
+## テクスチャを表面にマッピングする
+
+以上で、テクスチャの読み込みと使用する準備ができました。しかしテクスチャが使用できるようになるには、まずキューブの面の頂点にテクスチャの座標をマッピングする必要があります。これは `initBuffers()` にある、キューブの各面に色を設定する既存のコードの置き換えになります。
+
+```js
+ cubeVerticesTextureCoordBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+ var textureCoordinates = [
+ // 前面
+ 0.0, 0.0,
+ 1.0, 0.0,
+ 1.0, 1.0,
+ 0.0, 1.0,
+ // 背面
+ 0.0, 0.0,
+ 1.0, 0.0,
+ 1.0, 1.0,
+ 0.0, 1.0,
+ // 上面
+ 0.0, 0.0,
+ 1.0, 0.0,
+ 1.0, 1.0,
+ 0.0, 1.0,
+ // 底面
+ 0.0, 0.0,
+ 1.0, 0.0,
+ 1.0, 1.0,
+ 0.0, 1.0,
+ // 右側面
+ 0.0, 0.0,
+ 1.0, 0.0,
+ 1.0, 1.0,
+ 0.0, 1.0,
+ // 左側面
+ 0.0, 0.0,
+ 1.0, 0.0,
+ 1.0, 1.0,
+ 0.0, 1.0
+ ];
+
+ gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
+ gl.STATIC_DRAW);
+```
+
+このコードは始めに各面のテクスチャの座標を収める GL のバッファを作成して、そのバッファを書き込みを行う配列としてバインドします。
+
+`textureCoordinates` 配列は、各面の各座標に対応するテクスチャの座標を定義します。テクスチャの座標の範囲は 0.0 から 1.0 であることに注意してください。テクスチャマッピングのために、テクスチャの寸法は実際の大きさに関わらず 0.0 から 1.0 の範囲に正規化されます。
+
+テクスチャマッピングの配列を設定したら、配列をバッファに渡すことで GL がそのデータを使用する準備が完了します。
+
+> **Note:** 注記: WebKit ベースのブラウザでは、`WebGLFloatArray` の代わりに `Float32Array` を使用しなければならないでしょう。
+
+## シェーダーを更新する
+
+シェーダープログラム (およびシェーダーを初期化するコード) も、単色に代わりテクスチャを使用するように更新する必要があります。
+
+始めに `initShaders()` で必要になる、シンプルな変更点を見てみましょう:
+
+```js
+ textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+ gl.enableVertexAttribArray(textureCoordAttribute);
+```
+
+これは頂点の色属性を設定するコードを、各頂点のテクスチャ座標を包含するコードに置き換えます。
+
+### バーテックスシェーダー
+
+次にバーテックスシェーダーを、色のデータを取り出すものからテクスチャ座標のデータを取り出すものに置き換える必要があります。
+
+```html
+
+```
+
+重要な変更点は、頂点の色を取り出すのに代わりテクスチャ座標を設定していることです。これは頂点に対応する、テクスチャ内の位置を指し示します。
+
+### フラグメントシェーダー
+
+フラグメントシェーダーも同様に更新する必要があります:
+
+```html
+
+```
+
+色の値をフラグメントの色に割り当てるのに代わり、フラグメントの色は、サンプラーが最適とするフラグメントの位置のテクセル (テクスチャ内のピクセル) を取り出すことで算出されます。
+
+## テクスチャを貼り付けたキューブを描画する
+
+`drawScene()` 関数の変更点は簡単です (コードを明瞭にするために、キューブを空間中で動かすアニメーションのコードを取り除いて単に回転するようにした点は除きます)。
+
+色を割り当てるコードをテクスチャを割り当てるようにするためには、以下のように置き換えます:
+
+```js
+ gl.activeTexture(gl.TEXTURE0);
+ gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+ gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+```
+
+GL は 32 個のテクスチャレジスタを提供し、その 1 つ目が `gl.TEXTURE0` です。前に読み込んだテクスチャをそのレジスタに結びつけて、そのテクスチャを使用するためにシェーダーサンプラー `uSampler` (シェーダープログラムにより明示されます) を設定します。
+
+以上でテクスチャが貼り付けられた、回転するキューブが完成します。
+
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510)}}
+
+[コードを確認する](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [新しいページでデモを開く](http://mdn.github.io/webgl-examples/tutorial/sample6/)
+
+## クロスドメインのテクスチャ
+
+WebGL のテクスチャの読み込みは、クロスドメインアクセス制御に従います。コンテンツで他のドメインからテクスチャを読み込むためには、CORS で許可を得なければなりません。CORS について詳しくは、[HTTP access control](/ja/docs/HTTP_access_control "HTTP access control") をご覧ください。
+
+CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を [こちらの hacks.mozilla.org の記事](http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/) に掲載していますので、[サンプル](http://people.mozilla.org/~bjacob/webgltexture-cors-js.html) と合わせてご覧ください。
+
+> **Note:** **注記:** WebGL テクスチャ向けの CORS サポートと、画像要素の `crossOrigin` 属性は {{Gecko("8.0")}} で実装されました。
+
+汚染された (書き込みのみ) 2D canvas を WebGL のテクスチャとして使用することはできません。2D {{HTMLElement("canvas")}} が汚染されたとは例えば、クロスドメインの画像が canvas 上に描画された状態を指します。
+
+> **Note:** **注記:** Canvas 2D `drawImage` 向けの CORS サポートを {{Gecko("9.0")}} で実装しました。これは、CORS で許可されたクロスドメインの画像が 2D canvas を汚染しないので、2D canvas を WebGL のテクスチャ素材として引き続き使用できることを意味します。
+
+> **Note:** **注記:** クロスドメインの動画に対する CORS サポートと、{{HTMLElement("video")}} 要素の`crossorigin` 属性は {{Gecko("12.0")}} で実装されました。
+
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
diff --git a/files/ja/web/api/webgl_api/types/index.html b/files/ja/web/api/webgl_api/types/index.html
deleted file mode 100644
index f7d7222be3e98e..00000000000000
--- a/files/ja/web/api/webgl_api/types/index.html
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: WebGL の型
-slug: Web/API/WebGL_API/Types
-translation_of: Web/API/WebGL_API/Types
----
-{{WebGLSidebar}}
-
-WebGL インターフェースでは次の型が使用されます。
-
-WebGL 1
-
-これらの型は {{domxref("WebGLRenderingContext")}} 内で使用されます。
-
-
-
-
-
-
-
-
-
- GLenum |
- unsigned long |
-
- 列挙に使用されます。定数のリストも参照してください。
- |
-
-
- GLboolean |
- boolean |
- A {{jsxref("Boolean")}}. |
-
-
- GLbitfield |
- unsigned long |
- A bit field that stores multiple, logical bits. Used for example in {{domxref("WebGLRenderingContext.clear()")}}. |
-
-
- GLbyte |
- byte |
- 8-bit twos complement signed integer. |
-
-
- GLshort |
- short |
- 16-bit twos complement signed integer. |
-
-
- GLint |
- long |
- 32-bit twos complement signed integer. |
-
-
- GLsizei |
- long |
- Used for sizes (e.g. width and height of the drawing buffer). |
-
-
- GLintptr |
- long long |
- Special type for pointer arithmetic. |
-
-
- GLsizeiptr |
- long long |
- Special type for pointer arithmetic. |
-
-
- GLubyte |
- octet |
- 8-bit twos complement unsigned integer. |
-
-
- GLushort |
- unsigned short |
- 16-bit twos complement unsigned integer. |
-
-
- GLuint |
- unsigned long |
- 32-bit twos complement unsigned integer. |
-
-
- GLfloat |
- unrestricted float |
- 32-bit IEEE floating point number. |
-
-
- GLclampf |
- unrestricted float |
- Clamped 32-bit IEEE floating point number. |
-
-
-
-
-WebGL 2
-
-これらの型は {{domxref("WebGL2RenderingContext")}} で使用されます。すべての WebGL 1 タイプも使用されます。
-
-
-
-
-
-
-
-
-
- GLint64 |
- long long |
- 符号付き 64 ビット整数 |
-
-
-
-
-WebGL 拡張
-
-これらの型は、WebGL 拡張内で使用されます。
-
-
-
-
-
-
-
-
-
- GLuint64EXT |
- long long |
- 符号なし 64 ビット整数 |
-
-
-
-
-仕様
-
-
-
-
- | 仕様書 |
- ステータス |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.1", "Types")}} |
- {{Spec2('WebGL')}} |
- 初期定義 |
-
-
- | {{SpecName('WebGL2', "#3.1", "Types")}} |
- {{Spec2('WebGL2')}} |
- 追加のタイプを定義 |
-
-
- | {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} |
- {{Spec2('EXT_disjoint_timer_query')}} |
- GLuint64EXT の追加 |
-
-
-
-
-あわせて参照
-
-
- - {{domxref("WebGLRenderingContext")}}
-
diff --git a/files/ja/web/api/webgl_api/types/index.md b/files/ja/web/api/webgl_api/types/index.md
new file mode 100644
index 00000000000000..eba38f462a97bd
--- /dev/null
+++ b/files/ja/web/api/webgl_api/types/index.md
@@ -0,0 +1,57 @@
+---
+title: WebGL の型
+slug: Web/API/WebGL_API/Types
+translation_of: Web/API/WebGL_API/Types
+---
+{{WebGLSidebar}}
+
+[WebGL](/ja/docs/Web/API/WebGL_API) インターフェースでは次の型が使用されます。
+
+## WebGL 1
+
+これらの型は {{domxref("WebGLRenderingContext")}} 内で使用されます。
+
+| 型 | Web IDL 型 | 説明 |
+| ------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `GLenum` | `unsigned long` | 列挙に使用されます。[定数](/ja/docs/Web/API/WebGL_API/Constants)のリストも参照してください。 |
+| `GLboolean` | `boolean` | A {{jsxref("Boolean")}}. |
+| `GLbitfield` | `unsigned long` | A bit field that stores multiple, logical bits. Used for example in {{domxref("WebGLRenderingContext.clear()")}}. |
+| `GLbyte` | `byte` | 8-bit twos complement signed integer. |
+| `GLshort` | `short` | 16-bit twos complement signed integer. |
+| `GLint` | `long` | 32-bit twos complement signed integer. |
+| `GLsizei` | `long` | Used for sizes (e.g. width and height of the drawing buffer). |
+| `GLintptr` | `long long` | Special type for pointer arithmetic. |
+| `GLsizeiptr` | `long long` | Special type for pointer arithmetic. |
+| `GLubyte` | `octet` | 8-bit twos complement unsigned integer. |
+| `GLushort` | `unsigned short` | 16-bit twos complement unsigned integer. |
+| `GLuint` | `unsigned long` | 32-bit twos complement unsigned integer. |
+| `GLfloat` | `unrestricted float` | 32-bit IEEE floating point number. |
+| `GLclampf` | `unrestricted float` | Clamped 32-bit IEEE floating point number. |
+
+## WebGL 2
+
+これらの型は {{domxref("WebGL2RenderingContext")}} で使用されます。すべての WebGL 1 タイプも使用されます。
+
+| 型 | Web IDL 型 | 説明 |
+| --------- | ----------- | ---------------------- |
+| `GLint64` | `long long` | 符号付き 64 ビット整数 |
+
+## WebGL 拡張
+
+これらの型は、[WebGL 拡張](/ja/docs/Web/API/WebGL_API/Using_Extensions)内で使用されます。
+
+| 型 | Web IDL 型 | 説明 |
+| ------------- | ----------- | ---------------------- |
+| `GLuint64EXT` | `long long` | 符号なし 64 ビット整数 |
+
+## 仕様
+
+| 仕様書 | ステータス | コメント |
+| -------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName('WebGL', "#5.1", "Types")}} | {{Spec2('WebGL')}} | 初期定義 |
+| {{SpecName('WebGL2', "#3.1", "Types")}} | {{Spec2('WebGL2')}} | 追加のタイプを定義 |
+| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | `GLuint64EXT` の追加 |
+
+## あわせて参照
+
+- {{domxref("WebGLRenderingContext")}}
diff --git a/files/ja/web/api/webgl_api/webgl_best_practices/index.html b/files/ja/web/api/webgl_api/webgl_best_practices/index.html
deleted file mode 100644
index 6ff029061295ef..00000000000000
--- a/files/ja/web/api/webgl_api/webgl_best_practices/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: WebGL best practices
-slug: Web/API/WebGL_API/WebGL_best_practices
-tags:
- - WebGL
-translation_of: Web/API/WebGL_API/WebGL_best_practices
----
-{{WebGLSidebar}}
-
-この文書は WebGL を使ったコンテンツの向上のための Tips について書きます。これらの提案に従うことで、多くの機器への互換性を高めたり、パフォーマンスを上げることにもなります。
-
-避けたほうがいいこと
-
-
- - WebGL のエラーを出さないように注意しましょう。エラーは
getError() で得られますが、Firefox では webgl.verbose の設定を有効にすることで、ウェブコンソールに WebGL のエラーと警告を出力します。ユーザーのコンソールにエラーを吐き出す必要はないでしょう？（訳註：パフォーマンスの理由もある。下参照）
- #ifdef GL_ES は絶対に使ってはいけません。初期の例ではこれが使われていましたが、WebGL では必ず true になるので必要ありません。- フラグメントシェーダで
highp 精度を使うのはやめましょう。mediump を代わりに使いましょう。highp を使うと今のモバイルのハードウェアのほとんどで動きません。Firefox 11 からは getShaderPrecisionFormat() 関数が実装されるので、highp 精度が使えるかどうかだけでなく、それぞれの精度の名称について実際の精度を知ることができます。
-
-
-覚えておいたほうがいいこと
-
-
- - WebGL の機能の中にはクライアントによって制限があるものがあります。そういうものを使う前には
getParameter() を使って調べましょう。例えば、2D テクスチャのサイズは webgl.getParameter(webgl.MAX_TEXTURE_SIZE) でわかります。Firefox 10 からは webgl.min_capability_mode の設定があり、最低限の機能の環境をシミュレートすることができます。
- - 特に、頂点シェーダでのテクスチャの使用は
webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS)がゼロより大きくなければ使えません。現在のモバイルのハードウェアではまず使えないでしょう。
- - WebGL の拡張が使えるかどうかはクライアントに依存します。できるならそれらの使用をオプションとし、サポートされていない環境にも対応できるようにしましょう。Firefox 10 からは
webgl.disable-extensions の設定があり、拡張のない環境をシミュレートすることができます。
- OES_texture_float 拡張がサポートされていたとしても、浮動小数点数テクスチャへのレンダリングはサポートされていないかもしれません。モバイルのハードウェアではまず動かないでしょう。サポートされているかを調べるには checkFramebufferStatus() を使ってください。
-
-一般的なパフォーマンスの tips
-
-
- - CPU と GPU の同期を必要とするものはすべて、とても遅い可能性があり、メインのレンダリングループでは避けたほうがいいでしょう。
getError()、readPixels()、finish() などの関数がそれです。getParameter() や getUniformLocation() といった WebGL のゲッタも遅いので、JS 側で変数にキャッシュしてください。
- - 大きい描画を少数だけしたほうがパフォーマンスが向上します（訳註：小さな描画をたくさん行うより）。1000 回の小さなものを描画するなら、一回の
drawArrays() や drawElements() でやりましょう。一回の drawArrays() で離れたオブジェクトを描画するなら、3 点が一直線上にある三角形が使えます。
- - 状態の変更が少ないほどパフォーマンスが向上します。特に、複数の画像をひとつのテクスチャにまとめて適切な座標を使うことでバインドしているテクスチャの変更が少なくて済みます。
- - 小さなテクスチャは大きなテクスチャよりパフォーマンスが良いです。そのため mipmap が有効です。
- - 簡単なシェーダーは複雑なものよりもパフォーマンスが良いです。特に、
if 文を減らせば速くなります。割り算や log() などの数学の演算もコストが高いです。
-
-
-参照
-
-
diff --git a/files/ja/web/api/webgl_api/webgl_best_practices/index.md b/files/ja/web/api/webgl_api/webgl_best_practices/index.md
new file mode 100644
index 00000000000000..5cbef7ef8f3056
--- /dev/null
+++ b/files/ja/web/api/webgl_api/webgl_best_practices/index.md
@@ -0,0 +1,35 @@
+---
+title: WebGL best practices
+slug: Web/API/WebGL_API/WebGL_best_practices
+tags:
+ - WebGL
+translation_of: Web/API/WebGL_API/WebGL_best_practices
+---
+{{WebGLSidebar}}
+
+この文書は WebGL を使ったコンテンツの向上のための Tips について書きます。これらの提案に従うことで、多くの機器への互換性を高めたり、パフォーマンスを上げることにもなります。
+
+## 避けたほうがいいこと
+
+- WebGL のエラーを出さないように注意しましょう。エラーは `getError()` で得られますが、Firefox では `webgl.verbose` の設定を有効にすることで、ウェブコンソールに WebGL のエラーと警告を出力します。ユーザーのコンソールにエラーを吐き出す必要はないでしょう？（訳註：パフォーマンスの理由もある。下参照）
+- `#ifdef GL_ES` は絶対に使ってはいけません。初期の例ではこれが使われていましたが、WebGL では必ず true になるので必要ありません。
+- フラグメントシェーダで `highp` 精度を使うのはやめましょう。`mediump` を代わりに使いましょう。`highp` を使うと今のモバイルのハードウェアのほとんどで動きません。Firefox 11 からは `getShaderPrecisionFormat()` 関数が実装されるので、`highp` 精度が使えるかどうかだけでなく、それぞれの精度の名称について実際の精度を知ることができます。
+
+## 覚えておいたほうがいいこと
+
+- WebGL の機能の中にはクライアントによって制限があるものがあります。そういうものを使う前には `getParameter()` を使って調べましょう。例えば、2D テクスチャのサイズは `webgl.getParameter(webgl.MAX_TEXTURE_SIZE)` でわかります。Firefox 10 からは `webgl.min_capability_mode` の設定があり、最低限の機能の環境をシミュレートすることができます。
+- 特に、頂点シェーダでのテクスチャの使用は `webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS)`がゼロより大きくなければ使えません。現在のモバイルのハードウェアではまず使えないでしょう。
+- WebGL の拡張が使えるかどうかはクライアントに依存します。できるならそれらの使用をオプションとし、サポートされていない環境にも対応できるようにしましょう。Firefox 10 からは `webgl.disable-extensions` の設定があり、拡張のない環境をシミュレートすることができます。
+- `OES_texture_float` 拡張がサポートされていたとしても、浮動小数点数テクスチャへのレンダリングはサポートされていないかもしれません。モバイルのハードウェアではまず動かないでしょう。サポートされているかを調べるには `checkFramebufferStatus()` を使ってください。
+
+## 一般的なパフォーマンスの tips
+
+- CPU と GPU の同期を必要とするものはすべて、とても遅い可能性があり、メインのレンダリングループでは避けたほうがいいでしょう。`getError()`、`readPixels()`、`finish()` などの関数がそれです。`getParameter()` や `getUniformLocation()` といった WebGL のゲッタも遅いので、JS 側で変数にキャッシュしてください。
+- 大きい描画を少数だけしたほうがパフォーマンスが向上します（訳註：小さな描画をたくさん行うより）。1000 回の小さなものを描画するなら、一回の `drawArrays()` や `drawElements()` でやりましょう。一回の `drawArrays()` で離れたオブジェクトを描画するなら、3 点が一直線上にある三角形が使えます。
+- 状態の変更が少ないほどパフォーマンスが向上します。特に、複数の画像をひとつのテクスチャにまとめて適切な座標を使うことでバインドしているテクスチャの変更が少なくて済みます。
+- 小さなテクスチャは大きなテクスチャよりパフォーマンスが良いです。そのため mipmap が有効です。
+- 簡単なシェーダーは複雑なものよりもパフォーマンスが良いです。特に、`if` 文を減らせば速くなります。割り算や `log()` などの数学の演算もコストが高いです。
+
+## 参照
+
+- [WebGL](/ja/WebGL "WebGL")
diff --git a/files/ja/web/api/webglrenderingcontext/attachshader/index.html b/files/ja/web/api/webglrenderingcontext/attachshader/index.html
deleted file mode 100644
index d90cf29dd175bf..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/attachshader/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: WebGLRenderingContext.attachShader()
-slug: Web/API/WebGLRenderingContext/attachShader
-translation_of: Web/API/WebGLRenderingContext/attachShader
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.attachShader() メソッドは、フラグメントか頂点のどちらかの {{domxref("WebGLShader")}} を {{domxref("WebGLProgram")}} にアタッチします。
-
-構文
-
-void gl.attachShader(program, shader);
-
-
-引数
-
-
- program- {{domxref("WebGLProgram")}}。
- shader- フラグメントか頂点の {{domxref("WebGLShader")}}。
-
-
-例
-
-以下は既存のシェーダーを {{domxref("WebGLProgram")}} にアタッチするコードです。
-
-var program = gl.createProgram();
-
-// Attach pre-existing shaders
-gl.attachShader(program, vertexShader);
-gl.attachShader(program, fragmentShader);
-
-gl.linkProgram(program);
-
-if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
- var info = gl.getProgramInfoLog(program);
- throw 'Could not compile WebGL program. \n\n' + info;
-}
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.9", "attachShader")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL マニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.attachShader")}}
-
-関連項目
-
-
- - {{domxref("WebGLProgram")}}
- - {{domxref("WebGLShader")}}
- - {{domxref("WebGLRenderingContext.attachShader()")}}
- - {{domxref("WebGLRenderingContext.compileShader()")}}
- - {{domxref("WebGLRenderingContext.createProgram()")}}
- - {{domxref("WebGLRenderingContext.createShader()")}}
- - {{domxref("WebGLRenderingContext.deleteProgram()")}}
- - {{domxref("WebGLRenderingContext.deleteShader()")}}
- - {{domxref("WebGLRenderingContext.detachShader()")}}
- - {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
- - {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- - {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
- - {{domxref("WebGLRenderingContext.getShaderParameter()")}}
- - {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
- - {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
- - {{domxref("WebGLRenderingContext.getShaderSource()")}}
- - {{domxref("WebGLRenderingContext.isProgram()")}}
- - {{domxref("WebGLRenderingContext.isShader()")}}
- - {{domxref("WebGLRenderingContext.linkProgram()")}}
- - {{domxref("WebGLRenderingContext.shaderSource()")}}
- - {{domxref("WebGLRenderingContext.useProgram()")}}
- - {{domxref("WebGLRenderingContext.validateProgram()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/attachshader/index.md b/files/ja/web/api/webglrenderingcontext/attachshader/index.md
new file mode 100644
index 00000000000000..642a205d5bb05d
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/attachshader/index.md
@@ -0,0 +1,74 @@
+---
+title: WebGLRenderingContext.attachShader()
+slug: Web/API/WebGLRenderingContext/attachShader
+translation_of: Web/API/WebGLRenderingContext/attachShader
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **WebGLRenderingContext.attachShader()** メソッドは、フラグメントか頂点のどちらかの {{domxref("WebGLShader")}} を {{domxref("WebGLProgram")}} にアタッチします。
+
+## 構文
+
+ void gl.attachShader(program, shader);
+
+### 引数
+
+- `program`
+ - : {{domxref("WebGLProgram")}}。
+- `shader`
+ - : フラグメントか頂点の {{domxref("WebGLShader")}}。
+
+## 例
+
+以下は既存のシェーダーを {{domxref("WebGLProgram")}} にアタッチするコードです。
+
+```js
+var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+ var info = gl.getProgramInfoLog(program);
+ throw 'Could not compile WebGL program. \n\n' + info;
+}
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "attachShader")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL マニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.attachShader")}}
+
+## 関連項目
+
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html b/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html
deleted file mode 100644
index 389d2494c8333f..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/bindbuffer/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: WebGLRenderingContext.bindBuffer()
-slug: Web/API/WebGLRenderingContext/bindBuffer
-translation_of: Web/API/WebGLRenderingContext/bindBuffer
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.bindBuffer() メソッドは、与えられた {{domxref("WebGLBuffer")}} をターゲットに結合します。
-
-構文
-
-void gl.bindBuffer(target, buffer);
-
-
-引数
-
-
- - target
- - 結合する場所 (ターゲット) の {{domxref("GLenum")}} です。以下の値を与えることができます。
-
- gl.ARRAY_BUFFER: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。gl.ELEMENT_ARRAY_BUFFER: 要素の位置指定に使われるバッファーです。- {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更に以下の値を利用することができます。
-
- gl.COPY_READ_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。gl.COPY_WRITE_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。gl.TRANSFORM_FEEDBACK_BUFFER: 書き戻し操作を変換するバッファーです。gl.UNIFORM_BUFFER: ユニフォームブロックの格納に使われるバッファーです。gl.PIXEL_PACK_BUFFER: ピクセル移動操作に使われるバッファーです。gl.PIXEL_UNPACK_BUFFER: ピクセル移動操作に使われるバッファーです。
-
-
-
- - buffer
- - 結合する {{domxref("WebGLBuffer")}} です。
-
-
-返り値
-
-ありません。
-
-例外
-
-一つのターゲットにのみ {{domxref("WebGLBuffer")}} を結合できます。バッファーを他のターゲットに結合しようとすると、INVALID_OPERATION エラーをスローして現在のバッファ結合を同じままにします。
-
-{{domxref("WebGLBuffer")}} が {{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}} によって削除されるようにマークされると、(再び) 結合できなくなります。そうしようとしても INVALID_OPERATION エラーが生成されて、現在の結合は変更されません。
-
-例
-
-バッファーをターゲットに結合
-
-var canvas = document.getElementById('canvas');
-var gl = canvas.getContext('webgl');
-var buffer = gl.createBuffer();
-
-gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-
-
-現在結合されているものの取得
-
-現在のバッファー結合を確認するには、ARRAY_BUFFER_BINDING や ELEMENT_ARRAY_BUFFER_BINDING の定数で問い合わせます。
-
-gl.getParameter(gl.ARRAY_BUFFER_BINDING);
-gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.5", "bindBuffer")}} |
- {{Spec2('WebGL')}} |
- WebGL 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL ES 2 API (と同様な) マニュアルページ。 |
-
-
- | {{SpecName('WebGL2', "#3.7.1", "bindBuffer")}} |
- {{Spec2('WebGL2')}} |
-
- WebGL 2 のために定義を更新。
-
- 以下の新しい target バッファーを追加。
- gl.COPY_READ_BUFFER,
- gl.COPY_WRITE_BUFFER,
- gl.TRANSFORM_FEEDBACK_BUFFER,
- gl.UNIFORM_BUFFER,
- gl.PIXEL_PACK_BUFFER,
- gl.PIXEL_UNPACK_BUFFER
- |
-
-
- | {{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}} |
- {{Spec2('OpenGL ES 3.0')}} |
- OpenGL ES 3 API (と同様な) マニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.bindBuffer")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.createBuffer()")}}
- - {{domxref("WebGLRenderingContext.deleteBuffer()")}}
- - {{domxref("WebGLRenderingContext.isBuffer()")}}
- - 他のバッファ: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/bindbuffer/index.md b/files/ja/web/api/webglrenderingcontext/bindbuffer/index.md
new file mode 100644
index 00000000000000..db54cbeda30d6b
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/bindbuffer/index.md
@@ -0,0 +1,82 @@
+---
+title: WebGLRenderingContext.bindBuffer()
+slug: Web/API/WebGLRenderingContext/bindBuffer
+translation_of: Web/API/WebGLRenderingContext/bindBuffer
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.bindBuffer()`** メソッドは、与えられた {{domxref("WebGLBuffer")}} をターゲットに結合します。
+
+## 構文
+
+ void gl.bindBuffer(target, buffer);
+
+### 引数
+
+- target
+
+ - : 結合する場所 (ターゲット) の {{domxref("GLenum")}} です。以下の値を与えることができます。\* `gl.ARRAY_BUFFER`: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。
+
+ - `gl.ELEMENT_ARRAY_BUFFER`: 要素の位置指定に使われるバッファーです。
+ - {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更に以下の値を利用することができます。
+
+ - `gl.COPY_READ_BUFFER`: バッファーオブジェクトを他へコピーするためのバッファーです。
+ - `gl.COPY_WRITE_BUFFER`: バッファーオブジェクトを他へコピーするためのバッファーです。
+ - `gl.TRANSFORM_FEEDBACK_BUFFER`: 書き戻し操作を変換するバッファーです。
+ - `gl.UNIFORM_BUFFER`: ユニフォームブロックの格納に使われるバッファーです。
+ - `gl.PIXEL_PACK_BUFFER`: ピクセル移動操作に使われるバッファーです。
+ - `gl.PIXEL_UNPACK_BUFFER`: ピクセル移動操作に使われるバッファーです。
+
+- buffer
+ - : 結合する {{domxref("WebGLBuffer")}} です。
+
+### 返り値
+
+ありません。
+
+### 例外
+
+一つのターゲットにのみ {{domxref("WebGLBuffer")}} を結合できます。バッファーを他のターゲットに結合しようとすると、`INVALID_OPERATION` エラーをスローして現在のバッファ結合を同じままにします。
+
+{{domxref("WebGLBuffer")}} が {{domxref("WebGLRenderingContext.deleteBuffer()", "deleteBuffer")}} によって削除されるようにマークされると、(再び) 結合できなくなります。そうしようとしても `INVALID_OPERATION` エラーが生成されて、現在の結合は変更されません。
+
+## 例
+
+### バッファーをターゲットに結合
+
+```js
+var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+```
+
+### 現在結合されているものの取得
+
+現在のバッファー結合を確認するには、`ARRAY_BUFFER_BINDING` や `ELEMENT_ARRAY_BUFFER_BINDING` の定数で問い合わせます。
+
+```js
+gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('WebGL', "#5.14.5", "bindBuffer")}} | {{Spec2('WebGL')}} | WebGL 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL ES 2 API (と同様な) マニュアルページ。 |
+| {{SpecName('WebGL2', "#3.7.1", "bindBuffer")}} | {{Spec2('WebGL2')}} | WebGL 2 のために定義を更新。以下の新しい `target` バッファーを追加。 `gl.COPY_READ_BUFFER`, `gl.COPY_WRITE_BUFFER`, `gl.TRANSFORM_FEEDBACK_BUFFER`, `gl.UNIFORM_BUFFER`, `gl.PIXEL_PACK_BUFFER`, `gl.PIXEL_UNPACK_BUFFER` |
+| {{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}} | {{Spec2('OpenGL ES 3.0')}} | OpenGL ES 3 API (と同様な) マニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.bindBuffer")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
+- 他のバッファ: {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/ja/web/api/webglrenderingcontext/bufferdata/index.html b/files/ja/web/api/webglrenderingcontext/bufferdata/index.html
deleted file mode 100644
index bbadfe5f347028..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/bufferdata/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: WebGLRenderingContext.bufferData()
-slug: Web/API/WebGLRenderingContext/bufferData
-translation_of: Web/API/WebGLRenderingContext/bufferData
----
-{{APIRef("WebGL")}}
-
-WebGL API WebGLRenderingContext.bufferData() メソッドは、バッファーオブジェクトのデータストアを初期化、作成します。
-
-構文
-
-// WebGL1:
-void gl.bufferData(target, size, usage);
-void gl.bufferData(target, ArrayBuffer? srcData, usage);
-void gl.bufferData(target, ArrayBufferView srcData, usage);
-
-// WebGL2:
-void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length);
-
-
-引数
-
-
- - target
- - 結合する場所 (ターゲット) を指定する {{domxref("GLenum")}}。以下の値を取ることができます。
-
- gl.ARRAY_BUFFER: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。gl.ELEMENT_ARRAY_BUFFER: 要素の位置指定に使用されるバッファーです。- {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更にに以下の値を利用できます。
-
- gl.COPY_READ_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。gl.COPY_WRITE_BUFFER: バッファーオブジェクトを他へコピーするためのバッファーです。gl.TRANSFORM_FEEDBACK_BUFFER: 書き戻し操作を変換するバッファーです。gl.UNIFORM_BUFFER: ユニフォームブロックの格納に使われるバッファーです。gl.PIXEL_PACK_BUFFER: ピクセル移動操作に使われるバッファーです。gl.PIXEL_UNPACK_BUFFER: ピクセル移動操作に使われるバッファーです。
-
-
-
- - size
- - {{domxref("GLsizeiptr")}} のバッファーオブジェクトのデータストアのサイズ。
- - srcData {{optional_inline}}
- - {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} か {{domxref("ArrayBufferView")}} の型付き配列型の一つで、データストアへ格納されます。
null の場合、データストアは作成されますが、内容は初期化されず未定義です。
- - usage
- - データストアの用途を指定する {{domxref("GLenum")}}。以下の値を取ることができます。
-
- gl.STATIC_DRAW: バッファーの内容は、何度か使用されてあまり変更されません。バッファーへ書き込まれますが、読み出せません。gl.DYNAMIC_DRAW: バッファーの内容は、よく使用されて何度か変更されます。バッファーへ書き込まれますが、読み出せません。gl.STREAM_DRAW: バッファーの内容は、よく使用され変更されます。バッファーへ書き込まれますが、読み出せません。- {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合、さらに以下の値を取ることができます。
-
- gl.STATIC_READ: バッファーの内容は、何度か使用されてあまり変更されません。バッファーから読み出されますが、書き込めません。gl.DYNAMIC_READ: バッファーの内容は、よく使用されて何度か変更されます。バッファーから読み出されますが、書き込めません。gl.STREAM_READ: バッファーの内容は、よく使用され変更されます。バッファーから読み出されますが、書き込めません。gl.STATIC_COPY: バッファーの内容は、何度か使用されてあまり変更されません。ユーザーによる書き込みや読み出しはできません。gl.DYNAMIC_COPY: バッファーの内容は、よく使用されて何度か変更されます。ユーザーによる書き込みや読み出しはできません。gl.STREAM_COPY: バッファーの内容は、よく使用され変更されます。ユーザーによる書き込みや読み出しはできません。
-
-
-
- - srcOffset
- - バッファー読み出しを開始する要素の位置のオフセットを指定する {{domxref("GLuint")}}。
- length {{optional_inline}}- {{domxref("GLuint")}}。既定値は 0 です。
-
-
-返り値
-
-ありません。
-
-例外
-
-
- - 与えられた
size でデータストアを作成できない場合、gl.OUT_OF_MEMORY エラーをスローします。
- size が負数の場合、gl.INVALID_VALUE エラーをスローします。target や usage が許可された列挙のものでない場合、gl.INVALID_ENUM エラーをスローします。
-
-例
-
-bufferData の使用
-
-var canvas = document.getElementById('canvas');
-var gl = canvas.getContext('webgl');
-var buffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
-
-
-バッファー情報の取得
-
-現在のバッファーの用途やサイズを確認するには、{{domxref("WebGLRenderingContext.getBufferParameter()")}} メソッドを使用します。
-
-gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
-gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.5", "bufferData")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
- | {{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}} |
- {{Spec2('OpenGL ES 3.0')}} |
- OpenGL ES 3 API (と同様の) マニュアルページ。
-
- 以下の新しい target バッファーを追加。
- gl.COPY_READ_BUFFER,
- gl.COPY_WRITE_BUFFER,
- gl.TRANSFORM_FEEDBACK_BUFFER,
- gl.UNIFORM_BUFFER,
- gl.PIXEL_PACK_BUFFER,
- gl.PIXEL_UNPACK_BUFFER
-
- 以下の新しい usage ヒントを追加。
- gl.STATIC_READ,
- gl.DYNAMIC_READ,
- gl.STREAM_READ,
- gl.STATIC_COPY,
- gl.DYNAMIC_COPY,
- gl.STREAM_COPY. |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.bufferData")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.createBuffer()")}}
- - {{domxref("WebGLRenderingContext.bufferSubData()")}}
- - 他のバッファー : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/bufferdata/index.md b/files/ja/web/api/webglrenderingcontext/bufferdata/index.md
new file mode 100644
index 00000000000000..1e18f144a5af1d
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/bufferdata/index.md
@@ -0,0 +1,107 @@
+---
+title: WebGLRenderingContext.bufferData()
+slug: Web/API/WebGLRenderingContext/bufferData
+translation_of: Web/API/WebGLRenderingContext/bufferData
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) **`WebGLRenderingContext.bufferData()`** メソッドは、バッファーオブジェクトのデータストアを初期化、作成します。
+
+## 構文
+
+ // WebGL1:
+ void gl.bufferData(target, size, usage);
+ void gl.bufferData(target, ArrayBuffer? srcData, usage);
+ void gl.bufferData(target, ArrayBufferView srcData, usage);
+
+ // WebGL2:
+ void gl.bufferData(target, ArrayBufferView srcData, usage, srcOffset, length);
+
+### 引数
+
+- target
+
+ - : 結合する場所 (ターゲット) を指定する {{domxref("GLenum")}}。以下の値を取ることができます。\* `gl.ARRAY_BUFFER`: 頂点の属性を含むバッファーで、頂点座標、テクスチャ座標データや、頂点色データのようなものです。
+
+ - `gl.ELEMENT_ARRAY_BUFFER`: 要素の位置指定に使用されるバッファーです。
+ - {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合は、更にに以下の値を利用できます。
+
+ - `gl.COPY_READ_BUFFER`: バッファーオブジェクトを他へコピーするためのバッファーです。
+ - `gl.COPY_WRITE_BUFFER`: バッファーオブジェクトを他へコピーするためのバッファーです。
+ - `gl.TRANSFORM_FEEDBACK_BUFFER`: 書き戻し操作を変換するバッファーです。
+ - `gl.UNIFORM_BUFFER`: ユニフォームブロックの格納に使われるバッファーです。
+ - `gl.PIXEL_PACK_BUFFER`: ピクセル移動操作に使われるバッファーです。
+ - `gl.PIXEL_UNPACK_BUFFER`: ピクセル移動操作に使われるバッファーです。
+
+- size
+ - : {{domxref("GLsizeiptr")}} のバッファーオブジェクトのデータストアのサイズ。
+- srcData {{optional_inline}}
+ - : {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} か {{domxref("ArrayBufferView")}} の型付き配列型の一つで、データストアへ格納されます。`null` の場合、データストアは作成されますが、内容は初期化されず未定義です。
+- usage
+
+ - : データストアの用途を指定する {{domxref("GLenum")}}。以下の値を取ることができます。\* `gl.STATIC_DRAW`: バッファーの内容は、何度か使用されてあまり変更されません。バッファーへ書き込まれますが、読み出せません。
+
+ - `gl.DYNAMIC_DRAW`: バッファーの内容は、よく使用されて何度か変更されます。バッファーへ書き込まれますが、読み出せません。
+ - `gl.STREAM_DRAW`: バッファーの内容は、よく使用され変更されます。バッファーへ書き込まれますが、読み出せません。
+ - {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} を使用している場合、さらに以下の値を取ることができます。
+
+ - `gl.STATIC_READ`: バッファーの内容は、何度か使用されてあまり変更されません。バッファーから読み出されますが、書き込めません。
+ - `gl.DYNAMIC_READ`: バッファーの内容は、よく使用されて何度か変更されます。バッファーから読み出されますが、書き込めません。
+ - `gl.STREAM_READ`: バッファーの内容は、よく使用され変更されます。バッファーから読み出されますが、書き込めません。
+ - `gl.STATIC_COPY`: バッファーの内容は、何度か使用されてあまり変更されません。ユーザーによる書き込みや読み出しはできません。
+ - `gl.DYNAMIC_COPY`: バッファーの内容は、よく使用されて何度か変更されます。ユーザーによる書き込みや読み出しはできません。
+ - `gl.STREAM_COPY`: バッファーの内容は、よく使用され変更されます。ユーザーによる書き込みや読み出しはできません。
+
+- srcOffset
+ - : バッファー読み出しを開始する要素の位置のオフセットを指定する {{domxref("GLuint")}}。
+- `length` {{optional_inline}}
+ - : {{domxref("GLuint")}}。既定値は 0 です。
+
+### 返り値
+
+ありません。
+
+### 例外
+
+- 与えられた `size` でデータストアを作成できない場合、`gl.OUT_OF_MEMORY` エラーをスローします。
+- `size` が負数の場合、`gl.INVALID_VALUE` エラーをスローします。
+- `target` や `usage` が許可された列挙のものでない場合、`gl.INVALID_ENUM` エラーをスローします。
+
+## 例
+
+### `bufferData` の使用
+
+```js
+var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
+```
+
+### バッファー情報の取得
+
+現在のバッファーの用途やサイズを確認するには、{{domxref("WebGLRenderingContext.getBufferParameter()")}} メソッドを使用します。
+
+```js
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('WebGL', "#5.14.5", "bufferData")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+| {{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}} | {{Spec2('OpenGL ES 3.0')}} | OpenGL ES 3 API (と同様の) マニュアルページ。 以下の新しい `target` バッファーを追加。 `gl.COPY_READ_BUFFER`, `gl.COPY_WRITE_BUFFER`, `gl.TRANSFORM_FEEDBACK_BUFFER`, `gl.UNIFORM_BUFFER`, `gl.PIXEL_PACK_BUFFER`, `gl.PIXEL_UNPACK_BUFFER` 以下の新しい `usage` ヒントを追加。 `gl.STATIC_READ`, `gl.DYNAMIC_READ`, `gl.STREAM_READ`, `gl.STATIC_COPY`, `gl.DYNAMIC_COPY`, `gl.STREAM_COPY`. |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.bufferData")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.bufferSubData()")}}
+- 他のバッファー : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/ja/web/api/webglrenderingcontext/clear/index.html b/files/ja/web/api/webglrenderingcontext/clear/index.html
deleted file mode 100644
index 4c5f5943e90b84..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/clear/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: WebGLRenderingContext.clear()
-slug: Web/API/WebGLRenderingContext/clear
-translation_of: Web/API/WebGLRenderingContext/clear
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.clear() メソッドは、バッファーをプリセット値で消去します。
-
-プリセット値は、{{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} や {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} で設定可能です。
-
-シザーボックス、ディザリング、バッファー書き込みマスクは clear() メソッドに影響します。
-
-構文
-
-void gl.clear(mask);
-
-
-引数
-
-
- mask- 消去されるバッファーを示す {{domxref("GLbitfield")}} のビット論理和マスクです。以下の値を取ることができます。
-
- gl.COLOR_BUFFER_BITgl.DEPTH_BUFFER_BITgl.STENCIL_BUFFER_BIT
-
-
-
-返り値
-
-ありません。
-
-例外
-
-mask が記載した値のうちどれでもない場合、gl.INVALID_ENUM エラーがスローされます。
-
-例
-
-clear() メソッドは複数の値を受け入れることができます。
-
-gl.clear(gl.DEPTH_BUFFER_BIT);
-gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
-
-
-現在の消去する値を取得するには、COLOR_CLEAR_VALUE, DEPTH_CLEAR_VALUE, や STENCIL_CLEAR_VALUE 定数で問い合わせます。
-
-gl.getParameter(gl.COLOR_CLEAR_VALUE);
-gl.getParameter(gl.DEPTH_CLEAR_VALUE);
-gl.getParameter(gl.STENCIL_CLEAR_VALUE);
-
-
-仕様策定状況
-
-
-
-
- | 仕様書 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.11", "clear")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.clear")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.clearColor()")}}
- - {{domxref("WebGLRenderingContext.clearDepth()")}}
- - {{domxref("WebGLRenderingContext.clearStencil()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/clear/index.md b/files/ja/web/api/webglrenderingcontext/clear/index.md
new file mode 100644
index 00000000000000..c0e6da7cb6bcaa
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/clear/index.md
@@ -0,0 +1,65 @@
+---
+title: WebGLRenderingContext.clear()
+slug: Web/API/WebGLRenderingContext/clear
+translation_of: Web/API/WebGLRenderingContext/clear
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.clear()`** メソッドは、バッファーをプリセット値で消去します。
+
+プリセット値は、{{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} や {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}} で設定可能です。
+
+シザーボックス、ディザリング、バッファー書き込みマスクは `clear()` メソッドに影響します。
+
+## 構文
+
+ void gl.clear(mask);
+
+### 引数
+
+- `mask`
+ - : 消去されるバッファーを示す {{domxref("GLbitfield")}} のビット論理和マスクです。以下の値を取ることができます。\* `gl.COLOR_BUFFER_BIT`
+ - `gl.DEPTH_BUFFER_BIT`
+ - `gl.STENCIL_BUFFER_BIT`
+
+### 返り値
+
+ありません。
+
+### 例外
+
+_mask_ が記載した値のうちどれでもない場合、`gl.INVALID_ENUM` エラーがスローされます。
+
+## 例
+
+`clear()` メソッドは複数の値を受け入れることができます。
+
+```js
+gl.clear(gl.DEPTH_BUFFER_BIT);
+gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
+```
+
+現在の消去する値を取得するには、`COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE`, や `STENCIL_CLEAR_VALUE` 定数で問い合わせます。
+
+```js
+gl.getParameter(gl.COLOR_CLEAR_VALUE);
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+```
+
+## 仕様策定状況
+
+| 仕様書 | 策定状況 | コメント |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.11", "clear")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.clear")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.clearColor()")}}
+- {{domxref("WebGLRenderingContext.clearDepth()")}}
+- {{domxref("WebGLRenderingContext.clearStencil()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/clearcolor/index.html b/files/ja/web/api/webglrenderingcontext/clearcolor/index.html
deleted file mode 100644
index bad89ad5081af0..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/clearcolor/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: WebGLRenderingContext.clearColor()
-slug: Web/API/WebGLRenderingContext/clearColor
-translation_of: Web/API/WebGLRenderingContext/clearColor
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.clearColor() メソッドは、カラーバッファーの消去に使われる色の値を指定します。
-
-この指定は {{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼んだときに使用される色です。値は 0 から 1 に丸められます。
-
-構文
-
-void gl.clearColor(red, green, blue, alpha);
-
-
-引数
-
-
- red- 赤色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
- green- 緑色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
- blue- 青色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
- alpha- アルファ (不透明度) を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
-
-
-返り値
-
-ありません。
-
-例
-
-gl.clearColor(1, 0.5, 0.5, 3);
-
-
-現在の消去に使われる色を取得するには、COLOR_CLEAR_VALUE 定数で問い合わせると {{jsxref("Float32Array")}} を返します。
-
-gl.getParameter(gl.COLOR_CLEAR_VALUE);
-// Float32Array[1, 0.5, 0.5, 1]
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.3", "clearColor")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.clearColor")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.clear()")}}
- - {{domxref("WebGLRenderingContext.clearDepth()")}}
- - {{domxref("WebGLRenderingContext.clearStencil()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/clearcolor/index.md b/files/ja/web/api/webglrenderingcontext/clearcolor/index.md
new file mode 100644
index 00000000000000..2132c1d25d0e18
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/clearcolor/index.md
@@ -0,0 +1,59 @@
+---
+title: WebGLRenderingContext.clearColor()
+slug: Web/API/WebGLRenderingContext/clearColor
+translation_of: Web/API/WebGLRenderingContext/clearColor
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.clearColor()`** メソッドは、カラーバッファーの消去に使われる色の値を指定します。
+
+この指定は {{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼んだときに使用される色です。値は 0 から 1 に丸められます。
+
+## 構文
+
+ void gl.clearColor(red, green, blue, alpha);
+
+### 引数
+
+- `red`
+ - : 赤色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+- `green`
+ - : 緑色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+- `blue`
+ - : 青色を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+- `alpha`
+ - : アルファ (不透明度) を指定する {{domxref("GLclampf")}} で、カラーバッファーの消去に使われます。既定値は 0 です。
+
+### 返り値
+
+ありません。
+
+## 例
+
+```js
+gl.clearColor(1, 0.5, 0.5, 3);
+```
+
+現在の消去に使われる色を取得するには、`COLOR_CLEAR_VALUE` 定数で問い合わせると {{jsxref("Float32Array")}} を返します。
+
+```js
+gl.getParameter(gl.COLOR_CLEAR_VALUE);
+// Float32Array[1, 0.5, 0.5, 1]
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.3", "clearColor")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glClearColor.xml", "glClearColor")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.clearColor")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.clear()")}}
+- {{domxref("WebGLRenderingContext.clearDepth()")}}
+- {{domxref("WebGLRenderingContext.clearStencil()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/cleardepth/index.html b/files/ja/web/api/webglrenderingcontext/cleardepth/index.html
deleted file mode 100644
index 6983f96b492f95..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/cleardepth/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: WebGLRenderingContext.clearDepth()
-slug: Web/API/WebGLRenderingContext/clearDepth
-translation_of: Web/API/WebGLRenderingContext/clearDepth
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.clearDepth() メソッドは、深度バッファーを消去する値を指定します。
-
-この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用される深度の数値です。値は 0 から 1 に丸められます。
-
-構文
-
-void gl.clearDepth(depth);
-
-
-引数
-
-
- depth- 深度の値を指定する {{domxref("GLclampf")}} で、深度バッファーを消去するときに使われる値です。既定値は 1 です。
-
-
-返り値
-
-ありません。
-
-例
-
-gl.clearDepth(0.5);
-
-
-現在の深度を消去する値を取得するには、DEPTH_CLEAR_VALUE 定数で問い合わせます。
-
-gl.getParameter(gl.DEPTH_CLEAR_VALUE);
-// 0.5
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.3", "clearDepth")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glClearDepthf.xml", "glClearDepthf")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.clearDepth")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.clear()")}}
- - {{domxref("WebGLRenderingContext.clearColor()")}}
- - {{domxref("WebGLRenderingContext.clearStencil()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/cleardepth/index.md b/files/ja/web/api/webglrenderingcontext/cleardepth/index.md
new file mode 100644
index 00000000000000..89e9075ad4ee88
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/cleardepth/index.md
@@ -0,0 +1,53 @@
+---
+title: WebGLRenderingContext.clearDepth()
+slug: Web/API/WebGLRenderingContext/clearDepth
+translation_of: Web/API/WebGLRenderingContext/clearDepth
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.clearDepth()`** メソッドは、深度バッファーを消去する値を指定します。
+
+この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用される深度の数値です。値は 0 から 1 に丸められます。
+
+## 構文
+
+ void gl.clearDepth(depth);
+
+### 引数
+
+- `depth`
+ - : 深度の値を指定する {{domxref("GLclampf")}} で、深度バッファーを消去するときに使われる値です。既定値は 1 です。
+
+### 返り値
+
+ありません。
+
+## 例
+
+```js
+gl.clearDepth(0.5);
+```
+
+現在の深度を消去する値を取得するには、`DEPTH_CLEAR_VALUE` 定数で問い合わせます。
+
+```js
+gl.getParameter(gl.DEPTH_CLEAR_VALUE);
+// 0.5
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.3", "clearDepth")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glClearDepthf.xml", "glClearDepthf")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.clearDepth")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.clear()")}}
+- {{domxref("WebGLRenderingContext.clearColor()")}}
+- {{domxref("WebGLRenderingContext.clearStencil()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/clearstencil/index.html b/files/ja/web/api/webglrenderingcontext/clearstencil/index.html
deleted file mode 100644
index bebc831b10d21e..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/clearstencil/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: WebGLRenderingContext.clearStencil()
-slug: Web/API/WebGLRenderingContext/clearStencil
-translation_of: Web/API/WebGLRenderingContext/clearStencil
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.clearStencil() メソッドは、ステンシルバッファーを消去する値を指定します。
-
-この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用されるステンシルの値です。
-
-構文
-
-void gl.clearStencil(s);
-
-
-引数
-
-
- s- インデックスを指定する {{domxref("GLint")}} で、ステンシルバッファーの消去に使用される値です。既定値は 0 です。
-
-
-返り値
-
-ありません。
-
-例
-
-gl.clearStencil(1);
-
-
-現在のステンシルを消去する値を取得するには、STENCIL_CLEAR_VALUE 定数で問い合わせます。
-
-gl.getParameter(gl.STENCIL_CLEAR_VALUE);
-// 1
-
-仕様策定状況
-
-
-
-
- | 仕様策定状況 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.3", "clearStencil")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glClearStencil.xml", "glClearStencil")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.clearStencil")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.clear()")}}
- - {{domxref("WebGLRenderingContext.clearColor()")}}
- - {{domxref("WebGLRenderingContext.clearDepth()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/clearstencil/index.md b/files/ja/web/api/webglrenderingcontext/clearstencil/index.md
new file mode 100644
index 00000000000000..4a989520ffae86
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/clearstencil/index.md
@@ -0,0 +1,53 @@
+---
+title: WebGLRenderingContext.clearStencil()
+slug: Web/API/WebGLRenderingContext/clearStencil
+translation_of: Web/API/WebGLRenderingContext/clearStencil
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.clearStencil()`** メソッドは、ステンシルバッファーを消去する値を指定します。
+
+この指定は、{{domxref("WebGLRenderingContext.clear", "clear()")}} メソッドを呼ぶときに使用されるステンシルの値です。
+
+## 構文
+
+ void gl.clearStencil(s);
+
+### 引数
+
+- `s`
+ - : インデックスを指定する {{domxref("GLint")}} で、ステンシルバッファーの消去に使用される値です。既定値は 0 です。
+
+### 返り値
+
+ありません。
+
+## 例
+
+```js
+gl.clearStencil(1);
+```
+
+現在のステンシルを消去する値を取得するには、`STENCIL_CLEAR_VALUE` 定数で問い合わせます。
+
+```js
+gl.getParameter(gl.STENCIL_CLEAR_VALUE);
+// 1
+```
+
+## 仕様策定状況
+
+| 仕様策定状況 | 策定状況 | コメント |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.3", "clearStencil")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glClearStencil.xml", "glClearStencil")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.clearStencil")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.clear()")}}
+- {{domxref("WebGLRenderingContext.clearColor()")}}
+- {{domxref("WebGLRenderingContext.clearDepth()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/compileshader/index.html b/files/ja/web/api/webglrenderingcontext/compileshader/index.html
deleted file mode 100644
index b021fb7cfe7d6b..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/compileshader/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: WebGLRenderingContext.compileShader()
-slug: Web/API/WebGLRenderingContext/compileShader
-translation_of: Web/API/WebGLRenderingContext/compileShader
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.compileShader() メソッドは、GLSL シェーダーをバイナリへコンパイルします。これは {{domxref("WebGLProgram")}} に使用することができます。
-
-構文
-
-void gl.compileShader(shader);
-
-
-引数
-
-
- shader- フラグメントか頂点の {{domxref("WebGLShader")}}。
-
-
-例
-
-var shader = gl.createShader(gl.VERTEX_SHADER);
-gl.shaderSource(shader, shaderSource);
-gl.compileShader(shader);
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.9", "compileShader")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL マニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.compileShader")}}
-
-関連項目
-
-
- - {{domxref("WebGLProgram")}}
- - {{domxref("WebGLShader")}}
- - {{domxref("WebGLRenderingContext.attachShader()")}}
- - {{domxref("WebGLRenderingContext.createProgram()")}}
- - {{domxref("WebGLRenderingContext.createShader()")}}
- - {{domxref("WebGLRenderingContext.deleteProgram()")}}
- - {{domxref("WebGLRenderingContext.deleteShader()")}}
- - {{domxref("WebGLRenderingContext.detachShader()")}}
- - {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
- - {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- - {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
- - {{domxref("WebGLRenderingContext.getShaderParameter()")}}
- - {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
- - {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
- - {{domxref("WebGLRenderingContext.getShaderSource()")}}
- - {{domxref("WebGLRenderingContext.isProgram()")}}
- - {{domxref("WebGLRenderingContext.isShader()")}}
- - {{domxref("WebGLRenderingContext.linkProgram()")}}
- - {{domxref("WebGLRenderingContext.shaderSource()")}}
- - {{domxref("WebGLRenderingContext.useProgram()")}}
- - {{domxref("WebGLRenderingContext.validateProgram()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/compileshader/index.md b/files/ja/web/api/webglrenderingcontext/compileshader/index.md
new file mode 100644
index 00000000000000..eefc5d6de908a6
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/compileshader/index.md
@@ -0,0 +1,60 @@
+---
+title: WebGLRenderingContext.compileShader()
+slug: Web/API/WebGLRenderingContext/compileShader
+translation_of: Web/API/WebGLRenderingContext/compileShader
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **WebGLRenderingContext.compileShader()** メソッドは、GLSL シェーダーをバイナリへコンパイルします。これは {{domxref("WebGLProgram")}} に使用することができます。
+
+## 構文
+
+ void gl.compileShader(shader);
+
+### 引数
+
+- `shader`
+ - : フラグメントか頂点の {{domxref("WebGLShader")}}。
+
+## 例
+
+```js
+var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, shaderSource);
+gl.compileShader(shader);
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "compileShader")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL マニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.compileShader")}}
+
+## 関連項目
+
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/createbuffer/index.html b/files/ja/web/api/webglrenderingcontext/createbuffer/index.html
deleted file mode 100644
index a3189e7899e24a..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/createbuffer/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: WebGLRenderingContext.createBuffer()
-slug: Web/API/WebGLRenderingContext/createBuffer
-translation_of: Web/API/WebGLRenderingContext/createBuffer
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.createBuffer() メソッドは、頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} を作成、初期化します。
-
-構文
-
-WebGLBuffer gl.createBuffer();
-
-
-引数
-
-ありません。
-
-返り値
-
-頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} です。
-
-例
-
-バッファーの作成
-
-var canvas = document.getElementById('canvas');
-var gl = canvas.getContext('webgl');
-var buffer = gl.createBuffer();
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.5", "createBuffer")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API (と同様な) マニュアルページ |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.createBuffer")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.bindBuffer()")}}
- - {{domxref("WebGLRenderingContext.deleteBuffer()")}}
- - {{domxref("WebGLRenderingContext.isBuffer()")}}
- - 他のバッファー : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/createbuffer/index.md b/files/ja/web/api/webglrenderingcontext/createbuffer/index.md
new file mode 100644
index 00000000000000..9c6f7b31249037
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/createbuffer/index.md
@@ -0,0 +1,48 @@
+---
+title: WebGLRenderingContext.createBuffer()
+slug: Web/API/WebGLRenderingContext/createBuffer
+translation_of: Web/API/WebGLRenderingContext/createBuffer
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.createBuffer()`** メソッドは、頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} を作成、初期化します。
+
+## 構文
+
+ WebGLBuffer gl.createBuffer();
+
+### 引数
+
+ありません。
+
+### 返り値
+
+頂点や色といったデータを格納する {{domxref("WebGLBuffer")}} です。
+
+## 例
+
+### バッファーの作成
+
+```js
+var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+var buffer = gl.createBuffer();
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------- |
+| {{SpecName('WebGL', "#5.14.5", "createBuffer")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API (と同様な) マニュアルページ |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.createBuffer")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.bindBuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
+- 他のバッファー : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/ja/web/api/webglrenderingcontext/createprogram/index.html b/files/ja/web/api/webglrenderingcontext/createprogram/index.html
deleted file mode 100644
index e9acf3fc05b9b5..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/createprogram/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: WebGLRenderingContext.createProgram()
-slug: Web/API/WebGLRenderingContext/createProgram
-translation_of: Web/API/WebGLRenderingContext/createProgram
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.createProgram() メソッドは、{{domxref("WebGLProgram")}} オブジェクトを作成、初期化します。
-
-構文
-
-WebGLProgram gl.createProgram();
-
-
-引数
-
-ありません。
-
-返り値
-
-{{domxref("WebGLProgram")}} オブジェクトは、2 つのコンパイルされた {{domxref("WebGLShader")}} の組み合わせで、頂点シェーダーとフラグメントシェーダー (どちらも GLSL で書かれる) で成り立ちます。そして、これらを使用可能なプログラムへとリンクします。
-
-例
-
-WebGL プログラムの作成
-
-var program = gl.createProgram();
-
-// Attach pre-existing shaders
-gl.attachShader(program, vertexShader);
-gl.attachShader(program, fragmentShader);
-
-gl.linkProgram(program);
-
-if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
- var info = gl.getProgramInfoLog(program);
- throw 'Could not compile WebGL program. \n\n' + info;
-}
-
-
-{{domxref("WebGLShader")}} を参照すると、上記サンプルの vertexShader と fragmentShader の作成についての情報が得られます。
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.9", "createProgram")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}} |
- {{Spec2('OpenGL ES 2.0')}} |
-
- OpenGL API (と同様の) マニュアルページ。
- |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.createProgram")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.deleteProgram()")}}
- - {{domxref("WebGLRenderingContext.isProgram()")}}
- - {{domxref("WebGLRenderingContext.linkProgram()")}}
- - {{domxref("WebGLRenderingContext.useProgram()")}}
- - {{domxref("WebGLRenderingContext.validateProgram()")}}
- - {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- - {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/createprogram/index.md b/files/ja/web/api/webglrenderingcontext/createprogram/index.md
new file mode 100644
index 00000000000000..937e0753763a57
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/createprogram/index.md
@@ -0,0 +1,62 @@
+---
+title: WebGLRenderingContext.createProgram()
+slug: Web/API/WebGLRenderingContext/createProgram
+translation_of: Web/API/WebGLRenderingContext/createProgram
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.createProgram()`** メソッドは、{{domxref("WebGLProgram")}} オブジェクトを作成、初期化します。
+
+## 構文
+
+ WebGLProgram gl.createProgram();
+
+### 引数
+
+ありません。
+
+### 返り値
+
+{{domxref("WebGLProgram")}} オブジェクトは、2 つのコンパイルされた {{domxref("WebGLShader")}} の組み合わせで、頂点シェーダーとフラグメントシェーダー (どちらも GLSL で書かれる) で成り立ちます。そして、これらを使用可能なプログラムへとリンクします。
+
+## 例
+
+### WebGL プログラムの作成
+
+```js
+var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+ var info = gl.getProgramInfoLog(program);
+ throw 'Could not compile WebGL program. \n\n' + info;
+}
+```
+
+{{domxref("WebGLShader")}} を参照すると、上記サンプルの `vertexShader` と `fragmentShader` の作成についての情報が得られます。
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "createProgram")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API (と同様の) マニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.createProgram")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/createshader/index.html b/files/ja/web/api/webglrenderingcontext/createshader/index.html
deleted file mode 100644
index 0ef5841ffad365..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/createshader/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: WebGLRenderingContext.createShader()
-slug: Web/API/WebGLRenderingContext/createShader
-translation_of: Web/API/WebGLRenderingContext/createShader
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.createShader() メソッドは、{{domxref("WebGLShader")}} を作成します。それからさらに、 {{domxref("WebGLRenderingContext.shaderSource()")}} と {{domxref("WebGLRenderingContext.compileShader()")}} を用いて設定できます。
-
-構文
-
-WebGLShader gl.createShader(type);
-
-
-引数
-
-
- typegl.VERTEX_SHADER と gl.FRAGMENT_SHADER のどちらか
-
-例
-
-用例については {{domxref("WebGLShader")}} を参照してください。
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.9", "createShader")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL マニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.createShader")}}
-
-関連項目
-
-
- - {{domxref("WebGLProgram")}}
- - {{domxref("WebGLShader")}}
- - {{domxref("WebGLRenderingContext.attachShader()")}}
- - {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
- - {{domxref("WebGLRenderingContext.compileShader()")}}
- - {{domxref("WebGLRenderingContext.createProgram()")}}
- - {{domxref("WebGLRenderingContext.createShader()")}}
- - {{domxref("WebGLRenderingContext.deleteProgram()")}}
- - {{domxref("WebGLRenderingContext.deleteShader()")}}
- - {{domxref("WebGLRenderingContext.detachShader()")}}
- - {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
- - {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- - {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
- - {{domxref("WebGLRenderingContext.getShaderParameter()")}}
- - {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
- - {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
- - {{domxref("WebGLRenderingContext.getShaderSource()")}}
- - {{domxref("WebGLRenderingContext.isProgram()")}}
- - {{domxref("WebGLRenderingContext.isShader()")}}
- - {{domxref("WebGLRenderingContext.linkProgram()")}}
- - {{domxref("WebGLRenderingContext.shaderSource()")}}
- - {{domxref("WebGLRenderingContext.useProgram()")}}
- - {{domxref("WebGLRenderingContext.validateProgram()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/createshader/index.md b/files/ja/web/api/webglrenderingcontext/createshader/index.md
new file mode 100644
index 00000000000000..bee24144230633
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/createshader/index.md
@@ -0,0 +1,58 @@
+---
+title: WebGLRenderingContext.createShader()
+slug: Web/API/WebGLRenderingContext/createShader
+translation_of: Web/API/WebGLRenderingContext/createShader
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **WebGLRenderingContext.createShader()** メソッドは、{{domxref("WebGLShader")}} を作成します。それからさらに、 {{domxref("WebGLRenderingContext.shaderSource()")}} と {{domxref("WebGLRenderingContext.compileShader()")}} を用いて設定できます。
+
+## 構文
+
+ WebGLShader gl.createShader(type);
+
+### 引数
+
+- `type`
+ - : `gl.VERTEX_SHADER` と `gl.FRAGMENT_SHADER` のどちらか
+
+## 例
+
+用例については {{domxref("WebGLShader")}} を参照してください。
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "createShader")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL マニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.createShader")}}
+
+## 関連項目
+
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/drawarrays/index.html b/files/ja/web/api/webglrenderingcontext/drawarrays/index.html
deleted file mode 100644
index 2774b809917d11..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/drawarrays/index.html
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: WebGLRenderingContext.drawArrays()
-slug: Web/API/WebGLRenderingContext/drawArrays
-translation_of: Web/API/WebGLRenderingContext/drawArrays
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.drawArrays() メソッドは、配列データからプリミティブを描画します。
-
-構文
-
-void gl.drawArrays(mode, first, count);
-
-
-引数
-
-
- mode- 描画するプリミティブの種類を指定する {{domxref("GLenum")}}。以下の値を取ることができます。
-
- gl.POINTS: 単一の点を描画します。gl.LINE_STRIP: 次の線へと直線を描画します。gl.LINE_LOOP: 次の線へと直線を描画し、最後の頂点は最初のものに接続します。gl.LINES: 頂点 2 つごとに、その間に線を描画します。gl.TRIANGLE_STRIPgl.TRIANGLE_FANgl.TRIANGLES: 頂点 3 つの集まりごとに、三角形を描画します。
-
- - first
- - 頂点ベクトルの配列の開始インデックスを指定する {{domxref("GLint")}}。
- - count
- - 描画されるインデックスの数を指定する {{domxref("GLsizei")}}。
-
-
-返り値
-
-ありません。
-
-例外
-
-
- mode が許容された値のどれでもない場合、gl.INVALID_ENUM エラーがスローされます。first や count が負数の場合、gl.INVALID_VALUE エラーがスローされます。gl.CURRENT_PROGRAM が {{jsxref("null")}} の場合、gl.INVALID_OPERATION エラーがスローされます。
-
-例
-
-gl.drawArrays(gl.POINTS, 0, 8);
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.11", "drawArrays")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.drawArrays")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.drawElements()")}}
- - {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}
- - {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}
- - {{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}
- - {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}
- - {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}
- - {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/drawarrays/index.md b/files/ja/web/api/webglrenderingcontext/drawarrays/index.md
new file mode 100644
index 00000000000000..7ec4b7a9ca0a87
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/drawarrays/index.md
@@ -0,0 +1,64 @@
+---
+title: WebGLRenderingContext.drawArrays()
+slug: Web/API/WebGLRenderingContext/drawArrays
+translation_of: Web/API/WebGLRenderingContext/drawArrays
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.drawArrays()`** メソッドは、配列データからプリミティブを描画します。
+
+## 構文
+
+ void gl.drawArrays(mode, first, count);
+
+### 引数
+
+- `mode`
+ - : 描画するプリミティブの種類を指定する {{domxref("GLenum")}}。以下の値を取ることができます。\* `gl.POINTS`: 単一の点を描画します。
+ - `gl.LINE_STRIP`: 次の線へと直線を描画します。
+ - `gl.LINE_LOOP`: 次の線へと直線を描画し、最後の頂点は最初のものに接続します。
+ - `gl.LINES`: 頂点 2 つごとに、その間に線を描画します。
+ - [`gl.TRIANGLE_STRIP`](https://en.wikipedia.org/wiki/Triangle_strip)
+ - [`gl.TRIANGLE_FAN`](https://en.wikipedia.org/wiki/Triangle_fan)
+ - `gl.TRIANGLES`: 頂点 3 つの集まりごとに、三角形を描画します。
+- first
+ - : 頂点ベクトルの配列の開始インデックスを指定する {{domxref("GLint")}}。
+- count
+ - : 描画されるインデックスの数を指定する {{domxref("GLsizei")}}。
+
+### 返り値
+
+ありません。
+
+### 例外
+
+- `mode` が許容された値のどれでもない場合、`gl.INVALID_ENUM` エラーがスローされます。
+- `first` や `count` が負数の場合、`gl.INVALID_VALUE` エラーがスローされます。
+- `gl.CURRENT_PROGRAM` が {{jsxref("null")}} の場合、`gl.INVALID_OPERATION` エラーがスローされます。
+
+## 例
+
+```js
+gl.drawArrays(gl.POINTS, 0, 8);
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.11", "drawArrays")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.drawArrays")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.drawElements()")}}
+- {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}
+- {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}
+- {{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}
+- {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}
+- {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}
+- {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html b/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html
deleted file mode 100644
index f5222d4d4fb29a..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/getattriblocation/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: WebGLRenderingContext.getAttribLocation()
-slug: Web/API/WebGLRenderingContext/getAttribLocation
-translation_of: Web/API/WebGLRenderingContext/getAttribLocation
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.getAttribLocation()メソッドは指定された{{domxref("WebGLProgram")}}内の属性の場所を返します。
-
-構文
-
-GLint gl.getAttribLocation(program, name);
-
-
-引数
-
-
- - program
- - 属性の変数を含む{{domxref("WebGLProgram")}}
- - name
- - 場所を取得する属性の変数名を指定する{{domxref("DOMString")}}
-
-
-返り値
-
-見つかった場合、変数名の場所を示す{{domxref("GLint")}}番号を、それ以外の場合は-1を返します。
-
-例
-
-gl.getAttribLocation(program, 'vColor');
-
-
-仕様策定状況
-
-
-
-
- | Specification |
- Status |
- Comment |
-
-
- | {{SpecName('WebGL', "#5.14.10", "getAttribLocation")}} |
- {{Spec2('WebGL')}} |
- 初回定義 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.getAttribLocation")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.getUniformLocation()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/getattriblocation/index.md b/files/ja/web/api/webglrenderingcontext/getattriblocation/index.md
new file mode 100644
index 00000000000000..308e4c7ad7b84d
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/getattriblocation/index.md
@@ -0,0 +1,44 @@
+---
+title: WebGLRenderingContext.getAttribLocation()
+slug: Web/API/WebGLRenderingContext/getAttribLocation
+translation_of: Web/API/WebGLRenderingContext/getAttribLocation
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.getAttribLocation()`**メソッドは指定された{{domxref("WebGLProgram")}}内の属性の場所を返します。
+
+## 構文
+
+ GLint gl.getAttribLocation(program, name);
+
+### 引数
+
+- program
+ - : 属性の変数を含む{{domxref("WebGLProgram")}}
+- name
+ - : 場所を取得する属性の変数名を指定する{{domxref("DOMString")}}
+
+### 返り値
+
+見つかった場合、変数名の場所を示す{{domxref("GLint")}}番号を、それ以外の場合は-1 を返します。
+
+## 例
+
+```js
+gl.getAttribLocation(program, 'vColor');
+```
+
+## 仕様策定状況
+
+| Specification | Status | Comment |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------- |
+| {{SpecName('WebGL', "#5.14.10", "getAttribLocation")}} | {{Spec2('WebGL')}} | 初回定義 |
+| {{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.getAttribLocation")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.getUniformLocation()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/linkprogram/index.html b/files/ja/web/api/webglrenderingcontext/linkprogram/index.html
deleted file mode 100644
index 55c3063d6ed13e..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/linkprogram/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: WebGLRenderingContext.linkProgram()
-slug: Web/API/WebGLRenderingContext/linkProgram
-translation_of: Web/API/WebGLRenderingContext/linkProgram
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.linkProgram() メソッドは、与えられた {{domxref("WebGLProgram")}} に接続された頂点とフラグメントのシェーダーをリンクします。
-
-構文
-
-void gl.linkProgram(program);
-
-
-引数
-
-
- - program
- - リンクする {{domxref("WebGLProgram")}}。
-
-
-返り値
-
-ありません。
-
-例
-
-var program = gl.createProgram();
-
-// Attach pre-existing shaders
-gl.attachShader(program, vertexShader);
-gl.attachShader(program, fragmentShader);
-
-gl.linkProgram(program);
-
-if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
- var info = gl.getProgramInfoLog(program);
- throw new Error('Could not compile WebGL program. \n\n' + info);
-}
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.9", "linkProgram")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glLinkProgram.xml", "glLinkProgram")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.linkProgram")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.createProgram()")}}
- - {{domxref("WebGLRenderingContext.deleteProgram()")}}
- - {{domxref("WebGLRenderingContext.isProgram()")}}
- - {{domxref("WebGLRenderingContext.useProgram()")}}
- - {{domxref("WebGLRenderingContext.validateProgram()")}}
- - {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- - {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/linkprogram/index.md b/files/ja/web/api/webglrenderingcontext/linkprogram/index.md
new file mode 100644
index 00000000000000..6ac2c096a8457c
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/linkprogram/index.md
@@ -0,0 +1,59 @@
+---
+title: WebGLRenderingContext.linkProgram()
+slug: Web/API/WebGLRenderingContext/linkProgram
+translation_of: Web/API/WebGLRenderingContext/linkProgram
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.linkProgram()`** メソッドは、与えられた {{domxref("WebGLProgram")}} に接続された頂点とフラグメントのシェーダーをリンクします。
+
+## 構文
+
+ void gl.linkProgram(program);
+
+### 引数
+
+- program
+ - : リンクする {{domxref("WebGLProgram")}}。
+
+### 返り値
+
+ありません。
+
+## 例
+
+```js
+var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+ var info = gl.getProgramInfoLog(program);
+ throw new Error('Could not compile WebGL program. \n\n' + info);
+}
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "linkProgram")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glLinkProgram.xml", "glLinkProgram")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.linkProgram")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/shadersource/index.html b/files/ja/web/api/webglrenderingcontext/shadersource/index.html
deleted file mode 100644
index 1d29e4b0afdd84..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/shadersource/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: WebGLRenderingContext.shaderSource()
-slug: Web/API/WebGLRenderingContext/shaderSource
-translation_of: Web/API/WebGLRenderingContext/shaderSource
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.shaderSource() メソッドは、{{domxref("WebGLShader")}} のソースコードを設定します。
-
-構文
-
-void gl.shaderSource(shader, source);
-
-
-引数
-
-
- - shader
- - ソースコードを設定する {{domxref("WebGLShader")}} オブジェクト。
- - source
- - 設定する GLSL ソースコードを含む {{domxref("DOMString")}}。
-
-
-返り値
-
-ありません。
-
-例
-
-var shader = gl.createShader(gl.VERTEX_SHADER);
-gl.shaderSource(shader, originalSource);
-
-var source = gl.getShaderSource(shader);
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.9", "shaderSource")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API (と同様の) マニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.shaderSource")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.createShader()")}}
- - {{domxref("WebGLRenderingContext.isShader()")}}
- - {{domxref("WebGLRenderingContext.deleteShader()")}}
- - {{domxref("WebGLRenderingContext.getShaderSource()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/shadersource/index.md b/files/ja/web/api/webglrenderingcontext/shadersource/index.md
new file mode 100644
index 00000000000000..b082b41eae6332
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/shadersource/index.md
@@ -0,0 +1,50 @@
+---
+title: WebGLRenderingContext.shaderSource()
+slug: Web/API/WebGLRenderingContext/shaderSource
+translation_of: Web/API/WebGLRenderingContext/shaderSource
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.shaderSource()`** メソッドは、{{domxref("WebGLShader")}} のソースコードを設定します。
+
+## 構文
+
+ void gl.shaderSource(shader, source);
+
+### 引数
+
+- shader
+ - : ソースコードを設定する {{domxref("WebGLShader")}} オブジェクト。
+- source
+ - : 設定する GLSL ソースコードを含む {{domxref("DOMString")}}。
+
+### 返り値
+
+ありません。
+
+## 例
+
+```js
+var shader = gl.createShader(gl.VERTEX_SHADER);
+gl.shaderSource(shader, originalSource);
+
+var source = gl.getShaderSource(shader);
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "shaderSource")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API (と同様の) マニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.shaderSource")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
diff --git a/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html b/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html
deleted file mode 100644
index 32e6656cdbdc95..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: 'WebGLRenderingContext.uniformMatrix[234]fv()'
-slug: Web/API/WebGLRenderingContext/uniformMatrix
-translation_of: Web/API/WebGLRenderingContext/uniformMatrix
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.uniformMatrix[234]fv() メソッドは、行列の値をユニフォームの値に指定します。
-
-このメソッドの 3 つのバージョン (uniformMatrix2fv(), uniformMatrix3fv(), と uniformMatrix4fv()) は、入力値として 2 要素, 3 要素, 4 要素のベクトルをそれぞれ取ります。
-
-構文
-
-WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
-WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
-WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);
-
-
-引数
-
-
- location- 変更するユニフォーム属性の位置を含むオブジェクト {{domxref("WebGLUniformLocation")}}。この位置は {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}} を用いて入手されます。
- transpose- 行列を転置するかどうか指定する {{domxref("GLboolean")}}。
false でなければならない。
- value-
-
{{jsxref("Float32Array")}} か GLfloat 値の並び。
-
-
-
-返り値
-
-undefined
-
-例
-
-gl.uniformMatrix2fv(loc, false, [2,1, 2,2]);
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.10", "uniformMatrix")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.uniform()")}}
- - {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – これらのメソッドの WebGL 2 版。
-
diff --git a/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.md b/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.md
new file mode 100644
index 00000000000000..e2f61b11e04b5b
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/uniformmatrix/index.md
@@ -0,0 +1,51 @@
+---
+title: WebGLRenderingContext.uniformMatrix[234]fv()
+slug: Web/API/WebGLRenderingContext/uniformMatrix
+translation_of: Web/API/WebGLRenderingContext/uniformMatrix
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.uniformMatrix[234]fv()`** メソッドは、行列の値をユニフォームの値に指定します。
+
+このメソッドの 3 つのバージョン (`uniformMatrix2fv()`, `uniformMatrix3fv()`, と `uniformMatrix4fv()`) は、入力値として 2 要素, 3 要素, 4 要素のベクトルをそれぞれ取ります。
+
+## 構文
+
+ WebGLRenderingContext.uniformMatrix2fv(location, transpose, value);
+ WebGLRenderingContext.uniformMatrix3fv(location, transpose, value);
+ WebGLRenderingContext.uniformMatrix4fv(location, transpose, value);
+
+### 引数
+
+- `location`
+ - : 変更するユニフォーム属性の位置を含むオブジェクト {{domxref("WebGLUniformLocation")}}。この位置は {{domxref("WebGLRenderingContext.getUniformLocation", "getUniformLocation()")}} を用いて入手されます。
+- `transpose`
+ - : 行列を転置するかどうか指定する {{domxref("GLboolean")}}。`false` でなければならない。
+- `value`
+ - : {{jsxref("Float32Array")}} か `GLfloat` 値の並び。
+
+### 返り値
+
+`undefined`
+
+## 例
+
+```js
+gl.uniformMatrix2fv(loc, false, [2,1, 2,2]);
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.10", "uniformMatrix")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.uniform()")}}
+- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – これらのメソッドの WebGL 2 版。
diff --git a/files/ja/web/api/webglrenderingcontext/useprogram/index.html b/files/ja/web/api/webglrenderingcontext/useprogram/index.html
deleted file mode 100644
index ac94d1b254928b..00000000000000
--- a/files/ja/web/api/webglrenderingcontext/useprogram/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: WebGLRenderingContext.useProgram()
-slug: Web/API/WebGLRenderingContext/useProgram
-translation_of: Web/API/WebGLRenderingContext/useProgram
----
-{{APIRef("WebGL")}}
-
-WebGL API の WebGLRenderingContext.useProgram() メソッドは、指定した {{domxref("WebGLProgram")}} を現在の描画ステートの一部として設定します。
-
-構文
-
-void gl.useProgram(program);
-
-
-引数
-
-
- - program
- - 使用する {{domxref("WebGLProgram")}}。
-
-
-返り値
-
-ありません。
-
-例
-
-var program = gl.createProgram();
-
-// Attach pre-existing shaders
-gl.attachShader(program, vertexShader);
-gl.attachShader(program, fragmentShader);
-
-gl.linkProgram(program);
-gl.useProgram(program);
-
-
-仕様策定状況
-
-
-
-
- | 仕様 |
- 策定状況 |
- コメント |
-
-
- | {{SpecName('WebGL', "#5.14.9", "useProgram")}} |
- {{Spec2('WebGL')}} |
- 初回定義。 |
-
-
- | {{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}} |
- {{Spec2('OpenGL ES 2.0')}} |
- OpenGL API のマニュアルページ。 |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.WebGLRenderingContext.useProgram")}}
-
-関連項目
-
-
- - {{domxref("WebGLRenderingContext.createProgram()")}}
- - {{domxref("WebGLRenderingContext.deleteProgram()")}}
- - {{domxref("WebGLRenderingContext.isProgram()")}}
- - {{domxref("WebGLRenderingContext.linkProgram()")}}
- - {{domxref("WebGLRenderingContext.validateProgram()")}}
- - {{domxref("WebGLRenderingContext.getProgramParameter()")}}
- - {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
-
diff --git a/files/ja/web/api/webglrenderingcontext/useprogram/index.md b/files/ja/web/api/webglrenderingcontext/useprogram/index.md
new file mode 100644
index 00000000000000..daaec612c9539f
--- /dev/null
+++ b/files/ja/web/api/webglrenderingcontext/useprogram/index.md
@@ -0,0 +1,55 @@
+---
+title: WebGLRenderingContext.useProgram()
+slug: Web/API/WebGLRenderingContext/useProgram
+translation_of: Web/API/WebGLRenderingContext/useProgram
+---
+{{APIRef("WebGL")}}
+
+[WebGL API](/ja/docs/Web/API/WebGL_API) の **`WebGLRenderingContext.useProgram()`** メソッドは、指定した {{domxref("WebGLProgram")}} を現在の描画ステートの一部として設定します。
+
+## 構文
+
+ void gl.useProgram(program);
+
+### 引数
+
+- program
+ - : 使用する {{domxref("WebGLProgram")}}。
+
+### 返り値
+
+ありません。
+
+## 例
+
+```js
+var program = gl.createProgram();
+
+// Attach pre-existing shaders
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+gl.useProgram(program);
+```
+
+## 仕様策定状況
+
+| 仕様 | 策定状況 | コメント |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "useProgram")}} | {{Spec2('WebGL')}} | 初回定義。 |
+| {{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}} | {{Spec2('OpenGL ES 2.0')}} | OpenGL API のマニュアルページ。 |
+
+## ブラウザーの対応
+
+{{Compat("api.WebGLRenderingContext.useProgram")}}
+
+## 関連項目
+
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
diff --git a/files/ja/web/api/webvr_api/concepts/index.html b/files/ja/web/api/webvr_api/concepts/index.html
deleted file mode 100644
index 9837f3a1bd95d1..00000000000000
--- a/files/ja/web/api/webvr_api/concepts/index.html
+++ /dev/null
@@ -1,201 +0,0 @@
----
-title: WebVR concepts
-slug: Web/API/WebVR_API/Concepts
-translation_of: Web/API/WebVR_API/Concepts
----
-{{APIRef("WebVR API")}}
-
-この文書は，バーチャルリアリティ(VR)の背景にある概念と理論について述べています．もしあなたがこの分野の初学者なら，コードを書き始める前に，これらのトピックを理解すると役に立つでしょう．
-
-VRの歴史
-
-VRは全く新しいというわけではありません —その概念は2012年の Oculus Rift Kickstartar キャンペーンよりずっと前にさかのぼります．人々は数十年の間その実験を続けてきました．
-
-1939年 View-Master device が作られ，3Dピクチャを見ることができるようになりました．そのデバイスは，ステレオ立体視の小さなカラー写真のペアを持つ厚紙のディスクに記録された画像を表示していました．数年の開発ののち，軍はそのテクノロジーの使用に興味を，持ち，そしてHeadsightプロジェクトが1961年に生まれました — これはビデオスクリーンとヘッドトラッキングシステムを合体させたヘルメットに影響を与えました．
-
-
-
-その後の数十年，さまざまな実験がなされましたが，もはや科学ラボや戦場に限定されませんでした．最終的に，映画監督がバーチャルリアリティのビジョンを示すポップカルチャーに引き継がれました．Tron (1982) やThe Matrix (1999) のような映画が制作され，そこではまったく新しいサイバー世界へ転送されたり，サイバー世界と知ることなくとらわれてそれを現実世界として受け入れる世界が描かれました．
-
-
-
-最初のVRゲームの試みは大きく高価なものでした — 1991年， Virtuality Group はゴーグルを持つVRレディなアーケードマシンを作成し，パックマンのような人気のタイトルをVRへ移植しました．セガはVRグラスを1993年のCES(Consumer Electronics Show )で発表しました．企業は実験をしていましたが，市場や消費者を納得させられませんでした — 実際に成功したVRプロジェクトの事例を見るには2012年まで待つ必要がありました．
-
-最近のVR
-
-では何が新しいのでしょう？ 十分なユーザ体験を提供するには，VRハードウェアは高精度，低レイテンシでデータを届ける必要があります; VRアプリケーションを動かすコンピュータはこれらすべての情報を扱うため，十分強力でなければなりません．そのような精度とパワーがあったとしても，手頃な価格で利用できるようになったのは最近のことです．早期のVRプロトタイプは何万ドルもコストがかかりましたが，HTC VIVEやOculus Rift、Playstation VR のような近年のHMDは数百ドルで利用でき，さらに Gear VR や Google Cardboard のようなモバイルベースのソリューションみたいに，もっと安価なソリューションもあります．
-
-ソフトウェアの面では、Valveは、VIVEや他のソリューションで互換性のある SteamVR を作成し、利用しやすいVR UIのようなソフトウェアへのアクセスを提供しています。
-
-テクノロジー自体はすでにあるので，将来的には，より高価なヘッドセットが時間をかけて安価になっていき，多くの人々がVR体験できるようになります．
-
-入力デバイス
-
-VRアプリケーションの入力を扱うことは興味深いトピックです — それは専用のユーザインターフェイスがデザインされなければならないのでまったく新しい体験となります．現時点でも古典的なキーボードとマウスから，Leap MotionやVIVEコントローラのような新しいものまで様々なアプローチがあります．これは特定の状況でどのように動作するかそしてあなたのゲームタイプにはどのような入力が最適なのかを確認する試行錯誤の事柄です．
-
-
-
-VR ハードウェアのセットアップ
-
-主に，モバイルタイプとコンピュータ接続タイプの2種類のセットアップがあります．最小のハードウェアセットアップは次のようなものです:
-
-
- - モバイル: Google CardboardのようにVRマウントにスマートフォン — スマートフォンはVRディスプレイとして機能する — をマウントして作られるヘッドマウントディスプレイ (HMD) で，モバイルスクリーンをステレオビジョンへ投影するのに必要なレンズが含まれています．
- - コンピュータ接続: コンピュータに接続するVRセットアップです — 右目と左目の両方に表示される映像を映す高解像度の横向きスクリーンを持つHMDで構成されています．HMDは右目と左目のシーン（ステレオビジョン）を分割するためのレンズも備えています．セットアップは分離型の位置センサも含まれています．位置センサは頭の位置/向き/速度/加速度を取得して，コンピュータへ絶えずその情報を渡します．
-
-
-
-
Note: コンピュータ接続システムは位置センサーを含んでいない場合もありますが，通常は含まれています．
-
その他のVR体験を補うハードウェア:
-
-
- - 手認識センサ: 手の位置と動きをトラッキングするセンサで，あなたの手を興味深いコントローラやVRゲーム世界内のオブジェクトにすることができます．もっとも先進的なものは Leap Motion で，（Oculus Riftと接続した）コンピュータ上で動作し，（実験的な段階ですが）モバイルデバイスと接続して使うことも可能です．
- - ゲームパッド: XBoxコントローラおよびその類似コントローラをブラウザ内でキーボードとして動作するように設定できます．これはVRウェブページとのインタラクションの可能性を広げます．MergeVR headset のようなモバイル環境で使えるゲームパッドも存在しますが，それらはBluetooth接続であるため，WebVRでは動作しません．
- - アイトラッキングセンサ（実験的）: FOVE プロジェクトは，眼球のかすかな動きを読み取る最初のヘッドセットです．
- - 顔の表情追跡（実験的）: 南カリフォルニア大学やFacebookのOculus部門の研究者は，表情をトラッキングして，バーチャルキャラクタの表情へ適用する新しい方法をテストしています．
- - もっと複雑な位置センサシステム: 1つの例といて、HTC VIVEは空間の対角上に配置した2つの位置センサを備えており、マッピングをしているので、最大5m x 5mまでの空間でVR体験を楽しむことができます。
-
-
-位置，向き，速度，加速度
-
-前述のように，位置センサはHMDに関する情報を検出して常にそれを出力しているので，頭の動きや回転などに追従してシーンを連続的に更新することができます．しかしその情報とは正確には何でしょうか？
-
-
-
-出力情報は，4つのカテゴリに分類できます:
-
-
- - 位置 — 3D空間の3つの座標軸に沿ったHMDの位置です．位置センサから見て，x は左右，yは上下，zは前後となります．WebVRでは、x, y, z座標は {{domxref("VRPose.position")}} 内の配列として表現されます．
- - 向き — 3D空間の3つの座標軸周りのHMDの回転です．ピッチはx軸周り，ヨーはy軸周り，ロールはz軸周りの回転を意味します．WebVRでは ピッチ、ヨー、ロールは
- {{domxref("VRPose.orientation")}} 内の配列の最初の3要素で表されます．
- - 速度 — VRで考慮する速度は2種類あります:
-
- - 速度（線速度） — 任意の1つの軸に沿ったHMDの移動速度です．この情報は {{domxref("VRPose.linearVelocity")}} を用いて取得できます．
- - 角速度 — 任意の1つの軸周りのHMDの回転速度です．この情報は {{domxref("VRPose.angularVelocity")}} を用いて取得できます．
-
-
- - 加速度 — VRで考慮する加速度は2種類あります:
-
- - 加速度（線加速度） — 任意の1つの軸に沿ったHMDの移動の加速度です．この情報には {{domxref("VRPose.linearAcceleration")}} を用いてアクセスできます．
- - 角加速度 — 任意の1つの軸周りのHMDの回転加速度です．この情報には {{domxref("VRPose.angularAcceleration")}} を用いてアクセスできます．
-
-
-
-
-視界
-
-視界 (FOV; field of view) は，ユーザの各目で見られる（と期待されている）範囲です．その形状は，おおよそピラミッド型になっていて，（前後の）側面はユーザの頭の内部を頂点として，残りはユーザの目の位置から広がっています（訳注； 原文では eminateと書かれていますが，emanateの誤字と判断しました）． それぞれの目は固有のFOVを持っていて，もう一方にわずかに重なっています．
-
-
-
-FOVは次の値で定義されています:
-
-
- - {{domxref("VRFieldOfView.upDegrees")}}: FOVの上方へ広げる角度値です．
- - {{domxref("VRFieldOfView.rightDegrees")}}: FOVの右側へ広げる角度値です．
- - {{domxref("VRFieldOfView.downDegrees")}}: FOVを下方へ広げる角度値です．
- - {{domxref("VRFieldOfView.leftDegrees")}}: FOVを左側へ広げる角度値です．
- - zNear {{domxref("VRDisplay.depthNear")}}: ユーザの頭の中央からFOVの可視範囲開始まで距離．
- - zFar {{domxref("VRDisplay.depthFar")}}: ユーザの頭の中央からFOVの可視範囲末端までの距離．
-
-
-
-
Note: The user can potentially see all the way around them, which is a brand new concept for apps and games. Try to give people a reason to look around and see what's behind them — make them reach out and find things that are not visible at the very beginning. Describe what's behind their backs.
-
これらのプロパティのデフォルト値は，VRハードウェアによって微妙に異なりますが，上下方向は53°，左右方向は47°，zNearとzFarはそれぞれ0.1mから10000mくらいになっています．
-
-
-
Note: ユーザは潜在的に周囲全体を見渡すことができます．それはまったく新しいアプリやゲームのコンセプトです．人々が見回したり背後にある何かを見たりする理由を与えることにトライしてみましょう — 最初は見えていないものを見つける手助けをしてあげてください．背後になにがあるか説明しましょう．
-
VRアプリのための概念
-
-このセクションでは，通常のモバイルやデスクトップを開発するときにはほとんど考慮する必要がないけれど，VRアプリを開発するときに知っておきたい概念について説明します．
-
-立体視 Stereoscopic vision
-
-立体視は，人間や（おそらく）動物が持つ通常のビジョンで，（両目のそれぞれから見える）僅かに異なる2つの画像を1つの画像として知覚するものです．結果として奥行きを認識でき，見事な3Dの世界を見る手助けをしています．VRアプリでこれを再現するには，ユーザがHMDを使っている時に左右の目のそれぞれに与える，本当にわずかに異なるビューを横に並べた画像をレンダリングする必要があります．
-
-
-
-ヘッドトラッキング Head tracking
-
-360°シーンの臨場感をつくりだす主要なテクノロジは，HMDに搭載されているジャイロスコープや加速度センサ，磁気センサ（コンパス）によって実現されています．
- それによって目が球面上のスクリーンの前にいると信じることができるので，アプリのキャンバス内に現実的な没入感を与えることができます．
-
-眼精疲労 Eye strain
-
-HMDのメジャーな障害としてVRでよく使われる用語です．私たちはアプリキャンバス内で見せ続けることで常に目を欺いていますが，通常よりも眼を酷使することになるため，VRアプリを長時間利用し続けると眼精疲労を招きます．
-
-望ましくない影響を最小化するするために，つぎのようなことが必要です:
-
-
- - 異なる深さへの焦点合わせを避ける（例: たくさんのパーティクルを異なる深度（奥行き）に使うのを避ける）．
- - eye convergion を避ける（例: もしカメラに向かってくる物体があると，目はそれを追って1点に集中してしまいます）
- - できるだけ落ち着いた色の暗い背景を使う; 明るいスクリーンは目の疲れが増えます．
- - 明度の激しい変化を避ける．
- - 大量のテキストを読ませることを避ける．目（カメラ）の位置と読ませたいテキストとの距離にも注意しなければいけません．0.5mは近すぎて不快で，2m以上だと立体効果が感じられないので，その間に配置することをお勧めします．
- - 一般に，物体とカメラと距離には注意してください，Oculusは，フォーカスの最小距離として0.75mを推奨しています．
- - シーン内のオブジェクトとのインタラクションが必要なときは，ポインタを使います．これは少ない労力で正しく物体を指定するのに役立つでしょう．
-
-
-一般に，ビジュアルエフェクトが少ないほど，ユーザに与える疲れは軽減されます．
-
-モーション酔い Motion sickness
-
-開発者が細心の注意を払っていないと，VRアプリはユーザの気分の悪化を実際に引き起こします．これは，目から受け取る刺激と，体が受け取る（と期待するもの）が違う場合に発生します．
-
-ユーザのモーション酔いの発生を避けるために（あるいは最小化するために），次のことが必要です:
-
-
- - 常にヘッドトラッキングを維持する（これは最も重要です，特に体験の最中で発生する場合）．
- - 一定の速度を使う; 加速や減速するようなカメラの動きを避ける（線形の加速度を使い，できるだけeasingを避ける）．
- - 高フレームレートを維持する（30fps以下は不快です）．
- - 急激な，あるいは予期できないカメラの回転を避ける．
- - 固定オブジェクト用の固定点を追加する（そうしなければ，ユーザはそれらが移動していると感じてしまいます）
- - どこに焦点を合わせていいか分からなくなるので，DoF (Depth of Feild; 被写界深度)やモーションブラーのポスト処理を使用しない．
- - 明るさの変化を避ける（スムースに照明を変化させるため，低周波のテクスチャやフォグエフェクトを使います）．
-
-
-全体的に，体に反射的な行動を引き起こすような信号を目が脳に送るべきではありません．
-
-遅延 Latency
-
-遅延は，物理的な頭の動きと，HMDスクリーンが更新されて表示が目に届くまでの間にかかる時間のことです．これは現実感の体験を提供する上で最も重要な要素のひとつです．人間は非常に小さな遅延を検出することができ，知覚させないためには遅延を20ミリ秒以下を維持する必要があります（例えば60Hzのモニタは16ミリ秒で応答します）．
-
-Oculus Rift ヘッドセットの遅延は20ミリ秒以下ですが，モバイル・デバイスベースの環境ではスマートフォンのCPUパワーやその他の性能に大きく依存します．
-
-フレームレート Framerate ( Frames per second / FPS )
-
-Wikipedia の定義に基づくと，フレームレートは，連続した別々の画像（フレームと呼ぶ）をイメージングデバイスが生成する周波数のことです．60fpsは，スムースなユーザ体験のために許容できるフレームレートですが，アプリが動作しているマシン性能や見せたいコンテンツの複雑さによっては，急激に低下する可能性があります．30fps未満では，一般にジッタがあると考えられていて，ユーザーをいらだたせます。
-
-最も困難なタスクの1つは，一定の高フレームレートを維持することで，それを実現するために，可能なかぎり効率的に動作するようにコードを最適化しなければなりません．一定のフレームレートを保てなかったり急激にフレームレートが変化するようなことが無いよう，適切なフレームレートにすることが好ましいです； このために，シーンに配置するオブジェクトを必要最小限にしたり，(WebGLの場合では)ドローコールを削減することが必要となります．
-
-瞳孔間距離 Interpupillary distance ( IPD )
-
-Wikipedia の定義に基づくと，IPDは両目の瞳孔の中心間の距離です．IPDは両眼目視装置の設計においてクリティカルで，両目の瞳孔とも目視装置の射出ひとみ(exit pupils)に位置合わせする必要があります．
-
-WebVRにおいては，IPDは {{domxref("VREyeParameters.offset")}} を使って算出でき、これはIPDのちょうど半分の値になっています．
-
-この値はHMDによって返され，60mmから70mmくらいでしょう； Oculus RiftのようないくつかのHMDでは，ユーザ固有のIPDをセット可能です．通常この値は変化しませんが，シーン全体のスケールを変更するためにそれを実施するかもしれません．例えば，IPDが6000mmにセットされていると，小人の世界を見る巨人のように，ユーザはシーンを見るでしょう．
-
-自由度 Degrees of Freedom ( DoF )
-
-DoF は空間内の剛体の動きを示します．この用語の値を作る決まった方法はありません — 3DoFという記述は，ヘッドトラッキングで回転のみを検出するセンサの文脈で発見でき，6DoFという記述を，位置と回転を同時に制御できる入力について書かれている文脈で見つけることができます．ジャイロセンサ，加速度センサ，コンパスのような3つのセンサを持つハードウェアで，9DoFという記述がされていることがありますが，3 x 3 DoFの結果として得られるものは，実際には6自由度のトラッキングとなります．
-
-DoFは ユーザの頭の動きのトラッキングに直接関係します．
-
-フォーカスコーン Cone of focus
-
-私たちの実際のFOVは非常に広いですが（約180°），シンボルを感じ取れる範囲（中心60°）やテキストを読める範囲（中心10°）は小さな部分だけだと知っておく必要があります．視線追跡センサを備えていない場合，ユーザの目がフォーカスしている場所をスクリーンの中心であると仮定します．
-
-アプリキャンバス上のどこに映像要素を配置するかを決定する際に，この制限を考慮することが重要となります．フォーカスコーンの端っこが遠すぎる場合は，非常に急速な眼精疲労につながります．MozVR.com に，これに関する興味深い記事が（他のものに混ざってですが）あります — Quick VR Mockups with Illustrator を参照してください．
-
-立体音響 3D Positional Audio
-
-立体音響は，3次元空間内でどのように音が聞こえるかをシミュレーションするための音響操作エフェクトです．
-
-これは Web Audio API と直接関係していて，キャンバス内にあるオブジェクト上にサウンドを配置したり，ユーザの移動方向や見ているシーンの部分に応じてオーティオを再生することが可能です．
diff --git a/files/ja/web/api/webvr_api/concepts/index.md b/files/ja/web/api/webvr_api/concepts/index.md
new file mode 100644
index 00000000000000..0b698cc3446093
--- /dev/null
+++ b/files/ja/web/api/webvr_api/concepts/index.md
@@ -0,0 +1,178 @@
+---
+title: WebVR concepts
+slug: Web/API/WebVR_API/Concepts
+translation_of: Web/API/WebVR_API/Concepts
+---
+{{APIRef("WebVR API")}}
+
+この文書は，バーチャルリアリティ(VR)の背景にある概念と理論について述べています．もしあなたがこの分野の初学者なら，コードを書き始める前に，これらのトピックを理解すると役に立つでしょう．
+
+## VR の歴史
+
+VR は全く新しいというわけではありません —その概念は 2012 年の Oculus Rift Kickstartar キャンペーンよりずっと前にさかのぼります．人々は数十年の間その実験を続けてきました．
+
+1939 年 [View-Master device](https://en.wikipedia.org/wiki/View-Master) が作られ，3D ピクチャを見ることができるようになりました．そのデバイスは，ステレオ立体視の小さなカラー写真のペアを持つ厚紙のディスクに記録された画像を表示していました．数年の開発ののち，軍はそのテクノロジーの使用に興味を，持ち，そして Headsight プロジェクトが 1961 年に生まれました — これはビデオスクリーンとヘッドトラッキングシステムを合体させたヘルメットに影響を与えました．
+
+
+
+その後の数十年，さまざまな実験がなされましたが，もはや科学ラボや戦場に限定されませんでした．最終的に，映画監督がバーチャルリアリティのビジョンを示すポップカルチャーに引き継がれました．Tron (1982) や The Matrix (1999) のような映画が制作され，そこではまったく新しいサイバー世界へ転送されたり，サイバー世界と知ることなくとらわれてそれを現実世界として受け入れる世界が描かれました．
+
+
+
+最初の VR ゲームの試みは大きく高価なものでした — 1991 年， Virtuality Group はゴーグルを持つ VR レディなアーケードマシンを作成し，パックマンのような人気のタイトルを VR へ移植しました．セガは VR グラスを 1993 年の CES(Consumer Electronics Show )で発表しました．企業は実験をしていましたが，市場や消費者を納得させられませんでした — 実際に成功した VR プロジェクトの事例を見るには 2012 年まで待つ必要がありました．
+
+### 最近の VR
+
+では何が新しいのでしょう？ 十分なユーザ体験を提供するには，VR ハードウェアは高精度，低レイテンシでデータを届ける必要があります; VR アプリケーションを動かすコンピュータはこれらすべての情報を扱うため，十分強力でなければなりません．そのような精度とパワーがあったとしても，手頃な価格で利用できるようになったのは最近のことです．早期の VR プロトタイプは何万ドルもコストがかかりましたが，[HTC VIVE](https://www.vive.com/uk/)や[Oculus Rift](https://www.oculus.com/rift/)、[Playstation VR](https://www.playstation.com/en-us/explore/playstation-vr/) のような近年の HMD は数百ドルで利用でき，さらに [Gear VR](http://www.samsung.com/global/galaxy/gear-vr/) や [Google Cardboard](https://www.google.com/get/cardboard/) のようなモバイルベースのソリューションみたいに，もっと安価なソリューションもあります．
+
+ソフトウェアの面では、Valve は、VIVE や他のソリューションで互換性のある [SteamVR](http://store.steampowered.com/universe/vr) を作成し、利用しやすい VR UI のようなソフトウェアへのアクセスを提供しています。
+
+テクノロジー自体はすでにあるので，将来的には，より高価なヘッドセットが時間をかけて安価になっていき，多くの人々が VR 体験できるようになります．
+
+### 入力デバイス
+
+VR アプリケーションの入力を扱うことは興味深いトピックです — それは専用のユーザインターフェイスがデザインされなければならないのでまったく新しい体験となります．現時点でも古典的なキーボードとマウスから，Leap Motion や VIVE コントローラのような新しいものまで様々なアプローチがあります．これは特定の状況でどのように動作するかそしてあなたのゲームタイプにはどのような入力が最適なのかを確認する試行錯誤の事柄です．
+
+## VR ハードウェアのセットアップ
+
+主に，モバイルタイプとコンピュータ接続タイプの 2 種類のセットアップがあります．最小のハードウェアセットアップは次のようなものです:
+
+- モバイル: Google Cardboard のように VR マウントにスマートフォン — スマートフォンは VR ディスプレイとして機能する — をマウントして作られるヘッドマウントディスプレイ (HMD) で，モバイルスクリーンをステレオビジョンへ投影するのに必要なレンズが含まれています．
+- コンピュータ接続: コンピュータに接続する VR セットアップです — 右目と左目の両方に表示される映像を映す高解像度の横向きスクリーンを持つ HMD で構成されています．HMD は右目と左目のシーン（ステレオビジョン）を分割するためのレンズも備えています．セットアップは分離型の位置センサも含まれています．位置センサは頭の位置/向き/速度/加速度を取得して，コンピュータへ絶えずその情報を渡します．
+
+> **Note:** コンピュータ接続システムは位置センサーを含んでいない場合もありますが，通常は含まれています．
+
+その他の VR 体験を補うハードウェア:
+
+- **手認識センサ**: 手の位置と動きをトラッキングするセンサで，あなたの手を興味深いコントローラや VR ゲーム世界内のオブジェクトにすることができます．もっとも先進的なものは [Leap Motion](https://www.leapmotion.com/) で，（Oculus Rift と接続した）コンピュータ上で動作し，（実験的な段階ですが）モバイルデバイスと接続して使うことも可能です．
+- **ゲームパッド**: XBox コントローラおよびその類似コントローラをブラウザ内でキーボードとして動作するように設定できます．これは VR ウェブページとのインタラクションの可能性を広げます．[MergeVR headset](http://www.mergevr.com/) のようなモバイル環境で使えるゲームパッドも存在しますが，それらは Bluetooth 接続であるため，WebVR では動作しません．
+- **アイトラッキングセンサ（実験的）**: FOVE プロジェクトは，眼球のかすかな動きを読み取る最初のヘッドセットです．
+- 顔の表情追跡（実験的）: 南カリフォルニア大学や Facebook の Oculus 部門の研究者は，表情をトラッキングして，バーチャルキャラクタの表情へ適用する新しい方法をテストしています．
+- **もっと複雑な位置センサシステム**: 1 つの例といて、HTC VIVE は空間の対角上に配置した 2 つの位置センサを備えており、マッピングをしているので、最大 5m x 5m までの空間で VR 体験を楽しむことができます。
+
+## 位置，向き，速度，加速度
+
+前述のように，位置センサは HMD に関する情報を検出して常にそれを出力しているので，頭の動きや回転などに追従してシーンを連続的に更新することができます．しかしその情報とは正確には何でしょうか？
+
+
+
+出力情報は，4 つのカテゴリに分類できます:
+
+1. 位置 — 3D 空間の 3 つの座標軸に沿った HMD の位置です．位置センサから見て，x は左右，y は上下，z は前後となります．WebVR では、x, y, z 座標は {{domxref("VRPose.position")}} 内の配列として表現されます．
+2. 向き — 3D 空間の 3 つの座標軸周りの HMD の回転です．ピッチは x 軸周り，ヨーは y 軸周り，ロールは z 軸周りの回転を意味します．WebVR では ピッチ、ヨー、ロールは
+ {{domxref("VRPose.orientation")}} 内の配列の最初の 3 要素で表されます．
+3. 速度 — VR で考慮する速度は 2 種類あります:
+
+ - 速度（線速度） — 任意の 1 つの軸に沿った HMD の移動速度です．この情報は {{domxref("VRPose.linearVelocity")}} を用いて取得できます．
+ - 角速度 — 任意の 1 つの軸周りの HMD の回転速度です．この情報は {{domxref("VRPose.angularVelocity")}} を用いて取得できます．
+
+4. 加速度 — VR で考慮する加速度は 2 種類あります:
+
+ - 加速度（線加速度） — 任意の 1 つの軸に沿った HMD の移動の加速度です．この情報には {{domxref("VRPose.linearAcceleration")}} を用いてアクセスできます．
+ - 角加速度 — 任意の 1 つの軸周りの HMD の回転加速度です．この情報には {{domxref("VRPose.angularAcceleration")}} を用いてアクセスできます．
+
+## 視界
+
+視界 (FOV; field of view) は，ユーザの各目で見られる（と期待されている）範囲です．その形状は，おおよそピラミッド型になっていて，（前後の）側面はユーザの頭の内部を頂点として，残りはユーザの目の位置から広がっています（訳注； 原文では eminate と書かれていますが，emanate の誤字と判断しました）． それぞれの目は固有の FOV を持っていて，もう一方にわずかに重なっています．
+
+
+
+FOV は次の値で定義されています:
+
+- {{domxref("VRFieldOfView.upDegrees")}}: FOV の上方へ広げる角度値です．
+- {{domxref("VRFieldOfView.rightDegrees")}}: FOV の右側へ広げる角度値です．
+- {{domxref("VRFieldOfView.downDegrees")}}: FOV を下方へ広げる角度値です．
+- {{domxref("VRFieldOfView.leftDegrees")}}: FOV を左側へ広げる角度値です．
+- zNear {{domxref("VRDisplay.depthNear")}}: ユーザの頭の中央から FOV の可視範囲開始まで距離．
+- zFar {{domxref("VRDisplay.depthFar")}}: ユーザの頭の中央から FOV の可視範囲末端までの距離．
+
+> **Note:** The user can potentially see all the way around them, which is a brand new concept for apps and games. Try to give people a reason to look around and see what's behind them — make them reach out and find things that are not visible at the very beginning. Describe what's behind their backs.
+
+これらのプロパティのデフォルト値は，VR ハードウェアによって微妙に異なりますが，上下方向は 53°，左右方向は 47°，zNear と zFar はそれぞれ 0.1m から 10000m くらいになっています．
+
+> **Note:** ユーザは潜在的に周囲全体を見渡すことができます．それはまったく新しいアプリやゲームのコンセプトです．人々が見回したり背後にある何かを見たりする理由を与えることにトライしてみましょう — 最初は見えていないものを見つける手助けをしてあげてください．背後になにがあるか説明しましょう．
+
+## VR アプリのための概念
+
+このセクションでは，通常のモバイルやデスクトップを開発するときにはほとんど考慮する必要がないけれど，VR アプリを開発するときに知っておきたい概念について説明します．
+
+### 立体視 Stereoscopic vision
+
+立体視は，人間や（おそらく）動物が持つ通常のビジョンで，（両目のそれぞれから見える）僅かに異なる 2 つの画像を 1 つの画像として知覚するものです．結果として奥行きを認識でき，見事な 3D の世界を見る手助けをしています．VR アプリでこれを再現するには，ユーザが HMD を使っている時に左右の目のそれぞれに与える，本当にわずかに異なるビューを横に並べた画像をレンダリングする必要があります．
+
+
+
+### ヘッドトラッキング Head tracking
+
+360° シーンの臨場感をつくりだす主要なテクノロジは，HMD に搭載されているジャイロスコープや加速度センサ，磁気センサ（コンパス）によって実現されています．
+それによって目が球面上のスクリーンの前にいると信じることができるので，アプリのキャンバス内に現実的な没入感を与えることができます．
+
+### 眼精疲労 Eye strain
+
+HMD のメジャーな障害として VR でよく使われる用語です．私たちはアプリキャンバス内で見せ続けることで常に目を欺いていますが，通常よりも眼を酷使することになるため，VR アプリを長時間利用し続けると眼精疲労を招きます．
+
+望ましくない影響を最小化するするために，つぎのようなことが必要です:
+
+- 異なる深さへの焦点合わせを避ける（例: たくさんのパーティクルを異なる深度（奥行き）に使うのを避ける）．
+- eye convergion を避ける（例: もしカメラに向かってくる物体があると，目はそれを追って 1 点に集中してしまいます）
+- できるだけ落ち着いた色の暗い背景を使う; 明るいスクリーンは目の疲れが増えます．
+- 明度の激しい変化を避ける．
+- 大量のテキストを読ませることを避ける．目（カメラ）の位置と読ませたいテキストとの距離にも注意しなければいけません．0.5m は近すぎて不快で，2m 以上だと立体効果が感じられないので，その間に配置することをお勧めします．
+- 一般に，物体とカメラと距離には注意してください，Oculus は，フォーカスの最小距離として 0.75m を推奨しています．
+- シーン内のオブジェクトとのインタラクションが必要なときは，ポインタを使います．これは少ない労力で正しく物体を指定するのに役立つでしょう．
+
+一般に，ビジュアルエフェクトが少ないほど，ユーザに与える疲れは軽減されます．
+
+### モーション酔い Motion sickness
+
+開発者が細心の注意を払っていないと，VR アプリはユーザの気分の悪化を実際に引き起こします．これは，目から受け取る刺激と，体が受け取る（と期待するもの）が違う場合に発生します．
+
+ユーザのモーション酔いの発生を避けるために（あるいは最小化するために），次のことが必要です:
+
+- 常にヘッドトラッキングを維持する（これは最も重要です，特に体験の最中で発生する場合）．
+- 一定の速度を使う; 加速や減速するようなカメラの動きを避ける（線形の加速度を使い，できるだけ easing を避ける）．
+- 高フレームレートを維持する（30fps 以下は不快です）．
+- 急激な，あるいは予期できないカメラの回転を避ける．
+- 固定オブジェクト用の固定点を追加する（そうしなければ，ユーザはそれらが移動していると感じてしまいます）
+- どこに焦点を合わせていいか分からなくなるので，DoF (Depth of Feild; 被写界深度)やモーションブラーのポスト処理を使用しない．
+- 明るさの変化を避ける（スムースに照明を変化させるため，低周波のテクスチャやフォグエフェクトを使います）．
+
+全体的に，体に反射的な行動を引き起こすような信号を目が脳に送るべきではありません．
+
+### 遅延 Latency
+
+遅延は，物理的な頭の動きと，HMD スクリーンが更新されて表示が目に届くまでの間にかかる時間のことです．これは現実感の体験を提供する上で最も重要な要素のひとつです．人間は非常に小さな遅延を検出することができ，知覚させないためには遅延を 20 ミリ秒以下を維持する必要があります（例えば 60Hz のモニタは 16 ミリ秒で応答します）．
+
+Oculus Rift ヘッドセットの遅延は 20 ミリ秒以下ですが，モバイル・デバイスベースの環境ではスマートフォンの CPU パワーやその他の性能に大きく依存します．
+
+### フレームレート Framerate ( Frames per second / FPS )
+
+Wikipedia の定義に基づくと，フレームレートは，連続した別々の画像（フレームと呼ぶ）をイメージングデバイスが生成する周波数のことです．60fps は，スムースなユーザ体験のために許容できるフレームレートですが，アプリが動作しているマシン性能や見せたいコンテンツの複雑さによっては，急激に低下する可能性があります．30fps 未満では，一般にジッタがあると考えられていて，ユーザーをいらだたせます。
+
+最も困難なタスクの 1 つは，一定の高フレームレートを維持することで，それを実現するために，可能なかぎり効率的に動作するようにコードを最適化しなければなりません．一定のフレームレートを保てなかったり急激にフレームレートが変化するようなことが無いよう，適切なフレームレートにすることが好ましいです； このために，シーンに配置するオブジェクトを必要最小限にしたり，(WebGL の場合では)ドローコールを削減することが必要となります．
+
+### 瞳孔間距離 Interpupillary distance ( IPD )
+
+Wikipedia の定義に基づくと，IPD は両目の瞳孔の中心間の距離です．IPD は両眼目視装置の設計においてクリティカルで，両目の瞳孔とも目視装置の射出ひとみ(exit pupils)に位置合わせする必要があります．
+
+WebVR においては，IPD は {{domxref("VREyeParameters.offset")}} を使って算出でき、これは IPD のちょうど半分の値になっています．
+
+この値は HMD によって返され，60mm から 70mm くらいでしょう； Oculus Rift のようないくつかの HMD では，ユーザ固有の IPD をセット可能です．通常この値は変化しませんが，シーン全体のスケールを変更するためにそれを実施するかもしれません．例えば，IPD が 6000mm にセットされていると，小人の世界を見る巨人のように，ユーザはシーンを見るでしょう．
+
+### 自由度 Degrees of Freedom ( DoF )
+
+DoF は空間内の剛体の動きを示します．この用語の値を作る決まった方法はありません — 3DoF という記述は，ヘッドトラッキングで回転のみを検出するセンサの文脈で発見でき，6DoF という記述を，位置と回転を同時に制御できる入力について書かれている文脈で見つけることができます．ジャイロセンサ，加速度センサ，コンパスのような 3 つのセンサを持つハードウェアで，9DoF という記述がされていることがありますが，3 x 3 DoF の結果として得られるものは，実際には 6 自由度のトラッキングとなります．
+
+DoF は ユーザの頭の動きのトラッキングに直接関係します．
+
+### フォーカスコーン Cone of focus
+
+私たちの実際の FOV は非常に広いですが（約 180°），シンボルを感じ取れる範囲（中心 60°）やテキストを読める範囲（中心 10°）は小さな部分だけだと知っておく必要があります．視線追跡センサを備えていない場合，ユーザの目がフォーカスしている場所をスクリーンの中心であると仮定します．
+
+アプリキャンバス上のどこに映像要素を配置するかを決定する際に，この制限を考慮することが重要となります．フォーカスコーンの端っこが遠すぎる場合は，非常に急速な眼精疲労につながります．MozVR.com に，これに関する興味深い記事が（他のものに混ざってですが）あります — [Quick VR Mockups with Illustrator](http://mozvr.com/posts/quick-vr-prototypes/) を参照してください．
+
+### 立体音響 3D Positional Audio
+
+立体音響は，3 次元空間内でどのように音が聞こえるかをシミュレーションするための音響操作エフェクトです．
+
+これは [Web Audio API](/ja/docs/Web/API/Web_Audio_API) と直接関係していて，キャンバス内にあるオブジェクト上にサウンドを配置したり，ユーザの移動方向や見ているシーンの部分に応じてオーティオを再生することが可能です．
diff --git a/files/ja/web/api/webvr_api/index.html b/files/ja/web/api/webvr_api/index.html
deleted file mode 100644
index d8ce7e7bc6e4fa..00000000000000
--- a/files/ja/web/api/webvr_api/index.html
+++ /dev/null
@@ -1,188 +0,0 @@
----
-title: WebVR API
-slug: Web/API/WebVR_API
-tags:
- - API
- - Deprecated
- - Experimental
- - Landing
- - Obsolete
- - Reference
- - VR
- - Virtual Reality
- - WebVR
-translation_of: Web/API/WebVR_API
----
-{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}
-
-注: WebVR API は
WebXR API に置き換えられました。 WebVR は標準として批准されることはなく、ごく少数のブラウザでしか既定で実装・有効化されず、少数の端末しか対応していませんでした。
-
-WebVR は，バーチャルリアリティデバイス — 例えば Oculus Rift のようなヘッドマウントディスプレイ — をウェブアプリへ公開し，ヘッドマウントディスプレイの位置や動きを3D空間上の動きへと変換する手助けを行います．これによって，バーチャルな製品紹介やインタラクティブな訓練アプリといったものから超臨場感のファーストパーソン・シューティングゲームといったものまで，非常に面白い様々なアプリケーションをつくることができます．
-
-概念と利用方法
-
-コンピュータに接続されている VR 装置は {{DOMxRef("Navigator.getVRDisplays()")}} メソッドによって返されます。それぞれの装置は {{DOMxRef("VRDisplay")}} オブジェクトで表されます。
-
-
-
-{{DOMxRef("VRDisplay")}} VRDisplay は WebVR API の中心的なインターフェイスであり、そのプロパティとメソッドを介して、以下の機能にアクセスすることができます。
-
-
- - ディスプレイを識別するための有用な情報を取得し、ディスプレイにどのような機能があるのか、ディスプレイに関連付けられたコントローラなどを確認することができます。
- - ディスプレイに表示したいコンテンツの各フレームの {{DOMxRef("VRFrameData", "frame data")}} を取得し、一貫したレートで表示するためにそれらのフレームを送信します。
- - ディスプレイへの表示の開始と停止。
-
-
-典型的な (シンプルな) WebVR アプリは次のように動作します。
-
-
- - {{DOMxRef("Navigator.getVRDisplays()")}} を使用して VR ディスプレイの参照を取得します。
- - {{DOMxRef("VRDisplay.requestPresent()")}} を使用して VR ディスプレイの表示を開始します。
- - WebVR 専用の {{DOMxRef("VRDisplay.requestAnimationFrame()")}} メソッドを使用して、ディスプレイの正しいリフレッシュレートでアプリのレンダリングループを実行します。
- - レンダリングループ内では、現在のフレームを表示するために必要なデータを取得し ({{DOMxRef("VRDisplay.getFrameData()")}})、表示されたシーンを 2 回 — それぞれの目の画像を1回ずつ描画し、レンダリングされたビューをディスプレイに送信してユーザーに表示します ({{DOMxRef("VRDisplay.submitFrame()")}})。
-
-
-また WebVR 1.1 では、 {{DOMxRef("Window")}} オブジェクトに多数のイベントが追加され、 JavaScript が表示状態の変化に対応できるようになっています。
-
-
-
-API の可用性
-
-Web 標準として承認されることのなかった WebVR API は、標準化プロセスの終了に向けて順調に進んでいる WebXR API に取って代わられて非推奨となりました。そのため、既存のコードを更新して、代わりに新しい API を使用するようにしてください。一般的には、移行はかなり苦痛のないものになるはずです。
-
-さらに、端末やブラウザーによっては、 WebVR は HTTPS 接続を介して安全なコンテキストを使用してページをロードする必要があります。ページが完全に安全でない場合、 WebVR のメソッドや機能は利用できません。これは、 {{DOMxRef("Navigator")}} の {{DOMxRef("Navigator.getVRDisplays", "getVRDisplays()")}} メソッドが NULL であるかどうかを確認することで簡単にテストできます。
-
-if (!navigator.getVRDisplays) {
- console.error("WebVR is not available");
-} else {
- /* WebVR を使用する */
-}
-
-
-コントローラーの使用: WebVR と Gamepad API の組み合わせ
-
-多くの WebVR ハードウェアは、ヘッドセットと一緒に使用するコントローラーをセットアップします。これらは Gamepad API を介して WebVR アプリで使用することができ、特に Gamepad Extensions API は、コントローラーのコントローラーのポーズや触覚アクチュエーターなどにアクセスするための API 機能を追加します。
-
-
-
Note: WebVR API の使用の記事では、 WebVR アプリでの VR コントローラーの使い方の基本を解説しています。
-
WebVR インターフェイス
-
-
- - {{DOMxRef("VRDisplay")}}
- - このAPIでサポートされているVRデバイスを表します．デバイスIDや説明など汎用的な情報や，VRシーンの表示を開始するためのメソッドや，両目のパラメータやディスプレイの対応機能を受け取るメソッド，その他の重要な機能のためのメソッドを含んでいます．
- - {{DOMxRef("VRDisplayCapabilities")}}
- - {{DOMxRef("VRDisplay")}} の利用可能な機能を示しています — この機能はVRデバイスで使える機能テストを実行するために使うことができ，例えば位置情報を返すことが可能かに使えます．
- - {{DOMxRef("VRDisplayEvent")}}
- - WebVR 関連イベントのイベントオブジェクトを表します (下記の window オブジェクト拡張を参照)。
- - {{DOMxRef("VRFrameData")}}
- - VR シーンの 1 フレームをレンダリングするために必要なすべての情報を表します。 {{DOMxRef("VRDisplay.getFrameData()")}} から構築されます。
- - {{DOMxRef("VRPose")}}
- - 指定した時刻における位置の状態を表します（これには向き，位置，速度，加速度を含んでいます）．
- - {{DOMxRef("VREyeParameters")}}
- - 指定した目に対応するシーンを正しくレンダリングするために必要となるすべての情報へのアクセスを提供します．これにはFOV情報を含まれています．
- - {{DOMxRef("VRFieldOfView")}}
- - 中心点からの視界を記述する4つの異なる角度値で定義されるFOVを表します．
- - {{DOMxRef("VRLayerInit")}}
- - {{DOMxRef("VRDisplay")}} 内に表示されるレイヤを表します.
- - {{DOMxRef("VRStageParameters")}}
- - ルームスケール体験をサポートしているデバイスで，ステージエリアを示す値を表します．
-
-
-その他のインターフェイスの拡張
-
-The WebVR API extends the following APIs, adding the listed features.
-
-Gamepad
-
-
- - {{DOMxRef("Gamepad.displayId")}} {{readonlyInline}}
- - 関連付いている {{DOMxRef("VRDisplay")}} の {{DOMxRef("VRDisplay.displayId")}} を返します — その
VRDisplay はゲームパッドが表示シーンのコントロールします．
-
-
-Navigator
-
-
- - {{DOMxRef("Navigator.activeVRDisplays")}} {{readonlyInline}}
- - 現在表示されている（{{DOMxRef("VRDisplay.ispresenting")}} が
true の）すべての {{DOMxRef("VRDisplay")}} オブジェクトを持つ配列を返します．
- - {{DOMxRef("Navigator.getVRDisplays()")}}
- - コンピュータに接続されている利用可能なVRデバイスを表す {{DOMxRef("VRDisplay")}} オブジェクトの配列へ解決する promiseを返します．
-
-
-Window イベント
-
-
- - {{DOMxRef("Window.onvrdisplaypresentchange")}}
- - VRデバイスの表示状態が変更されたとき — すなわち，表示状態から非表示状態へ変化したときあるいはその逆（ {{event("onvrdisplaypresentchange")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．
- - {{DOMxRef("Window.onvrdisplayconnect")}}
- - 互換性のあるVRデバイスがコンピュータに接続されたとき（ {{event("vrdisplayconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．
- - {{DOMxRef("Window.onvrdisplaydisconnect")}}
- - 互換性のあるVRデバイスがコンピュータから接続解除されたとき（ {{event("vrdisplaydisconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．
- - {{DOMxRef("Window.onvrdisplayactivate")}}
- - ディスプレイが表示できるようになったとき ({{event("vrdisplayactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD を移動させて待機状態を解除した場合や、電源を入れたことで起動した場合などです。
- - {{DOMxRef("Window.onvrdisplaydeactivate")}}
- - ディスプレイが表示できなくなったとき ({{event("vrdisplaydeactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD が一定期間使用されていなかったためにスタンバイモードやスリープモードになった場合などです。
- - {{DOMxRef("Window.onvrdisplayblur")}}
- - ブラウザ、OS、または VR ハードウェアによってディスプレイへの表示が何らかの理由で一時停止された場合 ({{event("vrdisplayblur")}} イベントが発生した場合) に実行されるイベントハンドラーを表します。例えば、ユーザーがシステムメニューやブラウザーと対話している間などに、トラッキングや体験の喪失を防ぐためです。
- - {{DOMxRef("Window.onvrdisplayfocus")}}
- - 一時停止後に ({{event("vrdisplayfocus")}} イベントが発生したときに) ディスプレイへの提示が再開されたときに実行されるイベントハンドラーを表します。
-
-
-例
-
-次の Github リポジトリでいくつかの例を見つけられます。
-
-
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
-
-
- | {{SpecName("GamepadExtensions")}} |
- {{Spec2("GamepadExtensions")}} |
- Experimental Gamepad extensions を定義。 |
-
-
- | {{SpecName("WebVR 1.1")}} |
- {{Spec2("WebVR 1.1")}} |
- 初回定義 |
-
-
-
-
-Browser compatibility
-
-Navigator.getVRDisplays
-
-
-
{{Compat("api.Navigator.getVRDisplays")}}
-
関連情報
-
-
- - vr.mozilla.org — Mozilla VR team から提供されるデモ，ダウンロード，その他のリソース．
- - A-Frame — Open source web framework for building VR experiences.
- - webvr.info — Up-to-date information about WebVR, browser setup, and community.
- - threejs-vr-boilerplate — A useful starter template for writing WebVR apps into.
- - Web VR polyfill — JavaScript implementation of WebVR.
- - Supermedium — A pure WebVR browser to easily access the best WebVR content.
- - WebVR Directory — List of quality WebVR sites.
-
diff --git a/files/ja/web/api/webvr_api/index.md b/files/ja/web/api/webvr_api/index.md
new file mode 100644
index 00000000000000..d0ef9292d107ba
--- /dev/null
+++ b/files/ja/web/api/webvr_api/index.md
@@ -0,0 +1,150 @@
+---
+title: WebVR API
+slug: Web/API/WebVR_API
+tags:
+ - API
+ - Deprecated
+ - Experimental
+ - Landing
+ - Obsolete
+ - Reference
+ - VR
+ - Virtual Reality
+ - WebVR
+translation_of: Web/API/WebVR_API
+---
+{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}
+
+> **Note:** **注:** WebVR API は [WebXR API](/ja/docs/Web/API/WebXR_API) に置き換えられました。 WebVR は標準として批准されることはなく、ごく少数のブラウザでしか既定で実装・有効化されず、少数の端末しか対応していませんでした。
+
+WebVR は，バーチャルリアリティデバイス — 例えば Oculus Rift のようなヘッドマウントディスプレイ — をウェブアプリへ公開し，ヘッドマウントディスプレイの位置や動きを 3D 空間上の動きへと変換する手助けを行います．これによって，バーチャルな製品紹介やインタラクティブな訓練アプリといったものから超臨場感のファーストパーソン・シューティングゲームといったものまで，非常に面白い様々なアプリケーションをつくることができます．
+
+## 概念と利用方法
+
+コンピュータに接続されている VR 装置は {{DOMxRef("Navigator.getVRDisplays()")}} メソッドによって返されます。それぞれの装置は {{DOMxRef("VRDisplay")}} オブジェクトで表されます。
+
+
+
+{{DOMxRef("VRDisplay")}} VRDisplay は WebVR API の中心的なインターフェイスであり、そのプロパティとメソッドを介して、以下の機能にアクセスすることができます。
+
+- ディスプレイを識別するための有用な情報を取得し、ディスプレイにどのような機能があるのか、ディスプレイに関連付けられたコントローラなどを確認することができます。
+- ディスプレイに表示したいコンテンツの各フレームの {{DOMxRef("VRFrameData", "frame data")}} を取得し、一貫したレートで表示するためにそれらのフレームを送信します。
+- ディスプレイへの表示の開始と停止。
+
+典型的な (シンプルな) WebVR アプリは次のように動作します。
+
+1. {{DOMxRef("Navigator.getVRDisplays()")}} を使用して VR ディスプレイの参照を取得します。
+2. {{DOMxRef("VRDisplay.requestPresent()")}} を使用して VR ディスプレイの表示を開始します。
+3. WebVR 専用の {{DOMxRef("VRDisplay.requestAnimationFrame()")}} メソッドを使用して、ディスプレイの正しいリフレッシュレートでアプリのレンダリングループを実行します。
+4. レンダリングループ内では、現在のフレームを表示するために必要なデータを取得し ({{DOMxRef("VRDisplay.getFrameData()")}})、表示されたシーンを 2 回 — それぞれの目の画像を 1 回ずつ描画し、レンダリングされたビューをディスプレイに送信してユーザーに表示します ({{DOMxRef("VRDisplay.submitFrame()")}})。
+
+また WebVR 1.1 では、 {{DOMxRef("Window")}} オブジェクトに多数のイベントが追加され、 JavaScript が表示状態の変化に対応できるようになっています。
+
+> **Note:** [WebVR API の使用](/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API)と [WebVR の概念](/ja/docs/Web/API/WebVR_API/Concepts)の記事で、この API の使用方法がもっとわかります。
+
+### API の可用性
+
+Web 標準として承認されることのなかった WebVR API は、標準化プロセスの終了に向けて順調に進んでいる [WebXR API](/ja/docs/Web/API/WebXR_Device_API) に取って代わられて非推奨となりました。そのため、既存のコードを更新して、代わりに新しい API を使用するようにしてください。一般的には、移行はかなり苦痛のないものになるはずです。
+
+さらに、端末やブラウザーによっては、 WebVR は HTTPS 接続を介して安全なコンテキストを使用してページをロードする必要があります。ページが完全に安全でない場合、 WebVR のメソッドや機能は利用できません。これは、 {{DOMxRef("Navigator")}} の {{DOMxRef("Navigator.getVRDisplays", "getVRDisplays()")}} メソッドが `NULL` であるかどうかを確認することで簡単にテストできます。
+
+```js
+if (!navigator.getVRDisplays) {
+ console.error("WebVR is not available");
+} else {
+ /* WebVR を使用する */
+}
+```
+
+### コントローラーの使用: WebVR と Gamepad API の組み合わせ
+
+多くの WebVR ハードウェアは、ヘッドセットと一緒に使用するコントローラーをセットアップします。これらは [Gamepad API](/ja/docs/Web/API/Gamepad_API) を介して WebVR アプリで使用することができ、特に [Gamepad Extensions API](/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions) は、コントローラーの[コントローラーのポーズ](/ja/docs/Web/API/GamepadPose)や[触覚アクチュエーター](/ja/docs/Web/API/GamepadHapticActuator)などにアクセスするための API 機能を追加します。
+
+> **Note:** [WebVR API の使用](/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API)の記事では、 WebVR アプリでの VR コントローラーの使い方の基本を解説しています。
+
+## WebVR インターフェイス
+
+- {{DOMxRef("VRDisplay")}}
+ - : この API でサポートされている VR デバイスを表します．デバイス ID や説明など汎用的な情報や，VR シーンの表示を開始するためのメソッドや，両目のパラメータやディスプレイの対応機能を受け取るメソッド，その他の重要な機能のためのメソッドを含んでいます．
+- {{DOMxRef("VRDisplayCapabilities")}}
+ - : {{DOMxRef("VRDisplay")}} の利用可能な機能を示しています — この機能は VR デバイスで使える機能テストを実行するために使うことができ，例えば位置情報を返すことが可能かに使えます．
+- {{DOMxRef("VRDisplayEvent")}}
+ - : WebVR 関連イベントのイベントオブジェクトを表します (下記の [window オブジェクト拡張](#window)を参照)。
+- {{DOMxRef("VRFrameData")}}
+ - : VR シーンの 1 フレームをレンダリングするために必要なすべての情報を表します。 {{DOMxRef("VRDisplay.getFrameData()")}} から構築されます。
+- {{DOMxRef("VRPose")}}
+ - : 指定した時刻における位置の状態を表します（これには向き，位置，速度，加速度を含んでいます）．
+- {{DOMxRef("VREyeParameters")}}
+ - : 指定した目に対応するシーンを正しくレンダリングするために必要となるすべての情報へのアクセスを提供します．これには FOV 情報を含まれています．
+- {{DOMxRef("VRFieldOfView")}}
+ - : 中心点からの視界を記述する 4 つの異なる角度値で定義される FOV を表します．
+- {{DOMxRef("VRLayerInit")}}
+ - : {{DOMxRef("VRDisplay")}} 内に表示されるレイヤを表します.
+- {{DOMxRef("VRStageParameters")}}
+ - : ルームスケール体験をサポートしているデバイスで，ステージエリアを示す値を表します．
+
+### その他のインターフェイスの拡張
+
+The WebVR API extends the following APIs, adding the listed features.
+
+#### Gamepad
+
+- {{DOMxRef("Gamepad.displayId")}} {{readonlyInline}}
+ - : _関連付いている {{DOMxRef("VRDisplay")}} の {{DOMxRef("VRDisplay.displayId")}} を返します — その `VRDisplay` はゲームパッドが表示シーンのコントロールします．_
+
+#### Navigator
+
+- {{DOMxRef("Navigator.activeVRDisplays")}} {{readonlyInline}}
+ - : 現在表示されている（{{DOMxRef("VRDisplay.ispresenting")}} が `true の`）すべての {{DOMxRef("VRDisplay")}} オブジェクトを持つ配列を返します．
+- {{DOMxRef("Navigator.getVRDisplays()")}}
+ - : コンピュータに接続されている利用可能な VR デバイスを表す {{DOMxRef("VRDisplay")}} オブジェクトの配列へ解決する promise を返します．
+
+#### Window イベント
+
+- {{DOMxRef("Window.onvrdisplaypresentchange")}}
+ - : VR デバイスの表示状態が変更されたとき — すなわち，表示状態から非表示状態へ変化したときあるいはその逆（ {{event("onvrdisplaypresentchange")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．
+- {{DOMxRef("Window.onvrdisplayconnect")}}
+ - : 互換性のある VR デバイスがコンピュータに接続されたとき（ {{event("vrdisplayconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．
+- {{DOMxRef("Window.onvrdisplaydisconnect")}}
+ - : 互換性のある VR デバイスがコンピュータから接続解除されたとき（ {{event("vrdisplaydisconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．
+- {{DOMxRef("Window.onvrdisplayactivate")}}
+ - : ディスプレイが表示できるようになったとき ({{event("vrdisplayactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD を移動させて待機状態を解除した場合や、電源を入れたことで起動した場合などです。
+- {{DOMxRef("Window.onvrdisplaydeactivate")}}
+ - : ディスプレイが表示できなくなったとき ({{event("vrdisplaydeactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD が一定期間使用されていなかったためにスタンバイモードやスリープモードになった場合などです。
+- {{DOMxRef("Window.onvrdisplayblur")}}
+ - : ブラウザ、OS、または VR ハードウェアによってディスプレイへの表示が何らかの理由で一時停止された場合 ({{event("vrdisplayblur")}} イベントが発生した場合) に実行されるイベントハンドラーを表します。例えば、ユーザーがシステムメニューやブラウザーと対話している間などに、トラッキングや体験の喪失を防ぐためです。
+- {{DOMxRef("Window.onvrdisplayfocus")}}
+ - : 一時停止後に ({{event("vrdisplayfocus")}} イベントが発生したときに) ディスプレイへの提示が再開されたときに実行されるイベントハンドラーを表します。
+
+## 例
+
+次の Github リポジトリでいくつかの例を見つけられます。
+
+- [webvr-tests](https://github.com/mdn/webvr-tests): 基本的な機能の使い方を示すためのシンプルなデモ。
+- [Carmel starter kit](https://github.com/facebook/Carmel-Starter-Kit) — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser.
+- [WebVR.info samples](https://webvr.info/samples/) — slightly more in-depth examples plus source code
+- [WebVR.rocks Firefox demos](https://webvr.rocks/firefox#demos) — showcase examples
+- [A-Frame homepage](https://aframe.io/) — examples showing A-Frame usage
+
+## 仕様書
+
+| 仕様書 | 状態 | 備考 |
+| -------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| {{SpecName("GamepadExtensions")}} | {{Spec2("GamepadExtensions")}} | [Experimental Gamepad extensions](/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions) を定義。 |
+| {{SpecName("WebVR 1.1")}} | {{Spec2("WebVR 1.1")}} | 初回定義 |
+
+## Browser compatibility
+
+### `Navigator.getVRDisplays`
+
+{{Compat("api.Navigator.getVRDisplays")}}
+
+## 関連情報
+
+- [vr.mozilla.org](https://vr.mozilla.org) — Mozilla VR team から提供されるデモ，ダウンロード，その他のリソース．
+- [A-Frame](https://aframe.io/) — Open source web framework for building VR experiences.
+- [webvr.info](https://webvr.info) — Up-to-date information about WebVR, browser setup, and community.
+- [threejs-vr-boilerplate](https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate) — A useful starter template for writing WebVR apps into.
+- [Web VR polyfill](https://github.com/googlevr/webvr-polyfill/) — JavaScript implementation of WebVR.
+- [Supermedium](https://www.supermedium.com) — A pure WebVR browser to easily access the best WebVR content.
+- [WebVR Directory](http://webvr.directory/) — List of quality WebVR sites.
diff --git a/files/ja/web/api/webvr_api/using_the_webvr_api/index.html b/files/ja/web/api/webvr_api/using_the_webvr_api/index.html
deleted file mode 100644
index 43bc47a9cb8017..00000000000000
--- a/files/ja/web/api/webvr_api/using_the_webvr_api/index.html
+++ /dev/null
@@ -1,298 +0,0 @@
----
-title: WebVR APIの使い方
-slug: Web/API/WebVR_API/Using_the_WebVR_API
-translation_of: Web/API/WebVR_API/Using_the_WebVR_API
----
-WebVR API はウェブ開発者のツールキットへのすばらしい追加機能で、Oculus Rift のようなバーチャルリアリティハードウェアへのアクセスが可能となります。そして出力された動きや向きはウェブアプリの描画更新に変換されます。しかし VR アプリを開発はどのようにやればいいのでしょうか？ この記事では、それに関する基礎的な解説を行います。
-
-
-
注記: WebVR は現在実験的な段階にあります（最新の仕様はこちらにあります); 今の段階でもっとも正常に動作するのは Firefox Nightly/Developer Edition で、一部の機能は Google Chrome でも動作します。詳細は Brandon Jonesの Bringing VR to Chrome を参照してください。
-
始めるには
-
-WebVRを始めるには，VRハードウェアのマニュアルに従ったセットアップと、WebVR environment setup に示されているコンピュータへの設定が必要になります、スムースな動作には専用GPUが推奨されます。
-
-Firefox Nightly (または Developer Edition) のインストールと合わせて WebVR Enabler Add-on も必要となります。
-
-いちど環境が設定できたら、テストのために私たちの MozVR projects を開いて、[Enter VR] ボタンをクリックすることを試してください。
-
-
-
-
-
注記: モバイルデバイスを HMD として用いるような安価な選択肢もあります。この場合，位置センサは利用できませんので、代わりに deviceorientation API を用いて擬似的な向きデータを使う必要があるかもしれません。
-
簡単なデモ
-
-WebVR のデモは MozVR team repo や MDN webvr-tests repo にたくさんありますが、この記事では、主にpositionsensorvrdevice について (動作しているデモ) を例に解説します。
-
-
-
-これは簡単な 2.5D のデモで，HTML5 Canvas にレンダリングされた Firefox ロゴが右目と左目のビューに表示されるものです．VR HMDでデモを見ているときにキャンバスをクリックすると、デモはフルスクリーンになり、Firefox ロゴに近づけるようになります。あなたが動くと頭の動きに合わせて上下左右や回転してリアルに動きます。
-
-あなたが WebVR のコードがどう動いているかを簡単に確認できるように、デモは意図的にシンプルになるよう保持されています。API は十分シンプルであるため，単純な DOM ベースインターフェイスでも複雑な WebGL シーンでも、好きなアプリに WebVR 制御の移動を簡単に適用できます。
-
-アプリはどう動く?
-
-このセクションでは、アプリを動作させるために必要なコードの変更箇所を通じて、基礎的なレベルで何が必要かを知ることができます。
-
-VRデバイスへのアクセス
-
-最初にコンピュータに接続中のVRハードウェアへのプログラム的な参照を取得します。それには接続中の全 VR デバイスの配列へと解決できるプロミスを返す {{domxref("Navigator.getVRDevices")}} を使います。
-
-返される可能性のあるオブジェクトが2種類あります:
-
-
- - {{domxref("PositionSensorVRDevice")}}: 位置センサカメラ。
- - {{domxref("HMDVRDevice")}}: VRヘッドマウントディスプレイ。
-
-
- vrdevice demo で基本的なデバイス情報を表示するための非常に簡単なコードを見ることができます。
-
-本当に欲しいものはデバイスのペアを取得するものです (将来のマルチプレイヤVRゲームでは複数のペアになるかもですが)。WebVR 仕様からもってきた（そして positionsensorvrdevice デモでも使っている）次のコードはかなりよく使うトリックです:
-
-var gHMD, gPositionSensor;
-
-navigator.getVRDevices().then(function(devices) {
- for (var i = 0; i < devices.length; ++i) {
- if (devices[i] instanceof HMDVRDevice) {
- gHMD = devices[i];
- break;
- }
- }
-
- if (gHMD) {
- for (var i = 0; i < devices.length; ++i) {
- if (devices[i] instanceof PositionSensorVRDevice && devices[i].hardwareUnitId === gHMD.hardwareUnitId) {
- gPositionSensor = devices[i];
- break;
- }
- }
- }
-});
-
-最初に見つかった {{domxref("HMDVRDevice")}} のインスタンスを取得し、それを gHMD 変数へ保存します．次に見つかった {{domxref("PositionSensorVRDevice")}} のインスタンスを取得して gPositionSensor 変数に代入していますが，それは先ほど取得した gHMD オブジェクトの {{domxref("VRDevice.hardWareUnitId")}} プロパティが一致するものだけを対象にしています。同一のハードウェアは複数のデバイスとして取得されますが、それらはハードウェアユニットIDを共有しています — これは取得した 2 つのデバイスの参照がマッチングしているかをチェックする方法です。
-
-アプリの初期化
-
-シーンを描画する {{htmlelement("canvas")}} 要素を次のように作成し、配置します:
-
-var myCanvas = document.createElement('canvas');
-var ctx = myCanvas.getContext('2d');
-var body = document.querySelector('body');
-body.appendChild(myCanvas);
-
-次に、新しい image を作成し、アプリの main loop であるdraw()を実行する前に image が ロードされているかをチェックするために {{event("load")}} イベントを使います:
-
-var image = new Image();
-image.src = 'firefox.png';
-image.onload = draw;
-
-メインループ
-
-draw() は次のように実装します:
-
-function draw() {
- WIDTH = window.innerWidth;
- HEIGHT = window.innerHeight;
- lCtrOffset = WIDTH*0.25;
- rCtrOffset = WIDTH*0.25;
-
- myCanvas.width = WIDTH;
- myCanvas.height = HEIGHT;
-
- setView();
- drawImages();
- drawCrosshairs();
-
- requestAnimationFrame(draw);
-}
-
-window の WIDTH と HEIGHT は各フレームでリサンプリングされ，次の設定に使われます:
-
-
- - 左右の目のビュー中心からの相対的に描画される画像を維持するのに使われる左右のオフセット値です。半分の幅のシーンのコピーを描画するので、各コピーの中心はそれぞれ、エッジの端から端までのキャンバス全体幅のちょうど1/4の幅になります。
- - キャンバスの width と height。
-
-
-これによってブラウザウィンドウがリサイズされたとしても、シーンが正しくリサイズされます。
-
-次にメインループの中で3つの関数を実行しています:
-
-
- setView() は，VR ハードウェアから位置と向きの情報を受け取り，シーン内の更新された画像位置の描画に使用する準備をします。drawImages() はシーンを更新された位置で実際に描画します。drawCrosshairs() は常にシーンの中央にある十字線を描画します。
-
-これらの詳細は、後ほど解説します。
-
-ループの最後に requestAnimationFrame(draw) を実行し、draw() ループが連続して呼び出されるようにします。
-
-位置と向き情報の受取り
-
-では setView() 関数の詳細を見ていきましょう。コードの各部分を順に追って、そこで何をしているかを説明します:
-
-function setView() {
- var posState = gPositionSensor.getState();
-
-位置センサへの参照を使って {{domxref("PositionSensorVRDevice.getState")}} を呼び出します。このメソッドは、あなたが知りたい現在のHMDの状態のすべてを返します — {{domxref("VRPositionState")}} オブジェクトへのアクセスを通じて — 位置、向き、そして速度/ 加速度や角速度 / 角加速度のようなより高度な情報を含んでいます。
-
- if(posState.hasPosition) {
- posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
- + roundToTwo(posState.position.y) + " z"
- + roundToTwo(posState.position.z);
- xPos = -posState.position.x * WIDTH * 2;
- yPos = posState.position.y * HEIGHT * 2;
- if(-posState.position.z > 0.01) {
- zPos = -posState.position.z;
- } else {
- zPos = 0.01;
- }
- }
-
-HMDのスイッチがOFFにされたり位置センサを向いていなかったりした場合など、アプリがエラーになったり停止したりしないように、 {{domxref("VRPositionState.hasPosition")}} を使って HMD の正常な位置情報が利用可能かを確認する方法をチェックします。
-
-そして通知を目的として、アプリのUI内のパラグラフへ現在の位置情報を出力します。読みやすくするために、カスタム関数を使って小数点以下 2 桁に丸めています。
-
-最後に {{domxref("VRPositionState.position")}} に格納されている位置情報に関して、xPos、 yPos、zPos 変数に代入します。zPos の値を 0.01 以上にするのに if ... else ブロックが利用されていることに気付くでしょう — このアプリは0以下になると例外を投げていました。
-
- if(posState.hasOrientation) {
- orientPara.textContent = 'Orientation: x' + roundToTwo(posState.orientation.x) + " y"
- + roundToTwo(posState.orientation.y) + " z"
- + roundToTwo(posState.orientation.z);
- xOrient = posState.orientation.x * WIDTH;
- yOrient = -posState.orientation.y * HEIGHT * 2;
- zOrient = posState.orientation.z * 180;
-
- }
-
-次に同じような処理をして、HMDの向きに応じてシーンの更新処理をします — {{domxref("VRPositionState.hasOrientation")}} を使って有効な向きデータかをチェックして，向きのデータを通知用のUIに表示し、xOrient、yOrient、zOrient の値を {{domxref("VRPositionState.orientation")}} に格納されている値から設定します．
-
- timePara.textContent = 'Timestamp: ' + Math.floor(posState.timeStamp);
-}
-
-最後に {{domxref("VRPositionState.timeStamp")}} に格納されている現在のタイムスタンプを通知 UI に出力します。この値は位置データが更新済みか、どんな順序で更新が発生したかを判断するのに役立ちます。
-
-シーンの更新
-
-setView() で取得された xPos、yPos、zPos、xOrient、yOrient、zOrient の値は、drawImages() で行われるシーン病がの更新のための変更値として使用されます。どうやっているかを見ていきますが、左目のビューの描画コードだけをウォークスルーしていきます。右目については、右にオーバーシフトしている以外はほぼ同じです:
-
-function drawImages() {
- ctx.fillStyle = 'white';
- ctx.fillRect(0,0,WIDTH,HEIGHT);
-
-最初に次のフレームが描画される前にシーンをクリアするため、白い {{domxref("CanvasRenderingContext2D.fillRect","fillRect()")}} を描画します。
-
- ctx.save();
- ctx.beginPath();
- ctx.translate(WIDTH/4,HEIGHT/2);
- ctx.rect(-(WIDTH/4),-(HEIGHT/2),WIDTH/2,HEIGHT);
-
-次に左目のビューを別の画像として扱って右目のビューに影響を与えないコードにするので、 {{domxref("CanvasRenderingContext2D.save","save()")}} でコンテキスト状態を保存します。
-
-そして {{domxref("CanvasRenderingContext2D.beginPath","pathを開始し")}}, {{domxref("CanvasRenderingContext2D.translate","canvasを変換します")}}、これによって原点を左目の中心（全体の1/4幅で半分の高さ）に移動させます。回転を正しく動かすためにもこれは必要です。回転はcanvasの原点が中心となります。そして左目のビュー全体を覆うように {{domxref("CanvasRenderingContext2D.rect","rect()")}} を描画します。
-
-rect() はマイナスの 1/4 幅，マイナスの1/2 高さから描画し始めていることに注意してください。これは原点が既に移動しているためです。
-
- ctx.clip();
-
-canvas を {{domxref("CanvasRenderingContext2D.clip","clip()")}} します。rect() が描画された直後にこれを呼ぶので、キャンバス上に対して行うことは rect() の内側に制限され、restore() が呼び出されるまですべてのオーバーフローは隠蔽されます（後述）。これは左ビュー全体が右ビューから独立したままであることを保証します。
-
- ctx.rotate(zOrient * Math.PI / 180);
-
-頭の回転と同じようにシーンを回転させるために、zOrientの値に従った回転が画像に適用します。
-
- ctx.drawImage(image,-(WIDTH/4)+lCtrOffset-((image.width)/(2*(1/zPos)))+xPos-yOrient,-((image.height)/(2*(1/zPos)))+yPos+xOrient,image.width*zPos,image.height*zPos);
-
-実際に画像を描画しましょう! この少し厄介なコードを、ここでは引数ごとに分解してみましょう:
-
-
-
- ctx.strokeStyle = "black";
- ctx.stroke();
-
-左目ビューの周囲に黒い {{domxref("CanvasRenderingContext2D.stroke","stroke()")}} を描画します。これはビューの分離をちょっとだけわかりやすくする手助けとなります。
-
- ctx.restore();
-
-右目ビューの描画の実施に移行するため、キャンバスの復元を {{domxref("CanvasRenderingContext2D.restore","restore()")}} で行います。
-
- ...
-}
-
-
-
注記: ここである種のチートをしていて，2D キャンバスを使って3Dシーンを擬似的に表現しています。学習目的の場合、物事を簡単にすることができます。WEBテクノロジで作成された任意のアプリで、ビューレンダリングを修正するために上述した位置と向きのデータを使うことができます。例えば 3Dpositionorientation デモでは、Three.js を使って作成されたWebGLシーンのビューを制御するために上述の方法と非常によく似たコードを使っています。
-
フルスクリーン表示
-
-VRエフェクトはアプリを フルスクリーンモード で実行すると非常に効果的です。ディスプレイのダブルクリックやボタンの押下のような、特定のイベントが発生した時に {{htmlelement("canvas")}} 要素をフルスクリーンにするための一般的な設定を説明します。
-
-シンプルさを保つために、ここではキャンバスのクリック時に fullScreen() 関数を実行します:
-
-myCanvas.addEventListener('click',fullScreen,false);
-
-fullScreen() 関数は、できるだけ互換性を保つために、ブラウザによって異なるキャンバスに実装されている requestFullscreen() メソッドのバージョンをチェックして、見つかった適切な関数を呼び出します:
-
-function fullScreen() {
- if (myCanvas.requestFullscreen) {
- myCanvas.requestFullscreen();
- } else if (myCanvas.msRequestFullscreen) {
- myCanvas.msRequestFullscreen();
- } else if (myCanvas.mozRequestFullScreen) {
- myCanvas.mozRequestFullScreen();
- } else if (myCanvas.webkitRequestFullscreen) {
- myCanvas.webkitRequestFullscreen();
- }
-}
-
-FOV とデバイスのキャリブレーション
-
-現在のデモではあまり考えませんでしたが，商用アプリでは，ユーザが持っているVRハードウェアを正しく動作させるためにユーザキャリブレーションをする必要があるでしょう．WebVR API はそれを手助けする多くの機能があります。
-
-HMDの位置と姿勢をリセットするために {{domxref("PositionSensorVRDevice.resetSensor")}} メソッドを利用できます。実行すると、現在のヘッドセットの位置/向きが 0 にセットされます。実行前に，ヘッドセットが検知可能な位置にあることを保証する必要があります。positionsensorvrdevice demo*** では、[Reset Sensor] ボタンでそれを実行することができます:
-
-<button>Reset Sensor</button>
-
-document.querySelector('button').onclick = function() {
- gPositionSensor.resetSensor();
-}
-
-他にもヘッドセットの視野角 (FOV) を、シーン内で上，右，下，左方向に見える範囲がどの程度かキャリブレーションします。それぞれの目のパラメータを別々に返す {{domxref("HMDVRDevice.getEyeParameters")}} メソッドを呼ぶと、両目それぞれの情報を個別に受け取ることができます。なお左目用パラメータで 1 回、右目用で 1 回の計 2 回の呼出しが必要です。それぞれの目用に {{domxref("VREyeParameters")}} オブジェクトを返します。
-
-一例として、 {{domxref("VREyeParameters.currentFieldOfView")}} を用いて片目分の現在のFOV を受け取れます。これは次の 4 つのプロパティを持つ {{domxref("VRFieldOfView")}} オブジェクトを返します:
-
-
- - {{domxref("VRFieldOfViewReadOnly.upDegrees","upDegrees")}}: FOVの上方向へ広がる角度の値．
- - {{domxref("VRFieldOfViewReadOnly.rightDegrees","rightDegrees")}}: FOVの右方向へ広がる角度の値．
- - {{domxref("VRFieldOfViewReadOnly.downDegrees","downDegrees")}}: FOVの下方向へ広がる角度の値．
- - {{domxref("VRFieldOfViewReadOnly.leftDegrees","leftDegrees")}}: FOVの左方向へ広がる角度の値．
-
-
-FOVは眼を頂点としたピラミッド形になっています．
-
-あなたのアプリに適切なFOVをユーザが持っているかをチェックし，もしそうでないなら {{domxref("HMDVRDevice.setFieldOfView")}} メソッドを使って新しいFOVを設定します．これを扱う簡単な関数は次のような感じです:
-
-function setCustomFOV(up,right,down,left) {
- var testFOV = new VRFieldOfView(up,right,down,left);
-
- gHMD.setFieldOfView(testFOV,testFOV,0.01,10000.0);
-}
-
-この関数は引数として4つの角度を受け取り、VRFieldOfView() コンストラクタを用いて新しい {{domxref("VRFieldOfView")}} オブジェクトを作成します。これを setFieldOfView() の最初の2つの引数（左目と右目のFOV）として渡します。第 3、4 引数は，FOV のオブジェクト可視領域を定義する眼からの最短、最大距離を示す zNear と zFar です．
diff --git a/files/ja/web/api/webvr_api/using_the_webvr_api/index.md b/files/ja/web/api/webvr_api/using_the_webvr_api/index.md
new file mode 100644
index 00000000000000..3056ea4f462cef
--- /dev/null
+++ b/files/ja/web/api/webvr_api/using_the_webvr_api/index.md
@@ -0,0 +1,314 @@
+---
+title: WebVR APIの使い方
+slug: Web/API/WebVR_API/Using_the_WebVR_API
+translation_of: Web/API/WebVR_API/Using_the_WebVR_API
+---
+[WebVR API](/ja/docs/Web/API/WebVR_API) はウェブ開発者のツールキットへのすばらしい追加機能で、[Oculus Rift](https://developer.oculus.com/) のようなバーチャルリアリティハードウェアへのアクセスが可能となります。そして出力された動きや向きはウェブアプリの描画更新に変換されます。しかし VR アプリを開発はどのようにやればいいのでしょうか？ この記事では、それに関する基礎的な解説を行います。
+
+> **Note:** **注記**: WebVR は現在実験的な段階にあります（[最新の仕様はこちら](http://mozvr.github.io/webvr-spec/webvr.html)にあります); 今の段階でもっとも正常に動作するのは Firefox Nightly/Developer Edition で、一部の機能は Google Chrome でも動作します。詳細は Brandon Jones の [Bringing VR to Chrome](http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html) を参照してください。
+
+## 始めるには
+
+WebVR を始めるには，VR ハードウェアのマニュアルに従ったセットアップと、[WebVR environment setup](/ja/docs/Web/API/WebVR_API/WebVR_environment_setup) に示されているコンピュータへの設定が必要になります、スムースな動作には専用 GPU が推奨されます。
+
+[Firefox Nightly](https://nightly.mozilla.org/) (または [Developer Edition](https://www.mozilla.org/en-US/firefox/developer/)) のインストールと合わせて [WebVR Enabler Add-on](http://www.mozvr.com/downloads/webvr-addon-0.1.0.xpi) も必要となります。
+
+いちど環境が設定できたら、テストのために私たちの [MozVR projects](http://mozvr.com/projects/) を開いて、\[Enter VR**]** ボタンをクリックすることを試してください。
+
+> **Note:** **注記**: より深い情報のために，[WebVR environment setup](/ja/docs/Web/API/WebVR_API/WebVR_environment_setup) をチェックしてください。
+
+> **Note:** **注記**: モバイルデバイスを HMD として用いるような安価な選択肢もあります。この場合，位置センサは利用できませんので、代わりに [deviceorientation API](/ja/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes) を用いて擬似的な向きデータを使う必要があるかもしれません。
+
+## 簡単なデモ
+
+WebVR のデモは [MozVR team repo](https://github.com/MozVR/) や [MDN webvr-tests repo](https://github.com/mdn/webvr-tests) にたくさんありますが、この記事では、主に[positionsensorvrdevice](https://github.com/mdn/webvr-tests/tree/gh-pages/positionsensorvrdevice) について ([動作しているデモ](http://mdn.github.io/webvr-tests/positionsensorvrdevice/)) を例に解説します。
+
+
+
+これは簡単な 2.5D のデモで，[HTML5 Canvas](/ja/docs/Web/HTML/Element/canvas) にレンダリングされた Firefox ロゴが右目と左目のビューに表示されるものです．VR HMD でデモを見ているときにキャンバスをクリックすると、デモはフルスクリーンになり、Firefox ロゴに近づけるようになります。あなたが動くと頭の動きに合わせて上下左右や回転してリアルに動きます。
+
+あなたが WebVR のコードがどう動いているかを簡単に確認できるように、デモは意図的にシンプルになるよう保持されています。API は十分シンプルであるため，単純な DOM ベースインターフェイスでも複雑な WebGL シーンでも、好きなアプリに WebVR 制御の移動を簡単に適用できます。
+
+## アプリはどう動く?
+
+このセクションでは、アプリを動作させるために必要なコードの変更箇所を通じて、基礎的なレベルで何が必要かを知ることができます。
+
+### VR デバイスへのアクセス
+
+最初にコンピュータに接続中の VR ハードウェアへのプログラム的な参照を取得します。それには接続中の全 VR デバイスの配列へと解決できるプロミスを返す {{domxref("Navigator.getVRDevices")}} を使います。
+
+返される可能性のあるオブジェクトが 2 種類あります:
+
+- {{domxref("PositionSensorVRDevice")}}: 位置センサカメラ。
+- {{domxref("HMDVRDevice")}}: VR ヘッドマウントディスプレイ。
+
+[vrdevice demo](https://github.com/mdn/webvr-tests/tree/gh-pages/vrdevice) で基本的なデバイス情報を表示するための非常に簡単なコードを見ることができます。
+
+本当に欲しいものはデバイスのペアを取得するものです (将来のマルチプレイヤ VR ゲームでは複数のペアになるかもですが)。WebVR 仕様からもってきた（そして [positionsensorvrdevice](https://github.com/mdn/webvr-tests/tree/gh-pages/positionsensorvrdevice) デモでも使っている）次のコードはかなりよく使うトリックです:
+
+```js
+var gHMD, gPositionSensor;
+
+navigator.getVRDevices().then(function(devices) {
+ for (var i = 0; i < devices.length; ++i) {
+ if (devices[i] instanceof HMDVRDevice) {
+ gHMD = devices[i];
+ break;
+ }
+ }
+
+ if (gHMD) {
+ for (var i = 0; i < devices.length; ++i) {
+ if (devices[i] instanceof PositionSensorVRDevice && devices[i].hardwareUnitId === gHMD.hardwareUnitId) {
+ gPositionSensor = devices[i];
+ break;
+ }
+ }
+ }
+});
+```
+
+最初に見つかった {{domxref("HMDVRDevice")}} のインスタンスを取得し、それを `gHMD` 変数へ保存します．次に見つかった {{domxref("PositionSensorVRDevice")}} のインスタンスを取得して `gPositionSensor` 変数に代入していますが，それは先ほど取得した `gHMD` オブジェクトの {{domxref("VRDevice.hardWareUnitId")}} プロパティが一致するものだけを対象にしています。同一のハードウェアは複数のデバイスとして取得されますが、それらはハードウェアユニット ID を共有しています — これは取得した 2 つのデバイスの参照がマッチングしているかをチェックする方法です。
+
+### アプリの初期化
+
+シーンを描画する {{htmlelement("canvas")}} 要素を次のように作成し、配置します:
+
+```js
+var myCanvas = document.createElement('canvas');
+var ctx = myCanvas.getContext('2d');
+var body = document.querySelector('body');
+body.appendChild(myCanvas);
+```
+
+次に、新しい [image](/ja/docs/Web/API/HTMLImageElement) を作成し、アプリの [main loop](/ja/docs/Games/Anatomy#Building_a_main_loop_in_JavaScript) である`draw()を実行する前に `image が `ロードされているかをチェックするために` {{event("load")}} イベントを使います:
+
+```js
+var image = new Image();
+image.src = 'firefox.png';
+image.onload = draw;
+```
+
+### メインループ
+
+`draw()` は次のように実装します:
+
+```js
+function draw() {
+ WIDTH = window.innerWidth;
+ HEIGHT = window.innerHeight;
+ lCtrOffset = WIDTH*0.25;
+ rCtrOffset = WIDTH*0.25;
+
+ myCanvas.width = WIDTH;
+ myCanvas.height = HEIGHT;
+
+ setView();
+ drawImages();
+ drawCrosshairs();
+
+ requestAnimationFrame(draw);
+}
+```
+
+[window](/ja/docs/Web/API/Window) の `WIDTH` と `HEIGHT` は各フレームでリサンプリングされ，次の設定に使われます:
+
+- 左右の目のビュー中心からの相対的に描画される画像を維持するのに使われる左右のオフセット値です。半分の幅のシーンのコピーを描画するので、各コピーの中心はそれぞれ、エッジの端から端までのキャンバス全体幅のちょうど 1/4 の幅になります。
+- キャンバスの [width](/ja/docs/Web/API/HTMLCanvasElement/width) と [height](/ja/docs/Web/API/HTMLCanvasElement/height)。
+
+これによってブラウザウィンドウがリサイズされたとしても、シーンが正しくリサイズされます。
+
+次にメインループの中で 3 つの関数を実行しています:
+
+- `setView()` は，VR ハードウェアから位置と向きの情報を受け取り，シーン内の更新された画像位置の描画に使用する準備をします。
+- `drawImages()` はシーンを更新された位置で実際に描画します。
+- `drawCrosshairs()` は常にシーンの中央にある十字線を描画します。
+
+これらの詳細は、後ほど解説します。
+
+ループの最後に [requestAnimationFrame(draw)](/ja/docs/Web/API/window/requestAnimationFrame) を実行し`、draw()` ループが連続して呼び出されるようにします。
+
+### 位置と向き情報の受取り
+
+では `setView()` 関数の詳細を見ていきましょう。コードの各部分を順に追って、そこで何をしているかを説明します:
+
+```js
+function setView() {
+ var posState = gPositionSensor.getState();
+```
+
+位置センサへの参照を使って {{domxref("PositionSensorVRDevice.getState")}} を呼び出します。このメソッドは、あなたが知りたい現在の HMD の状態のすべてを返します — {{domxref("VRPositionState")}} オブジェクトへのアクセスを通じて — 位置、向き、そして速度/ 加速度や角速度 / 角加速度のようなより高度な情報を含んでいます。
+
+```js
+ if(posState.hasPosition) {
+ posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
+ + roundToTwo(posState.position.y) + " z"
+ + roundToTwo(posState.position.z);
+ xPos = -posState.position.x * WIDTH * 2;
+ yPos = posState.position.y * HEIGHT * 2;
+ if(-posState.position.z > 0.01) {
+ zPos = -posState.position.z;
+ } else {
+ zPos = 0.01;
+ }
+ }
+```
+
+HMD のスイッチが OFF にされたり位置センサを向いていなかったりした場合など、アプリがエラーになったり停止したりしないように、 {{domxref("VRPositionState.hasPosition")}} を使って HMD の正常な位置情報が利用可能かを確認する方法をチェックします。
+
+そして通知を目的として、アプリの UI 内のパラグラフへ現在の位置情報を出力します。読みやすくするために、カスタム関数を使って小数点以下 2 桁に丸めています。
+
+最後に {{domxref("VRPositionState.position")}} に格納されている位置情報に関して、`xPos`、 `yPos`、`zPos` 変数に代入します。`zPos` の値を 0.01 以上にするのに `if ... else` ブロックが利用されていることに気付くでしょう — このアプリは 0 以下になると例外を投げていました。
+
+```js
+ if(posState.hasOrientation) {
+ orientPara.textContent = 'Orientation: x' + roundToTwo(posState.orientation.x) + " y"
+ + roundToTwo(posState.orientation.y) + " z"
+ + roundToTwo(posState.orientation.z);
+ xOrient = posState.orientation.x * WIDTH;
+ yOrient = -posState.orientation.y * HEIGHT * 2;
+ zOrient = posState.orientation.z * 180;
+
+ }
+```
+
+次に同じような処理をして、HMD の向きに応じてシーンの更新処理をします — {{domxref("VRPositionState.hasOrientation")}} を使って有効な向きデータかをチェックして，向きのデータを通知用の UI に表示し、`xOrient`、`yOrient`、`zOrient` の値を {{domxref("VRPositionState.orientation")}} に格納されている値から設定します．
+
+ timePara.textContent = 'Timestamp: ' + Math.floor(posState.timeStamp);
+ }
+
+最後に {{domxref("VRPositionState.timeStamp")}} に格納されている現在のタイムスタンプを通知 UI に出力します。この値は位置データが更新済みか、どんな順序で更新が発生したかを判断するのに役立ちます。
+
+### シーンの更新
+
+`setView()` で取得された `xPos`、`yPos`、`zPos`、`xOrient`、`yOrient`、`zOrient` の値は、`drawImages() `で行われるシーン病がの更新のための変更値として使用されます。どうやっているかを見ていきますが、左目のビューの描画コードだけをウォークスルーしていきます。右目については、右にオーバーシフトしている以外はほぼ同じです:
+
+```js
+function drawImages() {
+ ctx.fillStyle = 'white';
+ ctx.fillRect(0,0,WIDTH,HEIGHT);
+```
+
+最初に次のフレームが描画される前にシーンをクリアするため、白い {{domxref("CanvasRenderingContext2D.fillRect","fillRect()")}} を描画します。
+
+```js
+ ctx.save();
+ ctx.beginPath();
+ ctx.translate(WIDTH/4,HEIGHT/2);
+ ctx.rect(-(WIDTH/4),-(HEIGHT/2),WIDTH/2,HEIGHT);
+```
+
+次に左目のビューを別の画像として扱って右目のビューに影響を与えないコードにするので、 {{domxref("CanvasRenderingContext2D.save","save()")}} でコンテキスト状態を保存します。
+
+そして {{domxref("CanvasRenderingContext2D.beginPath","pathを開始し")}}, {{domxref("CanvasRenderingContext2D.translate","canvasを変換します")}}、これによって原点を左目の中心（全体の 1/4 幅で半分の高さ）に移動させます。回転を正しく動かすためにもこれは必要です。回転は canvas の原点が中心となります。そして左目のビュー全体を覆うように {{domxref("CanvasRenderingContext2D.rect","rect()")}} を描画します。
+
+`rect()` はマイナスの 1/4 幅，マイナスの 1/2 高さから描画し始めていることに注意してください。これは原点が既に移動しているためです。
+
+ ctx.clip();
+
+canvas を {{domxref("CanvasRenderingContext2D.clip","clip()")}} します。`rect()` が描画された直後にこれを呼ぶので、キャンバス上に対して行うことは `rect() の内側に制限され`、`restore()` が呼び出されるまですべてのオーバーフローは隠蔽されます（後述）。これは左ビュー全体が右ビューから独立したままであることを保証します。
+
+```js
+ ctx.rotate(zOrient * Math.PI / 180);
+```
+
+頭の回転と同じようにシーンを回転させるために、zOrient の値に従った回転が画像に適用します。
+
+```js
+ ctx.drawImage(image,-(WIDTH/4)+lCtrOffset-((image.width)/(2*(1/zPos)))+xPos-yOrient,-((image.height)/(2*(1/zPos)))+yPos+xOrient,image.width*zPos,image.height*zPos);
+```
+
+実際に画像を描画しましょう! この少し厄介なコードを、ここでは引数ごとに分解してみましょう:
+
+- `image`: 描画する画像
+- `-(WIDTH/4)+lCtrOffset-((image.width)/(2*(1/zPos)))+xPos-yOrient`: 画像原点の水平座標。前に行った平行移動を打ち消すために `WIDTH/4` を引きます．そして中心に戻すために左中心オフセットを加えて，画像幅を `zPos` の逆数の 2 倍で割ったものを引きます— 描画する画像が小さい（大きい）ほど減算値が小さい（大きい）くなり，画像中心が保持されます．最後に，HMD の水平方向の動きや回転にあわせて画像位置を更新するために `xPos` を加えて，`yOrient` を引きます（y 軸周りの回転が画像を水平方向に移動します)。
+- `-((image.height)/(2*(1/zPos)))+yPos+xOrient`: 画像原点の垂直方向の座標です。これは In this case the "HEIGHT/2 の減算"と"右中心オフセットの追加"は、ちょうどお互いにキャンセルされるので、計算式から取り除きます。計算式の残りは上と同じように、zPos の逆数の 2 倍で画像幅を割ったものを減算することによる画像中心を保持と、`yPos` と `xOrient `による描画位置の修正です。
+- `image.width*zPos`: 画像を描画する幅; 近いものほど大きく描画されるように `zPos` で修正します。
+- `image.height*zPos`: 画像を描画する高さ; 近いものほど大きく描画されるように `zPos` で修正します。
+
+```js
+ ctx.strokeStyle = "black";
+ ctx.stroke();
+```
+
+左目ビューの周囲に黒い {{domxref("CanvasRenderingContext2D.stroke","stroke()")}} を描画します。これはビューの分離をちょっとだけわかりやすくする手助けとなります。
+
+```js
+ ctx.restore();
+```
+
+右目ビューの描画の実施に移行するため、キャンバスの復元を {{domxref("CanvasRenderingContext2D.restore","restore()")}} で行います。
+
+```js
+ ...
+}
+```
+
+> **Note:** **注記**: ここである種のチートをしていて，2D キャンバスを使って 3D シーンを擬似的に表現しています。学習目的の場合、物事を簡単にすることができます。WEB テクノロジで作成された任意のアプリで、ビューレンダリングを修正するために上述した位置と向きのデータを使うことができます。例えば [3Dpositionorientation](https://github.com/mdn/webvr-tests/tree/gh-pages/3Dpositionorientation) デモでは、[Three.js](http://threejs.org/) を使って作成された WebGL シーンのビューを制御するために上述の方法と非常によく似たコードを使っています。
+
+> **Note:** **注記**: [`drawCrosshairs() のコード`](https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html#L106-L119) は `drawImages()と比較して`非常にシンプルですので、もし興味があるなら自分自身で勉強することをおすすめします!
+
+### フルスクリーン表示
+
+VR エフェクトはアプリを [フルスクリーンモード](/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode) で実行すると非常に効果的です。ディスプレイのダブルクリックやボタンの押下のような、特定のイベントが発生した時に {{htmlelement("canvas")}} 要素をフルスクリーンにするための一般的な設定を説明します。
+
+シンプルさを保つために、ここではキャンバスのクリック時に `fullScreen()` 関数を実行します:
+
+```js
+myCanvas.addEventListener('click',fullScreen,false);
+```
+
+`fullScreen()` 関数は、できるだけ互換性を保つために、ブラウザによって異なるキャンバスに実装されている `requestFullscreen()` メソッドのバージョンをチェックして、見つかった適切な関数を呼び出します:
+
+```js
+function fullScreen() {
+ if (myCanvas.requestFullscreen) {
+ myCanvas.requestFullscreen();
+ } else if (myCanvas.msRequestFullscreen) {
+ myCanvas.msRequestFullscreen();
+ } else if (myCanvas.mozRequestFullScreen) {
+ myCanvas.mozRequestFullScreen();
+ } else if (myCanvas.webkitRequestFullscreen) {
+ myCanvas.webkitRequestFullscreen();
+ }
+}
+```
+
+## FOV とデバイスのキャリブレーション
+
+現在のデモではあまり考えませんでしたが，商用アプリでは，ユーザが持っている VR ハードウェアを正しく動作させるためにユーザキャリブレーションをする必要があるでしょう．WebVR API はそれを手助けする多くの機能があります。
+
+HMD の位置と姿勢をリセットするために {{domxref("PositionSensorVRDevice.resetSensor")}} メソッドを利用できます。実行すると、現在のヘッドセットの位置/向きが 0 にセットされます。実行前に，ヘッドセットが検知可能な位置にあることを保証する必要があります。positionsensorvrdevice demo\*\*\* では、\[Reset Sensor] ボタンでそれを実行することができます:
+
+```html
+
+```
+
+```js
+document.querySelector('button').onclick = function() {
+ gPositionSensor.resetSensor();
+}
+```
+
+他にもヘッドセットの視野角 (FOV) を、シーン内で上，右，下，左方向に見える範囲がどの程度かキャリブレーションします。それぞれの目のパラメータを別々に返す {{domxref("HMDVRDevice.getEyeParameters")}} メソッドを呼ぶと、両目それぞれの情報を個別に受け取ることができます。なお左目用パラメータで 1 回、右目用で 1 回の計 2 回の呼出しが必要です。それぞれの目用に {{domxref("VREyeParameters")}} オブジェクトを返します。
+
+一例として、 {{domxref("VREyeParameters.currentFieldOfView")}} を用いて片目分の現在の FOV を受け取れます。これは次の 4 つのプロパティを持つ {{domxref("VRFieldOfView")}} オブジェクトを返します:
+
+- {{domxref("VRFieldOfViewReadOnly.upDegrees","upDegrees")}}: FOV の上方向へ広がる角度の値．
+- {{domxref("VRFieldOfViewReadOnly.rightDegrees","rightDegrees")}}: FOV の右方向へ広がる角度の値．
+- {{domxref("VRFieldOfViewReadOnly.downDegrees","downDegrees")}}: FOV の下方向へ広がる角度の値．
+- {{domxref("VRFieldOfViewReadOnly.leftDegrees","leftDegrees")}}: FOV の左方向へ広がる角度の値．
+
+FOV は眼を頂点としたピラミッド形になっています．
+
+あなたのアプリに適切な FOV をユーザが持っているかをチェックし，もしそうでないなら {{domxref("HMDVRDevice.setFieldOfView")}} メソッドを使って新しい FOV を設定します．これを扱う簡単な関数は次のような感じです:
+
+```js
+function setCustomFOV(up,right,down,left) {
+ var testFOV = new VRFieldOfView(up,right,down,left);
+
+ gHMD.setFieldOfView(testFOV,testFOV,0.01,10000.0);
+}
+```
+
+この関数は引数として 4 つの角度を受け取り、VRFieldOfView() コンストラクタを用いて新しい {{domxref("VRFieldOfView")}} オブジェクトを作成します。これを `setFieldOfView()` の最初の 2 つの引数（左目と右目の FOV）として渡します。第 3、4 引数は，FOV のオブジェクト可視領域を定義する眼からの最短、最大距離を示す `zNear` と `zFar` です．
diff --git a/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html b/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html
deleted file mode 100644
index 19bd26ad2dcfe6..00000000000000
--- a/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: WebVRでの VRコントローラーの使用
-slug: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
-tags:
- - Experimental
- - Gamepad API
- - Guide
- - VR
- - Virtual Reality
- - WebGL
- - WebVR
- - controllers
-translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
----
-{{APIRef("WebVR API")}}
-
-多くのWebVRハードウェアは、ヘッドセットとコントローラーがセットになっています。WebVRアプリにおいては、ヘッドセットとコントローラーはGamepad APIを通じて接続されます。中でも、Gamepad Extensions APIは、コントローラーの状態(controller pose)、触覚アクチュエータ(haptic actuators)などの情報を取得します。この記事では、その基礎となる部分を解説いたします。
-
-The WebVR API
-
-WebVR API は初期段階ではあるが、開発者がウェブベースのバーチャルリアリティー経験を生み出すことのできるとても興味深いウェブの新しい機能です。コンピュータとつながっているVRヘッドセット（VRディスプレイ）へのアクセスを与えることで，ディスプレイをスタートしたり、ストップする操作ができます．動きのデータ（例：方向や位置）へアクセスして得られたデータは，各アニメーションループのフレームごとにディスプレイをアップデートするためなどに使用されます。
-
-この記事を読む前提として、Web VR API の基礎についてすでに知っていることを想定しています。 — もしまだUsing the WebVR APIにを読んでいない場合には、まずはそちらを読んでみましょう．その記事の中では，ブラウザ側がハードウェアの設定をサポートしたり，設定を要求したりすることについて詳しく説明しています。
-
-The Gamepad API
-
-Gamepad API はよくサポートされたAPIであり， これを使用することでPCにつながっているゲームパッドやコントローラーに開発者がアクセスすることができるようになります。また、ウェブアプリケーションをゲームパッドやコントローラーを通じて操作することもできるようになります。基本としてGamepad APIは、ゲームパッドオブジェクトとしてつながっているコントローラーに対してアクセスの許可を与えます。そしてどのボタンが押されているか、軸がどの方向に向いているかなどの情報を取得するよう要求します。
-
-Gamepad APIの基本的な使い方については、Using the Gamepad APIやImplementing controls using the Gamepad APIの中で詳しく知ることができます。
-
-しかしながら，この記事では主に、位置、方向、触覚アクチュエーター（バイブレーション）などの高度なコントローラー情報へのアクセスのような、Gamepad Extensions APIで与えられたいくつかの新しい特徴に注目します。このAPIはとても新しく，Firefox 55+ BetaやFirefox Nightly のブラウザでのみデフォルトでWebVR APIがサポートされています。
-
-コントローラーの種類
-
-VRハードウェアに付随するコントローラーには、２つの種類があります。
-
-
- - ６軸に対して自由度を持つコントローラーは位置と方向のデータを取得することができる。具体的には、コントローラーがVRシーンや動きや回転のある物体を操作することができる。例えば、HTC VIVEのコントローラーがそれにあたる。
- - ３軸に対して自由度を持つコントローラーは、位置データは取得できないが方向のデータを取得することができる．例えば Google Daydreamのコントローラーである。具体的には、3D空間で異なる物体をレーザーポインターのように指し示すことはできるが、3D空間を動き回ることはできない。
-
-
-コントローラーへのアクセス方法
-
-ここではいくつかのコードを紹介します。まず、Gamepad APIを使用してVRコントローラーへの基本的なアクセス方法を見ていきましょう。いくつかのおかしなニュアンスを心に留めておきましょう、それは後から調べる価値があるものです。
-
-シンプルな例を紹介します。-vr-controller-basic-info のソースコード(see it running live here also)を御覧ください。この例はVRディスプレイやコンピューターと接続したゲームコントローラーへ情報を出力するシンプルなものです。
-
-ディスプレイの情報を取得
-
-最初のコードです。
-
-var initialRun = true;
-
-if(navigator.getVRDisplays && navigator.getGamepads) {
- info.textContent = 'WebVR API and Gamepad API supported.'
- reportDisplays();
-} else {
- info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.'
-}
-
-ここでは、initialRun というトラッキングの変数を使います。これは、「このページを初めてロードした」ことを示します。この点については、あとで詳しく述べます。次に、{{domxref("Navigator.getVRDisplays()")}} と {{domxref("Navigator.getGamepads()")}}メソッドがあるかないかをチェックして、WebVR と Gamepad APIs がサポートされているかどうかを検知します。もし、サポートされていれば、検知するプロセスをOFFにするために、カスタム機能である reportDisplays() を実行します。 reportDisplays() は、以下のような構成になっています。
-
-function reportDisplays() {
- navigator.getVRDisplays().then(function(displays) {
- console.log(displays.length + ' displays');
- for(var i = 0; i < displays.length; i++) {
- var cap = displays[i].capabilities;
- // cap is a VRDisplayCapabilities object
- var listItem = document.createElement('li');
- listItem.innerHTML = '<strong>Display ' + (i+1) + '</strong>'
- + '<br>VR Display ID: ' + displays[i].displayId
- + '<br>VR Display Name: ' + displays[i].displayName
- + '<br>Display can present content: ' + cap.canPresent
- + '<br>Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
- + '<br>Display can return position info: ' + cap.hasPosition
- + '<br>Display can return orientation info: ' + cap.hasOrientation
- + '<br>Display max layers: ' + cap.maxLayers;
- list.appendChild(listItem);
- }
-
- setTimeout(reportGamepads, 1000);
- // For VR, controllers will only be active after their corresponding headset is active
- });
-}
-
-This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.
-
-The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the reportGamepads() function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after getVRDisplays() has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the getGamepads() method is synchronous, and just returns the Gamepad objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).
-
-ゲームコントローラーの情報を取得
-
-reportGamepads() 関数は、このような構成になっています。
-
-function reportGamepads() {
- var gamepads = navigator.getGamepads();
- console.log(gamepads.length + ' controllers');
- for(var i = 0; i < gamepads.length; ++i) {
- var gp = gamepads[i];
- var listItem = document.createElement('li');
- listItem.classList = 'gamepad';
- listItem.innerHTML = '<strong>Gamepad ' + gp.index + '</strong> (' + gp.id + ')'
- + '<br>Associated with VR Display ID: ' + gp.displayId
- + '<br>Gamepad associated with which hand: ' + gp.hand
- + '<br>Available haptic actuators: ' + gp.hapticActuators.length
- + '<br>Gamepad can return position info: ' + gp.pose.hasPosition
- + '<br>Gamepad can return orientation info: ' + gp.pose.hasOrientation;
- list.appendChild(listItem);
- }
- initialRun = false;
-}
-
-This works in a similar manner to reportDisplays() — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based getGamepads() method, then cycle through each one and print out information on each:
-
-
- - The {{domxref("Gamepad.displayId")}} property is the same as the
displayId of the headet the controller is associated with, and therefore useful for tying controller and headset information together.
- - The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.
- - {{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.
- - {{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.
- - Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.
-
-
-Note that we also gave each list item containing controller information a class name of gamepad. We'll explain what this is for later.
-
-The last thing to do here is set the initialRun variable to false, as the initial run is now over.
-
-コントローラーのイベント
-
-To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.
-
-At the end of our example we first include the removeGamepads() function:
-
-function removeGamepads() {
- var gpLi = document.querySelectorAll('.gamepad');
- for(var i = 0; i < gpLi.length; i++) {
- list.removeChild(gpLi[i]);
- }
-
- reportGamepads();
-}
-
-This function simply grabs references to all list items with a class name of gamepad, and removes them from the DOM. Then it re-runs reportGamepads() to populate the list with the updated list of connected controllers.
-
-removeGamepads() will be run each time a gamepad is connected or disconnected, via the following event handlers:
-
-window.addEventListener('gamepadconnected', function(e) {
- info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.';
- if(!initialRun) {
- setTimeout(removeGamepads, 1000);
- }
-});
-
-window.addEventListener('gamepaddisconnected', function(e) {
- info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.';
- setTimeout(removeGamepads, 1000);
-});
-
-We have setTimeout() calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when reportGamepads() is called in each case.
-
-But there's one more thing to note — you'll see that inside the gamepadconnected handler, the timeout is only run if initialRun is false. This is because if your gamepads are connected when the document first loads, gamepadconnected is fired once for each gamepad, therefore removeGamepads()/reportGamepads() will be run several times. This could lead to inaccurate results, therefore we only want to run removeGamepads() inside the gamepadconnected handler after the initial run, not during it. This is what initialRun is for.
-
-実際のデモの紹介
-
-実際のWebVRのデモで使用されたGamepad APIを見てみましょう。このデモはraw-webgl-controller-example (see it live here also).で見ることができます。
-
-私達のraw-webgl-example (詳しくは Using the WebVR API を御覧ください。)と同じ方法で、このデモにおいても回転する3D立方体をレンダリングしています。また、これをVRディスプレイへ投影することもできます。
-
-唯一の違いとしては、VRディスプレイへ投影モードでは、VRコントローラーを使って立方体を動かすことができます。（オリジナルのデモ動画では、VRヘッドセットを動かすことで、立方体を動かすことができる。）
-
-以下に、このバージョンでのコードの違いをより詳しく紹介します。webgl-demo.js.を御覧ください。
-
-コントローラーデータへのアクセス
-
-drawVRScene() 関数についてのコードの一部です。
-
-var gamepads = navigator.getGamepads();
-var gp = gamepads[0];
-
-if(gp) {
- var gpPose = gp.pose;
- var curPos = gpPose.position;
- var curOrient = gpPose.orientation;
- if(poseStatsDisplayed) {
- displayPoseStats(gpPose);
- }
-}
-
- {{domxref("Navigator.getGamepads")}}を利用して、コントローラーが接続されました。また gp 変数の中に最初に認識したコントローラーを保存します。 デモでは、コントローラーを一つしか使用しないので、その他のコントローラーは無視します。
-
-The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the displayPoseStats() function. All of this is only done if gp actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.
-
-Slightly later in the code, you can find this block:
-
-if(gp && gpPose.hasPosition) {
- mvTranslate([
- 0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
- 0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
- -15.0 + (curPos[2] * 25)
- ]);
-} else if(gp) {
- mvTranslate([
- 0.0 + (curOrient[1] * 15),
- 0.0 + (curOrient[0] * 15),
- -15.0
- ]);
-} else {
- mvTranslate([
- 0.0,
- 0.0,
- -15.0
- ]);
-}
-
-Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in curPos and curOrient) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using [0] which is X, and [1] which is Y).
-
-If the gp variable has a Gamepad object inside it and it can return position values (gpPose.hasPosition), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.
-
-コントローラーの姿勢データの表示
-
-displayPoseStats() 関数では、{{domxref("GamepadPose")}} オブジェクトのうちの表示したいすべての情報を取得することができます。そして、そのようなデータを表示するためのデモの中に存在するUI パネルに表示します。
-
-function displayPoseStats(pose) {
- var pos = pose.position;
- var orient = pose.orientation;
- var linVel = pose.linearVelocity;
- var linAcc = pose.linearAcceleration;
- var angVel = pose.angularVelocity;
- var angAcc = pose.angularAcceleration;
-
- if(pose.hasPosition) {
- posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
- } else {
- posStats.textContent = 'Position not reported';
- }
-
- if(pose.hasOrientation) {
- orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
- } else {
- orientStats.textContent = 'Orientation not reported';
- }
-
- linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
- angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
-
- if(linAcc) {
- linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
- } else {
- linAccStats.textContent = 'Linear acceleration not reported';
- }
-
- if(angAcc) {
- angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
- } else {
- angAccStats.textContent = 'Angular acceleration not reported';
- }
-}
-
-まとめ
-
-この記事は，WebVRアプリの中でVRコントローラーを使うためには，どのようにGamepad Extensionsを用いればよいのかというとても基本的な概念を解説したものです．実際のWebVRアプリの中では，VRコントローラーのボタンに紐付けられたコントローラーにより，おそらくより複雑なコントロールシステムをもたせることになるでしょう． そして，ディスプレイとコントローラーの両方の情報（位置や方向）を同期的にディスプレイへフィードバックするという複雑な処理を行うことになります．しかし，この記事でやりたかったのは，Gamepad Extensionsの中の純粋なGamepad Extensions部分を切り分けるということです．
-
-関連項目
-
-
diff --git a/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.md b/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
new file mode 100644
index 00000000000000..1ec7d2d1496ef8
--- /dev/null
+++ b/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
@@ -0,0 +1,278 @@
+---
+title: WebVRでの VRコントローラーの使用
+slug: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
+tags:
+ - Experimental
+ - Gamepad API
+ - Guide
+ - VR
+ - Virtual Reality
+ - WebGL
+ - WebVR
+ - controllers
+translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
+---
+{{APIRef("WebVR API")}}
+
+多くの WebVR ハードウェアは、ヘッドセットとコントローラーがセットになっています。WebVR アプリにおいては、ヘッドセットとコントローラーは[Gamepad API](/ja/docs/Web/API/Gamepad_API)を通じて接続されます。中でも、[Gamepad Extensions API](/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions)は、コントローラーの状態([controller pose](/ja/docs/Web/API/GamepadPose))、触覚アクチュエータ([haptic actuators](/ja/docs/Web/API/GamepadHapticActuator))などの情報を取得します。この記事では、その基礎となる部分を解説いたします。
+
+## The WebVR API
+
+[WebVR API](/ja/docs/Web/API/WebVR_API) は初期段階ではあるが、開発者がウェブベースのバーチャルリアリティー経験を生み出すことのできるとても興味深いウェブの新しい機能です。コンピュータとつながっている VR ヘッドセット（VR ディスプレイ）へのアクセスを与えることで，ディスプレイをスタートしたり、ストップする操作ができます．動きのデータ（例：方向や位置）へアクセスして得られたデータは，各アニメーションループのフレームごとにディスプレイをアップデートするためなどに使用されます。
+
+この記事を読む前提として、Web VR API の基礎についてすでに知っていることを想定しています。 — もしまだ[Using the WebVR API](/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API)にを読んでいない場合には、まずはそちらを読んでみましょう．その記事の中では，ブラウザ側がハードウェアの設定をサポートしたり，設定を要求したりすることについて詳しく説明しています。
+
+## The Gamepad API
+
+[Gamepad API](/ja/docs/Web/API/Gamepad_API) はよくサポートされた API であり， これを使用することで PC につながっているゲームパッドやコントローラーに開発者がアクセスすることができるようになります。また、ウェブアプリケーションをゲームパッドやコントローラーを通じて操作することもできるようになります。基本として Gamepad API は、ゲームパッドオブジェクトとしてつながっているコントローラーに対してアクセスの許可を与えます。そしてどのボタンが押されているか、軸がどの方向に向いているかなどの情報を取得するよう要求します。
+
+Gamepad API の基本的な使い方については、[Using the Gamepad API](/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)や[Implementing controls using the Gamepad API](/ja/docs/Games/Techniques/Controls_Gamepad_API)の中で詳しく知ることができます。
+
+しかしながら，この記事では主に、位置、方向、触覚アクチュエーター（バイブレーション）などの高度なコントローラー情報へのアクセスのような、Gamepad Extensions API で与えられたいくつかの新しい特徴に注目します。この API はとても新しく，Firefox 55+ Beta や Firefox Nightly のブラウザでのみデフォルトで WebVR API がサポートされています。
+
+## コントローラーの種類
+
+VR ハードウェアに付随するコントローラーには、２つの種類があります。
+
+- ６軸に対して自由度を持つコントローラーは位置と方向のデータを取得することができる。具体的には、コントローラーが VR シーンや動きや回転のある物体を操作することができる。例えば、HTC VIVE のコントローラーがそれにあたる。
+- ３軸に対して自由度を持つコントローラーは、位置データは取得できないが方向のデータを取得することができる．例えば Google Daydream のコントローラーである。具体的には、3D 空間で異なる物体をレーザーポインターのように指し示すことはできるが、3D 空間を動き回ることはできない。
+
+## コントローラーへのアクセス方法
+
+ここではいくつかのコードを紹介します。まず、Gamepad API を使用して VR コントローラーへの基本的なアクセス方法を見ていきましょう。いくつかのおかしなニュアンスを心に留めておきましょう、それは後から調べる価値があるものです。
+
+シンプルな例を紹介します。-[vr-controller-basic-info](https://github.com/mdn/webvr-tests/blob/master/vr-controller-basic-info/index.html) のソースコード([see it running live here also](https://mdn.github.io/webvr-tests/vr-controller-basic-info/))を御覧ください。この例は VR ディスプレイやコンピューターと接続したゲームコントローラーへ情報を出力するシンプルなものです。
+
+### ディスプレイの情報を取得
+
+最初のコードです。
+
+```js
+var initialRun = true;
+
+if(navigator.getVRDisplays && navigator.getGamepads) {
+ info.textContent = 'WebVR API and Gamepad API supported.'
+ reportDisplays();
+} else {
+ info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.'
+}
+```
+
+ここでは、`initialRun` というトラッキングの変数を使います。これは、「このページを初めてロードした」ことを示します。この点については、あとで詳しく述べます。次に、{{domxref("Navigator.getVRDisplays()")}} と {{domxref("Navigator.getGamepads()")}}メソッドがあるかないかをチェックして、WebVR と Gamepad APIs がサポートされているかどうかを検知します。もし、サポートされていれば、検知するプロセスを OFF にするために、カスタム機能である `reportDisplays()` を実行します。 `reportDisplays()` は、以下のような構成になっています。
+
+```js
+function reportDisplays() {
+ navigator.getVRDisplays().then(function(displays) {
+ console.log(displays.length + ' displays');
+ for(var i = 0; i < displays.length; i++) {
+ var cap = displays[i].capabilities;
+ // cap is a VRDisplayCapabilities object
+ var listItem = document.createElement('li');
+ listItem.innerHTML = 'Display ' + (i+1) + ''
+ + '
VR Display ID: ' + displays[i].displayId
+ + '
VR Display Name: ' + displays[i].displayName
+ + '
Display can present content: ' + cap.canPresent
+ + '
Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+ + '
Display can return position info: ' + cap.hasPosition
+ + '
Display can return orientation info: ' + cap.hasOrientation
+ + '
Display max layers: ' + cap.maxLayers;
+ list.appendChild(listItem);
+ }
+
+ setTimeout(reportGamepads, 1000);
+ // For VR, controllers will only be active after their corresponding headset is active
+ });
+}
+```
+
+This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.
+
+The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the `reportGamepads()` function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after `getVRDisplays()` has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the `getGamepads()` method is synchronous, and just returns the `Gamepad` objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).
+
+### ゲームコントローラーの情報を取得
+
+`reportGamepads()` 関数は、このような構成になっています。
+
+```js
+function reportGamepads() {
+ var gamepads = navigator.getGamepads();
+ console.log(gamepads.length + ' controllers');
+ for(var i = 0; i < gamepads.length; ++i) {
+ var gp = gamepads[i];
+ var listItem = document.createElement('li');
+ listItem.classList = 'gamepad';
+ listItem.innerHTML = 'Gamepad ' + gp.index + ' (' + gp.id + ')'
+ + '
Associated with VR Display ID: ' + gp.displayId
+ + '
Gamepad associated with which hand: ' + gp.hand
+ + '
Available haptic actuators: ' + gp.hapticActuators.length
+ + '
Gamepad can return position info: ' + gp.pose.hasPosition
+ + '
Gamepad can return orientation info: ' + gp.pose.hasOrientation;
+ list.appendChild(listItem);
+ }
+ initialRun = false;
+}
+```
+
+This works in a similar manner to `reportDisplays()` — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based `getGamepads()` method, then cycle through each one and print out information on each:
+
+- The {{domxref("Gamepad.displayId")}} property is the same as the `displayId` of the headet the controller is associated with, and therefore useful for tying controller and headset information together.
+- The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.
+- {{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.
+- {{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.
+- Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.
+
+Note that we also gave each list item containing controller information a class name of `gamepad`. We'll explain what this is for later.
+
+The last thing to do here is set the `initialRun` variable to `false`, as the initial run is now over.
+
+### コントローラーのイベント
+
+To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.
+
+At the end of our example we first include the `removeGamepads()` function:
+
+```js
+function removeGamepads() {
+ var gpLi = document.querySelectorAll('.gamepad');
+ for(var i = 0; i < gpLi.length; i++) {
+ list.removeChild(gpLi[i]);
+ }
+
+ reportGamepads();
+}
+```
+
+This function simply grabs references to all list items with a class name of `gamepad`, and removes them from the DOM. Then it re-runs `reportGamepads()` to populate the list with the updated list of connected controllers.
+
+`removeGamepads()` will be run each time a gamepad is connected or disconnected, via the following event handlers:
+
+```js
+window.addEventListener('gamepadconnected', function(e) {
+ info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.';
+ if(!initialRun) {
+ setTimeout(removeGamepads, 1000);
+ }
+});
+
+window.addEventListener('gamepaddisconnected', function(e) {
+ info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.';
+ setTimeout(removeGamepads, 1000);
+});
+```
+
+We have `setTimeout()` calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when `reportGamepads()` is called in each case.
+
+But there's one more thing to note — you'll see that inside the `gamepadconnected` handler, the timeout is only run if `initialRun` is `false`. This is because if your gamepads are connected when the document first loads, `gamepadconnected` is fired once for each gamepad, therefore `removeGamepads()`/`reportGamepads()` will be run several times. This could lead to inaccurate results, therefore we only want to run `removeGamepads()` inside the `gamepadconnected` handler after the initial run, not during it. This is what `initialRun` is for.
+
+## 実際のデモの紹介
+
+実際の WebVR のデモで使用された Gamepad API を見てみましょう。このデモは[raw-webgl-controller-example](https://github.com/mdn/webvr-tests/tree/master/raw-webgl-controller-example) ([see it live here also](https://mdn.github.io/webvr-tests/raw-webgl-controller-example/)).で見ることができます。
+
+私達の[raw-webgl-example](https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example) (詳しくは [Using the WebVR API](/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API) を御覧ください。)と同じ方法で、このデモにおいても回転する 3D 立方体をレンダリングしています。また、これを VR ディスプレイへ投影することもできます。
+
+唯一の違いとしては、VR ディスプレイへ投影モードでは、VR コントローラーを使って立方体を動かすことができます。（オリジナルのデモ動画では、VR ヘッドセットを動かすことで、立方体を動かすことができる。）
+
+以下に、このバージョンでのコードの違いをより詳しく紹介します。[webgl-demo.js](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-controller-example/webgl-demo.js).を御覧ください。
+
+### コントローラーデータへのアクセス
+
+`drawVRScene()` 関数についてのコードの一部です。
+
+```js
+var gamepads = navigator.getGamepads();
+var gp = gamepads[0];
+
+if(gp) {
+ var gpPose = gp.pose;
+ var curPos = gpPose.position;
+ var curOrient = gpPose.orientation;
+ if(poseStatsDisplayed) {
+ displayPoseStats(gpPose);
+ }
+}
+```
+
+{{domxref("Navigator.getGamepads")}}を利用して、コントローラーが接続されました。また `gp` 変数の中に最初に認識したコントローラーを保存します。 デモでは、コントローラーを一つしか使用しないので、その他のコントローラーは無視します。
+
+The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the `displayPoseStats()` function. All of this is only done if `gp` actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.
+
+Slightly later in the code, you can find this block:
+
+```js
+if(gp && gpPose.hasPosition) {
+ mvTranslate([
+ 0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
+ 0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
+ -15.0 + (curPos[2] * 25)
+ ]);
+} else if(gp) {
+ mvTranslate([
+ 0.0 + (curOrient[1] * 15),
+ 0.0 + (curOrient[0] * 15),
+ -15.0
+ ]);
+} else {
+ mvTranslate([
+ 0.0,
+ 0.0,
+ -15.0
+ ]);
+}
+```
+
+Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in `curPos` and `curOrient`) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using \[0] which is X, and \[1] which is Y).
+
+If the `gp` variable has a `Gamepad` object inside it and it can return position values (`gpPose.hasPosition`), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.
+
+### コントローラーの姿勢データの表示
+
+`displayPoseStats()` 関数では、{{domxref("GamepadPose")}} オブジェクトのうちの表示したいすべての情報を取得することができます。そして、そのようなデータを表示するためのデモの中に存在する UI パネルに表示します。
+
+```js
+function displayPoseStats(pose) {
+ var pos = pose.position;
+ var orient = pose.orientation;
+ var linVel = pose.linearVelocity;
+ var linAcc = pose.linearAcceleration;
+ var angVel = pose.angularVelocity;
+ var angAcc = pose.angularAcceleration;
+
+ if(pose.hasPosition) {
+ posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+ } else {
+ posStats.textContent = 'Position not reported';
+ }
+
+ if(pose.hasOrientation) {
+ orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+ } else {
+ orientStats.textContent = 'Orientation not reported';
+ }
+
+ linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+ angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+ if(linAcc) {
+ linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+ } else {
+ linAccStats.textContent = 'Linear acceleration not reported';
+ }
+
+ if(angAcc) {
+ angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+ } else {
+ angAccStats.textContent = 'Angular acceleration not reported';
+ }
+}
+```
+
+## まとめ
+
+この記事は，WebVR アプリの中で VR コントローラーを使うためには，どのように Gamepad Extensions を用いればよいのかというとても基本的な概念を解説したものです．実際の WebVR アプリの中では，VR コントローラーのボタンに紐付けられたコントローラーにより，おそらくより複雑なコントロールシステムをもたせることになるでしょう． そして，ディスプレイとコントローラーの両方の情報（位置や方向）を同期的にディスプレイへフィードバックするという複雑な処理を行うことになります．しかし，この記事でやりたかったのは，Gamepad Extensions の中の純粋な Gamepad Extensions 部分を切り分けるということです．
+
+## 関連項目
+
+- [WebVR API](/ja/docs/Web/API/WebVR_API)
+- [Gamepad API](/ja/docs/Web/API/Gamepad_API)
+- [Using the WebVR API](/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API)
+- [Implementing controls using the Gamepad API](/ja/docs/Games/Techniques/Controls_Gamepad_API)
diff --git a/files/ja/web/api/webxr_device_api/cameras/index.html b/files/ja/web/api/webxr_device_api/cameras/index.html
deleted file mode 100644
index b12ab61b27fecb..00000000000000
--- a/files/ja/web/api/webxr_device_api/cameras/index.html
+++ /dev/null
@@ -1,440 +0,0 @@
----
-title: '視点とビューアー: WebXR でのカメラのシミュレーション'
-slug: Web/API/WebXR_Device_API/Cameras
-tags:
- - 3D
- - API
- - AR
- - Advanced
- - Cameras
- - Coordinates
- - Guide
- - Location
- - Motion
- - Position
- - VR
- - Viewers
- - Viewpoints
- - WebGL
- - WebXR
- - WebXR API
- - WebXR Device API
- - XR
- - XRPose
- - XRView
- - XRViewerPose
- - rotation
- - transform
-translation_of: Web/API/WebXR_Device_API/Cameras
----
-{{DefaultAPISidebar("WebXR Device API")}}
-
-アプリケーションで視点とカメラを管理するためのコードを検討する際に理解する最初で最も重要なことは、WebXR にカメラがないことです。 WebGL または WebXR API によって提供される、回転して移動するだけで画面に表示されるものを自動的に変更できるビューアーを表す魔法のオブジェクトはありません。 このガイドでは、カメラを動かさずに WebGL を使用してカメラの動きをシミュレートする方法を示します。 これらの手法は、任意の WebGL（または WebXR）プロジェクトで使用できます。
-
-3D グラフィックスのアニメーション化は、コンピューターサイエンス、数学、芸術、グラフィックデザイン、運動学、解剖学、生理学、物理学、および映画撮影における複数の分野を統合するソフトウェア開発の領域です。 私たちは実際のカメラを持っていないので、実際にユーザーをシーン内で動かすことなく、カメラを持っているかのような効果を再現するカメラを想像します。
-
-WebGL と WebXR の背後にある基本的な数学、幾何学、およびその他の概念についての記事がいくつかあります。 これは、この記事を読む前または読んでいるときに役立つかもしれません。
-
-
-
-編注: この記事で使用されているほとんどの図は、標準的な動作を実行しながらカメラがどのように動くかを示すために、FilmmakerIQ ウェブサイトの記事から取られました。 つまり、ウェブ全体で見られるこの画像からです。 それらは頻繁に再利用されるため、許可されたライセンスの下で利用できると想定しているため、所有権は不明です。 私たちはそれが自由に使えることを望みます。 そうでない場合で、あなたが所有者である場合はお知らせください。 新しい図を検索または作成します。 または、画像の使用を継続してよろしければ、適切にクレジットできるようにお知らせください。
-
-カメラと相対運動
-
-古典的な実写映画を撮影する時は、俳優はセットにいて、演技しながらセットを動きまわり、1台以上のカメラでその動きを見守ります。 カメラは固定することもできますが、動き回るように設定したり、パフォーマーの動きを追跡したり、ドリーイン/アウトして感情的な影響を与えたりすることもできます。
-
-仮想カメラ
-
-WebGL（そして、拡張によって、WebXR）では、移動および回転できるカメラオブジェクトがないため、これらの動きのふりをする方法を見つける必要があります。 カメラがないので、そのふりをする方法を見つけなければなりません。 幸いなことに、ガリレオ、ニュートン、ローレンツ、アインシュタインのような物理学者は私たちに{{interwiki("wikipedia", "相対性原理")}}を与えてくれました。 それは物理学の法則がすべての参照系で同じ形であると述べています。 つまり、どこに立っていても、物理法則は同じように機能します。
-
-つまり、あなたと他の人が固い石の何もないフィールドに立っていて、目に見える限り他のものが見えない場合、あなたが他の人に向かって3メートル移動すると、他の人があなたに向かって3メートル移動した場合と同じ結果になります。 どちらにも違いを見分ける方法はありません。 第三者は違いを見分けることができますが、2人にはできません。 カメラの場合は、カメラを動かすか、カメラの周りのすべてを動かすことで、同じ視覚結果を得ることができます。
-
-そしてそれが私たちの解決策です。 カメラを動かすことができないので、カメラの周りの世界を動かします。 レンダラーは、カメラがどこにあると想像するかを知っている必要があります。 次に、すべての可視オブジェクトの位置を変更して、その位置と方向をシミュレートします。 したがって、実際のカメラオブジェクトを参照する代わりに、WebGL および WebXR プログラミングではカメラ（camera）という用語を使用して、3D 空間に実際のオブジェクトが存在するかどうかにかかわらず、シーンの仮定のビューアーの位置と視線方向を表すオブジェクトを参照します。
-
-視点
-
-カメラは仮想オブジェクトであり、必ずしも仮想世界の物理的なオブジェクトを表すのではなく、ビューアーの位置と視線方向を表すため、カメラの使用を必要とする状況の種類について考えることは役立ちます。 ゲーム関連の状況は、多くの場合ゲーム固有の特殊なケースであるため、個別にリストされていますが、これらのパースペクティブのいずれも 3D グラフィックシーンに適用される場合があります。
-
-一般化されたカメラ
-
-一般に、仮想カメラはシーン内の物理オブジェクトに組み込まれる場合と組み込まれない場合があります。 実際、3D ゲームの範囲外では、カメラがシーンに表示されるオブジェクトとまったく対応しない可能性がはるかに高くなります。 次が 3D カメラの使用例です。
-
-
- - アニメーションをレンダリングするとき — 映画制作のために、またはプレゼンテーションやゲームのコンテキスト内で使用するために — 仮想カメラは、実世界のフィルムカメラのように使用されます。 視聴者（ビューアー）はおそらくそれらの手法を使用して映画を鑑賞して成長しており、映画やアニメーションがそれらの方法に従うという潜在意識の期待があるため、可能な限り、標準の映画撮影手法が使用されます。 それらから逸脱すると、視聴者をその瞬間から引き離すことができます。
- - ビジネスアプリケーションでは、3D カメラを使用して、グラフやチャートなどをレンダリングするときに、見かけの大きさとパースペクティブを簡単に設定できます。
- - 地図アプリケーションでは、カメラをシーンの真上に配置するか、さまざまな角度を使用してパースペクティブを表現できます。 3D GPS ソリューションの場合、カメラはユーザーの周囲の領域を表示するように配置され、ディスプレイの大部分はユーザーの移動経路の前方の領域を示します。
- - WebGL を使用して 2D グラフィックス描画を高速化する場合、通常、カメラはシーンの中心の真上に配置され、距離と視野はシーン全体を表示できるように設定されます。
- - ビットマップグラフィックスを高速化する場合、レンダラーは 2D 画像を WebGL テクスチャーのバッファーに描画し、テクスチャーを再描画して画面をリフレッシュします。 これは基本的に、2D グラフィックアプリケーションでマルチプルバッファリング（multiple buffering）を実行するためのバックバッファーとしてテクスチャーを使用します。
-
-
-ゲームにおけるカメラ
-
-ゲームにはさまざまな種類があり、カメラをゲームで使用するにはいくつかの方法があります。 一般的な状況は次のとおりです。
-
-
- - ファーストパーソンゲームでは、カメラはプレイヤーのアバターの頭の中にあり、アバターの目と同じ方向を向いています。 このようにして、プレイヤーの画面またはヘッドセットに表示されるビューは、アバターが見るものです。
- - 一部のサードパーソンゲームでは、カメラがプレイヤーのアバターや乗り物の後ろの少し離れたところにあり、ゲームの世界を移動するときに後ろから見ています。 これは、多くのマルチプレイヤーオンラインロールプレイングゲーム、特定のシューティングゲームなどで使用されます。 人気のある例には、World of Warcraft、トゥームレイダー、フォートナイト などがあります。 このカテゴリーには、カメラがプレイヤーの肩の真上に配置されるゲームも含まれます。
- - 一部の 3D ゲームは、フライトシミュレーターで航空機のさまざまなウィンドウを見る、またはステージ（game level）内のすべての防犯カメラからのビューを見るなど、視点を変更する能力を提供します（スパイとステルスベースのゲームの一般的な機能）。 この能力は、スコープ付きの武器を提供するゲームでも使用されます。 この場合、ビューは、もはや頭の位置に完全に基づいていません。
- - 3D ゲームは、目に見えない種類のアバターを配置するか、固定の仮想カメラを選択して監視することにより、非プレイヤーがアクションを観察する能力も提供します。
- - 高度な 3D ゲームでは、カメラまたはカメラのようなオブジェクトを使用して、プレイヤーキャラクターが使用できるものと同じレンダリングエンジンおよび物理エンジンによって、非プレイヤーキャラクターが何を見ることができるかを決定できます。
- - シングルスクリーン 2D ゲームでは、カメラはプレイヤーやゲーム内の他のキャラクターに直接関連付けられていませんが、代わりにゲームプレイエリアの上または横に固定されているか、アクションがスクロールするゲーム世界を動き回るときにアクションに従います。 例えば、パックマンなどの古典的なアーケードゲームは固定されたゲームマップ上で行われるため、カメラはマップ上の設定距離に固定され、常にゲームの世界を真下に向けます。
- - スーパーマリオブラザーズなどの横スクロールゲームまたは縦スクロールゲームでは、カメラは左右（または上下、あるいはその両方）に沿って移動するため、ステージがビューポートよりはるかに大きくても、アクションは表示されたままになります。
-
-
-カメラの配置
-
-WebGL または WebXR には標準のカメラオブジェクトがないため、カメラを自分でシミュレートする必要があります。 そうする前に、そしてカメラの動きをシミュレートする前に、実際に仮想カメラとその動きを最も基本的なレベルで見てみましょう。 すべてのものと同様に、空間内のオブジェクトの位置（position）は、たとえ仮想空間であっても、原点を基準にした位置を示す3つの数値を使用して表すことができ、原点の位置は (0, 0, 0) と定義されています。
-
-オブジェクトと空間の原点との空間関係には、考慮する必要のある別の側面があります。 それはパースペクティブ（perspective）です。 パースペクティブは、シーン内のオブジェクトに適切に適用されると、通常の 2D 画面と同じくらい平面に見えるシーンを取り、まるで 3D であるかのように飛び出させることができます。 パースペクティブにはいくつかの種類があります。 それらは定義されており、それらの数学は WebGL モデル ビュー 射影の記事で説明されています。 重要なのは、ベクトルに対するパースペクティブの効果は、ベクトルに w と呼ばれる4番目のパースペクティブ成分を追加することによって表すことができるということです。
-
-w の値は、他の3つの成分のそれぞれをそれで除算することによって適用され、最終的な位置またはベクトルを取得します。 つまり、(x, y, z, w) として与えられた座標の場合、3D 空間の点は実際には (x/w, y/w, z/w, 1) または単に (x/w, y/w, z/w) です。 パースペクティブを使用していない場合、w は常に 1 です。 その場合、(1, 0, 3) にあるオブジェクトの完全な座標は (1, 0, 3, 1) になります。
-
-ただし、3D 空間のオブジェクトを表現するには、場所だけでは不十分です。 なぜなら、空間内のオブジェクトの状態は、その位置だけでなく、その回転（rotation）または向き（facing direction）としても知られる方向（orientation）に関するものだからです。 方向は 3D ベクトルを使用して表すことができ、これは通常、長さが 1.0 になるように正規化されています。 例えば、オブジェクトが (3, 1, -2) にあるオブジェクトに向いている場合、つまり、原点から 3 メートル右、1 メートル上、2 メートル向こうに離れているオブジェクトに向いている場合、結果は次のようになります。
-
-
-
-これは次のように配列として表すこともできます。
-
-let directionVector = [3, 1, -2];
-
-
-座標と向きのベクトルの両方を含む操作を実行するために、ベクトルには w 成分を含める必要があります。 ベクトルの w の値は常に 0 であるため、前述のベクトルは [3, 1, -2, 0] または次のように表すこともできます。
-
-
-
-WebXR は、ベクトルを1メートルの長さに自動的に正規化します。 ただし、正規化を繰り返し実行する必要はないため、計算のパフォーマンスを向上させるなど、さまざまな理由で自分で行う方が理にかなっている場合があります。
-
-カメラにさせたい動きの組み合わせを表す行列を決定したら、カメラは動かせないため、それを逆にする必要があります。 実際にはカメラ以外のすべてのものを移動しているので、変換行列の逆行列を取って、逆変換行列を取得します。 次に、この逆行列を世界のオブジェクトに適用して、オブジェクトの位置と方向を変更し、希望するカメラ位置をシミュレートできます。
-
-これが、WebXR が変換を表すために使用する {{domxref("XRRigidTransform")}} オブジェクトに、{{domxref("XRRigidTransform.inverse", "inverse")}} プロパティが含まれている理由です。 inverse プロパティは、親変換の逆行列である別の XRRigidTransform オブジェクトです。 ビューを表す {{domxref("XRView")}} には、カメラビューを提供する XRRigidTransform である {{domxref("XRView.transform", "transform")}} プロパティがあるため、次のように、モデルビュー行列（世界を移動して目的のカメラ位置をシミュレートするために必要な変換行列）を取得できます。
-
-let viewMatrix = view.transform.inverse.matrix;
-
-使用しているライブラリが XRRigidTransform オブジェクトを直接受け入れる場合は、ビュー行列を表す配列だけを取り出すのではなく、代わりに view.transform.inverse を取得できます。
-
-
-
-カメラが同時にズームやパンなどの複数の変換を実行する必要がある場合は、変換行列を乗算して、両方の変更を一度に適用する単一の行列に合成できます。 これを実行する明確で読みやすい関数については、ウェブの行列計算の記事の2つの行列の乗算を参照してください。 あるいは、glMatrix などのお好みの行列計算ライブラリを使用して処理してください。
-
-乗算が可換である（つまり、左から右に乗算しても右から左に乗算しても同じ答えが得られる）典型的な算術とは異なり、行列の乗算は可換ではないことに注意してください！ これは、各変換がオブジェクトの位置と、場合によっては座標系自体に影響を与え、実行される次の操作の結果を劇的に変える可能性があるためです。 そのため、複合変換を作成するとき（または変換を順番に直接適用するとき）は、変換を適用する順序に注意する必要があります。
-
-
-
-変換を適用するには、点またはベクトルに変換または変換の合成を掛けます。
-
-これは、物理的な場所、方向または向き、およびパースペクティブの観点から見た位置の概念の概要です。 このテーマの詳細については、幾何学と参照空間、WebGL モデル ビュー 射影、およびウェブの行列計算の記事を参照してください。
-
-古典的な映画撮影のシミュレーション
-
-映画撮影は、カメラの動きを設計、計画、そして実行することで、アニメーションまたはフィルムのシーンに望ましい外観と感情を生み出す芸術です。 主にカメラの動きについて理解するのに役立つ用語がいくつかありますが、これらの用語を、仮想カメラを使って設計された視点の変更を説明するために使用します。 これらの動きを同時に複数実行することも完全に可能です。 例えば、シーンをズームインしながらカメラをパンできます。
-
-カメラの動きの大部分は、カメラの参照空間を基準にして記述されていることに注意してください。
-
-行列を格納するための形式は、通常、列優先でフラット化された配列です。 つまり、行列の値は、左上隅から下に向かって書き込まれ、次に右に1行移動して、すべての値が配列になるまで繰り返されます。
-
-したがって、次のような行列になります。
-
-
-
-これは、次のように配列形式で表されます。
-
-let matrixArray = [a1, a2, a3, a4, a5, a6, a7, a8,
- a9, a10, a11, a12, a13, a14, a15, a16];
-
-この配列では、左端の列にエントリ a1、a2、a3、a4 が含まれています。 一番上の行には、エントリ a1、a5、a9、a13 が含まれています。
-
-ほとんどの WebGL および WebXR のプログラミングは、サードパーティライブラリを使用して行われることを覚えておいてください。 サードパーティライブラリは、コアとなる行列やその他の操作だけでなく、多くの場合、これらの標準的な映画撮影手法のシミュレーションをより簡単にするルーチンを追加することにより、WebGL の基本機能を拡張します。 WebGL を直接使用するのではなく、その1つを使用することを強くお勧めします。 このガイドでは WebGL を直接使用しています。 これは、その裏で何が行われているのかをある程度理解し、ライブラリの開発を支援したり、コードを最適化するのに役立つためです。
-
-
-
注意: 「カメラを動かす」などのフレーズを使用していますが、実際に行っているのは、カメラの周りの世界全体を動かすことです。 これは、特定の値が機能する方法に影響を与えます。 これらの値については、後で説明します。
-
ズーム
-
-最もよく知られているカメラ効果には、ズーム（zoom）があります。 ズームは、レンズの焦点距離を変更することにより、物理的なカメラで実行されます。 これは、レンズ自体の中心とカメラの光センサーの間の距離です。 したがって、ズームは実際にはカメラを動かすことをまったく含みません。 代わりに、ズームショットは、時間の経過とともにカメラの倍率を変化させて、実際にカメラを物理的に動かさなくても、焦点領域がビューアーに近づいたり遠ざかったりするように見せます。 ゆっくりとした動きはシーンに動き、気軽さ、または集中の感覚をもたらすことができ、急速なズームは不安、驚き、または緊張の感覚を生み出すことができます。
-
-ズームはカメラの位置を動かさないので、結果として生じる効果は不自然です。 人間の目にはズームレンズがありません。 物を遠ざけたり、近づけたりして、物を小さくしたり大きくしたりします。 映画撮影では、それはドリーショットと呼ばれます。
-
-3D グラフィックスにも2つの手法があり、同一ではありませんが類似した結果を作成でき、その方法はさまざまな状況でより簡単に適用できます。
-
-視野調整によるズーム
-
-カメラの視野（field of view、FOV）を変更することで、真の「ズーム」に似たことができます。 視野とは、一度に見る必要のある、カメラを囲む可視領域全体の円弧の長さを定義する角度です。 これは実際のカメラの焦点距離の効果であり、真のカメラがないため、FOV を変更することは無難な代案です。
-
-円の円周は 2π⋅r ラジアン（360°）であることを思い出してください。 そのため、これは理論上の最大 FOV です。 ただし、現実的には、人間の目はそこまで見えないだけでなく、モニターや VR ゴーグルなどの表示デバイスを使用すると、視野がさらに狭くなる傾向があります。 人間の目は通常、約 135°（約 2.356 ラジアン）の水平視野と約 180°（π または約 3.142 ラジアン）の垂直視野を持っています。
-
-カメラの FOV を小さくすると、ビューポートに含まれる弧が減少し、ビューにレンダリングされるときにそのコンテンツが拡大します。 これと光学ズーム効果の間には違いがありますが、一般的には仕事を完了するのに十分近い結果です。
-
-次の関数は、指定された視野角と指定されたニアクリッピングプレーンおよびファークリッピングプレーンの距離を統合する透視射影行列を返します。
-
-function createPerspectiveMatrix(viewport, fovDegrees, nearClip, farClip) {
- const fovRadians = fovDegrees * (Math.PI / 180.0);
- const aspectRatio = viewport.width / viewport.height;
-
- const transform = mat4.create();
- mat4.perspective(transform, fovRadians, aspectRatio,
- nearClip, farClip);
- return transform;
-}
-
-FOV 角度 fovDegrees を度数からラジアンに変換し、viewport パラメーターで指定された {{domxref("XRViewport")}} のアスペクト比を計算した後、この関数は glMatrix ライブラリーの mat4.perspective() 関数を使用して、透視行列を計算します。
-
-透視行列は、視野（厳密に言えば、これは垂直方向の視野です）、アスペクト比、およびニアクリッピングプレーンおよびファークリッピングプレーンを 4x4 行列の transform でカプセル化し、呼び出し元に返します。
-
-ニアクリッピングプレーンは、ディスプレイ面に平行なプレーン（平面）からの距離をメートル単位で表したもので、それよりも近くにあるものは何も描画されません。 そのプレーンのカメラ側に横たわる頂点は描画されません。 逆に、ファークリッピングプレーンは、その先には頂点が描画されないプレーンまでのメートル単位の距離です。
-
-拡大縮小係数（scaling factor）またはパーセントを使用してズームするには、1 倍（通常のサイズの 100%）を許可する FOV の最大値にマップし（これにより、ほとんどのコンテンツが表示されます）、最大倍率をサポートしたい FOV の最大値にマップし、その間の対応する値をマップします。
-
-透視行列を計算することによって各フレームのレンダリングパスを開始する場合、フレームの目的のジオメトリーを生成するために適用する必要がある他のすべての変換をその行列にまとめることができます。 例えば、次のようにです。
-
-const transform = createPerspectiveMatrix(viewport, 130, 1, 100);
-const translateVec = vec3.fromValues(-trackDistance, -craneDistance, pushDistance);
-mat4.translate(transform, transform, translateVec);
-
-
-これは、130°の垂直視野を表す透視行列から始まり、次に、トラック、クレーン、およびプッシュの動きを含むやり方でカメラを動かす平行移動を適用します。
-
-
-
-真の「ズーム」とは異なり、拡大縮小（scaling）では、位置または頂点の x、y、z 座標値のそれぞれに、その軸の拡大縮小係数を掛けます。 これらは各軸で同一である場合と、必ずしも同一ではない場合もありますが、ズーム効果に最も近い結果は、それぞれに同じ値を使用する必要があります。 これは、シーン内のすべての頂点に（理想的には頂点シェーダーで）適用する必要があります。
-
-2倍に拡大する場合は、各成分に 2.0 を掛ける必要があります。 同じ量だけ縮小するには、-2.0 を掛けます。 行列の用語では、これは次のように拡大縮小係数された変換行列を使用して実行されます。
-
-let scaleTransform = [
- Sx, 0, 0, 0,
- 0, Sy, 0, 0,
- 0, 0, Sz, 0,
- 0, 0, 0, 1
-];
-
-
-この行列は、(Sx, Sy, Sz) で示される係数で拡大または縮小する変換を表します。 Sx は X 軸に沿った拡大縮小係数、Sy は Y 軸に沿った拡大縮小係数、Sz は Z 軸の係数です。 これらの値のいずれかが他の値と異なる場合、結果は一部の次元で他と比較して異なる伸縮になります。
-
-すべての方向に同じ拡大縮小係数を適用する場合は、単純な関数を作成して拡大縮小変換行列を生成できます。
-
-function createScalingMatrix(f) {
- return [
- f, 0, 0, 0,
- 0, f, 0, 0,
- 0, 0, f, 0,
- 0, 0, 0, 1
- ];
-}
-
-
-変換行列を取得したら、変換 scaleTransform をベクトル（または頂点）myVector に適用するだけです。
-
-let myVector = [2, 1, -3];
-let scaleTransform = [
- 2, 0, 0, 0,
- 0, 2, 0, 0,
- 0, 0, 2, 0,
- 0, 0, 0, 1
-];
-vec4.transformMat4(myVector, myVector, scaleTransform);
-
-
-または、上記の createScalingMatrix() 関数を使用して、同じ係数ですべての軸に沿った拡大縮小を使用します。
-
-let myVector = [2, 1, -3];
-vec4.transformMat4(myVector, myVector, createScalingMatrix(2.0));
-
-パン（左または右へのヨー）
-
-パン（pan）またはヨー（yaw）とは、カメラの左から右への回転または右から左への回転であり、それ以外はベースに固定されています。 空間内でのカメラの位置は変化せず、見ている方向のみが変化します。 そして、その方向は水平方向以外に変わりません。 パンは、広大な空間内や広大なオブジェクト上で設定を確立したり、範囲の感覚を提供したりするのに最適です。 あるいは、没入型または VR のシナリオでプレイヤーが頭を回すのをシミュレートするように、左右を見るだけです。
-
-
-
-これを行うには、Y 軸を中心に回転して、カメラの左右の回転をシミュレートする必要があります。 これまでに使用した glMatrix ライブラリーを使用すると、これは、標準の 4x4 行列を表す mat4 クラスの rotateY() メソッドを使用して実行できます。 行列 viewMatrix で定義された視点 を panAngle ラジアンで回転するには、次のようにします。
-
-mat4.rotateY(viewMatrix, viewMatrix, panAngle);
-
-
-panAngle が正の場合、この変換はカメラを右にパンします。 panAngle の負の値は左にパンします。
-
-ティルト（上または下へのピッチ）
-
-カメラをティルト（tilt）またはピッチ（pitch）すると、カメラの水平部分をまったく変更せずに、カメラの垂直方向の向きを変更しながら、同じ座標で空間に固定したままにします。 単に上下を指す方向を調整するだけです。 ティルトは、森や山などの背の高いオブジェクトやシーンの範囲をキャプチャするのに適していますが、重要なキャラクターやロケールを紹介したり、畏敬の念を起こさせたりする一般的な方法でもあります。 もちろん、プレイヤーが上下を見るサポートを実装するのにも役立ちます。
-
-
-
-したがって、カメラをティルトすることは、X 軸を中心にカメラを回転させることで実現できます。 これは、glMatrix の mat4 クラスの rotateX() メソッドなど、行列計算ライブラリーの適切なメソッドを使用して実行できます。
-
-mat4.rotateX(viewMatrix, viewMatrix, angle);
-
-angle の正の値はカメラを下に傾け、angle の負の値は上に傾けます。
-
-ドリー（前または後ろへの移動）
-
-ドリー（dolly）ショットは、カメラ全体が前後に移動するショットです。 古典的な映画制作では、これは通常、カメラをトラック（track）上または移動中の車両に取り付けて行われます。 結果のモーションは、特にショットの焦点である人物またはオブジェクトと一緒に移動する場合に、印象的で滑らかな効果を作成できます。
-
-
-
-ドリーショットとズームはほぼ同じように見えるはずですが、実際はそうではありません。 ズームがカメラの焦点距離を変更するという事実は、ターゲットがフレーム内で大きくなったり小さくなったりしても、ターゲットとその周囲との間の空間関係が変化しないことを意味します。 一方、ドリーショットは、実際にカメラを動かすことで、物理的な動きの感覚を再現し、シーン内のオブジェクトの関係を、ショットのターゲットに近づいたり遠ざかったりしながらオブジェクトを通り過ぎていく中で、期待通りにシフトさせます。
-
-ドリー操作を実行するには、カメラビューを Z 軸に沿って前後に平行移動します。
-
-mat4.translate(viewMatrix, viewMatrix, [0, 0, dollyDistance]);
-
-ここで、[0, 0, dollyDistance] はベクトルで、dollyDistance はカメラをドリーする距離です。 これはカメラの周りの世界全体を動かすことで機能するため、ここで実際に起こるのは、カメラに対して相対的に dollyDistance メートルだけ世界全体が Z 軸に沿って動くということです。 dollyDistance が正の場合、世界はその量だけユーザーに向かって移動し、カメラがシーンに近づきます。 反対に、dollyDistance の負の値は、ユーザーから世界を遠ざけ、カメラがターゲットから後方に動いて見えるようにします。
-
-トラック（左または右への移動）
-
-物理的なカメラを使用したトラック（truck）は、ドリーと同じ種類の索具装置を使用しますが、カメラを前後に移動するのではなく、左から右またはその逆に移動します。 カメラはまったく回転しないため、ショットの焦点が画面からゆっくりと外に出ます。 これは、シーンで感情を確立しようとするときに、集中、時間の経過、または熟考を暗示することができます。 また、カメラがキャラクターと一緒にすべるように動き、シーンを歩いていく、「歩きながら話す」シーンでも頻繁に使用されます。
-
-
-
-カメラを左右に移動するには、目的のカメラの動きとは反対の方向に、X 軸に沿ってビュー行列を移動します。
-
-mat4.translate(viewMatrix, viewMatrix, [-truckDistance, 0, 0]);
-
-ベクトル [-truckDistance, 0, 0] に注意してください。 これは、トラックの操作がカメラではなく世界を動かすことによって機能するという事実を補います。 全世界を truckDistance によって示される方向とは反対の方向に移動することにより、カメラを予想される方向に移動する効果が得られます。 このように、truckDistance の正の値は、カメラを右に移動し（世界を左に移動することにより）、truckDistance の負の値は、カメラを左に移動します（世界を右に移動することにより）。
-
-ペデスタル（上または下への移動）
-
-ペデスタル（pedestal、台座）ショットは、カメラを床に対して水平に固定したまま、まっすぐ上下に動かしたものです。 背が高くなったり低くなったりする台座（またはポール）の上のカメラで撮影します。 これは、背が高くなったり低くなったり、椅子から立ち上がったり座ったりしている、あるいは単にまっすぐ上下に動いている被写体を追跡するときに役立ちます。
-
-
-
-これは、クレーンに取り付けられたカメラを上下に動かすクレーン（crane）ショットに似ています。 ペデスタルまたはクレーンのモーションを実行するには、ビューを Y 軸に沿って、カメラを移動する方向とは反対の方向に移動します。
-
-mat4.translate(viewMatrix, viewMatrix, [0, -pedestalDistance, 0]);
-
-pedestalDistance の値を反転することで、実際にはカメラではなく世界を動かしているという事実を補正します。 したがって、pedestalDistance の正の値はカメラを上に移動し、負の値は下に移動します。
-
-カント（左右へのロール）
-
-カント（cant）またはロール（roll）は、ロール軸を中心としたカメラの回転です。 つまり、カメラは空間に固定されたままで、同じ位置に向けられたままですが、カメラの上部が別の方向に向けられるように回転します。
-
-
-
-これは、手のひらを下にして、手を開いた状態で腕を前に出すことで視覚化できます。 自分の手がカメラで、手の甲がカメラの上部を表しているとします。 「カメラ」が上下逆になるように手を回転させます。 これが、ロール軸の周りに手をカントしたところです。 映画撮影では、カントを使用して、波や乱気流などのさまざまなタイプの非定常モーションをシミュレートできますが、劇的な効果を得るためにも使用できます。
-
-glMatrix を使用して Z 軸を中心にこの回転を実行するには、次のようにします。
-
-mat4.rotateZ(viewMatrix, viewMatrix, cantAngle);
-
-動きを組み合わせる
-
-パンしながらズームしたり、同時にティルトしたりカントしたりするなど、複数の動作を同時に実行できます。
-
-複数の軸に沿った平行移動
-
-複数の軸に沿った平行移動は非常に簡単です。 以前は、次のような平行移動を行っていました。
-
-mat4.translate(viewMatrix, viewMatrix, [-truckDistance, 0, 0]);
-mat4.translate(viewMatrix, viewMatrix, [0, -pedestalDistance, 0]);
-mat4.translate(viewMatrix, viewMatrix, [0, 0, dollyDistance]);
-
-
-ここでの解決策は明白です。 平行移動は、各軸に沿って移動する距離を提供するベクトルとして表現されるため、次のようにそれらを組み合わせることができます。
-
-mat4.translate(viewMatrix, viewMatrix,
- [-truckDistance, -pedestalDistance, dollyDistance]);
-
-これにより、行列 viewMatrix の原点が各軸に沿って指定された量だけシフトします。
-
-複数の軸を中心に回転
-
-複数の軸の周りの回転を、回転の共有軸を表すクォータニオンの周りの単一の回転に結合することもできます。 回転を個別に実行するには、オイラー角（Euler angles、各軸の周りの別々の角度）を使用して、次のようにピッチ、ヨー、ロールを適用します。
-
-mat4.rotateX(viewMatrix, viewMatrix, pitchAngle);
-mat4.rotateY(viewMatrix, viewMatrix, yawAngle);
-mat4.rotateZ(viewMatrix, viewMatrix, rollAngle);
-
-
-代わりに、次のようにオイラー角から回転軸を組み合わせた{{Glossary("quaternion","クォータニオン")}}を作成し、乗算を使用して行列を回転させることができます。
-
-const axisQuat = quat.create();
-const rotateMatrix = mat4.create();
-quat.fromEuler(axisQuat, pitchAngle, yawAngle, rollAngle);
-mat4.fromQuat(rotateMatrix, axisQuat);
-mat4.multiply(viewMatrix, viewMatrix, rotateMatrix);
-
-これにより、ピッチ、ヨー、ロールのオイラー角が3つの回転すべてを表すクォータニオンに変換されます。 次に、これは回転変換行列に変換されます。 そして最後に、ビュー行列に回転変換を掛けて、回転を完了します。
-
-WebXR で 3D を表現
-
-WebXR は 3D グラフィックスをさらに一歩進め、ゴーグルやヘッドセットなどの特別なビジュアルハードウェアを使用して 3D グラフィックスを提示し、実際に3次元で存在するように見える 3D グラフィックスを作成できるようにします。 これは、現実世界のコンテキスト内にある可能性があります（拡張現実の場合）。
-
-奥行きを知覚するには、シーンに2つのパースペクティブが必要です。 2つのビューを比較することにより、オブジェクトの奥行き、ひいてはビューアーと見ているオブジェクトの間の距離を認識することができます。 これが、わずかに間隔を空けて2つの目がある理由です。 一度に片方の目を閉じ、2つの目を交互に切り替えると、この事実を思い出すことができます。 左目は鼻の左側を見ることができますが、右側は見えませんし、右目は鼻の右側を見ることができますが、左側は見えません。 これは、それぞれの目に見える違いの1つにすぎません。
-
-私たちの脳は、視野全体の光レベルと波長に関する2つのデータをそれぞれの目から受け取ります。 脳はこのデータを使用して、2つのパースペクティブ間のわずかな違いを使用して奥行きと距離を把握し、心の中でシーンを構築します。
-
-シーンのレンダリング
-
-XR（仮想現実（VR）と拡張現実（AR）の両方を含む省略表現）のヘッドセットは、2つの目で得られるビューと同じように、シーンの2つのビューを互いに少しずらして描画することで、3D 画像を提示します。 これらのビューは、それぞれの目に別々に送られ、脳が心の中で 3D 画像を構築するために必要とするデータを収集できるようにします。
-
-これを行うために、WebXR はレンダラーに、動画の各フレームに対して2回（各目に1回）シーンを描画するように要求します。 2つのビューは、同じフレームバッファーにレンダリングされます。 ビューの1つは左側にあり、もう1つは右側にあります。 XR デバイスは、画面とレンズを使用して、生成された画像の左半分を左目に提示し、右半分を右目に提示します。
-
-例えば、2560x1440 ピクセルのフレームバッファーを使用するデバイスを考えてみます。 これを2つの部分に分割すると（各目に対して半分）、各目のビューが 1280x1440 ピクセルの解像度で描画されます。 概念的には次のようになります。
-
-
-
-コードは、{{domxref("XRSession")}} のメソッド {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出して次のアニメーションフレームを提供することを WebXR エンジンに通知し、アニメーションのフレームをレンダリングするコールバック関数を提供します。 ブラウザーがシーンをレンダリングする必要がある場合、ブラウザーはコールバックを呼び出し、入力パラメーターとして現在の時刻と正しいフレームをレンダリングするために必要なデータをカプセル化した {{domxref("XRFrame")}} を提供します。
-
-この情報には、シーン内のビューアーの位置と向きを説明する {{domxref("XRViewerPose")}} と、それぞれがシーンの1つのパースペクティブを表す {{domxref("XRView")}} オブジェクトのリストが含まれます。 現在の WebXR 実装では、このリストには3つ以上のエントリはありません。 1つは左目の位置と視野角を示し、もう1つは右目に対して同じことを行います。 与えられた XRView がどの目を表すかは、その {{domxref("XRView.eye", "eye")}} プロパティの値（left または right の文字列）を確認することでわかります（3番目の可能な値 none は、理論的には別の視点を表すために使用できますが、これは現在の API では完全には利用できません）。
-
-フレームコールバックの例
-
-フレームをレンダリングするためのかなり基本的な（ただし典型的な）コールバックは次のようになります。
-
-function myAnimationFrameCallback(time, frame) {
- let adjustedRefSpace = applyPositionOffsets(xrReferenceSpace);
- let pose = frame.getViewerPose(adjustedRefSpace);
-
- animationFrameRequestID = frame.session.requestAnimationFrame(myAnimationFrameCallback);
-
- if (pose) {
- let glLayer = frame.session.renderState.baseLayer;
- gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
- CheckGLError("Binding the framebuffer");
-
- gl.clearColor(0, 0, 0, 1.0);
- gl.clearDepth(1.0);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
- CheckGLError("Clearing the framebuffer");
-
- const deltaTime = (time - lastFrameTime) * 0.001;
- lastFrameTime = time;
-
- for (let view of pose.views) {
- let viewport = glLayer.getViewport(view);
- gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
- CheckGLError(`Setting viewport for eye: ${view.eye}`);
-
- myRenderScene(gl, view, sceneData, deltaTime);
- }
- }
-}
-
-
-コールバックは、カスタム関数 applyPositionOffsets() を呼び出すことから始まります。 この関数は、参照空間を取り、キーボードやマウスのような WebXR によって制御されていないデバイスからのユーザー入力などを考慮するために必要な変更を変換行列に適用します。 この関数によって返された調整済みの {{domxref("XRReferenceSpace")}} は、{{domxref("XRFrame")}} のメソッド {{domxref("XRFrame.getViewerPose", "getViewerPose()")}} に渡されて、ビューアーの位置と視野角を表す {{domxref("XRViewerPose")}} を取得します。
-
-次に、動画の次のフレームをレンダリングするためのリクエストをキューに入れます。 そのためには requestAnimationFrame() を再度呼び出すだけで、後でそれを行うことを心配する必要はありません。
-
-次に、シーンをレンダリングします。 ポーズの取得に成功した場合、セッションの {{domxref("XRSession.renderState", "renderState")}} オブジェクトの {{domxref("XRRenderState.baseLayer", "baseLayer")}} プロパティから、レンダリングに使用する必要がある {{domxref("XRWebGLLayer")}} を取得します。 これを {{domxref("WebGLRenderingContext")}} のメソッド {{domxref("WebGLRenderingContext.bindFrameBuffer", "gl.bindFrameBuffer()")}} を使用して WebGL の gl.FRAMEBUFFER ターゲットにバインドします。
-
-次に、レンダーラーがすべてのピクセルに触れるわけではないため、フレームバッファーをクリアして、既知の状態から開始するようにします。 {{domxref("WebGLRenderingContext.clearColor", "gl.clearColor()")}} を使用してクリアカラーを不透明な黒に設定し、{{domxref("WebGLRenderingContext")}} のメソッド {{domxref("WebGLRenderingContext.clearDepth", "gl.clearDepth()")}} を呼び出して奥行きバッファーを 1.0 にクリアする値を設定します。 次に、{{domxref("WebGLRenderingContext")}} のメソッド {{domxref("WebGLRenderingContext.clear", "gl.clear()")}} を呼び出します。 これにより、フレームバッファー（マスクパラメーターに gl.COLOR_BUFFER_BIT が含まれるため）と奥行きバッファー（gl.DEPTH_BUFFER_BIT が含まれるため）がクリアされます。
-
-次に、フレームの希望するレンダリング時刻と最後のフレームが描画された時刻を比較して、前のフレームがレンダリングされてからの経過時間を判断します。 この値はマイクロ秒単位なので、0.001 を掛けて（または 1000 で割り算して）秒に変換します。
-
-次に、{{domxref("XRViewerPose")}} 配列の {{domxref("XRViewerPose.views", "views")}} で見つかったポーズのビューをループします。 ビューごとに、使用する適切なビューポートを {{domxref("XRWebGLLayer")}} に要求し、位置と大きさの情報を {{domxref("WebGLRenderingContext.viewport", "gl.viewport()")}} に渡して、一致するように WebGL ビューポートを構成します。 これによりレンダリングが制限され、{{domxref("XRView.eye", "view.eye")}} で識別される目で見た画像を表すフレームバッファーの部分にのみ描画できるようになります。
-
-制約が確立され、必要なすべての準備が整ったら、カスタム関数 myRenderScene() を呼び出して、実際に計算と WebGL レンダリングを実行してフレームをレンダリングします。 この場合、WebGL コンテキストの gl、{{domxref("XRView")}} の view、sceneData オブジェクト（頂点シェーダー、フラグメントシェーダー、頂点リスト、テクスチャなどを含む）、および deltaTime を渡しています。 deltaTime は、前のフレームからどれだけの時間が経過したかを示します。 これにより、アニメーションをどこまで進めるかがわかります。
-
-この関数が戻ると、WebXR によって使用されている WebGL フレームバッファーには、シーンの2つのコピーがあり、それぞれがフレームの半分を占めています。 1つは左目用、もう1つは右目用です。 これが、XR ソフトウェアとドライバーを介してヘッドセットに到達し、各半分が適切な目に表示されます。
-
-関連情報
-
-
diff --git a/files/ja/web/api/webxr_device_api/cameras/index.md b/files/ja/web/api/webxr_device_api/cameras/index.md
new file mode 100644
index 00000000000000..e8658344a3b973
--- /dev/null
+++ b/files/ja/web/api/webxr_device_api/cameras/index.md
@@ -0,0 +1,461 @@
+---
+title: '視点とビューアー: WebXR でのカメラのシミュレーション'
+slug: Web/API/WebXR_Device_API/Cameras
+tags:
+ - 3D
+ - API
+ - AR
+ - Advanced
+ - Cameras
+ - Coordinates
+ - Guide
+ - Location
+ - Motion
+ - Position
+ - VR
+ - Viewers
+ - Viewpoints
+ - WebGL
+ - WebXR
+ - WebXR API
+ - WebXR Device API
+ - XR
+ - XRPose
+ - XRView
+ - XRViewerPose
+ - rotation
+ - transform
+translation_of: Web/API/WebXR_Device_API/Cameras
+---
+{{DefaultAPISidebar("WebXR Device API")}}
+
+アプリケーションで視点とカメラを管理するためのコードを検討する際に理解する最初で最も重要なことは、*WebXR にカメラがないこと*です。 [WebGL](/ja/docs/Web/API/WebGL_API) または WebXR API によって提供される、回転して移動するだけで画面に表示されるものを自動的に変更できるビューアーを表す魔法のオブジェクトはありません。 このガイドでは、カメラを動かさずに [WebGL](/ja/docs/Web/API/WebGL_API) を使用してカメラの動きをシミュレートする方法を示します。 これらの手法は、任意の WebGL（または WebXR）プロジェクトで使用できます。
+
+3D グラフィックスのアニメーション化は、コンピューターサイエンス、数学、芸術、グラフィックデザイン、運動学、解剖学、生理学、物理学、および映画撮影における複数の分野を統合するソフトウェア開発の領域です。 私たちは実際のカメラを持っていないので、実際にユーザーをシーン内で動かすことなく、カメラを持っているかのような*効果*を再現するカメラを想像します。
+
+WebGL と WebXR の背後にある基本的な数学、幾何学、およびその他の概念についての記事がいくつかあります。 これは、この記事を読む前または読んでいるときに役立つかもしれません。
+
+- [基本の 3D 理論の説明](/ja/docs/Games/Techniques/3D_on_the_web/Basic_theory)
+- [ウェブの行列計算](/ja/docs/Web/API/WebGL_API/Matrix_math_for_the_web)
+- [WebGL モデル ビュー 射影](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection)
+- [WebXR の幾何学と参照空間](/ja/docs/Web/API/WebXR_Device_API/Geometry)
+
+_編注: この記事で使用されているほとんどの図は、標準的な動作を実行しながらカメラがどのように動くかを示すために、[FilmmakerIQ ウェブサイトの記事](https://filmmakeriq.com/2016/09/the-importance-and-not-so-importance-of-film-terminology/)から取られました。 つまり、ウェブ全体で見られる[この画像](https://filmmakeriq.com/wp-content/uploads/2016/09/Pan-Tilt.png)からです。 それらは頻繁に再利用されるため、許可されたライセンスの下で利用できると想定しているため、所有権は不明です。 私たちはそれが自由に使えることを望みます。 そうでない場合で、あなたが所有者である場合はお知らせください。 新しい図を検索または作成します。 または、画像の使用を継続してよろしければ、適切にクレジットできるようにお知らせください。_
+
+## カメラと相対運動
+
+古典的な実写映画を撮影する時は、俳優はセットにいて、演技しながらセットを動きまわり、1 台以上のカメラでその動きを見守ります。 カメラは固定することもできますが、動き回るように設定したり、パフォーマーの動きを追跡したり、ドリーイン/アウトして感情的な影響を与えたりすることもできます。
+
+### 仮想カメラ
+
+WebGL（そして、拡張によって、WebXR）では、移動および回転できるカメラオブジェクトがないため、これらの動きのふりをする方法を見つける必要があります。 カメラがないので、そのふりをする方法を見つけなければなりません。 幸いなことに、ガリレオ、ニュートン、ローレンツ、アインシュタインのような物理学者は私たちに**{{interwiki("wikipedia", "相対性原理")}}**を与えてくれました。 それは物理学の法則がすべての参照系で同じ形であると述べています。 つまり、どこに立っていても、物理法則は同じように機能します。
+
+つまり、あなたと他の人が固い石の何もないフィールドに立っていて、目に見える限り他のものが見えない場合、あなたが他の人に向かって 3 メートル移動すると、他の人があなたに向かって 3 メートル移動した場合と*同じ*結果になります。 どちらにも違いを見分ける方法はありません。 第三者は違いを見分けることができますが、2 人にはできません。 カメラの場合は、カメラを動かすか、*カメラの周りのすべてを動かす*ことで、同じ視覚結果を得ることができます。
+
+そしてそれが私たちの解決策です。 カメラを動かすことができないので、カメラの周りの世界を動かします。 レンダラーは、カメラがどこにあると想像するかを知っている必要があります。 次に、すべての可視オブジェクトの位置を変更して、その位置と方向をシミュレートします。 したがって、実際のカメラオブジェクトを参照する代わりに、WebGL および WebXR プログラミングでは**カメラ**（camera）という用語を使用して、3D 空間に実際のオブジェクトが存在するかどうかにかかわらず、シーンの仮定のビューアーの位置と視線方向を表すオブジェクトを参照します。
+
+### 視点
+
+カメラは仮想オブジェクトであり、必ずしも仮想世界の物理的なオブジェクトを表すのではなく、ビューアーの位置と視線方向を表すため、カメラの使用を必要とする状況の種類について考えることは役立ちます。 ゲーム関連の状況は、多くの場合ゲーム固有の特殊なケースであるため、個別にリストされていますが、これらのパースペクティブのいずれも 3D グラフィックシーンに適用される場合があります。
+
+#### 一般化されたカメラ
+
+一般に、仮想カメラはシーン内の物理オブジェクトに組み込まれる場合と組み込まれない場合があります。 実際、3D ゲームの範囲外では、カメラがシーンに表示されるオブジェクトとまったく対応しない可能性がはるかに高くなります。 次が 3D カメラの使用例です。
+
+- アニメーションをレンダリングするとき — 映画制作のために、またはプレゼンテーションやゲームのコンテキスト内で使用するために — 仮想カメラは、実世界のフィルムカメラのように使用されます。 視聴者（ビューアー）はおそらくそれらの手法を使用して映画を鑑賞して成長しており、映画やアニメーションがそれらの方法に従うという潜在意識の期待があるため、可能な限り、[標準の映画撮影手法](/ja/docs/Web/API/WebXR_Device_API/Cameras#Simulating_classic_cinematography)が使用されます。 それらから逸脱すると、視聴者をその瞬間から引き離すことができます。
+- ビジネスアプリケーションでは、3D カメラを使用して、グラフやチャートなどをレンダリングするときに、見かけの大きさとパースペクティブを簡単に設定できます。
+- 地図アプリケーションでは、カメラをシーンの真上に配置するか、さまざまな角度を使用してパースペクティブを表現できます。 3D GPS ソリューションの場合、カメラはユーザーの周囲の領域を表示するように配置され、ディスプレイの大部分はユーザーの移動経路の前方の領域を示します。
+- WebGL を使用して 2D グラフィックス描画を高速化する場合、通常、カメラはシーンの中心の真上に配置され、距離と視野はシーン全体を表示できるように設定されます。
+- ビットマップグラフィックスを高速化する場合、レンダラーは 2D 画像を WebGL テクスチャーのバッファーに描画し、テクスチャーを再描画して画面をリフレッシュします。 これは基本的に、2D グラフィックアプリケーションでマルチプルバッファリング（[multiple buffering](https://en.wikipedia.org/wiki/Multiple_buffering)）を実行するためのバックバッファーとしてテクスチャーを使用します。
+
+#### ゲームにおけるカメラ
+
+ゲームにはさまざまな種類があり、カメラをゲームで使用するにはいくつかの方法があります。 一般的な状況は次のとおりです。
+
+- ファーストパーソンゲームでは、カメラはプレイヤーのアバターの頭の中にあり、アバターの目と同じ方向を向いています。 このようにして、プレイヤーの画面またはヘッドセットに表示されるビューは、アバターが見るものです。
+- 一部のサードパーソンゲームでは、カメラがプレイヤーのアバターや乗り物の後ろの少し離れたところにあり、ゲームの世界を移動するときに後ろから見ています。 これは、多くのマルチプレイヤーオンラインロールプレイングゲーム、特定のシューティングゲームなどで使用されます。 人気のある例には、_World of Warcraft_、_トゥームレイダー_、_フォートナイト_ などがあります。 このカテゴリーには、カメラがプレイヤーの肩の真上に配置されるゲームも含まれます。
+- 一部の 3D ゲームは、フライトシミュレーターで航空機のさまざまなウィンドウを見る、またはステージ（game level）内のすべての防犯カメラからのビューを見るなど、視点を変更する能力を提供します（スパイとステルスベースのゲームの一般的な機能）。 この能力は、スコープ付きの武器を提供するゲームでも使用されます。 この場合、ビューは、もはや頭の位置に完全に基づいていません。
+- 3D ゲームは、目に見えない種類のアバターを配置するか、固定の仮想カメラを選択して監視することにより、非プレイヤーがアクションを観察する能力も提供します。
+- 高度な 3D ゲームでは、カメラまたはカメラのようなオブジェクトを使用して、プレイヤーキャラクターが使用できるものと同じレンダリングエンジンおよび物理エンジンによって、非プレイヤーキャラクターが何を見ることができるかを決定できます。
+- シングルスクリーン 2D ゲームでは、カメラはプレイヤーやゲーム内の他のキャラクターに直接関連付けられていませんが、代わりにゲームプレイエリアの上または横に固定されているか、アクションがスクロールするゲーム世界を動き回るときにアクションに従います。 例えば、*パックマン*などの古典的なアーケードゲームは固定されたゲームマップ上で行われるため、カメラはマップ上の設定距離に固定され、常にゲームの世界を真下に向けます。
+- *スーパーマリオブラザーズ*などの横スクロールゲームまたは縦スクロールゲームでは、カメラは左右（または上下、あるいはその両方）に沿って移動するため、ステージがビューポートよりはるかに大きくても、アクションは表示されたままになります。
+
+### カメラの配置
+
+WebGL または WebXR には標準のカメラオブジェクトがないため、カメラを自分でシミュレートする必要があります。 そうする前に、そしてカメラの動きをシミュレートする前に、実際に仮想カメラとその動きを最も基本的なレベルで見てみましょう。 すべてのものと同様に、空間内のオブジェクトの**位置**（position）は、たとえ仮想空間であっても、原点を基準にした位置を示す 3 つの数値を使用して表すことができ、原点の位置は (0, 0, 0) と定義されています。
+
+オブジェクトと空間の原点との空間関係には、考慮する必要のある別の側面があります。 それは**パースペクティブ**（perspective）です。 パースペクティブは、シーン内のオブジェクトに適切に適用されると、通常の 2D 画面と同じくらい平面に見えるシーンを取り、まるで 3D であるかのように飛び出させることができます。 パースペクティブにはいくつかの種類があります。 それらは定義されており、それらの数学は [WebGL モデル ビュー 射影](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection)の記事で説明されています。 重要なのは、ベクトルに対するパースペクティブの効果は、ベクトルに `w` と呼ばれる 4 番目のパースペクティブ成分を追加することによって表すことができるということです。
+
+`w` の値は、他の 3 つの成分のそれぞれをそれで除算することによって適用され、最終的な位置またはベクトルを取得します。 つまり、(`x`, `y`, `z`, `w`) として与えられた座標の場合、3D 空間の点は実際には (`x`/`w`, `y`/`w`, `z`/`w`, 1) または単に (`x`/`w`, `y`/`w`, `z`/`w`) です。 パースペクティブを使用していない場合、`w` は常に 1 です。 その場合、(1, 0, 3) にあるオブジェクトの完全な座標は (1, 0, 3, 1) になります。
+
+ただし、3D 空間のオブジェクトを表現するには、場所だけでは不十分です。 なぜなら、空間内のオブジェクトの状態は、その位置だけでなく、その回転（rotation）または向き（facing direction）としても知られる**方向**（orientation）に関するものだからです。 方向は 3D ベクトルを使用して表すことができ、これは通常、長さが 1.0 になるように正規化されています。 例えば、オブジェクトが (3, 1, -2) にあるオブジェクトに向いている場合、つまり、原点から 3 メートル右、1 メートル上、2 メートル向こうに離れているオブジェクトに向いている場合、結果は次のようになります。
+
+
+
+これは次のように配列として表すこともできます。
+
+```js
+let directionVector = [3, 1, -2];
+```
+
+座標と向きのベクトルの両方を含む操作を実行するために、ベクトルには `w` 成分を含める必要があります。 ベクトルの `w` の値は常に 0 であるため、前述のベクトルは `[3, 1, -2, 0]` または次のように表すこともできます。
+
+
+
+WebXR は、ベクトルを 1 メートルの長さに自動的に正規化します。 ただし、正規化を繰り返し実行する必要はないため、計算のパフォーマンスを向上させるなど、さまざまな理由で自分で行う方が理にかなっている場合があります。
+
+カメラにさせたい動きの組み合わせを表す行列を決定したら、カメラは動かせないため、それを逆にする必要があります。 実際にはカメラ以外のすべてのものを移動しているので、変換行列の逆行列を取って、逆変換行列を取得します。 次に、この逆行列を世界のオブジェクトに適用して、オブジェクトの位置と方向を変更し、希望するカメラ位置をシミュレートできます。
+
+これが、WebXR が変換を表すために使用する {{domxref("XRRigidTransform")}} オブジェクトに、{{domxref("XRRigidTransform.inverse", "inverse")}} プロパティが含まれている理由です。 `inverse` プロパティは、親変換の逆行列である別の `XRRigidTransform` オブジェクトです。 ビューを表す {{domxref("XRView")}} には、カメラビューを提供する `XRRigidTransform` である {{domxref("XRView.transform", "transform")}} プロパティがあるため、次のように、モデルビュー行列（世界を移動して目的のカメラ位置をシミュレートするために必要な変換行列）を取得できます。
+
+```js
+let viewMatrix = view.transform.inverse.matrix;
+```
+
+使用しているライブラリが `XRRigidTransform` オブジェクトを直接受け入れる場合は、ビュー行列を表す配列だけを取り出すのではなく、代わりに `view.transform.inverse` を取得できます。
+
+### 複数の変換の合成
+
+カメラが同時にズームやパンなどの複数の変換を実行する必要がある場合は、変換行列を乗算して、両方の変更を一度に適用する単一の行列に合成できます。 これを実行する明確で読みやすい関数については、[ウェブの行列計算](/ja/docs/Web/API/WebGL_API/Matrix_math_for_the_web)の記事の[2 つの行列の乗算](/ja/docs/Web/API/WebGL_API/Matrix_math_for_the_web#Multiplying_two_matrices)を参照してください。 あるいは、[glMatrix](http://glmatrix.net/) などのお好みの行列計算ライブラリを使用して処理してください。
+
+乗算が可換である（つまり、左から右に乗算しても右から左に乗算しても同じ答えが得られる）典型的な算術とは異なり、行列の乗算は*可換ではない*ことに注意してください！ これは、各変換がオブジェクトの位置と、場合によっては座標系自体に影響を与え、実行される次の操作の結果を劇的に変える可能性があるためです。 そのため、複合変換を作成するとき（または変換を順番に直接適用するとき）は、変換を適用する順序に注意する必要があります。
+
+### 変換の適用
+
+変換を適用するには、点またはベクトルに変換または変換の合成を掛けます。
+
+これは、物理的な場所、方向または向き、およびパースペクティブの観点から見た位置の概念の概要です。 このテーマの詳細については、[幾何学と参照空間](/ja/docs/Web/API/WebXR_Device_API/Geometry)、[WebGL モデル ビュー 射影](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection)、および[ウェブの行列計算](/ja/docs/Web/API/WebGL_API/Matrix_math_for_the_web)の記事を参照してください。
+
+## 古典的な映画撮影のシミュレーション
+
+映画撮影は、カメラの動きを設計、計画、そして実行することで、アニメーションまたはフィルムのシーンに望ましい外観と感情を生み出す芸術です。 主にカメラの動きについて理解するのに役立つ用語がいくつかありますが、これらの用語を、仮想カメラを使って設計された視点の変更を説明するために使用します。 これらの動きを同時に複数実行することも完全に可能です。 例えば、シーンをズームインしながらカメラをパンできます。
+
+カメラの動きの大部分は、カメラの参照空間を基準にして記述されていることに注意してください。
+
+行列を格納するための形式は、通常、列優先でフラット化された配列です。 つまり、行列の値は、左上隅から下に向かって書き込まれ、次に右に 1 行移動して、すべての値が配列になるまで繰り返されます。
+
+したがって、次のような行列になります。
+
+
+
+これは、次のように配列形式で表されます。
+
+```js
+let matrixArray = [a1, a2, a3, a4, a5, a6, a7, a8,
+ a9, a10, a11, a12, a13, a14, a15, a16];
+```
+
+この配列では、左端の列にエントリ a1、a2、a3、a4 が含まれています。 一番上の行には、エントリ a1、a5、a9、a13 が含まれています。
+
+ほとんどの WebGL および WebXR のプログラミングは、サードパーティライブラリを使用して行われることを覚えておいてください。 サードパーティライブラリは、コアとなる行列やその他の操作だけでなく、多くの場合、これらの標準的な映画撮影手法のシミュレーションをより簡単にするルーチンを追加することにより、WebGL の基本機能を拡張します。 WebGL を直接使用するのではなく、その 1 つを使用することを強くお勧めします。 このガイドでは WebGL を直接使用しています。 これは、その裏で何が行われているのかをある程度理解し、ライブラリの開発を支援したり、コードを最適化するのに役立つためです。
+
+> **Note:** **注意**: 「カメラを動かす」などのフレーズを使用していますが、実際に行っているのは、カメラの周りの世界全体を動かすことです。 これは、特定の値が機能する方法に影響を与えます。 これらの値については、後で説明します。
+
+### ズーム
+
+最もよく知られているカメラ効果には、ズーム（zoom）があります。 ズームは、レンズの焦点距離を変更することにより、物理的なカメラで実行されます。 これは、レンズ自体の中心とカメラの光センサーの間の距離です。 したがって、ズームは実際にはカメラを動かすことをまったく含みません。 代わりに、ズームショットは、時間の経過とともにカメラの倍率を変化させて、実際にカメラを物理的に動かさなくても、焦点領域がビューアーに近づいたり遠ざかったりするように見せます。 ゆっくりとした動きはシーンに動き、気軽さ、または集中の感覚をもたらすことができ、急速なズームは不安、驚き、または緊張の感覚を生み出すことができます。
+
+ズームはカメラの位置を動かさないので、結果として生じる効果は不自然です。 人間の目にはズームレンズがありません。 物を遠ざけたり、近づけたりして、物を小さくしたり大きくしたりします。 映画撮影では、それは[ドリーショット](#Dolly)と呼ばれます。
+
+3D グラフィックスにも 2 つの手法があり、同一ではありませんが類似した結果を作成でき、その方法はさまざまな状況でより簡単に適用できます。
+
+#### 視野調整によるズーム
+
+カメラの**視野**（field of view、**FOV**）を変更することで、真の「ズーム」に似たことができます。 視野とは、一度に見る必要のある、カメラを囲む可視領域全体の円弧の長さを定義する角度です。 これは実際のカメラの焦点距離の効果であり、真のカメラがないため、FOV を変更することは無難な代案です。
+
+円の円周は 2π⋅r ラジアン（360°）であることを思い出してください。 そのため、これは理論上の最大 FOV です。 ただし、現実的には、人間の目はそこまで見えないだけでなく、モニターや VR ゴーグルなどの表示デバイスを使用すると、視野がさらに狭くなる傾向があります。 人間の目は通常、約 135°（約 2.356 ラジアン）の水平視野と約 180°（π または約 3.142 ラジアン）の垂直視野を持っています。
+
+カメラの FOV を小さくすると、ビューポートに含まれる弧が減少し、ビューにレンダリングされるときにそのコンテンツが拡大します。 これと光学ズーム効果の間には違いがありますが、一般的には仕事を完了するのに十分近い結果です。
+
+次の関数は、指定された視野角と指定されたニアクリッピングプレーンおよびファークリッピングプレーンの距離を統合する透視射影行列を返します。
+
+```js
+function createPerspectiveMatrix(viewport, fovDegrees, nearClip, farClip) {
+ const fovRadians = fovDegrees * (Math.PI / 180.0);
+ const aspectRatio = viewport.width / viewport.height;
+
+ const transform = mat4.create();
+ mat4.perspective(transform, fovRadians, aspectRatio,
+ nearClip, farClip);
+ return transform;
+}
+```
+
+FOV 角度 `fovDegrees` を度数からラジアンに変換し、`viewport` パラメーターで指定された {{domxref("XRViewport")}} のアスペクト比を計算した後、この関数は [glMatrix](http://glmatrix.net/) ライブラリーの [`mat4.perspective()`](http://glmatrix.net/docs/module-mat4.html#.perspective) 関数を使用して、透視行列を計算します。
+
+透視行列は、視野（厳密に言えば、これは*垂直方向*の視野です）、アスペクト比、およびニアクリッピングプレーンおよびファークリッピングプレーンを 4x4 行列の `transform` でカプセル化し、呼び出し元に返します。
+
+ニアクリッピングプレーンは、ディスプレイ面に平行なプレーン（平面）からの距離をメートル単位で表したもので、それよりも近くにあるものは何も描画されません。 そのプレーンのカメラ側に横たわる頂点は描画されません。 逆に、ファークリッピングプレーンは、その先には頂点が描画されないプレーンまでのメートル単位の距離です。
+
+拡大縮小係数（scaling factor）またはパーセントを使用してズームするには、1 倍（通常のサイズの 100%）を許可する FOV の最大値にマップし（これにより、ほとんどのコンテンツが表示されます）、最大倍率をサポートしたい FOV の最大値にマップし、その間の対応する値をマップします。
+
+透視行列を計算することによって各フレームのレンダリングパスを開始する場合、フレームの目的のジオメトリーを生成するために適用する必要がある他のすべての変換をその行列にまとめることができます。 例えば、次のようにです。
+
+```js
+const transform = createPerspectiveMatrix(viewport, 130, 1, 100);
+const translateVec = vec3.fromValues(-trackDistance, -craneDistance, pushDistance);
+mat4.translate(transform, transform, translateVec);
+```
+
+これは、130° の垂直視野を表す透視行列から始まり、次に、[トラック](/ja/docs/Web/API/WebXR_Device_API/Cameras#Trucking_Moving_left_or_right)、[クレーン](/ja/docs/Web/API/WebXR_Device_API/Cameras#Pedestaling_Moving_up_or_down)、および[プッシュ](/ja/docs/Web/API/WebXR_Device_API/Cameras#Dollying_Moving_in_or_out)の動きを含むやり方でカメラを動かす平行移動を適用します。
+
+#### 拡大縮小変換
+
+真の「ズーム」とは異なり、**拡大縮小**（scaling）では、位置または頂点の `x`、`y`、`z` 座標値のそれぞれに、その軸の拡大縮小係数を掛けます。 これらは各軸で同一である場合と、必ずしも同一ではない場合もありますが、ズーム効果に最も近い結果は、それぞれに同じ値を使用する必要があります。 これは、シーン内のすべての頂点に（理想的には頂点シェーダーで）適用する必要があります。
+
+2 倍に拡大する場合は、各成分に 2.0 を掛ける必要があります。 同じ量だけ縮小するには、-2.0 を掛けます。 行列の用語では、これは次のように拡大縮小係数された変換行列を使用して実行されます。
+
+```js
+let scaleTransform = [
+ Sx, 0, 0, 0,
+ 0, Sy, 0, 0,
+ 0, 0, Sz, 0,
+ 0, 0, 0, 1
+];
+```
+
+この行列は、`(Sx, Sy, Sz)` で示される係数で拡大または縮小する変換を表します。 `Sx` は X 軸に沿った拡大縮小係数、`Sy` は Y 軸に沿った拡大縮小係数、`Sz` は Z 軸の係数です。 これらの値のいずれかが他の値と異なる場合、結果は一部の次元で他と比較して異なる伸縮になります。
+
+すべての方向に同じ拡大縮小係数を適用する場合は、単純な関数を作成して拡大縮小変換行列を生成できます。
+
+```js
+function createScalingMatrix(f) {
+ return [
+ f, 0, 0, 0,
+ 0, f, 0, 0,
+ 0, 0, f, 0,
+ 0, 0, 0, 1
+ ];
+}
+```
+
+変換行列を取得したら、変換 `scaleTransform` をベクトル（または頂点）`myVector` に適用するだけです。
+
+```js
+let myVector = [2, 1, -3];
+let scaleTransform = [
+ 2, 0, 0, 0,
+ 0, 2, 0, 0,
+ 0, 0, 2, 0,
+ 0, 0, 0, 1
+];
+vec4.transformMat4(myVector, myVector, scaleTransform);
+```
+
+または、上記の `createScalingMatrix()` 関数を使用して、同じ係数ですべての軸に沿った拡大縮小を使用します。
+
+```js
+let myVector = [2, 1, -3];
+vec4.transformMat4(myVector, myVector, createScalingMatrix(2.0));
+```
+
+### パン（左または右へのヨー）
+
+**パン**（pan）または**ヨー**（yaw）とは、カメラの左から右への回転または右から左への回転であり、それ以外はベースに固定されています。 空間内でのカメラの位置は変化せず、見ている方向のみが変化します。 そして、その方向は水平方向以外に変わりません。 パンは、広大な空間内や広大なオブジェクト上で設定を確立したり、範囲の感覚を提供したりするのに最適です。 あるいは、没入型または VR のシナリオでプレイヤーが頭を回すのをシミュレートするように、左右を見るだけです。
+
+
+
+これを行うには、Y 軸を中心に回転して、カメラの左右の回転をシミュレートする必要があります。 これまでに使用した [glMatrix](http://glmatrix.net/) ライブラリーを使用すると、これは、標準の 4x4 行列を表す `mat4` クラスの `rotateY()` メソッドを使用して実行できます。 行列 `viewMatrix` で定義された視点 を `panAngle` ラジアンで回転するには、次のようにします。
+
+```js
+mat4.rotateY(viewMatrix, viewMatrix, panAngle);
+```
+
+`panAngle` が正の場合、この変換はカメラを右にパンします。 `panAngle` の負の値は左にパンします。
+
+### ティルト（上または下へのピッチ）
+
+カメラを**ティルト**（tilt）または**ピッチ**（pitch）すると、カメラの水平部分をまったく変更せずに、カメラの垂直方向の向きを変更しながら、同じ座標で空間に固定したままにします。 単に上下を指す方向を調整するだけです。 ティルトは、森や山などの背の高いオブジェクトやシーンの範囲をキャプチャするのに適していますが、重要なキャラクターやロケールを紹介したり、畏敬の念を起こさせたりする一般的な方法でもあります。 もちろん、プレイヤーが上下を見るサポートを実装するのにも役立ちます。
+
+
+
+したがって、カメラをティルトすることは、X 軸を中心にカメラを回転させることで実現できます。 これは、glMatrix の `mat4` クラスの `rotateX()` メソッドなど、行列計算ライブラリーの適切なメソッドを使用して実行できます。
+
+```js
+mat4.rotateX(viewMatrix, viewMatrix, angle);
+```
+
+`angle` の正の値はカメラを下に傾け、`angle` の負の値は上に傾けます。
+
+### ドリー（前または後ろへの移動）
+
+**ドリー**（dolly）ショットは、カメラ全体が前後に移動するショットです。 古典的な映画制作では、これは通常、カメラをトラック（track）上または移動中の車両に取り付けて行われます。 結果のモーションは、特にショットの焦点である人物またはオブジェクトと一緒に移動する場合に、印象的で滑らかな効果を作成できます。
+
+
+
+ドリーショットとズームはほぼ同じように見えるはずですが、実際はそうではありません。 ズームがカメラの焦点距離を変更するという事実は、ターゲットがフレーム内で大きくなったり小さくなったりしても、ターゲットとその周囲との間の空間関係が変化しないことを意味します。 一方、ドリーショットは、実際にカメラを動かすことで、物理的な動きの感覚を再現し、シーン内のオブジェクトの関係を、ショットのターゲットに近づいたり遠ざかったりしながらオブジェクトを通り過ぎていく中で、期待通りにシフトさせます。
+
+ドリー操作を実行するには、カメラビューを Z 軸に沿って前後に平行移動します。
+
+```js
+mat4.translate(viewMatrix, viewMatrix, [0, 0, dollyDistance]);
+```
+
+ここで、`[0, 0, dollyDistance]` はベクトルで、`dollyDistance` はカメラをドリーする距離です。 これはカメラの周りの世界全体を動かすことで機能するため、ここで実際に起こるのは、カメラに対して相対的に `dollyDistance` メートルだけ世界全体が Z 軸に沿って動くということです。 `dollyDistance` が正の場合、世界はその量だけユーザーに向かって移動し、カメラがシーンに近づきます。 反対に、`dollyDistance` の負の値は、ユーザーから世界を遠ざけ、カメラがターゲットから後方に動いて見えるようにします。
+
+### トラック（左または右への移動）
+
+物理的なカメラを使用した**トラック**（truck）は、ドリーと同じ種類の索具装置を使用しますが、カメラを前後に移動するのではなく、左から右またはその逆に移動します。 カメラはまったく回転しないため、ショットの焦点が画面からゆっくりと外に出ます。 これは、シーンで感情を確立しようとするときに、集中、時間の経過、または熟考を暗示することができます。 また、カメラがキャラクターと一緒にすべるように動き、シーンを歩いていく、「歩きながら話す」シーンでも頻繁に使用されます。
+
+
+
+カメラを左右に移動するには、目的のカメラの動きとは反対の方向に、X 軸に沿ってビュー行列を移動します。
+
+```js
+mat4.translate(viewMatrix, viewMatrix, [-truckDistance, 0, 0]);
+```
+
+ベクトル `[-truckDistance, 0, 0]` に注意してください。 これは、トラックの操作がカメラではなく世界を動かすことによって機能するという事実を補います。 全世界を `truckDistance` によって示される方向とは反対の方向に移動することにより、カメラを予想される方向に移動する効果が得られます。 このように、`truckDistance` の正の値は、カメラを右に移動し（世界を左に移動することにより）、`truckDistance` の負の値は、カメラを左に移動します（世界を右に移動することにより）。
+
+### ペデスタル（上または下への移動）
+
+**ペデスタル**（pedestal、台座）ショットは、カメラを床に対して水平に固定したまま、まっすぐ上下に動かしたものです。 背が高くなったり低くなったりする台座（またはポール）の上のカメラで撮影します。 これは、背が高くなったり低くなったり、椅子から立ち上がったり座ったりしている、あるいは単にまっすぐ上下に動いている被写体を追跡するときに役立ちます。
+
+
+
+これは、クレーンに取り付けられたカメラを上下に動かす**クレーン**（crane）ショットに似ています。 ペデスタルまたはクレーンのモーションを実行するには、ビューを Y 軸に沿って、カメラを移動する方向とは反対の方向に移動します。
+
+```js
+mat4.translate(viewMatrix, viewMatrix, [0, -pedestalDistance, 0]);
+```
+
+`pedestalDistance` の値を反転することで、実際にはカメラではなく世界を動かしているという事実を補正します。 したがって、`pedestalDistance` の正の値はカメラを上に移動し、負の値は下に移動します。
+
+### カント（左右へのロール）
+
+**カント**（cant）または**ロール**（roll）は、ロール軸を中心としたカメラの回転です。 つまり、カメラは空間に固定されたままで、同じ位置に向けられたままですが、カメラの上部が別の方向に向けられるように回転します。
+
+
+
+これは、手のひらを下にして、手を開いた状態で腕を前に出すことで視覚化できます。 自分の手がカメラで、手の甲がカメラの上部を表しているとします。 「カメラ」が上下逆になるように手を回転させます。 これが、ロール軸の周りに手をカントしたところです。 映画撮影では、カントを使用して、波や乱気流などのさまざまなタイプの非定常モーションをシミュレートできますが、劇的な効果を得るためにも使用できます。
+
+glMatrix を使用して Z 軸を中心にこの回転を実行するには、次のようにします。
+
+```js
+mat4.rotateZ(viewMatrix, viewMatrix, cantAngle);
+```
+
+## 動きを組み合わせる
+
+パンしながらズームしたり、同時にティルトしたりカントしたりするなど、複数の動作を同時に実行できます。
+
+### 複数の軸に沿った平行移動
+
+複数の軸に沿った平行移動は非常に簡単です。 以前は、次のような平行移動を行っていました。
+
+```js
+mat4.translate(viewMatrix, viewMatrix, [-truckDistance, 0, 0]);
+mat4.translate(viewMatrix, viewMatrix, [0, -pedestalDistance, 0]);
+mat4.translate(viewMatrix, viewMatrix, [0, 0, dollyDistance]);
+```
+
+ここでの解決策は明白です。 平行移動は、各軸に沿って移動する距離を提供するベクトルとして表現されるため、次のようにそれらを組み合わせることができます。
+
+```js
+mat4.translate(viewMatrix, viewMatrix,
+ [-truckDistance, -pedestalDistance, dollyDistance]);
+```
+
+これにより、行列 `viewMatrix` の原点が各軸に沿って指定された量だけシフトします。
+
+### 複数の軸を中心に回転
+
+複数の軸の周りの回転を、回転の共有軸を表すクォータニオンの周りの単一の回転に結合することもできます。 回転を個別に実行するには、[オイラー角](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%A4%E3%83%A9%E3%83%BC%E8%A7%92)（[Euler angles](https://en.wikipedia.org/wiki/Euler_angles)、各軸の周りの別々の角度）を使用して、次のようにピッチ、ヨー、ロールを適用します。
+
+```js
+mat4.rotateX(viewMatrix, viewMatrix, pitchAngle);
+mat4.rotateY(viewMatrix, viewMatrix, yawAngle);
+mat4.rotateZ(viewMatrix, viewMatrix, rollAngle);
+```
+
+代わりに、次のようにオイラー角から回転軸を組み合わせた{{Glossary("quaternion","クォータニオン")}}を作成し、乗算を使用して行列を回転させることができます。
+
+```js
+const axisQuat = quat.create();
+const rotateMatrix = mat4.create();
+quat.fromEuler(axisQuat, pitchAngle, yawAngle, rollAngle);
+mat4.fromQuat(rotateMatrix, axisQuat);
+mat4.multiply(viewMatrix, viewMatrix, rotateMatrix);
+```
+
+これにより、ピッチ、ヨー、ロールのオイラー角が 3 つの回転すべてを表すクォータニオンに変換されます。 次に、これは回転変換行列に変換されます。 そして最後に、ビュー行列に回転変換を掛けて、回転を完了します。
+
+## WebXR で 3D を表現
+
+WebXR は 3D グラフィックスをさらに一歩進め、ゴーグルやヘッドセットなどの特別なビジュアルハードウェアを使用して 3D グラフィックスを提示し、実際に 3 次元で存在するように見える 3D グラフィックスを作成できるようにします。 これは、現実世界のコンテキスト内にある可能性があります（拡張現実の場合）。
+
+奥行きを知覚するには、シーンに 2 つのパースペクティブが必要です。 2 つのビューを比較することにより、オブジェクトの奥行き、ひいてはビューアーと見ているオブジェクトの間の距離を認識することができます。 これが、わずかに間隔を空けて 2 つの目がある理由です。 一度に片方の目を閉じ、2 つの目を交互に切り替えると、この事実を思い出すことができます。 左目は鼻の左側を見ることができますが、右側は見えませんし、右目は鼻の右側を見ることができますが、左側は見えません。 これは、それぞれの目に見える違いの 1 つにすぎません。
+
+私たちの脳は、視野全体の光レベルと波長に関する 2 つのデータをそれぞれの目から受け取ります。 脳はこのデータを使用して、2 つのパースペクティブ間のわずかな違いを使用して奥行きと距離を把握し、心の中でシーンを構築します。
+
+### シーンのレンダリング
+
+XR（仮想現実（VR）と拡張現実（AR）の両方を含む省略表現）のヘッドセットは、2 つの目で得られるビューと同じように、シーンの 2 つのビューを互いに少しずらして描画することで、3D 画像を提示します。 これらのビューは、それぞれの目に別々に送られ、脳が心の中で 3D 画像を構築するために必要とするデータを収集できるようにします。
+
+これを行うために、WebXR はレンダラーに、動画の各フレームに対して 2 回（各目に 1 回）シーンを描画するように要求します。 2 つのビューは、同じフレームバッファーにレンダリングされます。 ビューの 1 つは左側にあり、もう 1 つは右側にあります。 XR デバイスは、画面とレンズを使用して、生成された画像の左半分を左目に提示し、右半分を右目に提示します。
+
+例えば、2560x1440 ピクセルのフレームバッファーを使用するデバイスを考えてみます。 これを 2 つの部分に分割すると（各目に対して半分）、各目のビューが 1280x1440 ピクセルの解像度で描画されます。 概念的には次のようになります。
+
+
+
+コードは、{{domxref("XRSession")}} のメソッド {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出して次のアニメーションフレームを提供することを WebXR エンジンに通知し、アニメーションのフレームをレンダリングするコールバック関数を提供します。 ブラウザーがシーンをレンダリングする必要がある場合、ブラウザーはコールバックを呼び出し、入力パラメーターとして現在の時刻と正しいフレームをレンダリングするために必要なデータをカプセル化した {{domxref("XRFrame")}} を提供します。
+
+この情報には、シーン内のビューアーの位置と向きを説明する {{domxref("XRViewerPose")}} と、それぞれがシーンの 1 つのパースペクティブを表す {{domxref("XRView")}} オブジェクトのリストが含まれます。 現在の WebXR 実装では、このリストには 3 つ以上のエントリはありません。 1 つは左目の位置と視野角を示し、もう 1 つは右目に対して同じことを行います。 与えられた `XRView` がどの目を表すかは、その {{domxref("XRView.eye", "eye")}} プロパティの値（`left` または `right` の文字列）を確認することでわかります（3 番目の可能な値 `none` は、理論的には別の視点を表すために使用できますが、これは現在の API では完全には利用できません）。
+
+### フレームコールバックの例
+
+フレームをレンダリングするためのかなり基本的な（ただし典型的な）コールバックは次のようになります。
+
+```js
+function myAnimationFrameCallback(time, frame) {
+ let adjustedRefSpace = applyPositionOffsets(xrReferenceSpace);
+ let pose = frame.getViewerPose(adjustedRefSpace);
+
+ animationFrameRequestID = frame.session.requestAnimationFrame(myAnimationFrameCallback);
+
+ if (pose) {
+ let glLayer = frame.session.renderState.baseLayer;
+ gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
+ CheckGLError("Binding the framebuffer");
+
+ gl.clearColor(0, 0, 0, 1.0);
+ gl.clearDepth(1.0);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+ CheckGLError("Clearing the framebuffer");
+
+ const deltaTime = (time - lastFrameTime) * 0.001;
+ lastFrameTime = time;
+
+ for (let view of pose.views) {
+ let viewport = glLayer.getViewport(view);
+ gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+ CheckGLError(`Setting viewport for eye: ${view.eye}`);
+
+ myRenderScene(gl, view, sceneData, deltaTime);
+ }
+ }
+}
+```
+
+コールバックは、カスタム関数 `applyPositionOffsets()` を呼び出すことから始まります。 この関数は、参照空間を取り、キーボードやマウスのような WebXR によって制御されていないデバイスからのユーザー入力などを考慮するために必要な変更を変換行列に適用します。 この関数によって返された調整済みの {{domxref("XRReferenceSpace")}} は、{{domxref("XRFrame")}} のメソッド {{domxref("XRFrame.getViewerPose", "getViewerPose()")}} に渡されて、ビューアーの位置と視野角を表す {{domxref("XRViewerPose")}} を取得します。
+
+次に、動画の次のフレームをレンダリングするためのリクエストをキューに入れます。 そのためには `requestAnimationFrame()` を再度呼び出すだけで、後でそれを行うことを心配する必要はありません。
+
+次に、シーンをレンダリングします。 ポーズの取得に成功した場合、セッションの {{domxref("XRSession.renderState", "renderState")}} オブジェクトの {{domxref("XRRenderState.baseLayer", "baseLayer")}} プロパティから、レンダリングに使用する必要がある {{domxref("XRWebGLLayer")}} を取得します。 これを {{domxref("WebGLRenderingContext")}} のメソッド {{domxref("WebGLRenderingContext.bindFrameBuffer", "gl.bindFrameBuffer()")}} を使用して WebGL の `gl.FRAMEBUFFER` ターゲットにバインドします。
+
+次に、レンダーラーがすべてのピクセルに触れるわけではないため、フレームバッファーをクリアして、既知の状態から開始するようにします。 {{domxref("WebGLRenderingContext.clearColor", "gl.clearColor()")}} を使用してクリアカラーを不透明な黒に設定し、{{domxref("WebGLRenderingContext")}} のメソッド {{domxref("WebGLRenderingContext.clearDepth", "gl.clearDepth()")}} を呼び出して奥行きバッファーを 1.0 にクリアする値を設定します。 次に、{{domxref("WebGLRenderingContext")}} のメソッド {{domxref("WebGLRenderingContext.clear", "gl.clear()")}} を呼び出します。 これにより、フレームバッファー（マスクパラメーターに `gl.COLOR_BUFFER_BIT` が含まれるため）と奥行きバッファー（`gl.DEPTH_BUFFER_BIT` が含まれるため）がクリアされます。
+
+次に、フレームの希望するレンダリング時刻と最後のフレームが描画された時刻を比較して、前のフレームがレンダリングされてからの経過時間を判断します。 この値はマイクロ秒単位なので、0.001 を掛けて（または 1000 で割り算して）秒に変換します。
+
+次に、{{domxref("XRViewerPose")}} 配列の {{domxref("XRViewerPose.views", "views")}} で見つかったポーズのビューをループします。 ビューごとに、使用する適切なビューポートを {{domxref("XRWebGLLayer")}} に要求し、位置と大きさの情報を {{domxref("WebGLRenderingContext.viewport", "gl.viewport()")}} に渡して、一致するように WebGL ビューポートを構成します。 これによりレンダリングが制限され、{{domxref("XRView.eye", "view.eye")}} で識別される目で見た画像を表すフレームバッファーの部分にのみ描画できるようになります。
+
+制約が確立され、必要なすべての準備が整ったら、カスタム関数 `myRenderScene()` を呼び出して、実際に計算と WebGL レンダリングを実行してフレームをレンダリングします。 この場合、WebGL コンテキストの `gl`、{{domxref("XRView")}} の `view`、`sceneData` オブジェクト（頂点シェーダー、フラグメントシェーダー、頂点リスト、テクスチャなどを含む）、および `deltaTime` を渡しています。 `deltaTime` は、前のフレームからどれだけの時間が経過したかを示します。 これにより、アニメーションをどこまで進めるかがわかります。
+
+この関数が戻ると、WebXR によって使用されている WebGL フレームバッファーには、シーンの 2 つのコピーがあり、それぞれがフレームの半分を占めています。 1 つは左目用、もう 1 つは右目用です。 これが、XR ソフトウェアとドライバーを介してヘッドセットに到達し、各半分が適切な目に表示されます。
+
+## 関連情報
+
+- [幾何学と参照空間](/ja/docs/Web/API/WebXR_Device_API/Geometry)
+- [WebGL モデル ビュー 射影](/ja/docs/Web/API/WebGL_API/WebGL_model_view_projection)
+- [ウェブの行列計算](/ja/docs/Web/API/WebGL_API/Matrix_math_for_the_web)
+- [移動、向き、モーション: WebXR の例](/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion)
diff --git a/files/ja/web/api/webxr_device_api/rendering/index.html b/files/ja/web/api/webxr_device_api/rendering/index.html
deleted file mode 100644
index 43e40e30288619..00000000000000
--- a/files/ja/web/api/webxr_device_api/rendering/index.html
+++ /dev/null
@@ -1,363 +0,0 @@
----
-title: レンダリングと WebXR フレームアニメーションコールバック
-slug: Web/API/WebXR_Device_API/Rendering
-tags:
- - API
- - AR
- - Animation
- - Drawing
- - Frames
- - Games
- - Guide
- - Intermediate
- - Reality
- - Scene
- - VR
- - Virtual
- - WebXR
- - WebXR API
- - WebXR Device API
- - XR
- - augmented
- - display
- - rendering
- - requestAnimationFrame
-translation_of: Web/API/WebXR_Device_API/Rendering
----
-{{DefaultAPISidebar("WebXR Device API")}}
-
-WebXR 環境をセットアップし、進行中の XR 環境セッションを表す {{domxref("XRSession")}} を作成したら、レンダリングのためにシーンのフレームを XR デバイスに提供する必要があります。 この記事では、{{domxref("XRSession")}} を使用して各フレームを表す {{domxref("XRFrame")}} オブジェクトを取得し、それを使用して、XR デバイスに配信するためのフレームバッファーを準備し、レンダリングループで XR シーンのフレームをデバイスに駆動するプロセスについて説明します。
-
-仮想環境をレンダリングする前に、navigator.xr.requestSession() メソッドを使用して {{domxref("XRSession")}} を作成することにより、WebXR セッションを確立する必要があります。 また、セッションをフレームバッファーに関連付けて、他のセットアップタスクを実行する必要もあります。 これらのセットアップタスクについては、WebXR セッションの起動と停止の記事で説明されています。
-
-レンダラーの準備
-
-XR セッションをセットアップし、WebGL フレームバッファーを接続し、WebGL をシーンをレンダリングするために必要なデータで準備したら、レンダラーをセットアップして実行を開始できます。 これは、描画する参照空間を取得することから始まります。 その原点と方向は、ビューアーの開始位置と視線方向に設定します。 それが手に入ったら、次にシーンをレンダリングするためにフレームバッファーが必要になったときにブラウザーがあなたのレンダリング関数を呼び出すように要求します。 これは、{{domxref("XRSession")}} メソッドの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出すことによって行います。
-
-したがって、レンダラーの手はじめは次のようになります。
-
-let worldRefSpace;
-
-async function runXR(xrSession) {
- worldRefSpace = await xrSession.requestReferenceSpace("immersive-vr");
-
- if (worldRefSpace) {
- viewerRefSpace = worldRefSpace.getOffsetReferenceSpace(
- new XRRigidTransform(viewerStartPosition, viewerStartOrientation));
- animationFrameRequestID = xrSession.requestAnimationFrame(myDrawFrame);
- }
-}
-
-
-没入型世界の参照空間を取得した後、これは、その位置と方向を表す {{domxref("XRRigidTransform")}} を作成し、{{domxref("XRReferenceSpace")}} のメソッド {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を呼び出すことにより、ビューアーの位置と方向を表すオフセット参照空間を作成します。
-
-次に、{{domxref("XRSession")}} のメソッド {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出して最初のアニメーションフレームをスケジュールし、フレームをレンダリングするためのコールバック関数 myDrawFrame() を提供します。
-
-このコードにはループがないことに注意してください！ 代わりに、フレームレンダリングコード（この場合は myDrawFrame() という関数）が、もう一度 requestAnimationFrame() を呼び出して別のフレームを描画する時刻をスケジュールします。
-
-リフレッシュレートとフレームレート
-
-画面が最後にリフレッシュされてから {{domxref("XRSession")}} のメソッド {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出したとすると、ブラウザーは、アプリまたはサイトウィンドウを再描画する準備ができるたびにフレームレンダリングコールバックを呼び出します。 このコンテキストでは、「再描画」とは、画面に表示されるコンテンツが、DOM およびその中の要素が現時点で提示しようとしているものと一致することを保証するプロセスを意味します。
-
-ハードウェア垂直リフレッシュレート
-
-ブラウザーは、WebXR コンテンツが表示されている {{HTMLElement("canvas")}} をリフレッシュする準備ができると、フレームレンダリングコールバックを呼び出します。 このコールバックは、指定されたタイムスタンプと、モデルやテクスチャーなどの他の関連データ、およびアプリケーションの状態を使用して、指定された時刻に表示されるように、シーンを WebGL バックバッファーにレンダリングします。 コールバックが戻ると、ブラウザーは最後に画面がリフレッシュされてから変更されたものと共に、そのバックバッファーをディスプレイまたは XR デバイスに転送します。
-
-歴史的に、ディスプレイは毎秒 60 回リフレッシュされています。 これは、タイミングを合わせるために、米国では 1 秒あたり 60 回（ヨーロッパでは 50 回）循環する AC 配電網の電流フロー波形を使用した初期のディスプレイによるものです。 次のように、このことはいくつかの異なる名前で示されていますが、それらはすべて同等またはほぼ同じです。
-
-
- - リフレッシュレート（Refresh rate）
- - 垂直リフレッシュレート（Vertical refresh rate）
- - 垂直帰線消去レート（Vertical blanking rate、VBL）
- - 垂直同期レート（Vertical sync rate）
-
-
-他にも同様の用語が使用されていますが、それが何と呼ばれるかに関係なく、適用される測定単位はヘルツ（Hz）です。 1 秒あたり 60 回リフレッシュするディスプレイには、60 Hz のリフレッシュレートがあります。 つまり、1 秒間に表示できるフレームの最大数は 60 です。 それを超える 1 秒あたりのフレーム数に関係なく、1 秒の間に 60 フレームしか画面に表示されません。
-
-ただし、すべてのディスプレイが 60 Hz で動作するわけではありません。 最近では、より高性能のディスプレイがはるかに高いリフレッシュレートを使用し始めています。 例えば、120 Hz、つまり 120 フレーム/秒のディスプレイは、ますます一般的になっています。 ブラウザーは常にディスプレイと同じレートでリフレッシュを試みます。 つまり、一部のコンピューターでは、コールバックは 1 秒あたり最大 60 回実行されますが、他のコンピューターでは、フレームレートによって異なり 1 秒あたり 90 または 120 回、あるいはそれ以上呼び出される場合があります。
-
-各フレームのレンダリングに利用できる時間
-
-これにより、フレーム間で利用可能なほとんどの時間を使用することが重要になります。 ユーザーのデバイスが 60 Hz のディスプレイを使用している場合、コールバックは 1 秒あたり最大 60 回呼び出され、それよりも頻繁に呼び出されることはないので、確実にできることをすることが目標です。 これを実現するには、メインスレッド外で可能な限り実行し、フレームレンダリングのコールバックをできるだけ効率的にします。 以下の図は、時間の 60 Hz ブロックへの分割を示しています。 各ブロックは、少なくとも部分的にシーンのレンダリングに使用されています。
-
-
-
-コンピュータのビジー状態が増すにつれて、コールバックをフレームごとに正確に呼び出すことができなくなり、フレームをスキップしなければならない場合があるため、これは重要です。 これをコマ落ち（dropping frames）と呼びます。 これは、レンダリングが遅延したため、またはレンダリング自体に使用可能な時間よりも長い時間がかかったために、フレームのレンダリングにかかる時間がフレーム間で使用可能な時間を超えると発生します。
-
-
-
-上の図では、フレーム 3 がペイントされる予定になるまでフレーム 2 がレンダリングを完了しなかったため、フレーム 3 はコマ落ちしています。 次に描画されるフレームはフレーム 4 になります。 これは、レンダリングコールバックに渡されるタイムスタンプが役立つもう1つの理由です。 フレーム番号ではなく時間に基づいてシーンを構成することにより、レンダリングされたフレームが遅れることなく、期待したものと一致することを保証できます。
-
-フレームがコマ落ちすると、影響を受ける表示領域のコンテンツは、フレームループを通過しても変更されません。 そのため、ときどきフレームがコマ落ちすることは通常あまり目立ちませんが、頻繁に発生し始めた場合（特に、非常に短い時間に複数のフレームがコマ落ちした場合）は、不快になり、ディスプレイが使用できなくなる可能性があります。
-
-幸い、フレーム間で使用できる時間を 1/refreshRate 秒として簡単に計算できます。 つまり、1 をディスプレイのリフレッシュレートで除算します。 結果の値は、フレームがコマ落ちしないようにするために、各フレームをレンダリングするのに使用できる時間です。 例えば、60 Hz のディスプレイでは、1 フレームのレンダリングに 1/60 秒、つまり 0.0166667 秒が使用されます。 また、デバイスのリフレッシュレートが 120 Hz の場合、コマ落ちを避けたい場合、各フレームをレンダリングするのに必要な時間は 0.00883333 秒しかありません。
-
-ただし、ハードウェアが実際には 120 Hz である場合でも、毎秒 60 回リフレッシュするだけで十分であり、通常はそれをターゲットとすることをお勧めします。 60 FPS はすでに、ほとんどの人がアニメーションが単なる高速の一連の静止画像ではないことを簡単に検出できるポイントを超えています。 つまり、判別がつかないときは、ディスプレイが 60 Hz でリフレッシュされていると想定できます。 コードが適切に記述されている限り、すべてが問題なく動作します。
-
-
-
-明らかに、フレームごとにシーンをレンダリングする時間はほとんどありません。 それだけでなく、レンダラー自体がその時間よりも長く実行されると、フレームがコマ落ちするだけでなく、その時間が完全に無駄になり、他のコードがそのフレームに対してまったく実行されなくなる可能性があります。
-
-それだけでなく、レンダリングが垂直リフレッシュ境界をまたぐ場合、ティアリング効果（tearing effect）が発生する可能性があります。 ティアリングは、前のフレームがまだ画面に描画されている間にディスプレイハードウェアが次のリフレッシュサイクルを開始すると発生します。 その結果、画面の上部に新しいフレームが表示されますが、フレームの下部には、前のフレームと場合によってはその前のフレームの組み合わせが表示される視覚効果となります。
-
-したがって、あなたの使命は、利用可能な時間を超過したり、コマ落ちやメインスレッドの過度の悪用を引き起こしたりしないように、コードを十分にタイトかつ軽量に保つことです。
-
-これらの理由により、レンダラーがかなり小さくて軽量で、ほとんど何もすることがないのでない限り、ブラウザーが他の処理を行う間に次のフレームを計算できるように、できる限りすべてをワーカーにオフロードすることを検討する必要があります。 フレームが実際に呼び出される前に計算とデータを準備するだけで、サイトまたはアプリをより効率的にレンダリングし、メインスレッドのパフォーマンスを向上させ、一般的にユーザーエクスペリエンスを向上させることができます。
-
-幸い、レンダリングのニーズが特に重い場合は、影響をさらに減らし、パフォーマンスを最適化するために使用できるいくつかのトリックがあります。 WebXR パフォーマンスガイドを参照して、パフォーマンスをできる限り向上させるための推奨事項とヒントを確認してください。
-
-WebXR フレーム
-
-フレームレンダリングコールバック関数は、2つのパラメーターを入力として受け取ります。 フレームが対応する時刻と、その時刻のシーンの状態を記述する {{domxref("XRFrame")}} オブジェクトです。
-
-3D の光学
-
-私たちが2つの目を持つには理由があります。 2つの目を持つことで、それぞれが本質的にわずかに異なる角度から世界を見ることができます。 それらは既知の固定距離だけ離れているため、私たちの脳は基本的な幾何学と三角法を実行し、その情報から 3D の実在の本質を理解できます。 また、遠近法（perspective）、大きさの違い、さらには通常、3番目の次元の詳細を理解するために物事がどのように見えるかについての理解も利用します。 これらの要因は、とりわけ、私たちの奥行き知覚（depth perception）の源です。
-
-グラフィックスをレンダリングするときに3次元の幻想を作成するには、これらの要因をできるだけ多くシミュレートする必要があります。 これらをシミュレートするほど、そして正確に行うほど、人間の脳をだまして 3D で画像を知覚させることができます。 XR の利点は、古典的な単眼テクニックを使用して 3D グラフィックス（遠近法、大きさ、シミュレートされた視差）をシミュレートできるだけでなく、アニメーションのフレームごとに、各目につき1回ずつシーンを2回レンダリングすることで、両眼視（つまり、2つの目を使用した視覚）をシミュレートできることです。
-
-典型的な人間の瞳孔間距離（pupillary distance、瞳孔の中心間の距離）は、54 〜 74 ミリメートル（0.054 〜 0.074 メートル）です。 したがって、ビューアーの頭の中心が [0.0, 2.0, 0.0]（水平方向の空間の中心で地上レベルの約 2 メートル）にある場合、まず [-0.032, 2.0, 0.0]（中心から左に 32 mm）からシーンをレンダリングし、次に [0.032, 2.0, 0.0]（中心から右に 32 mm）で再びレンダリングする必要があります。 このようにして、ビューアーの目の位置を人間の平均瞳孔距離 64 mm に配置します。
-
-その距離（または XR システムが使用するように構成されている瞳孔間距離）は、網膜歪覚（各網膜の見え方の違い）と視差効果によって脳がオブジェクトまでの距離とオブジェクトの奥行きを計算できるようにするために、私たちの心に十分な違いを見せるのに十分です。 これにより、網膜が 2D 表面にすぎないにもかかわらず、3次元を知覚できるようになります。
-
-これは下の図に示されています。 下の図では、それぞれの目がビューアーの真正面にあるさいころをどのように認識するかを示しています。 この図では、説明のために一部の点で効果を誇張していますが、概念は同じです。 各目は、境界が目の前の円弧を形成する領域を見ます。 それぞれの目は頭の中心線の片側または反対側にオフセットされ、それぞれの目はほぼ同じ視野を見るので、その結果、それぞれの目は、その前にある世界のわずかに異なる部分を別の角度から見ることができます。
-
-
-
-左目はさいころを中央から少し左に見、右目はさいころを中央から少し右に見ます。 その結果、左目はオブジェクトの左側が少しだけ見え、右側が少し見えません。 逆も同様です。 これらの2つの画像は網膜に焦点が合わせられ、結果の信号は視神経を介して後頭葉の後部にある脳の視覚皮質に送信されます。
-
-脳はこれらの信号を左目と右目から受け取り、ビューアーの脳内に世界の単一の統一された 3D 画像を構成し、その画像を見ます。 また、左目と右目で見られるものの違いにより、脳はオブジェクトの奥行きや大きさなどに関する多くの情報を推測できます。 推測された奥行き情報を、遠近法、影、これらの関係の意味の記憶などの他の手がかりと組み合わせることで、私たちの周りの世界について多くを理解することができます。
-
-フレーム、ポーズ、ビュー、フレームバッファー
-
-シーンのある瞬間の状態を表す XRFrame を取得したら、ビューアーを基準にしてシーン内のオブジェクトの位置を決定し、レンダリングできるようにする必要があります。 参照空間に対するビューアーの位置と方向は、{{domxref("XRFrame")}} のメソッド {{domxref("XRFrame.getViewerPose", "getViewerPose()")}} を呼び出して取得した {{domxref("XRViewerPose")}} で表されます。
-
-XRFrame は、あなたの世界内のオブジェクトの位置または方向を直接追跡しません。 代わりに、位置と方向をシーンの座標系に変換する方法を提供し、ビューアーの位置と方向のデータを XR ハードウェアから収集し、あなたが構成した参照空間に変換して、フレームレンダリングコードにタイムスタンプ付きで配信します。 そのタイムスタンプとあなた独自のデータを使用して、シーンのレンダリング方法を決定します。
-
-シーンを2回レンダリングした後（フレームバッファーの左半分に1回、フレームバッファーの右半分に1回）、フレームバッファーは XR ハードウェアに送信され、フレームバッファーの各半分が対応する目に表示されます。 これは、多くの場合（常にではありません）、画像を1つの画面に描画し、レンズを使用してその画像の正しい半分を各目に転送します。
-
-3D が WebXR によってどのように表現されるかについて詳しくは、視点とビューアー: WebXR でのカメラのシミュレーションの WebXR による 3D の表現をご覧ください。
-
-シーンを描く
-
-ブラウザーがシーンの次のフレームをペイントできるようにフレームバッファーを準備するときが来たら、requestAnimationFrame() に指定した関数が呼び出されます。 それは、描画するフレームの時刻と、レンダリングする必要のあるフレームのシーンの状態に関する詳細を提供する {{domxref("XRFrame")}} オブジェクトを入力として受け取ります。
-
-理想的には、このコードを 60 FPS のフレームレートに十分か可能な限りそれに近い速さを維持することが必要です。 この1つの関数にはあなたのコードだけではないことを思い出してください。 メインスレッドがフレーム自体の持続時間よりもフレームあたりの時間を長く実行する必要がないことを確認する必要があります。
-
-基本的なレンダラー
-
-このバージョンの WebXR レンダリングコールバックでは、比較的単純なプロジェクトに最適な非常に単純なアプローチを使用しています。 この疑似コードは、そのプロセスの概要を示しています。
-
-for each view in the pose's views list:
- get the WebXR GL layer's viewport
- set the WebGL viewport to match
- for each object in the scene
- bindProgram()
- bindVertices()
- bindMatrices()
- bindUniforms()
- bindBuffers()
- bindTextures()
- drawMyObject()
-
-
-簡単に言えば、この形式のレンダラーはビュー優先順（view-first order）を使用しています。 すべてのオブジェクトを1つのビューに描画してから、同じオブジェクトのセットを他のビューにレンダリングして、XR デバイスのディスプレイを構成する2つのビューのそれぞれを続けてレンダリングします。 その結果、オブジェクトを描画するために必要なデータの多くは、フレームごとに2回 GPU に送信されるため、多くの複製された作業があります。 ただし、これは既存の WebGL コードの移植を簡略化し、多くの場合、この作業を行うのに十分なほど優れているため、最初にこの方法を見ていきます。
-
-そのフレームのシーンを構成する次のオブジェクトに進む前に、各オブジェクトを各目に対して1回ずつ、2回続けてレンダリングする（つまり、オブジェクト優先順（object-first order）でレンダリングする）代替アプローチについては、オブジェクト優先順でレンダリングすることによる最適化を参照してください。
-
-レンダリングコールバックのサンプル
-
-この基本的なパターンに従う実際のコードを見てみましょう。 上記の例では、この関数に myDrawFrame() という名前を付けたので、ここでは引き続きこれを使用します。
-
-let lastFrameTime = 0;
-
-function myDrawFrame(currentFrameTime, frame) {
- let session = frame.session;
- let viewerPose;
-
- // 時間が来たらペイントされる次のフレームをスケジュールします。
-
- animationFrameRequestID = session.requestAnimationFrame(myDrawFrame);
-
- // ビューアーの位置と方向を表す XRViewerPose を取得します。
- // 成功した場合、フレームをレンダリングします。
-
- viewerPose = frame.getViewerPose(viewerRefSpace);
- if (viewerPose) {
- let glLayer = session.renderState.baseLayer;
- gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
-
- // まず、色と奥行きのフレームバッファーを消去します。
-
- gl.clearColor(0, 0, 0, 1.0);
- gl.clearDepth(1.0);
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
- // 最後のフレームがレンダリングされてからの経過時間を計算します。
- // この値を使用して、アニメーションが意図したとおりの速度で実行されるようにします。
-
- const deltaTime = currentFrameTime - lastFrameTime;
- lastFrameTime = currentFrameTime;
-
- // 次に、セッションのビューごとにシーンレンダリングコードを1回呼び出します。
-
- for (let view of viewerPose.views) {
- let viewport = glLayer.getViewport(view);
- gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
- myDrawSceneIntoView(view, deltaTime);
- }
- }
-}
-
-
-myDrawFrame() 関数は、frame パラメーターで指定された {{domxref("XRFrame")}} オブジェクトから {{domxref("XRSession")}} を取得し、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、次のフレームのレンダリングをすぐにスケジュールします。 これにより、すぐにキューに入ることが保証され、myDrawFrame() 関数のこの反復で費やされた残りの時間は、次のフレームを描画するタイミングにカウントされます。
-
-次に、フレームの {{domxref("XRFrame.getViewerPose", "getViewerPose()")}} メソッドを使用して、ビューアーのポーズ（その位置と方向）を表す {{domxref("XRViewerPose")}} オブジェクトを取得し、WebXR セッションのセットアップ中に以前に取得した viewerRefSpace からビューアーの参照空間を渡します。
-
-ビューアーのポーズを手にすると、フレームのレンダリングを開始できます。 最初のステップは、WebXR デバイスがフレームを描画したいフレームバッファーへのアクセスを取得することです。 これは、セッションの {{domxref("XRSession.renderState", "renderState")}} オブジェクトの {{domxref("XRRenderState.baseLayer", "baseLayer")}} プロパティからターゲット WebGL レイヤーを取得してから、その {{domxref("XRWebGLLayer")}} オブジェクトから {{domxref("XRWebGLLayer.framebuffer", "framebuffer")}} を取得することによって行われます。 次に、gl.bindFrameBuffer() を呼び出して、今後のすべての描画コマンドのターゲットとしてそのフレームバッファーをバインドします。
-
-次のステップは、フレームバッファーを消去することです。 レンダリングコードがフレームバッファー内のすべてのピクセルを書き込むことが保証されている場合に限り、理論上はこのステップをスキップできますが、パフォーマンスの全てを最後まで出し切る必要がない限り、とにかくすべてのピクセルに触れていることを確実にするために、描画を開始する前にそれをクリアして、描画を開始するのが一般的に最も安全です。 背景色は、gl.clearColor() を使用して完全に不透明な黒に設定します。 奥行きのクリアは、gl.cleardepth() を呼び出して 1.0 に設定します。 これにより、ピクセルが属するオブジェクトがどれだけ離れているかに関係なく、すべてのピクセルがクリアされます。 最後に、フレームのピクセルバッファーと奥行きバッファーは、COLOR_BUFFER_BIT と DEPTH_BUFFER_BIT の両方を設定したビットマスクを渡して gl.clear() を呼び出して両方とも消去します。
-
-WebXR はすべてのビューに単一のフレームバッファーを使用し、ビュー上のビューポートはフレームバッファー内の各目の視点を分離するために使用されるため、各目（または他の視点）を個別にクリアするのではなく、単一のフレームバッファーをクリアするだけで済みます。
-
-次に、前のフレームがレンダリングされてからの経過時間は、currentFrameTime パラメーターで指定された現在の時刻から、最後のフレームがレンダリングされた保存時刻 lastFrameTime を差し引いて計算されます。 結果は、最後のフレームがレンダリングされてから経過したミリ秒数を示す {{domxref("DOMHighResTimeStamp")}} 値です。 シーンの描画中にこの値を使用して、コールバックが一貫したフレームレートで起動されると想定するのではなく、実際の経過時間を考慮して適切な距離ですべてを移動できるようにします。 この経過時間は変数 deltaTime に保存され、lastFrameTime の値はこのフレームの時刻に置き換えられ、次のフレームの差分を計算する準備が整います。
-
-それでは、実際にそれぞれの目に対してシーンをレンダリングする時が来ました。 ビューアーのポーズの {{domxref("XRViewerPose.views", "views")}} 配列内のビューを反復処理します。 シーンに対する目のパースペクティブ（perspective）を表すこれらの {{domxref("XRView")}} オブジェクトのそれぞれについて、描画を現在の目の可視画像を表すフレームバッファーの領域に制限することから始める必要があります。
-
-{{domxref("XRWebGLLayer")}} のメソッド {{domxref("XRWebGLLayer.getViewport", "getViewport()")}} を呼び出して、現在の目の画像用に予約されているフレームバッファー内の領域に描画を制限するビューポートを取得することにより、目のコンテンツをレンダリングする WebGL を準備することから始めます。 次に、ビューポートの X 原点と Y 原点を、幅と高さとともに gl.viewport() に渡して、WebGL ビューポートを一致するように設定します。
-
-最後に、メソッド myDrawSceneIntoView() を呼び出して、実際に WebGL を使用してシーンをレンダリングします。 これには、描画する目を表す {{domxref("XRView")}}（透視マッピング（perspective mapping）などを実行するため）と deltaTime を渡します。 これにより、シーン描画コードは、時間とともに移動するオブジェクトの位置を決定するときに経過時間を正確に表すことができます。
-
-ビューを反復するループが終了すると、ビューアーにシーンを提示するために必要なすべての画像がレンダリングされ、戻ると、フレームバッファーは GPU を経由して、最終的には XR デバイスのディスプレイに到達します。 関数の上部で {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出してあるので、シーンのアニメーションの次のフレームをレンダリングするときに、コールバックがもう一度呼び出されます。
-
-このアプローチの欠点
-
-この関数に費やす時間をできるだけ最小限に抑えることが重要であるため、状態変化の処理に費やす時間が長いほど、実際に描画する時間が短くなります。 このテクニックは少数のオブジェクトに対して非常にうまく機能しますが、各オブジェクトのすべてのデータを2回（左目に対して1回、右目に対して1回）再バインドする必要があるため、状態の調整、バッファーとテクスチャーのアップロードなどに、多くの時間を費やしています。 次のセクションでは、これらの状態の変化を大幅に減らし、特にオブジェクト数が増えるにつれて、はるかに高速なレンダリングアプローチを提供する、変更されたアプローチについて説明します。
-
-オブジェクト優先でレンダリングすることによる最適化
-
-単一の WebGL フレームバッファーを使用して、左目と右目の両方のビューを単一のフレームバッファーに含めるという WebXR のアプローチの利点は、処理の順序を再配置することにより、レンダリングパフォーマンスを大幅に向上できることです。 特定のビュー（左目など）のビューポートを設定し、左目で見えるすべてのオブジェクトを1つずつレンダリングし、各オブジェクトに行ったらバッファーを再構成する代わりに、各オブジェクトをそれぞれの目に1回ずつ、2回続けてレンダリングします。 したがって、両方の目に対してバッファー、ユニフォームなどを1回セットアップするだけで済みます。
-
-結果の疑似コードは次のようになります。
-
-for each object in the scene
- bindProgram()
- bindUniforms()
- bindBuffers()
- bindTextures()
- for each view in the pose's views list
- get the XRWebGLLayer's viewport
- set the WebGL viewport to match
- bindVertices()
- bindMatrices()
- drawMyObject()
-
-
-このように変更することにより、プログラム、ユニフォーム、バッファー、テクスチャー、その他の可能性のあるものだけを、シーン内の各オブジェクトに対して2回ではなく、フレームごとに1回だけバインドします。 これにより、潜在的に非常に大きなマージンでオーバーヘッドが削減されます。
-
-フレームレートの制限
-
-他のコードを実行するためにより多くの時間を確保しながら、維持しようとするベースラインのフレームレートを確立するために、意図的にフレームレートを制限する必要がある場合は、フレームを意図的に定期的にスキップすることができます。
-
-例えば、フレームレートを 50% 下げるには、1 フレームおきにスキップします。
-
-let tick = 0;
-
-function drawFrame(time, frame) {
- animationFrameRequestID = frame.session.requestAnimationFrame(drawFrame);
-
- if (!(tick % 2)) {
- /* シーンを描く */
- }
- tick++;
-}
-
-このバージョンのレンダリングコールバックは、tick カウンターを維持します。 tick が偶数の値である場合にのみ、フレームがレンダリングされます。 このようにして、ひとつおきのフレームのみをレンダリングします。
-
-同様に、!(tick % 4) を使用して、4 フレームごとにレンダリングする等々ができます。
-
-アニメーションを経過時間に合わせる
-
-レンダリングコールバックは、正当な理由で time パラメータを受け取ります。 この {{domxref("DOMHighResTimeStamp")}} 値は、フレームのレンダリングがスケジュールされた時刻を示す浮動小数点値です。 コールバックの実行は正確に 1/60 秒間隔で発生しないため — そして実際、ユーザーのディスプレイのフレームレートが異なる場合、他のレートで発生する可能性があるため — コードが実行されているという単純な事実に頼って、最後のフレームから 1/60 秒であると想定することはできません。
-
-そのため、アニメーションが目的の速度で正確にレンダリングされるように、提供されているタイムスタンプを使用する必要があります。 これを行うには、最初に行う必要があるのは、最後のフレームがレンダリングされてから経過した時間を計算することです。
-
-let lastFrameTime = 0;
-
-function drawFrame(time, frame) {
- /* ... 次のフレームのスケジュール、バッファーの準備など ... */
-
- const deltaTime = (time - lastFrameTime) * 0.001;
- lastFrameTime = time;
-
- for (let view of pose.views) {
- /* 各ビューのレンダリング */
- }
-}
-
-
-これは、前のフレームのレンダリング時間を含む lastFrameTime と呼ばれるグローバル（またはオブジェクトプロパティ）を維持します。 この場合、時間の値はミリ秒単位で格納されるため、0.001 を掛けて時間を秒に変換します。 場合によっては、これにより後で時間を節約できます。 他の状況では、ミリ秒単位の時間が必要なため、何も変更する必要はありません。
-
-経過時間を手に入れれば、レンダリングコードは、すべての移動オブジェクトが経過時間内にどれだけ移動したかを計算する手段を持ちます。 例えば、オブジェクトが回転している場合、次のように回転を適用できます。
-
-const xDeltaRotation = (xRotationDegreesPerSecond * RADIANS_PER_DEGREE) * deltaTime;
-const yDeltaRotation = (yRotationDegreesPerSecond * RADIANS_PER_DEGREE) * deltaTime;
-const zDeltaRotation = (zRotationDegreesPerSecond * RADIANS_PER_DEGREE) * deltaTime;
-
-
-これは、フレームが最後に描画されてからオブジェクトが3つの軸のそれぞれを中心に回転した量を計算します。 これがないと、経過時間に関係なく、シェイプはフレームごとに指定された量だけ回転します。 これにより、多くの場合、かなりのつっかえが発生します。
-
-単に回転するのではなく、移動するオブジェクトに適用される同様の概念では、次のようになります。
-
-const xDistanceMoved = xSpeedPerSecond * deltaTime;
-const yDistanceMoved = ySpeedPerSecond * deltaTime;
-const ZDistanceMoved = zSpeedPerSecond * deltaTime;
-
-
-xSpeedPerSecond、ySpeedPerSecond、zSpeedPerSecond は、それぞれのオブジェクトの速度の軸の成分を含みます。 つまり、[xDistanceMoved, yDistanceMoved, zDistanceMoved] は、オブジェクトの速度を表すベクトルです。
-
-
-
-もちろん、レンダラーを通過するたびに発生する可能性のある他のこともあります。 最も一般的な2つは、ユーザー入力の処理と、シーン内のオブジェクトのユーザー制御状態やアニメーションパスなどの既知の要因に基づいて、オブジェクト（またはビューアー）の位置を更新することです。
-
-
-
-WebXR アプリケーションの使用中にユーザーが入力を提供する方法は3つあります。 まず、WebXR は、XR ハードウェア自体に統合されているコントローラーからの入力の直接処理をサポートしています。 これらの入力ソースには、ハンドコントローラー、光学追跡システム、加速度計と磁力計などのデバイス、およびそのような他のデバイスが含まれます。
-
-2番目のタイプの入力は、XR システムを介して接続されたゲームパッドです。 これは、Gamepad API から継承されたインターフェイスを使用しますが、WebXR を介してそれらを操作します。
-
-3番目の最後のタイプの入力は、キーボード、マウス、トラックパッド、タッチスクリーン、非 XR ゲームパッドおよびジョイスティックなどの従来の非 XR 入力デバイスです。
-
-XR ハードウェアから直接収集できる方向と位置の情報は、自動的に適用されます。 したがって、自分で処理する必要があるのは他の種類の入力です。
-
-
- - ポインティングデバイスのターゲットとボタンの押下
- - ゲームパッドの入力
- - 非 XR 入力デバイスの入力
-
-
-WebXR を使用してシーンを表示する際にユーザー入力を処理する方法の詳細については、入力と入力ソースの記事を参照してください。
-
-オブジェクトの位置の更新
-
-ほとんどの（すべてではありませんが）シーンには、何らかの形のアニメーションが含まれています。 アニメーションでは、物事が適切に動き、互いに反応します。
-
-例えば、仮想現実や拡張現実のゲームでは、敵の非プレイヤーキャラクター（NPC）がコンピューターに制御され、シーン内を移動する場合があります。 時間の経過とともに世界での位置が変化するだけでなく、各 NPC には相互に関連して移動するボディパーツまたはコンポーネントがある可能性があります。 クリーチャーが歩くと腕と足が揺れ、頭が素早く上下したり回転し、髪が跳ねたり揺れたりし、キャラクターが呼吸すると胴体は拡張収縮します。
-
-さらに、動いている物体や構造物があるかもしれません。 スポーツゲームでは、空中で弧を描くボールがあり、その動きをシミュレートする必要があります。 レーシングゲームでは、車やその他の乗り物があり、車輪を含めてアニメーションする可動部品があります。 シーンに水がある場合、波紋または波がリアルに見えるようにする必要があります。 （一部のタイプのゲームの場合）ドア、壁、床など、構造の一部が動いている場合があります。
-
-モーションのもう1つの一般的なソースは、プレイヤー自身です。 コントロールからの入力を解釈した後（XR 所属とそれ以外の両方）、ユーザーの動きをシミュレートするために、それらの変更をシーンに適用する必要があります。 詳細とこれがどのように機能するかの完全な例については、移動、向き、モーションの記事を参照してください。
-
-次のステップ
-
-レンダラーを作成したら — または、完成していなくても機能するものがあれば — カメラとそのシーン全体の動きを処理することができます。 これについては、WebXR の視点とビューアーに関する記事で説明しています。
-
-関連情報
-
-
diff --git a/files/ja/web/api/webxr_device_api/rendering/index.md b/files/ja/web/api/webxr_device_api/rendering/index.md
new file mode 100644
index 00000000000000..fcc32d5cb8c8eb
--- /dev/null
+++ b/files/ja/web/api/webxr_device_api/rendering/index.md
@@ -0,0 +1,366 @@
+---
+title: レンダリングと WebXR フレームアニメーションコールバック
+slug: Web/API/WebXR_Device_API/Rendering
+tags:
+ - API
+ - AR
+ - Animation
+ - Drawing
+ - Frames
+ - Games
+ - Guide
+ - Intermediate
+ - Reality
+ - Scene
+ - VR
+ - Virtual
+ - WebXR
+ - WebXR API
+ - WebXR Device API
+ - XR
+ - augmented
+ - display
+ - rendering
+ - requestAnimationFrame
+translation_of: Web/API/WebXR_Device_API/Rendering
+---
+{{DefaultAPISidebar("WebXR Device API")}}
+
+WebXR 環境をセットアップし、進行中の XR 環境セッションを表す {{domxref("XRSession")}} を作成したら、レンダリングのためにシーンのフレームを XR デバイスに提供する必要があります。 この記事では、{{domxref("XRSession")}} を使用して各フレームを表す {{domxref("XRFrame")}} オブジェクトを取得し、それを使用して、XR デバイスに配信するためのフレームバッファーを準備し、レンダリングループで XR シーンのフレームをデバイスに駆動するプロセスについて説明します。
+
+仮想環境をレンダリングする前に、[`navigator.xr.requestSession()`](/ja/docs/Web/API/XRSystem/requestSession) メソッドを使用して {{domxref("XRSession")}} を作成することにより、WebXR セッションを確立する必要があります。 また、セッションをフレームバッファーに関連付けて、他のセットアップタスクを実行する必要もあります。 これらのセットアップタスクについては、[WebXR セッションの起動と停止](/ja/docs/Web/API/WebXR_Device_API/Startup_and_shutdown)の記事で説明されています。
+
+## レンダラーの準備
+
+XR セッションをセットアップし、WebGL フレームバッファーを接続し、WebGL をシーンをレンダリングするために必要なデータで準備したら、レンダラーをセットアップして実行を開始できます。 これは、描画する参照空間を取得することから始まります。 その原点と方向は、ビューアーの開始位置と視線方向に設定します。 それが手に入ったら、次にシーンをレンダリングするためにフレームバッファーが必要になったときにブラウザーがあなたのレンダリング関数を呼び出すように要求します。 これは、{{domxref("XRSession")}} メソッドの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出すことによって行います。
+
+したがって、レンダラーの手はじめは次のようになります。
+
+```js
+let worldRefSpace;
+
+async function runXR(xrSession) {
+ worldRefSpace = await xrSession.requestReferenceSpace("immersive-vr");
+
+ if (worldRefSpace) {
+ viewerRefSpace = worldRefSpace.getOffsetReferenceSpace(
+ new XRRigidTransform(viewerStartPosition, viewerStartOrientation));
+ animationFrameRequestID = xrSession.requestAnimationFrame(myDrawFrame);
+ }
+}
+```
+
+没入型世界の参照空間を取得した後、これは、その位置と方向を表す {{domxref("XRRigidTransform")}} を作成し、{{domxref("XRReferenceSpace")}} のメソッド {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を呼び出すことにより、ビューアーの位置と方向を表すオフセット参照空間を作成します。
+
+次に、{{domxref("XRSession")}} のメソッド {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出して最初のアニメーションフレームをスケジュールし、フレームをレンダリングするためのコールバック関数 `myDrawFrame()` を提供します。
+
+このコードにはループがないことに注意してください！ 代わりに、フレームレンダリングコード（この場合は `myDrawFrame()` という関数）が、もう一度 `requestAnimationFrame()` を呼び出して別のフレームを描画する時刻をスケジュールします。
+
+## リフレッシュレートとフレームレート
+
+画面が最後にリフレッシュされてから {{domxref("XRSession")}} のメソッド {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出したとすると、ブラウザーは、アプリまたはサイトウィンドウを再描画する準備ができるたびにフレームレンダリングコールバックを呼び出します。 このコンテキストでは、「再描画」とは、画面に表示されるコンテンツが、DOM およびその中の要素が現時点で提示しようとしているものと一致することを保証するプロセスを意味します。
+
+### ハードウェア垂直リフレッシュレート
+
+ブラウザーは、WebXR コンテンツが表示されている {{HTMLElement("canvas")}} をリフレッシュする準備ができると、フレームレンダリングコールバックを呼び出します。 このコールバックは、指定されたタイムスタンプと、モデルやテクスチャーなどの他の関連データ、およびアプリケーションの状態を使用して、指定された時刻に表示されるように、シーンを WebGL バックバッファーにレンダリングします。 コールバックが戻ると、ブラウザーは最後に画面がリフレッシュされてから変更されたものと共に、そのバックバッファーをディスプレイまたは XR デバイスに転送します。
+
+歴史的に、ディスプレイは毎秒 60 回リフレッシュされています。 これは、タイミングを合わせるために、米国では 1 秒あたり 60 回（ヨーロッパでは 50 回）循環する AC 配電網の電流フロー波形を使用した初期のディスプレイによるものです。 次のように、このことはいくつかの異なる名前で示されていますが、それらはすべて同等またはほぼ同じです。
+
+- リフレッシュレート（Refresh rate）
+- 垂直リフレッシュレート（Vertical refresh rate）
+- 垂直帰線消去レート（Vertical blanking rate、VBL）
+- 垂直同期レート（Vertical sync rate）
+
+他にも同様の用語が使用されていますが、それが何と呼ばれるかに関係なく、適用される測定単位はヘルツ（Hz）です。 1 秒あたり 60 回リフレッシュするディスプレイには、60 Hz のリフレッシュレートがあります。 つまり、1 秒間に表示できるフレームの最大数は 60 です。 それを超える 1 秒あたりのフレーム数に関係なく、1 秒の間に 60 フレームしか画面に表示されません。
+
+ただし、すべてのディスプレイが 60 Hz で動作するわけではありません。 最近では、より高性能のディスプレイがはるかに高いリフレッシュレートを使用し始めています。 例えば、120 Hz、つまり 120 フレーム/秒のディスプレイは、ますます一般的になっています。 ブラウザーは常にディスプレイと同じレートでリフレッシュを試みます。 つまり、一部のコンピューターでは、コールバックは 1 秒あたり最大 60 回実行されますが、他のコンピューターでは、フレームレートによって異なり 1 秒あたり 90 または 120 回、あるいはそれ以上呼び出される場合があります。
+
+### 各フレームのレンダリングに利用できる時間
+
+これにより、フレーム間で利用可能なほとんどの時間を使用することが重要になります。 ユーザーのデバイスが 60 Hz のディスプレイを使用している場合、コールバックは 1 秒あたり最大 60 回呼び出され、それよりも頻繁に呼び出されることはないので、確実にできることをすることが目標です。 これを実現するには、メインスレッド外で可能な限り実行し、フレームレンダリングのコールバックをできるだけ効率的にします。 以下の図は、時間の 60 Hz ブロックへの分割を示しています。 各ブロックは、少なくとも部分的にシーンのレンダリングに使用されています。
+
+
+
+コンピュータのビジー状態が増すにつれて、コールバックをフレームごとに正確に呼び出すことができなくなり、フレームをスキップしなければならない場合があるため、これは重要です。 これを**コマ落ち**（dropping frames）と呼びます。 これは、レンダリングが遅延したため、またはレンダリング自体に使用可能な時間よりも長い時間がかかったために、フレームのレンダリングにかかる時間がフレーム間で使用可能な時間を超えると発生します。
+
+
+
+上の図では、フレーム 3 がペイントされる予定になるまでフレーム 2 がレンダリングを完了しなかったため、フレーム 3 はコマ落ちしています。 次に描画されるフレームはフレーム 4 になります。 これは、レンダリングコールバックに渡されるタイムスタンプが役立つもう 1 つの理由です。 フレーム番号ではなく時間に基づいてシーンを構成することにより、レンダリングされたフレームが遅れることなく、期待したものと一致することを保証できます。
+
+フレームがコマ落ちすると、影響を受ける表示領域のコンテンツは、フレームループを通過しても変更されません。 そのため、ときどきフレームがコマ落ちすることは通常あまり目立ちませんが、頻繁に発生し始めた場合（特に、非常に短い時間に複数のフレームがコマ落ちした場合）は、不快になり、ディスプレイが使用できなくなる可能性があります。
+
+幸い、フレーム間で使用できる時間を `1/refreshRate` 秒として簡単に計算できます。 つまり、1 をディスプレイのリフレッシュレートで除算します。 結果の値は、フレームがコマ落ちしないようにするために、各フレームをレンダリングするのに使用できる時間です。 例えば、60 Hz のディスプレイでは、1 フレームのレンダリングに 1/60 秒、つまり 0.0166667 秒が使用されます。 また、デバイスのリフレッシュレートが 120 Hz の場合、コマ落ちを避けたい場合、各フレームをレンダリングするのに必要な時間は 0.00883333 秒しかありません。
+
+ただし、ハードウェアが実際には 120 Hz である場合でも、毎秒 60 回リフレッシュするだけで十分であり、通常はそれをターゲットとすることをお勧めします。 60 FPS はすでに、ほとんどの人がアニメーションが単なる高速の一連の静止画像ではないことを簡単に検出できるポイントを超えています。 つまり、判別がつかないときは、ディスプレイが 60 Hz でリフレッシュされていると想定できます。 コードが適切に記述されている限り、すべてが問題なく動作します。
+
+### レンダラーのパフォーマンスの問題
+
+明らかに、フレームごとにシーンをレンダリングする時間はほとんどありません。 それだけでなく、レンダラー自体がその時間よりも長く実行されると、フレームがコマ落ちするだけでなく、その時間が完全に無駄になり、他のコードがそのフレームに対してまったく実行されなくなる可能性があります。
+
+それだけでなく、レンダリングが垂直リフレッシュ境界をまたぐ場合、**ティアリング**効果（tearing effect）が発生する可能性があります。 ティアリングは、前のフレームがまだ画面に描画されている間にディスプレイハードウェアが次のリフレッシュサイクルを開始すると発生します。 その結果、画面の上部に新しいフレームが表示されますが、フレームの下部には、前のフレームと場合によってはその前のフレームの組み合わせが表示される視覚効果となります。
+
+したがって、あなたの使命は、利用可能な時間を超過したり、コマ落ちやメインスレッドの過度の悪用を引き起こしたりしないように、コードを十分にタイトかつ軽量に保つことです。
+
+これらの理由により、レンダラーがかなり小さくて軽量で、ほとんど何もすることがないのでない限り、ブラウザーが他の処理を行う間に次のフレームを計算できるように、できる限りすべてをワーカーにオフロードすることを検討する必要があります。 フレームが実際に呼び出される前に計算とデータを準備するだけで、サイトまたはアプリをより効率的にレンダリングし、メインスレッドのパフォーマンスを向上させ、一般的にユーザーエクスペリエンスを向上させることができます。
+
+幸い、レンダリングのニーズが特に重い場合は、影響をさらに減らし、パフォーマンスを最適化するために使用できるいくつかのトリックがあります。 [WebXR パフォーマンスガイド](/ja/docs/Web/API/WebXR_Device_API/Performance)を参照して、パフォーマンスをできる限り向上させるための推奨事項とヒントを確認してください。
+
+## WebXR フレーム
+
+フレームレンダリングコールバック関数は、2 つのパラメーターを入力として受け取ります。 フレームが対応する時刻と、その時刻のシーンの状態を記述する {{domxref("XRFrame")}} オブジェクトです。
+
+### 3D の光学
+
+私たちが 2 つの目を持つには理由があります。 2 つの目を持つことで、それぞれが本質的にわずかに異なる角度から世界を見ることができます。 それらは既知の固定距離だけ離れているため、私たちの脳は基本的な幾何学と三角法を実行し、その情報から 3D の実在の本質を理解できます。 また、遠近法（perspective）、大きさの違い、さらには通常、3 番目の次元の詳細を理解するために物事がどのように見えるかについての理解も利用します。 これらの要因は、とりわけ、私たちの奥行き知覚（[depth perception](https://en.wikipedia.org/wiki/Depth_perception)）の源です。
+
+グラフィックスをレンダリングするときに 3 次元の幻想を作成するには、これらの要因をできるだけ多くシミュレートする必要があります。 これらをシミュレートするほど、そして正確に行うほど、人間の脳をだまして 3D で画像を知覚させることができます。 XR の利点は、古典的な単眼テクニックを使用して 3D グラフィックス（遠近法、大きさ、シミュレートされた視差）をシミュレートできるだけでなく、アニメーションのフレームごとに、各目につき 1 回ずつシーンを 2 回レンダリングすることで、両眼視（つまり、2 つの目を使用した視覚）をシミュレートできることです。
+
+典型的な人間の瞳孔間距離（[pupillary distance](https://en.wikipedia.org/wiki/Pupillary_distance)、瞳孔の中心間の距離）は、54 〜 74 ミリメートル（0.054 〜 0.074 メートル）です。 したがって、ビューアーの頭の中心が `[0.0, 2.0, 0.0]`（水平方向の空間の中心で地上レベルの約 2 メートル）にある場合、まず `[-0.032, 2.0, 0.0]`（中心から左に 32 mm）からシーンをレンダリングし、次に `[0.032, 2.0, 0.0]`（中心から右に 32 mm）で再びレンダリングする必要があります。 このようにして、ビューアーの目の位置を人間の平均瞳孔距離 64 mm に配置します。
+
+その距離（または XR システムが使用するように構成されている瞳孔間距離）は、網膜歪覚（各網膜の見え方の違い）と視差効果によって脳がオブジェクトまでの距離とオブジェクトの奥行きを計算できるようにするために、私たちの心に十分な違いを見せるのに十分です。 これにより、網膜が 2D 表面にすぎないにもかかわらず、3 次元を知覚できるようになります。
+
+これは下の図に示されています。 下の図では、それぞれの目がビューアーの真正面にあるさいころをどのように認識するかを示しています。 この図では、説明のために一部の点で効果を誇張していますが、概念は同じです。 各目は、境界が目の前の円弧を形成する領域を見ます。 それぞれの目は頭の中心線の片側または反対側にオフセットされ、それぞれの目はほぼ同じ視野を見るので、その結果、それぞれの目は、その前にある世界のわずかに異なる部分を別の角度から見ることができます。
+
+
+
+左目はさいころを中央から少し左に見、右目はさいころを中央から少し右に見ます。 その結果、左目はオブジェクトの左側が少しだけ見え、右側が少し見えません。 逆も同様です。 これらの 2 つの画像は網膜に焦点が合わせられ、結果の信号は視神経を介して後頭葉の後部にある脳の視覚皮質に送信されます。
+
+脳はこれらの信号を左目と右目から受け取り、ビューアーの脳内に世界の単一の統一された 3D 画像を構成し、その画像を見ます。 また、左目と右目で見られるものの違いにより、脳はオブジェクトの奥行きや大きさなどに関する多くの情報を推測できます。 推測された奥行き情報を、遠近法、影、これらの関係の意味の記憶などの他の手がかりと組み合わせることで、私たちの周りの世界について多くを理解することができます。
+
+### フレーム、ポーズ、ビュー、フレームバッファー
+
+シーンのある瞬間の状態を表す `XRFrame` を取得したら、ビューアーを基準にしてシーン内のオブジェクトの位置を決定し、レンダリングできるようにする必要があります。 参照空間に対するビューアーの位置と方向は、{{domxref("XRFrame")}} のメソッド {{domxref("XRFrame.getViewerPose", "getViewerPose()")}} を呼び出して取得した {{domxref("XRViewerPose")}} で表されます。
+
+`XRFrame` は、あなたの世界内のオブジェクトの位置または方向を直接追跡しません。 代わりに、位置と方向をシーンの座標系に変換する方法を提供し、ビューアーの位置と方向のデータを XR ハードウェアから収集し、あなたが構成した参照空間に変換して、フレームレンダリングコードにタイムスタンプ付きで配信します。 そのタイムスタンプとあなた独自のデータを使用して、シーンのレンダリング方法を決定します。
+
+シーンを 2 回レンダリングした後（フレームバッファーの左半分に 1 回、フレームバッファーの右半分に 1 回）、フレームバッファーは XR ハードウェアに送信され、フレームバッファーの各半分が対応する目に表示されます。 これは、多くの場合（常にではありません）、画像を 1 つの画面に描画し、レンズを使用してその画像の正しい半分を各目に転送します。
+
+3D が WebXR によってどのように表現されるかについて詳しくは、[視点とビューアー: WebXR でのカメラのシミュレーション](/ja/docs/Web/API/WebXR_Device_API/Cameras)の [WebXR による 3D の表現](/ja/docs/Web/API/WebXR_Device_API/Cameras#Representing_3D_with_WebXR)をご覧ください。
+
+## シーンを描く
+
+ブラウザーがシーンの次のフレームをペイントできるようにフレームバッファーを準備するときが来たら、`requestAnimationFrame()` に指定した関数が呼び出されます。 それは、描画するフレームの時刻と、レンダリングする必要のあるフレームのシーンの状態に関する詳細を提供する {{domxref("XRFrame")}} オブジェクトを入力として受け取ります。
+
+理想的には、このコードを 60 FPS のフレームレートに十分か可能な限りそれに近い速さを維持することが必要です。 この 1 つの関数にはあなたのコードだけではないことを思い出してください。 メインスレッドがフレーム自体の持続時間よりもフレームあたりの時間を長く実行する必要がないことを確認する必要があります。
+
+### 基本的なレンダラー
+
+このバージョンの WebXR レンダリングコールバックでは、比較的単純なプロジェクトに最適な非常に単純なアプローチを使用しています。 この疑似コードは、そのプロセスの概要を示しています。
+
+```js
+for each view in the pose's views list:
+ get the WebXR GL layer's viewport
+ set the WebGL viewport to match
+ for each object in the scene
+ bindProgram()
+ bindVertices()
+ bindMatrices()
+ bindUniforms()
+ bindBuffers()
+ bindTextures()
+ drawMyObject()
+```
+
+簡単に言えば、この形式のレンダラーは**ビュー優先順**（view-first order）を使用しています。 すべてのオブジェクトを 1 つのビューに描画してから、同じオブジェクトのセットを他のビューにレンダリングして、XR デバイスのディスプレイを構成する 2 つのビューのそれぞれを続けてレンダリングします。 その結果、オブジェクトを描画するために必要なデータの多くは、フレームごとに 2 回 GPU に送信されるため、多くの複製された作業があります。 ただし、これは既存の WebGL コードの移植を簡略化し、多くの場合、この作業を行うのに十分なほど優れているため、最初にこの方法を見ていきます。
+
+そのフレームのシーンを構成する次のオブジェクトに進む前に、各オブジェクトを各目に対して 1 回ずつ、2 回続けてレンダリングする（つまり、**オブジェクト優先順**（object-first order）でレンダリングする）代替アプローチについては、[オブジェクト優先順でレンダリングすることによる最適化](/ja/docs/Web/API/WebXR_Device_API/Rendering#Optimizing_by_rendering_in_object-first_order)を参照してください。
+
+#### レンダリングコールバックのサンプル
+
+この基本的なパターンに従う実際のコードを見てみましょう。 上記の例では、この関数に `myDrawFrame()` という名前を付けたので、ここでは引き続きこれを使用します。
+
+```js
+let lastFrameTime = 0;
+
+function myDrawFrame(currentFrameTime, frame) {
+ let session = frame.session;
+ let viewerPose;
+
+ // 時間が来たらペイントされる次のフレームをスケジュールします。
+
+ animationFrameRequestID = session.requestAnimationFrame(myDrawFrame);
+
+ // ビューアーの位置と方向を表す XRViewerPose を取得します。
+ // 成功した場合、フレームをレンダリングします。
+
+ viewerPose = frame.getViewerPose(viewerRefSpace);
+ if (viewerPose) {
+ let glLayer = session.renderState.baseLayer;
+ gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
+
+ // まず、色と奥行きのフレームバッファーを消去します。
+
+ gl.clearColor(0, 0, 0, 1.0);
+ gl.clearDepth(1.0);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ // 最後のフレームがレンダリングされてからの経過時間を計算します。
+ // この値を使用して、アニメーションが意図したとおりの速度で実行されるようにします。
+
+ const deltaTime = currentFrameTime - lastFrameTime;
+ lastFrameTime = currentFrameTime;
+
+ // 次に、セッションのビューごとにシーンレンダリングコードを1回呼び出します。
+
+ for (let view of viewerPose.views) {
+ let viewport = glLayer.getViewport(view);
+ gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
+ myDrawSceneIntoView(view, deltaTime);
+ }
+ }
+}
+```
+
+`myDrawFrame()` 関数は、`frame` パラメーターで指定された {{domxref("XRFrame")}} オブジェクトから {{domxref("XRSession")}} を取得し、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、次のフレームのレンダリングをすぐにスケジュールします。 これにより、すぐにキューに入ることが保証され、`myDrawFrame()` 関数のこの反復で費やされた残りの時間は、次のフレームを描画するタイミングにカウントされます。
+
+次に、フレームの {{domxref("XRFrame.getViewerPose", "getViewerPose()")}} メソッドを使用して、ビューアーのポーズ（その位置と方向）を表す {{domxref("XRViewerPose")}} オブジェクトを取得し、[WebXR セッションのセットアップ中](/ja/docs/Web/API/WebXR_Device_API/Rendering#Preparing_the_renderer)に以前に取得した `viewerRefSpace` からビューアーの参照空間を渡します。
+
+ビューアーのポーズを手にすると、フレームのレンダリングを開始できます。 最初のステップは、WebXR デバイスがフレームを描画したいフレームバッファーへのアクセスを取得することです。 これは、セッションの {{domxref("XRSession.renderState", "renderState")}} オブジェクトの {{domxref("XRRenderState.baseLayer", "baseLayer")}} プロパティからターゲット WebGL レイヤーを取得してから、その {{domxref("XRWebGLLayer")}} オブジェクトから {{domxref("XRWebGLLayer.framebuffer", "framebuffer")}} を取得することによって行われます。 次に、[`gl.bindFrameBuffer()`](/ja/docs/Web/API/WebGLRenderingContext/bindFramebuffer) を呼び出して、今後のすべての描画コマンドのターゲットとしてそのフレームバッファーをバインドします。
+
+次のステップは、フレームバッファーを消去することです。 _レンダリングコードがフレームバッファー内のすべてのピクセルを書き込むことが保証されている場合に限り_、理論上はこのステップをスキップできますが、パフォーマンスの全てを最後まで出し切る必要がない限り、とにかくすべてのピクセルに触れていることを確実にするために、描画を開始する前にそれをクリアして、描画を開始するのが一般的に最も安全です。 背景色は、[`gl.clearColor()`](/ja/docs/Web/API/WebGLRenderingContext/clearColor) を使用して完全に不透明な黒に設定します。 奥行きのクリアは、[`gl.cleardepth()`](/ja/docs/Web/API/WebGLRenderingContext/clearDepth) を呼び出して 1.0 に設定します。 これにより、ピクセルが属するオブジェクトがどれだけ離れているかに関係なく、すべてのピクセルがクリアされます。 最後に、フレームのピクセルバッファーと奥行きバッファーは、`COLOR_BUFFER_BIT` と `DEPTH_BUFFER_BIT` の両方を設定したビットマスクを渡して [`gl.clear()`](/ja/docs/Web/API/WebGLRenderingContext/clear) を呼び出して両方とも消去します。
+
+WebXR はすべてのビューに単一のフレームバッファーを使用し、ビュー上のビューポートはフレームバッファー内の各目の視点を分離するために使用されるため、各目（または他の視点）を個別にクリアするのではなく、単一のフレームバッファーをクリアするだけで済みます。
+
+次に、前のフレームがレンダリングされてからの経過時間は、`currentFrameTime` パラメーターで指定された現在の時刻から、最後のフレームがレンダリングされた保存時刻 `lastFrameTime` を差し引いて計算されます。 結果は、最後のフレームがレンダリングされてから経過したミリ秒数を示す {{domxref("DOMHighResTimeStamp")}} 値です。 シーンの描画中にこの値を使用して、コールバックが一貫したフレームレートで起動されると想定するのではなく、実際の経過時間を考慮して適切な距離ですべてを移動できるようにします。 この経過時間は変数 `deltaTime` に保存され、`lastFrameTime` の値はこのフレームの時刻に置き換えられ、次のフレームの差分を計算する準備が整います。
+
+それでは、実際にそれぞれの目に対してシーンをレンダリングする時が来ました。 ビューアーのポーズの {{domxref("XRViewerPose.views", "views")}} 配列内のビューを反復処理します。 シーンに対する目のパースペクティブ（perspective）を表すこれらの {{domxref("XRView")}} オブジェクトのそれぞれについて、描画を現在の目の可視画像を表すフレームバッファーの領域に制限することから始める必要があります。
+
+{{domxref("XRWebGLLayer")}} のメソッド {{domxref("XRWebGLLayer.getViewport", "getViewport()")}} を呼び出して、現在の目の画像用に予約されているフレームバッファー内の領域に描画を制限するビューポートを取得することにより、目のコンテンツをレンダリングする WebGL を準備することから始めます。 次に、ビューポートの X 原点と Y 原点を、幅と高さとともに [`gl.viewport()`](/ja/docs/Web/API/WebGLRenderingContext/viewport) に渡して、WebGL ビューポートを一致するように設定します。
+
+最後に、メソッド `myDrawSceneIntoView()` を呼び出して、実際に WebGL を使用してシーンをレンダリングします。 これには、描画する目を表す {{domxref("XRView")}}（透視マッピング（perspective mapping）などを実行するため）と `deltaTime` を渡します。 これにより、シーン描画コードは、時間とともに移動するオブジェクトの位置を決定するときに経過時間を正確に表すことができます。
+
+ビューを反復するループが終了すると、ビューアーにシーンを提示するために必要なすべての画像がレンダリングされ、戻ると、フレームバッファーは GPU を経由して、最終的には XR デバイスのディスプレイに到達します。 関数の上部で {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} を呼び出してあるので、シーンのアニメーションの次のフレームをレンダリングするときに、コールバックがもう一度呼び出されます。
+
+#### このアプローチの欠点
+
+この関数に費やす時間をできるだけ最小限に抑えることが重要であるため、状態変化の処理に費やす時間が長いほど、実際に描画する時間が短くなります。 このテクニックは少数のオブジェクトに対して非常にうまく機能しますが、各オブジェクトのすべてのデータを 2 回（左目に対して 1 回、右目に対して 1 回）再バインドする必要があるため、状態の調整、バッファーとテクスチャーのアップロードなどに、多くの時間を費やしています。 次のセクションでは、これらの状態の変化を大幅に減らし、特にオブジェクト数が増えるにつれて、はるかに高速なレンダリングアプローチを提供する、変更されたアプローチについて説明します。
+
+### オブジェクト優先でレンダリングすることによる最適化
+
+単一の WebGL フレームバッファーを使用して、左目と右目の両方のビューを単一のフレームバッファーに含めるという WebXR のアプローチの利点は、処理の順序を再配置することにより、レンダリングパフォーマンスを大幅に向上できることです。 特定のビュー（左目など）のビューポートを設定し、左目で見えるすべてのオブジェクトを 1 つずつレンダリングし、各オブジェクトに行ったらバッファーを再構成する代わりに、各オブジェクトをそれぞれの目に 1 回ずつ、2 回続けてレンダリングします。 したがって、両方の目に対してバッファー、ユニフォームなどを 1 回セットアップするだけで済みます。
+
+結果の疑似コードは次のようになります。
+
+```js
+for each object in the scene
+ bindProgram()
+ bindUniforms()
+ bindBuffers()
+ bindTextures()
+ for each view in the pose's views list
+ get the XRWebGLLayer's viewport
+ set the WebGL viewport to match
+ bindVertices()
+ bindMatrices()
+ drawMyObject()
+```
+
+このように変更することにより、プログラム、ユニフォーム、バッファー、テクスチャー、その他の可能性のあるものだけを、シーン内の各オブジェクトに対して 2 回ではなく、フレームごとに 1 回だけバインドします。 これにより、潜在的に非常に大きなマージンでオーバーヘッドが削減されます。
+
+### フレームレートの制限
+
+他のコードを実行するためにより多くの時間を確保しながら、維持しようとするベースラインのフレームレートを確立するために、意図的にフレームレートを制限する必要がある場合は、フレームを意図的に定期的にスキップすることができます。
+
+例えば、フレームレートを 50% 下げるには、1 フレームおきにスキップします。
+
+```js
+let tick = 0;
+
+function drawFrame(time, frame) {
+ animationFrameRequestID = frame.session.requestAnimationFrame(drawFrame);
+
+ if (!(tick % 2)) {
+ /* シーンを描く */
+ }
+ tick++;
+}
+```
+
+このバージョンのレンダリングコールバックは、`tick` カウンターを維持します。 `tick` が偶数の値である場合にのみ、フレームがレンダリングされます。 このようにして、ひとつおきのフレームのみをレンダリングします。
+
+同様に、`!(tick % 4)` を使用して、4 フレームごとにレンダリングする等々ができます。
+
+### アニメーションを経過時間に合わせる
+
+レンダリングコールバックは、正当な理由で `time` パラメータを受け取ります。 この {{domxref("DOMHighResTimeStamp")}} 値は、フレームのレンダリングがスケジュールされた時刻を示す浮動小数点値です。 コールバックの実行は正確に 1/60 秒間隔で発生しないため — そして実際、ユーザーのディスプレイのフレームレートが異なる場合、他のレートで発生する可能性があるため — コードが実行されているという単純な事実に頼って、最後のフレームから 1/60 秒であると想定することはできません。
+
+そのため、アニメーションが目的の速度で正確にレンダリングされるように、提供されているタイムスタンプを使用する必要があります。 これを行うには、最初に行う必要があるのは、最後のフレームがレンダリングされてから経過した時間を計算することです。
+
+```js
+let lastFrameTime = 0;
+
+function drawFrame(time, frame) {
+ /* ... 次のフレームのスケジュール、バッファーの準備など ... */
+
+ const deltaTime = (time - lastFrameTime) * 0.001;
+ lastFrameTime = time;
+
+ for (let view of pose.views) {
+ /* 各ビューのレンダリング */
+ }
+}
+```
+
+これは、前のフレームのレンダリング時間を含む `lastFrameTime` と呼ばれるグローバル（またはオブジェクトプロパティ）を維持します。 この場合、時間の値はミリ秒単位で格納されるため、0.001 を掛けて時間を秒に変換します。 場合によっては、これにより後で時間を節約できます。 他の状況では、ミリ秒単位の時間が必要なため、何も変更する必要はありません。
+
+経過時間を手に入れれば、レンダリングコードは、すべての移動オブジェクトが経過時間内にどれだけ移動したかを計算する手段を持ちます。 例えば、オブジェクトが回転している場合、次のように回転を適用できます。
+
+```js
+const xDeltaRotation = (xRotationDegreesPerSecond * RADIANS_PER_DEGREE) * deltaTime;
+const yDeltaRotation = (yRotationDegreesPerSecond * RADIANS_PER_DEGREE) * deltaTime;
+const zDeltaRotation = (zRotationDegreesPerSecond * RADIANS_PER_DEGREE) * deltaTime;
+```
+
+これは、フレームが最後に描画されてからオブジェクトが 3 つの軸のそれぞれを中心に回転した量を計算します。 これがないと、経過時間に関係なく、シェイプはフレームごとに指定された量だけ回転します。 これにより、多くの場合、かなりのつっかえが発生します。
+
+単に回転するのではなく、移動するオブジェクトに適用される同様の概念では、次のようになります。
+
+```js
+const xDistanceMoved = xSpeedPerSecond * deltaTime;
+const yDistanceMoved = ySpeedPerSecond * deltaTime;
+const ZDistanceMoved = zSpeedPerSecond * deltaTime;
+```
+
+`xSpeedPerSecond`、`ySpeedPerSecond`、`zSpeedPerSecond` は、それぞれのオブジェクトの速度の軸の成分を含みます。 つまり、`[xDistanceMoved, yDistanceMoved, zDistanceMoved]` は、オブジェクトの速度を表すベクトルです。
+
+## シーンのアニメーションに関連する追加のタスク
+
+もちろん、レンダラーを通過するたびに発生する可能性のある他のこともあります。 最も一般的な 2 つは、[ユーザー入力の処理](/ja/docs/Web/API/WebXR_Device_API/Inputs)と、シーン内のオブジェクトのユーザー制御状態やアニメーションパスなどの既知の要因に基づいて、オブジェクト（またはビューアー）の位置を更新することです。
+
+### ユーザー制御入力の処理
+
+WebXR アプリケーションの使用中にユーザーが入力を提供する方法は 3 つあります。 まず、WebXR は、XR ハードウェア自体に統合されているコントローラーからの入力の直接処理をサポートしています。 これらの入力ソースには、ハンドコントローラー、光学追跡システム、加速度計と磁力計などのデバイス、およびそのような他のデバイスが含まれます。
+
+2 番目のタイプの入力は、XR システムを介して接続されたゲームパッドです。 これは、[Gamepad API](/ja/docs/Web/API/Gamepad_API) から継承されたインターフェイスを使用しますが、WebXR を介してそれらを操作します。
+
+3 番目の最後のタイプの入力は、キーボード、マウス、トラックパッド、タッチスクリーン、非 XR ゲームパッドおよびジョイスティックなどの従来の非 XR 入力デバイスです。
+
+XR ハードウェアから直接収集できる方向と位置の情報は、自動的に適用されます。 したがって、自分で処理する必要があるのは他の種類の入力です。
+
+- ポインティングデバイスのターゲットとボタンの押下
+- ゲームパッドの入力
+- 非 XR 入力デバイスの入力
+
+WebXR を使用してシーンを表示する際にユーザー入力を処理する方法の詳細については、[入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)の記事を参照してください。
+
+### オブジェクトの位置の更新
+
+ほとんどの（すべてではありませんが）シーンには、何らかの形のアニメーションが含まれています。 アニメーションでは、物事が適切に動き、互いに反応します。
+
+例えば、仮想現実や拡張現実のゲームでは、敵の非プレイヤーキャラクター（NPC）がコンピューターに制御され、シーン内を移動する場合があります。 時間の経過とともに世界での位置が変化するだけでなく、各 NPC には相互に関連して移動するボディパーツまたはコンポーネントがある可能性があります。 クリーチャーが歩くと腕と足が揺れ、頭が素早く上下したり回転し、髪が跳ねたり揺れたりし、キャラクターが呼吸すると胴体は拡張収縮します。
+
+さらに、動いている物体や構造物があるかもしれません。 スポーツゲームでは、空中で弧を描くボールがあり、その動きをシミュレートする必要があります。 レーシングゲームでは、車やその他の乗り物があり、車輪を含めてアニメーションする可動部品があります。 シーンに水がある場合、波紋または波がリアルに見えるようにする必要があります。 （一部のタイプのゲームの場合）ドア、壁、床など、構造の一部が動いている場合があります。
+
+モーションのもう 1 つの一般的なソースは、プレイヤー自身です。 コントロールからの入力を解釈した後（XR 所属とそれ以外の両方）、ユーザーの動きをシミュレートするために、それらの変更をシーンに適用する必要があります。 詳細とこれがどのように機能するかの完全な例については、[移動、向き、モーション](/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion)の記事を参照してください。
+
+## 次のステップ
+
+レンダラーを作成したら — または、完成していなくても機能するものがあれば — カメラとそのシーン全体の動きを処理することができます。 これについては、WebXR の[視点とビューアー](/ja/docs/Web/API/WebXR_Device_API/Cameras)に関する記事で説明しています。
+
+## 関連情報
+
+- [WebXR の幾何学と参照空間](/ja/docs/Web/API/WebXR_Device_API/Geometry)
+- [WebXR での空間追跡](/ja/docs/Web/API/WebXR_Device_API/Spatial_tracking)
+- [視点とビューアー: WebXR でのカメラのシミュレーション](/ja/docs/Web/API/WebXR_Device_API/Cameras)
+- [移動、向き、モーション: WebXR の例](/ja/docs/Web/API/WebXR_Device_API/Movement_and_motion)
+- [WebXR パフォーマンスガイド](/ja/docs/Web/API/WebXR_Device_API/Performance)
diff --git a/files/ja/web/api/webxr_device_api/startup_and_shutdown/index.html b/files/ja/web/api/webxr_device_api/startup_and_shutdown/index.html
deleted file mode 100644
index 49f3f1f5a6b967..00000000000000
--- a/files/ja/web/api/webxr_device_api/startup_and_shutdown/index.html
+++ /dev/null
@@ -1,382 +0,0 @@
----
-title: WebXR セッションの起動と停止
-slug: Web/API/WebXR_Device_API/Startup_and_shutdown
-tags:
- - 3D
- - API
- - AR
- - Beginner
- - Guide
- - Initialization
- - Mixed
- - Preparation
- - Reality
- - Setup
- - Shutdown
- - Startup
- - VR
- - Virtual
- - WebXR
- - WebXR API
- - WebXR Device API
- - XR
- - augmented
-translation_of: Web/API/WebXR_Device_API/Startup_and_shutdown
----
-{{DefaultAPISidebar("WebXR Device API")}}{{SecureContext_header}}
-
-すでに 3D グラフィックス全般、特に WebGL に精通していると想定すると、次の大胆なステップで複合現実を実現できます。 現実の世界に加えて、またはその代わりに人工の風景やオブジェクトを表示するという考え方は、それほど複雑ではありません。 拡張現実または仮想現実のシナリオのレンダリングを開始する前に、WebXR セッションを作成してセットアップする必要があります。 また、適切に停止する方法も知っておく必要があります。 この記事では、これらのことを行う方法を学びます。
-
-WebXR API へのアクセス
-
-アプリによる WebXR API へのアクセスは、{{domxref("XRSystem")}} オブジェクトから始まります。 このオブジェクトは、ユーザーの機器で利用可能なハードウェアとドライバーを通じて利用可能な WebXR デバイススイート全体を表します。 {{domxref("Navigator")}} のプロパティ {{domxref("Navigator.xr", "xr")}} を介してドキュメントで使用できるグローバルな XRSystem オブジェクトがあります。 これは、使用可能なハードウェアとドキュメントの環境を考慮して、適切な XR ハードウェアが使用できる場合に XRSystem オブジェクトを返すプロパティです。
-
-したがって、XRSystem オブジェクトをフェッチする最も単純なコードは次のとおりです。
-
-const xr = navigator.xr;
-
-WebXR が利用できない場合、xr の値は null または undefined になります。
-
-WebXR の可用性
-
-新しい、まだ開発中の API として、WebXR のサポートは特定のデバイスとブラウザーに限定されています。 そして、それらでさえ、デフォルトで有効にならないかもしれません。 ただし、互換性のあるシステムがない場合でも、WebXR を試すことができる選択肢がある場合があります。
-
-WebXR ポリフィル
-
-WebXR 仕様を設計しているチームは、WebXR API をサポートしていないブラウザーで WebXR をシミュレートするために使用できる WebXR ポリフィルを公開しています。 ブラウザーが古い WebVR API をサポートしている場合は、それが使用されます。 それ以外の場合、ポリフィルは、Google の Cardboard VR API を使用する実装にフォールバックします。
-
-ポリフィルは仕様とともに維持され、仕様に合わせて最新に保たれます。 さらに、WebXR および WebXR に関連するその他のテクノロジーのサポートと、ポリフィルの変更の実装の経時的なサポートとして、ブラウザーとの互換性を維持するために更新されます。
-
-必ず readme を注意深く読んでください。 ポリフィルには、ターゲットブラウザーに含まれる新しい JavaScript 機能との互換性の程度に応じて、いくつかのバージョンがあります。
-
-WebXR API エミュレーター拡張機能
-
-Mozilla WebXR チームは、WebXR API をエミュレートし、HTC Vive、Oculus Go、Oculus Quest、Samsung Gear、Google Cardboard などの互換性のあるさまざまなデバイスをシミュレートする、Firefox と Chrome の両方と互換性のある WebXR API Emulator ブラウザー拡張機能を作成しました。 拡張機能を配置すると、ヘッドセットと任意のハンドコントローラーの位置と向き、およびコントローラーのボタンを制御できる開発者ツールパネルを開くことができます。
-
-エミュレーターの使用
-
-実際のヘッドセットを使用するのに比べて少し厄介ですが、これにより、WebXR が通常利用できないデスクトップコンピューターで WebXR のコードを試して開発することができます。 また、コードを実際のデバイスに取り込む前に、いくつかの基本的なテストを実行できます。 ただし、エミュレーターはまだすべての WebXR API を完全にエミュレートしていないため、予期しない問題が発生する可能性があることに注意してください。 ここでも、readme ファイルを注意深く読み、開始する前に制限事項を確認してください。
-
-重要: 製品をリリースまたは出荷する前に、常に実際の AR や VR のハードウェアでコードをテストする必要があります。 エミュレート、シミュレーション、またはポリフィルされた環境は、物理デバイスでの実際のテストに代わる適切なものではありません。
-
-拡張機能の取得
-
-以下のサポートされているブラウザー用の WebXR API エミュレーターをダウンロードしてください。
-
-
-
-拡張機能のソースコードは、GitHub で入手できます。
-
-エミュレーターの問題とメモ
-
-これは拡張機能に関する完全な記事の場所ではありませんが、言及する価値のある特定の事項がいくつかあります。
-
-拡張機能のバージョン 0.4.0 は2020年3月26日に発表されました。 安定状態に近づいている WebXR AR モジュールによる拡張現実（AR）のサポートが導入されました。 AR のドキュメントは、近日中に MDN で公開されます。
-
-その他の改善には、エミュレーターを更新して XR インターフェイスの名前を {{domxref("XRSystem")}} に変更し、スクイーズ（グリップ）入力ソースのサポートを導入し、{{domxref("XRInputSource")}} のプロパティ {{domxref("XRInputSource.profiles", "profiles")}} のサポートを追加します。
-
-コンテキスト要件
-
-WebXR 互換環境は、安全にロードされたドキュメントから始まります。 ドキュメントは、ローカルドライブ（http://localhost/... などの URL を使用するなど）からロードするか、ページのロード時に {{Glossary("HTTPS")}} を使用する必要があります。 同様に、JavaScript コードは安全にロードされている必要があります。
-
-ドキュメントが安全にロードされなかった場合は、それほど遠くまで到達できません。 {{domxref("navigator.xr")}} プロパティは、ドキュメントが安全にロードされていない場合には存在しません。 これは、互換性のある XR ハードウェアが利用できない場合にも当てはまります。 どちらの場合でも、xr プロパティの欠如に備える必要があり、エラーを適切に処理するか、何らかの形式のフォールバックを提供する必要があります。
-
-WebXR ポリフィルにフォールバック
-
-フォールバックの選択肢の1つは、WebXR 標準化プロセスを担当する Immersive Web ワーキンググループによって提供される WebXR ポリフィルです。 {{Glossary("polyfill","ポリフィル")}}は、WebXR をネイティブでサポートしていないブラウザーに WebXR のサポートを提供し、サポートしているブラウザーの実装間の不整合を解消するため、WebXR がネイティブで利用できる場合でも役立つ場合があります。
-
-ここでは、前の {{HTMLElement("script")}} タグを使用してポリフィルが含まれている、またはロードされていると想定して、オプションでポリフィルをインストールした後に {{domxref("XRSystem")}} オブジェクトを返す getXR() 関数を定義します。
-
-let webxrPolyfill = null;
-
-function getXR(usePolyfill) {
- let tempXR;
-
- switch(usePolyfill) {
- case "if-needed":
- tempXR = navigator.xr;
- if (!tempXR) {
- webxrPolyfill = new WebXRPolyfill();
- tempXR = webxrPolyfill;
- }
- break;
- case "yes":
- webxrPolyfill = new WebXRPolyfill();
- tempXR = webxrPolyfill;
- break;
- case "no":
- default:
- tempXR = navigator.xr;
- break;
- }
-
- return tempXR;
-}
-
-const xr = getXR("no"); // ネイティブの XRSystem オブジェクトを取得
-const xr = getXR("yes"); // 常にポリフィルから XRSystem を返す
-const xr = getXR("if-needed"); // navigator.xr がない場合にのみポリフィルを使用
-
-
-返された XRSystem オブジェクトは、MDN で提供されているドキュメントに従って使用できます。 グローバル変数 webxrPolyfill は、ポリフィルへの参照を保持するためにのみ使用され、不要になるまでポリフィルを使用できるようにします。 これを null に設定すると、依存しているオブジェクトがそれを使用しなくなったときに、ポリフィルをガベージコレクションできることを示します。
-
-もちろん、必要に応じてこれを簡略化できます。 アプリはおそらくポリフィルを使用するかどうかについてあまり行き来しないので、これを必要な特定のケースに単純化できます。
-
-権限とセキュリティ
-
-WebXR を中心に展開する多くのセキュリティ対策があります。 まず、ユーザーの世界観を完全に置き換える immersive-vr モードを使用するには、xr-spatial-tracking 機能ポリシーを設定する必要があります。 それに加えて、ドキュメントは安全で現在フォーカスされている必要があります。 最後に、{{domxref("Element.click_event", "click")}} イベントのハンドラーなどのユーザーイベントハンドラーから {{domxref("XRSystem.requestSession", "requestSession()")}} を呼び出す必要があります。
-
-安全な WebXR の活動と使用方法の詳細については、WebXR の権限とセキュリティの記事を参照してください。
-
-必要なセッションタイプが利用可能であることの確認
-
-新しい WebXR セッションを作成する前に、ユーザーのハードウェアとソフトウェアが使用したいプレゼンテーションモードをサポートしているかどうかを最初に確認するのがしばしば賢明です。 これは、たとえば、没入型プレゼンテーションとインラインプレゼンテーションのどちらを使用するかを決定するためにも使用できます。
-
-特定のモードがサポートされているかどうかを確認するには、{{domxref("XRSystem")}} のメソッド {{domxref("XRSystem.isSessionSupported", "isSessionSupported()")}} を呼び出します。 これは、指定されたタイプのセッションが使用できる場合は true、そうでない場合は false に解決される promise を返します。
-
-const immersiveOK = await navigator.xr.isSessionSupported("immersive-vr");
-if (immersiveOK) {
- // 没入型 VR セッションを作成して使用する
-} else {
- // 代わりにインラインセッションを作成するか、
- // インラインが必要な場合は非互換性についてユーザーに伝えます
-}
-
-
-セッションの作成と開始
-
-WebXR セッションは {{domxref("XRSession")}} オブジェクトによって表されます。 XRSession を取得するには、{{domxref("XRSystem")}} の {{domxref("XRSystem.requestSession", "requestSession()")}} メソッドを呼び出します。 このメソッドは、XRSession を正常に確立できる場合に XRSession で解決する promise を返します。 基本的には、次のようになります。
-
-xr.requestSession("immersive-vr").then((session) => {
- xrSession = session;
- /* セッションのセットアップを続行します */
-});
-
-
-このコードスニペットの requestSession() に渡されるパラメーター immersive-vr に注意してください。 この文字列は、確立する WebXR セッションのタイプを指定します。 この場合は、完全に没入型の仮想現実体験です。 次の3つの選択肢があります。
-
-
- immersive-vr- ヘッドセットまたは同様のデバイスを使用した、完全に没入型の仮想現実セッション。 ユーザーの周りの世界をあなたが提示する画像で完全に置き換えます。
- immersive-ar- ヘッドセットまたは類似の装置を使用して画像が現実世界に追加される拡張現実セッション。 AR 仕様は流動的であるため、このオプションはまだ広くサポートされていません。
- inline- ドキュメントウィンドウのコンテキスト内での XR 画像の画面表示。
-
-
-機能ポリシーがその使用を禁止したり、ユーザーがヘッドセットの使用許可を拒否したりするなど、何らかの理由でセッションを作成できなかった場合、promise は拒否されます。 したがって、起動して WebXR セッションを返すより完全な関数は次のようになります。
-
-async function createImmersiveSession(xr) {
- try {
- session = await xr.requestSession("immersive-vr");
- return session;
- } catch(error) {
- throw error;
- }
-}
-
-
-この関数は、新しい {{domxref("XRSession")}} を返すか、セッションの作成中にエラーが発生した場合に例外をスローします。
-
-セッションのカスタマイズ
-
-表示モードに加えて、{{domxref("XRSystem.requestSession", "requestSession()")}} メソッドは、セッションをカスタマイズするための初期化パラメーターを持つオプションのオブジェクトを取ります。 現在、セッションの構成可能な唯一の側面は、世界の座標系を表すためにどの参照空間を使用する必要があるかです。 必要な参照空間または使用したい参照空間と互換性のあるセッションを取得するために、必須またはオプションの参照空間を指定できます。
-
-たとえば、無制限（unbounded）の参照空間が必要な場合は、取得するセッションで無制限の空間を使用できるようにするために、それを必須機能として指定できます。
-
-async function createImmersiveSession(xr) {
- try {
- session = await xr.requestSession("immersive-vr", {
- requiredFeatures: [ "unbounded" ]
- });
- return session;
- } catch(error) {
- throw error;
- }
-}
-
-
-一方、インラインセッションが必要で、ローカル（local）参照空間を使用する場合は、次のようにします。
-
-async function createInlineSession(xr) {
- try {
- session = await xr.requestSession("inline", {
- optionalFeatures: [ "local" ]
- });
- return session;
- } catch(error) {
- throw error;
- }
-}
-
-
-この createInlineSession() 関数は、ローカル参照空間と互換性のあるインラインセッションを作成しようとします。 参照空間を作成する準備ができたら、ローカル空間を試すことができます。 それが失敗した場合は、すべてのデバイスがサポートする必要があるビューアー（viewer）参照空間にフォールバックします。
-
-新しいセッションを使用するための準備
-
-{{domxref("XRSystem.requestSession", "requestSession()")}} メソッドが返した promise が正常に解決されると、使用可能な WebXR セッションが手中にあることがわかります。 次に、セッションを使用できるように準備し、アニメーションを開始できます。
-
-セッションの構成を完了するために必要な（または必要になる可能性のある）主なことは、次のとおりです。
-
-
- - 監視する必要があるイベントのハンドラーを追加します。 ほとんどの場合、これには {{domxref("XRSession.end_event", "end")}} が含まれるため、セッションの終了を検出できます。
- - XR 入力コントローラーを使用する場合は、{{domxref("XRSession.inputsourceschange_event", "inputsourceschange")}} イベントを監視して、XR 入力コントローラーの追加または削除、およびさまざまな選択およびスクイーズのアクションイベントを検出します。
- - {{domxref("XRSystem")}} のイベント {{domxref("XRSystem.devicechange_event", "devicechange")}} を監視して、利用可能な没入型デバイスのセットが変更されたときに通知を受けることができます。
- - ターゲットコンテキストで {{domxref("HTMLCanvasElement")}} のメソッド {{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼び出して、フレームをレンダリングする予定のキャンバスの WebGL コンテキストを取得します。
- - WebGL データとモデルを設定し、シーンをレンダリングする準備をします。
- - {{domxref("XRWebGLLayer")}} を作成し、セッションの {{domxref("XRRenderState", "renderState")}} のプロパティ {{domxref("XRRenderState.baseLayer", "baseLayer")}} に値を渡して、XR システムのソースとして WebGL コンテキストを設定します。
- - 必要に応じて、オブジェクトの初期位置と拡大縮小の計算を実行します。
- - フレームレンダリングサイクルを開始します。
-
-
-基本的な形式では、この最終的なセットアップを行うコードは次のようになります。
-
-async function runSession(session) {
- let worldData;
-
- session.addEventListener("end", onSessionEnd);
-
- let canvas = document.querySelector("canvas");
- gl = canvas.getContext("webgl", { xrCompatible: true });
-
- // WebGL データなどを設定する
-
- worldData = loadGLPrograms(session, "worlddata.xml");
- if (!worldData) {
- return NULL;
- }
-
- // WebGL の構成を完了する
-
- worldData.session.updateRenderState({
- baseLayer: new XRWebGLLayer(worldData.session, gl)
- });
-
- // シーンのレンダリングを開始します
-
- referenceSpace = await worldData.session.requestReferenceSpace("unbounded");
- worldData.referenceSpace = referenceSpace.getOffsetReferenceSpace(
- new XRRigidTransform(worldData.playerSpawnPosition, worldData.playerSpawnOrientation));
- worldData.animationFrameRequestID = worldData.session.requestAnimationFrame(onDrawFrame);
-
- return worldData;
-}
-
-
-この例では、worldData という名前のオブジェクトを作成して、その世界とレンダリング環境に関するデータをカプセル化します。 これには、{{domxref("XRSession")}} 自体、WebGL でシーンをレンダリングするために使用されるすべてのデータ、その世界の参照空間、および {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} によって返される ID が含まれます。
-
-最初に、{{domxref("XRSession.end_event", "end")}} イベントのハンドラーが設定されます。 次に、レンダリングするキャンバスを取得し、その WebGL コンテキストへの参照を取得して、{{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼び出すときに xrCompatible オプションを指定します。
-
-次に、WebGL レンダラーに必要なデータとセットアップが実行されてから、WebGL が独自のフレームバッファーとして WebGL コンテキストのフレームバッファーを使用するように構成されます。 これは、{{domxref("XRSession")}} のメソッド {{domxref("XRSession.updateRenderState", "updateRenderState()")}} を使用して行われ、レンダリング状態の {{domxref("XRRenderState.baseLayer", "baseLayer")}} を、WebGL コンテキストをカプセル化する新しく作成された {{domxref("XRWebGLLayer")}} に設定します。
-
-シーンをレンダリングする準備
-
-この時点で、XRSession 自体が完全に構成されているため、レンダリングを開始できます。 まず、その世界の座標が記述される参照空間が必要です。 XRSession の {{domxref("XRSession.requestReferenceSpace", "requestReferenceSpace()")}} メソッドを呼び出すことにより、セッションの初期参照空間を取得できます。 requestReferenceSpace() を呼び出すときに、必要な参照空間のタイプの名前を指定します。 この場合、unbounded です。 ニーズに応じて、local または viewer を簡単に指定できます。
-
-
-
-requestReferenceSpace() によって返される参照空間は、原点 (0, 0, 0) を空間の中心に配置します。 これは素晴らしいことです — プレイヤーの視点が世界の正確な中心から始まる場合は。 しかし、ほとんどの場合、そうではありません。 その場合は、最初の参照空間で {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を呼び出して、(0, 0, 0) がビューアーの位置に配置されるように座標系をオフセットし、同様に顔を望ましい方向にシフトする新しい参照空間を作成します。 getOffsetReferenceSpace() への入力値は、デフォルトの世界座標で指定されたプレーヤーの位置と方向をカプセル化する {{domxref("XRRigidTransform")}} です。
-
-新しい参照空間が手中にあり、保管するために worldData オブジェクトに格納された状態で、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、WebXR セッションのアニメーションの次のフレームをレンダリングするときにコールバックが実行されるようにスケジュールします。 戻り値は、必要に応じて後でリクエストをキャンセルするために使用できる ID であるため、worldData にも保存します。
-
-最後に、worldData オブジェクトが呼び出し元に返され、メインコードが後で必要なデータを参照できるようになります。 この時点で、セットアッププロセスが完了し、アプリケーションのレンダリング段階に入りました。 レンダリングの詳細については、レンダリングと WebXR フレームアニメーションコールバックを参照してください。
-
-運用の詳細について
-
-明らかに、これはほんの一例です。 すべてを保存するために worldData オブジェクトは必要ありません。 あなたが好きな方法で維持するために必要な情報を保存できます。 別の情報が必要になったり、別の特定の要件が発生したりして、それはあなたが別の方法で、または別の順序で物事を行う原因となります。
-
-同様に、モデルやその他の情報を読み込んだり、WebGL データ（テクスチャ、頂点バッファー、シェーダーなど）を設定したりするために使用する特定の方法は、ニーズや使用しているフレームワークの状況などによって大きく異なります。
-
-重要なセッション維持イベント
-
-WebXR セッションの過程で、セッションの状態の変化を示す、またはセッションを適切に動作させ続けるために必要なことを通知するいくつかのイベントのいずれかを受け取る場合があります。
-
-セッションの可視状態の変化の検出
-
-XRSession の可視性の状態が変化すると（セッションが非表示または表示されたとき、またはユーザーが別のコンテキストにフォーカスしたときなど）、セッションは {{domxref("XRSession.visibilitychange_event", "visibilitychange")}} イベントを受け取ります。
-
-session.onvisibilitychange = (event) => {
- switch(event.session.visibilityState) {
- case "hidden":
- myFrameRate = 10;
- break;
- case "blurred-visible":
- myFrameRate = 30;
- break;
- case "visible":
- default:
- myFrameRate = 60;
- break;
- }
-};
-
-この例では、可視性の状態に応じて変数 myFrameRate を変更します。 おそらく、レンダラーはこの値を使用して、アニメーションループの進行に応じて新しいフレームをレンダリングする頻度を計算します。 したがって、シーンの「ぼかし（blurred）」が多くなるほどレンダリングの頻度は低くなります。
-
-参照空間のリセットの検出
-
-時折、ユーザーの世界での位置を追跡しているときに、ネイティブの原点に不連続またはジャンプが発生することがあります。 これが発生する最も一般的なシナリオは、ユーザーが XR デバイスの再キャリブレーションを要求したとき、または XR ハードウェアから受信した追跡データの流れに一時的な障害が発生したときです。 これらの状況により、ネイティブの原点は、ネイティブの原点をユーザーの位置と向きに合わせるために必要な距離と方向の角度で突然ジャンプします。
-
-これが発生すると、{{domxref("XRReferenceSpace.reset_event", "reset")}} イベントがセッションの {{domxref("XRReferenceSpace")}} に送信されます。 イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティは、ネイティブの原点を再調整するために必要な変換を詳述する {{domxref("XRRigidTransform")}} です。
-
-
-
reset イベントは {{domxref("XRSession")}} ではなく {{domxref("XRReferenceSpace")}} で発生することに注意してください。
-
reset イベントのもう1つの一般的な原因は、制限付き参照空間（{{domxref("XRReferenceSpaceType")}} が bounded-floor である参照空間）が、{{domxref("XRBoundedReferenceSpace")}} のプロパティ {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} の変更によって指定されたジオメトリを持っている場合です。
-
-参照空間のリセットのより一般的な原因と、詳細およびサンプルコードについては、{{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのドキュメントを参照してください。
-
-
-
-WebXR は、WebXR システムに固有の入力コントロールのリストを保持しています。 これらのデバイスには、ハンドヘルドコントローラー、モーションセンサーカメラ、モーションセンシティブグローブ、その他のフィードバックデバイスなどが含まれます。 ユーザーが WebXR コントローラーデバイスを接続または切断すると、{{domxref("XRSession.inputsourceschange_event", "inputsourceschange")}} イベントが XRSession にディスパッチされます。 これは、デバイスの可用性をユーザーに通知する機会であり、デバイスの入力を監視し始め、構成オプションを提供するか、またはそれを使用するために必要なものを提供します。
-
-WebXR セッションの終了
-
-ユーザーの VR または AR セッションが終了に近づくと、セッションは終了します。 {{domxref("XRSession")}} の停止は、ユーザーがボタンをクリックしてセッションを終了したために停止する時であるとセッション自体が判断した場合（ユーザーが XR デバイスをオフにした場合など）、またはアプリケーションが然るべきその他の状況に応じて発生します。
-
-ここでは、WebXR セッションの停止を要求する方法と、要求によるかどうかにかかわらず、セッションが終了したことを検出する方法の両方について説明します。
-
-セッションの停止
-
-終了時に WebXR セッションを完全に停止するには、セッションの {{domxref("XRSession.end", "end()")}} メソッドを呼び出す必要があります。 これは、停止がいつ完了するかを知るために使用できる promise を返します。
-
-async function shutdownXR(session) {
- if (session) {
- await session.end();
-
- /* この時点で、WebXR は完全に停止しています */
- }
-}
-
-
-shutdownXR() が呼び出し元に戻ると、WebXR セッションは完全かつ安全に停止しています。
-
-リソースの解放など、セッションの終了時に実行する必要がある作業がある場合は、メインコード本体ではなく、{{domxref("XRSession.end_event", "end")}} イベントハンドラーでその作業を実行する必要があります。 このようにして、停止が自動的にトリガーされたか手動でトリガーされたかに関係なく、クリーンアップを処理します。
-
-セッションが終了したときの検出
-
-以前に確立したように、{{domxref("XRSession.end", "end()")}} メソッドを呼び出したか、ユーザーがヘッドセットをオフにしたか、XR システムで何らかの解決できないエラーが発生したかなど、{{domxref("XRSession")}} に送信される {{domxref("XRSession.end_event", "end")}} イベントを監視することで、WebXR セッションが終了したことを検出できます。
-
-session.onend = (event) => {
- /* セッションが停止しました */
-
- freeResources();
-};
-
-ここでは、セッションが終了し、end イベントが受信されると、freeResources() 関数が呼び出され、XR の提示を処理するために以前に割り当てたりロードしたりしたリソースが解放されます。 end イベントハンドラーで freeResources() を呼び出すことにより、ユーザーが停止をトリガーするボタンをクリックしたとき（上記の shutdownXR() 関数を呼び出すことなど）と、エラーまたは何らかの理由でセッションが自動的に終了したときの両方で freeResources() を呼び出します。
-
-関連情報
-
-
diff --git a/files/ja/web/api/webxr_device_api/startup_and_shutdown/index.md b/files/ja/web/api/webxr_device_api/startup_and_shutdown/index.md
new file mode 100644
index 00000000000000..dca72bd075b6e2
--- /dev/null
+++ b/files/ja/web/api/webxr_device_api/startup_and_shutdown/index.md
@@ -0,0 +1,384 @@
+---
+title: WebXR セッションの起動と停止
+slug: Web/API/WebXR_Device_API/Startup_and_shutdown
+tags:
+ - 3D
+ - API
+ - AR
+ - Beginner
+ - Guide
+ - Initialization
+ - Mixed
+ - Preparation
+ - Reality
+ - Setup
+ - Shutdown
+ - Startup
+ - VR
+ - Virtual
+ - WebXR
+ - WebXR API
+ - WebXR Device API
+ - XR
+ - augmented
+translation_of: Web/API/WebXR_Device_API/Startup_and_shutdown
+---
+{{DefaultAPISidebar("WebXR Device API")}}{{SecureContext_header}}
+
+すでに 3D グラフィックス全般、特に WebGL に精通していると想定すると、次の大胆なステップで複合現実を実現できます。 現実の世界に加えて、またはその代わりに人工の風景やオブジェクトを表示するという考え方は、それほど複雑ではありません。 拡張現実または仮想現実のシナリオのレンダリングを開始する前に、WebXR セッションを作成してセットアップする必要があります。 また、適切に停止する方法も知っておく必要があります。 この記事では、これらのことを行う方法を学びます。
+
+## WebXR API へのアクセス
+
+アプリによる WebXR API へのアクセスは、{{domxref("XRSystem")}} オブジェクトから始まります。 このオブジェクトは、ユーザーの機器で利用可能なハードウェアとドライバーを通じて利用可能な WebXR デバイススイート全体を表します。 {{domxref("Navigator")}} のプロパティ {{domxref("Navigator.xr", "xr")}} を介してドキュメントで使用できるグローバルな `XRSystem` オブジェクトがあります。 これは、使用可能なハードウェアとドキュメントの環境を考慮して、適切な XR ハードウェアが使用できる場合に `XRSystem` オブジェクトを返すプロパティです。
+
+したがって、`XRSystem` オブジェクトをフェッチする最も単純なコードは次のとおりです。
+
+```js
+const xr = navigator.xr;
+```
+
+WebXR が利用できない場合、`xr` の値は `null` または `undefined` になります。
+
+### WebXR の可用性
+
+新しい、まだ開発中の API として、WebXR のサポートは特定のデバイスとブラウザーに限定されています。 そして、それらでさえ、デフォルトで有効にならないかもしれません。 ただし、互換性のあるシステムがない場合でも、WebXR を試すことができる選択肢がある場合があります。
+
+#### WebXR ポリフィル
+
+WebXR 仕様を設計しているチームは、WebXR API をサポートしていないブラウザーで WebXR をシミュレートするために使用できる [WebXR ポリフィル](https://github.com/immersive-web/webxr-polyfill)を公開しています。 ブラウザーが古い [WebVR API](/ja/docs/Web/API/WebVR_API) をサポートしている場合は、それが使用されます。 それ以外の場合、ポリフィルは、Google の Cardboard VR API を使用する実装にフォールバックします。
+
+ポリフィルは仕様とともに維持され、仕様に合わせて最新に保たれます。 さらに、WebXR および WebXR に関連するその他のテクノロジーのサポートと、ポリフィルの変更の実装の経時的なサポートとして、ブラウザーとの互換性を維持するために更新されます。
+
+必ず readme を注意深く読んでください。 ポリフィルには、ターゲットブラウザーに含まれる新しい JavaScript 機能との互換性の程度に応じて、いくつかのバージョンがあります。
+
+#### WebXR API エミュレーター拡張機能
+
+[Mozilla WebXR チーム](https://mixedreality.mozilla.org/)は、WebXR API をエミュレートし、HTC Vive、Oculus Go、Oculus Quest、Samsung Gear、Google Cardboard などの互換性のあるさまざまなデバイスをシミュレートする、Firefox と Chrome の両方と互換性のある [WebXR API Emulator](https://blog.mozvr.com/webxr-emulator-extension/) ブラウザー拡張機能を作成しました。 拡張機能を配置すると、ヘッドセットと任意のハンドコントローラーの位置と向き、およびコントローラーのボタンを制御できる開発者ツールパネルを開くことができます。
+
+##### エミュレーターの使用
+
+実際のヘッドセットを使用するのに比べて少し厄介ですが、これにより、WebXR が通常利用できないデスクトップコンピューターで WebXR のコードを試して開発することができます。 また、コードを実際のデバイスに取り込む前に、いくつかの基本的なテストを実行できます。 ただし、エミュレーターはまだすべての WebXR API を完全にエミュレートしていないため、予期しない問題が発生する可能性があることに注意してください。 ここでも、readme ファイルを注意深く読み、開始する前に制限事項を確認してください。
+
+**重要**: 製品をリリースまたは出荷する前に、常に実際の AR や VR のハードウェアでコードをテストする必要があります。 エミュレート、シミュレーション、またはポリフィルされた環境は、物理デバイスでの実際のテストに代わる適切なものではありません。
+
+##### 拡張機能の取得
+
+以下のサポートされているブラウザー用の WebXR API エミュレーターをダウンロードしてください。
+
+- [Google Chrome](https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje)
+- [Mozilla Firefox](https://addons.mozilla.org/ja/firefox/addon/webxr-api-emulator/)
+
+[拡張機能のソースコード](https://github.com/MozillaReality/WebXR-emulator-extension)は、GitHub で入手できます。
+
+##### エミュレーターの問題とメモ
+
+これは拡張機能に関する完全な記事の場所ではありませんが、言及する価値のある特定の事項がいくつかあります。
+
+拡張機能のバージョン 0.4.0 は 2020 年 3 月 26 日に発表されました。 安定状態に近づいている [WebXR AR モジュール](https://www.w3.org/TR/webxr-ar-module-1/)による拡張現実（AR）のサポートが導入されました。 AR のドキュメントは、近日中に MDN で公開されます。
+
+その他の改善には、エミュレーターを更新して `XR` インターフェイスの名前を {{domxref("XRSystem")}} に変更し、スクイーズ（グリップ）入力ソースのサポートを導入し、{{domxref("XRInputSource")}} のプロパティ {{domxref("XRInputSource.profiles", "profiles")}} のサポートを追加します。
+
+### コンテキスト要件
+
+WebXR 互換環境は、安全にロードされたドキュメントから始まります。 ドキュメントは、ローカルドライブ（`http://localhost/...` などの URL を使用するなど）からロードするか、ページのロード時に {{Glossary("HTTPS")}} を使用する必要があります。 同様に、JavaScript コードは安全にロードされている必要があります。
+
+ドキュメントが安全にロードされなかった場合は、それほど遠くまで到達できません。 {{domxref("navigator.xr")}} プロパティは、ドキュメントが安全にロードされていない場合には存在しません。 これは、互換性のある XR ハードウェアが利用できない場合にも当てはまります。 どちらの場合でも、`xr` プロパティの欠如に備える必要があり、エラーを適切に処理するか、何らかの形式のフォールバックを提供する必要があります。
+
+### WebXR ポリフィルにフォールバック
+
+フォールバックの選択肢の 1 つは、WebXR 標準化プロセスを担当する [Immersive Web ワーキンググループ](https://www.w3.org/immersive-web/)によって提供される [WebXR ポリフィル](https://github.com/immersive-web/webxr-polyfill/)です。 {{Glossary("polyfill","ポリフィル")}}は、WebXR をネイティブでサポートしていないブラウザーに WebXR のサポートを提供し、サポートしているブラウザーの実装間の不整合を解消するため、WebXR がネイティブで利用できる場合でも役立つ場合があります。
+
+ここでは、前の {{HTMLElement("script")}} タグを使用してポリフィルが含まれている、またはロードされていると想定して、オプションでポリフィルをインストールした後に {{domxref("XRSystem")}} オブジェクトを返す `getXR()` 関数を定義します。
+
+```js
+let webxrPolyfill = null;
+
+function getXR(usePolyfill) {
+ let tempXR;
+
+ switch(usePolyfill) {
+ case "if-needed":
+ tempXR = navigator.xr;
+ if (!tempXR) {
+ webxrPolyfill = new WebXRPolyfill();
+ tempXR = webxrPolyfill;
+ }
+ break;
+ case "yes":
+ webxrPolyfill = new WebXRPolyfill();
+ tempXR = webxrPolyfill;
+ break;
+ case "no":
+ default:
+ tempXR = navigator.xr;
+ break;
+ }
+
+ return tempXR;
+}
+
+const xr = getXR("no"); // ネイティブの XRSystem オブジェクトを取得
+const xr = getXR("yes"); // 常にポリフィルから XRSystem を返す
+const xr = getXR("if-needed"); // navigator.xr がない場合にのみポリフィルを使用
+```
+
+返された `XRSystem` オブジェクトは、MDN で提供されているドキュメントに従って使用できます。 グローバル変数 `webxrPolyfill` は、ポリフィルへの参照を保持するためにのみ使用され、不要になるまでポリフィルを使用できるようにします。 これを `null` に設定すると、依存しているオブジェクトがそれを使用しなくなったときに、ポリフィルをガベージコレクションできることを示します。
+
+もちろん、必要に応じてこれを簡略化できます。 アプリはおそらくポリフィルを使用するかどうかについてあまり行き来しないので、これを必要な特定のケースに単純化できます。
+
+### 権限とセキュリティ
+
+WebXR を中心に展開する多くのセキュリティ対策があります。 まず、ユーザーの世界観を完全に置き換える `immersive-vr` モードを使用するには、`xr-spatial-tracking` [機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)を設定する必要があります。 それに加えて、ドキュメントは安全で現在フォーカスされている必要があります。 最後に、{{domxref("Element.click_event", "click")}} イベントのハンドラーなどのユーザーイベントハンドラーから {{domxref("XRSystem.requestSession", "requestSession()")}} を呼び出す必要があります。
+
+安全な WebXR の活動と使用方法の詳細については、[WebXR の権限とセキュリティ](/ja/docs/Web/API/WebXR_Device_API/Permissions_and_security)の記事を参照してください。
+
+### 必要なセッションタイプが利用可能であることの確認
+
+新しい WebXR セッションを作成する前に、ユーザーのハードウェアとソフトウェアが使用したいプレゼンテーションモードをサポートしているかどうかを最初に確認するのがしばしば賢明です。 これは、たとえば、没入型プレゼンテーションとインラインプレゼンテーションのどちらを使用するかを決定するためにも使用できます。
+
+特定のモードがサポートされているかどうかを確認するには、{{domxref("XRSystem")}} のメソッド {{domxref("XRSystem.isSessionSupported", "isSessionSupported()")}} を呼び出します。 これは、指定されたタイプのセッションが使用できる場合は `true`、そうでない場合は `false` に解決される promise を返します。
+
+```js
+const immersiveOK = await navigator.xr.isSessionSupported("immersive-vr");
+if (immersiveOK) {
+ // 没入型 VR セッションを作成して使用する
+} else {
+ // 代わりにインラインセッションを作成するか、
+ // インラインが必要な場合は非互換性についてユーザーに伝えます
+}
+```
+
+## セッションの作成と開始
+
+WebXR セッションは {{domxref("XRSession")}} オブジェクトによって表されます。 `XRSession` を取得するには、{{domxref("XRSystem")}} の {{domxref("XRSystem.requestSession", "requestSession()")}} メソッドを呼び出します。 このメソッドは、`XRSession` を正常に確立できる場合に `XRSession` で解決する promise を返します。 基本的には、次のようになります。
+
+```js
+xr.requestSession("immersive-vr").then((session) => {
+ xrSession = session;
+ /* セッションのセットアップを続行します */
+});
+```
+
+このコードスニペットの `requestSession()` に渡されるパラメーター `immersive-vr` に注意してください。 この文字列は、確立する WebXR セッションのタイプを指定します。 この場合は、完全に没入型の仮想現実体験です。 次の 3 つの選択肢があります。
+
+- `immersive-vr`
+ - : ヘッドセットまたは同様のデバイスを使用した、完全に没入型の仮想現実セッション。 ユーザーの周りの世界をあなたが提示する画像で完全に置き換えます。
+- `immersive-ar`
+ - : ヘッドセットまたは類似の装置を使用して画像が現実世界に追加される拡張現実セッション。 _AR 仕様は流動的であるため、このオプションはまだ広くサポートされていません。_
+- `inline`
+ - : ドキュメントウィンドウのコンテキスト内での XR 画像の画面表示。
+
+機能ポリシーがその使用を禁止したり、ユーザーがヘッドセットの使用許可を拒否したりするなど、何らかの理由でセッションを作成できなかった場合、promise は拒否されます。 したがって、起動して WebXR セッションを返すより完全な関数は次のようになります。
+
+```js
+async function createImmersiveSession(xr) {
+ try {
+ session = await xr.requestSession("immersive-vr");
+ return session;
+ } catch(error) {
+ throw error;
+ }
+}
+```
+
+この関数は、新しい {{domxref("XRSession")}} を返すか、セッションの作成中にエラーが発生した場合に例外をスローします。
+
+### セッションのカスタマイズ
+
+表示モードに加えて、{{domxref("XRSystem.requestSession", "requestSession()")}} メソッドは、セッションをカスタマイズするための初期化パラメーターを持つオプションのオブジェクトを取ります。 現在、セッションの構成可能な唯一の側面は、世界の座標系を表すためにどの参照空間を使用する必要があるかです。 必要な参照空間または使用したい参照空間と互換性のあるセッションを取得するために、必須またはオプションの参照空間を指定できます。
+
+たとえば、無制限（`unbounded`）の参照空間が必要な場合は、取得するセッションで無制限の空間を使用できるようにするために、それを必須機能として指定できます。
+
+```js
+async function createImmersiveSession(xr) {
+ try {
+ session = await xr.requestSession("immersive-vr", {
+ requiredFeatures: [ "unbounded" ]
+ });
+ return session;
+ } catch(error) {
+ throw error;
+ }
+}
+```
+
+一方、*インライン*セッションが必要で、ローカル（`local`）参照空間を使用する場合は、次のようにします。
+
+```js
+async function createInlineSession(xr) {
+ try {
+ session = await xr.requestSession("inline", {
+ optionalFeatures: [ "local" ]
+ });
+ return session;
+ } catch(error) {
+ throw error;
+ }
+}
+```
+
+この `createInlineSession()` 関数は、ローカル参照空間と互換性のあるインラインセッションを作成しようとします。 参照空間を作成する準備ができたら、ローカル空間を試すことができます。 それが失敗した場合は、すべてのデバイスがサポートする必要があるビューアー（`viewer`）参照空間にフォールバックします。
+
+### 新しいセッションを使用するための準備
+
+{{domxref("XRSystem.requestSession", "requestSession()")}} メソッドが返した promise が正常に解決されると、使用可能な WebXR セッションが手中にあることがわかります。 次に、セッションを使用できるように準備し、アニメーションを開始できます。
+
+セッションの構成を完了するために必要な（または必要になる可能性のある）主なことは、次のとおりです。
+
+- 監視する必要があるイベントのハンドラーを追加します。 ほとんどの場合、これには {{domxref("XRSession.end_event", "end")}} が含まれるため、セッションの終了を検出できます。
+- XR 入力コントローラーを使用する場合は、{{domxref("XRSession.inputsourceschange_event", "inputsourceschange")}} イベントを監視して、XR 入力コントローラーの追加または削除、およびさまざまな[選択およびスクイーズのアクションイベント](/ja/docs/Web/API/WebXR_Device_API/Inputs#Actions)を検出します。
+- {{domxref("XRSystem")}} のイベント {{domxref("XRSystem.devicechange_event", "devicechange")}} を監視して、利用可能な没入型デバイスのセットが変更されたときに通知を受けることができます。
+- ターゲットコンテキストで {{domxref("HTMLCanvasElement")}} のメソッド {{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼び出して、フレームをレンダリングする予定のキャンバスの WebGL コンテキストを取得します。
+- WebGL データとモデルを設定し、シーンをレンダリングする準備をします。
+- {{domxref("XRWebGLLayer")}} を作成し、セッションの {{domxref("XRRenderState", "renderState")}} のプロパティ {{domxref("XRRenderState.baseLayer", "baseLayer")}} に値を渡して、XR システムのソースとして WebGL コンテキストを設定します。
+- 必要に応じて、オブジェクトの初期位置と拡大縮小の計算を実行します。
+- [フレームレンダリングサイクル](/ja/docs/Web/API/WebXR_Device_API/Rendering)を開始します。
+
+基本的な形式では、この最終的なセットアップを行うコードは次のようになります。
+
+```js
+async function runSession(session) {
+ let worldData;
+
+ session.addEventListener("end", onSessionEnd);
+
+ let canvas = document.querySelector("canvas");
+ gl = canvas.getContext("webgl", { xrCompatible: true });
+
+ // WebGL データなどを設定する
+
+ worldData = loadGLPrograms(session, "worlddata.xml");
+ if (!worldData) {
+ return NULL;
+ }
+
+ // WebGL の構成を完了する
+
+ worldData.session.updateRenderState({
+ baseLayer: new XRWebGLLayer(worldData.session, gl)
+ });
+
+ // シーンのレンダリングを開始します
+
+ referenceSpace = await worldData.session.requestReferenceSpace("unbounded");
+ worldData.referenceSpace = referenceSpace.getOffsetReferenceSpace(
+ new XRRigidTransform(worldData.playerSpawnPosition, worldData.playerSpawnOrientation));
+ worldData.animationFrameRequestID = worldData.session.requestAnimationFrame(onDrawFrame);
+
+ return worldData;
+}
+```
+
+この例では、`worldData` という名前のオブジェクトを作成して、その世界とレンダリング環境に関するデータをカプセル化します。 これには、{{domxref("XRSession")}} 自体、WebGL でシーンをレンダリングするために使用されるすべてのデータ、その世界の参照空間、および {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} によって返される ID が含まれます。
+
+最初に、{{domxref("XRSession.end_event", "end")}} イベントのハンドラーが設定されます。 次に、レンダリングするキャンバスを取得し、その WebGL コンテキストへの参照を取得して、{{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼び出すときに `xrCompatible` オプションを指定します。
+
+次に、WebGL レンダラーに必要なデータとセットアップが実行されてから、WebGL が独自のフレームバッファーとして WebGL コンテキストのフレームバッファーを使用するように構成されます。 これは、{{domxref("XRSession")}} のメソッド {{domxref("XRSession.updateRenderState", "updateRenderState()")}} を使用して行われ、レンダリング状態の {{domxref("XRRenderState.baseLayer", "baseLayer")}} を、WebGL コンテキストをカプセル化する新しく作成された {{domxref("XRWebGLLayer")}} に設定します。
+
+### シーンをレンダリングする準備
+
+この時点で、`XRSession` 自体が完全に構成されているため、レンダリングを開始できます。 まず、その世界の座標が記述される参照空間が必要です。 `XRSession` の {{domxref("XRSession.requestReferenceSpace", "requestReferenceSpace()")}} メソッドを呼び出すことにより、セッションの初期参照空間を取得できます。 `requestReferenceSpace()` を呼び出すときに、必要な参照空間のタイプの名前を指定します。 この場合、`unbounded` です。 ニーズに応じて、`local` または `viewer` を簡単に指定できます。
+
+> **Note:** ニーズに合った適切な参照空間を選択する方法を理解するには、[WebXR の幾何学と参照空間](/ja/docs/Web/API/WebXR_Device_API/Geometry)の[参照空間タイプの選択](/ja/docs/Web/API/WebXR_Device_API/Geometry#Selecting_the_reference_space_type)を参照してください。
+
+`requestReferenceSpace()` によって返される参照空間は、原点 (0, 0, 0) を空間の中心に配置します。 これは素晴らしいことです — プレイヤーの視点が世界の正確な中心から始まる場合は。 しかし、ほとんどの場合、そうではありません。 その場合は、最初の参照空間で {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}} を呼び出して、(0, 0, 0) がビューアーの位置に配置されるように[座標系をオフセット](/ja/docs/Web/API/WebXR_Device_API/Geometry#Establishing_the_reference_space)し、同様に顔を望ましい方向にシフトする*新しい*参照空間を作成します。 `getOffsetReferenceSpace()` への入力値は、デフォルトの世界座標で指定されたプレーヤーの位置と方向をカプセル化する {{domxref("XRRigidTransform")}} です。
+
+新しい参照空間が手中にあり、保管するために `worldData` オブジェクトに格納された状態で、セッションの {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} メソッドを呼び出して、WebXR セッションのアニメーションの次のフレームをレンダリングするときにコールバックが実行されるようにスケジュールします。 戻り値は、必要に応じて後でリクエストをキャンセルするために使用できる ID であるため、`worldData` にも保存します。
+
+最後に、`worldData` オブジェクトが呼び出し元に返され、メインコードが後で必要なデータを参照できるようになります。 この時点で、セットアッププロセスが完了し、アプリケーションのレンダリング段階に入りました。 レンダリングの詳細については、[レンダリングと WebXR フレームアニメーションコールバック](/ja/docs/Web/API/WebXR_Device_API/Rendering)を参照してください。
+
+### 運用の詳細について
+
+明らかに、これはほんの一例です。 すべてを保存するために `worldData` オブジェクトは必要ありません。 あなたが好きな方法で維持するために必要な情報を保存できます。 別の情報が必要になったり、別の特定の要件が発生したりして、それはあなたが別の方法で、または別の順序で物事を行う原因となります。
+
+同様に、モデルやその他の情報を読み込んだり、WebGL データ（テクスチャ、頂点バッファー、シェーダーなど）を設定したりするために使用する特定の方法は、ニーズや使用しているフレームワークの状況などによって大きく異なります。
+
+## 重要なセッション維持イベント
+
+WebXR セッションの過程で、セッションの状態の変化を示す、またはセッションを適切に動作させ続けるために必要なことを通知するいくつかのイベントのいずれかを受け取る場合があります。
+
+### セッションの可視状態の変化の検出
+
+`XRSession` の可視性の状態が変化すると（セッションが非表示または表示されたとき、またはユーザーが別のコンテキストにフォーカスしたときなど）、セッションは {{domxref("XRSession.visibilitychange_event", "visibilitychange")}} イベントを受け取ります。
+
+```js
+session.onvisibilitychange = (event) => {
+ switch(event.session.visibilityState) {
+ case "hidden":
+ myFrameRate = 10;
+ break;
+ case "blurred-visible":
+ myFrameRate = 30;
+ break;
+ case "visible":
+ default:
+ myFrameRate = 60;
+ break;
+ }
+};
+```
+
+この例では、可視性の状態に応じて変数 `myFrameRate` を変更します。 おそらく、レンダラーはこの値を使用して、アニメーションループの進行に応じて新しいフレームをレンダリングする頻度を計算します。 したがって、シーンの「ぼかし（blurred）」が多くなるほどレンダリングの頻度は低くなります。
+
+### 参照空間のリセットの検出
+
+時折、ユーザーの世界での位置を追跡しているときに、[ネイティブの原点](/ja/docs/Web/API/WebXR_Device_API/Geometry#On_the_origins_of_spaces)に不連続またはジャンプが発生することがあります。 これが発生する最も一般的なシナリオは、ユーザーが XR デバイスの再キャリブレーションを要求したとき、または XR ハードウェアから受信した追跡データの流れに一時的な障害が発生したときです。 これらの状況により、ネイティブの原点は、ネイティブの原点をユーザーの位置と向きに合わせるために必要な距離と方向の角度で突然ジャンプします。
+
+これが発生すると、{{domxref("XRReferenceSpace.reset_event", "reset")}} イベントがセッションの {{domxref("XRReferenceSpace")}} に送信されます。 イベントの {{domxref("XRReferenceSpaceEvent.transform", "transform")}} プロパティは、ネイティブの原点を再調整するために必要な変換を詳述する {{domxref("XRRigidTransform")}} です。
+
+> **Note:** `reset` イベントは {{domxref("XRSession")}} ではなく {{domxref("XRReferenceSpace")}} で発生することに注意してください。
+
+`reset` イベントのもう 1 つの一般的な原因は、制限付き参照空間（{{domxref("XRReferenceSpaceType")}} が `bounded-floor` である参照空間）が、{{domxref("XRBoundedReferenceSpace")}} のプロパティ {{domxref("XRBoundedReferenceSpace.boundsGeometry", "boundsGeometry")}} の変更によって指定されたジオメトリを持っている場合です。
+
+参照空間のリセットのより一般的な原因と、詳細およびサンプルコードについては、{{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのドキュメントを参照してください。
+
+### WebXR 入力コントロールの使用可能なセットが変更されたときの検出
+
+WebXR は、WebXR システムに固有の入力コントロールのリストを保持しています。 これらのデバイスには、ハンドヘルドコントローラー、モーションセンサーカメラ、モーションセンシティブグローブ、その他のフィードバックデバイスなどが含まれます。 ユーザーが WebXR コントローラーデバイスを接続または切断すると、{{domxref("XRSession.inputsourceschange_event", "inputsourceschange")}} イベントが `XRSession` にディスパッチされます。 これは、デバイスの可用性をユーザーに通知する機会であり、デバイスの入力を監視し始め、構成オプションを提供するか、またはそれを使用するために必要なものを提供します。
+
+## WebXR セッションの終了
+
+ユーザーの VR または AR セッションが終了に近づくと、セッションは終了します。 {{domxref("XRSession")}} の停止は、ユーザーがボタンをクリックしてセッションを終了したために停止する時であるとセッション自体が判断した場合（ユーザーが XR デバイスをオフにした場合など）、またはアプリケーションが然るべきその他の状況に応じて発生します。
+
+ここでは、WebXR セッションの停止を要求する方法と、要求によるかどうかにかかわらず、セッションが終了したことを検出する方法の両方について説明します。
+
+### セッションの停止
+
+終了時に WebXR セッションを完全に停止するには、セッションの {{domxref("XRSession.end", "end()")}} メソッドを呼び出す必要があります。 これは、停止がいつ完了するかを知るために使用できる [promise](/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) を返します。
+
+```js
+async function shutdownXR(session) {
+ if (session) {
+ await session.end();
+
+ /* この時点で、WebXR は完全に停止しています */
+ }
+}
+```
+
+`shutdownXR()` が呼び出し元に戻ると、WebXR セッションは完全かつ安全に停止しています。
+
+リソースの解放など、セッションの終了時に実行する必要がある作業がある場合は、メインコード本体ではなく、{{domxref("XRSession.end_event", "end")}} イベントハンドラーでその作業を実行する必要があります。 このようにして、停止が自動的にトリガーされたか手動でトリガーされたかに関係なく、クリーンアップを処理します。
+
+### セッションが終了したときの検出
+
+以前に確立したように、{{domxref("XRSession.end", "end()")}} メソッドを呼び出したか、ユーザーがヘッドセットをオフにしたか、XR システムで何らかの解決できないエラーが発生したかなど、{{domxref("XRSession")}} に送信される {{domxref("XRSession.end_event", "end")}} イベントを監視することで、WebXR セッションが終了したことを検出できます。
+
+```js
+session.onend = (event) => {
+ /* セッションが停止しました */
+
+ freeResources();
+};
+```
+
+ここでは、セッションが終了し、`end` イベントが受信されると、`freeResources()` 関数が呼び出され、XR の提示を処理するために以前に割り当てたりロードしたりしたリソースが解放されます。 `end` イベントハンドラーで `freeResources()` を呼び出すことにより、ユーザーが停止をトリガーするボタンをクリックしたとき（上記の `shutdownXR()` 関数を呼び出すことなど）と、エラーまたは何らかの理由でセッションが自動的に終了したときの両方で `freeResources()` を呼び出します。
+
+## 関連情報
+
+- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API)
+- [WebXR の基本](/ja/docs/Web/API/WebXR_Device_API/Fundamentals)
+- [WebXR での空間追跡](/ja/docs/Web/API/WebXR_Device_API/Spatial_tracking)
+- [視点とビューアー: WebXR でのカメラのシミュレーション](/ja/docs/Web/API/WebXR_Device_API/Cameras)
+- [制限付き参照空間の使用](/ja/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces)
+- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)
diff --git a/files/ja/web/api/wheelevent/index.html b/files/ja/web/api/wheelevent/index.html
deleted file mode 100644
index 3805db1fdf50e4..00000000000000
--- a/files/ja/web/api/wheelevent/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: WheelEvent
-slug: Web/API/WheelEvent
-tags:
- - API
- - DOM
- - Interface
- - Reference
- - WheelEvent
-translation_of: Web/API/WheelEvent
----
-{{APIRef("DOM Events")}}
-
-WheelEvent インターフェイスは、ユーザーがマウスホイールやそれに似た機器を動かしたときに発行されるイベントを表します。
-
-
-
重要: これは標準のホイールイベントインターフェイスです。古いバージョンのブラウザーは、標準外でブラウザー間の互換性のない {{DOMxRef("MouseWheelEvent")}} および {{DOMxRef("MouseScrollEvent")}} インターフェイスを実装していました。これらを避けて、このインターフェイスを使用してください。
-
-
注: {{domxref("Element/wheel_event", "wheel")}} イベントと {{domxref("Element/scroll_event", "scroll")}} イベントを混同しないでください。 wheel イベントの既定のアクションは実装固有のものです。したがって、 wheel イベントは必ずしも scroll イベントを発行するわけではありません。その場合でも、 wheel イベントの delta* 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 wheel イベントの delta* プロパティに頼らないようにしてください。代わりに、 scroll イベント内のターゲットの {{DOMxRef("Element.scrollLeft", "scrollLeft")}} や {{DOMxRef("Element.scrollTop", "scrollTop")}} の値の変化を検出するようにしてください。
-
{{InheritanceDiagram}}
-
-コンストラクター
-
-
- - {{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}
- WheelEvent オブジェクトを生成します。
-
-プロパティ
-
-このインターフェイスは、その祖先である {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, {{DOMxRef("Event")}} からプロパティを継承しています。
-
-
- - {{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}
- - 水平方向のスクロール量を表す
double を返します。
- - {{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}
- - 垂直方向のスクロール量を表す
double を返します。
- - {{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}
- - Z 軸方向のスクロール量を表す
double を返します。
- - {{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}
- - スクロール量の差分値の単位を表す
unsigned long を返します。許容値は以下のとおりです:
-
-
-
-
-
-
-
-
-
-
- DOM_DELTA_PIXEL |
- 0x00 |
- delta* はピクセル数で指定されます。 |
-
-
- DOM_DELTA_LINE |
- 0x01 |
- delta* は行数で指定されます。 |
-
-
- DOM_DELTA_PAGE |
- 0x02 |
- delta* はページ数で指定されます。 |
-
-
-
-
-
-
-メソッド
-
-このインターフェイスではメソッドが定義されていませんが、祖先である {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, {{DOMxRef("Event")}} のメソッドを継承しています。
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
-
-
- {{SpecName("UI Events", "#interface-wheelevent", "The WheelEvent interface")}} |
- {{Spec2("UI Events")}} |
- |
-
-
- | {{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}} |
- {{Spec2('DOM3 Events')}} |
- 初回定義 |
-
-
-
-
-ブラウザーの互換性
-
-{{Compat("api.WheelEvent")}}
-
-関連情報
-
-
- - {{domxref("Element/wheel_event", "wheel")}} イベント
- - 置き換えたインターフェイス:
-
- - Gecko の古いマウスホイールイベントオブジェクト: {{DOMxRef("MouseScrollEvent")}}
- - Gecko 以外のブラウザーの古いマウスホイールイベントオブジェクト: {{DOMxRef("MouseWheelEvent")}}
-
-
-
diff --git a/files/ja/web/api/wheelevent/index.md b/files/ja/web/api/wheelevent/index.md
new file mode 100644
index 00000000000000..0824d80d957322
--- /dev/null
+++ b/files/ja/web/api/wheelevent/index.md
@@ -0,0 +1,65 @@
+---
+title: WheelEvent
+slug: Web/API/WheelEvent
+tags:
+ - API
+ - DOM
+ - Interface
+ - Reference
+ - WheelEvent
+translation_of: Web/API/WheelEvent
+---
+{{APIRef("DOM Events")}}
+
+**`WheelEvent`** インターフェイスは、ユーザーがマウスホイールやそれに似た機器を動かしたときに発行されるイベントを表します。
+
+> **Warning:** **重要: これは標準のホイールイベントインターフェイスです。**古いバージョンのブラウザーは、標準外でブラウザー間の互換性のない {{DOMxRef("MouseWheelEvent")}} および {{DOMxRef("MouseScrollEvent")}} インターフェイスを実装していました。これらを避けて、このインターフェイスを使用してください。
+
+> **Note:** **注:** {{domxref("Element/wheel_event", "wheel")}} イベントと {{domxref("Element/scroll_event", "scroll")}} イベントを混同しないでください。 `wheel` イベントの既定のアクションは実装固有のものです。したがって、 `wheel` イベントは必ずしも `scroll` イベントを発行するわけではありません。その場合でも、 `wheel` イベントの `delta*` 値は必ずしもコンテンツのスクロール方向を反映しているとは限りません。したがって、スクロールの方向を取得するために、 `wheel` イベントの `delta*` プロパティに頼らないようにしてください。代わりに、 `scroll` イベント内のターゲットの {{DOMxRef("Element.scrollLeft", "scrollLeft")}} や {{DOMxRef("Element.scrollTop", "scrollTop")}} の値の変化を検出するようにしてください。
+
+{{InheritanceDiagram}}
+
+## コンストラクター
+
+- {{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}
+ - : `WheelEvent` オブジェクトを生成します。
+
+## プロパティ
+
+_このインターフェイスは、その祖先である {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, {{DOMxRef("Event")}} からプロパティを継承しています。_
+
+- {{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}
+ - : 水平方向のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}
+ - : 垂直方向のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}
+ - : Z 軸方向のスクロール量を表す `double` を返します。
+- {{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}
+ - | : スクロール量の差分値の単位を表す `unsigned long` を返します。許容値は以下のとおりです: | 定数 | 値 | 説明 |
+ | ---------------------------------------------------------------------------------------- | ------ | ------------------------------------- | ---- |
+ | `DOM_DELTA_PIXEL` | `0x00` | `delta*` はピクセル数で指定されます。 |
+ | `DOM_DELTA_LINE` | `0x01` | `delta*` は行数で指定されます。 |
+ | `DOM_DELTA_PAGE` | `0x02` | `delta*` はページ数で指定されます。 |
+
+## メソッド
+
+_このインターフェイスではメソッドが定義されていませんが、祖先である {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, {{DOMxRef("Event")}} のメソッドを継承しています。_
+
+## 仕様書
+
+| 仕様書 | 状態 | 備考 |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- |
+| {{SpecName("UI Events", "#interface-wheelevent", "The WheelEvent interface")}} | {{Spec2("UI Events")}} | |
+| {{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}} | {{Spec2('DOM3 Events')}} | 初回定義 |
+
+## ブラウザーの互換性
+
+{{Compat("api.WheelEvent")}}
+
+## 関連情報
+
+- {{domxref("Element/wheel_event", "wheel")}} イベント
+- 置き換えたインターフェイス:
+
+ - Gecko の古いマウスホイールイベントオブジェクト: {{DOMxRef("MouseScrollEvent")}}
+ - Gecko 以外のブラウザーの古いマウスホイールイベントオブジェクト: {{DOMxRef("MouseWheelEvent")}}
diff --git a/files/ja/web/api/window/afterprint_event/index.html b/files/ja/web/api/window/afterprint_event/index.html
deleted file mode 100644
index 36986579f3fbcd..00000000000000
--- a/files/ja/web/api/window/afterprint_event/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: 'Window: afterprint イベント'
-slug: Web/API/Window/afterprint_event
-tags:
- - Event
- - Reference
- - イベント
-translation_of: Web/API/Window/afterprint_event
----
-{{APIRef}}
-
-afterprint イベントは、関連する文書の印刷が開始されたか、印刷プレビューが閉じた後に発生します。
-
-
-
-
- | バブリング |
- いいえ |
-
-
- | キャンセル |
- 不可 |
-
-
- | インターフェイス |
- {{domxref("Event")}} |
-
-
- | イベントハンドラープロパティ |
- {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} |
-
-
-
-
-例
-
-addEventListener() の使用例:
-
-window.addEventListener('afterprint', (event) => {
- console.log('After print');
-});
-
-onafterprint イベントハンドラープロパティの使用例:
-
-window.onafterprint = (event) => {
- console.log('After print');
-};
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
-
-
-
-
-
-
- | {{SpecName('HTML WHATWG', '#event-afterprint')}} |
- {{Spec2('HTML WHATWG')}} |
-
-
-
-
-ブラウザーの互換性
-
-{{Compat("api.Window.afterprint_event")}}
-
-関連情報
-
-
- - 関連イベント: {{domxref("Window/beforeprint_event", "beforeprint")}}
-
diff --git a/files/ja/web/api/window/afterprint_event/index.md b/files/ja/web/api/window/afterprint_event/index.md
new file mode 100644
index 00000000000000..06a980766ada43
--- /dev/null
+++ b/files/ja/web/api/window/afterprint_event/index.md
@@ -0,0 +1,51 @@
+---
+title: 'Window: afterprint イベント'
+slug: Web/API/Window/afterprint_event
+tags:
+ - Event
+ - Reference
+ - イベント
+translation_of: Web/API/Window/afterprint_event
+---
+{{APIRef}}
+
+**`afterprint`** イベントは、関連する文書の印刷が開始されたか、印刷プレビューが閉じた後に発生します。
+
+| バブリング | いいえ |
+| ---------------------------- | ------------------------------------------------------------------------------------ |
+| キャンセル | 不可 |
+| インターフェイス | {{domxref("Event")}} |
+| イベントハンドラープロパティ | {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} |
+
+## 例
+
+`addEventListener()` の使用例:
+
+```js
+window.addEventListener('afterprint', (event) => {
+ console.log('After print');
+});
+```
+
+`onafterprint` イベントハンドラープロパティの使用例:
+
+```js
+window.onafterprint = (event) => {
+ console.log('After print');
+};
+```
+
+## 仕様書
+
+| 仕様書 | 状態 |
+| ---------------------------------------------------------------- | -------------------------------- |
+| | |
+| {{SpecName('HTML WHATWG', '#event-afterprint')}} | {{Spec2('HTML WHATWG')}} |
+
+## ブラウザーの互換性
+
+{{Compat("api.Window.afterprint_event")}}
+
+## 関連情報
+
+- 関連イベント: {{domxref("Window/beforeprint_event", "beforeprint")}}
diff --git a/files/ja/web/api/window/alert/index.html b/files/ja/web/api/window/alert/index.html
deleted file mode 100644
index 401979b2cdc55d..00000000000000
--- a/files/ja/web/api/window/alert/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: window.alert
-slug: Web/API/Window/alert
-tags:
- - API
- - DOM
- - Gecko
- - Method
- - Reference
- - Window
- - alert
-translation_of: Web/API/Window/alert
----
-{{ApiRef}}
-
-Window.alert() メソッドは、オプションの指定されたコンテンツと OK ボタンを持つ警告ダイアログを表示します。
-
-一部の条件下（ユーザーがタブを切り替えた場合など）では、ブラウザーが実際にダイアログを表示しない場合や、ユーザーがダイアログを閉じるのを待たない場合があります。
-
-構文
-
-window.alert(message);
-
-パラメーター
-
-
- message {{optional_inline}}- 警告ダイアログに表示したいオプションの文字列または、文字列に変換されて表示されるオブジェクトです。
-
-
-例
-
-window.alert("Hello world!");
-alert("Hello world!");
-
-いずれも、以下のように表示されます。
-
-
-
-注記
-
-警告ダイアログは、メッセージの確認応答以外に、ユーザ側で応答を必要としないメッセージのために使われるべきです。
-
-この記事では、 DOM:window.prompt と DOM：window.confirm のテキストが共有されています。ダイアログボックスはモーダルウィンドウです。つまり、ユーザーはこれを閉じないとプログラムの他のインターフェイス部分にアクセスする事ができません。ですから、ダイアログボックス (もしくは、モーダルウィンドウ) を生成する関数を過度に使用すべきではありません。
-
-仕様
-
-
-
-
- | 仕様 |
- 状態 |
- コメント |
-
-
- | {{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}} |
- {{Spec2('HTML WHATWG')}} |
- |
-
-
-
-
-関連情報
-
-
- - {{domxref("window.confirm","confirm")}}
- - {{domxref("window.prompt","prompt")}}
- - Mozilla Chrome については、
nsIPromptService.alert と nsIPromptService.alertCheck を参照してください。
-
diff --git a/files/ja/web/api/window/alert/index.md b/files/ja/web/api/window/alert/index.md
new file mode 100644
index 00000000000000..d792215185603d
--- /dev/null
+++ b/files/ja/web/api/window/alert/index.md
@@ -0,0 +1,56 @@
+---
+title: window.alert
+slug: Web/API/Window/alert
+tags:
+ - API
+ - DOM
+ - Gecko
+ - Method
+ - Reference
+ - Window
+ - alert
+translation_of: Web/API/Window/alert
+---
+{{ApiRef}}
+
+**`Window.alert()`** メソッドは、オプションの指定されたコンテンツと OK ボタンを持つ警告ダイアログを表示します。
+
+一部の条件下（ユーザーがタブを切り替えた場合など）では、ブラウザーが実際にダイアログを表示しない場合や、ユーザーがダイアログを閉じるのを待たない場合があります。
+
+## 構文
+
+ window.alert(message);
+
+### パラメーター
+
+- `message` {{optional_inline}}
+ - : 警告ダイアログに表示したいオプションの文字列または、文字列に変換されて表示されるオブジェクトです。
+
+## 例
+
+```js
+window.alert("Hello world!");
+alert("Hello world!");
+```
+
+いずれも、以下のように表示されます。
+
+
+
+## 注記
+
+警告ダイアログは、メッセージの確認応答以外に、ユーザ側で応答を必要としないメッセージのために使われるべきです。
+
+この記事では、 DOM:window\.prompt と DOM：window\.confirm のテキストが共有されています。ダイアログボックスはモーダルウィンドウです。つまり、ユーザーはこれを閉じないとプログラムの他のインターフェイス部分にアクセスする事ができません。ですから、ダイアログボックス (もしくは、モーダルウィンドウ) を生成する関数を過度に使用すべきではありません。
+
+## 仕様
+
+| 仕様 | 状態 | コメント |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------- |
+| {{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}} | {{Spec2('HTML WHATWG')}} | |
+
+## 関連情報
+
+- {{domxref("window.confirm","confirm")}}
+- {{domxref("window.prompt","prompt")}}
+- [Mozilla Chrome](/ja/docs/Chrome) については、`nsIPromptService.alert` と `nsIPromptService.alertCheck` を参照してください。
diff --git a/files/ja/web/api/window/appinstalled_event/index.html b/files/ja/web/api/window/appinstalled_event/index.html
deleted file mode 100644
index c80b50ea88f174..00000000000000
--- a/files/ja/web/api/window/appinstalled_event/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: 'Window: appinstalled イベント'
-slug: Web/API/Window/appinstalled_event
-tags:
- - API
- - Event
- - Manifest
- - Reference
- - Web
- - appinstalled
- - events
- - web manifest
- - ウェブマニフェスト
- - マニフェスト
-translation_of: Web/API/Window/appinstalled_event
----
-{{APIRef}}
-
-
-
appinstalled は Web Manifest API のイベントで、ブラウザーがあるページをアプリケーションとして成功裏にインストールしたとき発行されます。
-
-
-
- | バブリング |
- なし |
-
-
- | キャンセル |
- 不可 |
-
-
- | インターフェイス |
- {{domxref("Event")}} |
-
-
- | イベントハンドラー |
- {{domxref("Window/onappinstalled", "onappinstalled")}} |
-
-
-
-
-例
-
-appinstalled イベントは {{domxref("EventTarget/addEventListener", "addEventListener")}} メソッドで使用することができます。
-
-window.addEventListener('appinstalled', function() {
- console.log('アプリをインストールしてくれてありがとう！');
-});
-
-または {{domxref("Window/onappinstalled", "onappinstalled")}} イベントハンドラープロパティを使用してください。
-
-window.onappinstalled = function() {
- console.log('アプリをインストールしてくれてありがとう！');
-};
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
-
-
- | {{SpecName('Manifest', '#dfn-appinstalled', 'appinstalled')}} |
- {{Spec2('Manifest')}} |
-
-
-
-
-ブラウザーの対応
-
-{{Compat("api.Window.onappinstalled")}}
-
-関連情報
-
-
- - 関連するイベントハンドラー、 {{domxref("Window.onappinstalled")}}
-
diff --git a/files/ja/web/api/window/appinstalled_event/index.md b/files/ja/web/api/window/appinstalled_event/index.md
new file mode 100644
index 00000000000000..11d9f08801ef2f
--- /dev/null
+++ b/files/ja/web/api/window/appinstalled_event/index.md
@@ -0,0 +1,57 @@
+---
+title: 'Window: appinstalled イベント'
+slug: Web/API/Window/appinstalled_event
+tags:
+ - API
+ - Event
+ - Manifest
+ - Reference
+ - Web
+ - appinstalled
+ - events
+ - web manifest
+ - ウェブマニフェスト
+ - マニフェスト
+translation_of: Web/API/Window/appinstalled_event
+---
+{{APIRef}}
+
+**`appinstalled`** は [Web Manifest API](/ja/docs/Web/Manifest) のイベントで、ブラウザーがあるページをアプリケーションとして成功裏にインストールしたとき発行されます。
+
+| バブリング | なし |
+| ------------------ | ------------------------------------------------------------------------ |
+| キャンセル | 不可 |
+| インターフェイス | {{domxref("Event")}} |
+| イベントハンドラー | {{domxref("Window/onappinstalled", "onappinstalled")}} |
+
+## 例
+
+`appinstalled` イベントは {{domxref("EventTarget/addEventListener", "addEventListener")}} メソッドで使用することができます。
+
+```js
+window.addEventListener('appinstalled', function() {
+ console.log('アプリをインストールしてくれてありがとう！');
+});
+```
+
+または {{domxref("Window/onappinstalled", "onappinstalled")}} イベントハンドラープロパティを使用してください。
+
+```js
+window.onappinstalled = function() {
+ console.log('アプリをインストールしてくれてありがとう！');
+};
+```
+
+## 仕様書
+
+| 仕様書 | 状態 |
+| -------------------------------------------------------------------------------- | ---------------------------- |
+| {{SpecName('Manifest', '#dfn-appinstalled', 'appinstalled')}} | {{Spec2('Manifest')}} |
+
+## ブラウザーの対応
+
+{{Compat("api.Window.onappinstalled")}}
+
+## 関連情報
+
+- 関連するイベントハンドラー、 {{domxref("Window.onappinstalled")}}
diff --git a/files/ja/web/api/window/applicationcache/index.html b/files/ja/web/api/window/applicationcache/index.html
deleted file mode 100644
index 1acc4a641ffe36..00000000000000
--- a/files/ja/web/api/window/applicationcache/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: window.applicationCache
-slug: Web/API/Window/applicationCache
-tags:
- - API
- - Deprecated
- - HTML DOM
- - Property
- - Reference
- - Window
-translation_of: Web/API/Window/applicationCache
----
-
-
重要: アプリケーションキャッシュは Firefox 44 で非推奨となり、 Firefox 60 以降では安全ではないコンテキストでは利用できなくなりました ({{bug(1354175)}}、現在は Nightly/Beta のみ)。ウェブサイトをオフラインで利用するために使用しないでください。 — 代わりにサービスワーカーの利用を検討してください。
-
{{APIRef}}
-
-概要
-
-ウィンドウのアプリケーションキャッシュオブジェクトへの参照を返します。
-
-構文
-
-cache = window.applicationCache
-
-
-引数
-
-
- cache : OfflineResourceList へのオブジェクト参照です。
-
-仕様書
-
-
- - {{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}
-
-
-関連情報
-
-
diff --git a/files/ja/web/api/window/applicationcache/index.md b/files/ja/web/api/window/applicationcache/index.md
new file mode 100644
index 00000000000000..03c364a6c4a546
--- /dev/null
+++ b/files/ja/web/api/window/applicationcache/index.md
@@ -0,0 +1,35 @@
+---
+title: window.applicationCache
+slug: Web/API/Window/applicationCache
+tags:
+ - API
+ - Deprecated
+ - HTML DOM
+ - Property
+ - Reference
+ - Window
+translation_of: Web/API/Window/applicationCache
+---
+> **Warning:** **重要**: アプリケーションキャッシュは Firefox 44 で非推奨となり、 Firefox 60 以降では安全ではないコンテキストでは利用できなくなりました ({{bug(1354175)}}、現在は Nightly/Beta のみ)。ウェブサイトをオフラインで利用するために使用しないでください。 — 代わりに[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)の利用を検討してください。
+
+{{APIRef}}
+
+## 概要
+
+ウィンドウのアプリケーションキャッシュオブジェクトへの参照を返します。
+
+## 構文
+
+ cache = window.applicationCache
+
+### 引数
+
+- `cache` : `OfflineResourceList` へのオブジェクト参照です。
+
+## 仕様書
+
+- {{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}
+
+## 関連情報
+
+- [アプリケーションキャッシュの使用](/ja/docs/HTML/Using_the_application_cache)
diff --git a/files/ja/web/api/window/beforeprint_event/index.html b/files/ja/web/api/window/beforeprint_event/index.html
deleted file mode 100644
index 4fbe40e15e55e2..00000000000000
--- a/files/ja/web/api/window/beforeprint_event/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: 'Window: beforeprint イベント'
-slug: Web/API/Window/beforeprint_event
-tags:
- - Event
- - Reference
-translation_of: Web/API/Window/beforeprint_event
----
-{{APIRef}}
-
-beforeprint イベントは、関連する文書が印刷される直前や、印刷プレビューが開く直前に発生します。
-
-
-
-
- | バブリング |
- いいえ |
-
-
- | キャンセル |
- 不可 |
-
-
- | インターフェイス |
- {{domxref("Event")}} |
-
-
- | イベントハンドラープロパティ |
- {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} |
-
-
-
-
-例
-
-addEventListener() の使用例:
-
-window.addEventListener('beforeprint', (event) => {
- console.log('Before print');
-});
-
-onbeforeprint イベントハンドラープロパティの使用例:
-
-window.onbeforeprint = (event) => {
- console.log('Before print');
-};
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
-
-
-
-
- | {{SpecName('HTML WHATWG', '#event-beforeprint')}} |
- {{Spec2('HTML WHATWG')}} |
-
-
-
-
-ブラウザーの互換性
-
-{{Compat("api.Window.beforeprint_event")}}
-
-関連情報
-
-
- - 関連イベント: {{domxref("Window/afterprint_event", "afterprint")}}
-
diff --git a/files/ja/web/api/window/beforeprint_event/index.md b/files/ja/web/api/window/beforeprint_event/index.md
new file mode 100644
index 00000000000000..803b2e104f6768
--- /dev/null
+++ b/files/ja/web/api/window/beforeprint_event/index.md
@@ -0,0 +1,49 @@
+---
+title: 'Window: beforeprint イベント'
+slug: Web/API/Window/beforeprint_event
+tags:
+ - Event
+ - Reference
+translation_of: Web/API/Window/beforeprint_event
+---
+{{APIRef}}
+
+**`beforeprint`** イベントは、関連する文書が印刷される直前や、印刷プレビューが開く直前に発生します。
+
+| バブリング | いいえ |
+| ---------------------------- | ---------------------------------------------------------------------------------------- |
+| キャンセル | 不可 |
+| インターフェイス | {{domxref("Event")}} |
+| イベントハンドラープロパティ | {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} |
+
+## 例
+
+`addEventListener()` の使用例:
+
+```js
+window.addEventListener('beforeprint', (event) => {
+ console.log('Before print');
+});
+```
+
+`onbeforeprint` イベントハンドラープロパティの使用例:
+
+```js
+window.onbeforeprint = (event) => {
+ console.log('Before print');
+};
+```
+
+## 仕様書
+
+| 仕様書 | 状態 |
+| ---------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', '#event-beforeprint')}} | {{Spec2('HTML WHATWG')}} |
+
+## ブラウザーの互換性
+
+{{Compat("api.Window.beforeprint_event")}}
+
+## 関連情報
+
+- 関連イベント: {{domxref("Window/afterprint_event", "afterprint")}}
diff --git a/files/ja/web/api/window/beforeunload_event/index.html b/files/ja/web/api/window/beforeunload_event/index.html
deleted file mode 100644
index bbbf1484999a00..00000000000000
--- a/files/ja/web/api/window/beforeunload_event/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: 'Window: beforeunload イベント'
-slug: Web/API/Window/beforeunload_event
-tags:
- - Event
- - Reference
- - Window
- - イベント
-translation_of: Web/API/Window/beforeunload_event
----
-{{APIRef}}
-
-beforeunload イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。
-
-
-
-
- | バブリング |
- なし |
-
-
- | キャンセル |
- 可 |
-
-
- | インターフェイス |
- {{domxref("Event")}} |
-
-
- | イベントハンドラー |
- {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} |
-
-
-
-
-このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。
-
-仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの {{domxref("Event.preventDefault()", "preventDefault()")}} を呼び出すことになっています。
-
-しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。
-
-
- - イベントの
returnValue プロパティに文字列を代入する
- - イベントハンドラーから文字列を返す
-
-
-一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、これは非推奨であり、すでに多くのブラウザーが対応していません。
-
-望ましくないポップアップに対処するために、ブラウザーはページが操作されていない限り、 beforeunload のイベントハンドラーで生成したプロンプトを表示しなかったり、全くプロンプトを表示しなかったりする可能性があります。
-
-イベントハンドラー/リスナーを window またはdocument の beforeunload イベントに割り当てると、ブラウザーはメモリ内のページナビゲーションキャッシュ、例えば Firefox の Back-Forward キャッシュや WebKit のページキャッシュなどを使用することを防ぎます。
-
-HTML 仕様書は {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} などのメソッドが、このイベントの実行中には無視されることがあることを示しています。詳しくは、 HTML 仕様書をご覧ください。
-
-例
-
-HTML の仕様では、 {{domxref("Event.returnValue")}} を使用する代わりに {{domxref("Event.preventDefault()")}} メソッドを使用する必要があります。ただし、これはすべてのブラウザーで対応しているわけではありません。
-
-window.addEventListener('beforeunload', (event) => {
- // Cancel the event as stated by the standard.
- event.preventDefault();
- // Chrome requires returnValue to be set.
- event.returnValue = '';
-});
-
-
-仕様書
-
-
-
-
- | 仕様書 |
- 状態 |
- 備考 |
-
-
-
-
- | {{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}} |
- {{Spec2("HTML WHATWG")}} |
- |
-
-
- | {{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}} |
- {{Spec2("HTML5 W3C")}} |
- 初回定義 |
-
-
-
-
-ブラウザーの互換性
-
-{{Compat("api.Window.beforeunload_event")}}
-
-関連情報
-
-
diff --git a/files/ja/web/api/window/beforeunload_event/index.md b/files/ja/web/api/window/beforeunload_event/index.md
new file mode 100644
index 00000000000000..0ec6e1d0a2a493
--- /dev/null
+++ b/files/ja/web/api/window/beforeunload_event/index.md
@@ -0,0 +1,66 @@
+---
+title: 'Window: beforeunload イベント'
+slug: Web/API/Window/beforeunload_event
+tags:
+ - Event
+ - Reference
+ - Window
+ - イベント
+translation_of: Web/API/Window/beforeunload_event
+---
+{{APIRef}}
+
+**`beforeunload`** イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。文書はまだ表示されており、この時点ではイベントはキャンセル可能です。
+
+| バブリング | なし |
+| ------------------ | ---------------------------------------------------------------------------------------- |
+| キャンセル | 可 |
+| インターフェイス | {{domxref("Event")}} |
+| イベントハンドラー | {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} |
+
+このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。
+
+仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの {{domxref("Event.preventDefault()", "preventDefault()")}} を呼び出すことになっています。
+
+しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。
+
+- イベントの `returnValue` プロパティに文字列を代入する
+- イベントハンドラーから文字列を返す
+
+一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、これは非推奨であり、すでに多くのブラウザーが対応していません。
+
+望ましくないポップアップに対処するために、ブラウザーはページが操作されていない限り、 `beforeunload` のイベントハンドラーで生成したプロンプトを表示しなかったり、全くプロンプトを表示しなかったりする可能性があります。
+
+イベントハンドラー/リスナーを `window` または`document` の `beforeunload` イベントに割り当てると、ブラウザーはメモリ内のページナビゲーションキャッシュ、例えば [Firefox の Back-Forward キャッシュ](/ja/docs/Using_Firefox_1.5_caching)や [WebKit のページキャッシュ](https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/)などを使用することを防ぎます。
+
+HTML 仕様書は {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} などのメソッドが、このイベントの実行中には無視されることがあることを示しています。詳しくは、 [HTML 仕様書](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts)をご覧ください。
+
+## 例
+
+HTML の仕様では、 {{domxref("Event.returnValue")}} を使用する代わりに {{domxref("Event.preventDefault()")}} メソッドを使用する必要があります。ただし、これはすべてのブラウザーで対応しているわけではありません。
+
+```js
+window.addEventListener('beforeunload', (event) => {
+ // Cancel the event as stated by the standard.
+ event.preventDefault();
+ // Chrome requires returnValue to be set.
+ event.returnValue = '';
+});
+```
+
+## 仕様書
+
+| 仕様書 | 状態 | 備考 |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------- |
+| {{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}} | {{Spec2("HTML WHATWG")}} | |
+| {{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}} | {{Spec2("HTML5 W3C")}} | 初回定義 |
+
+## ブラウザーの互換性
+
+{{Compat("api.Window.beforeunload_event")}}
+
+## 関連情報
+
+- 関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}
+- [Unloading Documents — Prompt to unload a document](https://html.spec.whatwg.org/#prompt-to-unload-a-document)
+- [Remove Custom Messages in onbeforeload Dialogs after Chrome 51](https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs)
diff --git a/files/ja/web/api/window/cancelanimationframe/index.html b/files/ja/web/api/window/cancelanimationframe/index.html
deleted file mode 100644
index 7076cd8add9931..00000000000000
--- a/files/ja/web/api/window/cancelanimationframe/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: window.cancelAnimationFrame
-slug: Web/API/Window/cancelAnimationFrame
-tags:
- - API
- - DOM
- - Method
-translation_of: Web/API/Window/cancelAnimationFrame
----
-{{APIRef}}
-
-概要
-
-{{domxref("window.requestAnimationFrame()")}} の呼び出しによりスケジュールされたフレームアニメーションのリクエストをキャンセルします。
-
-構文
-
-window.cancelAnimationFrame(requestID);
-
-
-引数
-
-
- requestID- コールバックがリクエストした {{domxref("window.requestAnimationFrame()")}} の呼び出しにより返された ID 値。
-
-
-例
-
-var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
- window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-
-var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
-
-var start = window.mozAnimationStartTime; // Firefox のみでサポート。他のブラウザーでは代わりに Date.now() などを使用してください。
-
-var myReq;
-
-function step(timestamp) {
- var progress = timestamp - start;
- d.style.left = Math.min(progress / 10, 200) + 'px';
- if (progress < 2000) {
- myReq = requestAnimationFrame(step);
- }
-}
-myReq = requestAnimationFrame(step);
-
-cancelAnimationFrame(myReq);
-
-
-ブラウザーの実装状況
-
-{{Compat("api.Window.cancelAnimationFrame")}}
-
-仕様
-
-
- - {{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}
-
-
-関連情報
-
-
- - {{domxref("window.mozAnimationStartTime")}}
- - {{domxref("window.requestAnimationFrame()")}}
-
diff --git a/files/ja/web/api/window/cancelanimationframe/index.md b/files/ja/web/api/window/cancelanimationframe/index.md
new file mode 100644
index 00000000000000..ef4f5f53bef643
--- /dev/null
+++ b/files/ja/web/api/window/cancelanimationframe/index.md
@@ -0,0 +1,60 @@
+---
+title: window.cancelAnimationFrame
+slug: Web/API/Window/cancelAnimationFrame
+tags:
+ - API
+ - DOM
+ - Method
+translation_of: Web/API/Window/cancelAnimationFrame
+---
+{{APIRef}}
+
+## 概要
+
+{{domxref("window.requestAnimationFrame()")}} の呼び出しによりスケジュールされたフレームアニメーションのリクエストをキャンセルします。
+
+## 構文
+
+ window.cancelAnimationFrame(requestID);
+
+### 引数
+
+- `requestID`
+ - : コールバックがリクエストした {{domxref("window.requestAnimationFrame()")}} の呼び出しにより返された ID 値。
+
+## 例
+
+```js
+var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+ window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime; // Firefox のみでサポート。他のブラウザーでは代わりに Date.now() などを使用してください。
+
+var myReq;
+
+function step(timestamp) {
+ var progress = timestamp - start;
+ d.style.left = Math.min(progress / 10, 200) + 'px';
+ if (progress < 2000) {
+ myReq = requestAnimationFrame(step);
+ }
+}
+myReq = requestAnimationFrame(step);
+
+cancelAnimationFrame(myReq);
+```
+
+## ブラウザーの実装状況
+
+{{Compat("api.Window.cancelAnimationFrame")}}
+
+## 仕様
+
+- {{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}
+
+## 関連情報
+
+- {{domxref("window.mozAnimationStartTime")}}
+- {{domxref("window.requestAnimationFrame()")}}
diff --git a/files/ja/web/api/window/captureevents/index.html b/files/ja/web/api/window/captureevents/index.html
deleted file mode 100644
index df242de4b17c08..00000000000000
--- a/files/ja/web/api/window/captureevents/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Window.captureEvents()
-slug: Web/API/Window/captureEvents
-tags:
- - API
- - Gecko
- - HTML DOM
- - Method
- - Non-standard
-translation_of: Web/API/Window/captureEvents
----
-{{ ApiRef() }} {{Deprecated_Header}} {{Non-standard_header}}
-
-Window.captureEvents() メソッドは、指定した種類のすべてのイベントをキャプチャするように、そのウィンドウを登録します。
-
-構文
-
-window.captureEvents(eventType)
-
-
-eventType は、 Event.ABORT, Event.BLUR, Event.CLICK, Event.CHANGE, Event.DBLCLICK, Event.DRAGDDROP, Event.ERROR, Event.FOCUS, Event.KEYDOWN, Event.KEYPRESS, Event.KEYUP, Event.LOAD, Event.MOUSEDOWN, Event.MOUSEMOVE, Event.MOUSEOUT, Event.MOUSEOVER, Event.MOUSEUP, Event.MOVE, Event.RESET, Event.RESIZE, Event.SELECT, Event.SUBMIT, Event.UNLOAD の値の組み合わせを取ります。
-
-例
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<!-- ... -->
-<script>
-function reg() {
- window.captureEvents(Event.CLICK);
- window.onclick = page_click;
-}
-
-function page_click() {
- alert('ページクリックイベントが検出されました！');
-}
-</script>
-</head>
-
-<body onload="reg();">
-<p>click anywhere on this page.</p>
-</body>
-</html>
-
-
-注
-
-ユーザーの操作によって DOM 内で発生したイベント (ボタンのクリックや現在の文書からのフォーカス移動など) は、通常、イベントを開始したオブジェクトに到達する前に、まず高レベルの window や document オブジェクトを通過します。
-
-window の captureEvents() メソッドを呼び出すと、指定した種類のイベント (例えば Event.CLICK) は、階層内の「下位」オブジェクトに通過しなくなります。イベントを通常のように「バブルアップ」させるためには、 window.releaseEvents() ({{deprecated_inline}}) を window 上で呼び出し、イベントをトラップしないようにしなければなりません。
-
-なお、次の構文を使用することでこのメソッドにイベントのリストを渡すことができます。
- window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP).
-
-仕様書
-
-どの仕様書にも含まれていません。
diff --git a/files/ja/web/api/window/captureevents/index.md b/files/ja/web/api/window/captureevents/index.md
new file mode 100644
index 00000000000000..78dcd75c75fefb
--- /dev/null
+++ b/files/ja/web/api/window/captureevents/index.md
@@ -0,0 +1,60 @@
+---
+title: Window.captureEvents()
+slug: Web/API/Window/captureEvents
+tags:
+ - API
+ - Gecko
+ - HTML DOM
+ - Method
+ - Non-standard
+translation_of: Web/API/Window/captureEvents
+---
+{{ ApiRef() }} {{Deprecated_Header}} {{Non-standard_header}}
+
+**`Window.captureEvents()`** メソッドは、指定した種類のすべてのイベントをキャプチャするように、そのウィンドウを登録します。
+
+## 構文
+
+```js
+window.captureEvents(eventType)
+```
+
+`eventType` は、 `Event.ABORT`, `Event.BLUR`, `Event.CLICK`, `Event.CHANGE`, `Event.DBLCLICK`, `Event.DRAGDDROP`, `Event.ERROR`, `Event.FOCUS`, `Event.KEYDOWN`, `Event.KEYPRESS`, `Event.KEYUP`, `Event.LOAD`, `Event.MOUSEDOWN`, `Event.MOUSEMOVE`, `Event.MOUSEOUT`, `Event.MOUSEOVER`, `Event.MOUSEUP`, `Event.MOVE`, `Event.RESET`, `Event.RESIZE`, `Event.SELECT`, `Event.SUBMIT`, `Event.UNLOAD` の値の組み合わせを取ります。
+
+## 例
+
+```html
+
+
+
+
+
+
+
+
+click anywhere on this page.
+
+
+```
+
+### 注
+
+ユーザーの操作によって DOM 内で発生したイベント (ボタンのクリックや現在の文書からのフォーカス移動など) は、通常、イベントを開始したオブジェクトに到達する前に、まず高レベルの [`window`](/ja/docs/Web/API/Window) や [`document`](/ja/docs/Web/API/Document) オブジェクトを通過します。
+
+[`window`](/ja/docs/Web/API/Window) の `captureEvents()` メソッドを呼び出すと、指定した種類のイベント (例えば `Event.CLICK`) は、階層内の「下位」オブジェクトに通過しなくなります。イベントを通常のように「バブルアップ」させるためには、 [`window.releaseEvents()`](/ja/docs/Web/API/Window/releaseEvents) ({{deprecated_inline}}) を window 上で呼び出し、イベントをトラップしないようにしなければなりません。
+
+なお、次の構文を使用することでこのメソッドにイベントのリストを渡すことができます。
+`window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)`.
+
+## 仕様書
+
+どの仕様書にも含まれていません。
diff --git a/files/ja/web/api/window/close/index.html b/files/ja/web/api/window/close/index.html
deleted file mode 100644
index 171d2761deff9f..00000000000000
--- a/files/ja/web/api/window/close/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: window.close
-slug: Web/API/Window/close
-tags:
- - API
- - DOM
- - Gecko
- - Method
- - Reference
- - Window
-translation_of: Web/API/Window/close
----
-{{APIRef}}
-
-Window.close() メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。
-
-このメソッドが許可されるのは、{{domxref("window.open()")}} メソッドを用いたスクリプトにより開かれたウィンドウに対する呼び出しのみです。ウィンドウがスクリプトにより開かれたものでない場合、次のようなエラーがコンソールに表示されます: スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。
-
-構文
-
-window.close();
-
-例
-
-window.open() で開かれたウィンドウを閉じる
-
-この例は、ウィンドウを開くメソッドと、そのウィンドウを閉じるメソッドです。これは、{{domxref("window.open()")}} の呼び出しにより開かれたウィンドウを閉じる Window.close() の使い方を実演します。
-
-//開いたウィンドウへの参照を保持するグローバル変数
-var openedWindow;
-
-function openWindow() {
- openedWindow = window.open('moreinfo.htm');
-}
-
-function closeOpenedWindow() {
- openedWindow.close();
-}
-
-
-現在のウィンドウを閉じる
-
-以前は、window インスタンスの close() を呼び出す代わりに window オブジェクトの close() メソッドを直接呼び出した場合、ブラウザは、スクリプトで開いたウィンドウであるかどうかに関わらず、最前面のウィンドウを閉じていました。セキュリティ上の理由により、スクリプトにより開いたものでないウィンドウを閉じることは許可されなくなりました (Firefox 46.0.1: スクリプトは、そのスクリプトが開いたものでないウィンドウを閉じることができません)。
-
-function closeCurrentWindow() {
- window.close();
-}
-
-
-仕様
-
-
-
-
- | 仕様書 |
- 策定状況 |
- 備考 |
-
-
- | {{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}} |
- {{Spec2('HTML WHATWG')}} |
- |
-
-
- | {{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}} |
- {{Spec2('HTML5 W3C')}} |
- |
-
-
-
-
-ブラウザーの実装状況
-
-
-
-{{Compat("api.Window.close")}}
diff --git a/files/ja/web/api/window/close/index.md b/files/ja/web/api/window/close/index.md
new file mode 100644
index 00000000000000..ca725cf27a6855
--- /dev/null
+++ b/files/ja/web/api/window/close/index.md
@@ -0,0 +1,61 @@
+---
+title: window.close
+slug: Web/API/Window/close
+tags:
+ - API
+ - DOM
+ - Gecko
+ - Method
+ - Reference
+ - Window
+translation_of: Web/API/Window/close
+---
+{{APIRef}}
+
+**`Window.close()`** メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。
+
+このメソッドが許可されるのは、{{domxref("window.open()")}} メソッドを用いたスクリプトにより開かれたウィンドウに対する呼び出しのみです。ウィンドウがスクリプトにより開かれたものでない場合、次のようなエラーがコンソールに表示されます: `スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。`
+
+## 構文
+
+ window.close();
+
+## 例
+
+### `window.open()` で開かれたウィンドウを閉じる
+
+この例は、ウィンドウを開くメソッドと、そのウィンドウを閉じるメソッドです。これは、{{domxref("window.open()")}} の呼び出しにより開かれたウィンドウを閉じる `Window.close()` の使い方を実演します。
+
+```js
+//開いたウィンドウへの参照を保持するグローバル変数
+var openedWindow;
+
+function openWindow() {
+ openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow() {
+ openedWindow.close();
+}
+```
+
+### 現在のウィンドウを閉じる
+
+以前は、`window` **インスタンス**の `close()` を呼び出す代わりに `window` オブジェクトの `close()` メソッドを直接呼び出した場合、ブラウザは、スクリプトで開いたウィンドウであるかどうかに関わらず、最前面のウィンドウを閉じていました。セキュリティ上の理由により、スクリプトにより開いたものでないウィンドウを閉じることは許可されなくなりました (Firefox 46.0.1: スクリプトは、そのスクリプトが開いたものでないウィンドウを閉じることができません)。
+
+```js
+function closeCurrentWindow() {
+ window.close();
+}
+```
+
+## 仕様
+
+| 仕様書 | 策定状況 | 備考 |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---- |
+| {{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}} | {{Spec2('HTML WHATWG')}} | |
+| {{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}} | {{Spec2('HTML5 W3C')}} | |
+
+## ブラウザーの実装状況
+
+{{Compat("api.Window.close")}}
diff --git a/files/ja/web/api/window/closed/index.html b/files/ja/web/api/window/closed/index.html
deleted file mode 100644
index 78d9140858af33..00000000000000
--- a/files/ja/web/api/window/closed/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: window.closed
-slug: Web/API/Window/closed
-tags:
- - DOM
- - DOM_0
- - Gecko
- - Gecko DOM Reference
- - Window
-translation_of: Web/API/Window/closed
----
-
- {{ApiRef}}
-概要
-この読取専用プロパティは、対象ウィンドウが閉じられているかどうかを示します。
-構文
-var isClosed = windowRef.closed;
-
-
- -
-
isClosed
- -
- 真偽値。次の何れかの値を取り得ます :
-
- true: ウィンドウが閉じられている事を示すfalse: ウィンドウが開いている事を示す
-
-
-例
-
-次の例は、どのようにポップアップウィンドウでそれを開いたウィンドウの URL を変化させるかというデモです。URL を変化させる前に、 {{domxref("window.opener")}} プロパティを用いて、現在のウィンドウがそのポップアップを開いたウィンドウであるどうか、そして、その開いた側のウィンドウが閉じられていないかをチェックします。:
-// 開いた側のウィンドウが存在するか、かつ、閉じられていないかを調べます。
-if (window.opener && !window.opener.closed) {
- window.opener.location.href = "http://www.mozilla.org";
-}
-ポップアップはそれを開いたウィンドウにしかアクセスできないことに注意してください。
-
-この例では、関数 refreshPopupWindow() が ポップアップのデータを更新するために ポップアップの location オブジェクト中の reload メソッドを呼び出します。ポップアップがまだ開かれていない場合、または、ユーザがそれを閉じてしまっている場合は、新しいウィンドウが開かれます。
-var popupWindow = null;
-
-function refreshPopupWindow() {
- if (popupWindow && !popupWindow.closed) {
- // popupWindow が開いている場合、それを更新します
- popupWindow.location.reload(true);
- } else {
- // 新しいウィンドウを開きます。
- popupWindow = window.open("popup.html","dataWindow");
- }
-}
-
-仕様
-DOM Level 0。 window.closed は、W3C の仕様や技術勧告に含まれるものではありません。
-関連情報
-
diff --git a/files/ja/web/api/window/closed/index.md b/files/ja/web/api/window/closed/index.md
new file mode 100644
index 00000000000000..f02a4d58bda223
--- /dev/null
+++ b/files/ja/web/api/window/closed/index.md
@@ -0,0 +1,65 @@
+---
+title: window.closed
+slug: Web/API/Window/closed
+tags:
+ - DOM
+ - DOM_0
+ - Gecko
+ - Gecko DOM Reference
+ - Window
+translation_of: Web/API/Window/closed
+---
+{{ApiRef}}
+
+## 概要
+
+この読取専用プロパティは、対象ウィンドウが閉じられているかどうかを示します。
+
+## 構文
+
+ var isClosed = windowRef.closed;
+
+- `isClosed`
+ - : 真偽値。次の何れかの値を取り得ます :\* `true`: ウィンドウが閉じられている事を示す
+ - `false`: ウィンドウが開いている事を示す
+
+## 例
+
+### ポップアップからウィンドウの URL を変化させる
+
+次の例は、どのようにポップアップウィンドウでそれを開いたウィンドウの URL を変化させるかというデモです。URL を変化させる前に、 {{domxref("window.opener")}} プロパティを用いて、現在のウィンドウがそのポップアップを開いたウィンドウであるどうか、そして、その開いた側のウィンドウが閉じられていないかをチェックします。:
+
+```js
+// 開いた側のウィンドウが存在するか、かつ、閉じられていないかを調べます。
+if (window.opener && !window.opener.closed) {
+ window.opener.location.href = "http://www.mozilla.org";
+}
+```
+
+ポップアップはそれを開いたウィンドウにしかアクセスできないことに注意してください。
+
+### 以前に開いたポップアップを更新する
+
+この例では、関数 `refreshPopupWindow()` が ポップアップのデータを更新するために ポップアップの location オブジェクト中の `reload` メソッドを呼び出します。ポップアップがまだ開かれていない場合、または、ユーザがそれを閉じてしまっている場合は、新しいウィンドウが開かれます。
+
+```js
+var popupWindow = null;
+
+function refreshPopupWindow() {
+ if (popupWindow && !popupWindow.closed) {
+ // popupWindow が開いている場合、それを更新します
+ popupWindow.location.reload(true);
+ } else {
+ // 新しいウィンドウを開きます。
+ popupWindow = window.open("popup.html","dataWindow");
+ }
+}
+```
+
+## 仕様
+
+DOM Level 0。 `window.closed` は、W3C の仕様や技術勧告に含まれるものではありません。
+
+## 関連情報
+
+- [MSDN window.closed](http://msdn.microsoft.com/ja-jp/library/ms533574.aspx)
diff --git a/files/ja/web/api/window/confirm/index.html b/files/ja/web/api/window/confirm/index.html
deleted file mode 100644
index 0f7361d8d38307..00000000000000
--- a/files/ja/web/api/window/confirm/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: window.confirm
-slug: Web/API/Window/confirm
-tags:
- - DOM
- - DOM_0
- - Gecko
- - Gecko DOM Reference
-translation_of: Web/API/Window/confirm
----
-{{ApiRef("Window")}}
-
-Window.confirm() メソッドは、メッセージと、OK, キャンセルの 2 つのボタンを持つモーダルダイアログを表示します。
-
-構文
-
-result = window.confirm(message);
-
-
-
- message は、ダイアログ内に表示される文字列です。result は、OK (true) とキャンセル (false) のどちらが選択されたかを示す真偽値です。ブラウザがページ内ダイアログを拒否している場合、 result は常に false です。
-
-例
-
-if (window.confirm("Do you really want to leave?")) {
- window.open("exit.html", "Thanks for Visiting!");
-}
-
-
-結果
-
-
-
-
-注記
-
- ダイアログボックスはモーダルウィンドウです。つまり閲覧者は、これを閉じないとプログラムの他のインタフェース部分にアクセスする事ができません。したがって、ダイアログボックス（もしくは、モーダルウィンドウ）を生成する関数を乱用するべきではありません。何にせよ、確認を目的としたダイアログボックスの使用を避けるべきそれ相応の理由があります。
-
-仕様
-
-
-
-
- | Specification |
- Status |
- Comment |
-
-
- | {{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}} |
- {{Spec2('HTML WHATWG')}} |
- |
-
-
-
-
-Browser compatibility
-
-
-
-{{Compat("api.Window.confirm")}}
-
-関連情報
-
-
- - {{domxref("window.alert","alert")}}
- - {{domxref("window.prompt","prompt")}}
-
diff --git a/files/ja/web/api/window/confirm/index.md b/files/ja/web/api/window/confirm/index.md
new file mode 100644
index 00000000000000..eec166468cbe10
--- /dev/null
+++ b/files/ja/web/api/window/confirm/index.md
@@ -0,0 +1,49 @@
+---
+title: window.confirm
+slug: Web/API/Window/confirm
+tags:
+ - DOM
+ - DOM_0
+ - Gecko
+ - Gecko DOM Reference
+translation_of: Web/API/Window/confirm
+---
+{{ApiRef("Window")}}
+
+**`Window.confirm()`** メソッドは、メッセージと、OK, キャンセルの 2 つのボタンを持つモーダルダイアログを表示します。
+
+## 構文
+
+ result = window.confirm(message);
+
+- `message` は、ダイアログ内に表示される文字列です。
+- `result` は、OK (`true`) とキャンセル (`false`) のどちらが選択されたかを示す真偽値です。ブラウザがページ内ダイアログを拒否している場合、 `result` は常に `false` です。
+
+## 例
+
+ if (window.confirm("Do you really want to leave?")) {
+ window.open("exit.html", "Thanks for Visiting!");
+ }
+
+結果
+
+
+
+## 注記
+
+The following text is shared between this article, DOM:window\.prompt and DOM:window\.alert ダイアログボックスはモーダルウィンドウです。つまり閲覧者は、これを閉じないとプログラムの他のインタフェース部分にアクセスする事ができません。したがって、ダイアログボックス（もしくは、モーダルウィンドウ）を生成する関数を乱用するべきではありません。何にせよ、[確認を目的としたダイアログボックスの使用を避けるべき](http://alistapart.com/article/neveruseawarning)それ相応の理由があります。
+
+## 仕様
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}} | {{Spec2('HTML WHATWG')}} | |
+
+## Browser compatibility
+
+{{Compat("api.Window.confirm")}}
+
+## 関連情報
+
+- {{domxref("window.alert","alert")}}
+- {{domxref("window.prompt","prompt")}}
diff --git a/files/ja/web/api/window/console/index.html b/files/ja/web/api/window/console/index.html
deleted file mode 100644
index 4e37459fedd7f1..00000000000000
--- a/files/ja/web/api/window/console/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Window.console
-slug: Web/API/Window/console
-translation_of: Web/API/Window/console
----
-{{ APIRef }}
-
-読み取り専用プロパティのWindow.consoleは、ブラウザのコンソールへ情報を出力するメソッドを提供する{{domxref("Console")}}オブジェクトへの参照を返します。これらのメソッドで出力される情報はデバッグ目的のものであり、ユーザーへ情報を提示するために使われるべきではありません。
-
-Syntax
-
-var consoleObj = window.console;
-
-
-Examples
-
-Logging to console
-
-一つ目の例はテキストをコンソールに出力します。
-
-console.log("An error occurred while loading the content");
-
-次の例では開閉ウィジェットによって要素が展開可能な状態でオブジェクトをコンソールに出力します。
-
-console.dir(someObject);
-
-より詳細な例については{{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}}をご参照下さい。
-
-Specifications
-
-
-
-
- | Specification |
- Status |
- Comment |
-
-
- | {{SpecName('Console API')}} |
- {{Spec2('Console API')}} |
- Initial definition. |
-
-
-
-
-
-
Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another.
-
{{APIRef}}{{non-standard_header}}
-
-
-
注: Firefox 57 以降 (当初はナイトリーのみ)、 content および _content の変化形はクロームの (特権) コードでのみ利用可能となり、ウェブではどこでも利用できなくなりました。
-
主となるコンテンツウィンドウを表す Window object オブジェクトを返します。これは、type="content-primary" 属性を持つ <browser> (もしくは tabbrowser や <iframe>) 要素のある XUL ウィンドウにおいて役立ちます。最も有名な例は、Firefox のメインウィンドウである browser.xul です。このような場合、content はブラウザーに現在表示されている文書のための Window オブジェクトへの参照を返します。これは、browserRef.contentWindow のショートカットです。
-特権のないコンテンツ (ウェブページ) では、content は通常 top と同じです (ウェブページがサイドバーに読み込まれた場合は例外で、 content は現在選択しているタブの Window を参照します)。
-
-
-
注: いくつかの例では、content の代わりに _content を使用しています。しかし、後者は長い間非推奨とされています。ですから、新しいコードでは content を使うべきです。
-
構文
-
-var windowObject = window.content;
-
-
-例
-
-以下のコードを <browser type="content-primary"/> 要素を持つ chrome XUL ウィンドウで実行すると、ブラウザーで現在表示されているページの最初の div 要素の周囲に赤い枠が描画されます。
-
-content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
-
-
-仕様書
-
-なし。
-
-関連情報
-
-
diff --git a/files/ja/web/api/window/content/index.md b/files/ja/web/api/window/content/index.md
new file mode 100644
index 00000000000000..c11cf3e82daccd
--- /dev/null
+++ b/files/ja/web/api/window/content/index.md
@@ -0,0 +1,33 @@
+---
+title: Window.content
+slug: Web/API/Window/content
+translation_of: Web/API/Window/content
+---
+{{APIRef}}{{non-standard_header}}
+
+> **Note:** **注**: Firefox 57 以降 (当初はナイトリーのみ)、 `content` および `_content` の変化形はクロームの (特権) コードでのみ利用可能となり、ウェブではどこでも利用できなくなりました。
+
+主となるコンテンツウィンドウを表す [Window object](/ja/docs/Web/API/Window) オブジェクトを返します。これは、`type="content-primary"` 属性を持つ `` (もしくは `tabbrowser` や `
+ 