diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/windoworworkerglobalscope | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/api/windoworworkerglobalscope')
10 files changed, 1984 insertions, 0 deletions
diff --git a/files/ja/web/api/windoworworkerglobalscope/btoa/index.html b/files/ja/web/api/windoworworkerglobalscope/btoa/index.html new file mode 100644 index 0000000000..e3137ea81a --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/btoa/index.html @@ -0,0 +1,146 @@ +--- +title: WindowOrWorkerGlobalScope.btoa() +slug: Web/API/WindowOrWorkerGlobalScope/btoa +tags: + - API + - HTML DOM + - Method + - Reference + - Web + - WindowOrWorkerGlobalScope + - btoa + - data + - strings +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><code><strong>WindowOrWorkerGlobalScope.btoa()</strong></code> メソッドは、 {{glossary("Base64")}} でエンコードされた ASCII 文字列を<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a> (例えば {{jsxref("String")}} オブジェクトのうち、文字列中のすべての文字がバイナリデータのバイトとして扱うことができるもの) から生成します。</p> + +<p>このメソッドを使用すると、通信に支障をきたす可能性のあるデータをエンコードして送信し、その後 {{domxref("WindowOrWorkerGlobalScope.atob", "atob()")}} メソッドを使用して再度デコードすることができます。例えば ASCII で 0 から 31 の値ような制御文字をエンコードすることもできます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>encodedData</var> = <var>scope</var>.btoa(<var>stringToEncode</var>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>stringToEncode</var></code></dt> + <dd>エンコードする<a href="/ja/docs/Web/API/DOMString/Binary">バイナリ文字列</a>です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code><var>stringToEncode</var></code> の Base64 表現である ASCII 文字列です。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>InvalidCharacterError</code></dt> + <dd>文字列には、1 バイトに収まらない文字が含まれていた場合。詳細は後述の「Unicode文字列」を参照してください。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js notranslate">const encodedData = window.btoa('Hello, world'); // 文字列をエンコード +const decodedData = window.atob(encodedData); // 文字列をデコード +</pre> + +<h2 id="Unicode_Strings" name="Unicode_Strings">Unicode 文字列</h2> + +<p><code>btoa()</code> 関数は、JavaScript の文字列を引数にとります。JavaScript の文字列は UTF-16 文字エンコーディングで表現されます。このエンコーディングでは、文字列は 16 ビット (2 バイト) 単位の並びとして表現されます。すべての ASCII 文字はこれらの単位の 1 バイト目に収まりますが、他の多くの文字は収まりません。</p> + +<p>Base64 は、設計上、バイナリデータを入力として期待します。 JavaScript の文字列では、これは各文字が 1 バイトしか占有しない文字列を意味します。したがって、2 バイト以上の文字を含む文字列を <code>btoa()</code> に渡した場合、これはバイナリデータとはみなされないため、エラーが発生します。</p> + +<pre class="brush: js notranslate">const ok = "a"; +console.log(ok.codePointAt(0).toString(16)); // 61: 長さ < 1 バイト + +const notOK = "✓" +console.log(notOK.codePointAt(0).toString(16)); // 2713: 長さ > 1 バイト + +console.log(btoa(ok)); // YQ== +console.log(btoa(notOK)); // error</pre> + +<p><code>btoa()</code> を用いて Unicode テキストを ASCII としてエンコードする必要がある場合、一つの選択肢として、各 16 ビット単位が 1 バイトしか占有しないように文字列を変換することができます。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">// Unicode 文字列で、各 16 ビット単位を 1 バイトしか占有 +// しない文字列に変換します。 +function toBinary(string) { + const codeUnits = new Uint16Array(string.length); + for (let i = 0; i < codeUnits.length; i++) { + codeUnits[i] = string.charCodeAt(i); + } + return String.fromCharCode(...new Uint8Array(codeUnits.buffer)); +} + +// 1 バイトを超える文字を含んだ文字列 +const myString = "☸☹☺☻☼☾☿"; + +const converted = toBinary(myString); +const encoded = btoa(converted); +console.log(encoded); // OCY5JjomOyY8Jj4mPyY= +</pre> + +<p>このようにした場合、当然ながらデコードされた文字列を逆変換する必要があります。</p> + +<pre class="brush: js language-js notranslate">function fromBinary(binary) { + const bytes = new Uint8Array(binary.length); + for (let i = 0; i < bytes.length; i++) { + bytes[i] = binary.charCodeAt(i); + } + return String.fromCharCode(...new Uint16Array(bytes.buffer)); +} + +const decoded = atob(encoded); +const original = fromBinary(decoded); +console.log(original); // ☸☹☺☻☼☾☿ +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>対応していないブラウザーでは、 <a href="https://github.com/MaxArt2501/base64-js/blob/master/base64.js">https://github.com/MaxArt2501/base64-js/blob/master/base64.js</a> のポリフィルを利用することができます。</p> + +<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('HTML WHATWG', '#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 <code>WindowBase64</code> の作成 (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性表は構造化データから作成されています。データに協力したい場合は、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data</code> URI</a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html new file mode 100644 index 0000000000..20192499cd --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -0,0 +1,102 @@ +--- +title: WindowOrWorkerGlobalScope.clearTimeout() +slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout +tags: + - API + - HTML DOM + - Method + - Reference + - WindowOrWorkerGlobalScope + - clearTimeout + - メソッド + - リファレンス +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>clearTimeout()</code></strong> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、以前の {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} の呼び出しによって以前に確立されたタイムアウトを解除します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>scope</em>.clearTimeout(<em>timeoutID</em>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><em>timeoutID</em></code></dt> + <dd>解除したいタイマの ID です。 ID は <code>setTimeout()</code> の返値によって取得できます。</dd> +</dl> + +<p>注目すべきは、 {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} および {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} で使用される ID のプールは共有されますので、技術的には <code>clearTimeout()</code> および {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} は互いに交換できます。しかし、明確化のため、そのようなことは避けてください。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>ウェブページのコンテキストで以下のスクリプトを実行し、ページを一度クリックしてください。１秒後にメッセージがポップアップします。１秒間に複数回ページをクリックしても、アラートは一度しか表示されません。</p> + +<pre class="brush: js">var alarm = { + remind: function(aMessage) { + alert(aMessage); + this.timeoutID = undefined; + }, + + setup: function() { + if (typeof this.timeoutID === 'number') { + this.cancel(); + } + + this.timeoutID = window.setTimeout(function(msg) { + this.remind(msg); + }.bind(this), 1000, 'Wake up!'); + }, + + cancel: function() { + window.clearTimeout(this.timeoutID); + } +}; +window.onclick = function() { alarm.setup(); }; +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p><code>clearTimeout()</code> へ妥当ではない ID を渡しても、何の効果もありません。例外は発生しません。</p> + +<h2 id="Specification" name="Specification">仕様書</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('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'WindowOrWorkerGlobalScope.clearTimeout()')}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-cleartimeout', 'clearTimeout()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性表は構造化データから作成されています。データに協力したい場合は、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.clearTimeout")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</li> + <li>{{domxref("Window.requestAnimationFrame()")}}</li> + <li><a href="/ja/docs/JavaScript/Timers/Daemons" title="JavaScript/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html new file mode 100644 index 0000000000..2a874a5992 --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/createimagebitmap/index.html @@ -0,0 +1,105 @@ +--- +title: self.createImageBitmap() +slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +tags: + - API + - Canvas + - DOM + - createImageBitmap +translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +--- +<div>{{APIRef("Canvas API")}}</div> + +<p><code><strong>createImageBitmap()</strong></code> メソッドは、指定されたソースからビットマップを作成します。このメソッドは、windows と worker の両方のグローバルスコープに存在します。このメソッドは、さまざまな異なる画像ソースを受け付け、{{domxref("Promise")}} を返し、{{domxref("ImageBitmap")}} に解決します。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">const imageBitmapPromise = createImageBitmap(<em>image</em>[, options]); +const imageBitmapPromise = createImageBitmap(<em>image, sx, sy, sw, sh</em>[, options]);</pre> + +<h3 id="パラメータ">パラメータ</h3> + +<dl> + <dt><code>image</code></dt> + <dd>画像ソースで {{HTMLElement("img")}}、SVG {{SVGElement("image")}}、{{HTMLElement("video")}}、{{HTMLElement("canvas")}}、{{domxref("HTMLImageElement")}}、{{domxref("SVGImageElement")}}、{{domxref("HTMLVideoElement")}}、{{domxref("HTMLCanvasElement")}}、{{domxref("Blob")}}、{{domxref("ImageData")}}、{{domxref("ImageBitmap")}} または {{domxref("OffscreenCanvas")}} オブジェクトのいずれかになります。</dd> + <dt><code>sx</code></dt> + <dd><code>ImageBitmap</code> が抽出される矩形の参照点の x 座標。</dd> + <dt><code>sy</code></dt> + <dd><code>ImageBitmap</code> が抽出される矩形の参照点の y 座標。</dd> + <dt><code>sw</code></dt> + <dd><code>ImageBitmap</code> が抽出される矩形の幅。この値は負の値にすることができます。</dd> + <dt><code>sh</code></dt> + <dd><code>ImageBitmap</code> が抽出される矩形の高さ。この値は負の値にすることができます。</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>画像の抽出のためのオプションを設定するオブジェクト。利用可能なオプションは以下の通りです。 + <ul> + <li><code>imageOrientation</code>: 画像をそのまま表示するか、垂直方向に反転させて表示するかを指定します。<code>none</code> (デフォルト) または <code>flipY</code> のいずれかを指定します</li> + <li><code>premultiplyAlpha</code>: ビットマップのカラーチャンネルをアルファチャンネルで前置増幅するかどうかを指定します。<code>none</code>、<code>premultiply</code>、<code>default</code> (デフォルト) のいずれかです</li> + <li><code>colorSpaceConversion</code>: 画像を色空間変換でデコードするかどうかを指定します。<code>none</code> または <code>default</code> (デフォルト) のいずれかを指定します。値 <code>default</code> は、実装固有の動作を使用することを示します</li> + <li><code>resizeWidth</code>: 出力幅を示す long 整数</li> + <li><code>resizeHeight</code>: 出力の高さを示す long 整数</li> + <li><code>resizeQuality</code>: 出力寸法に合わせて入力のサイズを変更するために使用するアルゴリズムを指定します。<code>pixelated</code>、<code>low</code> (デフォルト)、<code>medium</code>、<code>high</code>のいずれかです</li> + </ul> + </dd> +</dl> + +<h3 id="戻り値">戻り値</h3> + +<p>与えられた矩形のビットマップデータを含む{{domxref("ImageBitmap")}} オブジェクトに解決する{{domxref("Promise")}} を返します。</p> + +<h2 id="例">例</h2> + +<h3 id="スプライトシートからのスプライト作成">スプライトシートからのスプライト作成</h3> + +<p>この例では、スプライトシートをロードし、個々のスプライトを抽出し、各スプライトをキャンバスにレンダリングします。スプライトシートとは、複数の小さな画像を含む画像で、それぞれを個別にレンダリングできるようにしたいものです。</p> + +<pre class="brush: js language-js notranslate">var canvas = document.getElementById('myCanvas'), +ctx = canvas.getContext('2d'), +image = new Image(); + +// スプライトシートがロードされるのを待ちます +image.onload = function() { + Promise.all([ + // スプライトシートから2つのスプライトを切り取ります + createImageBitmap(image, 0, 0, 32, 32), + createImageBitmap(image, 32, 0, 32, 32) + ]).then(function(sprites) { + // 各スプライトをキャンバスに描きます + ctx.drawImage(sprites[0], 0, 0); + ctx.drawImage(sprites[1], 32, 32); + }); +} + +// 画像ファイルからスプライトシートを読み込みます +image.src = 'sprites.png'; +</pre> + +<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('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D.drawImage()")}}</li> + <li>{{domxref("ImageData")}}</li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/fetch/index.html b/files/ja/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..429fea889d --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,193 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +tags: + - API + - Experimental + - Fetch + - Fetch API + - GlobalFetch + - Method + - Reference + - WindowOrWorkerGlobalScope + - request + - メソッド +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +<p>{{APIRef("Fetch API")}}</p> + +<p><span class="seoSummary"><code><strong>fetch()</strong></code> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッドで、ネットワークからリソースを取得するプロセスを開始し、レスポンスが利用できるようになったら満足するプロミスを返します。</span>このプロミスはリクエストに対するレスポンスを表す {{domxref("Response")}} で解決します。プロミスは HTTP エラーでは拒否されず、ネットワークエラーでのみ拒否されます。 HTTP エラーをチェックするには、 <code>then</code> ハンドラーを使用する必要があります。</p> + +<p><code>WindowOrWorkerGlobalScope</code> は {{domxref("Window")}} と {{domxref("WorkerGlobalScope")}} の両方で実装されています。これはつまり <code>fetch()</code> メソッドはあなたがリソースを取得したいと思うような大部分コンテキストで使用可能ということです。</p> + +<p>{{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスはネットワークエラーが発生した場合 (すなわち普通はパーミッション問題などがあったとき) のみ拒否されます。 {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} のプロミスは HTTP エラー (<code>404</code> など) では拒否<em>されません</em>。代わりに、 <code>then()</code> ハンドラーで {{domxref("Response.ok")}} や {{domxref("Response.status")}} プロパティをチェックする必要があります。</p> + +<p><code>fetch()</code> メソッドは取得するリソースのディレクティブではなく <a href="/ja/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> の <code>connect-src</code> ディレクティブによって制御されます。</p> + +<div class="note"> +<p><strong>注</strong>: <code>fetch()</code> メソッドの引数は {{domxref("Request.Request","Request()")}} コンストラクターと全く同じです。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">const <var>fetchResponsePromise</var> = fetch(<var>resource</var> [, <var>init</var>]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>resource</var></code></dt> + <dd>取得したいリソースを定義します。以下の 2 つが使用出来ます。 + <ul> + <li>取得したいリソースの直接の URL を含む {{domxref("USVString")}}。ブラウザーによってはスキームとして <code>blob:</code> と <code>data:</code> を受け入れます。</li> + <li>{{domxref("Request")}} オブジェクト。</li> + </ul> + </dd> + <dt><code><var>init</var></code> {{optional_inline}}</dt> + <dd> + <p>リクエストに適用したいカスタム設定を含むオブジェクト。可能なオプションは以下の通りです。</p> + + <dl> + <dt><code>method</code></dt> + <dd>リクエストするメソッド、<code>GET</code>、<code>POST</code> など。なお、 {{httpheader("Origin")}} ヘッダーは {{HTTPMethod("HEAD")}} または {{HTTPMethod("GET")}} メソッドの読み取りリクエストでは設定されません。<br> + (この動作は Firefox 65 で修正されました — {{bug(1508661)}} を参照)</dd> + <dt><code>headers</code></dt> + <dd>リクエストに追加したいヘッダーで、{{domxref("Headers")}} オブジェクトか {{domxref("ByteString")}} 値を持つオブジェクトリテラルで指定してください。なお、<a href="/ja/docs/Glossary/Forbidden_header_name">一部の名前は禁止されています</a>。</dd> + <dt><code>body</code></dt> + <dd>リクエストに追加したい本文です。これには {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトなどが使用できます。メソッドが <code>GET</code> や <code>HEAD</code> の場合使用できないので注意してください。</dd> + <dt><code>mode</code></dt> + <dd>リクエストで使いたいモードです。例: <code>cors</code>, <code>no-cors</code>, <code>same-origin</code></dd> + <dt><code>credentials</code></dt> + <dd>リクエストに使用したいリクエスト認証情報、 <code>omit</code>, <code>same-origin</code>, <code>include</code> です。現在のドメインの Cookie を自動で送るためにはこのオプションを指定する必要があります。 Chrome 50 から、このプロパティは{{domxref("FederatedCredential")}} インスタンスや {{domxref("PasswordCredential")}} インスタンスを受け付けるようになりました。</dd> + <dt><code>cache</code></dt> + <dd>使用したいリクエストの<a href="/ja/docs/Web/API/Request/cache">キャッシュモード</a>です。</dd> + <dt><code>redirect</code></dt> + <dd>使用するリダイレクトモードです。 <code>follow</code> (自動でリダイレクトに従う)、 <code>error</code> (リダイレクトが起こった場合エラーを伴って中止する)、 <code>manual</code> (手動でリダイレクトを処理する)。Chrome の既定値は <code>follow</code> です (バージョン 47 より前の既定値は <code>manual</code> でした)。</dd> + <dt><code>referrer</code></dt> + <dd>{{domxref("USVString")}} でリクエストのリファラーを指定します。これは同じオリジンの URL、 <code>about:client</code>、空文字列のいずれかを取ることができます。</dd> + <dt><code>referrerPolicy</code></dt> + <dd>リクエストで使用する<a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policies">リファラーポリシー</a>を指定します。使用可能な値は、 <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>same-origin</code>, <code>origin</code>, <code>strict-origin</code>, <code>origin-when-cross-origin</code>, <code>strict-origin-when-cross-origin</code>, or <code>unsafe-url</code> のいずれかです。</dd> + <dt><code>integrity</code></dt> + <dd>リソースに <a href="/ja/docs/Web/Security/Subresource_Integrity">subresource integrity</a> 値を含ませることが出来ます (例：<code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>)。</dd> + <dt><code>keepalive</code></dt> + <dd><code>keepalive</code> オプションはページより長生きするリクエストを許可するのに使われます。<code>keepalive</code> フラグつきの Fetch は{{domxref("Navigator.sendBeacon()")}} API の置き換えです。</dd> + <dt><code>signal</code></dt> + <dd>{{domxref("AbortSignal")}} オブジェクトのインスタンスです。つまり {{domxref("AbortController")}} 経由で fetch リクエストと通信したり望む場合には中止したりできます。</dd> + </dl> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{domxref("Promise")}} で、 {{domxref("Response")}} オブジェクトに解決します。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>AbortError</code></dt> + <dd>{{domxref("AbortController")}} メソッドまたは {{domxref("AbortController.abort", "abort()")}} メソッドの呼び出しによりリクエストが中止された。</dd> + <dt><code>TypeError</code></dt> + <dd>指定された URL がユーザー認証情報を含んでいる。この情報は {{HTTPHeader("Authorization")}} ヘッダーを用いて提供するべきです。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p><a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Fetch Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-request/">Fetch Request live</a>) では {{domxref("Request")}} オブジェクトを関連するコンストラクターを使って作成しています。その後 <code>fetch()</code> を呼んで取得しています。画像を fetch している時から適切な MIME タイプを与えるために response の {{domxref("Body.blob")}} を実行し、適切に処理されます。そして ObjectURL を作成し {{htmlelement("img")}} 要素に追加して表示させています。</p> + +<pre class="brush: js notranslate">const myImage = document.querySelector('img'); + +let myRequest = new Request('flowers.jpg'); + +fetch(myRequest) +.then(function(response) { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.blob(); +}) +.then(function(response) { + let objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p><a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request/index.html">Fetch with init then Request example</a> リポジトリ (デモ: <a href="https://mdn.github.io/fetch-examples/fetch-with-init-then-request/">Fetch Request init live</a>) では上記の内容に加えて、<code>fetch()</code> を呼び出すとき、初期化オブジェクト <code><var>init</var></code> を渡しています。</p> + +<pre class="brush: js notranslate">const myImage = document.querySelector('img'); + +let myHeaders = new Headers(); +myHeaders.append('Content-Type', 'image/jpeg'); + +const myInit = { + method: 'GET', + headers: myHeaders, + mode: 'cors', + cache: 'default' +}; + +let myRequest = new Request('flowers.jpg'); + +fetch(myRequest, myInit).then(function(response) { + // ... +});</pre> + +<p>同様に <code><var>init</var></code> オブジェクトを <code>Request</code> コンストラクターに渡しても、同じ効果が得られます。</p> + +<pre class="brush: js notranslate">let myRequest = new Request('flowers.jpg', myInit);</pre> + +<p><code><var>init</var></code> の <code><var>init</var></code> としてオブジェクトリテラルを使用することもできます。</p> + +<pre class="brush: js notranslate">const myInit = { + method: 'GET', + headers: { + 'Content-Type': 'image/jpeg' + }, + mode: 'cors', + cache: 'default' +}; + +let myRequest = new Request('flowers.jpg', myInit); +</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('Fetch','#fetch-method','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>最新の仕様では <code>WindowOrWorkerGlobalScope</code> の中で部分的に定義。</td> + </tr> + <tr> + <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('Credential Management')}}</td> + <td>{{Spec2('Credential Management')}}</td> + <td>{{domxref("FederatedCredential")}} または {{domxref("PasswordCredential")}} のインスタンスを <code>init.credentials</code> の値として追加。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性表は構造化データから作成されています。データに協力したい場合は、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="/ja/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/ja/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li> + <li><a href="/ja/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/index.html b/files/ja/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..04b56a2146 --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,97 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - Service Worker + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +<div>{{ApiRef()}}</div> + +<p><span class="seoSummary"><strong><code>WindowOrWorkerGlobalScope</code></strong> ミックスインは、{{domxref("Window")}} インターフェイスと {{domxref("WorkerGlobalScope")}} インターフェイスで共通する機能を記述します。</span> それぞれのインターフェイスはこのページに記載されている機能に加え、より多くの機能を持つことができます。</p> + +<div class="note"> +<p><strong>注</strong>: <code>WindowOrWorkerGlobalScope</code> はインターフェイスではなく、ミックスインです。実際には、<code>WindowOrWorkerGlobalScope</code> 型のオブジェクトを作成することはできません。</p> +</div> + +<h2 id="Properties_2" name="Properties_2">プロパティ</h2> + +<p>これらのプロパティは {{domxref("WindowOrWorkerGlobalScope")}} に定義され、{{domxref("Window")}} および {{domxref("WorkerGlobalScope")}} で実装されています。</p> + +<div id="Properties"> +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトで、オフラインで使用するデータなどを保存したり、リクエストに対してカスタムレスポンスを生成したりといったことが可能になります。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.crossOriginIsolated")}} {{readOnlyinline}}</dt> + <dd>{{jsxref("SharedArrayBuffer")}} を {{domxref("Window.postMessage()")}} で送信できるかどうかを表す真偽値を返します。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Indexed Database にアプリケーションが非同期にアクセスできる仕組みを提供します。このプロパティは {{domxref("IDBFactory")}} オブジェクトを返します。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt> + <dd>現在のコンテキストが安全である (<code>true</code>) か否か (<code>false</code>) を示す真偽値を返します。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt> + <dd>グローバルオブジェクトのオリジンを、文字列としてシリアライズして返します。</dd> +</dl> +</div> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p>これらのメソッドは {{domxref("WindowOrWorkerGlobalScope")}} に定義され、{{domxref("Window")}} および {{domxref("WorkerGlobalScope")}} で実装されています。</p> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt> + <dd>Base64 エンコーディングを使用してエンコードされたデータ文字列をデコードします。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt> + <dd>バイナリーデータを Base64 でエンコードした ASCII 文字列を生成します。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt> + <dd>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}} で繰り返し実行されるよう設定された命令をキャンセルします。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt> + <dd>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} で遅延実行するよう設定した命令をキャンセルします。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt> + <dd>さまざまな画像ソースを受け入れて、{{domxref("ImageBitmap")}} に解決される {{domxref("Promise")}} を返します。任意で、始点 <em>(sx, sy)</em> から幅 sw、高さ sh の長方形でソースを切り抜くことができます。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt> + <dd>ネットワークからリソースを取り込む処理を開始します。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.queueMicrotask()")}}</dt> + <dd>マイクロタスクをキューに追加します。マイクロタスクは短い関数で、JavaScript コードの実行が完了してから JavaScript の呼び出し元に制御が返る前、コールバックや他のタスクが完了する前に実行されます。これを使うことで、より優先度の高い他のコードに干渉することなく、しかしブラウザーのランタイムが制御を取り戻す<em>前に</em>、ブラウザーの処理が潜在的に依存する作業を行うことができます。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>ミリ秒単位で指定した時間が経過するたびに関数を実行するようスケジューリングします。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>指定した時間が経過したら関数を実行するようスケジューリングします。</dd> +</dl> + +<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("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>This is where the main mixin is defined.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window")}}</li> + <li>{{domxref("WorkerGlobalScope")}}</li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html new file mode 100644 index 0000000000..eb1ba70dcb --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/indexeddb/index.html @@ -0,0 +1,171 @@ +--- +title: WindowOrWorkerGlobalScope.indexedDB +slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +tags: + - API + - Database + - IndexedDB + - Property + - Reference + - Storage +translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +--- +<p>{{ APIRef() }}</p> + +<p>{{domxref("WindowOrWorkerGlobalScope")}} ミックスインの <strong><code>indexedDB</code></strong> 読み取り専用プロパティは、アプリケーションが indexed データベースのキャパビリティに非同期でアクセスするための機構を提供します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var IDBFactory = self.indexedDB;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("IDBFactory")}} オブジェクト。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js;highlight:[3]">var db; +function openDB() { + var DBOpenRequest = window.indexedDB.open('toDoList'); + DBOpenRequest.onsuccess = function(e) { + db = DBOpenRequest.result; + } +}</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td> + <td>{{Spec2('IndexedDB 2')}}</td> + <td>Defined in a <code>WindowOrWorkerGlobalScope</code> partial in the newest spec.</td> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>23{{property_prefix("webkit")}}<br> + 24</td> + <td>{{CompatVersionUnknown}}</td> + <td>10 {{property_prefix("moz")}}<br> + {{CompatGeckoDesktop("16.0")}}<br> + {{CompatGeckoDesktop("52.0")}}<sup>[1]</sup></td> + <td>10, partial</td> + <td>15</td> + <td>7.1</td> + </tr> + <tr> + <td>worker で利用可能</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("22.0")}}<br> + {{CompatGeckoMobile("52.0")}}<sup>[1]</sup></td> + <td>1.0.1</td> + <td>10</td> + <td>22</td> + <td>8</td> + </tr> + <tr> + <td>worker で利用可能</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Indexed Database 2.0</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatChrome(58)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>indexedDB</code> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスイン上で定義されています。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li>トランザクションの開始: {{domxref("IDBDatabase")}}</li> + <li>トランザクションの使用: {{domxref("IDBTransaction")}}</li> + <li>キーの範囲設定: {{domxref("IDBKeyRange")}}</li> + <li>データの取得と変更: {{domxref("IDBObjectStore")}}</li> + <li>カーソルの使用: {{domxref("IDBCursor")}}</li> + <li>参照例: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html new file mode 100644 index 0000000000..221ce43915 --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/issecurecontext/index.html @@ -0,0 +1,56 @@ +--- +title: WindowOrWorkerGlobalScope.isSecureContext +slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +tags: + - API + - DOM + - Window + - WindowOrWorkerGlobalContext + - Workers + - isSecureContext + - ウェブ + - プロパティ + - リファレンス +translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +--- +<p>{{APIRef()}}{{SeeCompatTable}}</p> + +<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの読み取り専用 <code><strong>isSecureContext</strong></code> プロパティは、現在のコンテキストが安全（<code>true</code>）かそうではない（<code>false</code>）を示すブール値を返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // or just isSecureContext +</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("Boolean")}}.</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('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td> + <td>{{Spec2('Secure Contexts')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/origin/index.html b/files/ja/web/api/windoworworkerglobalscope/origin/index.html new file mode 100644 index 0000000000..834af4741a --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/origin/index.html @@ -0,0 +1,58 @@ +--- +title: WindowOrWorkerGlobalScope.origin +slug: Web/API/WindowOrWorkerGlobalScope/origin +tags: + - API + - DOM + - Window + - WindowOrWorkerGlobalScope + - Worker + - ウェブ + - プロパティ +translation_of: Web/API/WindowOrWorkerGlobalScope/origin +--- +<p>{{APIRef()}}{{SeeCompatTable}}</p> + +<p>{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの読み取り専用プロパティ <code><strong>origin</strong></code> は、グローバルスコープの文字列としてシリアライズされた origin を返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <em>myOrigin</em> = self.origin; // or just origin +</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("USVString")}}.</p> + +<h2 id="例">例</h2> + +<p>worker script 内から実行される以下のスニペットは、メッセージを受け取る度にワーカーのグローバルスコープの origin をコンソールに記録します。</p> + +<pre class="brush: js">onmessage = function() { + console.log(self.origin); +};</pre> + +<p>もし origin が scheme/host/port tuple出ない場合 (あなたがローカルで実行しようとしている、言い換えると <code>file://</code> というURLの場合)、 <code>origin</code> は <code>"null"</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('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.origin")}}</p> diff --git a/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html new file mode 100644 index 0000000000..543639410e --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/setinterval/index.html @@ -0,0 +1,635 @@ +--- +title: WindowOrWorkerGlobalScope.setInterval() +slug: Web/API/WindowOrWorkerGlobalScope/setInterval +tags: + - API + - DOM + - Gecko + - Intervals + - JavaScript timers + - MakeBrowserAgnostic + - Method + - NeedsMarkupWork + - Timers + - WindowOrWorkerGlobalScope + - setInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>{{domxref("WindowOrWorkerGlobalScope")}} ミックスインの <strong><code>setInterval()</code></strong> メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。これは、インターバルを一意に識別する <code>interval ID</code> を返します。よって {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} を呼び出して、後でインターバルを削除できます。このメソッドは {{domxref("Window")}} および {{domxref("Worker")}} インターフェイスで提供します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>var intervalID</em> = scope.setInterval(<em>func</em>, <em>delay</em>[, <em>param1</em>, <em>param2</em>, ...]); +<em>var intervalID</em> = scope.setInterval(<em>code</em>, <em>delay</em>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>func</code></dt> + <dd>ミリ秒単位の <code>delay</code> が経過するたびに実行する {{jsxref("function", "関数")}} です。関数には引数が渡されず、また戻り値を想定していません。</dd> + <dt><code>code</code></dt> + <dd>関数の代わりに文字列を含める構文も許容されており、ミリ秒単位の <code>delay</code> が経過するたびに文字列をコンパイルして実行します。{{jsxref("eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は <strong>推奨しません</strong>。</dd> + <dt><code>delay</code></dt> + <dd>指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。引数が 10 より小さい場合は、10 を使用します。実際の遅延が長くなることがあります。例えば {{SectionOnPage("/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout", "遅延が指定値より長い理由")}} をご覧ください。</dd> + <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt> + <dd>タイマーが満了したときに、<em>func</em> で指定した関数に渡す追加の引数です。</dd> +</dl> + +<div class="note"> +<p><strong>注記</strong>: Internet Explorer 9 およびそれ以前のバージョンでは、最初の構文で <code>setInterval()</code> に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、ポリフィルを使用してください。(<a href="#Callback_arguments">コールバックの引数</a> を参照)。</p> +</div> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p>戻り値 <code>intervalID</code> は、<code>setInterval()</code> を呼び出して作成したタイマーを識別する、0 ではない正の整数値です。この値は、インターバルをキャンセルするために {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} へ渡すことができます。</p> + +<p><code>setInterval()</code> と {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} は同じ ID プールを共有しており、さらに <code>clearInterval()</code> と {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} は技術的に入れ替えて使用できることを意識すると役に立つでしょう。ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。</p> + +<div class="note"><strong>注記</strong>: 引数 <code>delay</code> は、符号付き 32 ビット整数に変換されます。IDL における符号付き整数の定義によって、<code>delay</code> は事実上 2147483647ms に制限されます。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1_Basic_syntax" name="Example_1_Basic_syntax">例 1: 基本的な構文</h3> + +<p>以下の例は、<code>setInterval()</code> の基本的な構文を示します。</p> + +<pre class="brush:js notranslate">var intervalID = window.setInterval(myCallback, 500); + +function myCallback() { + // Your code here +} +</pre> + +<h3 id="Example_2_Alternating_two_colors" name="Example_2_Alternating_two_colors">例 2: 2 つの色を切り替える</h3> + +<p>以下の例は停止ボタンを押すまで、1 秒おきに <code>flashtext()</code> 関数を呼び出します。</p> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8" /> + <title>setInterval/clearInterval example</title> + + <script> + var nIntervId; + + function changeColor() { + nIntervId = setInterval(flashText, 1000); + } + + function flashText() { + var oElem = document.getElementById('my_box'); + oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red'; + // oElem.style.color == 'red' ? 'blue' : 'red' is a ternary operator. + } + + function stopTextColor() { + clearInterval(nIntervId); + } + </script> +</head> + +<body onload="changeColor();"> + <div id="my_box"> + <p>Hello World</p> + </div> + + <button onclick="stopTextColor();">Stop</button> +</body> +</html> +</pre> + +<h3 id="Example_3_Typewriter_simulation" name="Example_3_Typewriter_simulation">例 3: タイプライターのシミュレーション</h3> + +<p>以下の例は始めに何もない状態から、指定したセレクターのグループにマッチする <a href="/ja/docs/DOM/NodeList"><code>NodeList</code></a> へ徐々にコンテンツを入力することによってタイプライターを模倣します。</p> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8" /> +<title>JavaScript Typewriter - MDN Example</title> +<script> + function Typewriter (sSelector, nRate) { + + function clean () { + clearInterval(nIntervId); + bTyping = false; + bStart = true; + oCurrent = null; + aSheets.length = nIdx = 0; + } + + function scroll (oSheet, nPos, bEraseAndStop) { + if (!oSheet.hasOwnProperty('parts') || aMap.length < nPos) { return true; } + + var oRel, bExit = false; + + if (aMap.length === nPos) { aMap.push(0); } + + while (aMap[nPos] < oSheet.parts.length) { + oRel = oSheet.parts[aMap[nPos]]; + + scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true; + + if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { + bExit = true; + oCurrent = oRel.ref; + sPart = oCurrent.nodeValue; + oCurrent.nodeValue = ''; + } + + oSheet.ref.appendChild(oRel.ref); + if (bExit) { return false; } + } + + aMap.length--; + return true; + } + + function typewrite () { + if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } + + oCurrent.nodeValue += sPart.charAt(0); + sPart = sPart.slice(1); + } + + function Sheet (oNode) { + this.ref = oNode; + if (!oNode.hasChildNodes()) { return; } + this.parts = Array.prototype.slice.call(oNode.childNodes); + + for (var nChild = 0; nChild < this.parts.length; nChild++) { + oNode.removeChild(this.parts[nChild]); + this.parts[nChild] = new Sheet(this.parts[nChild]); + } + } + + var + nIntervId, oCurrent = null, bTyping = false, bStart = true, + nIdx = 0, sPart = "", aSheets = [], aMap = []; + + this.rate = nRate || 100; + + this.play = function () { + if (bTyping) { return; } + if (bStart) { + var aItems = document.querySelectorAll(sSelector); + + if (aItems.length === 0) { return; } + for (var nItem = 0; nItem < aItems.length; nItem++) { + aSheets.push(new Sheet(aItems[nItem])); + /* Uncomment the following line if you have previously hidden your elements via CSS: */ + // aItems[nItem].style.visibility = "visible"; + } + + bStart = false; + } + + nIntervId = setInterval(typewrite, this.rate); + bTyping = true; + }; + + this.pause = function () { + clearInterval(nIntervId); + bTyping = false; + }; + + this.terminate = function () { + oCurrent.nodeValue += sPart; + sPart = ""; + for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false)); + clean(); + }; +} + +/* usage: */ +var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15); + +/* default frame rate is 100: */ +var oTWExample2 = new Typewriter('#controls'); + +/* you can also change the frame rate value modifying the "rate" property; for example: */ +// oTWExample2.rate = 150; + +onload = function () { + oTWExample1.play(); + oTWExample2.play(); +}; +</script> +<style type="text/css"> +span.intLink, a, a:visited { + cursor: pointer; + color: #000000; + text-decoration: underline; +} + +#info { + width: 180px; + height: 150px; + float: right; + background-color: #eeeeff; + padding: 4px; + overflow: auto; + font-size: 12px; + margin: 4px; + border-radius: 5px; + /* visibility: hidden; */ +} +</style> +</head> + +<body> + +<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p> +<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span>&nbsp;]</p> +<div id="info"> +Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. +</div> +<h1>JavaScript Typewriter</h1> + +<div id="article"> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> +<form> +<p>Phasellus ac nisl lorem: <input type="text" /><br /> +<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p> +<p><input type="submit" value="Send" /> +</form> +<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p> +<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p> +</div> +</body> +</html></pre> + +<p><a href="/files/3997/typewriter.html">View this demo in action</a>. See also: <a href="/ja/docs/DOM/window.clearInterval"><code>clearInterval()</code></a>.</p> + +<h2 id="Callback_arguments" name="Callback_arguments">コールバックの引数</h2> + +<p>前述のとおり、Internet Explorer 9 およびそれ以前は、<code>setTimeout()</code> や <code>setInterval()</code> でコールバック関数に引数を渡す機能をサポートしません。以下の <strong>IE 専用</strong> コードは、この制限を克服する方法を説明します。使用方法は、スクリプトの先頭に以下のコードを追加するだけです。</p> + +<pre class="brush:js notranslate">/*\ +|*| +|*| IE-specific polyfill that enables the passage of arbitrary arguments to the +|*| callback functions of javascript timers (HTML5 standard syntax). +|*| +|*| https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval +|*| https://developer.mozilla.org/User:fusionchess +|*| +|*| Syntax: +|*| var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]); +|*| var timeoutID = window.setTimeout(code, delay); +|*| var intervalID = window.setInterval(func, delay[, param1, param2, ...]); +|*| var intervalID = window.setInterval(code, delay); +|*| +\*/ + +if (document.all && !window.setTimeout.isPolyfill) { + var __nativeST__ = window.setTimeout; + window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + window.setTimeout.isPolyfill = true; +} + +if (document.all && !window.setInterval.isPolyfill) { + var __nativeSI__ = window.setInterval; + window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + window.setInterval.isPolyfill = true; +} +</pre> + +<p>もうひとつの方法は、コールバックに無名関数を使用することです。ただし、この方法は少し多くコストがかかります。 例えば:</p> + +<pre class="brush:js notranslate">var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);</pre> + +<p>さらに、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">関数の <code>bind</code></a> を使用する方法もあります。例えば:</p> + +<pre class="brush:js notranslate">var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);</pre> + +<p>{{h3_gecko_minversion("非アクティブなタブ", "5.0")}}</p> + +<p>Gecko 5.0 {{geckoRelease("5.0")}} より非アクティブなタブでは、1 秒あたり 1 回を超えて実行しないようにインターバルを制限します。</p> + +<h2 id="The_this_problem" name="The_this_problem">"<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>" 問題</h2> + +<p><code>setInterval()</code> (もっと言うと他のどんな関数でも) にメソッドを渡すと、間違った <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> の値で呼び出されることがあります。この問題は <a href="/ja/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript リファレンス</a> で詳しく説明されています。</p> + +<h3 id="Explanation" name="Explanation">説明</h3> + +<p><code>setInterval()</code> によって実行されるコードは、<code>setInterval</code> が呼び出された関数とは別の実行コンテキスト内で実行されます。その結果、呼び出された関数の <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> キーワードは <code>window</code> (または <code>global</code>) オブジェクトに設定されます。これは <code>setTimeout</code> を呼び出した関数の <code>this</code> の値とは異なります。以下の例をご覧ください (ここでは <code>setInterval()</code> ではなく <code>setTimeout()</code> を使用していますが、どちらのタイマーでも問題は同じです):</p> + +<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; + +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +myArray.myMethod(); // prints "zero,one,two" +myArray.myMethod(1); // prints "one" +setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second +setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds +// passing the 'this' object with .call won't work +// because this will change the value of this inside setTimeout itself +// while we want to change the value of this inside myArray.myMethod +// in fact, it will be an error because setTimeout code expects this to be the window object: +setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error +</pre> + +<p>この例でわかるとおり、旧来の JavaScript でコールバック関数に <code>this</code> オブジェクトを渡す方法はありません。</p> + +<h3 id="A_possible_solution" name="A_possible_solution">考えられる解決策</h3> + +<p>"<code>this</code>" 問題の解決策としてネイティブな <code>setTimeout()</code> および <code>setInterval()</code> グローバル関数を、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> メソッドを通して呼び出すことが可能な <em>非ネイティブ</em> メソッドに置き換える方法が考えられます。考えられる置き換え方法の例を以下に示します:</p> + +<pre class="brush:js notranslate">// Enable the passage of the 'this' object through the JavaScript timers + +var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; + +window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +}; + +window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +};</pre> + +<div class="note">これら 2 つの置き換えにより、IE のタイマーで HTML5 標準の、コールバック関数に任意の引数を渡すことも可能になります。よって、<em>標準仕様に準拠しない</em> ポリフィルとしても使用できます。<em>標準仕様に準拠する</em>ポリフィルについては、<a href="#Callback_arguments">コールバックの引数</a> をご覧ください。</div> + +<p>新機能のテスト:</p> + +<pre class="brush:js notranslate">myArray = ['zero', 'one', 'two']; + +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but... +setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds +</pre> + +<p>この他に <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> 問題のより複雑な解決策として、<a href="#A_little_framework">後述するフレームワーク</a> もあります。</p> + +<div class="note">JavaScript 1.8.5 で、関数のすべての呼び出しで <code>this</code> として使用する値を設定できる、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> メソッドを導入しました。これにより、関数を呼び出したコンテキストに応じて this がどのようになるかが明確にならない問題を簡単に回避できます。また、ES2015 では <a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> をサポートして、字句 this と組み合わせると myArray の内部では setInterval( () => this.myMethod) と記述できます。</div> + +<h2 id="MiniDaemon_-_A_framework_for_managing_timers" name="MiniDaemon_-_A_framework_for_managing_timers">MiniDaemon: タイマー管理フレームワーク</h2> + +<p>多くのタイマーが必要なページでは、実行中のタイマーのイベントをすべて追跡し続けることが困難な場合があります。この問題の解決策のひとつが、オブジェクト内のタイマーの状態に関する情報を保存することです。以下のコードは、そのような抽象化の最小限の例です。コンストラクターは、クロージャの使用を明示的に避けるアーキテクチャになっています。また、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクトをコールバック関数に渡す代替手段も提供します (詳しくは <a href="#The_.22this.22_problem">"this" 問題</a> をご覧ください)。以下のコードは <a href="https://github.com/madmurphy/minidaemon.js">GitHub でも入手できます</a>。</p> + +<div class="note">より複雑ですがモジュール化したもの (<code><em>Daemon</em></code>) については、<a href="/ja/Add-ons/Code_snippets/Timers/Daemons">JavaScript Daemons Management</a> をご覧ください。このより複雑なバージョンは、<code><em>Daemon</em></code> コンストラクター用の大規模でスケーラブルなメソッドのコレクションに過ぎません。しかし <code><em>Daemon</em></code> コンストラクター自体は、<code><em>daemon</em></code> のインスタンス化の間に宣言可能な <em>init</em> および <em>onstart</em> 関数のサポートを追加した <code><em>MiniDaemon</em></code> のクローンに過ぎません。<strong>よって <code><em>MiniDaemon</em></code> フレームワークは、シンプルなアニメーションのために推奨する方法であり続けます。</strong>これは、メソッドのコレクションがない <code><em>Daemon</em></code> が本質的に <code><em>MiniDaemon</em></code> のクローンであるためです。</div> + +<h3 id="minidaemon.js" name="minidaemon.js">minidaemon.js</h3> + +<pre class="brush:js notranslate">/*\ +|*| +|*| :: MiniDaemon :: +|*| +|*| Revision #2 - September 26, 2014 +|*| +|*| https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval +|*| https://developer.mozilla.org/User:fusionchess +|*| https://github.com/madmurphy/minidaemon.js +|*| +|*| This framework is released under the GNU Lesser General Public License, version 3 or later. +|*| http://www.gnu.org/licenses/lgpl-3.0.html +|*| +\*/ + +function MiniDaemon (oOwner, fTask, nRate, nLen) { + if (!(this && this instanceof MiniDaemon)) { return; } + if (arguments.length < 2) { throw new TypeError('MiniDaemon - not enough arguments'); } + if (oOwner) { this.owner = oOwner; } + this.task = fTask; + if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); } + if (nLen > 0) { this.length = Math.floor(nLen); } +} + +MiniDaemon.prototype.owner = null; +MiniDaemon.prototype.task = null; +MiniDaemon.prototype.rate = 100; +MiniDaemon.prototype.length = Infinity; + + /* These properties should be read-only */ + +MiniDaemon.prototype.SESSION = -1; +MiniDaemon.prototype.INDEX = 0; +MiniDaemon.prototype.PAUSED = true; +MiniDaemon.prototype.BACKW = true; + + /* Global methods */ + +MiniDaemon.forceCall = function (oDmn) { + oDmn.INDEX += oDmn.BACKW ? -1 : 1; + if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; } + return true; +}; + + /* Instances methods */ + +MiniDaemon.prototype.isAtEnd = function () { + return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length; +}; + +MiniDaemon.prototype.synchronize = function () { + if (this.PAUSED) { return; } + clearInterval(this.SESSION); + this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this); +}; + +MiniDaemon.prototype.pause = function () { + clearInterval(this.SESSION); + this.PAUSED = true; +}; + +MiniDaemon.prototype.start = function (bReverse) { + var bBackw = Boolean(bReverse); + if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; } + this.BACKW = bBackw; + this.PAUSED = false; + this.synchronize(); +}; +</pre> + +<div class="note">MiniDaemon は、引数をコールバック関数に渡します。この機能をネイティブにサポートしないブラウザーで動作させたい場合は、ここで提案したメソッドのいずれかを使用してください。</div> + +<h3 id="Syntax_2" name="Syntax_2">構文</h3> + +<p><code>var myDaemon = new MiniDaemon(<em>thisObject</em>, <em>callback</em>[</code><code>, <em>rate</em></code><code>[, <em>length</em>]]);</code></p> + +<h3 id="Description" name="Description">説明</h3> + +<p>アニメーションで必要なすべての情報 (<a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト、コールバック関数、長さ、フレームレート) を持つ JavaScript <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>Object</code></a> を返します。</p> + +<h4 id="Parameters_2" name="Parameters_2">引数</h4> + +<dl> + <dt><code>thisObject</code></dt> + <dd><em>コールバック</em>関数が呼び出された <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> または <code>null</code> を使用できます。</dd> + <dt><code>callback</code></dt> + <dd>繰り返し実行する関数。<strong>これは 3 個の引数を伴って呼び出されます</strong>。<em>index</em> (反復処理の、毎回の処理のインデックス)、<em>length</em> (<em>daemon</em> に割り当てられた総実行回数。有限の数値または <a href="/ja/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を指定できます)、<em>backwards</em> (<em>index</em> を加算するか減算するかを示す論理値)。これは <em>callback</em>.call(<em>thisObject</em>, <em>index</em>, <em>length</em>, <em>backwards</em>) のようなものです。<strong>コールバック関数が <code>false</code> 値を返す場合は、<em>daemon</em> が一時停止しています</strong>。</dd> + <dt><code>rate (省略可能)</code></dt> + <dd>毎回の実行の時間間隔 (ミリ秒単位の数値)。デフォルト値は 100 です。</dd> + <dt><code>length (省略可能)</code></dt> + <dd>総実行回数。正の整数または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を使用できます。デフォルト値は <code>Infinity</code> です。</dd> +</dl> + +<h4 id="MiniDaemon_instances_properties" name="MiniDaemon_instances_properties"><code>MiniDaemon</code> インスタンスのプロパティ</h4> + +<dl> + <dt><code>myDaemon.owner</code></dt> + <dd>daemon が実行される <a href="/ja/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクト (読み書き可能)。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>object</code></a> または <code>null</code> を使用できます。</dd> + <dt><code>myDaemon.task</code></dt> + <dd>繰り返し実行する関数 (読み書き可能)。これは 3 個の引数を伴って呼び出されます。<em>index</em> (反復処理の、毎回の処理のインデックス)、<em>length</em> (daemon に割り当てられた総実行回数。有限の数値または <a href="/ja/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を指定できます)、<em>backwards</em> (<em>index</em> 減算するか否かを示す論理値)。<code>myDaemon.task</code> の関数が <code>false</code> 値を返す場合は、<em>daemon</em> が一時停止しています。</dd> + <dt><code>myDaemon.rate</code></dt> + <dd>毎回の実行の時間間隔 (ミリ秒単位の数値、読み書き可能)。</dd> + <dt><code>myDaemon.length</code></dt> + <dd>総実行回数。正の整数または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> を使用できます (読み書き可能)。</dd> +</dl> + +<h4 id="MiniDaemon_instances_methods" name="MiniDaemon_instances_methods"><code>MiniDaemon</code> インスタンスのメソッド</h4> + +<dl> + <dt><code>myDaemon.isAtEnd()</code></dt> + <dd><em>daemon</em> が開始/終了状態であるか否かを示す論理値を返します。</dd> + <dt><code>myDaemon.synchronize()</code></dt> + <dd>開始した daemon のタイマーと、daemon の実行時間を同期します。</dd> + <dt><code>myDaemon.pause()</code></dt> + <dd>daemon を一時停止します。</dd> + <dt><code>myDaemon.start([<em>reverse</em>])</code></dt> + <dd>daemon を前方 (毎回実行するたびに <em>index</em> が増加) または後方 (<em>index</em> が減少) に開始します。</dd> +</dl> + +<h4 id="MiniDaemon_global_object_methods" name="MiniDaemon_global_object_methods"><code>MiniDaemon</code> グローバルオブジェクトのメソッド</h4> + +<dl> + <dt><code>MiniDaemon.forceCall(<em>minidaemon</em>)</code></dt> + <dd>終端に達しているか否かの事実にかかわらず、<code><em>minidaemon</em>.task</code> の関数へのひとつのコールバックを強制します。どの場合も、内部の <code>INDEX</code> プロパティは (実際の実行方向に応じて) 増加または減少します。</dd> +</dl> + +<h3 id="Example_usage" name="Example_usage">使用例</h3> + +<p>HTML ページ:</p> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> + <meta charset="UTF-8" /> + <title>MiniDaemin Example - MDN</title> + <script type="text/javascript" src="minidaemon.js"></script> + <style type="text/css"> + #sample_div { + visibility: hidden; + } + </style> +</head> + +<body> + <p> + <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /> + <input type="button" onclick="fadeInOut.start(true);" value="fade out"> + <input type="button" onclick="fadeInOut.pause();" value="pause" /> + </p> + + <div id="sample_div">Some text here</div> + + <script type="text/javascript"> + function opacity (nIndex, nLength, bBackwards) { + this.style.opacity = nIndex / nLength; + if (bBackwards ? nIndex === 0 : nIndex === 1) { + this.style.visibility = bBackwards ? 'hidden' : 'visible'; + } + } + + var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8); + </script> +</body> +</html></pre> + +<p><a href="/files/3995/minidaemon_example.html" title="MiniDaemon Example">実際の動作例を見る</a></p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p><code>setInterval()</code> 関数は一般に、アニメーションのように何度も実行される関数に遅延をセットするのに使われます。</p> + +<p>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}} を使ってインターバルをキャンセルすることができます。</p> + +<p>指定時間後に <em>一度</em> だけ関数を呼び出したい場合には、{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} を使います。</p> + +<h3 id="Ensure_that_execution_duration_is_shorter_than_interval_frequency" name="Ensure_that_execution_duration_is_shorter_than_interval_frequency">実行時間をインターバルより確実に短くする</h3> + +<p>ロジックの実行時間がインターバル時間より長くなる可能性がある場合は、{{domxref("WindowOrWorkerGlobalScope.setTimeout")}} を使用して名前付き関数を再帰的に呼び出すことを推奨します。例えば 5 秒おきにリモートサーバーへ接続するために <code>setInterval</code> を使用するとき、ネットワークの遅延やサーバーの不応答などさまざまな問題で、割り当てられた時間内にリクエストが完了しない可能性があります。そのため、必ずしも順番どおりには返らない XHR リクエストがキュー内にあることに気づくかもしれません。</p> + +<p>この場合は、再帰的な <code>setTimeout()</code> のパターンを推奨します:</p> + +<pre class="brush:js notranslate">(function loop(){ + setTimeout(function() { + // Your logic here + + loop(); + }, delay); +})(); +</pre> + +<p>このコードスニペットでは、名前付き関数 <code>loop()</code> を宣言して直ちに実行します。<code>loop()</code> はロジックが完全に実行された後に、内部の <code>setTimeout()</code> によって再帰呼び出しされます。このパターンは一定の間隔で呼び出すことが保証されませんが、再帰呼び出しの前に前の実行が完了することが保証されます。</p> + +<h3 id="Throttling_of_intervals" name="Throttling_of_intervals">インターバルを抑制する</h3> + +<p>Firefox で <code>setInterval()</code> は、{{domxref("WindowOrWorkerGlobalScope.setTimeout","setTimeout()")}} と同様に、インターバルが制限されます。<a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">遅延が指定値より長い理由</a> をご覧ください。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様書</th> + <th>策定状況</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-setinterval', 'WindowOrWorkerGlobalScope.setInterval()')}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最初期の定義 (DOM Level 0)</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/Add-ons/Code_snippets/Timers">JavaScript timers</a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearInterval")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="/ja/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> diff --git a/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..1bbb906cf7 --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,421 @@ +--- +title: WindowOrWorkerGlobalScope.setTimeout() +slug: Web/API/WindowOrWorkerGlobalScope/setTimeout +tags: + - API + - HTML DOM + - Intervals + - JavaScript timers + - MakeBrowserAgnostic + - Method + - NeedsCompatTable + - NeedsMarkupWork + - NeedsUpdate + - Reference + - Timers + - WindowOrWorkerGlobalScope + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>setTimeout()</code></strong> は {{domxref("WindowOrWorkerGlobalScope")}} ミックスインのメソッド (および <code>Window.setTimeout()</code> の後継) で、時間切れになると関数または指定されたコードの断片を実行するタイマーを設定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>function</var>[, <var>delay</var>, <var>arg1</var>, <var>arg2</var>, ...]); +var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>function</var>[, <var>delay</var>]); +var <var>timeoutID</var> = <var>scope</var>.setTimeout(<var>code</var>[, <var>delay</var>]); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>function</var></code></dt> + <dd>タイマーが満了した後に実行したい {{jsxref("function", "関数")}}。</dd> + <dt><code><var>code</var></code></dt> + <dd>関数の代わりに文字列を含める代替構文も許容されており、タイマーが満了したときに文字列をコンパイルして実行します。 {{jsxref("Global_Objects/eval", "eval()")}} の使用にリスクがあるのと同じ理由で、この構文は<strong>推奨しません</strong>。</dd> + <dt><code><var>delay</var></code> {{optional_inline}}</dt> + <dd>指定した関数やコードを実行する前に待つタイマーの時間をミリ秒 (1/1000 秒) 単位で指定します。この引数を省略すると値 0 を使用しますので "直ちに" 実行する、より正確に言えばできるだけ早く実行することを意味します。どちらの場合も、実際の遅延が想定より長くなることがあります。後述する {{anch("Reasons for delays longer than specified", "遅延が指定値より長い理由")}} をご覧ください。</dd> + <dt><code><var>arg1</var>, ..., <var>argN</var></code> {{optional_inline}}</dt> + <dd>タイマーが満了したときに、 <code><var>function</var></code> で指定された関数に渡す追加の引数です。</dd> +</dl> + +<div class="note"> +<p><strong>注</strong>: Internet Explorer 9 およびそれ以前のバージョンでは、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、ポリフィルを使用してください。({{anch("Polyfill", "ポリフィル")}} を参照)。</p> +</div> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>返される <code><var>timeoutID</var></code> は正の整数値で、 <code>setTimeout()</code> を呼び出して作成したタイマーを識別します。この値を {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} へ渡すことで、タイムアウトを取り消すことができます。</p> + +<p><code>setTimeout()</code> と {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} は同じ ID プールを共有しており、さらに <code>clearTimeout()</code> と {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} は技術的に入れ替えて使用できることを意識すると役に立つかもしれません。ただし明確さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。</p> + +<p>同じオブジェクト (ウィンドウやワーカー) では、後に <code>setTimeout()</code> や <code>setInterval()</code> を呼び出しても タイムアウト ID を再使用しないことが保証されています。ただし、別なオブジェクトでは別の ID プールを使用します。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下の例はウェブページに 2 つのシンプルなボタンを置いており、<code>setTimeout()</code> および <code>clearTimeout()</code> のルーチンを実行します。1 番目のボタンを押下すると 2 秒後にアラートダイアログを呼び出すタイムアウトを設定して、<code>clearTimeout()</code> で使用するタイムアウト ID を保存します。2 番目のボタンを押下すると、このタイムアウトをキャンセルできます。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>Live Example</p> +<button onclick="delayedAlert();">2秒後にアラートボックスを表示する</button> +<p></p> +<button onclick="clearAlert();">アラートを事前にキャンセルする</button> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var timeoutID; + +function delayedAlert() { + timeoutID = window.setTimeout(window.alert, 2*1000, '本当に遅い！'); +} + +function clearAlert() { + window.clearTimeout(timeoutID); +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<p><a href="/ja/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout()</code> の例</a> もご覧ください。</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>コールバック関数に 1 つ以上の引数を渡す必要があるが、<code>setTimeout()</code> や <code>setInterval()</code> を使用して追加の引数を渡す機能に対応していないブラウザー (例えば Internet Explorer 9 以前) で動作しなければならない場合は、HTML5 標準の引数渡し機能を可能にする以下のポリフィルを追加するとよいでしょう。このコードをスクリプトの先頭に追加してください。</p> + +<pre class="brush: js">/*\ +|*| +|*| Polyfill which enables the passage of arbitrary arguments to the +|*| callback functions of JavaScript timers (HTML5 standard syntax). +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/window.setInterval +|*| +|*| Syntax: +|*| var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]); +|*| var timeoutID = window.setTimeout(code, delay); +|*| var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]); +|*| var intervalID = window.setInterval(code, delay); +|*| +\*/ + +(function() { + setTimeout(function(arg1) { + if (arg1 === 'test') { + // feature test is passed, no need for polyfill + return; + } + var __nativeST__ = window.setTimeout; + window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function() { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + }, 0, 'test'); + + var interval = setInterval(function(arg1) { + clearInterval(interval); + if (arg1 === 'test') { + // feature test is passed, no need for polyfill + return; + } + var __nativeSI__ = window.setInterval; + window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) { + var aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function() { + vCallback.apply(null, aArgs); + } : vCallback, nDelay); + }; + }, 0, 'test'); +}()) +</pre> + +<h3 id="IE-only_fix" name="IE-only_fix">IE 限定の修正</h3> + +<p>IE 9 およびそれ以前を含む、他のすべてのモバイルブラウザーやデスクトップブラウザーで完全に目立たない修正が必要である場合は、以下の JavaScript 条件付きコメントを使用できます。</p> + +<pre class="brush: js">/*@cc_on + // conditional IE < 9 only fix + @if (@_jscript_version <= 9) + (function(f){ + window.setTimeout = f(window.setTimeout); + window.setInterval = f(window.setInterval); + })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}}); + @end +@*/ +</pre> + +<p>あるいは IE の HTML 条件機能による、とてもクリーンな方法を使用します:</p> + +<pre class="brush: html"><!--[if lte IE 9]><script> +(function(f){ +window.setTimeout=f(window.setTimeout); +window.setInterval=f(window.setInterval); +})(function(f){return function(c,t){ +var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)} +}); +</script><![endif]--> +</pre> + +<h3 id="Workarounds" name="Workarounds">回避策</h3> + +<p>もうひとつの方法は、コールバックに無名関数を使用することです。ただし、この方法は少し多くコストがかかります。例:</p> + +<pre class="brush: js">var intervalID = setTimeout(function() { myFunc('one', 'two', 'three'); }, 1000); +</pre> + +<p>上記の例は、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> を使用して以下のように記述できます。</p> + +<pre class="brush: js">var intervalID = setTimeout(() => { myFunc('one', 'two', 'three'); }, 1000); +</pre> + +<p>さらに、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">関数の <code>bind</code></a> を使用する方法もあります。例:</p> + +<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000); +</pre> + +<h2 id="The_this_problem" name="The_this_problem">"this" 問題</h2> + +<p><code>setTimeout()</code> にメソッド (そういうことならほかの関数も) を渡すとき、コードが実行される際の <code>this</code> の値が想定とは異なるかもしれません。この問題は <a href="/ja/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript リファレンス</a> でより詳細に説明されています。</p> + +<h3 id="Explanation" name="Explanation">説明</h3> + +<p><code>setTimeout()</code> によって実行されるコードは、 <code>setTimeout</code> が呼び出された関数とは別の実行コンテキスト内から呼び出されます。呼び出された関数に <code>this</code> キーワードを設定する通常の規則を適用して、呼び出しあるいは <code>bind</code> で <code>this</code> を設定しなければ、非 strict モードでは <code>global</code> (または <code>window</code>)、strict モードでは undefined になります。これは、<code>setTimeout</code> が呼び出された関数の <code>this</code> 値と同じにはなりません。</p> + +<div class="note"> +<p><strong>注:</strong> <code>setTimeout</code> コールバックの既定の <code>this</code> の値は、厳格モードであっても <code>undefined</code> ではなく、 <code>window</code> オブジェクトです。</p> +</div> + +<p>以下の例をご覧ください。</p> + +<pre class="brush: js">myArray = ['zero', 'one', 'two']; +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +myArray.myMethod(); // prints "zero,one,two" +myArray.myMethod(1); // prints "one"</pre> + +<p><code>myMethod</code> を呼び出したときに、呼び出しによって <code>this</code> が <code>myArray</code> に設定されますので、関数内で <code>this[sProperty]</code> は <code>myArray[sProperty]</code> と等価です。しかし、以下のコードでは動作が異なります。</p> + +<pre class="brush: js">setTimeout(myArray.myMethod, 1.0*1000); // 1秒後に "[object Window]" と表示 +setTimeout(myArray.myMethod, 1.5*1000, '1'); // 1.5秒後に "undefined" と表示</pre> + +<p><code>myArray.myMethod</code> 関数を <code>setTimeout</code> に渡しており、関数が呼び出されると <code>this</code> が前のように設定されず、既定値の <code>window</code> オブジェクトになります。Array の forEach や reduce などのメソッドにあるような、<code>thisArg</code> を setTimeout に渡すオプションもありません。また以下のように、<code>this</code> を設定するために <code>call</code> を使用する方法も動作しません。</p> + +<pre class="brush: js">setTimeout.call(myArray, myArray.myMethod, 2.0*1000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" +setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // same error +</pre> + +<h3 id="Possible_solutions" name="Possible_solutions">考えられる解決策</h3> + +<p>この問題の一般的な解決策は、<code>this</code> に必要な値を設定するラッパー関数を使用することです:</p> + +<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds +setTimeout(function(){myArray.myMethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds</pre> + +<p>代わりにアロー関数も使用できます。</p> + +<pre class="brush: js">setTimeout(() => {myArray.myMethod()}, 2.0*1000); // prints "zero,one,two" after 2 seconds +setTimeout(() => {myArray.myMethod('1')}, 2.5*1000); // prints "one" after 2.5 seconds</pre> + +<p>他に考えられる "<code>this</code>" 問題の解決策として、本来の <code>setTimeout()</code> および <code>setInterval()</code> グローバル関数を、<code>this</code> オブジェクトを渡せるようにして、コールバックで <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a> を使用して設定するように置き換える方法があります。例えば:</p> + +<pre class="brush: js">// Enable setting 'this' in JavaScript timers + +var __nativeST__ = window.setTimeout, + __nativeSI__ = window.setInterval; + +window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, + aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeST__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +}; + +window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { + var oThis = this, + aArgs = Array.prototype.slice.call(arguments, 2); + return __nativeSI__(vCallback instanceof Function ? function () { + vCallback.apply(oThis, aArgs); + } : vCallback, nDelay); +};</pre> + +<div class="note"><strong>注</strong>: これら 2 つの置き換えにより、IE のタイマーで HTML5 標準の、コールバック関数に任意の引数を渡すことも可能になります。よって、ポリフィルとしても使用できます。<a href="#Callback_arguments">Callback arguments</a> の節をご覧ください。</div> + +<p>新機能のテスト:</p> + +<pre class="brush: js">myArray = ['zero', 'one', 'two']; +myArray.myMethod = function (sProperty) { + alert(arguments.length > 0 ? this[sProperty] : this); +}; + +setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but... +setTimeout.call(myArray, myArray.myMethod, 2.0*1000); // prints "zero,one,two" after 2 seconds +setTimeout.call(myArray, myArray.myMethod, 2.5*1000, 2); // prints "two" after 2.5 seconds +</pre> + +<div class="note"><strong>注</strong>: JavaScript 1.8.5 で、関数のすべての呼び出しに対して <code>this</code> の値を設定する <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> メソッドを導入しました。これにより、コールバックで <code>this</code> の値を設定するためにラッパー関数を使用しなければならない状況を回避できます。</div> + +<p><code>bind()</code> の使用例:</p> + +<pre class="brush: js">myArray = ['zero', 'one', 'two']; +myBoundMethod = (function (sProperty) { + console.log(arguments.length > 0 ? this[sProperty] : this); +}).bind(myArray); + +myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function +myBoundMethod(1); // prints "one" +setTimeout(myBoundMethod, 1.0*1000); // still prints "zero,one,two" after 1 second because of the binding +setTimeout(myBoundMethod, 1.5*1000, "1"); // prints "one" after 1.5 seconds +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>タイムアウトは {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} を使って中止することができます。</p> + +<p>もし関数を繰返し (例えば、 N ミリ秒ごとに) 呼び出したいなら、 {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}} を使うことを検討してください。</p> + +<h3 id="Passing_string_literals" name="Passing_string_literals">文字列リテラルの使用</h3> + +<p>関数の代わりに文字列を <code>setTimeout()</code> に渡すと、<code><a href="/ja/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a> を使うのと同様の問題が発生します。</code></p> + +<pre class="brush: js">// 推奨 +window.setTimeout(function() { + alert('Hello World!'); +}, 500); + +// 非推奨 +window.setTimeout("alert('Hello World!');", 500); +</pre> + +<p><code>setTimeout</code> に渡した文字列はグローバルコンテキストで評価されます。そのため、<code>setTimeout()</code> が呼び出されたコンテキストのローカルシンボルは、文字列を評価したコードからは利用できません。</p> + +<h3 id="Reasons_for_delays_longer_than_specified" name="Reasons_for_delays_longer_than_specified">遅延が指定値より長い理由</h3> + +<p>タイムアウトが満了するまでに予想より長い時間がかかる理由は複数あります。このセクションでは、もっとも一般的な理由を説明します。</p> + +<h4 id="Timeouts_throttled_to_≥_4ms" name="Timeouts_throttled_to_≥_4ms">タイムアウトを 4ms 以上に制限する</h4> + +<p>現代のブラウザーは、<code>setTimeout()</code> や {{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} がコールバックのネスト (ネストの深さが少なくとも数段階ある) によって連続的に呼び出された、あるいは連続的なインターバルが数回発生した後に呼び出されたときに、少なくとも 4 ミリ秒ごとに呼び出されるように制限をかけます。例えば:</p> + +<pre class="brush: js">function cb() { f(); setTimeout(cb, 0); } +setTimeout(cb, 0); +setInterval(f, 0);</pre> + +<p>Chrome および Firefox では、5 回目の連続的なコールバックの呼び出しで制限をかけます。また Safar は 6 回目、Edge は 3 回目で制限をかけます。Gecko は <a href="/ja/docs/Mozilla/Firefox/Releases/56">バージョン 56</a> で、<code>setInterval()</code> で制限を始めました (後述のとおり <code>setTimeout()</code> は以前から行っていました)。</p> + +<p><a href="http://code.google.com/p/chromium/issues/detail?id=792#c10">歴史的に</a> 一部のブラウザー (例えば Firefox) は、あらゆる場所から呼び出された <code>setInterval()</code>、あるいはネストの深さが少なくとも数段階ある <code>setTimeout()</code> が呼び出されたときの制限を、若干異なる動作で実装しています。。</p> + +<p>0 ms タイマーをモダンブラウザーで実装するには、<a href="http://dbaron.org/log/20100309-faster-timeouts">ここで説明されている</a> {{domxref("window.postMessage()")}} を利用できます。</p> + +<div class="note"> +<p><strong>注</strong>: 最小遅延である <code>DOM_MIN_TIMEOUT_VALUE</code> は 4 ms (Firefox の <code>dom.min_timeout_value</code> の設定に保存されています) であり、<code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> は 5 です。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: 4 ms は <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">HTML5 の仕様で標準化されています</a>。 そして、2010 年以降にリリースされたブラウザー間で一貫しています。{{geckoRelease("5.0")}} 以前では、ネストされた setTimeout の最小値は 10 ms でした。</p> +</div> + +<h4 id="Timeouts_in_inactive_tabs_throttled_to_≥_1000ms" name="Timeouts_in_inactive_tabs_throttled_to_≥_1000ms">非アクティブタブのタイムアウトは 1000 ms 以上に制限される</h4> + +<p>バックグラウンドのタブによる負荷 (およびバッテリー消費) を軽減するため、アクティブ状態でないタブでのタイマーの呼び出しは、1 秒 (1,000 ms) あたり 1 回までとなります。</p> + +<p>Firefox はこの動作をバージョン 5 ({{bug(633421)}} を参照。1000 ms の定数は設定項目 <code>dom.min_background_timeout_value</code> で変更できます) から、Chrome はこの動作をバージョン 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>) から実装しています。</p> + +<p>Android 版 Firefox は {{bug(736602)}} によって、 Firefox 14 からバックグラウンドタブで 15 分のタイムアウト値を使用しており、またバックグラウンドタブを完全にアンロードすることもできます。</p> + +<div class="note"> +<p>Firefox 50 では、 Web Audio API の {{domxref("AudioContext")}} が音声を再生中であればバックグラウンドタブの制限を行いません。さらに Firefox 51 では、音声を再生していなくても {{domxref("AudioContext")}} を提供していれば、バックグラウンドタブの制限を行わないように改良しました。これによりタブがバックグラウンドであるときに、楽譜を基に音楽を再生するアプリで拍子が合わない、あるいは音楽が正しく同期しないといった問題が解決します。</p> +</div> + +<h4 id="Throttling_of_tracking_timeout_scripts" name="Throttling_of_tracking_timeout_scripts">トラッキングスクリプトのタイムアウトを制限する</h4> + +<p>Firefox 55 より、トラッキングスクリプト (例えば Google Analytics や、<a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">TP リスト</a> によって Firefox がトラッキングスクリプトであると認識するスクリプトの URL) にさらなる制限を課します。フォアグラウンドで実行しているとき、最小遅延の制限は 4ms のままです。しかしバックグラウンドのタブでは、最小遅延を 10,000ms または 10 秒に制限します。これはドキュメントが最初に読み込まれてから 30 秒後に発効します。</p> + +<p>この動作を制御する設定項目は以下のとおりです。</p> + +<ul> + <li><code>dom.min_tracking_timeout_value</code>: 4</li> + <li><code>dom.min_tracking_background_timeout_value</code>: 10000</li> + <li><code>dom.timeout.tracking_throttling_delay</code>: 30000</li> +</ul> + +<h4 id="Late_timeouts" name="Late_timeouts">タイムアウトの遅延</h4> + +<p>前出の "制限" に加えて、ページ内 (またはOSやブラウザー自身) の他のタスクの処理に時間がかかると、タイムアウトは遅れます。注目すべき重要なケースとして、<code>setTimeout()</code> を呼び出したスレッドが終了するまで関数やコードスニペットを実行できないことが挙げられます。例えば:</p> + +<pre class="brush: js">function foo() { + console.log('foo has been called'); +} +setTimeout(foo, 0); +console.log('After setTimeout');</pre> + +<p>このコードは、コンソールへ以下のように出力します。</p> + +<pre>After setTimeout +foo has been called</pre> + +<p>これは <code>setTimeout</code> を遅延 0 で呼び出したとしても、直ちに実行するのではなくキューに載せて、次の機会に実行するようスケジューリングされるためです。現在実行中のコードはキューにある関数を実行する前に完了しなければならず、このために実行結果の順序が想定どおりにならない場合があります。</p> + +<h3 id="WebExtension_のバックグラウンドページとタイマー">WebExtension のバックグラウンドページとタイマー</h3> + +<p><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtension</a> のバックグラウンドページでは、タイマーが正しく動作しません。これはバックグラウンドページが実際には常にロードされたままではないからです。ブラウザ－は使用されていない場合はアンロードし、必要なときに復元することができます。これは拡張機能にはほとんど透過的ですが、いくつかのもの (JS タイマーを含む) はアンロード/リストアサイクル全体では動作しないので、バックグラウンドページは代わりにアラームを使うことを推奨します。これについての詳細は <a href="https://developer.chrome.com/extensions/background_migration">Migrate to Event Driven Background Scripts</a> にあります。</p> + +<p>この記事の執筆時点では、 Chrome だけが上記の挙動を示していました - Firefox はまだアンロード/リストアの挙動をしていないので、タイマーは動作するでしょう。しかし、いくつかの理由から WebExtensions でタイマーを使わないようにするのはまだ良い考えです。</p> + +<ol> + <li>Chrome との互換性のため</li> + <li>将来、動作が変更された場合に問題が発生する可能性があるため</li> +</ol> + +<h3 id="Maximum_delay_value" name="Maximum_delay_value">最大遅延時間</h3> + +<p>Internet Explorer、Chrome、Safari、Firefox を含むブラウザーは、内部で遅延時間を 32 ビット符号付き整数値で保存します。このため 2,147,483,647 ms (約 24.8 日) より大きな遅延時間を使用すると整数値がオーバーフローして、その結果直ちに実行されるタイムアウトになります。</p> + +<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('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新の仕様で、メソッドを <code>WindowOrWorkerGlobalScope</code> ミックスインに移動。</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>初回定義 (DOM Level 0)</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性表は構造化データから作成されています。データに協力したい場合は、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/Add-ons/Code_snippets/Timers">JavaScript timers</a></li> + <li><a href="/ja/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li> + <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> + <li><a href="/ja/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li> +</ul> |