diff options
Diffstat (limited to 'files/ja/web/api')
50 files changed, 1851 insertions, 682 deletions
diff --git a/files/ja/web/api/windoworworkerglobalscope/atob/index.html b/files/ja/web/api/atob/index.html index 4408d9319b..96eb707a54 100644 --- a/files/ja/web/api/windoworworkerglobalscope/atob/index.html +++ b/files/ja/web/api/atob/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.atob() -slug: Web/API/WindowOrWorkerGlobalScope/atob +slug: Web/API/atob tags: - API - HTML DOM @@ -9,7 +9,7 @@ tags: - WindowOrWorkerGlobalScope - atob translation_of: Web/API/WindowOrWorkerGlobalScope/atob -original_slug: Web/API/WindowBase64/atob +original_slug: Web/API/WindowOrWorkerGlobalScope/atob --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/btoa/index.html b/files/ja/web/api/btoa/index.html index da5c8c872d..69b1ec384a 100644 --- a/files/ja/web/api/windoworworkerglobalscope/btoa/index.html +++ b/files/ja/web/api/btoa/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.btoa() -slug: Web/API/WindowOrWorkerGlobalScope/btoa +slug: Web/API/btoa tags: - API - HTML DOM @@ -12,6 +12,7 @@ tags: - data - strings translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +original_slug: Web/API/WindowOrWorkerGlobalScope/btoa --- <p>{{APIRef("HTML DOM")}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/caches/index.html b/files/ja/web/api/caches/index.html index 89583bbda5..24bcabe2aa 100644 --- a/files/ja/web/api/windoworworkerglobalscope/caches/index.html +++ b/files/ja/web/api/caches/index.html @@ -1,6 +1,6 @@ --- title: WorkerGlobalScope.caches -slug: Web/API/WindowOrWorkerGlobalScope/caches +slug: Web/API/caches tags: - API - Experimental @@ -12,7 +12,7 @@ tags: - Window - WindowOrWorkerGlobalScope translation_of: Web/API/WindowOrWorkerGlobalScope/caches -original_slug: Web/API/WorkerGlobalScope/caches +original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- <div>{{APIRef()}}{{SeeCompatTable}}</div> diff --git a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html index 74051e9a9d..d54da1283b 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash <h2 id="例">例</h2> -<h3 id="簡単な例">簡単な例</h3> +<h3 id="Basic_example">簡単な例</h3> <p>この例では、<code>setLineDash()</code>メソッドを使用して、実線の上に破線を描画します。</p> @@ -58,7 +58,7 @@ ctx.stroke(); <p>{{ EmbedLiveSample('Basic_example', 700, 180) }}</p> -<h3 id="いくつかの一般的な模様">いくつかの一般的な模様</h3> +<h3 id="Some_common_patterns">いくつかの一般的な模様</h3> <p>この例は、さまざまな一般的な破線のパターンを示しています。</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/ja/web/api/clearinterval/index.html index f3e9b52e6d..3bccc06f99 100644 --- a/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html +++ b/files/ja/web/api/clearinterval/index.html @@ -1,6 +1,6 @@ --- title: window.clearInterval -slug: Web/API/WindowOrWorkerGlobalScope/clearInterval +slug: Web/API/clearInterval tags: - DOM - DOM_0 @@ -8,7 +8,7 @@ tags: - JavaScript timers - Window translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval -original_slug: Web/API/WindowTimers/clearInterval +original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval --- <div>{{ApiRef}}</div> diff --git a/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ja/web/api/cleartimeout/index.html index 2ce0bb071e..bc1b59314e 100644 --- a/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html +++ b/files/ja/web/api/cleartimeout/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.clearTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout +slug: Web/API/clearTimeout tags: - API - HTML DOM @@ -11,6 +11,7 @@ tags: - メソッド - リファレンス translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/ja/web/api/createimagebitmap/index.html index cd0334402a..940af211e0 100644 --- a/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html +++ b/files/ja/web/api/createimagebitmap/index.html @@ -1,12 +1,13 @@ --- title: self.createImageBitmap() -slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +slug: Web/API/createImageBitmap tags: - API - Canvas - DOM - createImageBitmap translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +original_slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap --- <div>{{APIRef("Canvas API")}}</div> diff --git a/files/ja/web/api/document/childelementcount/index.html b/files/ja/web/api/document/childelementcount/index.html new file mode 100644 index 0000000000..fcd6244dd0 --- /dev/null +++ b/files/ja/web/api/document/childelementcount/index.html @@ -0,0 +1,46 @@ +--- +title: Document.childElementCount +slug: Web/API/Document/childElementCount +tags: + - API + - DOM + - Property + - Reference +browser-compat: api.Document.childElementCount +translation_of: Web/API/Document/childElementCount +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>Document.childElementCount</strong></code> は読み取り専用のプロパティで、文書の子要素の数を返します。</p> + +<p>特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>document</em>.childElementCount; +</pre> + +<h2 id="Example">例</h2> + +<pre class="brush:js"> +document.children; +// HTMLCollection で、ふつうは <html> 要素をこの文書の唯一の子として含んでいる + +document.childElementCount; +// 1 +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.childElementCount")}}</li> + <li>{{domxref("DocumentFragment.childElementCount")}}</li> +</ul> diff --git a/files/ja/web/api/document/getelementbyid/index.html b/files/ja/web/api/document/getelementbyid/index.html index 47aad75103..6bf6b57b97 100644 --- a/files/ja/web/api/document/getelementbyid/index.html +++ b/files/ja/web/api/document/getelementbyid/index.html @@ -100,7 +100,7 @@ element.id = 'testqq'; var el = document.getElementById('testqq'); // el は null になります </pre> -<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL" title="ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p> +<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p> <h2 id="Specification" name="Specification">仕様書</h2> @@ -145,5 +145,5 @@ var el = document.getElementById('testqq'); // el は null になります <ul> <li>{{domxref("Document")}}: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。</li> <li>{{domxref("Document.querySelector()")}}: <code>'div.myclass'</code> のようなセレクターを通したクエリのためのもの。</li> - <li><a href="/ja/docs/xml/xml:id" title="ja/docs/xml/id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li> + <li><a href="/ja/docs/xml/xml:id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li> </ul> diff --git a/files/ja/web/api/document/queryselector/index.html b/files/ja/web/api/document/queryselector/index.html index 96734201de..c0af97a434 100644 --- a/files/ja/web/api/document/queryselector/index.html +++ b/files/ja/web/api/document/queryselector/index.html @@ -7,60 +7,62 @@ tags: - DOM - DOM 要素 - Document - - Reference - - querySelector - - セレクター - メソッド + - リファレンス + - Selector API + - セレクター + - querySelector translation_of: Web/API/Document/querySelector +browser-compat: api.Document.querySelector --- <div>{{ApiRef("DOM")}}</div> <p>{{domxref("Document")}} の <code><strong>querySelector()</strong></code> メソッドは、指定されたセレクターまたはセレクターのグループに一致する、文書内の最初の {{domxref("Element")}} を返します。一致するものが見つからない場合は <code>null</code> を返します。</p> <div class="note"> -<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの<ruby>深さ優先前順走査<rp> (</rp><rt>depth-first pre-order traversal</rt><rp>) </rp></ruby>を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p> +<p><strong>メモ</strong>: 比較処理は、文書マークアップにおける最初の要素を経由して文書ノードの深さ優先前順走査 (depth-first pre-order traversal) を使用して実行され、子ノードのカウント順で順次ノードを反復して行われます。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<pre class="syntaxbox notranslate"><var>element</var> = document.querySelector(<var>selectors</var>); +<pre class="syntaxbox"><var>element</var> = document.querySelector(<var>selectors</var>); </pre> -<h3 id="Parameters" name="Parameters">引数</h3> +<h3 id="Parameters">引数</h3> <dl> - <dt><var>selectors</var></dt> - <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SYNTAX_ERR</code> が投げられます。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd> + <dt><var>selectors</var></dt> + <dd>1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は <code>SyntaxError</code> が発生します。セレクターとその管理の方法の詳細について、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。</dd> </dl> <div class="note"> -<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p> +<p><strong>メモ:</strong> 標準の CSS 構文に含まれない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。JavaScript でもバックスラッシュのエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{anch("Escaping special characters", "特殊文字のエスケープ")}}を参照してください。</p> </div> -<h3 id="Return_value" name="Return_value">返値</h3> +<h3 id="Return_value">返値</h3> -<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("HTMLElement")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p> +<p>文書内で指定された <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>に最初に一致する要素を示す {{domxref("Element")}} オブジェクト、もしくは、一致する要素がない場合は <code>null</code> を返します。</p> <p>指定されたセレクターに一致するすべての要素のリストが必要な場合は、代わりに {{domxref("Document.querySelectorAll", "querySelectorAll()")}} を使用してください。</p> -<h3 id="Exceptions" name="Exceptions">例外</h3> +<h3 id="Exceptions">例外</h3> <dl> - <dt><code>SYNTAX_ERR</code></dt> - <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd> + <dt><code>SyntaxError</code></dt> + <dd>指定された <var>selectors</var> の構文が妥当ではない。</dd> </dl> -<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> +<h2 id="Usage_notes">使用上のメモ</h2> <p>指定されたセレクターが、誤って文書内で複数回使われている ID に一致する場合は、その ID を持つ最初の要素が返されます。</p> -<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p> +<p><a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>は <a href="https://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> で策定されている通り、何も要素を返しません。</p> -<h3 id="Escaping_special_characters" name="Escaping_special_characters">特殊文字のエスケープ</h3> +<h3 id="Escaping_special_characters">特殊文字のエスケープ</h3> <p>標準の CSS の構文に従っていない ID やセレクター (例えば、コロンやスペースを不適切に使用しているもの) で一致させるためには、バックスラッシュ ("<code>\</code>") でその文字をエスケープしなければなりません。バックスラッシュは JavaScript のエスケープ文字でもあるので、文字列リテラルを入力する場合、それを <em>2 回</em>エスケープする必要があります (1 回目は JavaScript の文字列のため、2 回目は <code>querySelector()</code> のため)。</p> -<pre class="brush: html notranslate"><div id="foo\bar"></div> +<pre class="brush: html"><div id="foo\bar"></div> <div id="foo:bar"></div> <script> @@ -75,59 +77,43 @@ translation_of: Web/API/Document/querySelector document.querySelector('#foo\\:bar'); // 2番目の div に一致する </script></pre> -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<h3 id="Finding_the_first_element_matching_a_class" name="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3> +<h3 id="Finding_the_first_element_matching_a_class">あるクラスに一致する最初の要素を探索する</h3> <p>次の例は、クラス "<code>myclass</code>" を持つ文書内の要素の内、最初のものを返します。</p> -<pre class="brush: js notranslate">var el = document.querySelector(".myclass"); +<pre class="brush: js">var el = document.querySelector(".myclass"); </pre> -<h3 id="A_more_complex_selector" name="A_more_complex_selector">より複雑なセレクター</h3> +<h3 id="A_more_complex_selector">より複雑なセレクター</h3> <p>セレクターは、次の例で示しているように、実に力強いものになり得ます。ここでは、文書内でクラスが "user-panel main" である {{HTMLElement("div")}} (<code><div class="user-panel main"></code>) の中にある、"login" という名前を持つ最初の {{HTMLElement("input")}} 要素 (<code><input name="login"/></code>) が返されます。</p> -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']"); +<pre class="brush: js">var el = document.querySelector("div.user-panel.main input[name='login']"); </pre> -<h3 id="Negation" name="Negation">否定</h3> +<h3 id="Negation">否定</h3> <p>すべての CSS セレクター文字列が正しい場合、セレクターを否定することもできます。</p> -<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre> +<pre class="brush: js">var el = document.querySelector("div.user-panel:not(.main) input[name='login']");</pre> <p>これで、input 要素のうち親に <code>user-panel</code> クラスのついた div があるものの、<code>main</code> クラスがないものを 1 つ選択します。</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "document.querySelector()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<div>{{Compat("api.Document.querySelector")}}</div> +<div>{{Compat}}</div> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("Element.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector">querySelector のコードスニペット</a></li> + <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> </ul> diff --git a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index 65524033fb..4eb86d5287 100644 --- a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -46,5 +46,5 @@ translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_select <li>{{domxref("Element.querySelectorAll()")}}</li> <li>{{domxref("Document.querySelector()")}}</li> <li>{{domxref("Document.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector" title="ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> + <li><a href="/ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> </ul> diff --git a/files/ja/web/api/documentfragment/childelementcount/index.html b/files/ja/web/api/documentfragment/childelementcount/index.html new file mode 100644 index 0000000000..16bc5ed135 --- /dev/null +++ b/files/ja/web/api/documentfragment/childelementcount/index.html @@ -0,0 +1,48 @@ +--- +title: DocumentFragment.childElementCount +slug: Web/API/DocumentFragment/childElementCount +tags: + - API + - DOM + - Property + - Reference +browser-compat: api.DocumentFragment.childElementCount +translation_of: Web/API/DocumentFragment/childElementCount +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>Document.childElementCount</strong></code> は読み取り専用のプロパティで、 <code>DocumentFragment</code> の子要素の数を返します。</p> + +<p>特定の要素の子要素の数を取得する場合は、 {{domxref("Element.childElementCount")}} を参照してください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>fragment</em>.childElementCount; +</pre> + +<h2 id="Example">例</h2> + +<pre class="brush:js"> +let fragment = new DocumentFragment() +fragment.childElementCount; // 0 + +let paragraph = document.createElement('p') +fragment.appendChild(paragraph) + +fragment.childElementCount; // 1 +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.childElementCount")}}</li> + <li>{{domxref("Document.childElementCount")}}</li> +</ul> diff --git a/files/ja/web/api/domstringlist/index.html b/files/ja/web/api/domstringlist/index.html index 27c3d8eb74..dfdf9efb5d 100644 --- a/files/ja/web/api/domstringlist/index.html +++ b/files/ja/web/api/domstringlist/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/DOMStringList --- <p>{{APIRef("DOM")}}</p> -<p><a href="/ja/DOM/DOMString" title="ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p> +<p><a href="/ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p> <h2 id="Properties" name="Properties">プロパティ</h2> diff --git a/files/ja/web/api/element/append/index.html b/files/ja/web/api/element/append/index.html new file mode 100644 index 0000000000..82feaa6f91 --- /dev/null +++ b/files/ja/web/api/element/append/index.html @@ -0,0 +1,100 @@ +--- +title: Element.append() +slug: Web/API/Element/append +tags: + - API + - DOM + - Method + - Node + - Element + - Reference +browser-compat: api.Element.append +translation_of: Web/API/Element/append +original_slug: Web/API/ParentNode/append +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p> + +<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p> + +<ul> + <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li> + <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li> + <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li> +</ul> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"> +append(...nodesOrDOMStrings) +</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodesOrDOMStrings</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Appending_an_element">要素の追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +let p = document.createElement("p") +div.append(p) + +console.log(div.childNodes) // NodeList [ <p> ] +</pre> + +<h3 id="Appending_text">テキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +div.append("Some text") + +console.log(div.textContent) // "Some text"</pre> + +<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +let p = document.createElement("p") +div.append("Some text", p) + +console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3> + +<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">let div = document.createElement("div") + +with(div) { + append("foo") +} +// ReferenceError: append is not defined </pre> + + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.prepend()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Element.after()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html index a06357d366..c3520c9a31 100644 --- a/files/ja/web/api/element/childelementcount/index.html +++ b/files/ja/web/api/element/childelementcount/index.html @@ -1,96 +1,42 @@ --- -title: ParentNode.childElementCount +title: Element.childElementCount slug: Web/API/Element/childElementCount tags: - API - DOM - - ParentNode - Property -translation_of: Web/API/ParentNode/childElementCount + - Reference +browser-compat: api.Element.childElementCount +translation_of: Web/API/Element/childElementCount original_slug: Web/API/ParentNode/childElementCount --- <div>{{ APIRef("DOM") }}</div> -<p>読み取り専用の <code><strong>ParentNode.childElementCount</strong></code> プロパティは、与えられた要素の子要素の数を表す <code>unsigned long</code> 値を返します。</p> +<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p> -<div class="note"> -<p>このプロパティは、当初 {{domxref("ElementTraversal")}} 基本インターフェースで定義されていました。このインターフェースには 2 セットの異なるプロパティが含まれており、一つは子要素を持つ {{domxref("Node")}} を対象とし、もう一つはその子要素群を対象としたものでしたが、これらは 2 つの基本インターフェースである {{domxref("ParentNode")}} と {{domxref("ChildNode")}} に移されました。この際、<code>childElementCount</code> は {{domxref("ParentNode")}} へ移されました。これは技術的な変更であり、互換性に影響を与えるものではありません。</p> -</div> +<h2 id="Syntax">構文</h2> -<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="brush: js">element.childElementCount;</pre> -<pre class="syntaxbox notranslate">var <var>count</var> = <em>node</em>.childElementCount; -</pre> - -<dl> - <dt><code>count</code></dt> - <dd><code>unsigned long</code> 型(つまり整数型)の戻り値.</dd> - <dt><code>node</code></dt> - <dd>{{domxref("Document")}}、{{domxref("DocumentFragment")}}、 {{domxref("Element")}}を表現するオブジェクト.</dd> -</dl> - -<h2 id="例">例</h2> +<h2 id="Example">例</h2> -<pre class="brush:js notranslate">var foo = document.getElementById('foo'); -if (foo.childElementCount > 0) { - // Do something +<pre class="brush:js">let sidebar = document.getElementById('sidebar'); +if (sidebar.childElementCount > 0) { + // 何もしない } </pre> +<h2 id="Specifications">仕様書</h2> +{{Specifications}} -<h2 id="IE8_IE9Safari向けの互換コード">IE8, IE9/Safari向けの互換コード</h2> - -<p>このプロパティは IE9 より前のバージョンでサポートされていません。IE9とSafariでは <code>Document</code> と <code>DocumentFragment</code> においてサポートされていません。</p> - -<pre class="brush:js notranslate">;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.childElementCount == null) { - Object.defineProperty(constructor.prototype, 'childElementCount', { - get: function() { - var i = 0, count = 0, node, nodes = this.childNodes; - while (node = nodes[i++]) { - if (node.nodeType === 1) count++; - } - return count; - } - }); - } -})(window.Node || window.Element);</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> インターフェースを {{domxref("ChildNode")}} と <code>ParentNode</code> に分割。このメソッドは後者で定義されています。<br> - {{domxref("Document")}} と {{domxref("DocumentFragment")}} が新しいインターフェースを実装しました。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>この初期定義は <code>ElementTraversal</code> 基本インターフェースに追加され、{{domxref("Element")}} で使用します。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2> - - +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.ParentNode.childElementCount")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li>基本インターフェースの {{domxref("ParentNode")}} と {{domxref("ChildNode")}}</li> - <li>この基本インターフェースを実装するオブジェクト型: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}</li> + <li>{{domxref("Document.childElementCount")}}</li> + <li>{{domxref("DocumentFragment.childElementCount")}}</li> </ul> diff --git a/files/ja/web/api/element/children/index.html b/files/ja/web/api/element/children/index.html new file mode 100644 index 0000000000..5dd887af4f --- /dev/null +++ b/files/ja/web/api/element/children/index.html @@ -0,0 +1,58 @@ +--- +title: Element.children +slug: Web/API/Element/children +tags: + - API + - DOM + - Element + - HTMLCollection + - Property + - children +browser-compat: api.Element.children +translation_of: Web/API/Element/children +original_slug: Web/API/ParentNode/children +--- +<div>{{ APIRef("DOM") }}</div> + +<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p> + +<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"> +// Getter +collection = myElement.children; + +// No setter; read-only property +</pre> + +<h3 id="Return_value">返値</h3> + +<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p> + +<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p> + +<h2 id="Example">例 </h2> + +<pre class="brush: js">const myElement = document.getElementById('foo'); +for (let i = 0; i < myElement.children.length; i++) { + console.log(myElement.children[i].tagName); +} +</pre> + +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li> + {{domxref("Node.childNodes")}} + </li> +</ul> diff --git a/files/ja/web/api/element/getattributenodens/index.html b/files/ja/web/api/element/getattributenodens/index.html index f56fd71658..fb48807b05 100644 --- a/files/ja/web/api/element/getattributenodens/index.html +++ b/files/ja/web/api/element/getattributenodens/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/Element/getAttributeNodeNS <h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> -<p><span class="comment"><code>getAttributeNodeNS</code> is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode" title="ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS" title="ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p> +<p><span class="comment"><code>getAttributeNodeNS</code> is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p> <p>{{ DOMAttributeMethods() }}<span class="comment">== Specification ==</span></p> diff --git a/files/ja/web/api/element/prepend/index.html b/files/ja/web/api/element/prepend/index.html new file mode 100644 index 0000000000..9a0a993e08 --- /dev/null +++ b/files/ja/web/api/element/prepend/index.html @@ -0,0 +1,98 @@ +--- +title: Element.prepend() +slug: Web/API/Element/prepend +tags: + - API + - DOM + - Method + - Node + - Element + - Reference + - prepend +translation_of: Web/API/Element/prepend +original_slug: Web/API/ParentNode/prepend +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.prepend()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの {{domxref("Element")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">prepend(...nodesOrDOMStrings); +</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodesOrDOMStrings</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Return_value">返値</h3> + +<p><code>undefined</code>.</p> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加することができません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Prepending_an_element">要素の前に追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +let p = document.createElement("p"); +let span = document.createElement("span"); +div.append(p); +div.prepend(span); + +console.log(div.childNodes); // NodeList [ <span>, <p> ] +</pre> + +<h3 id="Prepending_text">テキストの前に追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +div.append("Some text"); +div.prepend("Headline: "); + +console.log(div.textContent); // "Headline: Some text"</pre> + +<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +let p = document.createElement("p"); +div.prepend("Some text", p); + +console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="The_prepend_method_is_unscopable">prepend() メソッドはスコープが効かない</h3> + +<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">let div = document.createElement("div"); + +with(div) { + prepend("foo"); +} +// ReferenceError: prepend is not defined </pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Element.before()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html index ec2323fa35..08dc56b7c0 100644 --- a/files/ja/web/api/element/queryselectorall/index.html +++ b/files/ja/web/api/element/queryselectorall/index.html @@ -1,5 +1,5 @@ --- -title: element.querySelectorAll +title: Element.querySelectorAll() slug: Web/API/Element/querySelectorAll tags: - API @@ -13,59 +13,57 @@ tags: - Selecting Elements - Selectors - querySelector +browser-compat: api.Element.querySelectorAll translation_of: Web/API/Element/querySelectorAll +original_slug: Web/API/ParentNode/querySelectorAll --- <div>{{APIRef("DOM")}}</div> -<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。</p> +<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。</p> -<div class="note"> -<p><strong>注:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); </pre> -<h3 id="Parameters" name="Parameters">引数</h3> +<h3 id="Parameters">引数</h3> <dl> <dt><code>selectors</code></dt> - <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}} です。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>文字列でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> + <dd>一致させるための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外が発生します。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> </dl> <div class="note"> -<p><strong>注:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。</p> +<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p> </div> -<h3 id="Return_value" name="Return_value">戻り値</h3> +<h3 id="Return_value">返値</h3> -<p>指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。</p> +<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。</p> <div class="note"> -<p><strong>メモ:</strong> 指定した <code>selectors</code> に<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>が含まれている場合、返されるリストは常に空になります。</p> +<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p> </div> -<h3 id="Exceptions" name="Exceptions">例外</h3> +<h3 id="Exceptions">例外</h3> <dl> <dt><code>SyntaxError</code></dt> - <dd>指定した <code>selectors</code> の構文が妥当ではない。</dd> + <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd> </dl> -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples">例</h2> -<h3 id="dataset_selector_attribute_selectors" name="dataset_selector_attribute_selectors">dataset セレクターと属性セレクター</h3> +<h3 id="dataset_selector_attribute_selectors">データセットセレクターと属性セレクター</h3> -<pre class="brush: html notranslate"><section class="box" id="sect1"> +<pre class="brush: html"><section class="box" id="sect1"> <div class="funnel-chart-percent1">10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> </pre> -<pre class="brush: js notranslate">// dataset セレクター +<pre class="brush: js">// データセットセレクター const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)]; // 属性セレクター @@ -75,129 +73,95 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]` // const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)]; </pre> -<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストを入手する</h3> +<h3 id="Obtaining_a_list_of_matches">一致するもののリストの入手</h3> -<p>次の例では、<code>myBox</code> 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。</p> -<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("p"); -</pre> +<p>{{domxref("NodeList")}} で <code>"myBox"</code> 要素の中にあるすべての {{HTMLElement("p")}} 要素を取得するには、次のようにします。</p> + +<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre> -<p>次の例では、<code>mybox</code> 内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> +<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> -<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("div.note, div.alert"); +<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert"); </pre> -<p>次の例では、<code>test</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>highlighted</code> のクラスを持つ {{domxref("div")}} である <code>p</code> 要素のリストを取得します。</p> +<p>次に、 <code>"test"</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>"highlighted"</code> クラスを持つ {{HTMLElement("div")}} である、<code><p></code> 要素のリストを取得します。</p> -<pre class="brush: js notranslate">var container = document.querySelector("#test"); +<pre class="brush: js">var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p");</pre> -<p>次の例では、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使って、文書内にある、 <code>data-src</code> 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。</p> +<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p> -<pre class="brush: js notranslate">var matches = domument.querySelectorAll("iframe[data-src]"); -</pre> +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> -<p>次の例では、属性セレクターを使って、「ID が <code>userlist</code> である要素内の、<code>data-active</code> 属性を持ち、その値が <code>1</code> である要素群」のリストを返します。</p> +<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p> -<pre class="brush: js notranslate">var container = document.querySelector("#userlist"); +<pre class="brush: js">var container = document.querySelector("#userlist"); var matches = container.querySelectorAll("li[data-active='1']");</pre> -<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへアクセスする</h3> +<h3 id="Accessing_the_matches">一致したものへのアクセス</h3> -<p>一旦、一致した要素の {{domxref("NodeList")}}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p> +<p>一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 <code>length</code> プロパティが 0 であれば)、一致するものが見つからなかったということです。</p> -<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p> +<p>それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。</p> -<pre class="brush: js notranslate">var highlightedItems = userList.querySelectorAll(".highlighted"); +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function(userItem) { deleteUser(userItem); });</pre> <div class="note"> -<p><strong>注: </strong>NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。</p> + <p><strong>メモ:</strong> NodeList は、本物の配列ではありません。つまり、slice、some、map などの配列メソッドを持っていません。これを配列に変換するには、 Array.from(nodeList) のようにします。</p> </div> -<h2 id="User_notes" name="User_notes">特殊な例</h2> +<h2 id="User_notes">ユーザーのメモ</h2> -<p><code>querySelectorAll()</code> は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> +<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> -<h3 id="HTML" name="HTML">HTML</h3> +<h3 id="HTML">HTML</h3> <p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> -<pre class="brush: html notranslate"><div class="outer"> +<pre class="brush: html"><div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div></pre> -<h3 id="JavaScript" name="JavaScript">JavaScript</h3> +<h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var select = document.querySelector('.select'); +<pre class="brush: js">var select = document.querySelector('.select'); var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0! +inner.length; // 1 です。0 ではありません! </pre> -<p>この例では、<code>"select"</code> class を持つ <code><div></code> の文脈で <code>".outer .inner"</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>".inner"</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> +<p>この例では、<code>select</code> class を持つ <code><div></code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> -<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> +<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> -<pre class="brush: js notranslate">var select = document.querySelector('.select'); +<pre class="brush: js">var select = document.querySelector('.select'); var inner = select.querySelectorAll(':scope .outer .inner'); inner.length; // 0 </pre> -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>初期定義</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div> -<p>{{Compat("api.Element.querySelectorAll")}}</p> -</div> +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a></li> - <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> - <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} および {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> + <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> + <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> + <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> </ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/fetch/index.html b/files/ja/web/api/fetch/index.html index 05704bb11f..79024057be 100644 --- a/files/ja/web/api/windoworworkerglobalscope/fetch/index.html +++ b/files/ja/web/api/fetch/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.fetch() -slug: Web/API/WindowOrWorkerGlobalScope/fetch +slug: Web/API/fetch tags: - API - Experimental @@ -13,6 +13,7 @@ tags: - request - メソッド translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- <p>{{APIRef("Fetch API")}}</p> diff --git a/files/ja/web/api/globaleventhandlers/onload/index.html b/files/ja/web/api/globaleventhandlers/onload/index.html index 6165e41f7e..4d4f54793a 100644 --- a/files/ja/web/api/globaleventhandlers/onload/index.html +++ b/files/ja/web/api/globaleventhandlers/onload/index.html @@ -1,56 +1,85 @@ --- -title: window.onload +title: GlobalEventHandlers.onload slug: Web/API/GlobalEventHandlers/onload tags: - - DOM - - Gecko - - Gecko DOM Reference - - Window +- API +- Event Handler +- GlobalEventHandlers +- HTML DOM +- Property +- Reference +- onload +browser-compat: api.GlobalEventHandlers.onload translation_of: Web/API/GlobalEventHandlers/onload --- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>{{domxref("window")}} の <code>load</code> イベントに対応するイベントハンドラです。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">window.onload = <var>funcRef</var>; +<div>{{ApiRef()}}</div> + +<p><strong><code>onload</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{domxref("Window")}}、{{domxref("XMLHttpRequest")}}、{{htmlelement("img")}} 要素などで発生した {{event("load")}} イベントを処理する<a href="/ja/docs/Web/Events/Event_handlers">イベントハンドラー</a>です。</p> + +<p><code>load</code> イベントは指定されたリソースの読み込みが完了したときに発行されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>target</em>.onload = <em>functionRef</em>; </pre> -<ul> - <li><var>funcRef</var> : <code>load</code> イベント発生時に呼び出す関数への参照または関数式</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">window.onload = function() { - doSomething(); // DOM 構築後に実行したい関数の呼び出し + +<h3 id="Value">値</h3> + +<p><code>functionRef</code> は、ウィンドウの <code>load</code> イベントが発行されたときに呼び出されるハンドラー関数です。</p> + +<h2 id="Examples">例</h2> + +<pre class="brush: js">window.onload = function() { + init(); + doSomethingElse(); }; </pre> -<pre class="brush:html"><!DOCTYPE html> -<html lang="ja"> -<head> -<meta charset="UTF-8" /> -<title>onload のテスト</title> - -<script> -function load() { - alert("load イベントが発生しました。"); -} - -window.onload = load; -</script> - -</head> -<body> -<p>文書の読み込みの完了時に load イベントが発生します。</p> -</body> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>onload test</title> + // ES5 + <script> + function load() { + console.log("load イベントが検出されました。"); + } + window.onload = load; + </script> + // ES2015 + <script> + const load = () => { + console.log("load イベントが検出されました。"); + } + window.onload = load; + </script> + </head> + <body> + <p>load イベントは、文書の読み込みが完了したときに発行されます。</p> + </body> </html> </pre> -<h2 id="Notes" name="Notes">注記</h2> -<p><code>load</code> イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。</p> -<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような Gecko で定められた <a href="/ja/docs/Web/Reference/Events">DOM イベント</a> (※{{domxref("element.addEventListener()")}} でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 <code>window.onload</code> より先に発生します。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<ul> - <li><a href="http://www.whatwg.org/html/#handler-window-onload">http://www.whatwg.org/html/#handler-window-onload</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> + +<h2 id="Notes">メモ</h2> + +<p><code>load</code> イベントは文書の読み込み工程の終了時に発行されます。このイベントが発行された時点で、文書中のすべてのオブジェクトが DOM 内にあり、すべての画像、スクリプト、サブフレームの読み込みが完了しています。</p> + +<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような <a href="/ja/docs/Web/Events">DOM イベント</a> ({{domxref("EventTarget.addEventListener()")}} で扱うことが可能) もありますが、これらはこのページの DOM が構築された後、他のリソースの読み込みが完了する前に発行されます。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + <ul> - <li><a href="/ja/docs/Listening_to_events_in_Firefox_extensions">Firefox 拡張機能内でのイベントのリスニング</a></li> + <li>{{Event("load")}} イベント</li> + <li><code>DOMContentLoaded</code> イベント (<a + href="/ja/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">イベントの待ち受け: 単純な DOM イベント</a>内)</li> + <li>IIFE <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" + rel="nofollow noreferrer">Immediately-invoked function expression</a></li> </ul> diff --git a/files/ja/web/api/history_api/working_with_the_history_api/index.html b/files/ja/web/api/history_api/working_with_the_history_api/index.html index c7b71399b2..a2fb053d73 100644 --- a/files/ja/web/api/history_api/working_with_the_history_api/index.html +++ b/files/ja/web/api/history_api/working_with_the_history_api/index.html @@ -54,7 +54,7 @@ history.pushState(stateObj, "page 2", "bar.html"); </li> </ul> -<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> +<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> <p>ある意味では、<code>pushState()</code> の呼び出しは <code>window.location = "#foo";</code> と設定するのと似ています。どちらも、現在のドキュメントに関連する別の履歴エントリの生成とアクティベートを行います。ですが <code>pushState()</code> にはいくらかの利点があります：</p> @@ -77,7 +77,7 @@ history.pushState(stateObj, "page 2", "bar.html"); <p>具体的には、何らかのユーザーのアクションを受け、現在の履歴エントリの URL または state オブジェクトを更新したい場合に <code>replaceState()</code> が役立ちます。</p> -<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> +<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> <h3 id="replaceState_の例">replaceState() の例</h3> diff --git a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html index 23d2cd518f..5a4fded9fe 100644 --- a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html +++ b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html @@ -4,14 +4,14 @@ slug: Web/API/HTML_Drag_and_Drop_API/Multiple_items translation_of: Web/API/HTML_Drag_and_Drop_API/Multiple_items original_slug: DragDrop/Dragging_and_Dropping_Multiple_Items --- -<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29" title="Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p> +<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p> <pre>var dt = event.dataTransfer; dt.mozSetDataAt("text/plain", "ドラッグされるデータ", 0); dt.mozSetDataAt("text/plain", "ドラッグされる2つめのデータ", 1); </pre> -<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p> +<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p> <pre>event.dataTransfer.mozClearDataAt("text/plain", 1); </pre> <p>あるインデックスで示される項目について、最後のデータ形式の削除によって項目全体を削除すると、残りの項目が繰り上がって項目のインデックスが変わることに注意してください。例えば、</p> @@ -36,9 +36,9 @@ dt.mozClearDataAt("text/plain", 1); </pre> <p>幸いなことに、通常は項目を削除する必要がある場合は希で、それよりも、必要に応じて項目を追加するだけの場合の方がずっと多いです。</p> <p>複数の項目のドラッグが使われる場合の代表は、複数のファイルやブックマークをドラッグする時です。この場合には、適切な形式でそれらの項目を追加してください。また必須ではありませんが、それぞれの項目は常に同じ形式でデータを追加するべきです。これによりドロップ対象は、一貫したデータの受け取りを期待できます。</p> -<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29" title="Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p> -<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p> -<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p> +<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p> +<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p> +<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p> <pre>function onDrop(event) { var files = []; @@ -47,15 +47,15 @@ dt.mozClearDataAt("text/plain", 1); files.push(dt.mozGetDataAt("application/x-moz-file", i)); } </pre> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p> <pre>var types = event.dataTransfer.mozTypesAt(1); </pre> <h2 id="文字列でないデータのドラッグ">文字列でないデータのドラッグ</h2> -<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file" title="Ja/DragDrop/Recommended Drag Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile" title="ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p> +<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p> <pre>dt.mozSetDataAt("application/x-moz-file", file, 0); </pre> <p>複数の項目を扱う必要がない場合でも、このメソッドを使うことによって任意のオブジェクトをデータに指定できます。この場合には、インデックスとして0を指定しておきます。</p> -<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p> +<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p> <h2 id="複数項目のドロップの例">複数項目のドロップの例</h2> <p>以下は、ドロップされた項目のデータとその形式を一覧表示するボックスの例です。</p> <pre><html> @@ -103,7 +103,7 @@ function output(text) </body> </html> </pre> -<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault" title="ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p> -<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p> +<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p> +<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p> <p>この例は、あるドラッグ操作が保持しているデータを確かめたい時に便利です。ただ項目をこの例のドロップ対象にドロップするだけで、ドラッグされたどの項目がどんな形式でどのようなデータを保持しているのかを見ることができます。</p> <p>{{ languages( { "en": "En/DragDrop/Dragging_and_Dropping_Multiple_Items" } ) }}</p> diff --git a/files/ja/web/api/index/index.html b/files/ja/web/api/index/index.html deleted file mode 100644 index e37c8080c2..0000000000 --- a/files/ja/web/api/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 索引 -slug: Web/API/Index -tags: - - API - - Index - - Landing -translation_of: Web/API/Index ---- -<p>{{Index("/ja/docs/Web/API")}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/ja/web/api/indexeddb/index.html index ae7659a244..bdf8532b6a 100644 --- a/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html +++ b/files/ja/web/api/indexeddb/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.indexedDB -slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +slug: Web/API/indexedDB tags: - API - Database @@ -9,6 +9,7 @@ tags: - Reference - Storage translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB --- <p>{{ APIRef() }}</p> diff --git a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index 47c47bad45..0db54a15b6 100644 --- a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter <p class="summary">クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術は何種類かがあります。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。この記事では、必要なローカルストレージの容量を確保するために、いつどのローカルコンテンツを破棄するのかをどうやって特定するのかを説明します。</p> <div class="note"> -<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーでおおむね正確ですが、既知の詳細情報も記載しています。 Opera および Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p> +<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーではおおむね正確ですが、ブラウザー固有の注意事項も知られています。 Opera と Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p> </div> -<h2 id="What_technologies_use_browser_data_storage" name="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2> +<h2 id="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2> -<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではそれらの技術を "クォータクライアント" と呼びます。</p> +<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではこれらの技術を「クォータクライアント」と呼びます。</p> <ul> <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a></li> @@ -31,45 +31,45 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter </ul> <div class="note"> -<p><strong>メモ</strong>: Firefox では、 <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> もすぐに同じストレージ管理ツールとして使えるようになり、それはこの文書で記述します。</p> +<p><strong>メモ</strong>: Firefox では、<a href="/ja/docs/Web/API/Web_Storage_API">ウェブストレージ</a>もまもなく同じストレージ管理ツールを使い始めます。それはこの文書で記述します。</p> </div> <div class="note"> <p><strong>メモ</strong>: プライベートブラウジングモードは、大半のデータストレージに対応していません。ローカルストレージのデータと Cookie は保存されますが、短命です。 — 最後のプライベートブラウジングウィンドウを閉じた時にデータは消去されます。</p> </div> -<p>生成元の "最終アクセス日時" は、これらのいずれかによってアクティブ化/非アクティブ化される origin eviction によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p> +<p>オリジンの「最終アクセス日時」はこれらのうちの何れかがアクティブ化/非アクティブ化されたときに更新されます。オリジン立ち退き (origin eviction) によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p> -<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_System_API">File System API</a> のクォータ管理を制御しています。</p> +<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File System API</a> のクォータ管理を制御しています。</p> -<h2 id="Different_types_of_data_storage" name="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2> +<h2 id="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2> <p>同じブラウザー内で同じ保存方法を使用していても、解釈されるデータストレージの種類はさまざまです。この章では、さまざまなブラウザーで見つけられる多様なストレージについて説明します。</p> <p>ストレージは 2 種類に分けられます。</p> <ul> - <li>永続的: 長期間にわたって保持されることを意図するデータです。これはユーザーが決断した場合にのみ削除されます (例えば Firefox では、各ページのページ情報ダイアログに "ストレージを消去" ボタンがあります)。</li> - <li>一時的: 長期間にわたって維持する必要がないデータです。ストレージの容量制限に達すると、もっとも過去に使用されたものから削除されます ({{anch("LRU policy", "LRU ポリシー")}})。</li> + <li>永続的なもの。長期間保存されることを意図したデータです。これは、ユーザーが選択した場合にのみ削除されます (たとえば、Firefox では、<em>設定</em>に進み、<em>プライバシーとセキュリティ > Cookie とサイトデータ</em>のオプションを使用することで、すべての保存データを削除するか、または選択したオリジンからの保存データのみを削除するかを選択できます)。</li> + <li>一時的なもの。長期間にわたって維持する必要がないデータです。{{anch("Storage limits", "ストレージの容量制限")}}に達すると、 {{anch("LRU policy", "LRU ポリシー")}}によりもっとも古く使用されたものから削除されます。</li> </ul> <p>Firefox では、永続的なストレージが使用されると、ユーザーにはデータが永続的になることを警告するポップアップが表示され、それが良いかどうかを尋ねます。一時的データストレージは明示的にユーザーにプロンプトを表示しません。</p> -<p>既定では、一時的なストレージがほとんどの使用環境 (例えば、標準的な Web アプリ) で使用され、永続的なストレージはインストールされたアプリ (例えば、Firefox OS やデスクトップ版 Firefox にインストールした Firefox アプリ、および Chrome アプリ) で使用されます。</p> +<p>ストレージは既定では一時的です。開発者は <a href="/ja/docs/Web/API/Storage_API">Storage API</a> で利用できる {{domxref("StorageManager.persist()")}} メソッドを使用して永続的なストレージにすることができます。</p> -<h2 id="Where_is_the_data_stored" name="Where_is_the_data_stored">データの保存先は?</h2> +<h2 id="Where_is_the_data_stored">データの保存先は?</h2> -<p>それぞれのストレージタイプが別々のリポジトリに相当しており、ユーザーの Firefox プロファイル内のディレクトリーとは以下のように対応づけられます (ほかのブラウザーでは、若干異なるでしょう):</p> +<p>それぞれのストレージ種別は、個別のリポジトリーーを表します。以下は、ユーザーの Firefox プロファイル下のディレクトリにおける実際のマッピングです (他のブラウザーでは若干異なる場合があります)。</p> <ul> - <li><code><profile>/storage</code> — クォータマネージャ (後述) に管理されている、ストレージの主要なトップレベルディレクトリーです。</li> - <li><code><profile>/storage/permanent</code> — 永続的なデータストレージのリポジトリです。</li> - <li><code><profile>/storage/temporary</code> — 一時的なデータストレージのリポジトリです。</li> - <li><code><profile>/storage/default</code> — 既定のデータストレージのリポジトリです。</li> + <li><code><profile>/storage</code> — クォータマネージャーー (後述) に管理されている、ストレージの主要な最上位ディレクトリーです。</li> + <li><code><profile>/storage/permanent</code> — 永続的なデータストレージのリポジトリーです。</li> + <li><code><profile>/storage/temporary</code> — 一時的なデータストレージのリポジトリーです。</li> + <li><code><profile>/storage/default</code> — 既定のデータストレージのリポジトリーです。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的なタイプのデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは <profile>/storage/default 以下に保存されます。</p> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的な種類のデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは <profile>/storage/default 以下に保存されます。</p> </div> <div class="note"> @@ -81,52 +81,52 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter </div> <div class="note"> -<p><strong>メモ</strong>: ユーザーが <code><profile>/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化が失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p> +<p><strong>メモ</strong>: ユーザーが <code><profile>/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化に失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p> </div> -<h2 id="Storage_limits" name="Storage_limits">ストレージの制限</h2> +<h2 id="Storage_limits">ストレージの制限</h2> -<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャと飛ばれる内部のブラウザーツールが生成元ごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p> +<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャーと飛ばれる内部のブラウザーツールがオリジンごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p> -<p>従ってハードディスクドライブが 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると <strong>origin eviction</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、生成元全体に相当するデータを削除します。生成元内の一部分を削除するような縮小法はありません。生成元内のひとつのデータベースだけ削除すると、矛盾の問題が発生するおそれがあります。</p> +<p>従ってハードディスクドライブの空き容量が 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると<strong>オリジン立ち退き (origin eviction)</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、オリジン全体に相当するデータを削除します。オリジン内の一部分を削除するような縮小法はありません。オリジン内のデータベースをひとつだけ削除すると、矛盾が発生するおそれがあります。</p> -<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれの生成元は、グループ (生成元のグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通り:</p> +<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれのオリジンは、グループ (オリジンのグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通りです。</p> <ul> - <li><code>mozilla.org</code> — グループ 1、生成元 1</li> - <li><code>www.mozilla.org</code> — グループ 1、生成元 2</li> - <li><code>joe.blogs.mozilla.org</code> — グループ 1、生成元 3</li> - <li><code>firefox.com</code> — グループ 2、生成元 4</li> + <li><code>mozilla.org</code> — グループ 1、オリジン 1</li> + <li><code>www.mozilla.org</code> — グループ 1、オリジン 2</li> + <li><code>joe.blogs.mozilla.org</code> — グループ 1、オリジン 3</li> + <li><code>firefox.com</code> — グループ 2、オリジン 4</li> </ul> <p>このグループでは <code>mozilla.org</code>、<code>www.mozilla.org</code>、<code>joe.blogs.mozilla.org</code> が、合わせてグローバルリミットの 20% を上限としてストレージを使用できます。<code>firefox.com</code> は、別に 20% の上限を持ちます。</p> -<p>これら 2 種類の制限は、制限に達したときの動作が異なります:</p> +<p>これら 2 種類の制限は、制限に達したときの動作が異なります。</p> <ul> - <li>グループリミットは "ハードリミット" とも呼ばれます。 origin eviction を発生させません。</li> - <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので "ソフトリミット" です。</li> + <li>グループリミットは「ハードリミット」とも呼ばれます。オリジン立ち退きを発生させません。</li> + <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので「ソフトリミット」です。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当に低メモリな状況では、グループリミットも 8MB となります。</p> +<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当にメモリーが少ない状況では、グループリミットも 8MB となります。</p> </div> <div class="note"> -<p><strong>メモ</strong>: グループリミットに達したとき、あるいは origin eviction で十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p> +<p><strong>メモ</strong>: グループリミットに達したとき、あるいはオリジン立ち退きで十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p> </div> <div class="note"> <p><strong>メモ</strong>: Chrome では、ソフトおよびハードのストレージのクォータの限界が <strong>M66</strong> から変更されました。詳しい情報は<a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68">こちら</a>にあります。</p> </div> -<h2 id="LRU_policy" name="LRU_policy">LRU ポリシー</h2> +<h2 id="LRU_policy">LRU ポリシー</h2> -<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用された生成元のデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p> +<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用されたオリジンのデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p> -<p>一時的なストレージを使用して、生成元ごとに "最終アクセス日時" を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) 生成元をすべて発見しようとします。これらは、"最終アクセス日時" によって整列されます。 origin eviction を発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用された生成元を削除し続けます。</p> +<p>一時的なストレージを使用して、オリジンごとに「最終アクセス日時」を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) オリジンをすべて発見しようとします。これらは、「最終アクセス日時」によって整列されます。オリジン立ち退きを発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用されたオリジンを削除し続けます。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, by<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> モバイルブラウザーのクライアント側ストレージについて詳しく分析した記事。</li> diff --git a/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html new file mode 100644 index 0000000000..ac21ce3e45 --- /dev/null +++ b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html @@ -0,0 +1,213 @@ +--- +title: 期限の確認 +slug: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due +tags: + - Apps + - Date + - Example + - Guide + - IndexedDB + - deadline +translation_of: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due +--- +<div>{{DefaultAPISidebar("IndexedDB")}}</div><div class="summary"> +<p>この記事では、 IndexedDB で保存された期限と現在の日時を照合する複雑な例を見てみましょう。ここでの主な課題は、保存されている期限情報 (月、時、日など) を、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> オブジェクトから取得した現在の日時と照合することです。</p> +</div> + +<img alt="サンプルアプリのスクリーンショット。赤いメインタイトルの「To do app」、テスト用の To Do 項目、ユーザーが新しいタスクを入力するための赤いフォーム。" src="to-do-app.png"> + +<p>この記事で紹介するアプリケーションの例は、 <strong>To-do リスト通知</strong>です。これは、タスクのタイトルと期限を <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> に格納し、期限になったときに <a href="/ja/docs/Web/API/Notification">Notification</a> および <a href="/ja/docs/Web/API/Vibration_API">Vibration</a> API を使ってユーザーに通知を行う、シンプルな To-do リストアプリケーションです。 <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do リスト通知アプリは GitHub ダウンロード</a>してソースコードをいじったり、<a href="https://mdn.github.io/to-do-notifications/">アプリの動作をライブで閲覧</a>したりすることができます。</p> + +<h2 id="The_basic_problem">基本的な問題点</h2> + +<p>この ToDo アプリでは、まず時間と日付の情報を、機械が読め、表示されたときに人間が理解できる形式で記録し、次にそれぞれの時間と日付が現在の時点で発生しているかどうかをチェックしたいと考えました。基本的には、現在の時刻と日付を確認し、保存されている各イベントの締め切りが現在の時刻と日付に一致するかどうかを確認します。もし一致していれば、ユーザーに何らかの通知をしたいと考えています。</p> + +<p>2 つの {{jsxref("Global_Objects/Date", "Date")}} オブジェクトを比較するだけなら簡単ですが、もちろん人間は JavaScript が理解できるような形式で期限を入力したいわけではありません。人間が読むことのできる日付はかなり違っていて、いくつもの異なる表現があります。</p> + +<h3 id="Recording_the_date_information">日付情報の記録</h3> + +<p>モバイル端末での合理的な使い勝手を提供するために、そして曖昧さを減らすために、 HTML フォームを作成することにしました。</p> + +<img alt="この ToDo アプリのフォームで、タスクのタイトルを入力するフィールドと、期限の年、月、日、時、分の値が入っています。" src="to-do-app-form2.png"> + +<ul> + <li>ToDo リストのタイトルを入力するためのテキスト入力です。これはユーザーの入力作業の中で最も避けられないものです。</li> + <li>期限の「時」と「分」を入力するための数値入力。 <code>type="number"</code> に対応しているブラウザーでは、小さな上下矢印の数字ピッカーが表示されます。モバイルプラットフォームでは、データを入力するためのテンキーが用意されていることが多く、これは便利です。他のプラットフォームでは、標準的なテキスト入力になりますが、これは問題ありません。</li> + <li>期限の日、月、年を入力するための {{HTMLElement("select")}} 要素。これらの値は、ユーザーにとって最も曖昧な入力となるため (7, sunday, sun? 04, 4, April, Apr? 2013, '13, 13?) 日は数値で、月は月名で、年は 4 桁の年号で記録されます。</li> +</ul> + +<p>フォームの送信ボタンが押されると、 <code>addData()</code> 関数が実行され、次のように始まります。</p> + +<pre class="brush: js">function addData(e) { + e.preventDefault(); + + if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) { + note.innerHTML += '<li>Data not submitted — form incomplete.</li>'; + return; + } +</pre> + +<p>この部分では、フォームのフィールドにすべての情報が入力されているかどうかを確認します。記入されていない場合は、開発者通知ペイン (アプリの UI の左下を参照) にメッセージを表示して、何が起こっているのかをユーザーに伝え、機能を終了します。このステップは、主に HTML フォームの検証に対応していないブラウザーのためのものです (検証に対応しているブラウザーでは、 HTML で required 属性を使用して検証を強制しています)。</p> + +<pre class="brush: js"> else { + var newItem = [ + { + taskTitle: title.value, + hours : hours.value, + minutes : minutes.value, + day : day.value, + month : month.value, + year : year.value, + notified : "no" + } + ]; + + // open a read/write db transaction, ready for adding the data + var transaction = db.transaction(["toDoList"], "readwrite"); + + // report on the success of opening the transaction + transaction.oncomplete = function(event) { + note.innerHTML += '<li>Transaction opened for task addition.</li>'; + }; + + transaction.onerror = function(event) { + note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>'; + }; + + // create an object store on the transaction + var objectStore = transaction.objectStore("toDoList"); + + // add our newItem object to the object store + var request = objectStore.add(newItem[0]); </pre> + +<p>この部分では、データベースへの挿入に必要な形式でデータを保存する <code>newItem</code> というオブジェクトを作成します。次の数行では、データベーストランザクションを開き、これが成功したか失敗したかをユーザーに通知するメッセージを提供しています。そして、新しい項目が追加される <code>objectStore</code> が生成されます。データオブジェクトの <code>notified</code> プロパティは、 To-do リストの項目の期限がまだ来ておらず、通知されていないことを示しています。これについては後ほど説明します。</p> + +<div class="note"> +<p><strong>メモ:</strong> 変数 <code>db</code> には IndexedDB のデータベースインスタンスへの参照が格納されています。この変数の様々なプロパティを使用してデータを操作することができます。</p> +</div> + +<pre class="brush: js"> + request.onsuccess = function(event) { + + note.innerHTML += '<li>New item added to database.</li>'; + + title.value = ''; + hours.value = null; + minutes.value = null; + day.value = 01; + month.value = 'January'; + year.value = 2020; + }; + }</pre> + +<p>次の部分では、新しい項目の追加が成功したことを示すログメッセージを作成し、次のタスクが入力できるようにフォームをリセットします。</p> + +<pre class="brush: js"> + // update the display of data to show the newly added item, by running displayData() again. + displayData(); +};</pre> + +<p>最後に <code>displayData()</code> 関数を実行して、アプリ内のデータの表示を更新し、先ほど入力された新しいタスクを表示します。</p> + +<h3 id="Checking_whether_a_deadline_has_been_reached">期限に達したかどうかの確認</h3> + +<p>この時点でデータはデータベースに入っていますが、今度は期限に達しているかどうかをチェックしたいと思います。これを行うのが <code>checkDeadlines()</code> 関数です。</p> + +<pre class="brush: js">function checkDeadlines() { + var now = new Date();</pre> + +<p>まず、空の <code>Date</code> オブジェクトを作成して、現在の日付と時刻を取得します。簡単でしょう？ここからは少し複雑な話になります。</p> + +<pre class="brush: js"> var minuteCheck = now.getMinutes(); + var hourCheck = now.getHours(); + var dayCheck = now.getDate(); + var monthCheck = now.getMonth(); + var yearCheck = now.getFullYear(); +</pre> + +<p><code>Date</code> オブジェクトには、内部の日付や時刻のさまざまな部分を抽出するためのメソッドがいくつかあります。ここでは、現在の分 (簡単な数値として取得)、時 (簡単な数値として取得)、日 (これは <code>getDate()</code> が必要、 <code>getDay()</code> は曜日を 1-7 で返すため)、月 (0-11 の数値を返す。下記参照)、年 (<code>getFullYear()</code> が必要、<code>getYear()</code> は非推奨であり、誰にとってもあまり役に立たない奇妙な値を返します) を読み取ります。</p> + +<pre class="brush: js"> var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); + + objectStore.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + + if(cursor) {</pre> + +<p>次にもう一つ、 IndexedDB の <code>objectStore</code> を生成し、 <code>openCursor()</code> メソッドを使用してカーソルを開きます。これは基本的に IndexedDB がストア内のすべての項目を反復処理する方法です。そして、カーソル内に有効な項目が残っている限り、カーソル内のすべての項目をループします。</p> + +<pre class="brush: js"> switch(cursor.value.month) { + case "January": + var monthNumber = 0; + break; + case "February": + var monthNumber = 1; + break; + + // other lines removed from listing for brevity + + case "December": + var monthNumber = 11; + break; + default: + alert('Incorrect month entered in database.'); + }</pre> + +<p>まず最初に行うことは、データベースに保存されている月名を、 JavaScript が理解できる月の数値に変換することです。前に見たように、 JavaScript の Date オブジェクトは月の値を 0 から 11 までの数値として生成します。</p> + +<pre class="brush: js"> if(+(cursor.value.hours) == hourCheck && + +(cursor.value.minutes) == minuteCheck && + +(cursor.value.day) == dayCheck && + monthNumber == monthCheck && + cursor.value.year == yearCheck && + notified == "no") { + + // If the numbers all do match, run the createNotification() + // function to create a system notification + createNotification(cursor.value.taskTitle); + }</pre> + +<p>IndexedDB に格納された値と照合したい現在の時刻と日付の部分がすべて組み立てられたので、いよいよチェックを実行します。ユーザーに期限切れを知らせる何らかの通知を行う前に、すべての値が一致している必要があります。</p> + +<p>ここでの <code>+</code> 演算子は、先頭にゼロが付いている数字を、先頭にゼロが付いていない同等の数字に変換します (例えば 09 -> 9)。これが必要なのは、 JavaScript の Date の数値には先頭にゼロがないが、データにはあるかもしれないからです。</p> + +<p><code>notified == "no"</code> のチェックは、 1 つの To-Do アイテムに対して 1 つの通知しか受け取れないようにするためのものです。各項目のオブジェクトに対して通知が発生すると、その <code>notification</code> プロパティが <code>"yes"</code> に設定されるので、次の繰り返しではこのチェックが通らないようにするために、 <code>createNotification()</code> 関数の中に次のようなコードを入れています (詳しくは <a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>を読んでください)。</p> + +<pre class="brush: js"> // now we need to update the value of notified to "yes" in this particular data object, so the + // notification won't be set off on it again + + // first open up a transaction as usual + var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); + + // get the to-do list object that has this title as it's title + var request = objectStore.get(title); + + request.onsuccess = function() { + // grab the data object returned as the result + var data = request.result; + + // update the notified value in the object to "yes" + data.notified = "yes"; + + // create another request that inserts the item back into the database + var requestUpdate = objectStore.put(data); + + // when this new request succeeds, run the displayData() function again to update the display + requestUpdate.onsuccess = function() { + displayData(); + }</pre> + +<p>すべてのチェックが一致した場合は、 <code>createNotification()</code> 関数を実行して、ユーザーに通知を行います。</p> + +<pre class="brush: js"> cursor.continue(); + } + } +}</pre> + +<p>この関数の最後の行では、カーソルが上に移動し、 IndexedDB に格納されている次のタスクに対して、上記の期限チェックの仕組みが実行されます。</p> + +<h3 id="Keep_on_checking!">チェックし続ける</h3> + +<p>もちろん、上記の期限チェック機能を一度実行するだけでは意味がありません。すべての締切に達していないかどうかを常にチェックし続けたいのです。そのために、 <code>setInterval()</code> を使って 1 秒に 1 回 <code>checkDeadlines()</code> を実行します。</p> + +<pre class="brush: js">setInterval(checkDeadlines, 1000);</pre> diff --git a/files/ja/web/api/indexeddb_api/index.html b/files/ja/web/api/indexeddb_api/index.html index 14369351fa..1d08f26cc8 100644 --- a/files/ja/web/api/indexeddb_api/index.html +++ b/files/ja/web/api/indexeddb_api/index.html @@ -13,54 +13,54 @@ translation_of: Web/API/IndexedDB_API --- <div>{{DefaultAPISidebar("IndexedDB")}}</div> -<p>IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。この API は高パフォーマンスなデータの検索を行うために、インデックスを使用します。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。本ページは、MDN における IndexedDB のランディングページです。ここでは API リファレンスへのリンク、使用ガイド、ブラウザーのサポート状況、主要なコンセプトの説明を掲載します。</p> +<p>IndexedDB は、ファイルや blob を含む大量の構造化データをクライアント側で保存するための低レベル API です。この API はインデックスを使用して、高パフォーマンスなデータの検索を行うことができます。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。ここでは、完全な API リファレンスと使用ガイド、ブラウザーの対応の詳細、および重要な概念の説明へのリンクを提供します。</p> <p>{{AvailableInWorkers}}</p> <div class="note"> -<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にとってはとても複雑に見えるかもしれません。シンプルな API が好ましいのでしたら、IndexedDB をより開発者フレンドリーに扱える <a href="https://localforage.github.io/localForage/">localForage</a> や <a href="http://www.dexie.org/">dexie.js</a>、<a href="https://github.com/erikolson186/zangodb">ZangoDB</a>、<a href="https://pouchdb.com/">PouchDB</a>、<a href="http://jsstore.net/">JsStore</a> などのライブラリを検討してください。</p> +<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。シンプルな API が好ましいのであれば、<a href="#see_also">関連情報</a>の節にある IndexedDB をプログラマーにとって扱いやすくするライブラリーを試してみてください。</p> </div> -<h2 id="Key_concepts_and_usage" name="Key_concepts_and_usage">主要概念と使用法</h2> +<h2 id="Key_concepts_and_usage">主要概念と使用法</h2> -<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムですが、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">Structured Clone アルゴリズム</a>がサポートする、任意のオブジェクトを保存できます。データベースのスキーマを定義する、データベースへの接続を確立する、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行うことが必要です。</p> +<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムです。しかし、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">構造化クローンアルゴリズム</a>に対応した、任意のオブジェクトを保存することができます。データベースのスキーマを定義し、データベースへの接続を確立し、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行う必要があります。</p> <ul> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">IndexedDB のコンセプト</a>を詳しく知る</li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB 使用ガイド</a>で、非同期に IndexedDB を扱い方法を基本原理から学ぶ</li> - <li><a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Worker により PWA をオフラインで動作させる</a>で概説されているように、データをオフラインに格納する IndexedDB と資産をオフラインに格納する Service Worker を組み合わせる。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>についてはこちらをご覧ください。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>のガイドで、で、非同期的に IndexedDB を使用する方法を基本原理から学びます。</li> + <li>データをオフラインで保存するための IndexedDB と、資産をオフラインで保存するためのサービスワーカーを組み合わせる方法は、 <a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">サービスワーカーにより PWA をオフラインで動作させる</a>で概説しています。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p> +<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a href="https://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p> </div> -<h3 id="Synchronous_and_asynchronous" name="Synchronous_and_asynchronous">同期と非同期</h3> +<h3 id="Synchronous_and_asynchronous">同期と非同期</h3> -<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と<span style="background-color: #f5f6f5;">非同期</span> API の両方を提供していました。同期 API は <a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a> 内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、<span style="background-color: #f5f6f5;">同期 API</span> はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p> +<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と非同期 API の両方を提供していました。同期 API は<a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">ウェブワーカー</a>内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、同期 API はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p> -<h3 id="Storage_limits_and_eviction_criteria" name="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3> +<h3 id="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3> -<p>クライアントサイド (すなわちローカルディスク) に何らかのデータを保存するウェブ技術がいくつかあり、IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a> で、少なくとも Firefox ではどのようにしているかを説明しようとしています。</p> +<p>クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術はいくつかあります。IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a>で、少なくとも Firefox ではどのようにしているかの解説を試みています。</p> -<h2 id="Interfaces" name="Interfaces">インターフェイス</h2> +<h2 id="Interfaces">インターフェイス</h2> -<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/DOM/window" title="DOM/window">window</a> オブジェクトの <a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> 属性上の <a href="/ja/docs/Web/API/IDBFactory.open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発火したイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p> +<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/Web/API/Window">window</a> オブジェクトの <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB"><code>indexedDB</code></a> 属性上で <a href="/ja/docs/Web/API/IDBFactory/open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発行されたイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p> -<h3 id="Connecting_to_a_database" name="Connecting_to_a_database">データベースへの接続</h3> +<h3 id="Connecting_to_a_database">データベースへの接続</h3> <dl> <dt>{{domxref("IDBEnvironment")}}</dt> <dd>IndexedDB 機能へのアクセスを提供します。{{domxref("window")}} および {{domxref("worker")}} オブジェクトによって実装されています。このインターフェイスは 2.0 仕様の一部ではありません。</dd> <dt>{{domxref("IDBFactory")}}</dt> - <dd>データベースへのアクセスを提供します。<a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd> + <dd>データベースへのアクセスを提供します。{{domxref("WindowOrWorkerGlobalScope/indexedDB", "indexedDB")}} グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd> <dt>{{domxref("IDBOpenDBRequest")}}</dt> <dd>データベースを開くリクエストを表します。</dd> <dt>{{domxref("IDBDatabase")}}</dt> <dd>データベース接続を表します。データベースとのトランザクション処理を行うためのみに使用されます。</dd> </dl> -<h3 id="Retrieving_and_modifying_data" name="Retrieving_and_modifying_data">データの取り出しと変更</h3> +<h3 id="Retrieving_and_modifying_data">データの取り出しと変更</h3> <dl> <dt>{{domxref("IDBTransaction")}}</dt> @@ -72,88 +72,83 @@ translation_of: Web/API/IndexedDB_API <dt>{{domxref("IDBIndex")}}</dt> <dd>こちらも IndexedDB データベース内のデータのサブセットにアクセスできますが、レコードの探索に主キーではなくインデックスを使用します。{{domxref("IDBObjectStore")}} より高速に動作する場合があります。</dd> <dt>{{domxref("IDBCursor")}}</dt> - <dd>オブジェクトストアとインデックスをイテレートします。</dd> + <dd>オブジェクトストアとインデックスを反復処理します。</dd> <dt>{{domxref("IDBCursorWithValue")}}</dt> - <dd>オブジェクトストアとインデックスをイテレートして、カーソルの現在の値を返します。</dd> + <dd>オブジェクトストアとインデックスを反復処理して、カーソルの現在の値を返します。</dd> <dt>{{domxref("IDBKeyRange")}}</dt> <dd>データベースから一定の範囲のデータを取り出すために使用可能な、キーの範囲を定義します。</dd> <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt> - <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd> + <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd> </dl> -<h3 id="Custom_event_interfaces" name="Custom_event_interfaces">カスタムイベントインターフェイス</h3> +<h3 id="Custom_event_interfaces">カスタムイベントインターフェイス</h3> -<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します:</p> +<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します。</p> <dl> <dt>{{domxref("IDBVersionChangeEvent")}}</dt> - <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラ関数によってデータベースのバージョンが変更されたことを表します。</dd> + <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラー関数によってデータベースのバージョンが変更されたことを表します。</dd> </dl> -<h3 id="Obsolete_interfaces" name="Obsolete_interfaces">廃止インターフェイス</h3> +<h3 id="Obsolete_interfaces">廃止インターフェイス</h3> -<p>仕様の早期段階で定義されていたインターフェイスの一部が、現在、削除されています。以前書いたコードを最新の仕様に合わせて更新する際に必要になるであろうことから、削除されたインターフェイスに関するドキュメントは残してあります:</p> +<p>仕様の早期段階では、以下のようなインターフェイスを定義していましたが、既に削除されています。以前書かれたコードを更新する必要がある場合のために、ドキュメントを残しています。</p> <dl> - <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt> - <dd>データベースのバージョンの変更リクエストを表現します。データベースのバージョンを変更する方法が ({{domxref("IDBDatabase.setVersion")}} ではなく {{domxref("IDBFactory.open")}} を呼び出すように) 変わりました。また削除された {{domxref("IDBVersionChangeRequest")}} に代わり {{domxref("IDBOpenDBRequest")}} インターフェイスが用意されています。</dd> - <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt> + <dt>{{domxref("IDBDatabaseException")}} {{deprecated_inline}}</dt> <dd>データベース操作が実行されている間に発生した例外状況を表します。</dd> - <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBTransaction")}} です。</dd> - <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBObjectStore")}} です。</dd> - <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBIndex")}} です。</dd> - <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBFactory")}} です。</dd> - <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBEnvironment")}} です。</dd> - <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBDatabase")}} です。</dd> - <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBCursor")}} です。</dd> + <dt>{{domxref("IDBTransactionSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBTransaction")}} です。</dd> + <dt>{{domxref("IDBObjectStoreSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBObjectStore")}} です。</dd> + <dt>{{domxref("IDBIndexSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBIndex")}} です。</dd> + <dt>{{domxref("IDBFactorySync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBFactory")}} です。</dd> + <dt>{{domxref("IDBEnvironmentSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBEnvironment")}} です。</dd> + <dt>{{domxref("IDBDatabaseSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBDatabase")}} です。</dd> + <dt>{{domxref("IDBCursorSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBCursor")}} です。</dd> </dl> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> <ul> - <li><a href="http://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li> - <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li> - <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> + <li><a href="https://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li> + <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li> + <li><a href="https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> </ul> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("IndexedDB 2")}}</td> - <td>{{Spec2("IndexedDB 2")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('IndexedDB')}}</td> - <td>{{Spec2('IndexedDB')}}</td> - <td>初回定義</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://w3c.github.io/IndexedDB/">Indexed Database API</a></td> + </tr> + </tbody> </table> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li> - <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> + <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB をに対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li> + <li><a href="https://dexie.org/">Dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルターリング、射影、ソート、アップデート、集計をサポートしています。</li> - <li><a href="http://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li> - <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアントサイドのインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li> - <li><a href="https://pouchdb.com">PouchDB</a>: クライアントサイドのブラウザー内の CouchDB 実装で IndexedDB を使っています。</li> + <li><a href="https://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li> + <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアント側のインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li> + <li><a href="https://pouchdb.com">PouchDB</a>: クライアント側のブラウザー内の CouchDB 実装で IndexedDB を使っています。</li> + <li><a href="https://www.npmjs.com/package/idb">idb</a>: IndexedDB API をほぼ反映した小さな (~1.15k) ライブラリーですが、使いやすさを大きく変える小さな改良が加えられています。</li> + <li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: IndexedDB で実装された超シンプルで小さな (~600B) プロミスベースのキーバリューストア</li> + <li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> クライアントサイドのキーバリューストレージ用の小さな (~2kB) プロミスベースのライブラリーです。IndexedDB、localStorage、WebSQL、Cookie で動作します。優先度に基づいて、対応しているストレージを自動的に使用できます。</li> + <li><a href="https://github.com/google/lovefield">lovefield</a>: Lovefield は、ウェブアプリケーション用のリレーショナルデータベースです。 JavaScript で書かれており、クロスブラウザーで動作します。SQL ライクな API を提供しており、高速で安全、かつ簡単に使用できます。</li> + <li><a href="https://github.com/hyoo-ru/mam_mol/tree/master/db">$mol_db</a>: 小さな (~1.3kB) TypeScript のファサードで、プロミスベースの API と自動マイグレーションを備えています。</li> + </ul> diff --git a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html index 333cda62f1..a4727f8781 100644 --- a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html @@ -1,46 +1,52 @@ --- -title: IndexedDB を使用する +title: IndexedDB の使用 slug: Web/API/IndexedDB_API/Using_IndexedDB tags: - API - Advanced - Database + - Guide - IndexedDB - Storage - Tutorial + - jsstore translation_of: Web/API/IndexedDB_API/Using_IndexedDB --- <p>{{DefaultAPISidebar("IndexedDB")}}</p> <div class="summary"> -<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つ ウェブアプリケーションを作成できますので、オンラインとオフラインの両方で動作するアプリケーションになります。</p> +<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つウェブアプリケーションを作成できますので、アプリケーションがオンラインとオフラインの両方で動作するようになります。</p> </div> -<h2 id="About_this_document" name="About_this_document">このドキュメントについて</h2> +<h2 id="About_this_document">このドキュメントについて</h2> -<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB" title="IndexedDB/Basic Concepts Behind IndexedDB">IndexedDB の基本的な概念</a>をお読みください。</p> +<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>をお読みください。</p> -<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> の記事とそのサブ記事をご覧ください。IndexedDB で使用されるオブジェクトの型や、同期 API および非同期 API のドキュメントがあります。</p> +<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> の記事とそのサブ記事をご覧ください。この記事では、IndexedDB で使用されるオブジェクトの種類と、非同期 API のメソッドについて説明します (同期 API は仕様から削除されました)。</p> -<h2 id="pattern" name="pattern">基本パターン</h2> +<h2 id="pattern">基本パターン</h2> -<p>IndexedDB で推奨される基本パターンは、以下のようになります:</p> +<p>IndexedDB で推奨される基本パターンは、以下のようになります。</p> <ol> <li>データベースを開きます。</li> <li>データベース内に、オブジェクトストアを作成します。</li> <li>データの追加や取り出しといった、データベース操作のトランザクションを開始して、リクエストを行います。</li> - <li>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</li> - <li>結果 (リクエストオブジェクトで見つけることができます) に応じた処理を行います。</li> + <li> + <div>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</div> + </li> + <li> + <div>結果 (リクエストオブジェクトにある) に応じた処理を行います。</div> + </li> </ol> <p>これらの主要な概念を踏まえることで、より具体的な手続きを理解できます。</p> -<h2 id="open" name="open">ストアを作成および構築する</h2> +<h2 id="open">ストアを作成および構築する</h2> -<h3 id="Using_an_experimental_version_of_IndexedDB" name="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3> +<h3 id="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3> -<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう:</p> +<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう。</p> <pre class="brush: js">// 以下の行に、テストを行いたい実装の接頭辞を含めてください。 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; @@ -50,35 +56,35 @@ window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // (Mozilla はこれらのオブジェクトに接頭辞をつけていませんので、window.mozIDB* は不要です)</pre> -<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。サポートしているものとして失敗するより、未サポートとする方が好ましいでしょう:</p> +<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。対応しているものとして失敗するより、未対応とする方が好ましいでしょう。</p> <pre class="brush: js">if (!window.indexedDB) { - window.alert("このブラウザーは安定版の IndexedDB をサポートしていません。IndexedDB の機能は利用できません。"); + window.console.log("このブラウザーは安定版の IndexedDB を対応していません。IndexedDB の機能は利用できません。"); } </pre> -<h3 id="Opening_a_database" name="Opening_a_database">データベースを開く</h3> +<h3 id="Opening_a_database">データベースを開く</h3> -<p>プロセス全体は以下のようにして始めます:</p> +<p>プロセス全体は以下のようにして始めます。</p> <pre class="brush: js">// データベースを開く var request = window.indexedDB.open("MyTestDatabase", 3); </pre> -<p>わかりますか? データベースを開くことも他の操作と同様であり、"リクエスト" が必要です。</p> +<p>わかりますか? データベースを開くことも他の操作と同様であり、「リクエスト」が必要です。</p> -<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest" title="IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest" title="IndexedDB/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase" title="IndexedDB/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p> +<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p> -<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラでデータベースのスキーマを作成できます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラで更新されたスキーマを提供できます。詳しくは、後ほど<a href="#Updating_the_version_of_the_database">データベースのバージョンを更新する</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p> +<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生し、そのイベントハンドラーでデータベースのスキーマを作成することができます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラーで更新されたスキーマを提供することができます。詳しくは、後ほど<a href="#updating_the_version_of_the_database">データベースのバージョンの更新</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p> <div class="warning"> -<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください:<br> +<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください。<br> <code>var request = indexedDB.open("MyTestDatabase", 2.4); // 行ってはいけません。バージョンは 2 に丸められます</code></p> </div> -<h4 id="Generating_handlers" name="Generating_handlers">ハンドラを生成する</h4> +<h4 id="Generating_handlers">ハンドラーの生成</h4> -<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラを生成することでしょう:</p> +<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラーを生成することでしょう。</p> <pre class="brush: js">request.onerror = function(event) { // request.errorCode に対して行うこと! @@ -89,38 +95,38 @@ request.onsuccess = function(event) { <p>2 つの関数 <code>onsuccess()</code> と <code>onerror()</code> のどちらが呼び出されるのでしょう? すべてが成功すると成功イベント (すなわち <code>type</code> プロパティが <code>"success"</code> である DOM イベント) が、<code>request</code> を <code>target</code> として発生します。イベントが発生すると <code>request</code> の <code>onsuccess()</code> 関数が、success イベントを引数として呼び出されます。一方、何らかの問題がある場合はエラーイベント (すなわち <code>type</code> プロパティが <code>"error"</code> である DOM イベント) が <code>request</code> で発生します。これは、エラーイベントを引数として <code>onerror()</code> 関数を呼び出します。</p> -<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ!)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーが ウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p> +<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーがウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p> -<p>広告ネットワークやコンピュータを汚染させる悪意のある Web サイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリ上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2015 年 11 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p> +<p>広告ネットワークやコンピューターを汚染させる悪意のあるウェブサイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリー上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2021 年 5 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p> -<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう:</p> +<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう。</p> <pre class="brush: js">var db; var request = indexedDB.open("MyTestDatabase"); request.onerror = function(event) { - alert("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!"); + console.log("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!"); }; request.onsuccess = function(event) { db = event.target.result; }; </pre> -<h4 id="Handling_Errors" name="Handling_Errors">エラーを処理する</h4> +<h4 id="Handling_Errors">エラーを処理する</h4> -<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラをデータベースオブジェクトに追加することができます:</p> +<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラーを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラーをデータベースオブジェクトに追加することができます。</p> <pre class="brush: js">db.onerror = function(event) { // このデータベースのリクエストに対するすべてのエラー用の - // 汎用エラーハンドラ! - alert("Database error: " + event.target.errorCode); + // 汎用エラーハンドラー! + console.log("Database error: " + event.target.errorCode); }; </pre> -<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラで処理しなければならないエラーの実例です。</p> +<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラーで処理しなければならないエラーの実例です。</p> <h3 id="Creating_or_updating_the_version_of_the_database" name="Creating_or_updating_the_version_of_the_database">データベースを作成またはデータベースのバージョンを更新する</h3> -<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラでは、このバージョンのデータベースで必要なオブジェクトストアを作成します:</p> +<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラーに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラーでは、このバージョンのデータベースで必要なオブジェクトストアを作成します。</p> <pre class="brush:js;">// このイベントは最新のブラウザーにのみ実装されています request.onupgradeneeded = function(event) { @@ -135,21 +141,19 @@ request.onupgradeneeded = function(event) { <p>既存の名称を使用してオブジェクトストアを作成しようとする (あるいは、存在しない名称のオブジェクトストアを削除しようとする) と、エラーが発生します。</p> -<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラが実行されます。</p> +<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラーが実行されます。</p> -<p>Chrome 23 以降および Opera 17 以降の Blink/Webkit は、現行バージョンの仕様をサポートします。IE10 以降も同様です。他の実装や古い実装では現行バージョンの仕様を実装しておらず、<code>indexedDB.open(name, version).onupgradeneeded</code> シグネチャが未サポートです。古い Webkit/Blink でデータベースのバージョンを更新する方法について、詳しくは <a href="/ja/docs/Web/API/IDBDatabase#setVersion()_.0A.0ADeprecated" title="IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase のリファレンス記事</a>をご覧ください。</p> +<h3 id="Structuring_the_database">データベースを構築する</h3> -<h3 id="Structuring_the_database" name="Structuring_the_database">データベースを構築する</h3> +<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keypath">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keygenerator">キージェネレーター</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p> -<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="IndexedDB#gloss_key_path">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keygenerator" title="IndexedDB#gloss key generator">キージェネレータ</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p> - -<p>以下の表で、キーを供給するさまざまな方法を示します:</p> +<p>以下の表で、キーを供給するさまざまな方法を示します。</p> <table class="standard-table"> <thead> <tr> <th scope="col">キーパス (<code>keyPath</code>)</th> - <th scope="col">キージェネレータ (<code>autoIncrement</code>)</th> + <th scope="col">キージェネレーター (<code>autoIncrement</code>)</th> <th scope="col">説明</th> </tr> </thead> @@ -181,7 +185,7 @@ request.onupgradeneeded = function(event) { <p>さらにインデックスには、保存されたデータに単純な制限を強制する機能があります。インデックスを作成する際に unique フラグを設定すると、インデックスのキーパスで同じ値を持つオブジェクトが複数保存されないことを、インデックスが保証します。よって例えば人々の集団の情報を保持するオブジェクトストアがある場合に、同じメールアドレスを持つ人が 2 人存在しないことを保証したい場合は、これを強制するために unique フラグを設定したインデックスを使用するとよいでしょう。</p> -<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します:</p> +<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します。</p> <pre class="brush: js">// 顧客データがどのようなものかを示します const customerData = [ @@ -192,7 +196,7 @@ const customerData = [ <p>もちろん、誰かの社会保障番号を顧客テーブルの主キーとして使用するべきではないですし (社会保障番号を持っていない人もいます)、年齢の代わりに誕生日を保管することもできますが、これらの不適切な選択は利便性のために無視して先へ進みましょう。</p> -<p>次に、データを保存する IndexedDB を作成するところを見てみましょう:</p> +<p>次に、データを保存する IndexedDB を作成するところを見てみましょう。</p> <pre class="brush: js">const dbName = "the_name"; @@ -222,28 +226,28 @@ request.onupgradeneeded = function(event) { objectStore.transaction.oncomplete = function(event) { // 新たに作成した objectStore に値を保存します。 var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers"); - for (var i in customerData) { - customerObjectStore.add(customerData[i]); - } + customerData.forEach(function(customer) { + customerObjectStore.add(customer); + }); }; }; </pre> <p>先に示したように、<code>onupgradeneeded</code> はデータベースの構造を変えることができる唯一の場所です。ここではオブジェクトストアの作成および削除や、インデックスの構築および削除が可能です。</p> -<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前とパラメータオブジェクトです。パラメータオブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p> +<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前と引数オブジェクトです。引数オブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p> <p>また、保存されたオブジェクトの <code>name</code> プロパティを参照する、"name" という名前のインデックスも要求しています。<code>createObjectStore()</code> と同様に <code>createIndex()</code> も、作成したいインデックスの型を改良するための省略可能な引数 <code>options</code> オブジェクトを指定できます。<code>name</code> プロパティを持たないオブジェクトを追加することはできますが、そのオブジェクトは "name" インデックス内に現れません。</p> -<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#Using_an_index" title="Using IndexedDB#Using an index">インデックスを使用する</a> をご覧ください。</p> +<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#using_an_index">インデックスを使用する</a> をご覧ください。</p> -<h3 id="Using_a_key_generator" name="Using_a_key_generator">キージェネレータを使用する</h3> +<h3 id="Using_a_key_generator">キージェネレーターを使用する</h3> -<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレータを使用できます。デフォルトで、このフラグは設定されません。</p> +<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレーターを使用できます。デフォルトで、このフラグは設定されません。</p> -<p>キージェネレータを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレータを初めて作成した時点では、キージェネレータの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレータの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレータには影響がありません。</p> +<p>キージェネレーターを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレーターを初めて作成した時点では、キージェネレーターの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレーターの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレーターには影響がありません。</p> -<p>以下のように、キージェネレータを持つ別のオブジェクトストアを作成できます:</p> +<p>以下のように、キージェネレーターを持つ別のオブジェクトストアを作成できます。</p> <pre class="brush: js">// indexedDB を開きます。 var request = indexedDB.open(dbName, 3); @@ -255,7 +259,7 @@ request.onupgradeneeded = function (event) { // autoIncrement フラグに true を設定した、"names" という名前のオブジェクトストアを作成します。 var objStore = db.createObjectStore("names", { autoIncrement : true }); - // "names" オブジェクトストアはキージェネレータを持っていますので、値 name のキーは自動的に生成されます。 + // "names" オブジェクトストアはキージェネレーターを持っていますので、値 name のキーは自動的に生成されます。 // 追加したレコードは以下のようになります: // キー : 1 => 値 : "Bill" // キー : 2 => 値 : "Donna" @@ -264,34 +268,34 @@ request.onupgradeneeded = function (event) { } };</pre> -<p>キージェネレータについて詳しくは、<a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p> +<p>キージェネレーターについて詳しくは、<a href="https://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p> -<h2 id="Adding_retrieving_and_removing_data" name="Adding_retrieving_and_removing_data">データを追加する、読み出す、削除する</h2> +<h2 id="Adding_retrieving_and_removing_data">データの追加、読み取り、削除</h2> <p>新しいデータベースで何かを行えるようにする前に、トランザクションを開始しなければなりません。トランザクションはデータベースオブジェクトから生じており、トランザクションの対象にしたいオブジェクトストアを指定しなければなりません。トランザクションの内部では、データを保持しているオブジェクトストアへのアクセスや、リクエストの実行が可能です。次に、データベースに変更処理を行うのか、あるいはデータベースから読み出すだけかを決めなければなりません。トランザクションは <code>readonly</code>、<code>readwrite</code>、<code>versionchange</code> の 3 つのモードを使用できます。</p> -<p>データベースの "スキーマ" や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。(最新の仕様を実装していない WebKit ブラウザーは {{domxref("IDBFactory.open")}} メソッドの引数が、データベースの <code>name</code> の 1 つしかありません。よって、<code>versionchange</code> トランザクションを開始するには {{domxref("IDBVersionChangeRequest.setVersion")}} を呼び出さなければなりません)</p> +<p>データベースの「スキーマ」や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。</p> <p>既存のオブジェクトストアからレコードを読み出すには、トランザクションで <code>readonly</code> モードまたは <code>readwrite</code> モードを使用できます。既存のオブジェクトストアに変更処理を行うには、トランザクションを <code>readwrite</code> モードにしなければなりません。このようなトランザクションは {{domxref("IDBDatabase.transaction")}} で開きます。このメソッドの引数は 2 つあり、<code>storeNames</code> (アクセスしたいオブジェクトストアの配列で定義されるスコープ) とトランザクションの <code>mode</code> (<code>readonly</code> または <code>readwrite</code>) です。またこのメソッドは、{{domxref("IDBTransaction.objectStore")}} メソッドを持つトランザクションオブジェクトを返します。<code>objectStore</code> メソッドは、オブジェクトストアにアクセスするために使用できます。デフォルトでは、モードを指定しなければ <code>readonly</code> モードでトランザクションを開きます。</p> <div class="note"> -<p><strong>注記</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p> +<p><strong>メモ</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p> </div> -<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します:</p> +<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します。</p> <ul> <li>スコープを定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li> - <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">基本的な概念</a>の記事で <dfn><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#Database">トランザクション</a></dfn>の定義をご覧ください。</li> + <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>の記事で <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">トランザクション</a>の定義をご覧ください。</li> </ul> -<h3 id="Adding_data_to_the_database" name="Adding_data_to_the_database">データベースにデータを追加する</h3> +<h3 id="Adding_data_to_the_database">データベースにデータを追加する</h3> -<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします:</p> +<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします。</p> <pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite"); -// 注記: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。 -// そのような実装をサポートしたい場合は、以下のように記述します: +// メモ: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。 +// そのような実装をサポートしたい場合は、以下のように記述します。 // var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre> <p><code>transaction()</code> 関数は引数が 2 つあり (ひとつは省略可能)、トランザクションオブジェクトを返します。第 1 引数は、トランザクションの対象にするオブジェクトストアのリストです。トランザクションですべてのオブジェクトを対象にしたい場合は空の配列を渡すことができますが、仕様書では空の配列に対して InvalidAccessError を生成すべきとされていますので、行わないようにしてください。第 2 引数に何も指定しなければ、読み取り専用のトランザクションになります。書き込みを行いたい場合は、<code>"readwrite"</code> フラグを渡さなければなりません。</p> @@ -304,7 +308,7 @@ request.onupgradeneeded = function (event) { <pre class="brush: js">// すべてのデータがデータベースに追加されたときに行う処理 transaction.oncomplete = function(event) { - alert("All done!"); + console.log("All done!"); }; transaction.onerror = function(event) { @@ -321,9 +325,9 @@ for (var i in customerData) { <p><code>add()</code> を呼び出して生成されたリクエストの <code>result</code> は、追加された値のキーです。よってこのケースでは、オブジェクトストアでキーパスとして <code>ssn</code> プロパティを使用していますので、追加されたオブジェクトの <code>ssn</code> プロパティと等しくなります。<code>add()</code> 関数では、データベース内に同一のキーを持つオブジェクトが存在しないことを要求しますので注意してください。既存の項目を変更しようとする場合や、既存の項目があるかを配慮しない場合は、{{anch("Updating an entry in the database", "データベース内の項目を更新する")}} の章で説明している <code>put()</code> 関数を使用できます。</p> -<h3 id="Removing_data_from_the_database" name="Removing_data_from_the_database">データベースからデータを削除する</h3> +<h3 id="Removing_data_from_the_database">データベースからのデータの削除</h3> -<p>データの削除もよく似ています:</p> +<p>データの削除もよく似ています。</p> <pre class="brush: js">var request = db.transaction(["customers"], "readwrite") .objectStore("customers") @@ -332,9 +336,9 @@ request.onsuccess = function(event) { // 削除完了! };</pre> -<h3 id="Getting_data_from_the_database" name="Getting_data_from_the_database">データベースからデータを取得する</h3> +<h3 id="Getting_data_from_the_database">データベースからのデータの取得</h3> -<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません:</p> +<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません。</p> <pre class="brush: js">var transaction = db.transaction(["customers"]); var objectStore = transaction.objectStore("customers"); @@ -344,27 +348,27 @@ request.onerror = function(event) { }; request.onsuccess = function(event) { // request.result に対して行う処理! - alert("Name for SSN 444-44-4444 is " + request.result.name); + console.log("Name for SSN 444-44-4444 is " + request.result.name); };</pre> -<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します:</p> +<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します。</p> <pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) { - alert("Name for SSN 444-44-4444 is " + event.target.result.name); + console.log("Name for SSN 444-44-4444 is " + event.target.result.name); };</pre> <p>どのように動作するかわかりますか? オブジェクトストアが 1 つしかありませんので、トランザクションで必要とするオブジェクトストアのリストを渡さずに、名称を文字列で渡しています。また、データベースから読み出すだけですので、<code>"readwrite"</code> トランザクションは不要です。モードを指定せずに <code>transaction()</code> を呼び出すと、<code>"readonly"</code> トランザクションになります。さらに細かいことですが、実はリクエストオブジェクトを変数に保存していません。DOM イベントはターゲットとしてリクエストを持ちますので、<code>result</code> プロパティを得るためにイベントを使用できます。</p> -<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します:</p> +<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します。</p> <ul> <li><a href="#scope">スコープ</a>を定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li> - <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li> + <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li> </ul> -<h3 id="Updating_an_entry_in_the_database" name="Updating_an_entry_in_the_database">データベース内の項目を更新する</h3> +<h3 id="Updating_an_entry_in_the_database">データベース内の項目の更新</h3> -<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう:</p> +<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう。</p> <pre class="brush: js">var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers"); var request = objectStore.get("444-44-4444"); @@ -391,29 +395,29 @@ request.onsuccess = function(event) { <p>ここでは <code>objectStore</code> を作成して、ssn の値 (<code>444-44-4444</code>) で特定される顧客レコードの取り出しを要求しています。リクエストの結果を変数 (<code>data</code>) に代入して、そのオブジェクトの <code>age</code> プロパティを更新します。そして、顧客レコードを <code>objectStore</code> に書き戻して前の値を上書きする、第 2 のリクエスト (<code>requestUpdate</code>) を作成します。</p> <div class="note"> -<p><strong>注記</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p> +<p><strong>メモ</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p> </div> -<h3 id="Using_a_cursor" name="Using_a_cursor">カーソルを使用する</h3> +<h3 id="Using_a_cursor">カーソルの使用</h3> -<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです:</p> +<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです。</p> <pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers"); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { - alert("Name for SSN " + cursor.key + " is " + cursor.value.name); + console.log("Name for SSN " + cursor.key + " is " + cursor.value.name); cursor.continue(); } else { - alert("No more entries!"); + console.log("No more entries!"); } };</pre> -<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例ではショートハンドを使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストにマッチする項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p> +<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例では略記法を使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストに一致する項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p> -<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです:</p> +<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです。</p> <pre class="brush: js">var customers = []; @@ -424,40 +428,45 @@ objectStore.openCursor().onsuccess = function(event) { cursor.continue(); } else { - alert("Got all customers: " + customers); + console.log("Got all customers: " + customers); } };</pre> <div class="note"> -<p><strong>注記</strong>: Mozilla は、このような処理を行うために <code>getAll()</code> も実装しています (および <code>getAllKeys()</code> もあり、これは現在、about:config の設定項目 <code>dom.indexedDB.experimental</code> で隠しています)。これらは IndexedDB 標準の一部ではなく、将来削除する可能性があります。これらは便利であると考えられますので、実装しました。以下のコードは、前出の例とまったく同じことを行います:</p> +<p><strong>メモ</strong>: それ以外に、このような処理を行うために <code>getAll()</code> (および <code>getAllKeys()</code>)。を使用することができます。以下のコードは、前出の例とまったく同じことを行います。</p> <pre class="brush: js">objectStore.getAll().onsuccess = function(event) { - alert("Got all customers: " + event.target.result); + console.log("Got all customers: " + event.target.result); };</pre> <p>これはオブジェクトを横着な方法で作成するため、カーソルの <code>value</code> プロパティの検索に関してパフォーマンスコストが発生します。例えば <code>getAll()</code> を使用するとき、Gecko はすべてのオブジェクトを一度に作成しなければなりません。例えばそれぞれのキーを検索することにのみ関心がある場合は、<code>getAll()</code> よりもカーソルを使用する方がとても効率的です。オブジェクトストア内の全データの配列を得ようとしている場合は、<code>getAll()</code> を使用しましょう。</p> </div> -<h3 id="Using_an_index" name="Using_an_index">インデックスを使用する</h3> +<h3 id="Using_an_index">インデックスの使用</h3> <p>SSN は個人を一意に識別しますので、キーとして SSN を使用して顧客データを保管することは論理的です。(プライバシーの観点でよいアイデアであるかは別の問題であり、この記事の対象外です) 一方、名前で顧客を検索しなければならない場合は、正しいものが見つかるまでデータベース内のすべての SSN に対して反復処理を行わなければなりません。この方法による検索はとても遅いため、代わりにインデックスを使用するとよいでしょう。</p> -<pre class="brush: js">var index = objectStore.index("name"); +<pre class="brush: js">// 最初に、 request.onupgradeneeded の中にインデックスを生成したか確認してください。 +// objectStore.createIndex("name", "name"); +// まだであれば、 DOMException が発生します。 + +var index = objectStore.index("name"); index.get("Donna").onsuccess = function(event) { - alert("Donna's SSN is " + event.target.result.ssn); -};</pre> + console.log("Donna's SSN is " + event.target.result.ssn); +}; +</pre> <p>"name" カーソルは一意ではないので、<code>name</code> に <code>"Donna"</code> が設定されている項目は複数存在する可能性があります。この場合は常に、キーの値がもっとも小さいものを取得します。</p> -<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します:</p> +<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します。</p> <pre class="brush: js">// 顧客レコードのオブジェクト全体を得るために、ノーマルカーソルを使用します。 index.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // cursor.key は "Bill" のような名前、cursor.value はオブジェクト全体です。 - alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); + console.log("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); cursor.continue(); } }; @@ -468,40 +477,40 @@ index.openKeyCursor().onsuccess = function(event) { if (cursor) { // cursor.key は "Bill" のような名前、cursor.value は SSN です。 // 保存されたオブジェクトの他の部分を直接取得する方法はありません。 - alert("Name: " + cursor.key + ", SSN: " + cursor.value); + console.log("Name: " + cursor.key + ", SSN: " + cursor.value); cursor.continue(); } };</pre> -<h3 id="Specifying_the_range_and_direction_of_cursors" name="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3> +<h3 id="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3> -<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します:</p> +<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します。</p> -<pre class="brush: js">// "Donna" にのみマッチします。 +<pre class="brush: js">// "Donna" にのみ一致します。 var singleKeyRange = IDBKeyRange.only("Donna"); -// "Bill" より先のすべてにマッチします。"Bill" を含みます。 +// "Bill" より先のすべてに一致します。"Bill" を含みます。 var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill"); -// "Bill" より先のすべてにマッチします。ただし "Bill" は含みません。 +// "Bill" より先のすべてに一致します。ただし "Bill" は含みません。 var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true); -// "Donna" までのすべてにマッチします。ただし "Donna" は含みません。 +// "Donna" までのすべてに一致します。ただし "Donna" は含みません。 var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true); -// "Bill" から "Donna" までにマッチします。ただし "Donna" は含みません。 +// "Bill" から "Donna" までに一致します。ただし "Donna" は含みません。 var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true); // いずれかのキーレンジを使用するには、openCursor()/openKeyCursor() の第 1 引数として渡します。 index.openCursor(boundKeyRange).onsuccess = function(event) { var cursor = event.target.result; if (cursor) { - // マッチした場合の処理。 + // 一致した場合の処理。 cursor.continue(); } };</pre> -<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します:</p> +<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します。</p> <pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) { var cursor = event.target.result; @@ -511,7 +520,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します:</p> +<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します。</p> <pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) { var cursor = event.target.result; @@ -521,7 +530,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向のパラメータに <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p> +<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向の引数に <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p> <pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) { var cursor = event.target.result; @@ -531,18 +540,18 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#Constants">IDBCursor Constants</a>" をご覧ください。</p> +<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#constants">IDBCursor Constants</a>" をご覧ください。</p> -<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab" name="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2> +<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2> -<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します:</p> +<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します。</p> <pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2); openReq.onblocked = function(event) { // 他のタブがデータベースを読み込んでいる場合は、処理を進める前に // それらを閉じなければなりません。 - alert("このサイトを開いている他のタブをすべて閉じてください!"); + console.log("このサイトを開いている他のタブをすべて閉じてください!"); }; openReq.onupgradeneeded = function(event) { @@ -558,12 +567,12 @@ openReq.onsuccess = function(event) { }; function useDatabase(db) { - // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラを追加するようにしてください。 + // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラーを追加するようにしてください。 // データベースを閉じなければなりません。データベースを閉じると、別のページがデータベースをアップグレードできます。 // これを行わなければ、ユーザーがタブを閉じるまでデータベースはアップグレードされません。 db.onversionchange = function(event) { db.close(); - alert("新しいバージョンのページが使用可能になりました。再読み込みしてください!"); + console.log("新しいバージョンのページが使用可能になりました。再読み込みしてください!"); }; // データベースを使用する処理 @@ -572,39 +581,39 @@ function useDatabase(db) { <p>すでに開かれているアプリが新たにデータベースを開こうとするコードを開始したが、古いバージョンのデータベースを使用している状況に対処するため、<code>VersionError</code> エラーもリッスンしましょう。</p> -<h2 id="Security" name="Security">セキュリティ</h2> +<h2 id="Security">セキュリティ</h2> <p>IndexedDB は同一生成元の原則を使用します。すなわち、ストアとサイトの生成元 (通常、サイトのドメインまたはサブドメイン) を紐づけますので、他の生成元からアクセスすることはできません。</p> <p>サードパーティの window コンテンツ (例えば {{htmlelement("iframe")}} のコンテンツ) は、ブラウザーが<a href="https://support.mozilla.org/ja/kb/disable-third-party-cookies">サードパーティ Cookie を禁止していない</a>限り、自身が埋め込まれている生成元の IndexedDB ストアにアクセスできます ({{bug("1147821")}} をご覧ください)。</p> -<h2 id="Warning_About_Browser_Shutdown" name="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2> +<h2 id="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2> -<p>ブラウザーを終了するとき (例えばユーザーが "終了" や "閉じる" ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします:</p> +<p>ブラウザーを終了するとき (例えばユーザーが「終了」や「閉じる」ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします。</p> <ol> <li>影響するデータベース (あるいは、ブラウザーを終了する場合はすべての開いているデータベース) の各トランザクションは <code>AbortError</code> とともに中断されます。この効果は各トランザクションで {{domxref("IDBTransaction.abort()")}} が呼ばれたのと同等です。</li> <li>すべてのトランザクションが完了していたら、データベース接続は閉じられます。</li> - <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラを使ってこのイベントをリッスンできます。その結果、データベースが予期せず閉じられたことがわかります。</li> + <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラーを使ってこのイベントを待ち受けできます。その結果、データベースが予期せず閉じられたことがわかります。</li> </ol> -<p>上記の挙動は新しく、下記のブラウザーリリース以降で利用できます: Firefox 50, Google Chrome 31 (おおよそ)。</p> +<p>上記の挙動は新しく、ブラウザーの Firefox 50、Google Chrome 31 以降 (おおよそ) のリリースで利用できます。</p> -<p>このブラウザーバージョンの前は、トランザクションは静かに中断され、{{event("close")}} イベントは発火せず、予期せぬデータベースの停止を検出する方法はありませんでした。</p> +<p>このバージョンのブラウザーの前は、トランザクションは暗黙裡に中断され、{{event("close")}} イベントが発行されず、予期せぬデータベースの停止を検出する方法はありませんでした。</p> <p>ユーザーはいつでもブラウザーを終了することができますので、特定のトランザクションが完了することをあてにしたり、完了しなかったことを知ったりすることはできません。この動作が暗示することがいくつかあります。</p> <p>第一に、データベースであらゆるトランザクションが終了したときに、常に一貫性がある状態を保つように注意するべきです。例えば、ユーザーが編集可能な項目のリストを保存する IndexedDB を使用していると想定します。オブジェクトストアを消去してから新たなリストを書き込むことにより、編集後のリストを保存します。あるトランザクションでオブジェクトストアを消去して、別のトランザクションで新たなリストを書き込むとすれば、消去した後かつ書き込む前にブラウザーが閉じられる危険性があり、その場合は空のデータベースが残ります。これを避けるために、消去と書き込みをひとつのトランザクションに結合しましょう。</p> -<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p> +<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラーで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラーで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p> <p>実は通常のブラウザー終了であっても、IndexedDB のトランザクションが完了するよう保証する手段はありません。{{bug(870645)}} をご覧ください。通常の終了通知の回避策として、トランザクションの状況を追跡して、アンロード時にトランザクションが完了していないことをユーザーに警告するための <code>beforeunload</code> イベントを追加するとよいでしょう。</p> -<p>少なくともアボート通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p> +<p>少なくとも中止通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p> -<h2 id="Locale-aware_sorting" name="Locale-aware_sorting">ロケールを意識した並べ替え</h2> +<h2 id="Locale-aware_sorting">ロケールを意識した並べ替え</h2> -<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます:</p> +<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます。</p> <ul> <li>a</li> @@ -613,19 +622,19 @@ function useDatabase(db) { <li>á</li> </ul> -<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p> +<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリーに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p> <p>この新機能は、開発者が {{domxref("IDBObjectStore.createIndex()")}} を使用してインデックスを作成する際にロケールを指定できるようにします (引数を確認してください)。データセットに対して反復処理を行うためにカーソルを使用するときに、ロケールを意識した並べ替えを行いたい場合は、特化した {{domxref("IDBLocaleAwareKeyRange")}} を使用できます。</p> <p>また {{domxref("IDBIndex")}} には、ロケールが指定されているか、およびどのロケールが指定されているかを特定するために追加された新たなプロパティがあります。<code>locale</code> (指定されたロケール、または未指定であれば null を返します) と <code>isAutoLocale</code> (プラットフォームの既定のロケールを使用する自動ロケールでインデックスが作成されていれば <code>true</code>、そうでなければ <code>false</code> を返します) です。</p> <div class="note"> -<p><strong>注記</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p> +<p><strong>メモ</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p> </div> -<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2> +<h2 id="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2> -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> +<h3 id="HTML_Content">HTML コンテンツ</h3> <pre class="brush: html"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> @@ -760,7 +769,7 @@ function useDatabase(db) { </div> </pre> -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> +<h3 id="CSS_Content">CSS コンテンツ</h3> <pre class="brush: css">body { font-size: 0.8em; @@ -849,7 +858,7 @@ input { } </pre> -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> +<h3 id="JavaScript_Content">JavaScript コンテンツ</h3> <pre class="brush: js">(function () { var COMPAT_ENVS = [ @@ -877,9 +886,7 @@ input { console.log("openDb ..."); var req = indexedDB.open(DB_NAME, DB_VERSION); req.onsuccess = function (evt) { - // ガベージコレクションの問題を避けるため、結果を得る際は - // "req" より "this" を使用する方がよい - // db = req.result; + // db = req.result; と同等 db = this.result; console.log("openDb DONE"); }; @@ -907,7 +914,7 @@ input { return tx.objectStore(store_name); } - function clearObjectStore(store_name) { + function clearObjectStore() { var store = getObjectStore(DB_STORE_NAME, 'readwrite'); var req = store.clear(); req.onsuccess = function(evt) { @@ -996,7 +1003,7 @@ input { // ストア内の次のオブジェクトに移動する cursor.continue(); - // このカウンタは、個別の ID を作成するためだけに使用する + // このカウンターは、個別の ID を作成するためだけに使用する i++; } else { console.log("No more entries"); @@ -1069,7 +1076,7 @@ input { * @param {string} url ダウンロードしてローカルの IndexedDB データベースに保存する * 画像の URL。この URL の背後にあるリソースは、"同一生成元ポリシー" に従います。 * よって、この方法を動作させるために URL は、このコードを配置する - * Web サイト/アプリと同一生成元であることが必要です。 + * ウェブサイト/アプリと同一生成元であることが必要です。 */ function addPublicationFromUrl(biblioid, title, year, url) { console.log("addPublicationFromUrl:", arguments); @@ -1189,8 +1196,8 @@ input { // 警告: 削除するには、作成時に使用したものとまったく同じキーを使用しなければ // なりません。作成時のキーが数値であった場合は、削除時も数値でなければ // なりません。 - req = store.delete(key); - req.onsuccess = function(evt) { + var deleteReq = store.delete(key); + deleteReq.onsuccess = function(evt) { console.log("evt:", evt); console.log("evt.target:", evt.target); console.log("evt.target.result:", evt.target.result); @@ -1198,7 +1205,7 @@ input { displayActionSuccess("Deletion successful"); displayPubList(store); }; - req.onerror = function (evt) { + deleteReq.onerror = function (evt) { console.error("deletePublication:", evt.target.errorCode); }; }; @@ -1298,37 +1305,38 @@ input { openDb(); addEventListeners(); -})(); // Immediately-Invoked Function Expression (IIFE) -</pre> +})(); // Immediately-Invoked Function Expression (IIFE)</pre> <p>{{LiveSampleLink('Full_IndexedDB_example', "オンラインのライブデモを試す")}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<div class="notecard note"> +<p><strong>メモ</strong>: <code>window.indexedDB.open()</code> は非同期です。このメソッドは <code>success</code> イベントが発行されるよりもはるかに前に終了します。すなわち、ある関数 (例えば <code>openDb()</code>) が <code>open()</code> や <code>onsuccess</code> を呼び出すと、 <code>onsuccess</code> ハンドラーが実行されるよりも前に戻ります。この問題は、 <code>transaction()</code> や <code>get()</code> のような他のリクエストメソッドでも言えます。</p> +</div> + +<h2 id="See_also">関連情報</h2> <p>必要に応じて、より多くの情報を知るための記事集です。</p> -<h3 id="Reference" name="Reference">リファレンス</h3> +<h3 id="Reference">リファレンス</h3> <ul> - <li><a href="/ja/docs/Web/API/IndexedDB_API" title="IndexedDB">IndexedDB API リファレンス</a></li> - <li><a href="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB_in_chrome" title="IndexedDB/Using_IndexedDB_in_chrome">chrome で IndexedDB を使用する</a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Firefox で JavaScript ジェネレータを使用する</a></li> - <li>Firefox のソースコード内の、IndexedDB <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl&regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom/indexedDB/.*\.idl&regexp=1">インタフェースのファイル</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API リファレンス</a></li> + <li><a href="https://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> + <li>IndexedDB <a class="link-https" href="https://searchfox.org/mozilla-central/search?q=dom%2FindexedDB%2F.*%5C.idl&path=&case=false®exp=true">インターフェイスファイル</a> (Firefox のソースコード内)</li> </ul> -<h3 id="Tutorials_and_guides" name="Tutorials_and_guides">チュートリアルとガイド</h3> +<h3 id="Tutorials_and_guides">チュートリアルとガイド</h3> <ul> - <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> - <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> + <li><a href="https://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> + <li><a href="https://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> </ul> -<h3 id="Libraries" name="Libraries">ライブラリ</h3> +<h3 id="Libraries">ライブラリー</h3> <ul> - <li><a href="http://mozilla.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li> - <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> + <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB に対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li> + <li><a href="https://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルタリング、射影、ソート、アップデート、集計をサポートしています。</li> - <li><a href="http://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li> + <li><a href="https://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li> </ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/ja/web/api/issecurecontext/index.html index 221ce43915..877738b41b 100644 --- a/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html +++ b/files/ja/web/api/issecurecontext/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.isSecureContext -slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +slug: Web/API/isSecureContext tags: - API - DOM @@ -12,6 +12,7 @@ tags: - プロパティ - リファレンス translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext --- <p>{{APIRef()}}{{SeeCompatTable}}</p> diff --git a/files/ja/web/api/navigator/appcodename/index.html b/files/ja/web/api/navigator/appcodename/index.html new file mode 100644 index 0000000000..befb274cb5 --- /dev/null +++ b/files/ja/web/api/navigator/appcodename/index.html @@ -0,0 +1,44 @@ +--- +title: Navigator.appCodeName +slug: Web/API/Navigator/appCodeName +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference +browser-compat: api.Navigator.appCodeName +translation_of: Web/API/NavigatorID/appCodeName +original_slug: Web/API/NavigatorID/appCodeName +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.appCodeName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Mozilla</code>" です。このプロパティは互換性のためだけに維持されています。</p> + +<div class="note"><strong>メモ:</strong> このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Mozilla</code>" を返します。 +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>codeName</em> = navigator.appCodeName +</pre> + +<h3 id="Value">値</h3> + +<p>"<code>Mozilla</code>" という文字列です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appName")}}</li> + <li>{{domxref("Navigator.product")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/appname/index.html b/files/ja/web/api/navigator/appname/index.html new file mode 100644 index 0000000000..0ecf702fba --- /dev/null +++ b/files/ja/web/api/navigator/appname/index.html @@ -0,0 +1,46 @@ +--- +title: Navigator.appName +slug: Web/API/Navigator/appName +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference +browser-compat: api.Navigator.appName +translation_of: Web/API/NavigatorID/appName +original_slug: Web/API/NavigatorID/appName +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.appName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Netscape</code>" です。このプロパティは互換性ためだけに維持されています。</p> + +<div class="notecard note"> + <h4>メモ</h4> + <p>このプロパティが実際のブラウザー名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Netscape</code>" を返します。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><var>appName</var> = navigator.appName +</pre> + +<h3 id="Value">値</h3> + +<p>文字列 "<code>Netscape</code>" です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appCodeName")}}</li> + <li>{{domxref("Navigator.product")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/appversion/index.html b/files/ja/web/api/navigator/appversion/index.html new file mode 100644 index 0000000000..d3908733b7 --- /dev/null +++ b/files/ja/web/api/navigator/appversion/index.html @@ -0,0 +1,50 @@ +--- +title: Navigator.appVersion +slug: Web/API/Navigator/appVersion +tags: + - API + - Deprecated + - Navigator + - Property + - Reference + - appVersion +browser-compat: api.Navigator.appVersion +translation_of: Web/API/NavigatorID/appVersion +original_slug: Web/API/NavigatorID/appVersion +--- +<p>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</p> + +<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかを返します。</p> + +<div class="notecard note"> + <h4>メモ</h4> + <p>このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">window.navigator.appVersion +</pre> + +<h3 id="Returned_value">値</h3> + +<p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかです。</p> + +<h2 id="Example">例</h2> + +<pre class="brush: js">alert("このブラウザーのバージョンは " + navigator.appVersion + " と報告されています。"); +</pre> + +<h2 id="Notes">注</h2> + +<p><code>window.navigator.userAgent</code> プロパティもバージョン番号を含んでいる場合がありますが ("<code>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape 6/6.1</code>" など)、ユーザーエージェント文字列を変更したり、他のブラウザー、プラットフォーム、ユーザーエージェントに「偽装」したり、ブラウザーベンダー自身がこれらのプロパティに無頓着であったりすることを意識しておいてください。</p> + +<p><code>window.navigator.appVersion</code>, <code>window.navigator.appName</code>, <code>window.navigator.userAgent</code> の各プロパティは、「ブラウザー推定」 (browser sniffing) コード、すなわち使用しているブラウザーを検出し、それに従ってページを調整しようとするスクリプトで使われてきました。これにより、一部のウェブサイトから拒否されないようにするために、ブラウザーがこれらのプロパティで偽の情報を返さなければならないという現在の状況が発生したのです。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> diff --git a/files/ja/web/api/navigator/hardwareconcurrency/index.html b/files/ja/web/api/navigator/hardwareconcurrency/index.html new file mode 100644 index 0000000000..cd8a14f7ab --- /dev/null +++ b/files/ja/web/api/navigator/hardwareconcurrency/index.html @@ -0,0 +1,58 @@ +--- +title: Navigator.hardwareConcurrency +slug: Web/API/Navigator/hardwareConcurrency +tags: + - API + - HTML DOM + - Navigator + - Property + - hardwareConcurrency +browser-compat: api.Navigator.hardwareConcurrency +translation_of: Web/API/Navigator/hardwareConcurrency +original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><code><strong>navigator.hardwareConcurrency</strong></code> は読み取り専用のプロパティで、ユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサー数を返します。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency +</pre> + +<h2 id="Value">値</h2> + +<p>論理プロセッサーのコア数を示す数値です。</p> + +<p>現代のコンピューターは CPU に複数の物理プロセッサーのコアがあります (通常は 2 コアか 4 コア)。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて、一度に複数スレッドを実行することができます。 したがって、例えば 4 コアの CPU は 8 個の<strong>論理プロセッサーコア</strong>を提供することができます。論理プロセッサーのコア数は、コンテキスト切り替えを必要とせずに一度に効果的に実行できるスレッドの数を測定するために利用できます。</p> + +<p>しかしながら、ブラウザーはより少ない論理コア数を報告することを選択することで、一度に実行できる {{domxref("Worker")}} の数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。</p> + +<h2 id="Examples">例</h2> + +<p>この例では、ブラウザーが報告した論理プロセッサーごとに {{domxref("Worker")}} が 1 つ作られ、新しいワーカーへの参照と、そのワーカーをまだ使用しているかどうかを示す論理値の値を含むレコードを作っています。これらのオブジェクトは後で使用するために配列に順々に格納されています。後でリクエストを処理するために使うワーカーのプールを作っています。</p> + +<pre class="brush: js">let workerList = []; + +for (let i = 0; i < window.navigator.hardwareConcurrency; i++) { + let newWorker = { + worker: new Worker('cpuworker.js'), + inUse: false + }; + workerList.push(newWorker); +}</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator")}}</li> + <li>{{domxref("WorkerNavigator")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/language/index.html b/files/ja/web/api/navigator/language/index.html new file mode 100644 index 0000000000..2e42ca25b2 --- /dev/null +++ b/files/ja/web/api/navigator/language/index.html @@ -0,0 +1,50 @@ +--- +title: Navigator.language +slug: Web/API/Navigator/language +tags: + - API + - Language + - Navigator + - Property + - Read-only + - Reference +browser-compat: api.Navigator.language +translation_of: Web/API/Navigator/language +original_slug: Web/API/NavigatorLanguage/language +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>Navigator.language</code></strong> は読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">const <em>lang</em> = navigator.language +</pre> + +<h3 id="Value">値</h3> + +<p>{{domxref("DOMString")}} です。。<em><code>lang</code></em> は、<a class="external" href="https://tools.ietf.org/rfc/bcp/bcp47.txt">BCP 47</a> で定義された言語バージョンを表す文字列が格納されます。例えば、"en"、"en-US"、"fr"、"fr-FR"、"es-ES" などが含まれます。</p> + +<p>iOS 10.2 以前の Safari では、国コードは "en-us"、"fr-fr" のように小文字で返されます。</p> + +<h2 id="Example">例</h2> + +<pre class="brush: js">if (/^en\b/.test(navigator.language)) { + doLangSelect(window.navigator.language); +} +</pre> + +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("navigator.languages")}}</li> + <li>{{domxref("navigator")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/languages/index.html b/files/ja/web/api/navigator/languages/index.html new file mode 100644 index 0000000000..a621134a4e --- /dev/null +++ b/files/ja/web/api/navigator/languages/index.html @@ -0,0 +1,52 @@ +--- +title: Navigator.languages +slug: Web/API/Navigator/languages +tags: + - API + - Experimental + - Navigator + - Property + - Read-only + - Reference + - languages +browser-compat: api.Navigator.languages +translation_of: Web/API/Navigator/languages +original_slug: Web/API/NavigatorLanguage/languages +--- +<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> + +<p><code><strong>navigator.languages</strong></code> は読み取り専用プロパティで、ユーザーの推奨される言語を表す {{domxref("DOMString")}} の配列を返します。この言語は <a href="http://tools.ietf.org/html/bcp47">BCP 47</a> 言語タグを使用して記述されています。返された配列の中では、設定で最も推奨される言語が最初に来るように並べられています。</p> + +<p>{{domxref("Navigator.language","navigator.language")}} の値は返される配列の最初の要素です。</p> + +<p>この値を変更すると、ユーザーの推奨言語が変更され、 {{event("languagechange")}} イベントが {{domxref("Window")}} オブジェクトに発行されます。</p> + +<p>ユーザーのブラウザーからのすべての HTTP リクエストにある <code>Accept-Language</code> ヘッダーは、 <code>navigator.languages</code> プロパティと同じ値ですが、拡張された <code>qvalues</code> (quality values) フィールドのみが異なります (例えば <code>en-US;q=0.8</code>)。 +</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>preferredLanguages</em> = <em>globalObj</em>.navigator.languages +</pre> + +<h2 id="Examples">例</h2> + +<pre class="brush: js">navigator.language //"en-US" +navigator.languages //["en-US", "zh-CN", "ja-JP"] +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("navigator.language")}}</li> + <li>{{domxref("navigator")}}</li> + <li>{{domxref("Window.onlanguagechange")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/platform/index.html b/files/ja/web/api/navigator/platform/index.html new file mode 100644 index 0000000000..c0e4620269 --- /dev/null +++ b/files/ja/web/api/navigator/platform/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.platform +slug: Web/API/Navigator/platform +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference + - platform +browser-compat: api.Navigator.platform +translation_of: Web/API/NavigatorID/platform +original_slug: Web/API/NavigatorID/platform +--- +<p>{{ APIRef("HTML DOM") }} {{Deprecated_Header}}</p> + +<p>ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>platform</em> = navigator.platform +</pre> + +<h3 id="Value">値</h3> + +<p>ブラウザーを実行しているプラットフォームを識別する {{domxref("DOMString")}}、あるいはブラウザーがプラットフォームの識別を断わった (または識別できない) 場合は空文字列になります。<code>platform</code> は空文字列か、ブラウザーを実行しているプラットフォームを表す文字列でなければなりません。</p> + +<p>例: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</p> + +<h2 id="Example">例</h2> + +<pre class="brush: js">console.log(navigator.platform);</pre> + +<h2 id="Usage_notes">使用上のメモ</h2> + +<p>Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても <code>"Win32"</code> を返します。 Internet Explorer やバージョン 63 より前の Firefox は <code>"Win64"</code> を返します。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> diff --git a/files/ja/web/api/navigator/product/index.html b/files/ja/web/api/navigator/product/index.html new file mode 100644 index 0000000000..d1f5b35941 --- /dev/null +++ b/files/ja/web/api/navigator/product/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.product +slug: Web/API/Navigator/product +tags: + - API + - Deprecated + - Navigator + - Property + - Reference +browser-compat: api.Navigator.product +translation_of: Web/API/NavigatorID/product +original_slug: Web/API/NavigatorID/product +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.product</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Gecko</code>" です。このプロパティは互換性のためだけに維持されています。</p> + + +<div class="notecard note"> + <p>このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Gecko</code>" を返します。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>productName</em> = navigator.product +</pre> + +<h3 id="Value">値</h3> + +<p>文字列 "<code>Gecko</code>" です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appCodeName")}}</li> + <li>{{domxref("Navigator.appName")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/useragent/index.html b/files/ja/web/api/navigator/useragent/index.html new file mode 100644 index 0000000000..d02c88de43 --- /dev/null +++ b/files/ja/web/api/navigator/useragent/index.html @@ -0,0 +1,67 @@ +--- +title: Navigator.userAgent +slug: Web/API/Navigator/userAgent +tags: + - API + - Navigator + - Property + - Read-only + - Reference +browser-compat: api.Navigator.userAgent +translation_of: Web/API/NavigatorID/userAgent +original_slug: Web/API/NavigatorID/userAgent +--- +<p>{{ApiRef("HTML DOM")}}</p> + +<p><code><strong>NavigatorID.userAgent</strong></code> は読み取り専用のプロパティで、現在のブラウザーのユーザーエージェント文字列を返します。</p> + +<div class="note"> +<p>仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。<br> +<br> +また、ブラウザーのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。</p> +</div> + +<p>ユーザーエージェント文字列の検出に基づくブラウザーの識別は<strong>信頼性が低く</strong>、ユーザーエージェント文字列はユーザーが設定可能なので<strong>推奨されません</strong>。例えば、以下のようになります。</p> + +<ul> + <li>Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。</li> + <li>Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。</li> + <li>Microsoft Internet Explorer では、 Windows レジストリーを使用します。</li> + <li>Safari と iCab は、メニューから、ブラウザーユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。</li> +</ul> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">var <var>ua</var> = navigator.userAgent; +</pre> + +<h3 id="Value">値</h3> + +<p>{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。</p> + +<p>ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。</p> + +<pre class="brush: js">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; +Localization; rv: revision-version-number) product/productSub +Application-Name Application-Name-version +</pre> + +<h2 id="Example">例</h2> + +<pre class="brush:js">alert(window.navigator.userAgent) +// alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1" +</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{httpheader("User-Agent")}} HTTP ヘッダー</li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/origin/index.html b/files/ja/web/api/origin/index.html index 834af4741a..cf78260061 100644 --- a/files/ja/web/api/windoworworkerglobalscope/origin/index.html +++ b/files/ja/web/api/origin/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.origin -slug: Web/API/WindowOrWorkerGlobalScope/origin +slug: Web/API/origin tags: - API - DOM @@ -10,6 +10,7 @@ tags: - ウェブ - プロパティ translation_of: Web/API/WindowOrWorkerGlobalScope/origin +original_slug: Web/API/WindowOrWorkerGlobalScope/origin --- <p>{{APIRef()}}{{SeeCompatTable}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ja/web/api/setinterval/index.html index 543639410e..f6f721580b 100644 --- a/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html +++ b/files/ja/web/api/setinterval/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.setInterval() -slug: Web/API/WindowOrWorkerGlobalScope/setInterval +slug: Web/API/setInterval tags: - API - DOM @@ -14,6 +14,7 @@ tags: - WindowOrWorkerGlobalScope - setInterval translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ja/web/api/settimeout/index.html index 34c10664ce..865c4679a6 100644 --- a/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/ja/web/api/settimeout/index.html @@ -1,6 +1,6 @@ --- title: WindowOrWorkerGlobalScope.setTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/setTimeout +slug: Web/API/setTimeout tags: - API - HTML DOM @@ -16,6 +16,7 @@ tags: - WindowOrWorkerGlobalScope - setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ja/web/api/web_authentication_api/index.html b/files/ja/web/api/web_authentication_api/index.html index 5d4cf3d674..9ca6c16e84 100644 --- a/files/ja/web/api/web_authentication_api/index.html +++ b/files/ja/web/api/web_authentication_api/index.html @@ -70,7 +70,7 @@ translation_of: Web/API/Web_Authentication_API この保証には次の点を含む： <ol> <li>challenge が送信時と同じものであるかの確認</li> - <li>origin が期待された origin でとなっていることの保証</li> + <li>origin が期待された origin となっていることの保証</li> <li>clientDataHash の署名と特定モデルの認証器用の証明書チェーンを使った attestation の検証</li> </ol> 検証ステップの完全な一覧は <a href="https://w3c.github.io/webauthn/#registering-a-new-credential">WebAuthn の仕様書の中にあります</a>。 チェックが上手くいくと、サーバはユーザーアカウントに紐づいたその新しい公開鍵を保存し、将来の利用に備えます。つまりは、ユーザーが認証のためにその公開鍵を使いたい時は何時でも使えるようにするということです。</li> diff --git a/files/ja/web/api/xmlserializer/index.html b/files/ja/web/api/xmlserializer/index.html index 48bd19f8e5..1bae104f64 100644 --- a/files/ja/web/api/xmlserializer/index.html +++ b/files/ja/web/api/xmlserializer/index.html @@ -96,7 +96,7 @@ document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre> <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a href="/ja/Parsing_and_serializing_XML" title="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a href="/ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> <li>{{domxref("XMLHttpRequest")}}</li> <li>{{domxref("DOMParser")}}</li> </ul> diff --git a/files/ja/web/api/xrinputsource/handedness/index.html b/files/ja/web/api/xrinputsource/handedness/index.html index 55b2ef3fdb..4f9eb86d63 100644 --- a/files/ja/web/api/xrinputsource/handedness/index.html +++ b/files/ja/web/api/xrinputsource/handedness/index.html @@ -1,47 +1,59 @@ --- -title: XRInputSource.handedness +title: XRHandedness slug: Web/API/XRInputSource/handedness tags: - API - AR - - Controller + - Enum + - Enumerated Type - Handedness - - Input - - Property - - Read-only - Reference + - Type - VR - WebXR - - WebXR API - WebXR Device API - - XR - - XRInputSource + - XRHandedness - hand - left - right -translation_of: Web/API/XRInputSource/handedness +translation_of: Web/API/XRHandedness +original_slug: Web/API/XRHandedness --- -<p>{{APIRef("WebXR")}}{{securecontext_header}}</p> +<p>{{APIRef("WebXR")}}</p> -<p>{{domxref("XRInputSource")}} の <strong><code>handedness</code></strong> 読み取り専用プロパティは、WebXR 入力ソースがユーザーのどの手に関連付けられているか、またはまったく関連付けられていないかを示します。</p> +<p>WebXR の <strong><code>XRHandedness</code></strong> 列挙型は、使用している XR 入力デバイスに接続された特定の入力コントローラーを操作するために使用しているユーザーの手を識別する値を提供します。 <code>XRHandedness</code> は、{{domxref("XRInputSource")}} の {{domxref("XRInputSource.handedness", "handedness")}} プロパティの値として使用されます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Values" name="Values">値</h2> -<pre class="syntaxbox notranslate">let <em>hand</em> = <em>xrInputSource</em>.handedness;</pre> +<dl> + <dt><code>none</code></dt> + <dd>入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。</dd> + <dt><code>left</code></dt> + <dd>入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。</dd> + <dt><code>right</code></dt> + <dd>入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。</dd> +</dl> -<h3 id="Value" name="Value">値</h3> - -<p>入力コントローラーがユーザーの片方の手にあるかどうか、もしそうならどちらの手にあるかを示す {{domxref("DOMString")}}。 {{domxref("XRHandedness")}} 列挙型に由来する値は、次のいずれかです。</p> +<h2 id="Examples" name="Examples">例</h2> -<p>{{page("/ja/docs/Web/API/XRHandedness", "Values")}}</p> +<p><code>handedness</code> の重要な使用方法の1つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手（またはその手が制御しているデバイス）の表現を描画できるようにすることです。</p> -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.inputSources) { + if (source.gripSpace) { + let gripPose = frame.getPose(source.gripSpace, refSpace); -<p>入力ソースがユーザーの手に関連付けられたデバイスでない場合（握られているか、取り付けられているか、着用されているかに関係なく）、<code>handedness</code> の値は <code>none</code> です。 これは、例えば、ヘッドセットに組み込まれたコントロールや、頭や体に取り付けられた入力デバイスなど、ハンドヘルドではない入力ソースを示している場合があります。</p> + if (gripPose) { + myRenderHandObject(gripPose, inputSource.handedness); + } + } + } +} +</pre> -<h2 id="Examples" name="Examples">例</h2> +<p>この関数は、すべてのアニメーションフレーム（または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に）で呼ばれ、入力ソースのリストをスキャンして、<code>null</code> ではない {{domxref("XRInputSource.gripSpace", "gripSpace")}} を持つものを探します。 <code>gripSpace</code> が存在する場合、それは入力ソースが何らかのハンドヘルドデバイスであることを意味するため、可能であれば視覚的にレンダリングする必要があります。</p> -<p>{{page("/ja/docs/Web/API/XRHandedness", "Examples")}}</p> +<p><code>gripSpace</code> が <code>null</code> 以外の場合、この関数は、現在の参照空間に変換された <code>gripSpace</code> のポーズを取得します。 それが有効であると仮定すると、<code>myRenderHandObject()</code> と呼ばれる関数が、グリップのポーズと <code>handedness</code> の値を使用して呼び出されます。 これらの値が手元にあれば（しゃれは意図していません）、<code>myRenderHandObject()</code> は、正しい手のために配置および形成された適切なモデルを描画できます。</p> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -53,7 +65,7 @@ translation_of: Web/API/XRInputSource/handedness <th scope="col">コメント</th> </tr> <tr> - <td>{{SpecName('WebXR','#dom-xrinputsource-handedness','XRInputSource.handedness')}}</td> + <td>{{SpecName('WebXR','#enumdef-xrhandedness','XRHandedness')}}</td> <td>{{Spec2('WebXR')}}</td> <td>初期定義</td> </tr> @@ -62,7 +74,7 @@ translation_of: Web/API/XRInputSource/handedness <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.XRInputSource.handedness")}}</p> +<p>{{Compat("api.XRHandedness")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> @@ -70,4 +82,5 @@ translation_of: Web/API/XRInputSource/handedness <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> + <li>{{domxref("XREye")}}: ビューを表示する対象の目を示します</li> </ul> diff --git a/files/ja/web/api/xrinputsource/handedness/index.md b/files/ja/web/api/xrinputsource/handedness/index.md new file mode 100644 index 0000000000..31716b2ace --- /dev/null +++ b/files/ja/web/api/xrinputsource/handedness/index.md @@ -0,0 +1,84 @@ +--- +title: XRInputSource.handedness +slug: Web/API/XRInputSource/handedness +tags: + - API + - AR + - Controller + - Handedness + - Input + - Property + - Read-only + - Reference + - VR + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRInputSource + - hand + - left + - right +browser-compat: api.XRInputSource.handedness +translation_of: Web/API/XRInputSource/handedness +--- +{{APIRef("WebXR Device API")}} + +{{domxref("XRInputSource")}} の読み取り専用プロパティ **`handedness`** は、WebXR 入力ソースがユーザーのどの手に関連付けられているか、またはまったく関連付けられていないかを示します。 + +## 構文 + +```js +xrInputSource.handedness; +``` + +### 値 + +文字列で、入力コントローラーがユーザーの手に握られているかどうか、もしそうならばどちらの手なのかを表します。値は次のうちの一つです。 + +- `none` + - : 入力コントローラーは、ユーザーのいずれの手にも関連付けられていません。 +- `left` + - : 入力コントローラーは、ユーザーの左手に握られているか、着用されているか、取り付けられています。 +- `right` + - : 入力コントローラーは、ユーザーの右手に握られているか、着用されているか、取り付けられています。 + +## 使用上の注意 + +入力ソースがユーザーの手に関連付けられた機器でない場合 (握られているか、取り付けられているか、着用されているかに関係なく)、`handedness` の値は `none` です。 これは、例えば、ヘッドセットに組み込まれたコントロールや、頭や体に取り付けられた入力機器など、ハンドヘルドではない入力ソースを示している場合があります。 + +## 例 + +`handedness` の重要な使用方法の 1 つは、コントローラーがどちらの手にあるかを判別して、仮想空間でその手 (またはその手が制御している機器) の表現を描画できるようにすることです。 + +```js +function updateInputSources(session, frame, refSpace) { + for (let source of session.inputSources) { + if (source.gripSpace) { + let gripPose = frame.getPose(source.gripSpace, refSpace); + + if (gripPose) { + myRenderHandObject(gripPose, inputSource.handedness); + } + } + } +} +``` + +この関数は、すべてのアニメーションフレームで (または必要な滑らかさの程度とパフォーマンスの制約に応じて定期的に) 呼び出され、入力ソースのリストをスキャンして、 {{domxref("XRInputSource.gripSpace", "gripSpace")}} が `null` ではないものを探します。 `gripSpace` が存在する場合、それは入力ソースが何らかのハンドヘルド機器であることを意味するため、可能であれば視覚的にレンダリングする必要があります。 + +`gripSpace` が `null` 以外の場合、この関数は、現在の参照空間に変換された `gripSpace` のポーズを取得します。 それが有効であると仮定すると、`myRenderHandObject()` と呼ばれる関数が、グリップのポーズと `handedness` の値を使用して呼び出されます。 これらの値が手元にあれば (しゃれは意図していません)、正しい手のために配置および形成された適切なモデルを描画できます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) +- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads) diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.html b/files/ja/web/api/xrinputsource/targetraymode/index.html index 7a64b7a122..79ca557c89 100644 --- a/files/ja/web/api/xrinputsource/targetraymode/index.html +++ b/files/ja/web/api/xrinputsource/targetraymode/index.html @@ -1,47 +1,78 @@ --- -title: XRInputSource.targetRayMode +title: XRTargetRayMode slug: Web/API/XRInputSource/targetRayMode tags: + - 3D - API - AR - - Pointing - - Property - - Ray - - Read-only + - Enum + - Enumerated Type + - Input + - Reality - Reference + - Type - VR + - Virtual - WebXR - WebXR API - WebXR Device API - XR - - XRInputSource - - direction - - pointer + - XRTargetRayMode + - augmented + - source - target - - targetRayMode -translation_of: Web/API/XRInputSource/targetRayMode +translation_of: Web/API/XRTargetRayMode +original_slug: Web/API/XRTargetRayMode --- -<p>{{APIRef("WebXR")}}{{securecontext_header}}</p> +<p>{{APIRef("WebXR")}}</p> -<p>{{domxref("XRInputSource")}} の <strong><code>targetRayMode</code></strong> 読み取り専用プロパティは、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。</p> +<p><span class="seoSummary"><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a> の <strong><code>XRTargetRayMode</code></strong> 列挙型は、入力コントローラーのターゲティング光線を生成する方法を記述します。</span> ターゲティングは、視線追跡システムを使用してターゲットを見るか、ハンドコントローラー、グローブ、またはモーショントラッキングシステムを使用してターゲットを指すか、画面上で指やマウスを使用してターゲットをタップまたはクリックすることによって行うことができます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<p>通常、<strong>ターゲット光線</strong>は、ターゲティングシステムのソースから、ユーザーが見ている方向または指している方向にターゲット光線に沿って描画されます。 光線の終点を示す方法と同様に、光線のスタイルは一般的にあなた次第です。 ターゲットとなる点またはオブジェクトは、図形を描画するか、ターゲットとなる表面またはオブジェクトを強調表示することによって示される場合があります。</p> -<pre class="syntaxbox notranslate">let <em>rayMode</em> = <em>xrInputSource</em>.targetRayMode;</pre> +<div style="width: 42em;"> +<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;"> +<figcaption><strong>ハンドコントローラーから放出されるターゲット光線。</strong></figcaption> +<img alt="ハンドコントローラーから放出されるターゲット光線を示すスクリーンショット" src="https://mdn.mozillademos.org/files/17089/example-target-ray.gif" style="width: 100%;"></figure> +</div> -<h3 id="Value" name="Value">値</h3> +<p>ターゲット光線は、単純な線（理想的には距離とともにフェードする）から、上のスクリーンショットに示されているサイエンスフィクションの「フェイザー」スタイルなどのアニメーション効果まで、何でもかまいません。</p> -<p>{{domxref("XRTargetRayMode")}} 列挙型から取得した {{domxref("DOMString")}}。 ターゲット光線を生成してユーザーに提示するときに使用する方法を示します。 可能な値は次のとおりです。</p> +<h2 id="Values" name="Values">値</h2> -<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Values")}}</p> +<dl> + <dt><code>gaze</code>（視線）</dt> + <dd>ユーザーは、ユーザーが見ている方向を検出する視線追跡システム（または<strong>視線入力</strong>）を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。</dd> + <dt><code>screen</code>（画面）</dt> + <dd>ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力デバイスをタップして示します。</dd> + <dt><code>tracked-pointer</code>（追跡ポインター）</dt> + <dd>ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルドデバイスまたはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手（または手の中のオブジェクト）からターゲット方向に伸びます。 方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。</dd> +</dl> -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> +<h2 id="Examples" name="Examples">例</h2> -<p>入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。</p> +<p>このコードの断片は、フレームごとに1回呼び出される関数の一部を示しています。 <code>null</code> 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。</p> -<h2 id="Example" name="Example">例</h2> +<p>このような入力ごとに、この例では、{{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が <code>tracked-pointer</code> である入力を探します。 これは、入力が実際には、視線入力デバイス、画面タップ、またはマウスクリックではなく、ターゲティングデバイスを表すことを目的としていることを示しています。 追跡ポインターの場合、関数 <code>myRenderTargetRayAsBeam()</code> が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。</p> -<p>{{page("/ja/docs/Web/API/XRTargetRayMode", "Examples")}}</p> +<p>コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。</p> + +<pre class="brush: js notranslate">function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +</pre> + +<p>詳細とより完全な例については、<a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a>の記事を参照してください。</p> <h2 id="Specifications" name="Specifications">仕様</h2> @@ -53,7 +84,7 @@ translation_of: Web/API/XRInputSource/targetRayMode <th scope="col">コメント</th> </tr> <tr> - <td>{{SpecName('WebXR','#dom-xrinputsource-targetraymode','XRInputSource.handedness')}}</td> + <td>{{SpecName('WebXR','#enumdef-xrtargetraymode','XRTargetRayMode')}}</td> <td>{{Spec2('WebXR')}}</td> <td>初期定義</td> </tr> @@ -62,12 +93,11 @@ translation_of: Web/API/XRInputSource/targetRayMode <h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.XRInputSource.handedness")}}</p> +<p>{{Compat("api.XRTargetRayMode")}}</p> <h2 id="See_also" name="See_also">関連情報</h2> <ul> <li><a href="/ja/docs/Web/API/WebXR_Device_API">WebXR Device API</a></li> <li><a href="/ja/docs/Web/API/WebXR_Device_API/Inputs">入力と入力ソース</a></li> - <li><a href="/ja/docs/Web/WebXR%20Device%20API/Gamepads">WebXR アプリケーションでのゲームパッドの使用</a></li> </ul> diff --git a/files/ja/web/api/xrinputsource/targetraymode/index.md b/files/ja/web/api/xrinputsource/targetraymode/index.md new file mode 100644 index 0000000000..d21d4c82bd --- /dev/null +++ b/files/ja/web/api/xrinputsource/targetraymode/index.md @@ -0,0 +1,95 @@ +--- +title: XRInputSource.targetRayMode +slug: Web/API/XRInputSource/targetRayMode +tags: + - API + - AR + - Pointing + - Property + - Ray + - Read-only + - Reference + - VR + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRInputSource + - direction + - pointer + - target + - targetRayMode +translation_of: Web/API/XRInputSource/targetRayMode +--- +{{APIRef("WebXR Device API")}} + +{{domxref("XRInputSource")}} の読み取り専用プロパティ **`targetRayMode`** は、入力ソースのターゲット光線を生成する方法と、それをユーザーに提示する方法を示します。 + +一般的には、ターゲティングシステムのソースから、ユーザーが見ている、または指している方向のターゲット光線に沿って、ターゲット光線が描かれます。光線のスタイルは一般的に自由で、光線の終点を示す方法も自由です。ターゲットとなるポイントやオブジェクトは、図形を描いたり、ターゲットとなる表面やオブジェクトをハイライトすることで示されるかもしれません。 + +ターゲット光線はハンドコントローラーが影響します。 + + + +ターゲット光線は、単純な線 (理想的には距離に応じて消えていく) から、上のスクリーンショットにあるような SF の「フェイザー」スタイルのようなアニメーション効果まで、さまざまなものがあります。 + +## 構文 + +```js +let rayMode = xrInputSource.targetRayMode; +``` + +### 値 + +ターゲット光線を生成してユーザーに提示する際に、どの方法を使用するかを示す文字列です。指定できる値は次の通りです。 + +- `gaze` (視線) + - : ユーザーは、ユーザーが見ている方向を検出する視線追跡システム (または**視線入力**) を使用しています。 ターゲット光線は、ビューアーの目を起点として描画され、ビューアーが見ている方向に追従します。 +- `screen` (画面) + - : ターゲット光線の方向は、タッチスクリーン、マウス、またはその他の触覚入力機器をタップして示します。 +- `tracked-pointer` (追跡ポインター) + - : ターゲティングは、ユーザーがターゲットの方向に向けるハンドヘルド機器またはハンドトラッキングシステムを使用して行われます。 ターゲット光線は、手 (または手の中のオブジェクト) からターゲット方向に伸びます。方向はプラットフォーム固有のルールを使用して決定されますが、そのようなルールが存在しない場合は、ユーザーが人差し指を手からまっすぐに向けていると仮定して方向が選択されます。 + +## 使用上の注意 + +入力ソースの {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} は、ターゲット光線の位置と向きを示し、光線をレンダリングする場所を決定するために使用できます。 + +## 例 + +このコードの断片は、フレームごとに 1 回呼び出される関数の一部を示しています。 `null` 以外の {{domxref("XRInputSource.targetRaySpace", "targetRaySpace")}} を持つ入力を探します。 このプロパティの値を持つ入力は、ターゲット光線をユーザーから外側に投影する入力を表します。 + +このような入力ごとに、この例では、 {{domxref("XRInputSource.targetRayMode", "targetRayMode")}} が `tracked-pointer` である入力を探します。 これは、入力が実際には、視線入力機器、画面タップ、またはマウスクリックではなく、ターゲティング機器を表すことを目的としていることを示しています。 追跡ポインターの場合、関数 `myRenderTargetRayAsBeam()` が呼び出され、入力コントローラーの仮想位置から、それが指している方向に外側にビームをレンダリングします。 + +コードは、仮想空間でのユーザーの手の位置を表すコントローラーや任意のオブジェクトの描画、その他の入力関連のタスクなどを引き続き実行する必要があります。 + +```js +function updateInputSources(session, frame, refSpace) { + for (let source of session.getInputSources()) { + let targetRayPose = frame.getPose(inputSource.targetRaySpace, refSpace); + + if (targetRayPose) { + if (source.targetRayMode == "tracked-pointer") { + myRenderTargetRayAsBeam(targetRayPose); + } + } + + /* ... */ + } +} +``` + +詳細とより完全な例については、[入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs)の記事を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [WebXR Device API](/ja/docs/Web/API/WebXR_Device_API) +- [入力と入力ソース](/ja/docs/Web/API/WebXR_Device_API/Inputs) +- [WebXR アプリケーションでのゲームパッドの使用](/ja/docs/Web/WebXR%20Device%20API/Gamepads) diff --git a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html deleted file mode 100644 index f34df48467..0000000000 --- a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: XRReferenceSpaceEvent() -slug: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent -tags: - - API - - AR - - Constructor - - Mixed - - Reality - - Reference - - Reference Space - - VR - - Virtual - - WebXR - - WebXR API - - WebXR Device API - - XR - - XRReferenceSpaceEvent - - augmented - - events -translation_of: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent ---- -<p>{{APIRef("WebXR Device API")}}{{SecureContext_header}}</p> - -<p><span class="seoSummary"><strong><code>XRReferenceSpaceEvent()</code></strong> コンストラクターは、新しい {{domxref("XRReferenceSpaceEvent")}} オブジェクトを作成するために使用します。 これは、WebXR 参照空間オブジェクト {{domxref("XRReferenceSpace")}} の状態に関するイベントを表します。</span></p> - -<p>現在、この型を使用して定義されているのは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">let <em>refSpaceEvent</em> = new XRReferenceSpaceEvent(<em>type</em>, <em>eventInitDict</em>);</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>type</code></dt> - <dd>発生したイベントタイプを示す {{domxref("DOMString")}}。 現在、これは常に <code>reset</code> です。</dd> - <dt><code>eventInitDict</code></dt> - <dd> - <p>{{domxref("XRReferenceSpaceEventInit")}} ディクショナリーに基づくオブジェクトで、新しいイベントオブジェクトの初期化に使用されるデータが含まれています。 このオブジェクトのプロパティは次のとおりです。</p> - - <p>{{page("/ja/docs/Web/API/XRReferenceSpaceEventInit", "Properties")}}</p> - </dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>入力パラメーターで定義されたとおりに初期化された、新しい <code>XRReferenceSpaceEvent</code> オブジェクト。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('WebXR','#dom-xrreferencespaceevent-xrreferencespaceevent','XRReferenceSpaceEvent()')}}</td> - <td>{{Spec2('WebXR')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - -<p>{{Compat("api.XRReferenceSpaceEvent.XRReferenceSpaceEvent")}}</p> diff --git a/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md new file mode 100644 index 0000000000..580e48274e --- /dev/null +++ b/files/ja/web/api/xrreferencespaceevent/xrreferencespaceevent/index.md @@ -0,0 +1,69 @@ +--- +title: XRReferenceSpaceEvent() +slug: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent +tags: + - API + - AR + - Constructor + - Events + - Mixed + - Reality + - Reference + - Reference Space + - VR + - Virtual + - WebXR + - WebXR API + - WebXR Device API + - XR + - XRReferenceSpaceEvent + - augmented + - events +browser-compat: api.XRReferenceSpaceEvent.XRReferenceSpaceEvent +translation_of: Web/API/XRReferenceSpaceEvent/XRReferenceSpaceEvent +--- +{{APIRef("WebXR Device API")}} + +**`XRReferenceSpaceEvent()`** コンストラクターは、新しい {{domxref("XRReferenceSpaceEvent")}} オブジェクトを生成するために使用します。 これは、WebXR 参照空間オブジェクト {{domxref("XRReferenceSpace")}} の状態に関するイベントを表します。 + +この型を使用して定義されているのは {{domxref("XRReferenceSpace.reset_event", "reset")}} イベントのみです。 + +## 構文 + +```js +let refSpaceEvent = new XRReferenceSpaceEvent(type, eventInitDict); +``` + +### 引数 + +- `type` + - : 発生したイベントタイプを示す {{domxref("DOMString")}}。 現在、これは常に `reset` です。 +- `eventInitDict` + + - : イベントを構成するためのオブジェクトです。プロパティは次のとおりです。 + + - `referenceSpace`: イベントの発生元の {{domxref("XRReferenceSpace")}} です。 + - `transform`: 古い座標系（このイベントによって示される変更の前のもの）を新しい座標系にマップする {{domxref("XRRigidTransform")}} です。 + +### 返値 + +入力引数で定義されたとおりに初期化された、新しい `XRReferenceSpaceEvent` オブジェクト。 + +## 例 + +この単純なスニペットでは、コンストラクターを呼び出して {{domxref("XRReferenceSpace.reset_event", "reset")}} 型の新しい参照空間イベントを生成します。 + +```js +let refSpaceEvent = new XRReferenceSpaceEvent("reset", { + referenceSpace: myRefSpace, + transform: myTransform +}); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} |