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/window | |
| 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/window')
146 files changed, 11711 insertions, 0 deletions
diff --git a/files/ja/web/api/window/afterprint_event/index.html b/files/ja/web/api/window/afterprint_event/index.html new file mode 100644 index 0000000000..fae7e4e434 --- /dev/null +++ b/files/ja/web/api/window/afterprint_event/index.html @@ -0,0 +1,78 @@ +--- +title: 'Window: afterprint イベント' +slug: Web/API/Window/afterprint_event +tags: + - Event + - Reference + - イベント +translation_of: Web/API/Window/afterprint_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>afterprint</code></strong> イベントは、関連する文書の印刷が開始されたか、印刷プレビューが閉じた後に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("WindowEventHandlers/onafterprint", "onafterprint")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> の使用例:</p> + +<pre class="brush: js">window.addEventListener('afterprint', (event) => { + console.log('After print'); +});</pre> + +<p><code>onafterprint</code> イベントハンドラープロパティの使用例:</p> + +<pre class="brush: js">window.onafterprint = (event) => { + console.log('After print'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#event-afterprint')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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.Window.afterprint_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/beforeprint_event", "beforeprint")}}</li> +</ul> diff --git a/files/ja/web/api/window/alert/index.html b/files/ja/web/api/window/alert/index.html new file mode 100644 index 0000000000..d9b54c9c44 --- /dev/null +++ b/files/ja/web/api/window/alert/index.html @@ -0,0 +1,70 @@ +--- +title: window.alert +slug: Web/API/Window/alert +tags: + - API + - DOM + - Gecko + - Method + - Reference + - Window + - alert +translation_of: Web/API/Window/alert +--- +<div>{{ApiRef}}</div> + +<p><strong><code>Window.alert()</code></strong> メソッドは、オプションの指定されたコンテンツと OK ボタンを持つ警告ダイアログを表示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><code>window.alert(<em>message</em>);</code></pre> + +<ul> + <li><strong><code>message</code></strong> は、警告ダイアログに表示したいオプションの文字列または、文字列に変換されて表示されるオブジェクトです。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">window.alert("Hello world!"); +</pre> + +<p>以下のように表示されます。</p> + +<p><img alt="Image:AlertHelloWorld.png" src="/files/130/AlertHelloWorld.png"></p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>警告ダイアログは、メッセージの確認応答以外の、ユーザ側で応答を必要としないメッセージのために使われるべきです。</p> + +<p>ダイアログボックスはモーダルウィンドウです。つまりユーザーは、これを閉じないとプログラムの他のインターフェイス部分にアクセスする事ができません。ですから、ダイアログボックス (もしくは、モーダルウィンドウ) を生成する関数を過度に使用すべきではありません。</p> + +<p>Mozilla Chrome ユーザー (Firefox 拡張など) は、<a href="/ja/docs/NsIPromptService">nsIPromptService</a> メソッドを代わりに使うべきです。</p> + +<p>{{CompatChrome(46.0)}} 以降、このメソッドは、sandbox 属性の値が <code>allow-modal</code> でない限り、{{htmlelement("iframe")}} 内でブロックされます。</p> + +<p>{{gecko_minversion_inline("23.0")}} この引数は、仕様により必要に応じてオプションになりました。</p> + +<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('HTML WHATWG', 'timers-and-user-prompts.html#dom-alert', 'alert()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.confirm","confirm")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> + <li><a href="/ja/docs/Chrome">Mozilla Chrome</a> については、{{ifmethod("nsIPromptService","alert")}} と {{ifmethod("nsIPromptService","alertCheck")}} を参照してください。</li> +</ul> diff --git a/files/ja/web/api/window/animationcancel_event/index.html b/files/ja/web/api/window/animationcancel_event/index.html new file mode 100644 index 0000000000..f0a218fbe5 --- /dev/null +++ b/files/ja/web/api/window/animationcancel_event/index.html @@ -0,0 +1,92 @@ +--- +title: 'Window: animationcancel イベント' +slug: Web/API/Window/animationcancel_event +tags: + - API + - Animation + - CSS Animations + - CSS アニメーション + - Event + - Reference + - Window + - イベント +translation_of: Web/API/Window/animationcancel_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<p><strong><code>animationcancel</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が予期せず中断されたときに発生します。言い換えれば、 {{domxref("Window/animationend_event", "animationend")}} イベントを送出せずに実行が停止するときはいつでもです。これは {{cssxref("animation-name")}} が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationcancel","onanimationcancel")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationcancel_event">HTMLElement: animationcancel イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードはリスナーに <code>animationcancel</code> イベントを追加します。</p> + +<pre class="brush: js">window.addEventListener('animationcancel', () => { + console.log('アニメーションが取り消されました'); +});</pre> + +<p>同様に、 {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティを <code>addEventListener()</code> の代わりに使用するとこうなります。</p> + +<pre class="brush: js">document.onanimationcancel = () => { + console.log('アニメーションが取り消されました'); +};</pre> + +<p id="Live_example"><a href="/ja/docs/Web/API/HTMLElement/animationcancel_event#Live_example">このイベントのライブデモを参照してください。</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("CSS3 Animations", "#eventdef-animationevent-animationcancel")}}</td> + <td>{{Spec2("CSS3 Animations")}}</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.Window.animationcancel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Window/animationstart_event", "animationstart")}}, {{domxref("Window/animationend_event", "animationend")}}, {{domxref("Window/animationiteration_event", "animationiteration")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/animationcancel_event", "animationcancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationcancel_event", "animationcancel")}}</li> +</ul> diff --git a/files/ja/web/api/window/animationend_event/index.html b/files/ja/web/api/window/animationend_event/index.html new file mode 100644 index 0000000000..01f5153dcc --- /dev/null +++ b/files/ja/web/api/window/animationend_event/index.html @@ -0,0 +1,92 @@ +--- +title: 'Window: animationend event' +slug: Web/API/Window/animationend_event +tags: + - API + - Animation + - CSS Animations + - CSS アニメーション + - Event + - Reference + - Window + - イベント +translation_of: Web/API/Window/animationend_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>animationend</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が完了したときに発生します。アニメーションが完了前に中止された場合、例えば要素が DOM から削除されたりアニメーションがヨウ素から削除されたりした場合、 <code>animationend</code> イベントは発生しません。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationend","onanimationend")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationend_event">HTMLElement: animationend イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は <code>animationend</code> イベントを待ち受けます。</p> + +<pre class="brush: js">window.addEventListener('animationend', () => { + console.log('アニメーション終了'); +});</pre> + +<p>同様に、 <code>onanimationend</code> イベントハンドラープロパティを使用するとこうなります。</p> + +<pre class="brush: js">window.onanimationend = () => { + console.log('アニメーション終了'); +};</pre> + +<p id="Live_example"><a href="/ja/docs/Web/API/HTMLElement/animationend_event#Live_example">このイベントのライブデモを参照してください。</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("CSS3 Animations", "#eventdef-animationevent-animationend")}}</td> + <td>{{Spec2("CSS3 Animations")}}</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.Window.animationend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Window/animationstart_event", "animationstart")}}, {{domxref("Window/animationcancel_event", "animationcancel")}}, {{domxref("Window/animationiteration_event", "animationiteration")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/animationend_event", "animationend")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationend_event", "animationend")}}</li> +</ul> diff --git a/files/ja/web/api/window/animationiteration_event/index.html b/files/ja/web/api/window/animationiteration_event/index.html new file mode 100644 index 0000000000..b49bcb73da --- /dev/null +++ b/files/ja/web/api/window/animationiteration_event/index.html @@ -0,0 +1,98 @@ +--- +title: 'Window: animationiteration event' +slug: Web/API/Window/animationiteration_event +tags: + - API + - Animation + - CSS Animations + - CSS アニメーション + - Event + - Reference + - Window + - イベント +translation_of: Web/API/Window/animationiteration_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>animationiteration</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>の反復が1回分終了し、次の回が始まったときに発生します。このイベントは {{domxref("Window/animationend_event", "animationend")}} イベントと同時には発生せず、従って <code>animation-iteration-count</code> が1のアニメーションでは発生しません。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationiteration","onanimationiteration")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationiteration_event">HTMLElement: animationiteration イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードは <code>animationiteration</code> を使用して、アニメーションの反復が終了した回数を追跡します。</p> + +<pre class="brush: js">let iterationCount = 0; + +window.addEventListener('animationiteration', () => { + iterationCount++; + console.log(`アニメーション反復回数: ${iterationCount}`); +});</pre> + +<p>同様に、 <code>onanimationiteration</code> イベントハンドラープロパティを使用するとこうなります。</p> + +<pre class="brush: js">let iterationCount = 0; + +window.onanimationiteration = () => { + iterationCount++; + console.log(`アニメーション反復回数: ${iterationCount}`); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/animationiteration_event#Live_example">このイベントのライブデモを参照してください。</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("CSS3 Animations", "#eventdef-animationevent-animationiteration")}}</td> + <td>{{Spec2("CSS3 Animations")}}</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.Window.animationiteration_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Window/animationstart_event", "animationstart")}}, {{domxref("Window/animationend_event", "animationend")}}, {{domxref("Window/animationcancel_event", "animationcancel")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/animationiteration_event", "animationiteration")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationiteration_event", "animationiteration")}}</li> +</ul> diff --git a/files/ja/web/api/window/animationstart_event/index.html b/files/ja/web/api/window/animationstart_event/index.html new file mode 100644 index 0000000000..49e106249b --- /dev/null +++ b/files/ja/web/api/window/animationstart_event/index.html @@ -0,0 +1,94 @@ +--- +title: 'Window: animationstart イベント' +slug: Web/API/Window/animationstart_event +tags: + - API + - Animation + - CSS animation + - CSS アニメーション + - Reference + - Web + - Window + - イベント +translation_of: Web/API/Window/animationstart_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>animationstart</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>が開始したときに発生します。 {{cssxref("animation-delay")}} がある場合、このイベントは待ち時間が経過したときに一度発生します。待ち時間が負の数の場合、イベントは {{domxref("AnimationEvent/elapsedTime", "elapsedTime")}} が待ち時間の絶対値と等しくなったときに発生します (および、関連して、アニメーションはシーケンスの中でそのタイムインデックスに再生が始まります)。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>あり</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{domxref("AnimationEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onanimationstart","onanimationstart")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/animationstart_event">HTMLElement: animationstart イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードは <code>animationstart</code> イベントを待ち受けし、イベント発生時にメッセージを記録します。</p> + +<pre class="brush: js">window.addEventListener('animationstart', () => { + console.log('Animation started'); +}); +</pre> + +<p>同様に、 <code>onanimationstart</code> を使用するとこうなります。</p> + +<pre class="brush: js">window.onanimationstart = () => { + console.log('Animation started'); +}; +</pre> + +<p id="Live_example"><a href="/ja/docs/Web/API/HTMLElement/animationstart_event#Live_example">このイベントのライブデモを参照してください。</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("CSS3 Animations", "#eventdef-animationevent-animationstart")}}</td> + <td>{{Spec2("CSS3 Animations")}}</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.Window.animationstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS アニメーションの使用</a></li> + <li>{{domxref("AnimationEvent")}}</li> + <li>関連イベント: {{domxref("Window/animationend_event", "animationend")}}, {{domxref("Window/animationiteration_event", "animationiteration")}}, {{domxref("Window/animationcancel_event", "animationcancel")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/animationstart_event", "animationstart")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/animationstart_event", "animationstart")}}</li> +</ul> diff --git a/files/ja/web/api/window/appinstalled_event/index.html b/files/ja/web/api/window/appinstalled_event/index.html new file mode 100644 index 0000000000..3a47b5c67e --- /dev/null +++ b/files/ja/web/api/window/appinstalled_event/index.html @@ -0,0 +1,85 @@ +--- +title: 'Window: appinstalled イベント' +slug: Web/API/Window/appinstalled_event +tags: + - API + - Event + - Manifest + - Reference + - Web + - appinstalled + - events + - web manifest + - ウェブマニフェスト + - マニフェスト +translation_of: Web/API/Window/appinstalled_event +--- +<div>{{APIRef}}</div> + +<div> +<p><strong><code>appinstalled</code></strong> は <a href="/ja/docs/Web/Manifest">Web Manifest API</a> のイベントで、ブラウザーがあるページをアプリケーションとして成功裏にインストールしたとき発行されます。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラー</th> + <td>{{domxref("Window/onappinstalled", "onappinstalled")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>appinstalled</code> イベントは {{domxref("EventTarget/addEventListener", "addEventListener")}} メソッドで使用することができます。</p> + +<pre class="brush: js">window.addEventListener('appinstalled', function() { + console.log('アプリをインストールしてくれてありがとう！'); +});</pre> + +<p>または {{domxref("Window/onappinstalled", "onappinstalled")}} イベントハンドラープロパティを使用してください。</p> + +<pre class="brush: js">window.onappinstalled = function() { + console.log('アプリをインストールしてくれてありがとう！'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + <tr> + <td>{{SpecName('Manifest', '#dfn-appinstalled', 'appinstalled')}}</td> + <td>{{Spec2('Manifest')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden"> +<p>このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> +</div> + +<p>{{Compat("api.Window.onappinstalled")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連するイベントハンドラー、 {{domxref("Window.onappinstalled")}}</li> +</ul> diff --git a/files/ja/web/api/window/applicationcache/index.html b/files/ja/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..1acc4a641f --- /dev/null +++ b/files/ja/web/api/window/applicationcache/index.html @@ -0,0 +1,44 @@ +--- +title: window.applicationCache +slug: Web/API/Window/applicationCache +tags: + - API + - Deprecated + - HTML DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/applicationCache +--- +<div class="warning"> +<p><strong>重要</strong>: アプリケーションキャッシュは Firefox 44 で非推奨となり、 Firefox 60 以降では安全ではないコンテキストでは利用できなくなりました ({{bug(1354175)}}、現在は Nightly/Beta のみ)。ウェブサイトをオフラインで利用するために使用しないでください。 — 代わりに<a href="/ja/docs/Web/API/Service_Worker_API">サービスワーカー</a>の利用を検討してください。</p> +</div> + +<p>{{APIRef}}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウのアプリケーションキャッシュオブジェクトへの参照を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>cache</var> = window.applicationCache +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>cache</code> : <code>OfflineResourceList</code> へのオブジェクト参照です。</li> +</ul> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/HTML/Using_the_application_cache">アプリケーションキャッシュの使用</a></li> +</ul> diff --git a/files/ja/web/api/window/arguments/index.html b/files/ja/web/api/window/arguments/index.html new file mode 100644 index 0000000000..d964eb9cc1 --- /dev/null +++ b/files/ja/web/api/window/arguments/index.html @@ -0,0 +1,6 @@ +--- +title: window.arguments +slug: Web/API/Window/arguments +translation_of: Working_with_windows_in_chrome_code#Passing_data_between_windows +--- +<p><a href="/ja/docs/Working_with_windows_in_chrome_code#Passing_data_between_windows">『chrome コードでウィンドウを取り扱う』の頁の『ウィンドウ間でのデータのやり取り』の章</a>をご覧下さい。</p> diff --git a/files/ja/web/api/window/back/index.html b/files/ja/web/api/window/back/index.html new file mode 100644 index 0000000000..d4fa1c7947 --- /dev/null +++ b/files/ja/web/api/window/back/index.html @@ -0,0 +1,57 @@ +--- +title: window.back +slug: Web/API/Window/back +tags: + - API + - DOM + - Firefox + - Gecko + - Method + - Non-standard + - Obsolete + - Window + - back +translation_of: Web/API/Window/back +--- +<div>{{ApiRef}}{{Non-standard_header}}{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><strong>{{domxref("Window")}}</strong> インターフェイスの廃止済みで非標準の <code>back()</code> メソッドは、履歴で前のアイテムの window を返します。これは Firefox 固有のメソッドであり、Firefox 31 で削除しました。代わりに、標準の {{domxref("History.back", "history.back()")}} メソッドを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.back();</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>ありません。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>undefined</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、<code>back()</code> を呼び出して "戻る" ボタンのクリックを制御します。</p> + +<pre class="brush:js">function handleMyBackButton() { + if (canGoBack) { + window.back(); + } +}</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>どの仕様にも属していません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<p>この非標準メソッドは Firefox だけが実装しており、Firefox 31 で削除しました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("History.back()")}}</li> + <li>{{domxref("History.forward()")}}</li> +</ul> diff --git a/files/ja/web/api/window/beforeprint_event/index.html b/files/ja/web/api/window/beforeprint_event/index.html new file mode 100644 index 0000000000..eb17e08e4f --- /dev/null +++ b/files/ja/web/api/window/beforeprint_event/index.html @@ -0,0 +1,75 @@ +--- +title: 'Window: beforeprint イベント' +slug: Web/API/Window/beforeprint_event +tags: + - Event + - Reference +translation_of: Web/API/Window/beforeprint_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>beforeprint</code></strong> イベントは、関連する文書が印刷される直前や、印刷プレビューが開く直前に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>addEventListener()</code> の使用例:</p> + +<pre class="brush: js">window.addEventListener('beforeprint', (event) => { + console.log('Before print'); +});</pre> + +<p><code>onbeforeprint</code> イベントハンドラープロパティの使用例:</p> + +<pre class="brush: js">window.onbeforeprint = (event) => { + console.log('Before print'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#event-beforeprint')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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.Window.beforeprint_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/afterprint_event", "afterprint")}}</li> +</ul> diff --git a/files/ja/web/api/window/beforeunload_event/index.html b/files/ja/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..1a06ceb59e --- /dev/null +++ b/files/ja/web/api/window/beforeunload_event/index.html @@ -0,0 +1,103 @@ +--- +title: 'Window: beforeunload イベント' +slug: Web/API/Window/beforeunload_event +tags: + - Event + - Reference + - Window + - イベント +translation_of: Web/API/Window/beforeunload_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>beforeunload</code></strong> イベントは、ウィンドウ、文書、およびそのリソースがアンロードされる直前に発生します。</span>文書はまだ表示されており、この時点ではイベントはキャンセル可能です。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラー</th> + <td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントによって、ウェブページがダイアログボックスを表示し、ユーザーにページを終了するかどうかの確認が求めることができます。ユーザーが確認すれば、ブラウザーは新しいページへ遷移し、そうでなければ遷移をキャンセルします。</p> + +<p>仕様書によれば、確認ダイアログを表示するためにはイベントハンドラーでイベントの {{domxref("Event.preventDefault()", "preventDefault()")}} を呼び出すことになっています。</p> + +<p>しかし、すべてのブラウザーがこのメソッドに対応しているわけではなく、一部はイベントハンドラーに古い方法二つのうちの一つを実装するよう求めていることに注意してください。</p> + +<ul> + <li>イベントの <code>returnValue</code> プロパティに文字列を代入する</li> + <li>イベントハンドラーから文字列を返す</li> +</ul> + +<p>一部のブラウザーでは返された文字列を確認ダイアログで表示するために使用し、イベントハンドラーがユーザーに独自のメッセージを表示できるようにしていました。しかし、これは非推奨であり、すでに多くのブラウザーが対応していません。</p> + +<p>望ましくないポップアップに対処するために、ブラウザーはページが操作されていない限り、 <code>beforeunload</code> のイベントハンドラーで生成したプロンプトを表示しなかったり、全くプロンプトを表示しなかったりする可能性があります。</p> + +<p>イベントハンドラー/リスナーを <code>window</code> または<code>document</code> の <code>beforeunload</code> イベントに割り当てると、ブラウザーはメモリ内のページナビゲーションキャッシュ、例えば <a href="/ja/docs/Using_Firefox_1.5_caching">Firefox の Back-Forward キャッシュ</a>や <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit のページキャッシュ</a>などを使用することを防ぎます。</p> + +<p>HTML 仕様書は {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, {{domxref("window.prompt()")}} などのメソッドが、このイベントの実行中には無視されることがあることを示しています。詳しくは、 <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts">HTML 仕様書</a>をご覧ください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>HTML の仕様では、 {{domxref("Event.returnValue")}} を使用する代わりに {{domxref("Event.preventDefault()")}} メソッドを使用する必要があります。ただし、これはすべてのブラウザーで対応しているわけではありません。</p> + +<pre class="brush: js">window.addEventListener('beforeunload', (event) => { + // Cancel the event as stated by the standard. + event.preventDefault(); + // Chrome requires returnValue to be set. + event.returnValue = ''; +}); +</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("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td> + <td>{{Spec2("HTML5 W3C")}}</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.Window.beforeunload_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li> + <li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li> + <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li> +</ul> diff --git a/files/ja/web/api/window/blur/index.html b/files/ja/web/api/window/blur/index.html new file mode 100644 index 0000000000..d2cd6d6362 --- /dev/null +++ b/files/ja/web/api/window/blur/index.html @@ -0,0 +1,23 @@ +--- +title: window.blur +slug: Web/API/Window/blur +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/blur +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ウィンドウからフォーカスをはずします。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.blur()</pre> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">window.blur();</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>window.blur() メソッドは、ユーザが現在のウィンドウからフォーカスをはずす動作と同じです。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/blur_event/index.html b/files/ja/web/api/window/blur_event/index.html new file mode 100644 index 0000000000..cc0be2e055 --- /dev/null +++ b/files/ja/web/api/window/blur_event/index.html @@ -0,0 +1,126 @@ +--- +title: 'Window: blur イベント' +slug: Web/API/Window/blur_event +tags: + - API + - Event + - FocusEvent + - Reference + - Web + - Window + - blur + - onblur + - イベント +translation_of: Web/API/Window/blur_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>blur</code></strong> イベントは、要素がフォーカスを失ったときに発生します。</p> + +<p><code>blur</code> の反対は {{domxref("Window/focus_event", "focus")}} です。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("FocusEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onblur", "onblur")}}</td> + </tr> + <tr> + <th>同期 / 非同期</th> + <td>同期</td> + </tr> + <tr> + <th>Composed</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<p>この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して {{domxref("Window/focus_event", "focus")}} および <code>blur</code> イベントを監視します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p id="log">Click on this document to give it focus.</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.paused { + background: #ddd; + color: #555; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function pause() { + document.body.classList.add('paused'); + log.textContent = 'FOCUS LOST!'; +} + +function play() { + document.body.classList.remove('paused'); + log.textContent = 'This document has focus. Click outside the document to lose focus.'; +} + +const log = document.getElementById('log'); + +window.addEventListener('blur', pause); +window.addEventListener('focus', play);</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Live_example")}}</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("UI Events", "#event-type-blur")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>Added info that this event is composed.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-blur")}}</td> + <td>{{Spec2("DOM3 Events")}}</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.Window.blur_event")}}</p> + +<p>このイベントが処理されている間の {{DOMxRef("Document.activeElement")}} の値はブラウザーによって異なります ({{bug(452307)}})。 IE10 はフォーカスが移動する先の要素を設定しますが、 Firefox および Chrome はふつう、文書の <code>body</code> を設定します。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/focus_event", "focus")}}</li> + <li><code>Element</code> を対象としたこのイベント: {{domxref("Element/blur_event", "blur")}} イベント</li> +</ul> diff --git a/files/ja/web/api/window/cancelanimationframe/index.html b/files/ja/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..98bea1681c --- /dev/null +++ b/files/ja/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,122 @@ +--- +title: window.cancelAnimationFrame +slug: Web/API/Window/cancelAnimationFrame +tags: + - API + - DOM + - Method +translation_of: Web/API/Window/cancelAnimationFrame +--- +<div>{{APIRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>{{domxref("window.requestAnimationFrame()")}} の呼び出しによりスケジュールされたフレームアニメーションのリクエストをキャンセルします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>requestID</code></dt> + <dd>コールバックがリクエストした {{domxref("window.requestAnimationFrame()")}} の呼び出しにより返された ID 値。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || + window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; + +var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame; + +var start = window.mozAnimationStartTime; // Firefox のみでサポート。他のブラウザーでは代わりに Date.now() などを使用してください。 + +var myReq; + +function step(timestamp) { + var progress = timestamp - start; + d.style.left = Math.min(progress / 10, 200) + 'px'; + if (progress < 2000) { + myReq = requestAnimationFrame(step); + } +} +myReq = requestAnimationFrame(step); + +cancelAnimationFrame(myReq); +</pre> + +<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>21.0 {{property_prefix("webkit")}}<br> + 24.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}<br> + 23.0</td> + <td>10</td> + <td>15.0</td> + <td>6.0 {{property_prefix("webkit")}}<br> + 6.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>4.4</td> + <td>33</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}<br> + 23.0</td> + <td>10</td> + <td>33</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/animation-timing/#cancelAnimationFrame", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.mozAnimationStartTime")}}</li> + <li>{{domxref("window.requestAnimationFrame()")}}</li> +</ul> diff --git a/files/ja/web/api/window/captureevents/index.html b/files/ja/web/api/window/captureevents/index.html new file mode 100644 index 0000000000..6a38e6eb62 --- /dev/null +++ b/files/ja/web/api/window/captureevents/index.html @@ -0,0 +1,53 @@ +--- +title: window.captureEvents +slug: Web/API/Window/captureEvents +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/captureEvents +--- +<p> </p> +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>{{ Obsolete_header() }} window に指定したタイプの全てのイベントをキャプチャさせるようにします。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval">window.captureEvents(<i>eventType</i>) +</pre> +<p><code>eventType</code> は、次の値の組み合わせを取ります。: <code>Event.ABORT</code>, <code>Event.BLUR</code>, <code>Event.CLICK</code>, <code>Event.CHANGE</code>, <code>Event.DBLCLICK</code>, <code>Event.DRAGDDROP</code>, <code>Event.ERROR</code>, <code>Event.FOCUS</code>, <code>Event.KEYDOWN</code>, <code>Event.KEYPRESS</code>, <code>Event.KEYUP</code>, <code>Event.LOAD</code>, <code>Event.MOUSEDOWN</code>, <code>Event.MOUSEMOVE</code>, <code>Event.MOUSEOUT</code>, <code>Event.MOUSEOVER</code>, <code>Event.MOUSEUP</code>, <code>Event.MOVE</code>, <code>Event.RESET</code>, <code>Event.RESIZE</code>, <code>Event.SELECT</code>, <code>Event.SUBMIT</code>, <code>Event.UNLOAD</code>.</p> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre><html> + <script> + function reg() { + window.captureEvents(Event.CLICK); + window.onclick = page_click; + } + + function page_click() { + alert('ページクリックイベントが検出されました！'); + } + </script> + + <body onload="reg();"> + <p>このページの任意の場所をクリックしてください。</p> + </body> +</html> +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<div class="note"> + <p>W3C DOM Events メソッドを支持するにあたり、このメソッドは Gecko 1.9 では廃止されました（<a href="ja/DOM/element.addEventListener">addEventListener</a> を参照してください）。このメソッドのサポートは <a href="ja/Gecko">Gecko</a> 1.9 で <a href="ja/Gecko_1.9_Changes_affecting_websites">削除されました</a>。</p> +</div> +<p>（ボタンのクリックや現在のドキュメントからフォーカスを移動させたりするような）ユーザの行動によって DOM 内で発生したイベントは、イベントを発生させたオブジェクトに到達する前に、通常、上方向の <a href="ja/DOM/window">window</a> や <a href="ja/DOM/document">document</a> オブジェクトを最初に通ります。</p> +<p><a href="ja/DOM/window">window</a> 上で <code>captureEvents()</code> メソッドを呼び出すとき、指定するタイプのイベント（例えば、<code>Event.CLICK</code>）が階層の「より低い」オブジェクトを通ることはありません。通常のようにイベントを「バブルアップさせる」ためには、イベントを補足している window 上で <a href="ja/DOM/window.releaseEvents">window.releaseEvents()</a> メソッド（{{ Obsolete_inline() }}）を使わなければなりません。</p> +<p>注：次の構文を使用することでこのメソッドにイベントのリストを渡すことができます。: window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP).</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.captureEvents", "pl": "pl/DOM/window.captureEvents" } ) }}</p> diff --git a/files/ja/web/api/window/close/index.html b/files/ja/web/api/window/close/index.html new file mode 100644 index 0000000000..4a9b02757c --- /dev/null +++ b/files/ja/web/api/window/close/index.html @@ -0,0 +1,76 @@ +--- +title: window.close +slug: Web/API/Window/close +tags: + - API + - DOM + - Gecko + - Method + - Reference + - Window +translation_of: Web/API/Window/close +--- +<p>{{APIRef}}</p> + +<p><code><strong>Window.close()</strong></code> メソッドは、現在のウィンドウ、またはそのページ上で呼び出されたウィンドウを閉じます。</p> + +<p>このメソッドが許可されるのは、{{domxref("window.open()")}} メソッドを用いたスクリプトにより開かれたウィンドウに対する呼び出しのみです。ウィンドウがスクリプトにより開かれたものでない場合、次のようなエラーがコンソールに表示されます: <code>スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。</code></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.close();</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Closing_a_window_opened_with_window.open.28.29" name="Closing_a_window_opened_with_window.open.28.29"><code>window.open()</code> で開かれたウィンドウを閉じる</h3> + +<p>この例は、ウィンドウを開くメソッドと、そのウィンドウを閉じるメソッドです。これは、{{domxref("window.open()")}} の呼び出しにより開かれたウィンドウを閉じる <code>Window.close()</code> の使い方を実演します。</p> + +<pre class="brush: js">//開いたウィンドウへの参照を保持するグローバル変数 +var openedWindow; + +function openWindow() { + openedWindow = window.open('moreinfo.htm'); +} + +function closeOpenedWindow() { + openedWindow.close(); +} +</pre> + +<h3 id="Closing_the_current_window" name="Closing_the_current_window">現在のウィンドウを閉じる</h3> + +<p>以前は、<code>window</code> <strong>インスタンス</strong>の <code>close()</code> を呼び出す代わりに <code>window</code> オブジェクトの <code>close()</code> メソッドを直接呼び出した場合、ブラウザは、スクリプトで開いたウィンドウであるかどうかに関わらず、最前面のウィンドウを閉じていました。セキュリティ上の理由により、スクリプトにより開いたものでないウィンドウを閉じることは許可されなくなりました (Firefox 46.0.1: スクリプトは、そのスクリプトが開いたものでないウィンドウを閉じることができません)。</p> + +<pre class="brush: js">function closeCurrentWindow() { + window.close(); +} +</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('HTML WHATWG', '#dom-window-close', 'window.close()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + + + +<p>{{Compat("api.Window.close")}}</p> diff --git a/files/ja/web/api/window/closed/index.html b/files/ja/web/api/window/closed/index.html new file mode 100644 index 0000000000..78d9140858 --- /dev/null +++ b/files/ja/web/api/window/closed/index.html @@ -0,0 +1,57 @@ +--- +title: window.closed +slug: Web/API/Window/closed +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/closed +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>この読取専用プロパティは、対象ウィンドウが閉じられているかどうかを示します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">var <var>isClosed</var> = <var>windowRef</var>.closed; +</pre> +<dl> + <dt> + <code>isClosed</code></dt> + <dd> + 真偽値。次の何れかの値を取り得ます : + <ul> + <li><code>true</code>: ウィンドウが閉じられている事を示す</li> + <li><code>false</code>: ウィンドウが開いている事を示す</li> + </ul> + </dd> +</dl> +<h2 id="Examples" name="Examples">例</h2> +<h3 id="Change_the_URL_of_a_window_from_a_popup" name="Change_the_URL_of_a_window_from_a_popup">ポップアップからウィンドウの URL を変化させる</h3> +<p>次の例は、どのようにポップアップウィンドウでそれを開いたウィンドウの URL を変化させるかというデモです。URL を変化させる前に、 {{domxref("window.opener")}} プロパティを用いて、現在のウィンドウがそのポップアップを開いたウィンドウであるどうか、そして、その開いた側のウィンドウが閉じられていないかをチェックします。:</p> +<pre class="brush:js">// 開いた側のウィンドウが存在するか、かつ、閉じられていないかを調べます。 +if (window.opener && !window.opener.closed) { + window.opener.location.href = "http://www.mozilla.org"; +}</pre> +<p>ポップアップはそれを開いたウィンドウにしかアクセスできないことに注意してください。</p> +<h3 id="Refreshing_a_previously_opened_popup" name="Refreshing_a_previously_opened_popup">以前に開いたポップアップを更新する</h3> +<p>この例では、関数 <code>refreshPopupWindow()</code> が ポップアップのデータを更新するために ポップアップの location オブジェクト中の <code>reload</code> メソッドを呼び出します。ポップアップがまだ開かれていない場合、または、ユーザがそれを閉じてしまっている場合は、新しいウィンドウが開かれます。</p> +<pre class="brush:js">var popupWindow = null; + +function refreshPopupWindow() { + if (popupWindow && !popupWindow.closed) { + // popupWindow が開いている場合、それを更新します + popupWindow.location.reload(true); + } else { + // 新しいウィンドウを開きます。 + popupWindow = window.open("popup.html","dataWindow"); + } +} +</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>DOM Level 0。 <code>window.closed</code> は、W3C の仕様や技術勧告に含まれるものではありません。</p> +<h2 id="See also" name="See also">関連情報</h2> +<ul> + <li><a href="http://msdn.microsoft.com/ja-jp/library/ms533574.aspx">MSDN window.closed</a></li> +</ul> diff --git a/files/ja/web/api/window/confirm/index.html b/files/ja/web/api/window/confirm/index.html new file mode 100644 index 0000000000..7cb34167be --- /dev/null +++ b/files/ja/web/api/window/confirm/index.html @@ -0,0 +1,69 @@ +--- +title: window.confirm +slug: Web/API/Window/confirm +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Window/confirm +--- +<div>{{ApiRef("Window")}}</div> + +<p><span class="seoSummary"><code><strong>Window.confirm()</strong></code> メソッドは、メッセージと、OK, キャンセルの 2 つのボタンを持つモーダルダイアログを表示します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="notranslate"><em>result</em> = window.confirm(<em>message</em>); +</pre> + +<ul> + <li><code>message</code> は、ダイアログ内に表示される文字列です。</li> + <li><code>result</code> は、OK (<code>true</code>) とキャンセル (<code>false</code>) のどちらが選択されたかを示す真偽値です。ブラウザがページ内ダイアログを拒否している場合、 <code>result</code> は常に <code>false</code> です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="notranslate">if (window.confirm("Do you really want to leave?")) { + window.open("exit.html", "Thanks for Visiting!"); +} +</pre> + +<p>結果</p> + +<p><img alt="firefox confirm" src="https://mdn.mozillademos.org/files/7163/firefoxcomfirmdialog_zpsf00ec381.png" style="height: 119px; width: 354px;"><br> + </p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span> ダイアログボックスはモーダルウィンドウです。つまり閲覧者は、これを閉じないとプログラムの他のインタフェース部分にアクセスする事ができません。したがって、ダイアログボックス（もしくは、モーダルウィンドウ）を生成する関数を乱用するべきではありません。何にせよ、<a href="http://alistapart.com/article/neveruseawarning">確認を目的としたダイアログボックスの使用を避けるべき</a>それ相応の理由があります。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Window.confirm")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.alert","alert")}}</li> + <li>{{domxref("window.prompt","prompt")}}</li> +</ul> diff --git a/files/ja/web/api/window/console/index.html b/files/ja/web/api/window/console/index.html new file mode 100644 index 0000000000..4e37459fed --- /dev/null +++ b/files/ja/web/api/window/console/index.html @@ -0,0 +1,48 @@ +--- +title: Window.console +slug: Web/API/Window/console +translation_of: Web/API/Window/console +--- +<p>{{ APIRef }}</p> + +<p>読み取り専用プロパティの<strong><code>Window.console</code></strong>は、ブラウザのコンソールへ情報を出力するメソッドを提供する{{domxref("Console")}}オブジェクトへの参照を返します。これらのメソッドで出力される情報はデバッグ目的のものであり、ユーザーへ情報を提示するために使われるべきではありません。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console; +</pre> + +<h2 id="Example" name="Example">Examples</h2> + +<h3 id="Logging_to_console">Logging to console</h3> + +<p>一つ目の例はテキストをコンソールに出力します。</p> + +<pre class="brush: js">console.log("An error occurred while loading the content");</pre> + +<p>次の例では開閉ウィジェットによって要素が展開可能な状態でオブジェクトをコンソールに出力します。</p> + +<pre class="brush: js">console.dir(someObject);</pre> + +<p>より詳細な例については{{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}}をご参照下さい。</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Console API')}}</td> + <td>{{Spec2('Console API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another.</p> +</div> diff --git a/files/ja/web/api/window/content/index.html b/files/ja/web/api/window/content/index.html new file mode 100644 index 0000000000..ab3098dd36 --- /dev/null +++ b/files/ja/web/api/window/content/index.html @@ -0,0 +1,33 @@ +--- +title: window.content +slug: Web/API/Window/content +tags: + - DOM + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/content +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>主となるコンテンツウィンドウを表す <a href="ja/DOM/window">Window</a> オブジェクトを返します。これは、<code>type="content-primary"</code> 属性を持つ <code><browser></code> (もしくは <code>tabbrowser</code> や <code><iframe></code>) 要素のある XUL ウィンドウにおいて役立ちます。最も有名な例は、Firefox のメインウィンドウである <code>browser.xul</code> です。このような場合、<code>content</code> はブラウザに現在表示されているドキュメントを表す <code>Window</code> オブジェクトへの参照を返します。これは、<code><var>browserRef</var>.contentWindow</code> のショートカットです。</p> +<p>特権のないコンテンツ (Web ページ) では、<code>content</code> は通常 <a href="ja/DOM/window.top">top</a> と同じです。ただし、Web ページがサイドバーに読み込まれた場合を除きます。このときの <code>content</code> は、現在選択しているタブの <code>Window</code> を参照しています。</p> +<p>いくつかの例では、<code>content</code> の代わりに <code>_content</code> を使用しています。しかし、後者は長い間非推奨とされています。ですから、新しいコードでは <code>content</code> を使うべきです。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval">var <var>windowObject</var> = window.content; +</pre> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<p>以下のコードを <code><browser type="content-primary"/></code> 要素を持つ chrome XUL ウィンドウで実行すると、ブラウザで現在表示されているページの最初の div 要素の周囲に赤い枠が描画されます。</p> +<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; +</pre> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>W3C の仕様の一部ではありません。</p> +<p>{{ 英語版章題("See also") }}</p> +<h3 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">参照</h3> +<ul> + <li><a href="/ja/docs/Working_with_windows_in_chrome_code">chrome コードでウィンドウを取り扱う</a></li> + <li>特権コードからコンテンツのドキュメントにアクセスするときは、<a href="/ja/docs/XPCNativeWrapper">XPCNativeWrapper</a> について知っておいてください。</li> +</ul> diff --git a/files/ja/web/api/window/controllers/index.html b/files/ja/web/api/window/controllers/index.html new file mode 100644 index 0000000000..1dc286147a --- /dev/null +++ b/files/ja/web/api/window/controllers/index.html @@ -0,0 +1,42 @@ +--- +title: window.controllers +slug: Web/API/Window/controllers +tags: + - DOM + - Gecko + - 要更新 +translation_of: Web/API/Window/controllers +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>Returns the XUL controllers of the chrome window.</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>controllers</var> = window.controllers +</pre> + +<ul> + <li><code>controllers</code> is an object of type <a href="/ja/docs/XULControllers"><code>XULControllers</code></a> (<a href="/ja/docs/XPCOM_Interface_Reference/nsIControllers"><code>nsIControllers</code></a>).</li> +</ul> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>XUL-specific. Not part of specification.</p> + +<div class="note"> +<p>By default, a window's controller contains the code that supports the global window commands.</p> + +<p>Chrome code can add controllers (to be used in conjunction with the goDoCommand and goUpdateCommand functions in globalOverlay.js).</p> + +<p>However, the added controllers must be explicitly removed when the window is unloaded, as this is not done automatically.</p> + +<p>Each missing removal can cause</p> +<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>: + +<pre class="bz_comment_text" id="comment_text_0">ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre> +</div> + +<p> </p> diff --git a/files/ja/web/api/window/copy_event/index.html b/files/ja/web/api/window/copy_event/index.html new file mode 100644 index 0000000000..9c31741043 --- /dev/null +++ b/files/ja/web/api/window/copy_event/index.html @@ -0,0 +1,77 @@ +--- +title: 'Window: copy イベント' +slug: Web/API/Window/copy_event +tags: + - API + - Clippboard API + - Event + - Reference + - Web + - Window + - copy + - イベント +translation_of: Web/API/Window/copy_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>copy</code></strong> イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を実行したときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、コピー操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">window.addEventListener('copy', (event) => { + console.log('copy action initiated') +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-copy')}}</td> + <td>{{Spec2('Clipboard API')}}</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.Window.copy_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/copy_event", "copy")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/copy_event", "copy")}}</li> +</ul> diff --git a/files/ja/web/api/window/crypto/index.html b/files/ja/web/api/window/crypto/index.html new file mode 100644 index 0000000000..daa31c46d2 --- /dev/null +++ b/files/ja/web/api/window/crypto/index.html @@ -0,0 +1,74 @@ +--- +title: window.crypto +slug: Web/API/Window/crypto +tags: + - API + - HTML DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/crypto +--- +<div>{{APIRef}}</div> + +<p><code>Window.crypto</code> 読み取り専用プロパティは、グローバルオブジェクトに関連付けられた {{domxref("Crypto")}} オブジェクトを返します。このオブジェクトは、ウェブページが暗号に関連したサービスにアクセスできるようにします。 {{domxref("Window.crypto")}} プロパティ自体は読み取り専用ですが、そのメソッドすべて(加えて子オブジェクトのメソッドと {{domxref("SubtleCrypto")}} )は読み取り専用では有りません。故に polyfill による攻撃に対し脆弱です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // for IE 11 +</pre> + +<h2 id="Example" name="Example">例</h2> + +<h4 id="domxref(Window.crypto)_プロパティを使用して_getRandomValues()_メソッドにアクセスする">{{domxref("Window.crypto")}} プロパティを使用して <a href="/ja/docs/Web/API/RandomSource/getRandomValues">getRandomValues()</a> メソッドにアクセスする</h4> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js">genRandomNumbers = function getRandomNumbers() { + var array = new Uint32Array(10); + window.crypto.getRandomValues(array); + + var randText = document.getElementById("myRandText"); + randText.innerHTML = "The random numbers are: " + for (var i = 0; i < array.length; i++) { + randText.innerHTML += array[i] + " "; + } +}</pre> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html"><p id="myRandText">The random numbers are: </p> +<button type="button" onClick='genRandomNumbers()'>Generate 10 random numbers</button></pre> + +<h3 id="Result" name="Result">実行結果</h3> + +<p>{{ EmbedLiveSample('Example') }}</p> + +<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("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td> + <td>{{Spec2("Web Crypto API")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + + + +<p>{{Compat("api.Window.crypto")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window")}} グローバルオブジェクト</li> +</ul> diff --git a/files/ja/web/api/window/customelements/index.html b/files/ja/web/api/window/customelements/index.html new file mode 100644 index 0000000000..68440b9170 --- /dev/null +++ b/files/ja/web/api/window/customelements/index.html @@ -0,0 +1,73 @@ +--- +title: Window.customElements +slug: Web/API/Window/customElements +tags: + - API + - CustomElementRegistry + - Webコンポーネント + - Window + - custom elements + - customElements + - プロパティ + - リファレンス +translation_of: Web/API/Window/customElements +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">{{domxref("Window")}} インターフェイスの読み取り専用 <code>customElements</code> プロパティは、 新しい<a href="/en-US/docs/Web/Web_Components/Using_custom_elements">カスタムエレメント</a>を登録し、かつ以前に登録したカスタムエレメントに関する情報を取得する事ができる {{domxref("CustomElementRegistry")}} オブジェクトへのリファレンスを返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">let customElementRegistry = window.customElements;</pre> + +<h3 id="戻り値">戻り値</h3> + +<p>{{domxref("CustomElementRegistry")}} オブジェクトは現在の window の カスタムエレメントレジストリ を表すインスタンスです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このプロパティが使われている最も一般的な例は、新しいカスタムエレメントを定義・登録するために {{domxref("CustomElementRegistry.define()")}} メソッドにアクセスすることです, 例えば:</p> + +<pre class="brush: js">let customElementRegistry = window.customElements; +customElementRegistry.define('my-custom-element', MyCustomElement);</pre> + +<p>しかし、通常は以下のように短縮されます:</p> + +<pre class="brush: js">customElements.define('element-details', + class extends HTMLElement { + constructor() { + super(); + const template = document + .getElementById('element-details-template') + .content; + const shadowRoot = this.attachShadow({mode: 'open'}) + .appendChild(template.cloneNode(true)); + } +});</pre> + +<p>我々の <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> リポジトリにより多くの使用例がありますのでご参照ください。</p> + +<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("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2> + +<div> + + +<p>{{Compat("api.Window.customElements")}}</p> +</div> diff --git a/files/ja/web/api/window/cut_event/index.html b/files/ja/web/api/window/cut_event/index.html new file mode 100644 index 0000000000..729b3fe069 --- /dev/null +++ b/files/ja/web/api/window/cut_event/index.html @@ -0,0 +1,77 @@ +--- +title: 'Window: cut イベント' +slug: Web/API/Window/cut_event +tags: + - API + - Clippboard API + - Cut + - Event + - Reference + - Web + - Window + - イベント +translation_of: Web/API/Window/cut_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>cut</code></strong> イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を実行したときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("HTMLElement/oncut", "oncut")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、切り取り操作の意図の対象である {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/ja/docs/Web/API/Element/cut_event">Element: cut イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">window.addEventListener('cut', (event) => { + console.log('cut action initiated') +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-cut')}}</td> + <td>{{Spec2('Clipboard API')}}</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.Window.cut_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/cut_event", "cut")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/cut_event", "cut")}}</li> +</ul> diff --git a/files/ja/web/api/window/defaultstatus/index.html b/files/ja/web/api/window/defaultstatus/index.html new file mode 100644 index 0000000000..b1bf126298 --- /dev/null +++ b/files/ja/web/api/window/defaultstatus/index.html @@ -0,0 +1,38 @@ +--- +title: defaultStatus +slug: Web/API/Window/defaultStatus +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/defaultStatus +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>与えられたウィンドウのステータスバーのテキストを取得/設定します。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>sMsg</i> = window.defaultStatus +window.defaultStatus =<i>sMsg</i> +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3> +<ul> + <li><code>sMsg</code> は、ステータスバーでデフォルトで表示されるテキストを含む文字列です。</li> +</ul> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre><html> + <body onload="window.defaultStatus='hello!';"/> + <button onclick="window.confirm('Are you sure you want to quit?');">confirm</button> + </body> +</htm> +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>一度開いたウィンドウのステータスバーのテキストを設定するには、<a href="ja/DOM/window.status">window.status</a> を使用してください。</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/devicemotion_event/index.html b/files/ja/web/api/window/devicemotion_event/index.html new file mode 100644 index 0000000000..e17af6d8b2 --- /dev/null +++ b/files/ja/web/api/window/devicemotion_event/index.html @@ -0,0 +1,78 @@ +--- +title: 'Window: devicemotion イベント' +slug: Web/API/Window/devicemotion_event +tags: + - API + - Device Orientation API + - Sensors + - events +translation_of: Web/API/Window/devicemotion_event +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary"><code>devicemotion</code> イベントは、一定の間隔で発行され、その時点で端末が受けている加速度の物理的な力の量を示します。また、利用可能であれば、回転率に関する情報も提供します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DeviceMotionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Window.ondevicemotion")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">function handleMotionEvent(event) { + + var x = event.accelerationIncludingGravity.x; + var y = event.accelerationIncludingGravity.y; + var z = event.accelerationIncludingGravity.z; + + // Do something awesome. +} + +window.addEventListener("devicemotion", handleMotionEvent, true); +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Device Orientation", "#devicemotion", "DeviceMotion event")}}</td> + <td>{{Spec2("Device Orientation")}}</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.Window.devicemotion_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window/deviceorientation_event", "deviceorientation")}}</li> + <li><a class="external" href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></li> +</ul> diff --git a/files/ja/web/api/window/deviceorientation_event/index.html b/files/ja/web/api/window/deviceorientation_event/index.html new file mode 100644 index 0000000000..7f54466091 --- /dev/null +++ b/files/ja/web/api/window/deviceorientation_event/index.html @@ -0,0 +1,86 @@ +--- +title: 'Window: deviceorientation イベント' +slug: Web/API/Window/deviceorientation_event +tags: + - Device Orientation API + - Sensors + - Window Event + - events +translation_of: Web/API/Window/deviceorientation_event +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary"><code>deviceorientation</code> イベントは、端末の現在の向きを地球座標フレームと比較した場合に、方角センサーから最新のデータが得られた場合に発生します。このデータは端末内部の磁力計から収集されます。</span>詳細については、<a href="/ja/docs/DOM/Orientation_and_motion_data_explained">向きと動きのデータの説明</a>を参照してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("DeviceOrientationEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("window.ondeviceorientation")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">if (window.DeviceOrientationEvent) { + window.addEventListener("deviceorientation", function(event) { + // alpha: rotation around z-axis + var rotateDegrees = event.alpha; + // gamma: left to right + var leftToRight = event.gamma; + // beta: front back motion + var frontToBack = event.beta; + + handleOrientationEvent(frontToBack, leftToRight, rotateDegrees); + }, true); +} + +var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) { + // do something amazing +}; +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Device Orientation", "#deviceorientation", "DeviceOrientation event")}}</td> + <td>{{Spec2("Device Orientation")}}</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.Window.deviceorientation_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window/devicemotion_event", "devicemotion")}}</li> + <li><a href="/ja/docs/Web/API/Detecting_device_orientation">端末の向きの検出</a></li> + <li><a href="/ja/docs/Web/Guide/Events/Orientation_and_motion_data_explained">向きと動きのデータの説明</a></li> + <li>デスクトップブラウザーで orientation イベントのシミュレーションを行う <a href="http://louisremi.github.com/orientation-devtool/">orientation-devtool</a></li> +</ul> diff --git a/files/ja/web/api/window/devicepixelratio/index.html b/files/ja/web/api/window/devicepixelratio/index.html new file mode 100644 index 0000000000..f1bd7c045b --- /dev/null +++ b/files/ja/web/api/window/devicepixelratio/index.html @@ -0,0 +1,191 @@ +--- +title: Window.devicePixelRatio +slug: Web/API/Window/devicePixelRatio +tags: + - API + - Adaptive Design + - Property + - Read-only + - Reference + - Window + - devicePixelRatio + - pixel + - ratio + - resolution +translation_of: Web/API/Window/devicePixelRatio +--- +<p>{{APIRef}}</p> + +<p><span class="seoSummary">{{domxref("Window")}}プロパティの<code><strong>devicePixelRatio</strong></code>は現在のディスプレイにおけるCSS解像度と物理解像度の比を返します。</span> これは物理1ピクセルの大きさに対するCSS1ピクセルの大きさの比率と考えることもできます。もっと簡単に言うと、CSS上の1pxが物理ピクセルいくつで表示されているかという値です。</p> + +<p>これは一般的なディスプレイと、HiDPI(高DPI)やRetinaのように同じ大きさのオブジェクトを描画するのにより多くのピクセルを使って鮮明さを得ているディスプレイとの差異を扱うのに便利です。</p> + +<p>{{domxref("Window.matchMedia", "window.matchMedia()")}} を使うと、<code>devicePixelRatio</code> の値の変化（例えば、ユーザーが異なるピクセル解像度の画面へウィンドウをドラッグした時など）を検知することができます。{{anch("Monitoring screen resolution or zoom level changes", "後述の例")}}を参照して下さい。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em><var>value</var></em> = window.devicePixelRatio; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>倍精度浮動小数点の値であり、CSS ピクセル解像度に対するディスプレイの物理的なピクセル解像度の比率を表します。この値が 1 であることは、それが伝統的な 96 DPI (プラットフォームによっては 76 DPI) であることを意味し、2 であることは、HiDPI やレティナのディスプレイであると考えられます。それ以外の値が返されることもあり、それは一般的でない低解像度のディスプレイの場合や、より考えられるのはスクリーンが標準的な 96 または 76 DPI の解像度の単純な 2 倍よりも高いピクセル密度を持つ場合です。</p> + +<h2 id="Examples" name="Examples">使用例</h2> + +<h3 id="Correcting_resolution_in_a_<canvas>" name="Correcting_resolution_in_a_<canvas>"><canvas> の解像度を補正する</h3> + +<p>レティナでは <code>canvas</code> がぼやけて見えることがあるでしょう。<code>window.devicePixelRatio</code>を使うことで、鮮明に表示するために必要なピクセル密度を調べます。</p> + +<h4 id="HTML">HTML</h4> + +<pre><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre><code>var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +</code> +// 表示サイズを設定(CSSにおけるピクセル数です)。 +var size = 200; +canvas.style.width = size + "px"; +canvas.style.height = size + "px"; + +// メモリ上における実際のサイズを設定(ピクセル密度の分だけ倍増させます)。 +var scale = window.devicePixelRatio; // レティナでこの値を1にするとぼやけたcanvasになります +canvas.width = size * scale; +canvas.height = size * scale; + +// CSS上のピクセル数を前提としているシステムに合わせます。 +ctx.scale(scale, scale); + +ctx.fillStyle = "#bada55"; +ctx.fillRect(10, 10, 300, 300); +ctx.fillStyle = "#ffffff"; +ctx.font = '18px Arial'; +ctx.textAlign = 'center'; +ctx.textBaseline = 'middle'; + +var x = size / 2; +var y = size / 2; + +var textString = "I love MDN"; +ctx.fillText(textString, x, y); +</pre> + +<p><a href="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png"><img alt="この画像は、レティナディスプレイにおける異なる値の影響を表すものです。" src="https://mdn.mozillademos.org/files/15023/devicePixelRation%20Diff..png" style="height: 57px; width: 600px;"></a></p> + +<h3 id="Monitoring_screen_resolution_or_zoom_level_changes" name="Monitoring_screen_resolution_or_zoom_level_changes">画面解像度やズームレベルの変化を監視する</h3> + +<p>この例では、<code>devicePixelRatio</code> の値をチェックして必要な変化に対処できるよう、メディアクエリを設定してデバイス解像度がいつ変化するかを監視します。</p> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>この JavaScript のコードは、デバイス解像度を監視するメディアクエリを作り、<code>devicePixelRatio</code> の値が変化したときはいつでもそれをチェックします。</p> + +<pre class="brush: js">let pixelRatioBox = document.querySelector(".pixel-ratio"); +let mqString = `(resolution: ${window.devicePixelRatio}dppx)`; + +const updatePixelRatio = () => { + let pr = window.devicePixelRatio; + let prString = (pr * 100).toFixed(0); + pixelRatioBox.innerText = `${prString}% (${pr.toFixed(2)})`; +} + +updatePixelRatio(); + +matchMedia(mqString).addEventListener("change", updatePixelRatio);</pre> + +<p>文字列 <code>mqString</code> は、メディアクエリそのものになるように作ります。このメディアクエリは、<code>(resolution: 1dppx)</code> (標準的なディスプレイの場合)、または <code>(resolution: 2dppx)</code> (HiDPI / レティナディスプレイの場合) のような内容で始まり、現在のディスプレイ解像度のピクセルあたりのドット数が特定の数であるかをチェックします。</p> + +<p>関数 <code>updatePixelRatio()</code> は、現在の <code>devicePixelRatio</code> の値を取得し、<code>pixelRatioBox</code> 要素の {{domxref("HTMLElement.innerText", "innerText")}} に、その比率を百分率と小数第 2 位までの未加工の 10 進数の値の両方で表示する文字列を設定します。</p> + +<p>そして、関数 <code>updatePixelRatio()</code> が最初の値を表示するために一回実行され、その後メディアクエリが作られて <code>updatePixelRatio()</code> を <code>change</code> イベントのハンドラーとして登録するために {{domxref("EventTarget.addEventListener", "addEventListener()")}} が実行されます。</p> + +<h4 id="HTML_2">HTML</h4> + +<p>この HTML は、説明文を含むボックスと、現在のピクセル比率情報を表示する <code>pixel-ratio</code> ボックスを作成します。</p> + +<pre class="brush: html"><div class="container"> + <div class="inner-container"> + <p>この使用例により、ページをズームまたはズームアウトすること + (または異なる表示倍率の画面にページを移動させること) の + <code>Window.devicePixelRatio</code> プロパティに与える影響がわかります。 + どのようなことが起こるか、試してみましょう！</p> + </div> + <div class="pixel-ratio"></div> +</div></pre> + +<details><summary> +<h4 id="CSS">CSS</h4> +</summary> + +<pre class="brush: css">body { + font: 22px arial, sans-serif; +} + +.container { + top: 2em; + width: 22em; + height: 14em; + border: 2px solid #22d; + margin: 0 auto; + padding: 0; + background-color: #a9f; +} + +.inner-container { + padding: 1em 2em; + text-align: justify; + text-justify: auto; +} + +.pixel-ratio { + position: relative; + margin: auto; + height: 1.2em; + text-align: right; + bottom: 0; + right: 1em; + font-weight: bold; +}</pre> +</details> + +<h4 id="結果">結果</h4> + +<p>{{EmbedLiveSample("Example_2_Monitoring_screen_resolution_or_zoom_level_changes", "100%", 500)}}</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("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + + + +<p>{{Compat("api.Window.devicePixelRatio")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a></li> + <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリの使用</a></li> + <li><a href="/ja/docs/Web/CSS/@media/resolution">CSS の <code>resolution</code> メディア特性</a></li> + <li>PPK が行った <a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">devicePixelRatio に関する調査</a></li> +</ul> diff --git a/files/ja/web/api/window/dialogarguments/index.html b/files/ja/web/api/window/dialogarguments/index.html new file mode 100644 index 0000000000..11a5f9b302 --- /dev/null +++ b/files/ja/web/api/window/dialogarguments/index.html @@ -0,0 +1,19 @@ +--- +title: window.dialogArguments +slug: Web/API/Window/dialogArguments +tags: + - DOM + - Dialogs + - Reference + - Window +translation_of: Web/API/Window/dialogArguments +--- +<p>{{APIRef}}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>dialogArguments</code> プロパティは、 {{domxref("window.showModalDialog()")}} メソッドに渡されたパラメータを返します。モーダルダイアログボックスの作成時に、引数にどのようなパラメータが指定されたを判断することができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>value</var> = window.dialogArguments;</pre> diff --git a/files/ja/web/api/window/directories/index.html b/files/ja/web/api/window/directories/index.html new file mode 100644 index 0000000000..b893d4443c --- /dev/null +++ b/files/ja/web/api/window/directories/index.html @@ -0,0 +1,33 @@ +--- +title: window.directories +slug: Web/API/Window/directories +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/directories +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>ウィンドウディレクトリのツールバーオブジェクトを返します。 {{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>dirBar</i> = window.directories +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3> +<p> + <i> + dirBar</i> + は、<code>barProp</code> 型のオブジェクトです。 {{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre><script> + function dirs() { + alert(window.directories); + } +</script> +</pre> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/document/index.html b/files/ja/web/api/window/document/index.html new file mode 100644 index 0000000000..2693e09cee --- /dev/null +++ b/files/ja/web/api/window/document/index.html @@ -0,0 +1,49 @@ +--- +title: Window.document +slug: Web/API/Window/document +tags: + - API + - HTML DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/document +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>window.document</code></strong> は、ウィンドウに含まれている<a href="/ja/docs/Web/API/document">文書</a>への参照を返します。</span></p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">console.log(window.document.title); +</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('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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.Window.document")}}</p> diff --git a/files/ja/web/api/window/domcontentloaded_event/index.html b/files/ja/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..f97cd2e9a0 --- /dev/null +++ b/files/ja/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,78 @@ +--- +title: 'Window: DOMContentLoaded イベント' +slug: Web/API/Window/DOMContentLoaded_event +tags: + - Event + - Reference + - Web + - Window + - events +translation_of: Web/API/Window/DOMContentLoaded_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>DOMContentLoaded</code></strong> イベントは、最初の HTML 文書の読み込みと解析が完了したとき、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可 (ただしキャンセル不可の単純イベントとして定義されている)</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>なし</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、読み込まれた {{domxref("Document")}} です。このイベントを <code>Window</code> からキャプチャやバブリングの過程で待ち受けすることができます。このイベントについての全般的な詳細は、 Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} イベントのページをご覧ください。</p> + +<p>別なイベントである {{domxref("Window/load_event", "load")}} は、ページ全体が読み込まれたことを検出するためにのみ使用してください。 <code>load</code> を、 <code>DOMContentLoaded</code> がより適切である場面に使用する間違いがよくあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_usage" name="Basic_usage">基本的な使用</h3> + +<pre class="brush: js">window.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); +}); +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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.Window.DOMContentLoaded_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}</li> +</ul> diff --git a/files/ja/web/api/window/dump/index.html b/files/ja/web/api/window/dump/index.html new file mode 100644 index 0000000000..44c2365fb0 --- /dev/null +++ b/files/ja/web/api/window/dump/index.html @@ -0,0 +1,54 @@ +--- +title: window.dump() +slug: Web/API/Window/dump +tags: + - API + - DOM + - DOM_0 + - Method + - Non-standard +translation_of: Web/API/Window/dump +--- +<div>{{ ApiRef() }}</div> + +<div> +<p id="comment_text_2">{{Non-standard_header}}</p> +</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>(システムの) コンソールにメッセージを表示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.dump(<em>message</em>); + +dump(<em>message</em>); +</pre> + +<ul> + <li><code>message</code> はログ出力するメッセージの文字列です。</li> +</ul> + +<h2 id="Notes" name="Notes">注記</h2> + +<p><code>dump</code>() の一般的な使い方は、JavaScript のデバッグです。Firefox のプロセスが <code>-console</code> オプション付きで開始された場合、<code>dump</code>() に渡されたメッセージは、システムコンソール (ネイティブのコンソール) に送信されます。<code>-console</code> オプションが指定されていない場合、stderr に出力されます。dump() からの出力は <a href="/docs/Tools/Browser_Console">ブラウザコンソール</a> に送信されません。<a href="/docs/Tools/Browser_Console">ブラウザコンソール</a> への出力は、<a href="/docs/Web/API/Console.log">console.log()</a> を使用してください。特権コードは、<code><a href="/docs/Components.utils.reportError" title="Components.utils.reportError">Components.utils.reportError</a></code> と <code><a href="/docs/XPCOM_Interface_Reference/nsIConsoleService" title="nsIConsoleService">nsIConsoleService</a></code> を使用してメッセージを <a href="/docs/Error_Console" title="Error_Console">エラーコンソール</a> / <a href="/docs/Tools/Browser_Console">ブラウザコンソール</a> にログ出力することもできます。</p> + +<p><code>dump</code>() は、JavaScript で実装された XPCOM コンポーネントでも使用できます。これは、{{domxref("window")}} がコンポーネント内のグローバルオブジェクトでなくても使えます。また、<a href="/docs/Components.utils.Sandbox#Methods_available_on_the_Sandbox_object" title="Methods available on the Sandbox object">sandboxes</a> 内で明示的に使用可能にすることもできます。しかし、この <code>dump</code> の使用は、後述の設定に影響せず、常に表示されます。この設定を自分で確認するか、独自のデバッグ設定で、多くのデバッグコンテンツを、これらに興味のないユーザのコンソールに送信されないようにすることをおすすめします。ただし、XPCOM コンポーネントからの <code>dump</code> 出力は <code>stderr</code> へ送られますが、別の場所から呼び出された <code>dump</code> は <code>stdout</code> へ出力されるので注意してください。</p> + +<p><a href="/docs/Gecko" title="Gecko">Gecko</a> の <code>dump()</code> は <strong>既定で無効</strong> です。実行しても何も起こらず、エラーも発生しません。<code>dump</code> 出力を見るには、<a href="http://kb.mozillazine.org/About:config">about:config</a> ページか <a href="http://kb.mozillazine.org/User.js_file">user.js ファイル</a> で、<code>browser.dom.window.dump.enabled</code> 設定の値を <code>true</code> にしなければなりません。注記: この設定は既定では <code>about:config</code> のリストに表示されないので、新たに作成してください (about:config ページのコンテンツ領域を右クリックし、"新規作成" から "真偽値" を選択します)。</p> + +<p>Windows では、dump の出力を見るにはコンソールを開く必要があります。まだコンソールを開いていなければ、一旦アプリケーションを閉じ、コマンドライン引数に <code>-console</code> を追加して再度開いてください。アプリケーションと同時にコンソールが開きます。または、<code>-attach-console</code> を追加すると既存のコンソールを使用します。他のオペレーティングシステムでは、ターミナルからプリケーションを開くだけです。</p> + +<p>コンソール出力をファイルへリダイレクトするには、Firefox を <code>-console</code> オプション<em>無し</em>で起動し、次のコマンドで stderr と stdout の出力をファイルへリダイレクトしてください:</p> + +<pre>firefox > console.txt 2>&1 +</pre> + +<div class="note"> +<p>コンソールメッセージを、アプリケーションを起動したコンソールに表示させたいときは、<a href="https://github.com/matthewkastor/Redirector">Gecko Console Redirector</a> を使用してください。プリコンパイルされたバイナリが <a href="https://github.com/matthewkastor/Redirector/archive/master.zip">https://github.com/matthewkastor/Redirector/archive/master.zip</a> の ZIP アーカイブ内の <code>Redirector-master\Gecko\Console Redirector\bin\Release</code> に含まれています。すべての dll ファイルと exe ファイルをお好みの場所にコピーしてください。次に、<code>Console Redirector.exe /?</code> を実行します。</p> +</div> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p id="comment_text_2">これは、どの仕様にも含まれません。</p> diff --git a/files/ja/web/api/window/error_event/index.html b/files/ja/web/api/window/error_event/index.html new file mode 100644 index 0000000000..5d2ba8b0e3 --- /dev/null +++ b/files/ja/web/api/window/error_event/index.html @@ -0,0 +1,140 @@ +--- +title: 'Window: error イベント' +slug: Web/API/Window/error_event +tags: + - API + - Event + - UI Events + - Window +translation_of: Web/API/Window/error_event +--- +<div>{{APIRef}}</div> + +<p><code>error</code> イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合 — 例えば、スクリプトに実行エラーがあった場合に {{domxref("Window")}} オブジェクトに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}} または {{domxref("UIEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td> + </tr> + </tbody> +</table> + +<p>イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="controls"> + <button id="script-error" type="button">Generate script error</button> + <img class="bad-img" /> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +button { + height: 2rem; + margin: .5rem; +} + +img { + width: 0; + height: 0; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents'); + +window.addEventListener('error', (event) => { + log.textContent = log.textContent + `${event.type}: ${event.message}\n`; + console.log(event) +}); + +const scriptError = document.querySelector('#script-error'); +scriptError.addEventListener('click', () => { + const badCode = 'const s;'; + eval(badCode); +}); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-error')}}</td> + <td>{{Spec2('UI Events')}}</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.Window.error_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code>Window</code> を対象としたこのイベント: {{domxref("Window/error_event", "error")}} イベント</li> +</ul> diff --git a/files/ja/web/api/window/escape/index.html b/files/ja/web/api/window/escape/index.html new file mode 100644 index 0000000000..0d16e08e31 --- /dev/null +++ b/files/ja/web/api/window/escape/index.html @@ -0,0 +1,33 @@ +--- +title: window.escape +slug: Web/API/Window/escape +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/JavaScript/Reference/Global_Objects/escape +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>文字列をエンコードし、16 進エスケープシーケンスで表された特定の文字に置換します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>escaped</var> = escape(<i>regular</i>); +</pre> +<ul> + <li><code>escaped</code> は、エンコードされた文字列です。</li> + <li><code>regular</code> は、通常の文字列です。</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">alert( escape("http://www.cnn.com") ); // 表示結果: http%3A//www.cnn.com +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>escape()</code> メソッドは、特別な文字（通常のテキストや数字ではない文字）を 16 進文字にエンコードします。これは、特に、クッキーの値を設定するために必要となります。また、GET リクエストや AJAX GET/POST リクエストの URL で + <i> + name=value</i> + のような組のデータを渡すときにも役立ちます。</p> +<p>{{domxref("window.unescape")}} 、<a href="/ja/docs/JavaScript/Reference/Global_Objects/encodeURIComponent"><code>encodeURIComponent</code></a> も参照してください。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。</p> diff --git a/files/ja/web/api/window/event/index.html b/files/ja/web/api/window/event/index.html new file mode 100644 index 0000000000..68bb551b5f --- /dev/null +++ b/files/ja/web/api/window/event/index.html @@ -0,0 +1,50 @@ +--- +title: Window.event +slug: Web/API/Window/event +tags: + - API + - DOM + - Event + - Event Handler + - Read-only + - Window +translation_of: Web/API/Window/event +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Window")}} の読み取り専用プロパティである <code><strong>event</strong></code> は、現在サイトのコードが処理している {{domxref("Event")}} を返します。イベントハンドラーのコンテキスト外では、値が常に <code>undefined</code> になります。</p> + +<p>新しいコードではこのプロパティの使用を<em>避けるべき</em>であり、代わりにイベントハンドラー関数になる {{domxref("Event")}} を使用してください。このプロパティは広くサポートされておらず、またサポートされていてもコードが壊れやすくなるおそれがあります。</p> + +<div class="note"> +<p><strong>注記:</strong> このプロパティは、返された <code>Event</code> が期待する値ではない状況になる場合があり、壊れやすい可能性があります。加えて <code>Window.event</code> は、{{Glossary("shadow tree", "shadow trees")}} で発生したイベントに対して不適格です。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#ref-for-dom-window-event", "Window.event")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.Window.event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Event.srcElement")}}</li> +</ul> diff --git a/files/ja/web/api/window/find/index.html b/files/ja/web/api/window/find/index.html new file mode 100644 index 0000000000..ad99bebbf7 --- /dev/null +++ b/files/ja/web/api/window/find/index.html @@ -0,0 +1,80 @@ +--- +title: window.find +slug: Web/API/Window/find +tags: + - API + - DOM + - DOM_0 + - Gecko + - Non-standard + - Window +translation_of: Web/API/Window/find +--- +<div>{{ApiRef}}</div> + +<div> +<p id="comment_text_2">{{Non-standard_header}}</p> +</div> + +<div>{{noteStart}} <code>window.find()</code> のサポートは、Gecko の将来のバージョンで変更される可能性があります（※参照 : {{Bug("672395")}}） {{noteEnd}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウ内の文字列を検索します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>window</em>.find(<var>aString</var>, <var>aCaseSensitive</var>, <var>aBackwards</var>, <var>aWrapAround</var>, + <var>aWholeWord</var>, <var>aSearchInFrames</var>);</pre> + +<dl> + <dt><code>aString</code></dt> + <dd>検索するテキスト文字列</dd> + <dt><code>aCaseSensitive</code></dt> + <dd>真偽値。 <code>true</code> の場合、大文字と小文字を区別して検索します。</dd> + <dt><code>aBackwards</code></dt> + <dd>真偽値。 <code>true</code> の場合、後方検索を行います。</dd> + <dt><code>aWrapAround</code></dt> + <dd>真偽値。 <code>true</code> の場合、折り返し検索を行います。</dd> + <dt><code>aWholeWord</code> {{unimplemented_inline}}</dt> + <dd>真偽値。 <code>true</code> の場合、完全一致検索を行います（{{bug("481513")}}）</dd> + <dt><code>aSearchInFrames</code></dt> + <dd>真偽値。 <code>true</code> の場合、フレーム内の検索を行います。</dd> +</dl> + +<h3 id="Returns" name="Returns">戻り値</h3> + +<p>真偽値。</p> + +<ul> + <li>文字列が見つかった場合 : <code>true</code></li> + <li>それ以外 : <code>false</code></li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js">findString = function findText(text) { + alert("String \x22" + text + "\x22 found? " + window.find(text)); +}</pre> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html"><p>Apples, Bananas, and Oranges.</p> +<button type="button" onClick='findString("Apples")'>Search for Apples</button> +<button type="button" onClick='findString("Banana")'>Search for Banana</button> +<button type="button" onClick='findString("Orange")'>Search for Orange</button> +</pre> + +<h3 id="Result" name="Result">表示結果</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>Window.find() は、サイト上で発見したコンテンツを選択します。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>どの標準にも属しません。</p> diff --git a/files/ja/web/api/window/focus/index.html b/files/ja/web/api/window/focus/index.html new file mode 100644 index 0000000000..6008544ef7 --- /dev/null +++ b/files/ja/web/api/window/focus/index.html @@ -0,0 +1,24 @@ +--- +title: window.focus +slug: Web/API/Window/focus +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/focus +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ウィンドウにフォーカスを合わせます。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.focus() +</pre> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">if ( clicked ) { + window.focus(); +}</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/focus_event/index.html b/files/ja/web/api/window/focus_event/index.html new file mode 100644 index 0000000000..31fcdbf73c --- /dev/null +++ b/files/ja/web/api/window/focus_event/index.html @@ -0,0 +1,124 @@ +--- +title: 'Window: focus イベント' +slug: Web/API/Window/focus_event +tags: + - API + - Event + - Focus + - FocusEvent + - Reference + - Web + - Window + - onfocus + - イベント +translation_of: Web/API/Window/focus_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>focus</code></strong> イベントは、要素がフォーカスを取得したときに発生します。</p> + +<p><code>focus</code> の反対は {{domxref("Window/blur_event", "blur")}} です。</p> + +<table class="properties"> + <tbody> + <tr> + <th>バブリング</th> + <td>なし</td> + </tr> + <tr> + <th>キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th>インターフェイス</th> + <td>{{DOMxRef("FocusEvent")}}</td> + </tr> + <tr> + <th>イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onfocus", "onfocus")}}</td> + </tr> + <tr> + <th>同期 / 非同期</th> + <td>同期</td> + </tr> + <tr> + <th>Composed</th> + <td>はい</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<p>この例ではフォーカスを失ったときに文書の外見を変更します。 {{domxref("EventTarget.addEventListener()", "addEventListener()")}} を使用して <code>focus</code> および {{domxref("Window/blur_event", "blur")}} イベントを監視します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p id="log">Click on this document to give it focus.</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.paused { + background: #ddd; + color: #555; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function pause() { + document.body.classList.add('paused'); + log.textContent = 'FOCUS LOST!'; +} + +function play() { + document.body.classList.remove('paused'); + log.textContent = 'This document has focus. Click outside the document to lose focus.'; +} + +const log = document.getElementById('log'); + +window.addEventListener('blur', pause); +window.addEventListener('focus', play);</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Live_example")}}</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("UI Events", "#event-type-focus")}}</td> + <td>{{Spec2("UI Events")}}</td> + <td>Added info that this event is composed.</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-focus")}}</td> + <td>{{Spec2("DOM3 Events")}}</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.Window.focus_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/blur_event", "blur")}}</li> + <li><code>Element</code> を対象としたこのイベント: {{domxref("Element/focus_event", "focus")}} イベント</li> +</ul> diff --git a/files/ja/web/api/window/forward/index.html b/files/ja/web/api/window/forward/index.html new file mode 100644 index 0000000000..8c223f2d18 --- /dev/null +++ b/files/ja/web/api/window/forward/index.html @@ -0,0 +1,56 @@ +--- +title: window.forward +slug: Web/API/Window/forward +tags: + - API + - DOM + - Firefox + - Gecko + - Method + - Non-standard + - Obsolete + - Window + - forward +translation_of: Web/API/Window/forward +--- +<div>{{ApiRef}}{{Non-standard_header}} {{deprecated_header}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウの文書の履歴のひとつ分だけ前へ進めます。これは Firefox 固有のメソッドであり、Firefox 31 で削除しました。代わりに、標準の {{domxref("History.forward", "window.history.forward()")}} メソッドを使用してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre>window.forward();</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>ありません。</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>undefined</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">function goForward() { + if (canGoForward) { + window.forward(); + } +} +</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>どの仕様にも属していません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<p>この非標準メソッドは Firefox だけが実装しており、Firefox 31 で削除しました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("History.back()")}}</li> + <li>{{domxref("History.forward()")}}</li> +</ul> diff --git a/files/ja/web/api/window/frameelement/index.html b/files/ja/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..ab266fa993 --- /dev/null +++ b/files/ja/web/api/window/frameelement/index.html @@ -0,0 +1,112 @@ +--- +title: window.frameElement +slug: Web/API/Window/frameElement +tags: + - API + - DOM + - Gecko + - HTML DOM + - Window +translation_of: Web/API/Window/frameElement +--- +<div>{{ ApiRef }}</div> + +<p>（{{HTMLElement("iframe")}} や {{HTMLElement("object")}} のような）ウィンドウが埋め込まれた要素を返します。要素がトップレベルであるか異なるスクリプト生成元をもつ文書に埋め込まれるかのいずれかの場合は、 <code>null</code> を返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var>frameEl</var> = window.frameElement; +</pre> + +<ul> + <li><code>frameEl</code> は、ウィンドウが埋め込まれた要素です。ウィンドウが別の文書に埋め込まれていない場合、または埋め込まれている文書が異なる生成元を持つ（例えば異なるドメインから設置されている）場合、これは <code>null</code> になります。</li> +</ul> + +<div class="note"> +<p>このプロパティの名前にもかかわらず、これは{{HTMLElement("object")}}、{{HTMLElement("iframe")}}、または <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/embed"><embed></a>を含むすべての埋め込みポイント内に埋め込まれた文書の役に立ちます。</p> +</div> + +<h2 id="例">例</h2> + +<pre class="brush:js">var frameEl = window.frameElement; +// 埋め込みの場合、要素の URL が 'http://mozilla.org/' に変わります。 +if (frameEl) { + frameEl.src = 'http://mozilla.org/'; +} +</pre> + +<h2 id="仕様">仕様</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-frameelement', 'Window.frameElement') }}</td> + <td>{{ Spec2('WebRTC 1.0') }}</td> + <td>初期の仕様</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>4?</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>5.5?</td> + <td>12.1?</td> + <td>4?</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("window.frames")}} は、現在のウィンドウの直接のサブフレームを一覧する、配列のようなオブジェクトを返します。</li> + <li>{{domxref("window.parent")}} は、子ウィンドウの<code>frameElement</code>を含むウィンドウである、親ウィンドウを返します。</li> +</ul> diff --git a/files/ja/web/api/window/frames/index.html b/files/ja/web/api/window/frames/index.html new file mode 100644 index 0000000000..22a1c45883 --- /dev/null +++ b/files/ja/web/api/window/frames/index.html @@ -0,0 +1,69 @@ +--- +title: Window.frames +slug: Web/API/Window/frames +tags: + - API + - Gecko + - HTML DOM + - NeedsContent + - NeedsUpdate + - Property + - Reference + - Window + - プロパティ +translation_of: Web/API/Window/frames +--- +<div>{{APIRef("DOM")}}</div> + +<p>ウィンドウ自体を、現在のウィンドウの直接のサブフレームを列挙した配列風オブジェクトとして返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>frameList</var> = window.frames; +</pre> + +<ul> + <li><code><var>frameList</var></code> は、フレームオブジェクトのリストを返します。これは配列と似ており、 <code>length</code> プロパティを持ち、要素に <code>[i]</code> 表記を使ってアクセスできます。</li> + <li><code>frameList === window</code> は真と評価されます。</li> + <li>window.frames 擬似配列の各要素は {{domxref("Window")}} オブジェクトであり、 {{HTMLElement("frame")}} または {{HTMLElement("iframe")}} の内容に対応します。 (i)frame の DOM 要素ではありません (つまり <code>window.frames[0]</code> は <code>document.getElementsByTagName("iframe")[0].contentWindow</code> と同じことです)。</li> + <li>返値についての詳細は、 <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1">mozilla.dev.platform のスレッド</a>を参照してください。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">var frames = window.frames; // or // var frames = window.parent.frames; +for (var i = 0; i < frames.length; i++) { + // frames[i] で各サブフレームに何らかの処理をします + frames[i].document.body.style.background = "red"; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "browsers.html#dom-frames", "Window.frames")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "browsers.html#dom-frames", "Window.frames")}}</td> + <td>{{Spec2("HTML5 W3C")}}</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.Window.frames")}}</p> diff --git a/files/ja/web/api/window/fullscreen/index.html b/files/ja/web/api/window/fullscreen/index.html new file mode 100644 index 0000000000..3a565b6007 --- /dev/null +++ b/files/ja/web/api/window/fullscreen/index.html @@ -0,0 +1,58 @@ +--- +title: Window.fullScreen +slug: Web/API/Window/fullScreen +tags: + - API + - HTML DOM + - NeedsMarkupWork + - Non-standard + - Property + - Reference + - Window + - プロパティ + - 標準外 +translation_of: Web/API/Window/fullScreen +--- +<div>{{APIRef}}{{Non-standard_Header}}</div> + +<p><code><strong>fullScreen</strong></code> は <code>Window</code> インターフェイスのプロパティで、そのウィンドウが全画面モードで表示されているかどうかを示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>isInFullScreen</var> = <var>windowRef</var>.fullScreen; +</pre> + +<p>クローム特権があればこのプロパティは読み書き可能で、それ以外では読み取り専用です。クローム特権なしでこのプロパティを設定しようとすると、例外は発生せず、ただ暗黙に失敗することに注意してください。これは、 Internet Explorer でこのプロパティを設定するように設計されたスクリプトが壊れるのを防ぐためです。</p> + +<h3 id="Return_Value" name="Return_Value">返値</h3> + +<dl> + <dt><code>isInFullScreen</code></dt> + <dd>論理値。取り得る値は次の通りです。</dd> +</dl> + +<ul> + <li><code>true</code>: そのウィンドウは全画面モードです。</li> + <li><code>false</code>: そのウィンドウは全画面モードではありません。</li> +</ul> + +<h2 id="Notes" name="Notes">注</h2> + +<ul> + <li>通常のウィンドウと全画面との間で切り替えが行われると、 "resize" イベントが該当するウィンドウで発生します。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">if (window.fullScreen) { + // 全画面モード +} +else { + // 全画面モードではない +}</pre> + +<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.Window.fullScreen")}}</p> diff --git a/files/ja/web/api/window/gamepadconnected_event/index.html b/files/ja/web/api/window/gamepadconnected_event/index.html new file mode 100644 index 0000000000..0aeeaa4b2a --- /dev/null +++ b/files/ja/web/api/window/gamepadconnected_event/index.html @@ -0,0 +1,85 @@ +--- +title: gamepadconnected +slug: Web/API/Window/gamepadconnected_event +translation_of: Web/API/Window/gamepadconnected_event +--- +<p><code>gamepadconnected</code> イベントは、<span id="result_box" lang="ja"><span>ゲームパッドが接続されたことをブラウザが検出したとき、またはゲームパッドのボタン/軸が初めて使用されたときに発生します。</span></span></p> + +<h2 id="一般的な情報">一般的な情報</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">仕様</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd> + <dt style="float: left; text-align: right; width: 120px;">インターフェース</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">バブリング</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">キャンセル可能</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">対象</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">標準の動作</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>gamepad</code> {{readonlyInline}}</td> + <td>{{domxref("Gamepad")}}</td> + <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<pre class="brush:js;">// Note that the API is still vendor-prefixed in browsers implementing it +window.addEventListener("gamepadconnected", function( event ) { + + // All buttons and axes values can be accessed through + event.gamepad; + +}); +</pre> + +<h2 id="関連するイベント">関連するイベント</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li> +</ul> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Gamepad API の利用</a></li> +</ul> diff --git a/files/ja/web/api/window/gamepaddisconnected_event/index.html b/files/ja/web/api/window/gamepaddisconnected_event/index.html new file mode 100644 index 0000000000..e6c138a353 --- /dev/null +++ b/files/ja/web/api/window/gamepaddisconnected_event/index.html @@ -0,0 +1,74 @@ +--- +title: gamepaddisconnected +slug: Web/API/Window/gamepaddisconnected_event +translation_of: Web/API/Window/gamepaddisconnected_event +--- +<p><span id="result_box" lang="ja"><span>ゲームパッドが切断されたことをブラウザが検出すると、</span></span><code>gampaddisconnected</code> <span id="result_box" lang="ja"><span>イベントが発生します。</span></span></p> + +<h2 id="一般的な情報">一般的な情報</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">仕様</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd> + <dt style="float: left; text-align: right; width: 120px;">インターフェース</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">バブリング</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">キャンセル可能</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">対象</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">標準の動作</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>gamepad</code> {{readonlyInline}}</td> + <td>{{domxref("Gamepad")}}</td> + <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td> + </tr> + </tbody> +</table> + +<h2 id="関連するイベント">関連するイベント</h2> + +<ul> + <li><a href="https://developer.mozilla.org/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li> +</ul> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Gamepad API の利用</a></li> +</ul> diff --git a/files/ja/web/api/window/getattention/index.html b/files/ja/web/api/window/getattention/index.html new file mode 100644 index 0000000000..4376715018 --- /dev/null +++ b/files/ja/web/api/window/getattention/index.html @@ -0,0 +1,25 @@ +--- +title: window.getAttention +slug: Web/API/Window/getAttention +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/getAttention +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ユーザの注意を引きつける動作をします。これがどのような動作になるかは、OS と ウィンドウマネージャー次第で変化します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.getAttention(); +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>Windows では、ウィンドウのタスクバーのボタンが点滅します（ユーザがこれを無効化していない場合）。</p> +<p>Linux では、挙動はウィンドウマネージャーによって変化します。タスクバーボタンが点滅するのもあれば、直ちにウィンドウにフォーカスするものもあります。これは調整可能であるかもしれません。</p> +<p>Macintosh では、デスクトップの右上端のアイコンが点滅します。</p> +<p>この関数は、Web コンテンツでは、無効化されています。Gecko も Internet Explorer も、現在はこの機能を Web コンテンツに対してはサポートしていません。<code>getAttention</code> は、Gecko アプリケーションでの <a href="/ja/docs/Chrome">chrome</a> から利用したときには、いまだに動作します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/getcomputedstyle/index.html b/files/ja/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..6330951eff --- /dev/null +++ b/files/ja/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,157 @@ +--- +title: Window.getComputedStyle() +slug: Web/API/Window/getComputedStyle +tags: + - API + - CSSOM View + - Method + - Reference + - Window + - getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +<p>{{APIRef("CSSOM")}}</p> + +<p class="summary"><span class="seoSummary"><strong><code>Window.getComputedStyle()</code></strong> メソッドは、アクティブなスタイルシートを適用し、それらの値に含まれる可能性のある基本的な計算を解決した後、要素のすべての CSS プロパティの値を含むオブジェクトを返します。</span>個々の CSS プロパティの値は、オブジェクトによって提供される API を介してアクセスするか、CSS プロパティ名でインデックスを作成することでアクセスすることができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>style</var> = window.getComputedStyle(<var>element</var> [, <var>pseudoElt</var>]);</pre> + +<dl> + <dt><code><var>element</var></code></dt> + <dd>この {{DOMxRef("Element")}} の計算したスタイルを取得します。</dd> + <dt><code><var>pseudoElt</var></code>{{Optional_Inline}}</dt> + <dd>一致させる擬似要素を指定する文字列。実在する要素の場合は省略 (または <code>null</code>)。</dd> +</dl> + +<p>返値の <code>style</code> は、<em>生きた</em> {{DOMxRef("CSSStyleDeclaration")}} オブジェクトで、要素のスタイルが変わると自動で更新されます。</p> + +<h3 id="Throws" name="Throws">例外</h3> + +<dl> + <dt>{{JSxRef("TypeError")}}</dt> + <dd>渡されたオブジェクトが {{DOMxRef("Element")}} ではないか、 <code><var>pseudoElt</var></code> が妥当な擬似要素セレクターではないか、 {{CSSxRef("::part", "::part()")}} または {{CSSxRef("::slotted", "::slotted()")}} である場合。</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>注:</strong> 妥当な擬似要素とは構文的に適切であることを指します。例えば <code>::unsupported</code> は擬似要素として対応はありませんが、妥当と判断されます。</p> + </div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、 {{HTMLElement("p")}} の要素のスタイルを設定してから、<code>getComputedStyle()</code> を使用してそれらのスタイルを取得し、それらを <code><p></code> のテキストコンテンツに出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; no-line-numbers notranslate"><p>Hello</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; notranslate">p { + width: 400px; + margin: 0 auto; + padding: 20px; + font: 2rem/2 sans-serif; + text-align: center; + background: purple; + color: white; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js; notranslate">let para = document.querySelector('p'); +let compStyles = window.getComputedStyle(para); +para.textContent = 'My computed font-size is ' + + compStyles.getPropertyValue('font-size') + + ',\nand my computed line-height is ' + + compStyles.getPropertyValue('line-height') + + '.';</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples', '100%', '240px')}}</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>返されるオブジェクトは {{DOMxRef("CSSStyleDeclaration")}} 型で、これは要素の {{DOMxRef("HTMLElement.style", "style")}} プロパティから返されるオブジェクトと同じです。しかし、2つのオブジェクトは異なる目的を持っています。</p> + +<ul> + <li><code>getComputedStyle</code> から返されたオブジェクトは読み取り専用で、 <code><style></code> 要素や外部スタイルシートで設定されたものも含めて、要素のスタイルを検査するために使用するためのものです。</li> + <li><code><em>element</em>.style</code> オブジェクトは、その要素にスタイルを<strong>設定</strong>したり、 JavaScript の操作やグローバルの <code>style</code> 属性から直接追加されたスタイルを検査したりするために使用するためのものです。</li> +</ul> + +<p>最初の引数は {{domxref("Element")}} でなければなりません。要素以外、例えば {{DOMxRef("Text")}} ノードであった場合はエラーが発生します。</p> + +<h2 id="defaultView">defaultView</h2> + +<p>多くのコードサンプルでは、 <code>getComputedStyle</code> は {{DOMxRef("document.defaultView")}} オブジェクトから使用されています。ほとんどの場合、 <code>getComputedStyle</code> は <code>window</code> オブジェクト上に存在するので、これは必要ありません。 <code>defaultView</code> パターンは、 <code>window</code> のテスト仕様を書きたくない人たちと、 Java でも使える API を作りたくない人たちの組み合わせだったのかもしれません。</p> + +<h2 id="Use_with_pseudo-elements" name="Use_with_pseudo-elements">擬似要素の使用</h2> + +<p><code>getComputedStyle</code> は擬似要素 (例えば <code>::after</code>, <code>::before</code>, <code>::marker</code>, <code>::line-marker</code> — <a class="external" href="https://www.w3.org/TR/css-pseudo-4/">the pseudo-element spec</a> を参照してください) からスタイル情報を取得することができます。</p> + +<pre class="brush: html notranslate"><style> + h3::after { + content: ' rocks!'; + } +</style> + +<h3>Generated content</h3> + +<script> + var h3 = document.querySelector('h3'); + var result = getComputedStyle(h3, ':after').content; + + console.log('the generated content is: ', result); // returns ' rocks!' +</script> +</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<ul> + <li>返された {{DOMxRef("CSSStyleDeclaration")}} オブジェクトは、 CSS プロパティの<em><strong>個別指定</strong></em>の名前のアクティブな値を含んでいます。例えば、 <code>border-bottom-width</code> の値は <code>border-width</code> や <code>border</code> などの<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ名</a>ではアクセスできません。 <code>font-size</code> のような個別指定の名前だけで値を食えりするのが最も安全です。 <code>font</code> のような一括指定の名前では、ほとんどのブラウザーでは動作しません。</li> + <li>CSS のプロパティ値は、 <code>getPropertyValue(propName)</code> API を使用してアクセスすることも、 <code>obj['z-index']</code> や <code>obj.zIndex</code>のようにオブジェクトに直接添字を指定してアクセスすることもできます。</li> + <li><code>getComputedStyle</code> によって返される値は、{{CSSxRef("resolved_value", "解決値", "", 1)}}です。これらの値は通常、CSS 2.1 の{{CSSxRef("computed_value","計算値", "", 1)}}と同じですが、 <code>width</code>, <code>height</code>, <code>padding</code> のような古いプロパティの場合は、{{CSSxRef("used_value","使用値", "", 1)}}と同じになります。もともと CSS 2.0 では、<em>計算値</em>はカスケードと継承後のプロパティの「使用可能な」最終値として定義されていましたが、 CSS 2.1 ではレイアウトする前の値として再定義され、<em>使用値</em>はレイアウト後の値として再定義されています。 CSS 2.0 のプロパティでは、 <code>getComputedStyle</code> は計算値の古い意味を返しますが、現在は<strong>使用値</strong>と呼ばれています。レイアウト前の値とレイアウト後の値の違いの例として、 <code>width</code> や <code>height</code> のパーセント値の解像度があり、これらは<em>使用値</em>のみ同等のピクセル数に置き換えられます。</li> + <li>返される値が意図的に不正確になる場合があります。「CSS History Leak」のセキュリティ問題を回避するために、ブラウザーは訪問したリンクの計算されたスタイルについて嘘をつき、ユーザーがリンク先の URL を訪問していないかのような値を返すことがあります。これがどのように実装されているかについては、 <a class="external" href="https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/">Plugging the CSS History Leak</a> と <a class="external" href="https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">Privacy-related changes coming to CSS :visited</a> を参照してください。</li> + <li><a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>が動作している間、 <code>getComputedStyle</code> は、 Firefox では元のプロパティ値を返しますが、 WebKit では最終的なプロパティ値を返します。</li> + <li>Firefox では、 <code>auto</code> の値を持つプロパティは <code>auto</code> の値ではなく、使用値を返します。そのため、 <code>top:auto</code> と <code>bottom:0</code> を <code>height:30px</code> の要素に適用し、包含ブロックを <code>height:100px</code> を適用すると、 Firefox の <code>top</code> のスタイルの計算値は、 100 − 30 = 70 なので <code>70px</code> となります。</li> +</ul> + +<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("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle", "getComputedStyle()")}}</td> + <td>{{Spec2("DOM2 Style")}}</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.Window.getComputedStyle")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("window.getDefaultComputedStyle")}}</li> + <li>{{CSSxRef("resolved_value", "Resolved Value")}}</li> +</ul> diff --git a/files/ja/web/api/window/getselection/index.html b/files/ja/web/api/window/getselection/index.html new file mode 100644 index 0000000000..13b908a7e5 --- /dev/null +++ b/files/ja/web/api/window/getselection/index.html @@ -0,0 +1,101 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +tags: + - API + - DOM + - Method + - NeedsMobileBrowserCompatibility + - Reference + - Selection + - Selection API + - Window +translation_of: Web/API/Window/getSelection +--- +<div>{{ ApiRef() }}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ユーザーが選択した文字列の範囲やキャレットの現在位置を示す {{domxref("Selection")}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>selection</em> = <em>window</em>.getSelection();</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>A {{domxref("Selection")}} オブジェクト。</p> + +<p>文字列へ型変換すると、空の文字列(<code>""</code>)を追加するか {{domxref("Selection.toString()")}} を使って、選択された文字列を返します。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">function foo() { + var selObj = window.getSelection(); + alert(selObj); + var selRange = selObj.getRangeAt(0); + // 以下、取得した選択文字列に対して何らかの処理を行う +}</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<h3 id="String_representation_of_the_Selection_object" name="String_representation_of_the_Selection_object">Selection オブジェクトの文字列表現</h3> + +<p>JavaScript では、文字列が渡されることを前提としている関数 ({{ Domxref("window.alert()") }} や {{ Domxref("document.write()") }}) にオブジェクトが渡されると、そのオブジェクトの {{jsxref("Object.toString", "toString()")}} メソッドが呼び出され、その結果が関数へ渡されます。このため、実際はプロパティとメソッドを持つオブジェクトなのに、文字列であるかのように見えてしまいます。</p> + +<p>上の例では、{{domxref("window.alert()")}} へ渡されるときに自動的に <code>selObj.toString()</code> が呼び出されます。しかし、{{domxref("Selection")}} オブジェクトで JavaScript の <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a> プロパティや <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code>、<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code> などのメソッドを直に使おうとすると、オブジェクトにその名前のプロパティやメソッドが存在しないはエラーとなり、存在する場合は予期せぬ結果を返すでしょう。<code>Selection</code> オブジェクトを文字列として使うなら、下記のように <code>toString()</code> メソッドを呼び出してください。</p> + +<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre> + +<ul> + <li><code>selObj</code> は <code>Selection</code> オブジェクトです。</li> + <li><code>selectedText</code> は文字列です。 (選択された文字列)</li> +</ul> + +<h3 id="Related_objects" name="Related_objects">関連オブジェクト</h3> + +<p>同じように機能する {{domxref("Document.getSelection()")}} を呼び出すことができます。</p> + +<p>HTML input 要素は selection を扱うための簡単な支援 API を提供しています。 (詳細: {{domxref("HTMLInputElement.setSelectionRange()")}})</p> + +<p><em>selection</em> と <em>focus</em> の違いに注意してください。{{domxref("Document.activeElement")}} はフォーカスされた要素を返します。</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("Selection API", "#extensions-to-window-interface", "Window.getSelection()")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td>新仕様</td> + </tr> + <tr> + <td>{{SpecName("HTML Editing", "#dom-window-getselection", "Window.getSelection()")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.Window.getSelection")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Selection_API">Selection API</a></li> + <li>{{domxref("Selection")}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Document.getSelection()")}}</li> + <li>{{domxref("HTMLInputElement.setSelectionRange()")}}</li> +</ul> diff --git a/files/ja/web/api/window/hashchange_event/index.html b/files/ja/web/api/window/hashchange_event/index.html new file mode 100644 index 0000000000..5af90df187 --- /dev/null +++ b/files/ja/web/api/window/hashchange_event/index.html @@ -0,0 +1,86 @@ +--- +title: 'Window: hashchange イベント' +slug: Web/API/Window/hashchange_event +tags: + - API + - Event + - HTML DOM + - Reference + - Window + - イベント +translation_of: Web/API/Window/hashchange_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>hashchange</code></strong> イベントは、 URL のフラグメント識別子 (URL の <code>#</code> 記号で始まり続く部分) が変化したときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("HashChangeEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("WindowEventHandlers/onhashchange", "onhashchange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>hashchange</code> イベントは {{domxref("EventTarget/addEventListener", "addEventListener")}} メソッドの中で使用することができます。</p> + +<pre class="brush:js">window.addEventListener('hashchange', function() { + console.log('The hash has changed!') +}, false);</pre> + +<p>または <code>onhashchange</code> イベントハンドラープロパティを使用して、</p> + +<pre class="brush: js">function locationHashChanged() { + if (location.hash === '#cool-feature') { + console.log("You're visiting a cool feature!"); + } +} + +window.onhashchange = locationHashChanged;</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('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition</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.Window.hashchange_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window/popstate_event", "popstate")}}</li> + <li>{{domxref("WindowEventHandlers.onhashchange")}}</li> +</ul> diff --git a/files/ja/web/api/window/history/index.html b/files/ja/web/api/window/history/index.html new file mode 100644 index 0000000000..e7a7e8ebc7 --- /dev/null +++ b/files/ja/web/api/window/history/index.html @@ -0,0 +1,65 @@ +--- +title: window.history +slug: Web/API/Window/history +tags: + - Gecko + - HTML DOM + - History API + - Window + - 要更新 +translation_of: Web/API/Window/history +--- +<p>{{ ApiRef }}</p> + +<p>読み取り専用プロパティ<code><strong>Window</strong>.<strong>history</strong></code>は、{{domxref("History")}}オブジェクトへの参照を返します。{{domxref("History")}}はブラウザのセッション(今開いているタブやそのページが読み込まれているウィンドウで過去に訪れたページの履歴)を操作するインターフェースを提供します。</p> + +<p>詳細や使用例については <a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating the browser history">Manipulating the browser history </a>をご覧ください。このページでは特に<code>pushState()</code>メソッドや <code>replaceState()</code>メソッドについてセキュリティの観点から詳しく解説がなされています。これらのメソッドは注意して使う必要があります。</p> + +<p>{{ 英語版章題("Syntax") }}</p> + +<h3 id="構文">構文</h3> + +<pre class="syntaxbox"><em>var historyObj</em> = <em>window</em>.history; +</pre> + +<p>{{ 英語版章題("Example") }}</p> + +<h3 id="例">例</h3> + +<pre class="brush: js">history.back(); // 戻るボタンを押したのと同じ効果 +history.go(-1); // history.back();と同等の効果が得られます +</pre> + +<p>{{ 英語版章題("Notes") }}</p> + +<h3 id="注記">注記</h3> + +<p>For top-level pages you can see the list of pages in the session history, accessible via the <code>History</code> object, in the browser's dropdowns next to the back and forward buttons.</p> + +<p><code>History</code>オブジェクトはセッション履歴の他のページのURLへアクセスしようとする許可なきコードはセキュリティ上の理由から禁止しています。ただ、セッション履歴のあいだを行き来することは許可されています。</p> + +<p>権限のないコードでセッション履歴を消去したり、戻る/進む操作を無効にしたりする方法はありません。このような機能をどうしても実現したいのなら<code><a href="/ja/DOM/window.location#replace">location.replace()</a></code> メソッドを使うのがよいでしょう。このメソッドは現在のセッションを引数のURLに置き換えることができます。</p> + +<p>{{ 英語版章題("Specification") }}</p> + +<h3 id="仕様">仕様</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/api/window/home/index.html b/files/ja/web/api/window/home/index.html new file mode 100644 index 0000000000..6fda8bcfbe --- /dev/null +++ b/files/ja/web/api/window/home/index.html @@ -0,0 +1,46 @@ +--- +title: window.home +slug: Web/API/Window/home +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/home +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウをホームページに移動させます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.home() +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">function goHome() { + window.home(); +} +</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>{{dom0}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div> + + +<p>{{Compat("api.Window.home")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.forward")}} 、 {{domxref("window.back")}}</li> +</ul> diff --git a/files/ja/web/api/window/index.html b/files/ja/web/api/window/index.html new file mode 100644 index 0000000000..bf5e880706 --- /dev/null +++ b/files/ja/web/api/window/index.html @@ -0,0 +1,707 @@ +--- +title: Window +slug: Web/API/Window +tags: + - API + - Browser + - DOM + - Interface + - Reference + - Tab + - Window + - global + - global scope + - scope + - インターフェイス +translation_of: Web/API/Window +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Window</code></strong> インターフェイスは、 {{glossary("DOM")}} 文書を収めるウィンドウを表します。 <code>document</code> プロパティは、そのウィンドウに読み込まれた <a href="/ja/docs/Web/API/Document">DOM の document オブジェクト</a> を指します。</span>特定の文書が属するウィンドウは、 {{domxref("document.defaultView")}} プロパティを使用して取得できます。</p> + +<p>グローバル変数の <code>window</code> は、スクリプトを実行しているウィンドウを表しており、JavaScript コードに公開されます。</p> + +<p><code>Window</code> インターフェイスは、ユーザーインターフェースのウィンドウの概念とは必ずしも直接関連づかない、さまざまな関数、名前空間、オブジェクト、コンストラクターのホームです。一方、 <code>Window</code> インターフェイスはグローバルで使用可能であることが必要な、さまざまなアイテムを含むのに適した場所です。これらの多くは <a href="/ja/docs/Web/JavaScript/Reference">JavaScript リファレンス</a> や <a href="/ja/docs/Web/API/Document_Object_Model">DOM リファレンス</a> で文書化しています。</p> + +<p>タブブラウザーでは、それぞれのタブが個々の <code>Window</code> オブジェクトで表されます。タブ内で実行している JavaScript から見えるグローバルの <code>window</code> は、常にコードを実行しているタブを表します。しかし、タブブラウザーであっても {{Domxref("Window.resizeTo", "resizeTo()")}} や {{Domxref("Window.innerHeight", "innerHeight")}} のように、タブを含むウィンドウ全体に適用されるプロパティやメソッドがあります。一般に、タブに所属することができない合理的な理由があるものは、代わりにウィンドウに属します。</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructors" name="Constructors">コンストラクター</h2> + +<p><a href="/ja/docs/DOM/DOM_Reference" title="DOM/DOM_Reference">DOM インターフェイス</a>もご覧ください。</p> + +<dl> + <dt>{{domxref("DOMParser")}}</dt> + <dd><code>DOMParser</code> は文字列で保存された XML や HTML ソースを解析して、 DOM <a href="/ja/docs/DOM/document" title="document">Document</a> に変換できます。 <code>DOMParser</code> は <a href="https://w3c.github.io/DOM-Parsing/" title="http://html5.org/specs/dom-parsing.html">DOM Parsing and Serialization</a> で定められています。</dd> + <dt>{{domxref("Image")}}</dt> + <dd>{{domxref("HTMLImageElement")}} を生成します。</dd> + <dt>{{domxref("Option")}}</dt> + <dd>{{domxref("HTMLOptionElement")}} を生成します。</dd> + <dt>{{domxref("StaticRange")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>{{domxref('StaticRange')}} オブジェクトを作成する {{domxref('StaticRange.StaticRange','StaticRange()')}} コンストラクターを返します。</dd> + <dt>{{domxref("Worker")}}</dt> + <dd><a href="/ja/docs/DOM/Using_web_workers">Web worker</a> を生成します。</dd> + <dt>{{domxref("XMLSerializer")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>このインターフェイスは、 {{domxref("EventTarget")}} インターフェイスからプロパティを継承しています。また {{domxref("WindowOrWorkerGlobalScope")}} および {{domxref("WindowEventHandlers")}} ミックスインのプロパティを実装しています。</em></p> + +<p>オブジェクトであるプロパティ (例えば、ビルトイン要素のプロトタイプをオーバーライドするためのもの) は、後述の個別セクションに記載しています。</p> + +<dl> + <dt>{{domxref("Window.closed")}} {{Non-standard_inline}} {{readOnlyInline}}</dt> + <dd>このプロパティは、現在のウィンドウが閉じているかどうかを示します。</dd> + <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt> + <dd>ブラウザーのデバッグコンソールへアクセスするための console オブジェクトへの参照を返します。</dd> + <dt>{{domxref("Window.controllers")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>現在の chrome ウィンドウの XUL controller オブジェクトを返します。</dd> + <dt>{{domxref("Window.customElements")}} {{ReadOnlyInline}}</dt> + <dd>{{domxref("CustomElementRegistry")}} オブジェクトへの参照を返します。これは新しい<a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素</a>の登録や、以前に登録したカスタム要素の情報を取得するために使用できます。</dd> + <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt> + <dd>ブラウザーの crypto オブジェクトを返します。</dd> + <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>現在のディスプレイの、物理ピクセルと端末非依存ピクセルの比率を返します。</dd> + <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt> + <dd>{{domxref("window.showModalDialog()")}} メソッドが呼び出されたときにウィンドウ (それがダイアログボックスである場合) に渡された引数を取得。これは {{Interface("nsIArray")}} インタフェースです。</dd> + <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt> + <dd>指定ウィンドウが含む文書への参照を返す</dd> + <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMMatrix")}} オブジェクトへの参照を返します。これは 4x4 のマトリックスを表し、 2D や 3D の操作に適しています。</dd> + <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMMatrixReadOnly")}} オブジェクトへの参照を返します。これは 4x4 のマトリックスを表し、2D や 3D の操作に適しています。</dd> + <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMPoint")}} オブジェクトへの参照を返します。これはある座標系での 2D や 3D の点を表します。</dd> + <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMPointReadOnly")}} オブジェクトへの参照を返します。これは座標系で 2D や 3D の点を表します。</dd> + <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMQuad")}} オブジェクトへの参照を返します。これは 4 つの角と辺からなる四角形オブジェクトを表します。</dd> + <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMRect")}} オブジェクトへの参照を返します。これは長方形を表します。</dd> + <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt> + <dd>{{domxref("DOMRectReadOnly")}} オブジェクトへの参照を返します。これは長方形を表します。</dd> + <dt>{{domxref("Window.event")}} {{ReadOnlyInline}}</dt> + <dd><strong>現在のイベント</strong> を返します。これは現在 JavaScript のコードのコンテキストが処理しているイベントです。また、現在処理しているイベントがない場合は <code>undefined</code> を返します。イベントハンドラーに直接渡した {{domxref("Event")}} オブジェクトは、可能な限り代わりに使用するべきです。</dd> + <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt> + <dd>ウィンドウが埋め込まれた要素を返す。ウィンドウが埋め込まれていない場合は、 null を返す。</dd> + <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt> + <dd>現在のウィンドウでのサブフレームの配列を返します。</dd> + <dt>{{domxref("Window.fullScreen")}}</dt> + <dd>このプロパティはウィンドウが全画面で表示されているかどうかを示します。</dd> + <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt> + <dd>history オブジェクトへの参照を返す</dd> + <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt> + <dd>ブラウザーウィンドウのコンテンツ領域の高さを取得し、もしあれば、水平スクロールバーを含みます。</dd> + <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt> + <dd>ブラウザーウィンドウのコンテンツ領域の幅を取得し、もしあれば、垂直スクロールバーを含みます。</dd> + <dt>{{domxref("Window.isSecureContext")}} {{experimental_inline}} {{readOnlyInline}}</dt> + <dd>コンテキストが、安全なコンテキストを必要とする機能を使用することができるかどうかを表します。</dd> + <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt> + <dd>ウィンドウ内のフレームの数を返します。 {{domxref("window.frames")}} も参照してください。</dd> + <dt>{{domxref("Window.location")}}</dt> + <dd>window オブジェクトのロケーション、または現在の URL を取得 / 設定します。</dd> + <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt> + <dd>ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な locationbar オブジェクトを返す</dd> + <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}</dt> + <dd>生成元のオリジンからのみアクセスが可能なデータを保存するために使用する、ローカルストレージオブジェクトへの参照を返します。</dd> + <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt> + <dd>ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な menubar オブジェクトを返す</dd> + <dt>{{domxref("Window.messageManager")}}</dt> + <dd>このウィンドウの <a href="/ja/docs/The_message_manager">message manager</a> オブジェクトを返します。</dd> + <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt> + <dd>スクリーン座標系でウィンドウのビューポートの左上隅の水平 (X) 座標を返します。この値は CSS ピクセルで表します。必要に応じて画面のピクセルに換算するための係数については、{{interface("nsIDOMWindowUtils")}} の <code>mozScreenPixelsPerCSSPixel</code> をご覧ください。</dd> + <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}</dt> + <dd>スクリーン座標系で、ウィンドウビューポートの左上隅の垂直 (Y) 座標を返します。この値は CSS ピクセルで表します。必要に応じて画面のピクセルに換算するための係数については <code>mozScreenPixelsPerCSSPixel</code> をご覧ください。</dd> + <dt>{{domxref("Window.name")}}</dt> + <dd>ウィンドウ名を取得 / 設定します。</dd> + <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt> + <dd>navigator オブジェクトへの参照を返します。</dd> + <dt>{{domxref("Window.opener")}}</dt> + <dd>現在のウィンドウを開いたウィンドウへの参照を返します。</dd> + <dt>{{domxref("Window.orientation")}} {{non-standard_inline}} {{deprecated_inline}} {{readOnlyInline}}</dt> + <dd>端末の本来の向きに対して相対的なビューポートの向きを角度 (90 度単位) で返します。</dd> + <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt> + <dd>ブラウザーウィンドウの外側の高さを取得します。</dd> + <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt> + <dd>ブラウザーウィンドウの外側の幅を取得します。</dd> + <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt> + <dd>{{domxref("window.scrollX")}} のエイリアスです。</dd> + <dt>{{domxref("Window.scrollY","Window.pageYOffset")}} {{readOnlyInline}}</dt> + <dd>{{domxref("window.scrollY")}} のエイリアスです。</dd> + <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt> + <dd>現在のウィンドウまたはサブフレームの親ウィンドウへの参照を返します。</dd> + <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt> + <dd>{{domxref("Performance")}} オブジェクトを返します。これは {{domxref("Performance.timing", "timing")}} や {{domxref("Performance.navigation", "navigation")}} 属性が含まれており、それぞれが <a href="/ja/docs/Navigation_timing">パフォーマンス関連</a> のデータを提供するオブジェクトです。詳細情報や使用例は <a href="/ja/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Using Navigation Timing</a> をご覧ください。</dd> + <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt> + <dd>ウィンドウ内で表示/非表示の切り替え (トグル) が可能な、 personalbar オブジェクトを返す</dd> + <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt> + <dd>ウィンドウに関連付けられた screen オブジェクトへの参照を返す</dd> + <dt>{{domxref("Window.screenX")}} および {{domxref("Window.screenLeft")}} {{readOnlyInline}}</dt> + <dd>どちらのプロパティも、ユーザーのブラウザーのビューポートの左端から画面の左端までの水平方向の距離を返します。</dd> + <dt>{{domxref("Window.screenY")}} および {{domxref("Window.screenTop")}} {{readOnlyInline}}</dt> + <dd>どちらのプロパティも、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直方向の距離を返します。</dd> + <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt> + <dd>ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な、 scrollbars オブジェクトを返す</dd> + <dt>{{domxref("Window.scrollMaxX")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>ウィンドウが水平スクロールされ得る最大オフセット、すなわち、文書の幅からビューポートの幅を引いたものです。</dd> + <dt>{{domxref("Window.scrollMaxY")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>ウィンドウが垂直スクロールされ得る最大オフセット (すなわち、文書の高さからビューポートの高さを引いたもの) です。</dd> + <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt> + <dd>文書が現在水平にスクロールされているピクセル数を返します。</dd> + <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt> + <dd>文書が現在垂直にスクロールされているピクセル数を返します。</dd> + <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt> + <dd>window オブジェクト自身へのオブジェクト参照を返す</dd> + <dt>{{domxref("Window.sessionStorage")}}</dt> + <dd>生成元のオリジンからのみアクセスが可能なデータを保存するために使用する、セッションストレージへの参照を返します。</dd> + <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}} {{ReadOnlyInline}}</dt> + <dd>サイドバーの window オブジェクトへの参照を返します。</dd> + <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt> + <dd>{{domxref("SpeechSynthesis")}} オブジェクトを返します。これは、<a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a> の音声合成機能を使用するためのエントリーポイントです。</dd> + <dt>{{domxref("Window.status")}}</dt> + <dd>ブラウザー下部のステータスバーのテキストを取得 / 設定します。</dd> + <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt> + <dd>ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な statusbar オブジェクトを返します。</dd> + <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt> + <dd>ウィンドウ内で表示 / 非表示の切り替え (トグル) が可能な toolbar オブジェクトを返します。</dd> + <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt> + <dd>ウィンドウ階層における最上位のウィンドウへの参照を返します。このプロパティは読み取り専用です。</dd> + <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt> + <dd>指定したウィンドウの視覚的なビューポートを表す {{domxref("VisualViewport")}} オブジェクトを返します。</dd> + <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt> + <dd>現在のウィンドウへの参照を返します。</dd> + <dt><code>window[0]</code>、<code>window[1]</code> など</dt> + <dd>フレーム内の <code>window</code> オブジェクトへの参照を返します。詳しくは {{domxref("Window.frames")}} をご覧ください。</dd> +</dl> + +<h3 id="Properties_implemented_from_elsewhere" name="Properties_implemented_from_elsewhere">他のところで実装されているプロパティ</h3> + +<dl> + <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt> + <dd>現在のコンテキストに関連付けられた {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトはオフラインで使用する資産を格納したり、リクエストに対して独自のレスポンスを生成したりするような機能が利用できます。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt> + <dd>Indexed データベースにアプリケーションが非同期にアクセスできる仕組みを提供します。このプロパティは {{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> + +<h3 id="Obsolete_properties" name="Obsolete_properties">廃止されたプロパティ</h3> + +<dl> + <dt>{{domxref("Window.content")}} および <code>Window._content</code> {{Non-standard_inline}} {{obsolete_inline}} {{ReadOnlyInline}}</dt> + <dd>現在のウィンドウでのコンテンツ要素への参照を返します。 Firefox 57 より (当初は Nightly のみ) どちらも chrome (特権付き) コードに限り使用でき、ウェブでは使用できません。</dd> + <dt>{{domxref("Window.defaultStatus")}} {{obsolete_inline}}</dt> + <dd>指定ウィンドウのステータスバーのテキストを取得 / 設定</dd> + <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt> + <dd>{{domxref("window.personalbar")}} と同義</dd> + <dt>{{domxref("Window.globalStorage")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>複数のページに渡ってデータを保存するために使用する、複数のストレージオブジェクトを表していました。</dd> + <dt>{{domxref("Window.mozAnimationStartTime")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>現在のアニメーションサイクルが開始したときから経過した時間をミリ秒単位で表します。代わりに {{domxref("Animation.startTime")}} を使用してください。</dd> + <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>当該ウィンドウで、現在の文書を画面に描画した回数を返します。これは、描画パフォーマンスの算定に使用できます。</dd> + <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline}}</dt> + <dd>PKCS11 モジュールのインストールや削除を行う機能を提供していました。</dd> + <dt>{{domxref("Window.returnValue")}} {{obsolete_inline}}</dt> + <dd>ウィンドウをモーダルダイアログとして表示する {{domxref("window.showModalDialog()")}} メソッドを呼び出した関数へ返却される返値です。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>このインターフェイスは {{domxref("EventTarget")}} インターフェイスからメソッドを継承します。また {{domxref("WindowOrWorkerGlobalScope")}} および {{domxref("EventTarget")}} のプロパティを実装します。</em></p> + +<dl> + <dt>{{domxref("Window.alert()")}}</dt> + <dd>警告ダイアログを表示します。</dd> + <dt>{{domxref("Window.blur()")}}</dt> + <dd>ウィンドウからフォーカスを外します。</dd> + <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt> + <dd>{{domxref("Window.requestAnimationFrame")}} によって過去にスケジューリングされたコールバックをキャンセルできます。</dd> + <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt> + <dd>{{domxref("Window.requestIdleCallback")}} によって過去にスケジューリングされたコールバックをキャンセルできます。</dd> + <dt>{{domxref("Window.clearImmediate()")}}</dt> + <dd><code>setImmediate</code> で設定した繰り返し処理をキャンセルします。</dd> + <dt>{{domxref("Window.close()")}}</dt> + <dd>現在のウィンドウを閉じます。</dd> + <dt>{{domxref("Window.confirm()")}}</dt> + <dd>ユーザーの応答が必要なメッセージを持つダイアログを表示します。</dd> + <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt> + <dd>コンソールにメッセージを出力します。</dd> + <dt>{{domxref("Window.find()")}}</dt> + <dd>ウィンドウ内で指定された文字列を検索します。</dd> + <dt>{{domxref("Window.focus()")}}</dt> + <dd>現在のウィンドウにフォーカスを当てます。</dd> + <dt>{{domxref("Window.getComputedStyle()")}}</dt> + <dd>特定の要素の計算済みスタイルを取得します。計算済みスタイルは、要素のすべての CSS プロパティの計算値を示します。</dd> + <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt> + <dd>特定の要素について、作者のスタイルシートを無視したデフォルトの計算済みスタイルを取得します。</dd> + <dt>{{domxref("Window.getSelection()")}}</dt> + <dd>選択されたアイテムを表す、セレクションオブジェクトを返します。</dd> + <dt>{{domxref("Window.matchMedia()")}}</dt> + <dd>指定したメディアクエリ文字列を表す {{domxref("MediaQueryList")}} オブジェクトを返します。</dd> + <dt>{{domxref("Window.maximize()")}}</dt> + <dd>{{todo("NeedsContents")}}</dd> + <dt>{{domxref("Window.minimize()")}} (最上位の XUL ウィンドウに限る)</dt> + <dd>ウィンドウを最小化します。</dd> + <dt>{{domxref("Window.moveBy()")}}</dt> + <dd>現在のウィンドウを指定した距離移動します。</dd> + <dt>{{domxref("Window.moveTo()")}}</dt> + <dd>ウィンドウを指定した位置に移動します。</dd> + <dt>{{domxref("Window.open()")}}</dt> + <dd>新しいウィンドウを開きます。</dd> + <dt>{{domxref("Window.postMessage()")}}</dt> + <dd>あるウィンドウから別のウィンドウへ、安全にデータ文字列を送信する手段を提供します。送信先ウィンドウは、送信元と同じドメインでなくてもかまいません。</dd> + <dt>{{domxref("Window.print()")}}</dt> + <dd>現在の文書を印刷するためのダイアログを開きます。</dd> + <dt>{{domxref("Window.prompt()")}}</dt> + <dd>ユーザーが入力ダイアログに入力したテキストを返します。</dd> + <dt>{{domxref("Window.requestAnimationFrame()")}}</dt> + <dd>アニメーションが進行中であることをブラウザーに伝えて、次のアニメーションフレームのためにウィンドウの再描画を予定するよう要求します。</dd> + <dt>{{domxref("Window.requestIdleCallback()")}} {{experimental_inline}}</dt> + <dd>ブラウザーがアイドル状態であるときに実行するタスクをスケジューリングします。</dd> + <dt>{{domxref("Window.resizeBy()")}}</dt> + <dd>現在のウィンドウを、指定した大きさの分だけ変更します。</dd> + <dt>{{domxref("Window.resizeTo()")}}</dt> + <dd>ウィンドウを動的にリサイズします。</dd> + <dt>{{domxref("Window.scroll()")}}</dt> + <dd>ウィンドウを文書内の特定の位置にスクロールします。</dd> + <dt>{{domxref("Window.scrollBy()")}}</dt> + <dd>ウィンドウ内の文書を、指定した距離の分だけスクロールします。</dd> + <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt> + <dd>文書を指定した行数分、スクロールします。</dd> + <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt> + <dd>文書を指定したページ数分、スクロールします。</dd> + <dt>{{domxref("Window.scrollTo()")}}</dt> + <dd>文書内の特定の位置に、ウィンドウをスクロールします。</dd> + <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (トップレベルの XUL ウィンドウに限る)</dt> + <dd>現在のウィンドウのカーソルを変更します。</dd> + <dt>{{domxref("Window.setImmediate()")}}</dt> + <dd>ブラウザーで他の高負荷なタスクが完了した後に、関数を実行します。</dd> + <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt> + <dd>ユーザーがウィンドウをリサイズできるかを切り替えます。</dd> + <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt> + <dd>コンテンツに応じてウィンドウのサイズを調整します。</dd> + <dt>{{domxref("Window.stop()")}}</dt> + <dd>ウィンドウの読み込み処理を停止します。</dd> + <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt> + <dd>現在の chrome ウィンドウ (UI) のコマンドの状態を更新します。</dd> +</dl> + +<h3 id="Methods_implemented_from_elsewhere" name="Methods_implemented_from_elsewhere">他のところで実装されているメソッド</h3> + +<dl> + <dt>{{domxref("EventTarget.addEventListener()")}}</dt> + <dd>ウィンドウの特定の種類のイベントにイベントハンドラーを登録します。</dd> + <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> + <dd>イベントを動作させるために使用します。</dd> + <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("EventTarget.removeEventListener")}}</dt> + <dd>window からイベントリスナーを削除します。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt> + <dd>ミリ秒単位で指定した時間が経過するたびに関数を実行するようスケジューリングします。</dd> + <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt> + <dd>指定した時間が経過したら関数を実行するようスケジューリングします。</dd> +</dl> + +<h3 id="Obsolete_methods" name="Obsolete_methods">廃止されたメソッド</h3> + +<dl> + <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>ウィンドウの履歴をひとつ戻ります。このメソッドは廃止されました。代わりに {{domxref("History.back", "window.history.back()")}} を使用してください。</dd> + <dt>{{domxref("Window.captureEvents()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>特定のタイプのイベントをすべてキャプチャするよう、ウィンドウに登録します。</dd> + <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>履歴でひとつ先の文書に移動します。このメソッドは廃止されました。代わりに {{domxref("History.forward", "window.history.forward()")}} を使用してください。</dd> + <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>アプリケーションアイコンをフラッシュさせます。</dd> + <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>ブラウザーのホームページに戻ります。</dd> + <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>新しいダイアログウィンドウを開きます。</dd> + <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>特定のタイプのイベントのキャプチャを解放します。</dd> + <dt>{{domxref("Window.showModalDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt> + <dd>モーダルダイアログを表示します。</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">イベントハンドラー</h2> + +<p>これらは window オブジェクトのプロパティで、ウィンドウで発生する可能性がある、関心事となる可能性がある様々な出来事に対するイベントハンドラーを設定して有効にすることができます。</p> + +<p><em>このインターフェイスは、 {{domxref("EventTarget")}} インターフェイスからイベントハンドラーを継承しています。また {{domxref("WindowEventHandlers")}} のイベントハンドラーを実装ていします。</em></p> + +<div class="note"> +<p><strong>メモ:</strong> {{Gecko("9.0")}} より、あるイベントハンドラープロパティが存在するかを調べるために <code>if ("onabort" in window)</code> という構文を使用できます。これは、 web IDL インターフェイスを適正にするためにイベントハンドラーインターフェイスが更新されたためです。詳しくは <a href="/ja/docs/DOM/DOM_event_handlers">DOM のイベントハンドラー</a>をご覧ください。</p> +</div> + +<dl> + <dt>{{domxref("Window.onappinstalled")}}</dt> + <dd>ページがウェブアプリとしてインストールされたときに呼び出されます。 {{domxref("Window/appinstalled_event", "appinstalled")}} イベントをご覧ください。</dd> + <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt> + <dd>モバイル環境でウェブサイトをホーム画面に保存するかどうかをユーザーに尋ねる前に呼び出されるイベントハンドラープロパティです。</dd> + <dt>{{domxref("Window.ondevicelight")}}</dt> + <dd>環境光のレベルが変化したイベントのイベントハンドラープロパティです。</dd> + <dt>{{domxref("Window.ondevicemotion")}}</dt> + <dd>加速度センサーが変化を検知した場合に呼び出されます (モバイル端末向け)</dd> + <dt>{{domxref("Window.ondeviceorientation")}}</dt> + <dd>向きが変化したときに呼び出されます (モバイル端末向け)</dd> + <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}}</dt> + <dd>端末の向きが変化したイベントのイベントハンドラープロパティです。</dd> + <dt>{{domxref("Window.ondeviceproximity")}}</dt> + <dd>端末の proximity イベントのイベントハンドラープロパティです。</dd> + <dt>{{domxref("Window.ongamepadconnected")}}</dt> + <dd>ゲームパッドがコンピューターに接続された ({{event('gamepadconnected')}} イベントが発生した) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.ongamepaddisconnected")}}</dt> + <dd>ゲームパッドがコンピューターから取り外された ({{event('gamepaddisconnected')}} イベントが発生した) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.onmozbeforepaint")}}</dt> + <dd><code>MozBeforePaint</code> イベントのイベントハンドラープロパティです。 {{domxref("Window.mozRequestAnimationFrame()")}} メソッドの呼び出しによってイベントが要求された場合に、ウィンドウを再描画する前に送信されます。</dd> + <dt>{{domxref("Window.onpaint")}}</dt> + <dd>ウィンドウの描画イベントのイベントハンドラーです。</dd> + <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt> + <dd>{{jsxref("Promise")}} の失敗イベントを扱うためのイベントハンドラープロパティです。</dd> + <dt>{{domxref("Window.onuserproximity")}}</dt> + <dd>ユーザーの近接イベントのためのイベントハンドラープロパティです。</dd> + <dt>{{domxref("Window.onvrdisplayconnect")}}</dt> + <dd>互換性がある VR 端末がコンピューターに接続された ({{event("vrdisplayconnected")}} イベントが発生した) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt> + <dd>互換性がある VR 端末がコンピューターから取り外された ({{event("vrdisplaydisconnected")}} イベントが発生した) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.onvrdisplayactivate")}}</dt> + <dd>HMD がスタンバイ状態から復帰した、あるいは装着によって起動したなどにより、ディスプレイが実行可能になった ({{event("vrdisplayactivate")}} イベントが発生) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt> + <dd>HMD が未使用時間によってスタンバイ状態やスリープ状態に移行したなど、ディスプレイが実行可能状態ではなくなった ({{event("vrdisplaydeactivate")}} イベントが発生) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.onvrdisplayblur")}}</dt> + <dd>ユーザーがシステムメニューやブラウザーを操作している間に追跡を妨げたり体験が失われたりするなど、ブラウザー、OS、VR ハードウェアによるなんらかの理由でディスプレーの表示が一時停止した ({{event("vrdisplayblur")}} イベントが発生) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.onvrdisplayfocus")}}</dt> + <dd>ディスプレイの表示が blur 状態から復帰した ({{event("vrdisplayfocus")}} イベントが発生) ときに実行するイベントハンドラーを表します。</dd> + <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt> + <dd>表示状態から非表示状態に変化した、あるいはその逆の変化など、VR 端末の表示状態が変化した ({{event("vrdisplaypresentchange")}} イベントが発生) ときに実行するイベントハンドラーを表します。</dd> +</dl> + +<h3 id="Event_handlers_implemented_from_elsewhere" name="Event_handlers_implemented_from_elsewhere">他で実装されているイベントハンドラー</h3> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>ユーザーが読み込み処理中にキャンセルしたなど、リソースの読み込みが異常終了した際に呼び出されます。</dd> + <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt> + <dd>印刷ダイアログボックスを閉じたときに呼び出されます。{{event("afterprint")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt> + <dd>印刷ダイアログボックスを開いたときに呼び出されます。{{event("beforeprint")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt> + <dd>window でイベントをアンロードする前のイベントハンドラープロパティです。</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>ポップアップなどにより、ウィンドウがフォーカスを失った後に呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>window の change イベントのイベントハンドラープロパティです。</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>いずれかのマウスボタンを押した後および離した後に呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>いずれかのマウスボタンをダブルクリックしたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>ウィンドウを閉じた後に呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>右マウスボタンを押したときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>リソースの読み込みが失敗したとき、あるいは実行時にエラーが発生したときに呼び出されます。{{event("error")}} イベントをご覧ください。</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>ウィンドウがフォーカスを得た、あるいは取り戻した後に呼び出されます。{{event("focus")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>window の {{event('hashchange')}} イベントのイベントハンドラープロパティです。URL のハッシュ記号 ("#") の後の部分が変化したときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd><input> 要素の値が変化したときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>なんらかのキーを押下し始めたときに呼び出されます。{{event("keydown")}} イベントをご覧ください。</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>キー (Shift、Fn、CapsLock を除く) を押下した状態であるときに呼び出されます。{{event("keypress")}} をご覧ください。</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>なんらかのキーを押し終えたときに呼び出されます。{{event("keyup")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt> + <dd>window の {{event("languagechange")}} イベントのイベントハンドラープロパティです。</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>すべてのリソースおよび DOM が完全に読み込まれた後に呼び出されます。戻るボタンなどで、キャッシュからページが読み込まれたときは呼び出されません。</dd> + <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt> + <dd>{{event("message")}} イベントが発生したときに呼び出すコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>いずれかのマウスボタンを押したときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>マウスをウィンドウ内で動かすときに、連続的に呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>マウスポインターがウィンドウから外れたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>マウスポインターがウィンドウ内に入ったときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>いずれかのマウスボタンを離したときに呼び出されます。</dd> + <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt> + <dd>ネットワーク接続が失われたときに呼び出されます。{{event("offline")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.ononline")}}</dt> + <dd>ネットワーク接続が確立されたときに呼び出されます。{{event("online")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt> + <dd>ユーザーがあるページから去ったとき、onunload イベントの前に呼び出されます。{{event("pagehide")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt> + <dd>すべてのリソースおよび DOM が完全に読み込まれた後に呼び出されます。{{event("pageshow")}} イベントをご覧ください。</dd> + <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt> + <dd>戻るボタンが押されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>フォームがリセットされたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>ウィンドウのリサイズに応じて、連続的に呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>なんらかの方法でスクロールバーが動かされたときに呼び出されます。リソースがウィンドウ内に完全に収まっている場合は、このイベントを発生させられません。</dd> + <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt> + <dd>マウスホイールがいずれかの軸に沿って回されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>入力フィールド内のテキストが選択された後に呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>{{event("selectionchange")}} イベントが発生したときに呼び出すコードを表す {{domxref("EventHandler")}} です。</dd> + <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt> + <dd>セッションストレージまたはローカルストレージが変化したときに呼び出されます。 {{event("storage")}} イベントをご覧ください。</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>フォームが送信されたときに呼び出されます。</dd> + <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt> + <dd>処理されていない {{jsxref("Promise")}} の失敗イベントを扱うためのイベントハンドラープロパティです。</dd> + <dt>{{domxref("WindowEventHandlers.onunload")}}</dt> + <dd>ユーザーがページから去ったときに呼び出されます。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<p>これらのイベントを待ち受けするには、 {{domxref("EventTarget/addEventListener", "addEventListener()")}} を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかしてください。</p> + +<dl> + <dt>{{domxref("Window/error_event", "error")}}</dt> + <dd>リソースの読み込みに失敗したか、利用できないときに発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかったり、向こうであったりした場合です。<br> + {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/languagechange_event", "languagechange")}}</dt> + <dd>ユーザーの推奨される言語が変更されたときに、グローバルスコープオブジェクトに発生します。<br> + {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/orientationchange_event", "orientationchange")}}</dt> + <dd>端末の向きが変化したときに発生します。<br> + {{domxref("Window/onorientationchange", "onorientationchange")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/devicemotion_event", "devicemotion")}}</dt> + <dd>定期的に発生し、利用できる場合は、端末にかかっている物理的な加速度の量と傾きを示します。</dd> + <dt>{{domxref("Window/deviceorientation_event", "deviceorientation")}}</dt> + <dd>現在の端末の向きを地球の座標軸と比較する時期包囲センサーから新しいデータが利用できるようになったときに発生します。</dd> + <dt><code>{{domxref("Document/defaultView/resize_event", "resize")}}</code></dt> + <dd>Fired when the window has been resized.<br> + {{domxref("GlobalEventHandlers/onresize", "onresize")}} プロパティからも利用できます。</dd> + <dt><code>{{domxref("Document/defaultView/storage_event", "storage")}}</code></dt> + <dd>ストレージ領域 (<code>localStorage</code> または <code>sessionStorage</code>) が他の文書のコンテキストから変更されたときに発生します。<br> + {{domxref("WindowEventHandlers/onstorage", "onstorage")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Animation_events" name="Animation_events">アニメーションイベント</h3> + +<dl> + <dt>{{domxref("Window/animationcancel_event", "animationcancel")}}</dt> + <dd>アニメーションが予期せず中断されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/animationend_event", "animationend")}}</dt> + <dd>アニメーションが正常に終了したときに発生します。<br> + {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/animationiteration_event", "animationiteration")}}</dt> + <dd>アニメーションが一巡したときに発生します。<br> + {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/animationstart_event", "animationstart")}}</dt> + <dd>アニメーションが開始されたときに発生します。<br> + {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Clipboard_events" name="Clipboard_events">クリップボードイベント</h3> + +<dl> + <dt>{{domxref("Window/clipboardchange_event", "clipboardchange")}}</dt> + <dd>システムクリップボードの内容が変化したときに発生します。</dd> + <dt>{{domxref("Window/copy_event", "copy")}}</dt> + <dd>ブラウザーのユーザーインターフェイスからユーザーがコピー操作を行ったときに発生します。<br> + {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/cut_event", "cut")}}</dt> + <dd>ブラウザーのユーザーインターフェイスからユーザーが切り取り操作を行ったときに発生します。<br> + {{domxref("HTMLElement/oncut", "oncut")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/paste_event", "paste")}}</dt> + <dd>ブラウザーのユーザーインターフェイスからユーザーが貼り付け操作を行ったときに発生します。<br> + {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Connection_events" name="Connection_events">接続イベント</h3> + +<dl> + <dt>{{domxref("Window/offline_event", "offline")}}</dt> + <dd>ブラウザーがネットワークへのアクセスから切断され、 <code>navigator.onLine</code> の値が <code>false</code> に変わったときに発生します。<br> + {{domxref("WindowEventHandlers.onoffline", "onoffline")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/online_event", "online ")}}</dt> + <dd>ブラウザーがネットワークへのアクセスに接続され、 <code>navigator.onLine</code> の値が <code>true</code> に変わったときに発生します。<br> + {{domxref("WindowEventHandlers.ononline", "ononline")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Focus_events" name="Focus_events">フォーカスイベント</h3> + +<dl> + <dt>{{domxref("Window/blur_event", "blur")}}</dt> + <dd>要素がフォーカスを失ったときに発生します。<br> + {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/focus_event", "focus")}}</dt> + <dd>要素がフォーカスを得たときに発生します。<br> + {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティからも利用できます。/dd></dd> +</dl> + +<h3 id="Gamepad_events" name="Gamepad_events">ゲームパッドイベント</h3> + +<dl> + <dt>{{domxref("Window/gamepadconnected_event", "gamepadconnected")}}</dt> + <dd>ゲームパッドが接続された、またはゲームパッドのボタンや軸が初めて使用されたことをブラウザーが検出したときに発生します。<br> + {{domxref("Window/ongamepadconnected", "ongamepadconnected")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}}</dt> + <dd>ゲームパッドが切断されたことをブラウザーが検出したときに発生します。<br> + {{domxref("Window/ongamepaddisconnected", "ongamepaddisconnected")}} プロパティからも利用できます。/dd></dd> +</dl> + +<h3 id="History_events" name="History_events">履歴イベント</h3> + +<dl> + <dt>{{domxref("Window/hashchange_event", "hashchange")}}</dt> + <dd>URL のフラグメント識別子 (URL の中で <code>#</code> 記号で始まり、それに続く部分) が変化したときに発生します。<br> + {{domxref("WindowEventHandlers/onhashchange", "onhashchange")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/pagehide_event", "pagehide")}}</dt> + <dd>ブラウザーが現在の文書を非表示にして、その場所にセッションの履歴とは異なる文書を表示するよう切り替えているときに送信されます。これはたとえば、ユーザーが「戻る」ボタンをクリックしたとき、または「進む」ボタンをクリックしてセッション履歴を先に進めたときに発生します。<br> + <code><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/onpagehide">onpagehide</a></code> イベントハンドラープロパティからも利用できます。</dd> + <dt>{{domxref("Window/pageshow_event", "pageshow")}}</dt> + <dd>ページが最初に読み込まれたときだけでなく、ユーザーが同じタブ内で別のページに移動した後にページに戻ったときなど、ナビゲーションタスクのためにブラウザーが文書を表示するときに送信されます。<br> + <code><a href="/ja/docs/Mozilla/Tech/XUL/Attribute/onpageshow">onpageshow</a></code> イベントハンドラープロパティからも利用できます。</dd> + <dt><code>{{domxref("Document/defaultView/popstate_event", "popstate")}}</code></dt> + <dd>アクティブな履歴項目が変化したときに発生します。<br> + {{domxref("WindowEventHandlers/onpopstate", "onpopstate")}} イベントハンドラープロパティからも利用できます。</dd> +</dl> + +<h3 id="ロード・アンロードイベント">ロード・アンロードイベント</h3> + +<dl> + <dt>{{domxref("Window/beforeunload_event", "beforeunload")}}</dt> + <dd>ウィンドウ、文書、そのリソースがアンロードされるときに発生します。<br> + {{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</dt> + <dd>文書が完全に読み込まれて解析されたときに、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに発生します。</dd> + <dt>{{domxref("Window/load_event", "load")}}</dt> + <dd>スタイルシートや画像などの依存するすべてのリソースを含め、ページ全体の読み込みが完了したときに発生します。<br> + {{domxref("GlobalEventHandlers/onload", "onload")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/unload_event", "unload")}}</dt> + <dd>文書や子リソースがアンロードされるときに発生します。<br> + {{domxref("WindowEventHandlers/onunload", "onunload")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Manifest_events" name="Manifest_events">マニフェストイベント</h3> + +<dl> + <dt>{{domxref("Window/appinstalled_event", "appinstalled")}}</dt> + <dd>ブラウザーがページをアプリケーションとしてインストールすることに成功したときに発生します。<br> + {{domxref("Window/onappinstalled", "onappinstalled")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/beforeinstallprompt_event", "beforeinstallprompt")}}</dt> + <dd>ウェブアプリケーションをインストールすることをユーザーに問い合わせようとするときに発生します。<br> + {{domxref("Window/onbeforeinstallprompt", "onbeforeinstallprompt")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Messaging_events" name="Messaging_events">メッセージイベント</h3> + +<dl> + <dt>{{domxref("Window/message_event", "message")}}</dt> + <dd>ウィンドウがメッセージを受け取ったとき、例えば他のブラウザーのコンテキストから {{domxref("Window/postMessage", "Window.postMessage()")}} が呼び出された時に発生します。<br> + {{domxref("WindowEventHandlers/onmessage", "onmessage")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/messageerror_event", "messageerror")}}</dt> + <dd><code>Window</code> オブジェクトが復元できないメッセージを受信したときに発生します。<br> + {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Print_events" name="Print_events">印刷イベント</h3> + +<dl> + <dt>{{domxref("Window/afterprint_event", "afterprint")}}</dt> + <dd>関連づけられた文書の印刷が始まったか、印刷プレビューが閉じた後に発生します。<br> + {{domxref("WindowEventHandlers/onafterprint", "onafterprint")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/beforeprint_event", "beforeprint")}}</dt> + <dd>関連づけられた文書の印刷が始まるか、印刷プレビューが表示されるときに発生します。<br> + {{domxref("WindowEventHandlers/onbeforeprint", "onbeforeprint")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="Promise_rejection_events" name="Promise_rejection_events">Promise 拒否イベント</h3> + +<dl> + <dt>{{domxref("Window/rejectionhandled_event", "rejectionhandled")}}</dt> + <dd>拒否を処理するハンドラーがあるかどうかにかかわらず、 JavaScript の {{jsxref("Promise")}} が拒否されるたびに送られます。<br> + {{domxref("WindowEventHandlers/onrejectionhandled", "onrejectionhandled")}} イベントハンドラープロパティからも利用できます。</dd> + <dt>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</dt> + <dd>JavaScript の {{jsxref("Promise")}} が拒否されたものの、拒否を処理するハンドラーがないときに送られます。<br> + {{domxref("WindowEventHandlers/onunhandledrejection", "onunhandledrejection")}} イベントハンドラープロパティからも利用できます。</dd> +</dl> + +<h3 id="Transition_events" name="Transition_events">トランジションイベント</h3> + +<dl> + <dt>{{domxref("Window/transitioncancel_event", "transitioncancel")}}</dt> + <dd><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が中止されたときに発生します。<br> + {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/transitionend_event", "transitionend")}}</dt> + <dd><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が完了したときに発生します。<br> + {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/transitionrun_event", "transitionrun")}}</dt> + <dd><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が初めて作成されたときに発生します。<br> + {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/transitionstart_event", "transitionstart")}}</dt> + <dd><a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が実際に開始されたときに発生します。<br> + {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} プロパティからも利用できます。</dd> +</dl> + +<h3 id="WebVR_events" name="WebVR_events">WebVR イベント</h3> + +<dl> + <dt>{{domxref("Window/vrdisplayactivate_event", "vrdisplayactivate")}}</dt> + <dd>VR ディスプレイが表示する準備ができたとき、例えば HMD がスタンバイ状態に移行したり、装着して準備ができたときに発生します。<br> + {{domxref("Window/onvrdisplayactivate", "onvrdisplayactivate")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplayblur_event", "vrdisplayblur")}}</dt> + <dd>ブラウザー、 OS、 VR ハードウェアの何れかが原因で、 VR ディスプレイの表示が停止したときに発生します。<br> + {{domxref("Window/onvrdisplayblur", "onvrdisplayblur")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplayconnect_event", "vrdisplayconnect")}}</dt> + <dd>互換性のある VR ディスプレイがコンピューターに接続されたときに発生します。<br> + {{domxref("Window/onvrdisplayconnect", "onvrdisplayconnect")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplaydeactivate_event", "vrdisplaydeactivate")}}</dt> + <dd>VR ディスプレイが表示をやめる可能性があるとき、例えば HMD が一定時間使用されなかったためにスタンバイまたはスリープモードに入ったときなどに発生します。<br> + {{domxref("Window/onvrdisplaydeactivate", "onvrdisplaydeactivate")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplaydisconnect_event", "vrdisplaydisconnect")}}</dt> + <dd>互換性のある VR ディスプレイがコンピュータから切り離されたときに発生します。<br> + {{domxref("Window/onvrdisplaydisconnect", "onvrdisplaydisconnect")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplayfocus_event", "vrdisplayfocus")}}</dt> + <dd>VR ディスプレイへの表示を休んだ後で復帰したときに発生します。<br> + {{domxref("Window/onvrdisplayfocus", "onvrdisplayfocus")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplaypresentchange_event", "vrdisplaypresentchange")}}</dt> + <dd>VR ディスプレイの表示状態が変化したときに発生します。 — すなわち、表示を始めたり、表示を消したり、などです。<br> + {{domxref("Window/onvrdisplaypresentchange", "onvrdisplaypresentchange")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplaypointerrestricted_event", "vrdisplaypointerrestricted")}}</dt> + <dd>VR ディスプレイのポインター入力の消費が <a href="/ja/docs/Web/API/Pointer_Lock_API">pointerlocked 要素</a>によって抑止されたときに発生します。<br> + {{domxref("Window/onvrdisplaypointerrestricted", "onvrdisplaypointerrestricted")}} プロパティからも利用できます。</dd> + <dt>{{domxref("Window/vrdisplaypointerunrestricted_event", "vrdisplaypointerunrestricted")}}</dt> + <dd>VR ディスプレイのポインター入力の消費が <a href="/ja/docs/Web/API/Pointer_Lock_API">pointerlocked 要素</a>によって抑止が解除されたときに発生します。<br> + {{domxref("Window/onvrdisplaypointerunrestricted", "onvrdisplaypointerunrestricted")}} プロパティからも利用できます。</dd> +</dl> + +<h2 id="Interfaces" name="Interfaces">インターフェイス</h2> + +<p><a href="/ja/docs/DOM/DOM_Reference" title="DOM/DOM_Reference">DOM リファレンス</a> をご覧ください。</p> + +<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.Window")}}</p> diff --git a/files/ja/web/api/window/innerheight/index.html b/files/ja/web/api/window/innerheight/index.html new file mode 100644 index 0000000000..2b1a4d2ac1 --- /dev/null +++ b/files/ja/web/api/window/innerheight/index.html @@ -0,0 +1,99 @@ +--- +title: Window.innerHeight +slug: Web/API/Window/innerHeight +tags: + - API + - CSSOM + - CSSOM View + - HTML DOM + - NeedsInteractiveExample + - Property + - Reference + - View + - Window + - height + - innerHeight +translation_of: Web/API/Window/innerHeight +--- +<div>{{APIRef}}</div> + +<p><strong><code>innerHeight</code></strong> は {{domxref("Window")}} インターフェイスの読み取り専用プロパティで、ウィンドウの内部の高さをピクセル単位で返します。水平スクロールバーがあれば、その高さを含みます。</p> + +<p><code>innerHeight</code> の値はウィンドウの{{Glossary("layout viewport", "レイアウトビューポート")}}の高さから取られます。幅は {{domxref("Window.innerWidth", "innerWidth")}} プロパティを使用して取ることができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>intViewportHeight</var> = window.innerHeight;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>整数値で、ウィンドウのレイアウトビューポートの高さをピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。</p> + +<p>ウィンドウの幅を変更するには、 {{domxref("Window.resizeTo", "resizeTo()")}} や {{domxref("Window.resizeBy", "resizeBy()")}} などの寸法変更メソッドの一つを呼び出してください。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>ウィンドウから水平スクロールバーや境界を引いた高さを取得するには、ルートの {{HTMLElement("html")}} 要素の {{domxref("Element.clientHeight", "clientHeight()")}} プロパティを代わりに使用してください。</p> + +<p><code>innerHeight</code> および <code>innerWidth</code> はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Assuming_a_frameset" name="Assuming_a_frameset">フレームセットの想定</h3> + +<pre class="brush:js notranslate">var intFrameHeight = window.innerHeight; // or + +var intFrameHeight = self.innerHeight; +// フレームセット内にあるフレームのビューポートの高さを返します + +var intFramesetHeight = parent.innerHeight; +// 最も近いフレームセットのビューポートの高さを返します + +var intOuterFramesetHeight = top.innerHeight; +// もっとも外側のフレームセットのビューポートの高さを返します +</pre> + +<p>{{todo("link to an interactive demo here")}}</p> + +<p>ウィンドウの寸法を変更するには、 {{domxref("window.resizeBy()")}} と {{domxref("window.resizeTo()")}} を参照してください。</p> + +<p>ウィンドウの外形の高さ、すなわちブラウザーウィンドウ全体の高さを取得するには、 {{domxref("window.outerHeight")}} を参照してください。</p> + +<h3 id="Graphical_example" name="Graphical_example">図</h3> + +<p>以下の図は <code>outerHeight</code> と <code>innerHeight</code> の違いを示しています。</p> + +<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></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('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td> + <td>{{Spec2('CSSOM View')}}</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.Window.innerHeight")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.innerWidth")}}</li> + <li>{{domxref("window.outerHeight")}}</li> + <li>{{domxref("window.outerWidth")}}</li> +</ul> diff --git a/files/ja/web/api/window/innerwidth/index.html b/files/ja/web/api/window/innerwidth/index.html new file mode 100644 index 0000000000..dd390a3561 --- /dev/null +++ b/files/ja/web/api/window/innerwidth/index.html @@ -0,0 +1,83 @@ +--- +title: Window.innerWidth +slug: Web/API/Window/innerWidth +tags: + - API + - CSSOM View + - HTML DOM + - Layout + - Property + - Reference + - Window + - innerWidth + - width +translation_of: Web/API/Window/innerWidth +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">{{domxref("Window")}} の <strong><code>innerWidth</code></strong> プロパティは読み取り専用で、ウィンドウの内部の幅をピクセル単位で返します。これには垂直スクロールバーがある場合、その幅を含みます。</span></p> + +<p>もっと詳細に言えば、<code>innerWidth</code> の値はウィンドウの{{Glossary("layout viewport", "レイアウトビューポート")}}の幅から取られます。ウィンドウの内部の高さは {{domxref("Window.innerHeight", "innerHeight")}} プロパティを使用して取ることができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>intViewportWidth</var> = window.innerWidth;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>整数値で、ウィンドウのレイアウトビューポートの幅をピクセル単位で示します。このプロパティは読み取り専用で、既定値はありません。</p> + +<p>ウィンドウの幅を変更するには、 {{domxref("Window")}} の寸法の変更メソッドのうちの一つ、例えば {{domxref("Window.resizeBy", "resizeBy()")}} や {{domxref("Window.resizeTo", "resizeTo()")}} などを呼び出してください。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>ウィンドウからスクロールバーや境界を引いた幅を取得するには、ルートの {{HTMLElement("html")}} 要素の {{domxref("Element.clientWidth", "clientWidth")}} プロパティを代わりに使用してください。</p> + +<p><code>innerWidth</code> はすべてのウィンドウと、ウィンドウのように動作するすべてのオブジェクト、例えばタブやフレームで利用できます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">// これはビューポートの幅を返す +var intFrameWidth = window.innerWidth; + +// これはフレームセット内のフレームビューポートの幅を返す +var intFrameWidth = self.innerWidth; + +// これは直近のフレームセットのビューポートの幅を返す +var intFramesetWidth = parent.innerWidth; + +// これはもっとも外側のフレームセットのビューポートの幅を返す +var intOuterFramesetWidth = top.innerWidth;</pre> + +<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('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}</td> + <td>{{Spec2('CSSOM View')}}</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.Window.innerWidth")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.outerWidth")}}</li> + <li>{{domxref("window.innerHeight")}}</li> + <li>{{domxref("window.outerHeight")}}</li> +</ul> diff --git a/files/ja/web/api/window/issecurecontext/index.html b/files/ja/web/api/window/issecurecontext/index.html new file mode 100644 index 0000000000..cafa0e3300 --- /dev/null +++ b/files/ja/web/api/window/issecurecontext/index.html @@ -0,0 +1,126 @@ +--- +title: Window.isSecureContext +slug: Web/API/Window/isSecureContext +tags: + - API + - Property + - Reference + - Security + - Window +translation_of: Web/API/Window/isSecureContext +--- +<p>{{APIRef}}{{SeeCompatTable}}</p> + +<p><code><strong>window.isSecureContext</strong></code> 読み取り専用プロパティは、コンテキストが <a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> を必要とする機能を使用できるかどうかを示します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <em>isSecure</em> = window.isSecureContext</pre> + +<h2 id="例">例</h2> + +<h3 id="機能検出">機能検出</h3> + +<p>グローバルスコープの <code>isSecureContext</code> の真偽値を用いることで、安全なコンテクストかどうかをチェックすることで機能検出できます。</p> + +<pre class="brush: js">if (window.isSecureContext) { + // Page is a secure context so service workers are now available + navigator.serviceWorker.register("/offline-worker.js").then(function () { + ... + }); +}</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様</th> + <th>ステータス</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName('Secure Contexts')}}</td> + <td>{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/API/Window/opener">window.opener</a> の考慮</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/API/Window/opener">window.opener</a> の考慮</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテクスト</a></li> +</ul> diff --git a/files/ja/web/api/window/languagechange_event/index.html b/files/ja/web/api/window/languagechange_event/index.html new file mode 100644 index 0000000000..9addb7cb55 --- /dev/null +++ b/files/ja/web/api/window/languagechange_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'Window: languagechange イベント' +slug: Web/API/Window/languagechange_event +tags: + - Event + - Experimental + - HTML DOM + - Reference + - Window + - イベント +translation_of: Web/API/Window/languagechange_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>languagechange</code></strong> イベントはグローバルスコープオブジェクトで、ユーザーの推奨言語が変更されたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラー</th> + <td>{{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>languagechange</code> は {{domxref("EventTarget/addEventListener", "addEventListener")}} メソッドで使用することができます。</p> + +<pre class="brush: js">window.addEventListener('languagechange', function() { + console.log('languagechange event detected!'); +});</pre> + +<p>または、 {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}} イベントハンドラープロパティを使用することもできます。</p> + +<pre class="brush: js">window.onlanguagechange = function(event) { + console.log('languagechange event detected!'); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</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.Window.languagechange_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("NavigatorLanguage.language", "navigator.language")}}</li> + <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li> + <li>{{domxref("Navigator")}}</li> + <li>{{domxref("Window.onlanguagechange")}}</li> +</ul> diff --git a/files/ja/web/api/window/length/index.html b/files/ja/web/api/window/length/index.html new file mode 100644 index 0000000000..2cf903eeae --- /dev/null +++ b/files/ja/web/api/window/length/index.html @@ -0,0 +1,54 @@ +--- +title: window.length +slug: Web/API/Window/length +tags: + - API + - Gecko + - HTML DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/length +--- +<div>{{ApiRef}}</div> + +<h2 id="概要">概要</h2> + +<p>ウィンドウにおけるフレーム（{{HTMLElement("frame")}} か {{HTMLElement("iframe")}} 要素のいずれか）の数を返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var>framesCount</var> = window.length; +</pre> + +<ul> + <li><code>framesCount</code> はフレームの数です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">if (window.length) { + // サブフレーム数が 0 でない場合の処理をここに記述 +}</pre> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/api/window/load_event/index.html b/files/ja/web/api/window/load_event/index.html new file mode 100644 index 0000000000..c0070a8f9a --- /dev/null +++ b/files/ja/web/api/window/load_event/index.html @@ -0,0 +1,162 @@ +--- +title: 'Window: load イベント' +slug: Web/API/Window/load_event +tags: + - DOM + - Event + - Reference + - Window + - load +translation_of: Web/API/Window/load_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>load</code></strong> イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。これは {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} が、ページの DOM の読み込みが完了すれば、リソースの読み込みが完了するのを待たずに発生するのと対照的です。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/onload", "onload")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ページが完全に読み込まれたときに、メッセージを記録します。</p> + +<pre class="brush: js">window.addEventListener('load', (event) => { + console.log('ページが完全に読み込まれました'); +});</pre> + +<p>同じですが、 <code>onload</code> イベントハンドラープロパティの場合です。</p> + +<pre class="brush: js">window.onload = (event) => { + console.log('page is fully loaded'); +}; +</pre> + +<h3 id="Live_example" name="Live_example">ライブデモ</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</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('UI Events', '#event-type-load', 'load')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>このリンクは文書の読み込みの最後に実行されるステップの章へのリンクです。 load イベントは他の多くの要素でも発生します。そして、<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">load イベントを遅延させる</a> ものに言及している箇所が仕様書の中に多く存在することに注意してください。</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.Window.load_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li> +</ul> diff --git a/files/ja/web/api/window/localstorage/index.html b/files/ja/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..5fc78d7ba2 --- /dev/null +++ b/files/ja/web/api/window/localstorage/index.html @@ -0,0 +1,148 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Property + - Read-only + - Reference + - Storage + - Web Storage + - Window + - WindowLocalStorage + - localStorage +translation_of: Web/API/Window/localStorage +--- +<p>{{APIRef()}}</p> + +<p><code>localStorage</code> プロパティはローカルの {{domxref("Storage")}} オブジェクトにアクセスすることができます。 <code>localStorage</code> は <code><a href="/ja/docs/Web/API/Window.sessionStorage">sessionStorage</a></code> によく似ています。唯一の違いは、<code>localStorage</code> に保存されたデータには保持期間の制限はなく、<code>sessionStorage</code> に保存されたデータはセッションが終わると同時に（ブラウザが閉じられたときに）クリアされてしまうことです。</p> + +<p><code>localStorage<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">または</span></font>sessionStorage</code>に保存されるデータは<strong>そのページのプロトコル固有である</strong>ことに注意する必要があります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js notranslate">myStorage = localStorage;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>現在のオリジンの local storageスペースにアクセスするのに使用できる {{domxref("Storage")}} オブジェクトを返します。</p> + +<h3 id="Exceptions" name="Exceptions">例外</h3> + +<dl> + <dt><code>SecurityError</code></dt> + <dd>リクエストがポリシーの決定に反している、またはオリジンが<a href="https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy#Definition_of_an_origin">妥当な scheme/host/port tuple</a>でない (これは例えば、オリジンが <code>file:</code> や <code>data:</code> スキームを使うときに起こります)。例えば、ユーザーがブラウザー設定で特定オリジンへのデータ永続化のパーミッションを拒否していることもあります。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>以下のスニペットでは現在のドメインのローカル {{domxref("Storage")}} オブジェクトにアクセスし、{{domxref("Storage.setItem()")}} を利用してデータを追加しています。</p> + +<pre class="brush: js notranslate">localStorage.setItem('myCat', 'Tom');</pre> + +<p>localStorage 項目の読み込みの文法は以下の通り:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">var</span> cat <span class="operator token">=</span> localStorage<span class="punctuation token">.</span><span class="function token">getItem</span><span class="punctuation token">(</span><span class="string token">"myCat"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>localStorage 項目の削除の文法は以下の通り:</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">localStorage<span class="punctuation token">.</span><span class="function token">removeItem</span><span class="punctuation token">(</span><span class="string token">"myCat"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<div class="note"> +<p><strong>注</strong>: 詳細な使用例は <a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> の記事を参照してください。</p> +</div> + +<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('HTML WHATWG', 'webstorage.html#dom-localstorage', 'localStorage')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>すべてのブラウザは <code>localStorage</code> と {{domxref("sessionStorage")}} に対する容量変更ができるようになっています。<a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">詳しくはこちらを参照してください。</a></p> + +<div class="note"> +<p><strong>注:</strong> iOS 5.1 からは、Safari Mobile は <code>localStorage</code> データをキャッシュフォルダーに保存し、そこは時々 OS の指示で (よくあるのはスペースが少ない場合) 掃除されがちです。Safari Mobile のプライベートブラウジングモードでも、まったく <code>localStorage</code> が使用できません。</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li> + <li>{{domxref("LocalStorage")}}</li> + <li>{{domxref("SessionStorage")}}</li> + <li>{{domxref("Window.sessionStorage")}}</li> +</ul> diff --git a/files/ja/web/api/window/location/index.html b/files/ja/web/api/window/location/index.html new file mode 100644 index 0000000000..ef245d5503 --- /dev/null +++ b/files/ja/web/api/window/location/index.html @@ -0,0 +1,212 @@ +--- +title: Window.location +slug: Web/API/Window/location +tags: + - API + - HTML + - Reference + - Window + - プロパティ +translation_of: Web/API/Window/location +--- +<p>{{APIRef}}</p> + +<p><strong><code>Window.location</code></strong> 読み取り専用プロパティは、document の現在位置についての情報を持つ {{domxref("Location")}} オブジェクトを返します。</p> + +<p><code>Window.location</code> は <em>read-only</em> の <code>Location</code> オブジェクトであるにも関わらず、これに {{domxref("DOMString")}} を代入することもできます。これはつまり、多くの場合 <code>location</code> を文字列として扱えることを意味します。例えば <code>location = 'http://www.example.com'</code> は <code>location.href = 'http://www.example.com'</code> と同義です。</p> + +<p>すべての利用可能なプロパティについては、 {{domxref("Location")}} を参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>oldLocation</var> = location; +location = <var>newLocation</var>; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Basic_Example" name="Basic_Example">基本的な例</h3> + +<pre class="brush: js">alert(location); // alerts "https://developer.mozilla.org/ja/docs/Web/API/Window/location"</pre> + +<h3 id="Example_1_Navigate_to_a_new_page" name="Example_1_Navigate_to_a_new_page">例 #1: 新しいページへ移動する</h3> + +<p>location オブジェクトに新しい値が代入されるたびに、 <code>location.assign()</code> が変更された URL で呼び出され、その URL の文書が読み込まれます。ただし、 CORS などのセキュリティ設定により、この動作が妨げられる可能性があるので注意してください。</p> + +<pre class="brush: js">location.assign("http://www.mozilla.org"); // または +location = "http://www.mozilla.org"; +</pre> + +<h3 id="Example_2_Force_reloading_the_current_page_from_the_server" name="Example_2_Force_reloading_the_current_page_from_the_server">例 #2: 現在のページのサーバーからの強制的な再読み込み</h3> + +<pre class="brush: js">location.reload(true);</pre> + +<h3 id="Example_3" name="Example_3">例 #3</h3> + +<p>次の例を見てみましょう。これは、 <code>location.pathname</code> の値をハッシュに挿入するため、 <a href="/docs/Web/API/Location.replace"><code>replace()</code></a> メソッドを使用してページを再読み込みします。</p> + +<pre class="brush: js">function reloadPageWithHash() { + var initialPage = location.pathname; + location.replace('http://example.com/#' + initialPage); +} +</pre> + +<h3 id="Example_4_Display_the_properties_of_the_current_URL_in_an_alert_dialog" name="Example_4_Display_the_properties_of_the_current_URL_in_an_alert_dialog">例 #4: 現在の URL のプロパティを alert ダイアログに表示する</h3> + +<pre class="brush: js">function showLoc() { + var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ]; + for (var sProp in oLocation){ + aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " + (oLocation[sProp] || "n/a")); + } + alert(aLog.join("\n")); +} + +// html では: <button onclick="showLoc();">location プロパティを表示</button> +</pre> + +<h3 id="Example_5_Send_a_string_of_data_to_the_server_by_modifying_the_search_property" name="Example_5_Send_a_string_of_data_to_the_server_by_modifying_the_search_property">例 #5: <code>search</code> プロパティを変更してデータの文字列をサーバーへ送信する</h3> + +<pre class="brush: js">function sendData (sData) { + location.search = sData; +} + +// html では: <button onclick="sendData('Some data');">データを送信</button> +</pre> + +<p>現在の URL に "?Some%20data" が追加されてサーバーへ送信されます (サーバー側で何も起こらない場合、現在の文書が、変更された search 文字列で再読み込みされます)。</p> + +<h3 id="Example_6_Using_bookmarks_without_changing_the_hash_property" name="Example_6_Using_bookmarks_without_changing_the_hash_property">例 #6: <code>hash</code> プロパティを変更せずにブックマークを使用</h3> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta charset="UTF-8"/> +<title>MDN Example</title> +<script> +function showNode (oNode) { + document.documentElement.scrollTop = oNode.offsetTop; + document.documentElement.scrollLeft = oNode.offsetLeft; +} + +function showBookmark (sBookmark, bUseHash) { + if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; } + var oBookmark = document.querySelector(sBookmark); + if (oBookmark) { showNode(oBookmark); } +} +</script> +<style> +span.intLink { + cursor: pointer; + color: #0000ff; + text-decoration: underline; +} +</style> +</head> + +<body> +<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> +<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 bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p> +<p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</p> +<p>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. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</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> +<p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> +<p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p> +<p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p> +<p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p> +<p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Go to bookmark #1 without using location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Go to bookmark #3</span>&nbsp;]</p> +<p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p> +<p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p> +<p id="myBookmark3"><em>Here is the bookmark #3</em></p> +<p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p> +<p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p> +<p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p> +<p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p> +<p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p> +<p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p> +<p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p> +<p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p> +<p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p> +<p>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.</p> +</body> +</html> +</pre> + +<p>... 同じことをアニメーションするページスクロールで行うと:</p> + +<pre class="brush: js">var showBookmark = (function () { + var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, + /* + * nDuration: the duration in milliseconds of each frame + * nFrames: number of frames for each scroll + */ + nDuration = 200, nFrames = 10; + + function _next () { + if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; } + _isBot = true; + document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames); + document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames); + if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; } + _itFrame++; + } + + function _chkOwner () { + if (_isBot) { _isBot = false; return; } + if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; } + } + + if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); } + else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); } + + return function (sBookmark, bUseHash) { + var oNode = document.querySelector(sBookmark); + _scrollY = document.documentElement.scrollTop; + _scrollX = document.documentElement.scrollLeft; + _bookMark = sBookmark; + _useHash = bUseHash === true; + _nodeX = oNode.offsetLeft; + _nodeY = oNode.offsetTop; + _itFrame = 1; + if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); } + }; +})(); +</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('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName("HTML5 W3C")}} からの変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Window.location")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>返値のインターフェイス: {{domxref("Location")}}</li> + <li>類似の情報、ただし document に付属: {{domxref("Document.location")}}</li> + <li><a href="/en-US/docs/Web/API/History_API">ブラウザーの履歴の操作</a></li> + <li>{{event("hashchange")}}</li> +</ul> diff --git a/files/ja/web/api/window/locationbar/index.html b/files/ja/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..4f6343026c --- /dev/null +++ b/files/ja/web/api/window/locationbar/index.html @@ -0,0 +1,76 @@ +--- +title: window.locationbar +slug: Web/API/Window/locationbar +tags: + - Gecko + - HTML DOM + - Property + - Reference + - Window + - 要更新 +translation_of: Web/API/Window/locationbar +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> + +<h3 id="概要">概要</h3> + +<p><code>locationbar</code> オブジェクトを返します。このバーの表示は、ウィンドウ内でトグル（表示/非表示の状態を切り替える）ことができます。</p> + +<p>{{ 英語版章題("Syntax") }}</p> + +<h3 id="構文">構文</h3> + +<pre class="syntaxbox"><var>objRef</var> = window.locationbar +</pre> + +<p>{{ 英語版章題("Example") }}</p> + +<h3 id="例">例</h3> + +<p>次の完全な HTML の例は、様々な "bar" オブジェクトの visible プロパティで利用可能な方法を示しています。</p> + +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> + <title>様々な DOM テスト</title> + <script> + // 存在するウィンドウのバーの状態を変更します + netscape.security.PrivilegeManager. + enablePrivilege("UniversalBrowserWrite"); + window.locationbar.visible= + !window.locationbar.visible; + </script> +</head> +<body> + <p>様々な DOM テスト</p> +</body> +</html> +</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', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li> +</ul> diff --git a/files/ja/web/api/window/matchmedia/index.html b/files/ja/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..a29368376d --- /dev/null +++ b/files/ja/web/api/window/matchmedia/index.html @@ -0,0 +1,68 @@ +--- +title: window.matchMedia +slug: Web/API/Window/matchMedia +tags: + - API + - CSSOM View + - Method + - NeedsMarkupWork + - NeedsSpecTable + - Reference +translation_of: Web/API/Window/matchMedia +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>指定された <a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a>文字列のパース結果を表す、新しい {{domxref("MediaQueryList")}} オブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>mql</var> = window.matchMedia(<em>mediaQueryString</em>)</pre> + +<p><code>mediaQueryString</code> は、新しい {{domxref("MediaQueryList")}} オブジェクトを返すための、メディアクエリ文字列です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">if (window.matchMedia( "(min-width: 400px)" ).matches) { + /* ビューポートの幅が 400 ピクセル以上の場合のコードをここに */ +} else { + /* ビューポートの幅は 400 ピクセル未満の場合のコードをここに */ +} +</pre> + +<p>このコードでは、ウィンドウが非常に狭いときに、何か別の処理を行うことができます。</p> + +<p>他にも『<a href="/ja/docs/Web/Guide/CSS/Testing_media_queries">コード内でのメディアクエリの使用</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("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2> + +<div>{{Compat("api.Window.matchMedia")}}</div> + +<h2 id="See_also" name="See_also">関連記事</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a></li> + <li><a href="/ja/docs/Web/CSS/Using_media_queries_from_code">コード内でのメディアクエリの使用</a></li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{domxref("MediaQueryListListener")}}</li> +</ul> diff --git a/files/ja/web/api/window/menubar/index.html b/files/ja/web/api/window/menubar/index.html new file mode 100644 index 0000000000..afeebbfaa6 --- /dev/null +++ b/files/ja/web/api/window/menubar/index.html @@ -0,0 +1,72 @@ +--- +title: window.menubar +slug: Web/API/Window/menubar +tags: + - API + - Gecko + - HTML DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/menubar +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> + +<h3 id="概要">概要</h3> + +<p><code>menubar</code> オブジェクトを返します。このバーの表示は、ウィンドウ内でトグル（表示/非表示の状態を切り替える）ことができます。</p> + +<p>{{ 英語版章題("Syntax") }}</p> + +<h3 id="構文">構文</h3> + +<pre class="eval"><var>objRef</var> = window.menubar +</pre> + +<p>{{ 英語版章題("Example") }}</p> + +<h3 id="例">例</h3> + +<p>以下の完全な HTML の例は、様々な "bar" オブジェクトの visible プロパティで利用可能な方法を示しています。</p> + +<pre class="brush:html"><html> +<head> + <title>様々な DOM テスト</title> + <script> + // 存在するウィンドウのバーの状態を変更します + netscape.security.PrivilegeManager. + enablePrivilege("UniversalBrowserWrite"); + window.menubar.visible=!window.menubar.visible; + </script> +</head> +<body> + <p>様々な DOM テスト</p> +</body> +</html> +</pre> + +<h3 id="仕様">仕様</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="関連項目">関連項目</h3> + +<p><a href="/ja/DOM/window.locationbar">window.locationbar</a>, <a href="/ja/DOM/window.personalbar">window.personalbar</a>, <a href="/ja/DOM/window.scrollbars">window.scrollbars</a>, <a href="/ja/DOM/window.statusbar">window.statusbar</a>, <a href="/ja/DOM/window.toolbar">window.toolbar</a></p> diff --git a/files/ja/web/api/window/messageerror_event/index.html b/files/ja/web/api/window/messageerror_event/index.html new file mode 100644 index 0000000000..e5ed139ae9 --- /dev/null +++ b/files/ja/web/api/window/messageerror_event/index.html @@ -0,0 +1,80 @@ +--- +title: 'Window: messageerror イベント' +slug: Web/API/Window/messageerror_event +tags: + - API + - Event + - MessageEvent + - Reference + - Window + - イベント +translation_of: Web/API/Window/messageerror_event +--- +<div>{{APIRef}}</div> + +<p><code>messageerror</code> イベントは、解読できないメッセージを受け取った時に {{domxref('Window')}} オブジェクトに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("MessageEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>messageerror</code> は {{domxref("EventTarget/addEventListener", "addEventListener()")}} を使用して待ち受けします。</p> + +<pre class="brush: js">window.addEventListener('messageerror', (event) => { + console.error(event); +});</pre> + +<p>同じですが、 {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} イベントハンドラープロパティを使用する場合です。</p> + +<pre class="brush: js">window.onmessageerror = (event) => { + console.error(event); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}}</td> + <td>{{Spec2('HTML WHATWG')}}</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.Window.messageerror_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window.postMessage()")}}</li> + <li>関連イベント: {{domxref("Window/message_event", "message")}}</li> +</ul> diff --git a/files/ja/web/api/window/moveby/index.html b/files/ja/web/api/window/moveby/index.html new file mode 100644 index 0000000000..7e5ebbc4c3 --- /dev/null +++ b/files/ja/web/api/window/moveby/index.html @@ -0,0 +1,55 @@ +--- +title: window.moveBy +slug: Web/API/Window/moveBy +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/moveBy +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>指定された量だけ現在のウィンドウを移動します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.moveBy(<var>deltaX</var>, <var>deltaY</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>deltaX</code> : ウィンドウを水平方向に移動させるピクセル単位の大きさ</li> + <li><code>deltaY</code> : ウィンドウを垂直方向に移動させるピクセル単位の大きさ</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">function budge() { + moveBy(10, -10); +}</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>この関数に対して、負の数を引数に使うことができます。このメソッドは相対移動を、{{domxref("window.moveTo")}} は、絶対移動を行います。</p> + +<p>Firefox 7 より、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">以下の規則</a> に従い、 Web サイトからのブラウザのウィンドウの移動はできなくなっています。</p> + +<ol> + <li>{{domxref("window.open")}} によって作成されたものでないタブやウィンドウを移動することはできません。</li> + <li>ウィンドウに 1 つよりも多くのタブがある場合、タブやウィンドウを移動することはできません。</li> +</ol> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>{{DOM0}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.moveTo")}}</li> +</ul> diff --git a/files/ja/web/api/window/moveto/index.html b/files/ja/web/api/window/moveto/index.html new file mode 100644 index 0000000000..698f6ea010 --- /dev/null +++ b/files/ja/web/api/window/moveto/index.html @@ -0,0 +1,50 @@ +--- +title: window.moveTo +slug: Web/API/Window/moveTo +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/moveTo +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウを指定座標に移動します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.moveTo(<var>x</var>, <var>y</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>x</code> : 移動される水平座標（絶対値）</li> + <li><code>y</code> : 移動される垂直座標（絶対値）</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">function origin() { + // ウィンドウを画面の左上端に移動します + window.moveTo(0, 0); +}</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>この関数は、ウィンドウを絶対的な位置に移動するものです。相対的な移動には {{domxref("window.moveBy")}} を用います。</p> + +<p>Firefox 7 より、<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">以下の規則</a> に従い、 Web サイトからのブラウザのウィンドウの移動はできなくなっています。</p> + +<ol> + <li>{{domxref("window.open")}} によって作成されたものでないタブやウィンドウを移動することはできません。</li> + <li>ウィンドウに 1 つよりも多くのタブがある場合、タブやウィンドウを移動することはできません。</li> +</ol> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>{{dom0}}</p> diff --git a/files/ja/web/api/window/mozinnerscreenx/index.html b/files/ja/web/api/window/mozinnerscreenx/index.html new file mode 100644 index 0000000000..c2499e3247 --- /dev/null +++ b/files/ja/web/api/window/mozinnerscreenx/index.html @@ -0,0 +1,31 @@ +--- +title: window.mozInnerScreenX +slug: Web/API/Window/mozInnerScreenX +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/mozInnerScreenX +--- +<div> + {{ApiRef}} {{gecko_minversion_header("1.9.2")}}</div> +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウのビューポートの左上隅の<em>スクリーン上の</em> X 座標を取得します。</p> +<div class="note"> + <strong>注記:</strong> この座標はハードウェアピクセルではなく、CSS のピクセル単位で報告されます。つまり、ズームレベルによる影響を受けるということです。実際の物理的な画面のピクセル数を計算するには、 <a href="/ja/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a> プロパティを使用する必要があります。</div> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>screenX</var> = window.mozInnerScreenX;</pre> +<h3 id="Value" name="Value">値</h3> +<ul> + <li><var>screenX</var> : <code>window.mozInnerScreenX</code> プロパティの値となる</li> + <li><var>window.mozInnerScreenX</var> : 浮動小数点数値。デフォルト値無し {{readonlyInline}}</li> +</ul> +<h2 id="Specification" name="Specification">仕様書</h2> +<p><abbr title="World Wide Web Consortium">W3C</abbr> の技術仕様書や勧告に含まれるものではありません。</p> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("window.mozInnerScreenY")}}</li> + <li><a href="/ja/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li> +</ul> diff --git a/files/ja/web/api/window/mozinnerscreeny/index.html b/files/ja/web/api/window/mozinnerscreeny/index.html new file mode 100644 index 0000000000..c7442d877d --- /dev/null +++ b/files/ja/web/api/window/mozinnerscreeny/index.html @@ -0,0 +1,31 @@ +--- +title: window.mozInnerScreenY +slug: Web/API/Window/mozInnerScreenY +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/mozInnerScreenY +--- +<div> + {{ApiRef}} {{gecko_minversion_header("1.9.2")}}</div> +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウのビューポートの左上隅の<em>スクリーン上の</em> Y 座標を取得します。</p> +<div class="note"> + <strong>注記:</strong> この座標はハードウェアピクセルではなく、CSS のピクセル単位で報告されます。つまり、ズームレベルによる影響を受けるということです。実際の物理的な画面のピクセル数を計算するには、 <a href="/ja/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a> プロパティを使用する必要があります。</div> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>screenY</var> = window.mozInnerScreenY;</pre> +<h3 id="Value" name="Value">値</h3> +<ul> + <li><var>screenY</var> : <code>window.mozInnerScreenY</code> プロパティの値となる</li> + <li><var>window.mozInnerScreenY</var> : 浮動小数点数値。デフォルト値無し {{readonlyInline}}</li> +</ul> +<h2 id="Specification" name="Specification">仕様書</h2> +<p><abbr title="World Wide Web Consortium">W3C</abbr> の技術仕様書や勧告に含まれるものではありません。</p> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("window.mozInnerScreenX")}}</li> + <li><a href="/ja/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li> +</ul> diff --git a/files/ja/web/api/window/mozpaintcount/index.html b/files/ja/web/api/window/mozpaintcount/index.html new file mode 100644 index 0000000000..9be1225d17 --- /dev/null +++ b/files/ja/web/api/window/mozpaintcount/index.html @@ -0,0 +1,36 @@ +--- +title: Window.mozPaintCount +slug: Web/API/Window/mozPaintCount +tags: + - API + - HTML DOM + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Window + - プロパティ + - リファレンス +translation_of: Web/API/Window/mozPaintCount +--- +<div>{{APIRef}} {{gecko_minversion_header("2.0")}}</div> + +<p>この window で現在の document が画面に描画された回数を返します。</p> + +<h2 id="Syntax" name="Syntax"> 構文</h2> + +<pre class="syntaxbox"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre> + +<ul> + <li><code><em>paintCount</em></code> は <code>window.mozPaintCount</code> プロパティの値を保存します。</li> + <li><code>window.mozPaintCount</code> の値は <code>long long</code> です、そして最初に document が生成された時にはゼロから開始し、 document が描画される度に1増加します。</li> +</ul> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p><abbr title="World Wide Web Consortium">W3C</abbr> の技術仕様、または勧告の一部ではありません。</p> + +<h2 id="ブラウザ互換性">ブラウザ互換性</h2> + + + +<p>{{Compat("api.Window.mozPaintCount")}}</p> diff --git a/files/ja/web/api/window/name/index.html b/files/ja/web/api/window/name/index.html new file mode 100644 index 0000000000..0dbd1ab6c9 --- /dev/null +++ b/files/ja/web/api/window/name/index.html @@ -0,0 +1,56 @@ +--- +title: window.name +slug: Web/API/Window/name +tags: + - API + - HTML DOM + - Property + - Reference + - Window +translation_of: Web/API/Window/name +--- +<div>{{ApiRef}}</div> + +<p class="summary"><span class="seoSummary">ウィンドウ名を取得 / 設定します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>string</var> = window.name; +window.name = <var>string</var>; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">window.name = "lab_view"; +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>ウィンドウ名は、主にハイパーリンクとフォームのターゲットを設定するために使われます。ウィンドウは必ずしもウィンドウ名を持つ必要はありません。</p> + +<p>It has also been used in some frameworks for providing cross-domain messaging (e.g., <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> and Dojo's <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a>) as a more secure alternative to JSONP. Modern web applications hosting sensitive data should however not rely on <code>window.name</code> for cross-domain messaging but instead rather utilize the <a href="/ja/docs/Web/API/Window/postMessage">postMessage API</a>.</p> + + +<p>Don't set the value to something unstring since its get method will call the toString method.</p> + +<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('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/api/window/navigator/index.html b/files/ja/web/api/window/navigator/index.html new file mode 100644 index 0000000000..d5bee820cd --- /dev/null +++ b/files/ja/web/api/window/navigator/index.html @@ -0,0 +1,116 @@ +--- +title: window.navigator +slug: Web/API/Window/navigator +tags: + - DOM + - DOM_0 + - Gecko + - Navigator + - 要更新 +translation_of: Web/API/Window/navigator +--- +<div>{{outdated}}{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>navigator オブジェクトへの参照を返します。 navigator オブジェクトを用いることで、スクリプトを実行しているアプリケーションについての情報を得ることができます。</p> + +<h2 id="Example" name="Example">例</h2> + +<div style="overflow: hidden;"> +<pre class="brush:js">alert("あなたは " + navigator.appName + " を使用しています。"); +</pre> +</div> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{domxref("window.navigator.appCodeName", "navigator.appCodeName")}} {{non-standard_inline}}</dt> + <dd>現在のブラウザの内部 "コード" ネームを返す（※このプロパティは正確な値を返すとは限りません）</dd> + <dt>{{domxref("window.navigator.appName", "navigator.appName")}}</dt> + <dd>ブラウザの正式名称を返す（※このプロパティは正確な値を返すとは限りません）</dd> + <dt>{{domxref("window.navigator.appVersion", "navigator.appVersion")}}</dt> + <dd>ブラウザのバージョンを表す文字列を返す（※このプロパティは正確な値を返すとは限りません）</dd> + <dt>{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}</dt> + <dd>ブラウザのビルド識別子を返す（※例： "2006090803"）</dd> + <dt>{{domxref("window.navigator.connection", "navigator.connection")}}</dt> + <dd>Provides information about the network connection of a device.</dd> + <dt>{{domxref("window.navigator.cookieEnabled", "navigator.cookieEnabled")}}</dt> + <dd>ブラウザのクッキーが有効かどうかを示す真偽値を返す</dd> + <dt>{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}</dt> + <dd>Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.</dd> + <dt>{{domxref("navigator.id")}} {{non-standard_inline}}</dt> + <dd>Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for <a href="/ja/docs/BrowserID" title="BrowserID">BrowserID</a> to your web site.</dd> + <dt>{{domxref("window.navigator.language", "navigator.language")}}</dt> + <dd>ブラウザの言語バージョンを表す文字列を返す</dd> + <dt>{{domxref("window.navigator.mimeTypes", "navigator.mimeTypes")}}</dt> + <dd>ブラウザがサポートしている MIME タイプの一覧を返す</dd> + <dt>{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}</dt> + <dd>Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control <a href="/Open_Web_Apps" title="Open Web apps">Open Web apps</a>.</dd> + <dt>{{domxref("window.navigator.battery", "navigator.battery")}} {{gecko_minversion_inline("10.0")}} {{non-standard_inline}}</dt> + <dd>Returns a {{domxref("window.navigator.battery", "battery")}} object you can use to get information about the battery charging status.</dd> + <dt>{{domxref("navigator.mozNotification")}} {{non-standard_inline}}<br> + {{domxref("navigator.webkitNotification")}}</dt> + <dd>Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.</dd> + <dt>{{domxref("window.navigator.mozSms", "navigator.mozSms")}} {{gecko_minversion_inline("12.0")}} {{non-standard_inline}}</dt> + <dd>Returns a {{domxref("SmsManager")}} object you can use to manage SMS messaging in your web application.</dd> + <dt>{{domxref("navigator.mozSocial")}} {{non-standard_inline}}</dt> + <dd>{{todo}}</dd> + <dt>{{domxref("window.navigator.mozTelephony", "navigator.mozTelephony")}} {{non-standard_inline}}</dt> + <dd>Returns a {{domxref("Telephony")}} object you can use to create and manage telephone calls.</dd> + <dt>{{domxref("window.navigator.onLine", "navigator.onLine")}}</dt> + <dd>ブラウザがオンラインで動作しているかどうかを示す真偽値を返す</dd> + <dt>{{domxref("window.navigator.oscpu", "navigator.oscpu")}}</dt> + <dd>現在のオペレーティングシステムを表す文字列を返す</dd> + <dt>{{domxref("window.navigator.platform", "navigator.platform")}}</dt> + <dd>ブラウザのプラットフォームを表す文字列を返す</dd> + <dt>{{domxref("window.navigator.plugins", "navigator.plugins")}}</dt> + <dd>ブラウザにインストールされているプラグインの一覧を配列で返す</dd> + <dt>{{domxref("window.navigator.product", "navigator.product")}} {{non-standard_inline}}</dt> + <dd>現在のブラウザの製品名を返す（※例："Gecko"）</dd> + <dt>{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}</dt> + <dd>現在のブラウザのビルド番号を返します（※例："20060909"）</dd> + <dt>{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}</dt> + <dd>空文字列を返す（※Netscape 4.7x のみ "US & CA domestic policy" または、 "Export policy" という文字列を返す）</dd> + <dt>{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}</dt> + <dd>Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.</dd> + <dt>{{domxref("window.navigator.userAgent", "navigator.userAgent")}}</dt> + <dd>現在のブラウザのユーザエージェントを表す文字列を返す</dd> + <dt>{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}</dt> + <dd>現在のブラウザのベンダー名を返す（※例："Netscape6"）</dd> + <dt>{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}</dt> + <dd>ベンダーバージョン番号を返す（※例："6.1"）</dd> + <dt><a href="/ja/docs/API/Pointer_Lock_API" title="Mouse Lock API"><code>navigator.webkitPointer</code></a> {{non-standard_inline}}</dt> + <dd>Returns a PointerLock object for the <a href="/ja/docs/API/Pointer_Lock_API" title="Mouse Lock API">Mouse Lock API</a>.</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("window.navigator.javaEnabled", "navigator.javaEnabled")}}</dt> + <dd>ホストブラウザで Java が有効かどうかを示す</dd> + <dt>{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}</dt> + <dd>指定 URI の文書がネットワークを利用しなくても閲覧可能かどうかをチェックする</dd> + <dt>{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}</dt> + <dd>ユーザ設定を設定する。このメソッドは、<a href="http://www.faqts.com/knowledge_base/view.phtml/aid/1608/fid/125/lang/en">特権を持つコードでのみ使用可能です</a>。現在は廃止されているため、代わりに XPCOM の <a href="/ja/docs/Preferences_API">Preferences API</a> を用います。</dd> + <dt>{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}</dt> + <dd>Web サイトを指定した MIME タイプに関連付ける</dd> + <dt>{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}</dt> + <dd>Web サイト を指定したプロトコルに関連付ける</dd> + <dt>{{domxref("window.navigator.taintEnabled", "navigator.taintEnabled")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{non-standard_inline}}</dt> + <dd><code>false</code> を返す。JavaScript の taint/untaint 関数は、JavaScript 1.2 で削除されています（<a href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/nav.html#1194117">※</a>）</dd> + <dt>{{domxref("window.navigator.vibrate", "navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}</dt> + <dd>Causes vibration on devices with support for it. Does nothing if vibration support isn't available.</dd> +</dl> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li><a href="http://www.whatwg.org/html/#navigator" title="http://www.whatwg.org/html/#navigator">HTML 仕様書での定義</a></li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/DOM_Client_Object_Cross-Reference/navigator" title="DOM_Client_Object_Cross-Reference/navigator">DOM Client Object クロスリファレンス - navigator</a></li> +</ul> diff --git a/files/ja/web/api/window/onafterprint/index.html b/files/ja/web/api/window/onafterprint/index.html new file mode 100644 index 0000000000..162c81e8c6 --- /dev/null +++ b/files/ja/web/api/window/onafterprint/index.html @@ -0,0 +1,55 @@ +--- +title: WindowEventHandlers.onafterprint +slug: Web/API/Window/onafterprint +tags: + - API + - DOM + - Event Handler + - HTML DOM + - Property + - Reference + - WindowEventHandlers + - printing +translation_of: Web/API/WindowEventHandlers/onafterprint +--- +<div>{{ApiRef}}</div> + +<p><span class="seoSummary">{{domxref("WindowEventHandlers")}} ミックスインの <strong><code>onafterprint</code></strong> プロパティは、現在のウィンドウの {{event("afterprint")}} イベントを処理するための {{domxref("EventHandler")}} です。 このイベントは、ユーザーが印刷した後や、ユーザーが印刷ダイアログで中止した場合に発生します。</span></p> + +<p>{{event("beforeprint")}} イベントと <code>afterprint</code> イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、<code><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types">@media print</a></code> CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.addEventListener("afterprint", function(event) { ... }); +window.onafterprint = function(event) { ... };</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('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.WindowEventHandlers.onafterprint")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window.print()")}}</li> + <li>{{domxref("WindowEventHandlers.onbeforeprint")}}</li> + <li><a href="/ja/docs/Web/Guide/Printing">印刷</a></li> +</ul> diff --git a/files/ja/web/api/window/onclick/index.html b/files/ja/web/api/window/onclick/index.html new file mode 100644 index 0000000000..b620c103a2 --- /dev/null +++ b/files/ja/web/api/window/onclick/index.html @@ -0,0 +1,44 @@ +--- +title: window.onclick +slug: Web/API/Window/onclick +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onclick +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>カーソルがウィンドウ内にある時にユーザがマウスボタンをクリックした場合に呼び出されます。このイベントはどのマウスボタンを押下した場合でも発生します。イベントが発生した地点はイベントのプロパティから取得する事が出来ます。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onclick =<i>funcRef</i>; +</pre> +<ul> + <li><code>funcRef</code>: 関数への参照</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:html"><!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8" /> +<title>onclick のテスト</title> +<script> +function clickPage () { + alert("click event detected!"); +} + +window.onclick = clickPage; +</script> +</head> + +<body> + +<p>このページ上でマウスボタンをクリックしてみてください。</p> + +</body> +</html></pre> +<p>ユーザが Window 内をクリックすると <code>click</code> イベントが発生します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>どの仕様書にも含まれていません。</p> diff --git a/files/ja/web/api/window/ondevicelight/index.html b/files/ja/web/api/window/ondevicelight/index.html new file mode 100644 index 0000000000..e0a19b3ccb --- /dev/null +++ b/files/ja/web/api/window/ondevicelight/index.html @@ -0,0 +1,57 @@ +--- +title: window.ondevicelight +slug: Web/API/Window/ondevicelight +tags: + - Ambient Light + - B2G + - Firefox OS + - WebAPI + - Window +translation_of: Web/API/Window/ondevicelight +--- +<p>{{ApiRef}} {{obsolete_header}} </p> + +<p>デバイスの環境光センサが光の強度の変化を検出した際に発生する {{event("devicelight")}} イベントを受け取るイベントリスナーを指定します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.ondevicelight = <var>funcRef</var></pre> + +<ul> + <li><code><var>funcRef</var></code> : {{event("devicelight")}} イベント発生時に呼び出す関数への参照。 このイベントは {{domxref("DeviceLightEvent")}} のひとつです。</li> +</ul> + +<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('AmbientLight', '#event-handlers', 'Ambient Light Events')}}</td> + <td>{{Spec2('AmbientLight')}}</td> + <td>最初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div> + + +<p>{{Compat("api.Window.ondevicelight")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{event("devicelight")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li><a href="/ja/docs/WebAPI/Using_Light_Events">環境光イベントの利用</a></li> +</ul> diff --git a/files/ja/web/api/window/ondevicemotion/index.html b/files/ja/web/api/window/ondevicemotion/index.html new file mode 100644 index 0000000000..6384ba73e7 --- /dev/null +++ b/files/ja/web/api/window/ondevicemotion/index.html @@ -0,0 +1,61 @@ +--- +title: Window.ondevicemotion +slug: Web/API/Window/ondevicemotion +tags: + - API + - Device Orientation + - Event Handler + - Mobile + - Motion + - Orientation + - Property + - Reference + - イベントハンドラー + - プロパティ + - モバイル + - 向き + - 端末の向き +translation_of: Web/API/Window/ondevicemotion +--- +<div>{{APIRef("Device Orientation Events")}}</div> + +<p>Windows に対して送信される {{domxref("Window/devicemotion_event", "devicemotion")}} イベントのためのイベントハンドラーです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.ondevicemotion = <var>funcRef</var>;</pre> + +<p><code>funcRef</code> のところは関数への参照です。この関数は発生した動きを説明する {{DOMxRef("DeviceMotionEvent")}} オブジェクトを受け取ります。</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("Device Orientation")}}</td> + <td>{{Spec2("Device Orientation")}}</td> + <td>Initial definition.</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.Window.ondevicemotion")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window/devicemotion_event", "devicemotion")}}</li> + <li>{{DOMxRef("DeviceMotionEvent")}}</li> + <li><a href="/ja/docs/Web/API/Detecting_device_orientation">端末の向きの検出</a></li> +</ul> diff --git a/files/ja/web/api/window/ondeviceproximity/index.html b/files/ja/web/api/window/ondeviceproximity/index.html new file mode 100644 index 0000000000..48551acc69 --- /dev/null +++ b/files/ja/web/api/window/ondeviceproximity/index.html @@ -0,0 +1,101 @@ +--- +title: Window.ondeviceproximity +slug: Web/API/Window/ondeviceproximity +tags: + - API + - Event Handler + - Experimental + - Property + - Proximitiy Event + - Reference + - Window +translation_of: Web/API/Window/ondeviceproximity +--- +<p>{{ ApiRef() }}</p> + +<p>{{event("deviceproximity")}} イベントを受け取るイベントリスナーを指定します。これらのイベントは、デバイスセンサーが、物がデバイスに近づいたこと、または離れたことを検知したときに発生します。</p> + +<h2 id="構文">構文</h2> + +<pre>window.onuserproximity = <em>funcRef</em></pre> + +<p><code><em>funcRef</em></code> は、{{event("deviceproximity")}} イベントが発生したときに呼び出される関数です。これらは {{domxref("DeviceProximityEvent")}} 型のイベントです。</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('Proximity Events', '#device-proximity', 'Proximity Events') }}</td> + <td>{{ Spec2('Proximity Events') }}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("15.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{event("deviceproximity")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li><a href="/ja/docs/WebAPI/Proximity" title="/ja/docs/WebAPI/Proximity">Proximity API</a></li> +</ul> diff --git a/files/ja/web/api/window/ongamepadconnected/index.html b/files/ja/web/api/window/ongamepadconnected/index.html new file mode 100644 index 0000000000..ce2246c3cd --- /dev/null +++ b/files/ja/web/api/window/ongamepadconnected/index.html @@ -0,0 +1,65 @@ +--- +title: Window.ongamepadconnected +slug: Web/API/Window/ongamepadconnected +tags: + - API + - Event Handler + - Experimental + - Gamepad API + - Property + - Reference + - Window + - ongamepadconnected +translation_of: Web/API/Window/ongamepadconnected +--- +<div> +<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div> +</div> + +<div>{{domxref("Window")}} <span class="tlid-translation translation"><span title="">インターフェイスの </span></span><strong><code>ongamepadconnected</code></strong><span class="tlid-translation translation"><span title=""> プロパティは、ゲームパッドが接続されたとき (</span></span>{{event('gamepadconnected')}}<span class="tlid-translation translation"><span title="">イベントが発生したとき) に実行されるイベントハンドラを表します。</span></span></div> + +<div> </div> + +<p>イベントのオブジェクトの型は {{domxref("GamepadEvent")}} です。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">window.ongamepadconnected = function() { ... }; +</pre> + +<h2 id="例">例</h2> + +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepadconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// All buttons and axes values can be accessed through</span> + event<span class="punctuation token">.</span>gamepad<span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></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('Gamepad ', '#event-gamepadconnected', 'gamepadconnected event')}}</td> + <td>{{Spec2('Gamepad')}}</td> + <td>初版</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Window.ongamepadconnected")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li>Ted Mielczarek と Robert Nyman による <a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a></li> + <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">ソース</a>)</li> +</ul> diff --git a/files/ja/web/api/window/ongamepaddisconnected/index.html b/files/ja/web/api/window/ongamepaddisconnected/index.html new file mode 100644 index 0000000000..f9b33bb033 --- /dev/null +++ b/files/ja/web/api/window/ongamepaddisconnected/index.html @@ -0,0 +1,60 @@ +--- +title: Window.ongamepaddisconnected +slug: Web/API/Window/ongamepaddisconnected +tags: + - API + - Event Handler + - Experimental + - Gamepad API + - Property + - Reference + - Window + - ongamepaddisconnected +translation_of: Web/API/Window/ongamepaddisconnected +--- +<div>{{DefaultAPISidebar("Gamepad API")}}{{SeeCompatTable}}</div> + +<p>{{domxref("Window")}} インターフェースの <strong><code>ongamepaddisconnected</code></strong> プロパティはゲームパッドが切断した時 ({{event('gamepaddisconnected')}} イベントが発生したとき) に実行されるイベントハンドラーを表します。</p> + +<p>イベントのオブジェクトの型は {{domxref("GamepadEvent")}} です。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">window.ongamepaddisconnected = function() { ... }; +</pre> + +<h2 id="例">例</h2> + +<pre class="brush:js; line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="punctuation token">on</span><span class="string token">gamepaddisconnected =</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// A gamepad has been disconnected</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></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('Gamepad ', '#event-gamepaddisconnected', 'gamepaddisconnected event')}}</td> + <td>{{Spec2('Gamepad')}}</td> + <td>初版</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Window.ongamepaddisconnected")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li>Ted Mielczarek と Robert Nyman による <a class="external text" href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a></li> + <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">ソース</a>)</li> +</ul> diff --git a/files/ja/web/api/window/oninstall/index.html b/files/ja/web/api/window/oninstall/index.html new file mode 100644 index 0000000000..40c22b7cec --- /dev/null +++ b/files/ja/web/api/window/oninstall/index.html @@ -0,0 +1,57 @@ +--- +title: Window.onappinstalled +slug: Web/API/Window/oninstall +tags: + - API + - Event Handler + - Property + - Reference + - Window + - web manifest +translation_of: Web/API/Window/onappinstalled +--- +<div>{{APIRef}}</div> + +<p>{{domxref("Window")}} オブジェクトの <code><strong>onappinstalled</strong></code> プロパティは、<code><a href="/ja/docs/Web/API/Window/appinstalled_event">appinstalled</a></code> イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが <a href="/ja/Apps/Progressive">プログレッシブウェブアプリ (PWA)</a> としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.onappinstalled = function(event) { ... }; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">window.onappinstalled = function(ev) { + console.log('アプリケーションがインストールされました。'); +};</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('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td> + <td>{{Spec2('Manifest')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.Window.onappinstalled")}}</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{ event("install") }}</li> +</ul> diff --git a/files/ja/web/api/window/onmousedown/index.html b/files/ja/web/api/window/onmousedown/index.html new file mode 100644 index 0000000000..72c51f34c8 --- /dev/null +++ b/files/ja/web/api/window/onmousedown/index.html @@ -0,0 +1,47 @@ +--- +title: window.onmousedown +slug: Web/API/Window/onmousedown +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>{{domxref("window")}} 上での mousedown イベントに対応するイベントハンドラです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onmousedown = <em>funcRef</em>; +</pre> +<ul> + <li><code>funcRef</code> : 関数への参照、または関数式</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">window.onmousedown = doFunc; +</pre> +<pre class="brush:html"><!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8" /> +<title>onmousedown のテスト</title> + +<script> +window.onmousedown = mousedown; + +function mousedown() { + alert("mousedown イベントが発生しました。"); +} +</script> + +</head> +<body> +<p>ページ上でのマウスクリック（右クリック、左クリック、中ボタン）で mousedown イベントが発生します。</p> +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>ページ上の任意の場所でマウスボタンをクリックすると mousedown イベントが発生し、アラートを表示する関数が呼び出されます。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>標準仕様書には含まれていません。</p> diff --git a/files/ja/web/api/window/onmouseup/index.html b/files/ja/web/api/window/onmouseup/index.html new file mode 100644 index 0000000000..5598cd78c4 --- /dev/null +++ b/files/ja/web/api/window/onmouseup/index.html @@ -0,0 +1,56 @@ +--- +title: window.onmouseup +slug: Web/API/Window/onmouseup +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onmouseup +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>{{domxref("window")}} 上の <code>mouseup</code> イベントに対応するイベントハンドラです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onmouseup = <var>funcRef</var>; +</pre> +<ul> + <li><code>funcRef</code> : 関数への参照、または関数式</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">function doFunc() { + alert("こんにちは！"); +} + +window.onmouseup = doFunc; +</pre> +<pre class="brush:js">window.onmouseup = function() { + alert("こんばんは！"); +}; +</pre> +<pre class="brush:html"><!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8" /> +<title>onmouseup のテスト</title> + +<script> +window.onmouseup = mouseup; + +function mouseup() { + alert("mouseup イベントを検出!"); +} +</script> + +</head> +<body> +<p>ページ上をマウスのボタンでクリックし、数秒押し続け、ボタンを放します。 +マウスのボタンを放すことで、 mouseup イベントが発生します。</p> +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>mouseup</code> イベントは、ドキュメント内のどこででも、ユーザがマウスの左ボタンを放すことによって発生します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>標準仕様書には含まれていません。</p> diff --git a/files/ja/web/api/window/onreset/index.html b/files/ja/web/api/window/onreset/index.html new file mode 100644 index 0000000000..c9862667e8 --- /dev/null +++ b/files/ja/web/api/window/onreset/index.html @@ -0,0 +1,57 @@ +--- +title: window.onreset +slug: Web/API/Window/onreset +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onreset +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>フォームの <code>reset</code> イベントに対応するイベントハンドラです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onreset = <var>funcRef</var>; +</pre> +<h3 id="Parameters" name="Parameters">引数</h3> +<ul> + <li><var>funcRef</var> : 関数への参照、または関数式</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:html"><!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8" /> +<title>onreset のテスト</title> + +<script> +function reg() { + window.onreset = hit; +} + +function hit() { + alert('リセットイベントが発生しました。'); +} +</script> + +</head> +<body onload="reg();"> + +<form> + <div> + <textarea></textarea> + </div> + <div> + <input type="reset" value="reset" /> + </div> +</form> + +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>reset イベントは、ユーザがフォーム内のリセットボタン (<code><input type="reset"/></code>) をクリックした際に発生します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>標準仕様書には含まれていません。</p> diff --git a/files/ja/web/api/window/onresize/index.html b/files/ja/web/api/window/onresize/index.html new file mode 100644 index 0000000000..db2b2bbae9 --- /dev/null +++ b/files/ja/web/api/window/onresize/index.html @@ -0,0 +1,78 @@ +--- +title: window.onresize +slug: Web/API/Window/onresize +tags: + - DOM + - Gecko + - Property + - Window +translation_of: Web/API/GlobalEventHandlers/onresize +--- +<p>{{ ApiRef() }}</p> + +<p><code><strong>GlobalEventHandlers.onresize</strong></code> プロパティは、{{event("resize")}} イベントを受信するとトリガーされる {{domxref("EventHandler")}} を含みます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="eval">window.onresize = <em>funcRef</em>; +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>funcRef</code>: 関数への参照</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre>window.onresize = doFunc; +</pre> + +<pre><html> +<head> + +<title>onresize test</title> + +</head> + +<body> +<p>Resize the browser window to fire the resize event.</p> + +<p>Window height: <span id="height"></span></p> +<p>Window width: <span id="width"></span></p> + +<script type="text/javascript"> + var heightOutput = document.querySelector('#height'); + var widthOutput = document.querySelector('#width'); + + function resize() { + heightOutput.textContent = window.innerHeight; + widthOutput.textContent = window.innerWidth; + } + + window.onresize = resize; +</script> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>ブラウザウィンドウのサイズが変更された後に <code>resize</code> イベントが発生します。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">使用</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/api/window/open/index.html b/files/ja/web/api/window/open/index.html new file mode 100644 index 0000000000..b6487db738 --- /dev/null +++ b/files/ja/web/api/window/open/index.html @@ -0,0 +1,540 @@ +--- +title: Window.open() +slug: Web/API/Window/open +tags: + - API + - DOM + - Method + - NeedsMarkupWork + - NeedsUpdate + - Reference + - Window + - open +translation_of: Web/API/Window/open +--- +<div>{{APIRef}}</div> + +<p>{{domxref("Window")}} インターフェイスの <strong><code>open()</code></strong> メソッドは、指定されたリソースを、新しい、または既存の指定された名前を持った閲覧コンテキスト (ウィンドウ、 {{HTMLElement("iframe")}}、タブ) に読み込みます。その名前が存在しない場合は、新しい閲覧コンテキストが新しいタブまたは新しいウィンドウに開かれ、指定されたリソースがそこに読み込まれます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code>var <var>window</var> = window.open(<var>url</var>, <var>windowName</var>, [<var>windowFeatures</var>]);</code></pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>url</var></code></dt> + <dd>{{domxref("DOMString")}} で、読み込むリソースの URL を示します。これは HTML ページ、画像ファイル、その他のブラウザーが対応しているリソースのパスまたは URL にすることができます。空文字列 ("") が <code><var>url</var></code> として指定されると、対象の閲覧コンテキストに空のページが開きます。</dd> + <dt><code><var>windowName</var></code> {{optional_inline}}</dt> + <dd>{{domxref("DOMString")}} で、指定したリソースを読み込むための閲覧コンテキスト (ウィンドウ、 {{HTMLElement("iframe")}}、タブ) の名前を指定します。名前が既存のコンテキストを示していない場合は、新しいウィンドウが作成され、 <code><var>windowName</var></code> で指定した名前が与えられます。<br> + <br> + この名前は {{HTMLElement("a", "", "#attr-target")}} や {{HTMLElement("form", "", "#attr-target")}} 要素の <code>target</code> 属性のターゲットとして使うことができます。この名前はホワイトスペースを含んではいけません。これはウィンドウのタイトルとしては使用されないことに注意してください。</dd> + <dt><code><var>windowFeatures</var></code> {{optional_inline}}</dt> + <dd>{{domxref("DOMString")}} で、ウィンドウ特性とそれに対応する値を "name=value" の形式で指定したもののカンマで区切りのリストです。これらの機能には、ウィンドウの既定のサイズや位置、ツールバーを含めるかどうかなどのオプションが含まれます。文字列にはホワイトスペースを入れてはいけません。指定できる各機能については、下記の{{anch("Window features", "ウィンドウ特性")}}を参照してください。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code>WindowProxy</code> オブジェクトで、基本的には新しく作成されたウィンドウを表す {{domxref("Window")}} オブジェクトの薄いラッパーであり、すべての機能が利用可能なものです。ウィンドウを開くことができなかった場合、返される値は代わりに <code>null</code> となります。返された参照は、<a href="/en-US/docs/Web/Security/Same-origin_policy">同一オリジンポリシ</a>のセキュリティ要件に準拠している限り、新しいウィンドウのプロパティやメソッドにアクセスするために使用することができます。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>open()</code> メソッドは、新しい副ブラウザウィンドウを生成します。それは、ファイルメニューから新しいウィンドウを選ぶのに似ています。引数 <code><var>url</var></code> は、新しいウィンドウにおいて読み取り読み込む URL を指定します。 <code><var>url</var></code> が空文字列の場合は、メインウィンドウの既定のツールバーを持った新しい空のウィンドウ (URL は <code>about:blank</code>) が生成されます。</p> + +<p>リモートの URL は、すぐには読み込まれないことに注意してください。 <code>window.open()</code> から返ったとき、ウィンドウは常に <code>about:blank</code> を含んでいます。 URL が実際に読み込まれるまでには猶予期間があり、現在のスクリプトブロックが実行を終えた後に開始されます。ウィンドウの生成と参照されるリソースの読み込みは、非同期に行われます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush:js notranslate">var windowObjectReference; +var windowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; + +function openRequestedPopup() { + windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", windowFeatures); +}</pre> + +<pre class="brush:js notranslate">var windowObjectReference; + +function openRequestedPopup() { + windowObjectReference = window.open( + "http://www.domainname.ext/path/ImageFile.png", + "DescriptiveWindowName", + "resizable,scrollbars,status" + ); +}</pre> + +<p>その名前を持っているウィンドウがすでに存在する場合は、 <code><var>url</var></code> は<em>既存の</em>ウィンドウに読み込まれます。この場合、メソッドの返値は既存のウィンドウであり、 <code>windowFeatures</code> は無視されます。 <code><var>url</var></code> に空の文字列を指定すると、開いているウィンドウの場所を変更せずにその名前で参照を取得することができます。 Firefox と Chrome (少なくとも) では、<em>これは同じ親からしか動作しません</em>。つまり、現在のウィンドウは走査しようとしているウィンドウを開いた者になります。そうでない場合は、 <code>window.open()</code> を呼び出すと新しいウィンドウが作成されるだけです。</p> + +<p><em>新しい</em>ウィンドウを <code>window.open()</code> の呼び出すたびに開きたい場合は、特殊な値 <code>_blank</code> を <code>windowName</code> に使用してください。</p> + +<div class="note"> +<p id="Note_on_use_of_window_open"><code>window.open()</code> を使用して既存のウィンドウを <code><var>windowName</var></code> という名前で再オープンする場合の注意点: この機能はすべてのブラウザーで有効であるわけではなく、もっと様々な条件になります。<s>Firefox (50.0.0.1) の機能は説明した通りです。同じドメイン＋ポート番号から同じ名前で再オープンすると、以前に作成されたウィンドウにアクセスできます。</s>一方、 Google Chrome (55.0.2883.87 m ) は、同じ親からのみそれを行います (あたかもウィンドウが依存的に作成されたかのように、これが「オープナー」です)。これは広い制限であり、信じられないほどの開発の複雑さを生み出しています。 Firefox (51.) はハンドルを取得しますが、 <code>Element.focus()</code> は実行できません。一方、 Chrome はオープナーから子への <code>focus()</code> は実行できますが、兄弟間や逆に子からオープナーへのは実行できません。この関数は、その名前 (名前はクッキーやローカルストレージで保存できますが、ウィンドウオブジェクトのハンドルはできません) にしかアクセスできない場合、ウィンドウ上のハンドルを取り戻すためのたった一つの鍵となります。 2017/10/01 時点で、最近発見された動作の違いは、他のブラウザーではまだテストされていません。</p> +</div> + +<h2 id="Window_features" name="Window_features">ウィンドウ特性</h2> + +<p><code><var>windowFeatures</var></code> はオプションの文字列で、新しいウィンドウに指定する特性をコンマで分割したリストを指定します。ウィンドウが開かれた後、ウィンドウの機能やウィンドウのツールバーを変えるために JavaScript を用いることはできません。 <code><var>windowName</var></code> が既存のウィンドウを指定せず、かつ、引数 <code><var>windowFeatures</var></code> を与えなかった場合 (もしくは、引数 <code><var>windowFeatures</var></code> が空文字列だった場合) は、新しい副ウィンドウにはメインウィンドウの既定のツールバーが表示されます。</p> + +<div class="note"> +<p><strong>豆知識</strong>: ブラウザーによっては、ユーザーが <code><var>windowFeatures</var></code> の設定を上書きして機能を有効にする (または無効にすることを防ぐ) ことができます。</p> +</div> + +<h3 id="Position_and_size_features" name="Position_and_size_features">位置と大きさの特性</h3> + +<p>引数 <code><var>windowFeatures</var></code> で、新しいウィンドウの位置と大きさを指定することができます。</p> + +<p><a href="#Note_on_position_and_dimension_error_correction">位置と大きさのエラーの修正における注意</a></p> + +<h4 id="Position" name="Position">位置</h4> + +<div class="blockIndicator warning"> +<p>どちらか一方だけが指定されている場合は、動作は実装に依存しており、ウェブの作者はそれに依存してはいけません。</p> +</div> + +<dl> + <dt id="left"><code>left</code> または <code>screenX</code></dt> + <dd>ユーザーのオペレーティングシステムのアプリケーションの作業領域の左端から、ブラウザーウィンドウの左端の境界線 (リサイズハンドル) までの距離を指定します。新しいウィンドウを最初に画面外に配置することはできません。</dd> + <dt id="top"><code>top</code> または <code>screenY</code></dt> + <dd>ユーザーのオペレーティング システムのアプリケーションの作業領域の上端から、ブラウザーウィンドウの上端の境界線 (リサイズハンドル) までの新しいウィンドウの配置距離を指定します。新しいウィンドウを最初に画面外に配置することはできません。</dd> +</dl> + +<p>引数 <code><var>windowFeatures</var></code> 空でなく、位置の特性が定義されなかった場合は、新しいウィンドウの左上の座標は、最も新しく表示されたウィンドウがあった位置から 22 ピクセル離れた位置になります。オフセットはブラウザーの製造者によって全般的に実装されており (IE6 SP2 で既定のテーマの場合は 29 ピクセルです)、これは新しいウィンドウが開いたことをユーザーが気付きやすくするためのものです。最も新しく使用されたウィンドウが最大化された状態である場合は、オフセットはありません。新しい副ウィンドウも同様に最大化されます。</p> + +<h4 id="Size" name="Size">大きさ</h4> + +<div class="blockIndicator warning"> +<p>どちらか一方だけが指定されている場合は、動作は実装に依存しており、ウェブの作者はそれに依存してはいけません。</p> +</div> + +<dl> + <dt id="width"><code>width</code> または <code>innerWidth</code></dt> + <dd>コンテンツ領域、新しい副ウィンドウの表示領域の幅をピクセル単位で指定します。幅の値は、垂直スクロールバーが存在すれば、その高さを含みます。幅の値は、サイドバーが展開されていても、その幅を含みません。最小の要求値は 100 です。</dd> + <dt id="height"><code>height</code> または <code>innerHeight</code></dt> + <dd>コンテンツ領域、新しい副ウィンドウの表示領域の高さをピクセル単位で指定します。高さの値は、水平スクロールバーが存在するならば、その高さを含めます。最小の要求値は 100 です。</dd> +</dl> + +<p>引数 <code><var>windowFeatures</var></code> 空でなく、位置の特性が定義されなかった場合は、新しいウィンドウの大きさは最も新しく表示されたウィンドウと同じ大きさになります。</p> + +<h3 id="Browser-dependent_size_features" name="Browser-dependent_size_features">ブラウザー固有の大きさの特性</h3> + +<div class="blockIndicator warning"> +<p>使用しないでください。</p> +</div> + +<dl> + <dt><code>outerWidth</code> (only on Firefox)</dt> + <dd>ブラウザーウィンドウ全体の高さをピクセル単位で指定します。この <code>outerWidth</code> の値は、ウィンドウの垂直スクロールバー (存在する場合)、左と右のウィンドウリサイズ枠を含みます。</dd> + <dt><code>outerHeight</code> (only on Firefox)</dt> + <dd>ブラウザーウィンドウ全体の高さをピクセル単位で指定します。この <code>outerHeight</code>の値は、すべての存在するツールバー、ウィンドウの水平スクロールバー (存在する場合)、上と下のウィンドウリサイズ枠を含みます。</dd> +</dl> + +<h3 id="Toolbar_and_UI_parts_features" name="Toolbar_and_UI_parts_features">ツールバーと UI 部品の特性</h3> + +<div class="blockIndicator warning"> +<p>最近のブラウザー (Firefox 76 (2020年5月5日リリース予定) 以降のブラウザー、Google Chrome、Safari、Chromium Edge) では、以下の機能はあくまでもポップアップを開くかどうかの条件です。<a href="#Popup_condition">ポップアップの条件</a>の項を参照してください。</p> +</div> + +<p>以下の機能は、各UIパーツの表示を制御します。すべての機能は <code>yes</code> または <code>1</code> に設定するか、単に存在していればオンになります。設定できます。それらを <code>no</code> または <code>0</code> に設定するか、多くの場合はそれらを省略すればオフにすることができます。</p> + +<p>例: <code>status=yes</code>, <code>status=1</code>, <code>status</code> は同じ結果になります。</p> + +<dl> + <dt><code>menubar</code></dt> + <dd>この特性がオンに設定されている場合、新しい副ウィンドウにメニューバーが表示されます。<br> + <br> + <code><var>windowFeatures</var></code> が空でない場合、 <code>menubar</code> の既定値はオフです。</dd> + <dt><code>toolbar</code></dt> + <dd>この特性がオンに設定されている場合、新しい副ウィンドウにツールバーボタン (戻る、進む、更新、中止ボタン) が表示されます。<br> + <br> + ツールバーボタンに加えて、 Firefox (before 76) は親ウィンドウにタブバーが存在し、表示されていればタブバーが表示されます。 (この機能がオフに設定されている場合、ウィンドウ内のすべてのツールバーが非表示になります)。<br> + <br> + <code><var>windowFeatures</var></code> が空でない場合、 <code>toolbar</code> の既定値はオフです。</dd> + <dt><code>location</code></dt> + <dd>この特性がオンに設定されている場合、新しい副ウィンドウにロケーションバーまたはアドレスバーが表示されます。<br> + <br> + <code><var>windowFeatures</var></code> が空でない場合、 <code>location</code> の既定値はオフです。</dd> + <dt><code>status</code></dt> + <dd>この特性がオンに設定されている場合、新しい副ウィンドウにステータスバーが表示されます。<br> + <br> + <code><var>windowFeatures</var></code> が空でない場合、 <code>status</code> の既定値はオフです。</dd> + <dt><code>resizable</code></dt> + <dd>この特性がオンに設定されている場合、新しい副ウィンドウの大きさが変更可能になります。<br> + <br> + <code><var>windowFeatures</var></code> が空でない場合、 <code>resizable</code> の既定値はオンです。 + <div class="note"> + <p><strong>豆知識</strong>: アクセシビリティ上の理由から、この特性は常にオンにするよう強く推奨します。</p> + </div> + </dd> + <dt><code>scrollbars</code></dt> + <dd>この特性がオンに設定されている場合、新しい副ウィンドウで文書がウィンドウのビューポートに収まりきらない場合、水平・垂直スクロールバーが表示されます。<br> + <br> + <code><var>windowFeatures</var></code> が空でない場合、 <code>scrollbars</code> の既定値はオフです。<br> + <br> + <a href="#Note_on_scrollbars">スクロールバーの注意</a>を参照してください。 + <div class="note"> + <p><strong>豆知識</strong>: アクセシビリティ上の理由から、この特性は常にオンにするよう強く推奨します。</p> + </div> + </dd> +</dl> + +<h3 id="ウィンドウ機能の特性">ウィンドウ機能の特性</h3> + +<dl> + <dt id="noopener"><code>noopener</code></dt> + <dd>この機能が設定されている場合、新しく開いたウィンドウは通常通りに開きますが、元のウィンドウには ({{domxref("Window.opener")}} からは — <code>null</code> を返すため) アクセスできなくなります。さらに、 <code>window.open()</code> の呼び出しも <code>null</code> を返すので、元のウィンドウも新しいウィンドウにアクセスできなくなります。これは、信頼されていないサイトが <code>window.open()</code> で開かれたサイトが元のウィンドウを改ざんしないようにするために便利ですし、その逆も同様です。</dd> + <dd><code>noopener</code> が使用されている場合、 <code>_top</code>, <code>_self</code>, <code>_parent</code> 以外の空でないターゲット名は、新しいウィンドウやタブを開くかどうかを決定する際に、すべて <code>_blank</code> と同じように扱われることに注意してください。<br> + <br> + これはChrome, や Firefox 52 以降など、最近のブラウザーで対応しています。詳しくは <code><a href="/ja/docs/Web/HTML/Link_types#noopener">rel="noopener"</a></code> およびブラウザーの互換性の紹介、補助的な効果の情報を含めて参照してください。</dd> + <dt id="noreferrer"><code>noreferrer</code></dt> + <dd>この特性が設定されている場合、指定された URL のコンテンツを読み込むリクエストは、リクエストの <code>referrer</code> を <code>noreferrer</code> に設定して読み込まれます。これにより、リクエストを開始したページの URL を、リクエストを送信するサーバーに送信することを防ぎます。さらに、この機能を設定すると自動的に <code><a href="#noopener">noopener</a></code> も設定されます。詳細や互換性については <code><a href="/ja/docs/Web/HTML/Link_types#noreferrer">rel="noreferrer"</a></code> を参照してください。 Firefox では Firefox 68 で <code>noreferrer</code> の対応が導入されました。</dd> +</dl> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<pre class="brush:js notranslate"><script type="text/javascript"> +var windowObjectReference = null; // グローバル変数 + +function openFFPromotionPopup() { + if(windowObjectReference == null || windowObjectReference.closed) + /* メモリ内のウィンドウオブジェクトへのポインターが存在しないか、 + そのようなポインターが存在するが、そのウィンドウが閉じられている場合 */ + + { + windowObjectReference = window.open("http://www.spreadfirefox.com/", + "PromoteFirefoxWindowName", "resizable,scrollbars,status"); + /* 真であれば、ウィンドウを生成。新しいウィンドウが生成され、 + 他のウィンドウの最前面に移動します。*/ + } + else + { + windowObjectReference.focus(); + /* 偽であれば、ウィンドウへの参照は存在しなればならず、ウィンドウは + 閉じられていません。それゆえ、 focus() メソッドで他のウィンドウの + 最前面にそのウィンドウを移動させることができます。ウィンドウを再生成し、 + 参照されているリソースを更新させる必要はありません。 */ + }; +} +</script> + +(...) + +<p><a + href="http://www.spreadfirefox.com/" + target="PromoteFirefoxWindowName" + onclick="openFFPromotionPopup(); return false;" + title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。" +>Firefox 採用の宣伝</a></p> +</pre> + +<p>上記のコードは、副ウィンドウを開くリンクに関する、わずかなユーザービリティの問題を解決します。コード内の <code>return false</code> の目的は、リンクのデフォルトアクションをキャンセルすることです。: onclick イベントハンドラが実行される場合、リンクのデフォルトアクションを実行する必要はありません。しかし、ユーザのブラウザで javascript サポートが無効、もしくは、存在しない場合、onclick イベントハンドラは無視され、ブラウザは、target の "PromoteFirefoxWindowName" という名前のフレーム、もしくは、ウィンドウ内の参照されたリソースを読みこみます。"PromoteFirefoxWindowName" という名前のフレームもウィンドウも存在しない場合は、ブラウザは新しいウィンドウを生成し、そのウィンドウに "PromoteFirefoxWindowName" という名前を付けます。</p> + +<p>target 属性の使い方の参考ページ:</p> + +<p><a href="http://www.w3.org/TR/html401/present/frames.html#h-16.3.2">HTML 4.01 Target attribute specifications</a>（<a href="http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/frames.html#h-16.3.2">日本語訳</a>）</p> + +<p><a href="http://www.htmlhelp.com/faq/html/links.html#new-window">How do I create a link that opens a new window?</a></p> + +<p>また、この関数をパラメータ化して、より多くの状況に対応できるようにし、スクリプトやウェブページで再利用できるようにすることもできます。</p> + +<pre class="brush:js notranslate"><script type="text/javascript"> +var windowObjectReference = null; // グローバル変数 + +function openRequestedPopup(url, windowName) { + if(windowObjectReference == null || windowObjectReference.closed) { + windowObjectReference = window.open(url, windowName, + "resizable,scrollbars,status"); + } else { + windowObjectReference.focus(); + }; +} +</script> + +(...) + +<p><a + href="http://www.spreadfirefox.com/" + target="PromoteFirefoxWindow" + onclick="openRequestedPopup(this.href, this.target); return false;" + title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。" +>Firefox 採用の宣伝</a></p> +</pre> + +<p>この関数を、 副ウィンドウを 1 つだけ開くようにし、その単一の副ウィンドウをこの関数で開く他のリンクで再利用するようにすることもできます。:</p> + +<pre class="brush:js notranslate"><script type="text/javascript"> +var windowObjectReference = null; // グローバル変数 +var PreviousUrl; /* 副ウィンドウ内の現在の URL を + 保存しているであろうグローバル変数 */ + +function openRequestedSinglePopup(url) { + if(windowObjectReference == null || windowObjectReference.closed) { + windowObjectReference = window.open(url, "SingleSecondaryWindowName", + "resizable,scrollbars,status"); + } else if(PreviousUrl != url) { + windowObjectReference = window.open(url, "SingleSecondaryWindowName", + "resizable=yes,scrollbars=yes,status=yes"); + /* 読み込まれるリソースが異なる場合、 + それをすでに開かれている副ウィンドウに読み込み、 + そのウィンドウをその親ウィンドウの最前面に再移動します。 */ + windowObjectReference.focus(); + } else { + windowObjectReference.focus(); + }; + + PreviousUrl = url; + /* 説明: 現在の URL を保存し、この関数が再度呼び出されたときの + URL と比較できるようにします。 */ +} +</script> + +(...) + +<p><a + href="http://www.spreadfirefox.com/" + target="SingleSecondaryWindowName" + onclick="openRequestedSinglePopup(this.href); return false;" + title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。" +>Firefox 採用の宣伝</a></p> + +<p><a + href="http://www.mozilla.org/support/firefox/faq" + target="SingleSecondaryWindowName" + onclick="openRequestedSinglePopup(this.href); return false;" +title="このリンクは、新しいウィンドウを生成するか、すでに開かれているウィンドウを再利用します。" +>Firefox FAQ</a></p> +</pre> + +<h2 id="FAQ">FAQ</h2> + +<dl> + <dt>どのようにすれば、ユーザーにウィンドウを閉じるかどうか確認するメッセージを出さないようにすることができますか？</dt> + <dd>できません。 <strong>JavaScript によって開かれていない新しいウィンドウは、JavaScript によって閉じることは原則としてできません。</strong> Mozilla ベースブラウザの JavaScript コンソールは、次の警告メッセージを出すでしょう。: <code>"スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。"</code> そうしなければ、ブラウザセッション中の訪問した URL の履歴が失われるでしょう。</dd> + <dd>詳細は、{{domxref("window.close()")}} メソッドを参照</dd> + <dt>どのようにすれば、ウィンドウを、最小化状態、あるいは、他のウィンドウの背後にある状態から復帰することができますか？</dt> + <dd>まず、対象ウィンドウのウィンドウオブジェクトへの参照が存在するかどうかを調べてください。それが存在し、かつ、閉じてしまっていない場合は、<a href="ja/DOM/window.focus">focus()</a> メソッドを使用してください。他に確実な方法はありません。<a href="#Best_practices">focus() メソッドの使用方法を説明している例</a> でテストすることができます。</dd> + <dt>ウィンドウを強制的に最大化するにはどうすればいいのですか？</dt> + <dd>できません。全てのブラウザーの作者は、新しい副ウィンドウが開くことを、ユーザーを混乱させずに、ユーザーに気づかせることができるように努力しています。</dd> + <dt>どのようにすれば、ウィンドウのリサイズを無効にしたり、ツールバーを非表示にできますか？</dt> + <dd>これを強制することはできません。Mozilla ベースのブラウザーのユーザーは、<code>about:config</code> における ユーザ設定で、リサイズ、スクロール、ツールバーの表示を自らコントロールできます。ユーザーはそのウィンドウを使うであろう一人に過ぎない (ウェブ制作者であるあなたではありません) ので、最も良いのは、彼らの習慣や設定に干渉することを避けることです。推奨する方法は、コンテンツへのアクセシビリティとウィンドウのユーザービリティを保証するために、リサイズとスクロールバーの表示を（必要ならば） 常に yes に設定することです。これは、ウェブ制作者とそのユーザーの両者のとって最も有益な方法です。</dd> + <dt>どのようにすれば、ウィンドウをコンテンツに合うようにリサイズできますか。</dt> + <dd>確実にはできません。 <code>about:config</code> で <code>dom.disable_window_move_resize</code> を <code>true</code> に設定するか、ユーザーの <a href="http://www.mozilla.org/support/firefox/edit#user">user.js file</a> ファイルを編集することで、ユーザーがウィンドウのサイズを変更できないようにすることができるためです。</dd> + <dd>一般に、ユーザは、たいてい、ウィンドウの移動またはリサイズを無効にしています。その理由は、過去に、制作者のそのようなスクリプトを許可することで、大変な弊害を受けており、この特性を濫用しない、めったにないスクリプトでも、ウィンドウをリサイズするときに、間違ったリサイズをしばしば行うからです。これらのスクリプトの 99% は、ウィンドウのリサイズを不可能にしたり、スクロールバーを非表示にします。そのような場合、本来は、それらのスクリプトの計算が間違っている場合のための、用心深く、分別のある代替の仕組みとして、それらの特性の両方が有効であるべきです。</dd> + <dd>window オブジェクトのメソッドである、<a href="ja/DOM/window.sizeToContent">sizeToContent()</a> メソッドもまた、ユーザが、設定の <code>ウィンドウの移動または大きさの変更</code> のチェックボックスをチェックしないことにより、無効化されます。スクリプトによるユーザ画面上における遠隔操作的なウィンドウの移動または大きさの変更は、大変非常にユーザをいらいらさせるでしょうし、ユーザの頭を混乱させるでしょうし、最も間違っていることでしょう。そのようなウェブ制作者は、架空のユーザのブラウザウィンドウのあらゆる位置とサイズのアスペクトの完全なコントロールを期待しています（し、決めつけています）。</dd> + <dt>どのようにして、リンク先の参照リソースを新しいタブ、あるいは、指定したタブに開くのですか？</dt> + <dd>新しいタブでリソースを開くには、<a href="/ja/docs/XUL/tabbrowser">タブ付きブラウザー</a>を参照してください。いくつかの<a href="/ja/Add-ons/Code_snippets/Tabbed_browser?redirectlocale=en-US&redirectslug=Code_snippets%2FTabbed_browser">コードスニペット</a>が用意されています。 SDK を使用している場合は、タブの<a href="/ja/Add-ons/SDK/High-Level_APIs/tabs">扱いが少し異なります</a>。</dd> + <dd>Mozilla ベースのブラウザーである <a class="external" href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a> は、どのようにリンクを開くかに関する完全な管理と選択肢をユーザに与えています。いくつかの高度な拡張も、Mozilla と Firefox にどのように参照リソースをロードするかに関する多くの選択肢を与えます。</dd> + <dd>ここ数年の間に、<a class="external" href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">CSS3 ハイパーリンクモジュールの target プロパティ</a>（<a class="external" href="http://www.d-toybox.com/spec/CSS3/hyperlinks/index.html#target0">日本語訳</a>） が実装されるかもしれません（CSS3 ハイパーリンクモジュールが承認された場合）。そうなった場合、タブブラウザ制作者がユーザにどのようにリンクからウェブページを開くことができるかに関する完全に拒否する権利と完全な管理を与えることを期待できます。どのようにリンクを開くかは、常に、完全にユーザの管理下にあるべきです。</dd> + <dt>どのようにして、開いたウィンドウがまだ開かれているかどうかを知るのですか？</dt> + <dd>ウィンドウオブジェクトへの参照が存在するかどうかをテストできます。それは、window.open() メソッドの呼び出しが成功した場合の戻り値です。また、<var>windowObjectReference</var>.closed プロパティの値の戻り値が <var>false</var> であるかどうかを調べることでもできます。</dd> + <dt>どのようにすれば、ウィンドウがポップアップブロッカーによってブロックされていることを知ることができますか？</dt> + <dd>Mozilla/Firefox と Internet Explorer 6 SP2 の組み込みポップアップブロッカーでは、<code>window.open()</code> の返値を調べる必要があります。ウィンドウが開くことが許可されなかった場合の返値は、 <code>null</code> です。しかし、他の多くのポップアップブロッカーに対しては、そのような方法はありません。</dd> + <dt>主ウィンドウと副ウィンドウの JavaScript の関係は？</dt> + <dd>window.open() メソッドと <a href="ja/DOM/window.opener">opener</a> プロパティの戻り値です。<var>WindowObjectReference</var> は、opener キーワードが副ウィンドウをそれの主ウィンドウ（{{ 原語併記("開く側", "opener", "") }}）へつなげている間、主ウィンドウ（開く側）を副ウィンドウ（サブウィンドウ）へつなげています。</dd> + <dt>新しい副ウィンドウのプロパティにアクセスできません。JavaScript コンソールに、"Error<span class="nowiki">:</span> uncaught exception<span class="nowiki">:</span> Permission denied to get property <プロパティ名 or メソッド名>." というエラーが常に出ます。なぜそのようになるのですか？</dt> + <dd>それは、クロスドメインスクリプトセキュリティの制限（"同一生成元ポリシー"とも）のためです。異なった生成元（ドメイン名）からウィンドウ（あるいは、フレーム）にロードされるスクリプトは、別ウィンドウ（あるいは、フレーム）のプロパティ、または、別の異なった生成元（ドメイン名）由来の HTML オブジェクトの<strong>取得も設定もできません。</strong>それゆえ、主ウィンドウのブラウザは、副ウィンドウをターゲットとしたスクリプトを実行する前に、副ウィンドウが同じドメイン名を持っているかどうかを調べるでしょう。</dd> + <dd>クロスドメインスクリプトセキュリティ制限については、以下で詳細を参照してください。: <a class="external" href="http://www.mozilla.org/projects/security/components/same-origin.html" rel="freelink">http://www.mozilla.org/projects/secu...me-origin.html</a>（<a class="external" href="http://www.mozilla-japan.org/projects/security/components/same-origin.html">日本語版</a>）</dd> +</dl> + +<h2 id="Usability_issues" name="Usability_issues">ユーザビリティの問題</h2> + +<h3 id="Avoid_resorting_to_window.open" name="Avoid_resorting_to_window.open">window.open() への依存の回避</h3> + +<p>一般的に言えば、いくつかの理由で、<code>window.open()</code> への依存を回避することを選択するべきです。:</p> + +<ul> + <li>ほとんどの最新のデスクトップブラウザーはタブブラウジングを提供しており、タブに対応したブラウザーのユーザーは、大多数のウェブページの状況では新しいウィンドウを開くよりも新しいタブを開く方が好まれています。</li> + <li>最近のブラウザーの多くは、ポップアップブロック機能を提供しています。</li> + <li>ユーザーは、新しいウィンドウでリンクを開くかどうか、同じウィンドウで、新しいタブで開くかどうか、「バックグラウンド」で開くかどうかを含むブラウザー内蔵の機能や拡張機能を使用している可能性があります。新しいウィンドウを開くために無造作にコーディングすることは、もはや成功を保証することはできません、強制的に成功することはできませんし、それが実行された場合、それは大多数のユーザーを悩ませることになります。</li> + <li>新しいウィンドウでは、メニューバーが非表示になったり、スクロールバーが非表示になったり、ステータスバーが非表示になったり、ウィンドウのリサイズができなくなるようになる可能性などがあります。したがって、タブブラウジングは多くのユーザーに好まれます。なぜなら、ユーザー好むブラウザーウィンドウの通常のユーザーインターフェースがそのまま維持され、安定しているからです。</li> + <li>新しいウィンドウを開くことは、たとえ機能を削減したとしても、ユーザーのシステムリソース (CPU、RAM) をかなり多く使用し、ソースコードのコーディング (セキュリティ管理、メモリ管理、様々なコード分岐、ウィンドウフレーム/クローム/ツールバーの構築、ウィンドウの位置とサイズ設定など) にもかなりの量を必要とします。新しいタブを開くことは、新しいウィンドウを開くことに比べて、ユーザーのシステムリソースへの要求が少なくて済みます (そして、より速く実現できます)。</li> +</ul> + +<h3 id="Offer_to_open_a_link_in_a_new_window_using_these_guidelines" name="Offer_to_open_a_link_in_a_new_window_using_these_guidelines">リンクを新しいウィンドウに開く場合、以下のガイドラインを使用してください</h3> + +<p>リンクを新しいウィンドウで開くことを提供したい場合、テストされ、推奨できる、ユーザビリティとアクセシビリティのガイドラインに従うべきです。:</p> + +<h4 id="Never_use_this_form_of_code_for_links_<a_hrefjavascriptwindow.open..._...>" name="Never_use_this_form_of_code_for_links_<a_hrefjavascriptwindow.open..._...>">決してリンクに次の形式のコードを使わない: <a href="javascript:window.open(...)" ...></h4> + +<p>"javascript:" 形式のリンクは、すべてのブラウザーにおいて、ウェブページのアクセシビリティとユーザビリティを損ねます。</p> + +<ul> + <li>"javascript:" 擬似リンクは、JavaScript サポートが無効化、もしくは、存在しない場合、障害的な機能となります。企業によっては、従業員にウェブの閲覧を許可していても、それが厳格なセキュリティポリシーで管理されている場合があります。例えば、JavaScript 有効の禁止、Java の禁止、Active X の禁止、Flash の禁止などです。様々な理由で（セキュリティ、共用アクセス、テキストブラウザ、など…）、ユーザの 5%～10% が、JavaScript を無効化にしてウェブを閲覧しています。</li> + <li>"javascript:" 形式のリンクは、タブ機能があるブラウザの高度な機能を妨害する可能性があります。例えば、リンクのミドルクリック、リンクの Ctrl + クリック、拡張におけるタブブラウジングの機能などです。</li> + <li>"javascript:" 形式のリンクは、検索エンジンによるウェブページのインデックス処理を妨害する可能性があります。</li> + <li>"javascript:" 形式のリンクは、ボイスブラウザーなどの{{ 原語併記("支援技術", "assistive technologies") }} と <abbr title="Personal Digital Assistant">PDA</abbr> や モバイルブラウザーなどのいくつかの Web-Aware アプリケーションを妨害します。</li> + <li>"javascript:" 形式のリンクは、ブラウザーに実装された "マウスジェスチャ" 機能も妨害します。</li> + <li>プロトコルスキーマとしての "javascript:" は、link Validator 及び リンクチェッカーでは、エラーとして報告されます。</li> +</ul> + +<p><strong>参考 URL:</strong></p> + +<ul> + <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, December 2002（<a class="external" href="http://www.usability.gr.jp/alertbox/20021223.html">日本語版</a>）</li> + <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a>, Jeff Howden, February 2002</li> + <li><a href="http://jibbering.com/faq/#FAQ4_24">comp.lang.javascript newsgroup discussion FAQ on "javascript:" links</a></li> +</ul> + +<h4 id="Never_use_<a_href_onclickwindow.open...>" name="Never_use_<a_href_onclickwindow.open...>">決して <a href="#" onclick="window.open(...);"> を使わない</h4> + +<p>そのような擬似リンクもリンクのアクセシビリティを損ねます。<strong>常に href 属性値を持つ本来の URL を使ってください。</strong> そうすれば、JavaScript サポートが無効にされていたり、存在しない場合や、 MS-Web TV や、テキストブラウザなどのようなユーザエージェントが副ウィンドウを開くことをサポートしていない場合でも、そのようなユーザエージェントが、それらがサポートするデフォルトの方法に従って参照されるリソースを読みこむことができます。また、この形式のコードは、タブ機能を持つブラウザの高度な機能を妨害します。例えば、リンクのミドルクリック、リンクの Ctrl + クリック、リンクの Ctrl + Enter、"マウスジェスチャ" 機能です。</p> + +<h4 id="Always_identify_links_that_will_create_or_will_re-use_a_new_secondary_window" name="Always_identify_links_that_will_create_or_will_re-use_a_new_secondary_window">新しい副ウィンドウを生成（もしくは再利用）するリンクを常に識別できるようにする</h4> + +<p>リンクの title 属性を記述したり、リンクの最後にアイコンを追加したり、反応するカーソルを記述することによってユーザに情報を与え、新しいウィンドウを開くことになるリンクを識別できるようにしてください。</p> + +<p>ユーザに警告をする目的は、コンテキストが変化するときに、ユーザの混乱を最小限にするためです。現在のウィンドウが変化したり、新しいウィンドウがポップアップすることは、ユーザを混乱させます（ツールバーボタンの戻るは使えません）。</p> + +<blockquote> +<p>"ユーザが新しいウィンドウが開いたことに気づかないことはけっこうあります。特に、小さなモニターを使用していて、ウィンドウが最大化されている場合です。元のページに戻ろうとするユーザは、<em>Back</em> ボタンがグレーアウトしているので、混乱してしまいます。"<br> + 引用元：<a href="http://www.useit.com/alertbox/990530.html">The Top Ten<em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, May 1999（<a class="external" href="http://www.usability.gr.jp/alertbox/990530.html">日本語版</a>）</p> +</blockquote> + +<p>コンテキストにおける急激な変化が発生する前にそれらが明確に示唆されるとき、ユーザは、そのまま進みたいかどうかを決めることができ、変化に対して準備することができます。ユーザを混乱させないだけでなく、より経験豊富なユーザは、そのようなリンクをどのように開くかに対するより良い決定を下すこともできます（新しいウィンドウとして開くかどうか、同じウインドウに読み込むか、新しいタブに開くどうか、"バックグラウンド" で開くかどうか）。</p> + +<p><strong>リファレンス</strong></p> + +<ul> + <li>"リンクが新しいウィンドウを開いたり、別のウィンドウをディスプレイにポップアップさせたり、システムのフォーカスを新しいフレームやウィンドウに移動させる場合、行うべき良策は、ユーザにそのようなことが起きるということを伝えることです。" <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li> + <li>"リンクをクリックする前に、そのリンクでどこへ行くかの情報をユーザに提供するためにリンクタイトルを使用してください。" <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, October 1999（<a class="external" href="http://www.usability.gr.jp/alertbox/991003.html">日本語版</a>）</li> + <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, January 1998（<a class="external" href="http://www.usability.gr.jp/alertbox/980111.html">日本語版</a>）</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header" colspan="4">"新しいウィンドウ" を示すアイコンとカーソルの例</td> + </tr> + <tr> + <td><img alt="yahoo.com の新しいウィンドウアイコン" src="/@api/deki/files/782/=NewwindowYahoo.png"></td> + <td><img alt="microsoft.com の新しいウィンドウアイコン" src="/@api/deki/files/780/=NewwinMSIE.gif"></td> + <td><img alt="webaim.org の新しいウィンドウアイコン" src="/@api/deki/files/296/=Popup_requested_new_window.gif"></td> + <td><img alt="sun.com の新しいウィンドウアイコン" src="/@api/deki/files/811/=PopupImageSun.gif"></td> + </tr> + <tr> + <td><img alt="bbc.co.uk の新しいウィンドウアイコン" src="/@api/deki/files/795/=Opennews_rb.gif"></td> + <td><img alt="Accessible Internet Solutions の新しいウィンドウアイコン" src="/@api/deki/files/15/=AIS_NewWindowIcon.png"></td> + <td><img alt="accessify.com の新しいウィンドウアイコン" src="/@api/deki/files/809/=Pop-up-launcher.gif"></td> + <td><img alt="webstyleguide.com の新しいウィンドウアイコン" src="/@api/deki/files/417/=Webstyleguide_com_newwind.gif"></td> + </tr> + <tr> + <td><img alt="ソース不明の新しいウィンドウアイコン" src="/@api/deki/files/810/=Popicon_1.gif"></td> + <td><img alt="ソース不明の新しいウィンドウアイコン" src="/@api/deki/files/779/=New.gif"></td> + <td><img alt="ソース不明の新しいウィンドウアイコン" src="/@api/deki/files/419/=WillCreateOrRecycleNewWindow.gif"></td> + <td><img alt="gtalbot.org の新しいウィンドウアイコン" src="/@api/deki/files/287/=OpenRequestedPopup.png"></td> + </tr> + <tr> + <td colspan="2"><img alt="draig.de の新しいウィンドウカーソル" src="/@api/deki/files/169/=Cursor_LinkNewWindowTargetBlank.png"></td> + <td colspan="2"><img alt="mithgol.ru の新しいウィンドウカーソル" src="/@api/deki/files/170/=Cursor_newwindowSergeySokoloff.png"></td> + </tr> + </tbody> +</table> + +<h4 id="Always_use_the_target_attribute" name="Always_use_the_target_attribute">常に target 属性を使う</h4> + +<p>JavaScript サポートが無効化されている、もしくは、存在しない場合、ユーザエージェントは、自身の target 属性の扱い方に従って、副ウィンドウを生成するか、参照されるリソースを表示するでしょう。例えば、MS Web TV のような、新しいウィンドウを生成できないいくつかのユーザエージェントは、参照されたリソースを取りだしてから、それを現在のウィンドウの最後に追加します。その最終目的と考え方は、ユーザに参照されるリソースを開く方法、つまり、リンクを開く形式を提供しようとすることであり、 - <strong>強制することではありません。</strong> - あなたのコードはユーザが自由に選択できるブラウザの機能を妨害すべきではありませんし、ユーザに与えられる最終決定権を妨害すべきではありません。</p> + +<h4 id="target_blank_を使わない"><code>target="_blank"</code> を使わない</h4> + +<p>target 属性には常に意味のある名前を指定し、あなたのページでそのような target 属性を再利用するようにしてください。そうすれば、別のリンクをクリックしても、参照されるリソースがすでに生成され、表示されているウィンドウに読みこまれることになるでしょう（そうすることで、ユーザ側の処理がスピードアップします）。また、そうすることで、副ウィンドウを最初の場所に生成する理由（とユーザのシステムリソース、時間消費）が正当化されるでしょう。単一の target 属性値を使用し、それをリンクで再利用することは、再利用される単一の副ウィンドウを生成するよりも、非常にユーザリソースに優しいことです。一方、target 属性の値として、"_blank" を使用すると、いくつかの新しい、名前のないウィンドウをユーザにデスクトップに生成することになり、それらは、再利用も、再使用もできません。どんな場合でも、あなたのコードが上手く動作する場合でも、ユーザの最終選択を妨害するべきではありません。そうではなく、より多くの選択肢、リンクを開くためのより多くの方法、ユーザが使用しているツール（ブラウザ）へのより多くの機能をユーザに提供するようにしてください。</p> + +<h2 id="Glossary" name="Glossary">用語集</h2> + +<dl> + <dt>オープナーウィンドウ、親ウィンドウ、メインウィンドウ、最初のウィンドウ</dt> + <dd>これらの語は、同じウィンドウのことを記述、または、指し示すために使われています。これは、新しいウィンドウが生成される元ウィンドウのことです。つまり、これは、ユーザが別の新しいウィンドウを生成するためのリンクをクリックした際の元ウィンドウのことです。</dd> + <dt>サブウィンドウ、子ウィンドウ、副ウィンドウ、第2ウィンドウ</dt> + <dd>これらの語は、同じウィンドウのことを記述、または、指し示すために使われています。これは、生成された新しいウィンドウのことです。</dd> + <dt>リクエストのないポップアップウィンドウ</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', 'window-object.html#dom-open', 'Window.open()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td><code>features</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.Window.open")}}</p> + +<h2 id="Notes" name="Notes">注意事項</h2> + +<h3 id="Popup_condition" name="Popup_condition">ポップアップの条件</h3> + +<p>ほとんどの最新ブラウザー (以下に記載) では、ウェブコンテンツが UI パーツの表示・非表示を個別に制御することはできません。</p> + +<ul> + <li>Firefox 76 (2020年5月5日リリース) 以降</li> + <li>Google Chrome</li> + <li>Safari</li> + <li>Chromium Edge</li> +</ul> + +<p>ポップアップを開くか新規タブを開くか、新規ウィンドウを開くかの条件として <code><var>windowFeatures</var></code> の UI 関連項目を使用し、それぞれの UI パーツの表示状態を固定しています。</p> + +<p>この条件は実装上のものであり、安定性を保証するものではありません。</p> + +<h3 id="スクロールバーに関する注意">スクロールバーに関する注意</h3> + +<p>コンテンツがビューポートの範囲からはみ出すときは、ユーザがコンテンツにアクセスできることを保証するために、スクロールバー（あるいは、スクロールする仕組み）が必要です。ウェブ制作者のコントロール外となるいくつかの理由でコンテンツがウィンドウの範囲をはみ出すことがあります。:</p> + +<ul> + <li>ユーザはウィンドウをリサイズします。</li> + <li>ユーザはテキストのフォントサイズを、Mozilla では、メニューアイテムの 表示/文字の大きさ (%) で、Firefox では、表示/文字サイズ/大きく or 小さく を使って大きくします。</li> + <li>ユーザはページの最小フォントサイズをウェブ制作者が指定したフォントサイズよりも大きく設定します。40 歳以上、もしくは、特殊な閲覧習慣、閲覧設定を持つ人々は、よく、Mozilla ベースのブラウザで最小フォントサイズを設定しています。</li> + <li>ウェブ制作者は、様々なブラウザ及び様々なブラウザのバージョンの、ルート要素、または、body ノードに適用されるデフォルトの margin（かつ/または border かつ/または padding）の値に注意していません。</li> + <li>ユーザは、文書のボックスサイズ（margin、padding、デフォルトフォントサイズ）を大きくする閲覧習慣のためにユーザスタイルシート(<a class="external" href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>, <a class="external" href="http://www.mozilla-japan.org/support/firefox/edit#content">日本語版</a>)を用いています。</li> + <li>ユーザは、オペレーティングシステムの設定で多くのツールバーのサイズ（高さ、幅）を独自にカスタマイズしています。例えば、Windows XP オペレーティングシステムでは、ユーザがウィンドウリサイズの限界、ブラウザのタイトルバー、メニューバー、スクロールバーの高さ、フォントサイズを完全にカスタマイズできます。これらのツールバーの寸法は、ブラウザテーマとスキン、あるいは、オペレーティングシステムのテーマによっても設定されることがあります。</li> + <li>ウェブ制作者は、ユーザのデフォルトのブラウザウィンドウに、指定された目的のためのカスタムツールバーがあることに気付きません。例えば、設定バー、ウェブ開発者パー、アクセシビリティツールバー、ポップアップブロックと検索ツールバー、多機能ツールバーなどです。</li> + <li>ユーザは、アプリケーションのためのオペレーティングシステムの作業領域を変更する支援技術、あるいは、アドオン機能を用います。例えば、{{ 原語併記("拡大鏡", "MS-Magnifier") }}です。</li> + <li>ユーザは、直接、または、間接的に、アプリケーションのためのオペレーティングシステムの作業領域を再配置 かつ/または リサイズします。例えば、ユーザは、Windows のタスクバーをリサイズしたり、Windows のタスクバーを左側（アラビア語ベース）や右側（ヘブライ語）に配置したり、固定の MS-Office クイック起動ツールバーを置いたりします。</li> + <li>いくつかのオペレーティングシステム（Mac OS X）はウェブ制作者のブラウザウィンドウの有効範囲の予測、計算がはずれたツールバーを強制的に表示させます。</li> +</ul> + +<h3 id="Note_on_position_and_dimension_error_correction" name="Note_on_position_and_dimension_error_correction">位置と大きさのエラー修正に関する注意</h3> + +<p><var>features</var> のリストで指定された位置と寸法の値でブラウザウィンドウ全体がユーザのオペレーティングシステムにおけるアプリケーションのための作業領域内に表示し切れない場合、それらの値は、優先されず、<strong>修正されません。</strong><strong>新しいウィンドウのどの部分も最初からスクリーン外に配置されることはありません。これは、Mozilla ベースのブラウザのリリース版の全てでデフォルトです。</strong></p> + +<p><a href="http://msdn2.microsoft.com/en-us/library/ms997645.aspx#xpsp_topic5">MSIE 6 SP2 にも同じようなエラー修正の仕組みがあります。</a>（<a class="external" href="http://msdn.microsoft.com/library/ja/jpdnwxp/htm/xpsp2web.asp?frame=true#xpsp_topic5">日本語版</a>）</p> + +<h2 id="Tutorials" name="Tutorials">チュートリアル</h2> + +<ul> + <li><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> by Lasse Reichstein Nielsen</li> + <li><a href="http://accessify.com/features/tutorials/the-perfect-popup/" title="http://accessify.com/features/tutorials/the-perfect-popup/">The perfect pop-up (tutorial)</a> by Ian Lloyd</li> + <li><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> by Gérard Talbot</li> +</ul> + +<h2 id="References" name="References">リファレンス</h2> + +<ul> + <li><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</li> + <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links & JavaScript Living Together in Harmony</a> by Jeff Howden</li> +</ul> + +<h2 id="Others" name="Others">その他</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Window/open/Obsolete_features">古い機能</a></li> + <li><a href="/ja/docs/Web/API/Window/open/Privileged_features">特権が必要な機能</a></li> +</ul> diff --git a/files/ja/web/api/window/orientationchange_event/index.html b/files/ja/web/api/window/orientationchange_event/index.html new file mode 100644 index 0000000000..0302015078 --- /dev/null +++ b/files/ja/web/api/window/orientationchange_event/index.html @@ -0,0 +1,75 @@ +--- +title: 'Window: orientationchange イベント' +slug: Web/API/Window/orientationchange_event +tags: + - API + - Event + - Reference + - Sensors + - Window + - onorientationchange + - イベント +translation_of: Web/API/Window/orientationchange_event +--- +<div>{{APIRef}}</div> + +<p><code>orientationchange</code> イベントは、端末の向きが変化した時に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラー</th> + <td>{{domxref("Window/onorientationchange", "onorientationchange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<p><code>orientationchange</code> イベントは {{domxref("EventTarget/addEventListener", "addEventListener")}} メソッドで使用することができます。</p> + +<pre class="brush:js;">window.addEventListener("orientationchange", function() { + console.log("端末の向きが " + screen.orientation.angle + "になりました。"); +}); +</pre> + +<p>または、 {{domxref("Window/onorientationchange", "onorientationchange")}} イベントハンドラープロパティを使用します。</p> + +<pre class="brush: js">window.onorientationchange = function() { + console.log("端末の向きが " + screen.orientation.angle + "になりました。"); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Compat', '#event-orientationchange', 'orientationchange')}}</td> + <td>{{Spec2('Compat')}}</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.Window.orientationchange_event")}}</p> diff --git a/files/ja/web/api/window/outerheight/index.html b/files/ja/web/api/window/outerheight/index.html new file mode 100644 index 0000000000..095f1aeb54 --- /dev/null +++ b/files/ja/web/api/window/outerheight/index.html @@ -0,0 +1,62 @@ +--- +title: Window.outerHeight +slug: Web/API/Window/outerHeight +tags: + - API + - CSSOM View + - NeedsContent + - Property + - Reference + - outerHeight +translation_of: Web/API/Window/outerHeight +--- +<div>{{APIRef}}</div> + +<p><strong><code>Window.outerHeight</code></strong> は読み取り専用のプロパティで、サイドバー、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の高さをピクセル単位で表します。</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>ウィンドウの大きさを変更するには、 {{domxref("window.resizeBy()")}} および {{domxref("window.resizeTo()")}} を使用してください。</p> + +<p>ウィンドウの内側の高さ、つまりページが表示される高さを取得するには、 {{domxref("window.innerHeight")}} を使用してください。</p> + +<h3 id="Graphical_example" name="Graphical_example">図による例示</h3> + +<p>以下の図は、 <code>outerHeight</code> と <code>innerHeight</code> の違いを示しています。</p> + +<p><img alt="innerHeight vs outerHeight illustration" src="/@api/deki/files/213/=FirefoxInnerVsOuterHeight2.png"></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('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td> + <td>{{ Spec2('CSSOM View') }}</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.Window.outerHeight")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.innerHeight")}}</li> + <li>{{domxref("window.innerWidth")}}</li> + <li>{{domxref("window.outerWidth")}}</li> + <li>{{domxref("window.resizeBy()")}}</li> + <li>{{domxref("window.resizeTo()")}}</li> +</ul> diff --git a/files/ja/web/api/window/outerwidth/index.html b/files/ja/web/api/window/outerwidth/index.html new file mode 100644 index 0000000000..553f717689 --- /dev/null +++ b/files/ja/web/api/window/outerwidth/index.html @@ -0,0 +1,53 @@ +--- +title: Window.outerWidth +slug: Web/API/Window/outerWidth +tags: + - API + - CSSOM View + - NeedsContent + - Property + - Reference + - outerWidth +translation_of: Web/API/Window/outerWidth +--- +<div>{{APIRef}}</div> + +<p><strong><code>Window.outerWidth</code></strong> は読み取り専用のプロパティで、ブラウザーウィンドウの外側の幅を返します。これはサイドバー (展開されている場合)、ウィンドウの操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザーウィンドウ全体の幅を表します。</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>ウィンドウの大きさを変更するには、 {{domxref("window.resizeBy()")}} および {{domxref("window.resizeTo()")}} を参照してください。</p> + +<p>ウィンドウの内側の幅、つまりページが表示される幅を取得するには、 {{domxref("window.innerWidth")}} を参照してください。</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('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td> + <td>{{ Spec2('CSSOM View') }}</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.Window.outerWidth")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li> + <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li> +</ul> diff --git a/files/ja/web/api/window/pagehide_event/index.html b/files/ja/web/api/window/pagehide_event/index.html new file mode 100644 index 0000000000..305a0d38de --- /dev/null +++ b/files/ja/web/api/window/pagehide_event/index.html @@ -0,0 +1,96 @@ +--- +title: 'Window: pagehide イベント' +slug: Web/API/Window/pagehide_event +tags: + - API + - Event + - History + - Navigation + - Reference + - Window + - pagehide + - イベント + - 履歴 +translation_of: Web/API/Window/pagehide_event +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>pagehide</code></strong> イベントは、ブラウザーがセッションの履歴から他のページを表示する過程において、現在のページを非表示にしたときに {{domxref("Window")}} へ送られます。</span>例えば、ユーザーがブラウザーの戻るボタンをクリックしたとき、現在のページはひとつ前のページが表示される前に <code>pagehide</code> イベントを受け取ります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PageTransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Window.onpagehide", "onpagehide")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、イベントハンドラーが <code>pagehide</code> イベントを監視するために確立され、ページが再利用できるように保存されようとするときに特殊な扱いを行います。</p> + +<pre class="brush: js">window.addEventListener("pagehide", event => { + if (event.persisted) { + /* このページは破棄されないので、後で再利用することができます */ + } +}, false); +</pre> + +<p>これは {{domxref("Window.onpagehide", "onpagehide")}} イベントハンドラープロパティを {{domxref("Window")}} 上で利用することで書くこともできます。</p> + +<pre class="brush: js">window.onpagehide = event => { + if (event.persisted) { + /* このページは破棄されないので、後で再利用することができます */ + } +} +</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('HTML WHATWG', 'browsing-the-web.html#event-pagehide', 'pagehide')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#event-pagehide', 'pagehide')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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.Window.pagehide_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window.onpageshow", "onpageshow")}} イベントハンドラープロパティ</li> + <li>{{domxref("Window.pageshow_event", "pageshow")}} イベント</li> +</ul> diff --git a/files/ja/web/api/window/pageshow_event/index.html b/files/ja/web/api/window/pageshow_event/index.html new file mode 100644 index 0000000000..efc3554441 --- /dev/null +++ b/files/ja/web/api/window/pageshow_event/index.html @@ -0,0 +1,132 @@ +--- +title: 'Window: pageshow イベント' +slug: Web/API/Window/pageshow_event +tags: + - API + - Document + - Event + - History + - Navigation + - Page + - PageTransitionEvent + - Reference + - Window + - pageshow + - show + - イベント + - ナビゲーション + - ページ + - 履歴 +translation_of: Web/API/Window/pageshow_event +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>pageshow</code></strong> イベントは、操作によってブラウザーがウィンドウの文書を表示したときに {{domxref("Window")}} へ送られます。</span>これには以下のようなものがあります。</p> + +<ul> + <li>最初にページを読み込んだとき</li> + <li>同じウィンドウまたはタブの中で、他のページからそのページへ移動してきたとき</li> + <li>モバイル OS で凍結されたページを復元したとき</li> + <li>ブラウザーの進む、戻るボタンを利用してこのページに戻ったとき</li> +</ul> + +<div class="blockIndicator note"> +<p>最初にページを読み込んでいる間、 <code>pageshow</code> イベントは {{domxref("Window/load_event", "load")}} イベントの<em>後で</em>発生します。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PageTransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("Window.onpageshow", "onpageshow")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は配列 <code>events</code> の中に列挙されたイベントのイベントハンドラーを設定します。ハンドラーである <code>eventLogger()</code> は、発生したイベントの種類と、 {{domxref("PageTransitionEvent.persisted", "persisted")}} フラグの値を <code>pageshow</code> および <code>pagehide</code> イベントの場合に含めてコンソールに出力します。</p> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const events = [ + "pagehide", "pageshow", + "unload", "load" +]; + +const eventLogger = event => { + switch (event.type) { + case "pagehide": + case "pageshow": + let isPersisted = event.persisted ? "persisted" : "not persisted"; + console.log('Event:', event.type, '-', isPersisted); + break; + default: + console.log('Event:', event.type); + break; + } +}; + +events.forEach(eventName => + window.addEventListener(eventName, eventLogger) +);</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>コンソールを開き、このページに出入りしたときの出力を見てください。 +このタブに新しいページを読み込んだり、履歴で前後に移動したりして、 +イベントのログへの出力を見てください。</p> +</pre> + +<h3 id="Results" name="Results">結果</h3> + +<p>{{EmbedLiveSample("Example", 640, 250)}}</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', 'browsing-the-web.html#event-pageshow', 'pageshow')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}</td> + <td>{{Spec2('HTML5 W3C')}}</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.Window.pageshow_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window.onpageshow", "onpageshow")}} イベントハンドラープロパティ</li> + <li>{{domxref("Window.pagehide_event", "pagehide")}}</li> +</ul> diff --git a/files/ja/web/api/window/parent/index.html b/files/ja/web/api/window/parent/index.html new file mode 100644 index 0000000000..6e8f1e986d --- /dev/null +++ b/files/ja/web/api/window/parent/index.html @@ -0,0 +1,44 @@ +--- +title: window.parent +slug: Web/API/Window/parent +tags: + - API + - Gecko + - HTML DOM + - Window +translation_of: Web/API/Window/parent +--- +<p>{{ APIRef() }}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>現在のウィンドウ、または、サブフレームの親ウィンドウへの参照を返します。</p> + +<p>ウィンドウが親を持たない場合、<code>parent</code> プロパティは、それ自身への参照となります。</p> + +<p>ウィンドウが {{htmlelement("iframe")}} 、{{htmlelement("object")}} 、あるいは、{{htmlelement("frame")}} で読み込まれた場合、その親ウィンドウは、ウィンドウを埋め込んだ要素が存在するウィンドウとなります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>parentWindow</var> = window.parent +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">if (window.parent !== window.top) { + // 1 段下より深いところ +} +</pre> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#dom-parent">HTML Standard</a></li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.frameElement")}} - <code>window</code> が埋め込まれた（<code><iframe></code> 要素などの）特定の要素を返す</li> + <li>{{domxref("window.top")}} - 最上位ウィンドウへの参照を返す</li> +</ul> diff --git a/files/ja/web/api/window/paste_event/index.html b/files/ja/web/api/window/paste_event/index.html new file mode 100644 index 0000000000..0697458a24 --- /dev/null +++ b/files/ja/web/api/window/paste_event/index.html @@ -0,0 +1,76 @@ +--- +title: 'Window: paste イベント' +slug: Web/API/Window/paste_event +tags: + - API + - Event + - Reference + - Web + - Window + - paste + - イベント +translation_of: Web/API/Window/paste_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><strong><code>paste</code></strong> イベントは、ユーザーがブラウザーのユーザーインターフェイスから「貼り付け」操作を実行したときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("ClipboardEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、貼り付け操作を意図する対象である {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントの局面について完全な詳細は、 <a href="/ja/docs/Web/API/Element/paste_event">Element: paste イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js">document.addEventListener('paste', (event) => { + console.log('paste action initiated') +});</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td> + <td>{{Spec2('Clipboard API')}}</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.Window.paste_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/copy_event", "copy")}}</li> + <li>{{domxref("Element")}} を対象としたこのイベント: {{domxref("Element/paste_event", "paste")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/paste_event", "paste")}}</li> +</ul> diff --git a/files/ja/web/api/window/performance/index.html b/files/ja/web/api/window/performance/index.html new file mode 100644 index 0000000000..bc9d03412f --- /dev/null +++ b/files/ja/web/api/window/performance/index.html @@ -0,0 +1,39 @@ +--- +title: Window.performance +slug: Web/API/Window/performance +translation_of: Web/API/Window/performance +--- +<p>{{APIRef("High Resolution Time")}}</p> + +<p>{{domxref("Window")}} インタフェースのパフォーマンスプロパティは、現在のドキュメントに関するパフォーマンス情報を収集するために使用できる {{domxref("Performance")}} オブジェクトを返します。これはパフォーマンスタイムライン API、高解像度時間 API、<a href="/ja/docs/Web/API/Navigation_timing_API">ナビゲーションタイミング API</a>、<a href="/ja/docs/Web/API/User_Timing_API">ユーザータイミング API</a> および<a href="/ja/docs/Web/API/Resource_Timing_API">リソースタイミング API</a> の公開ポイントとして機能します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><em>performanceData</em> = window.performance;</pre> + +<h3 id="値">値</h3> + +<p>それが公開する API によって提供されるパフォーマンスおよびタイミング関連情報へのアクセスを提供する {{domxref("Performance")}} オブジェクト。</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('Highres Time', '#the-performance-interface', 'window.performance')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Defines <code>now()</code> method.</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換表は構造化データから生成されます。データに貢献したい場合は <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックし、プルリクエストを送信してください。</div> + +<p>{{Compat("api.Window.performance")}}</p> diff --git a/files/ja/web/api/window/personalbar/index.html b/files/ja/web/api/window/personalbar/index.html new file mode 100644 index 0000000000..150a9b5784 --- /dev/null +++ b/files/ja/web/api/window/personalbar/index.html @@ -0,0 +1,77 @@ +--- +title: window.personalbar +slug: Web/API/Window/personalbar +tags: + - Gecko + - HTML DOM + - Window +translation_of: Web/API/Window/personalbar +--- +<div>{{ApiRef}}</div> + +<h2 id="概要">概要</h2> + +<p><code>personalbar</code> オブジェクトを返します。このバーの表示は、ウィンドウ内でトグル（表示/非表示の状態を切り替える）ことができます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><var>objRef</var> =<em>window</em>.personalbar +</pre> + +<h2 id="例">例</h2> + +<p>以下の完全な HTML の例は、様々な "bar" オブジェクトの visible プロパティで利用可能な方法を示しています。存在するウィンドウのあらゆるバーの visible プロパティ を書き換えるには、特権が必要です。</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8" /> +<title>様々な DOM テスト</title> + +<script> +// 存在するウィンドウのバーの状態を変更します +netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite"); +window.personalbar.visible = !window.personalbar.visible; +</script> + +</head> +<body> + <p>様々な DOM テスト</p> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>上記の例のページを読み込んだとき、ブラウザは、以下のダイアログを表示するでしょう。<br> + <img src="https://mdn.mozillademos.org/files/1574/Modify_any_open_window_dialog.png" style="height: 262px; width: 607px;"></p> + +<p>バーの表示を切り替えるには、上記の例のように、スクリプトの実行と特権要求を許可しなければなりません。また、様々なツールバーの表示の動的な変更は、ウィンドウのサイズをかなり劇的に変化させることがあり、ページのレイアウトに影響する可能性があることに注意してください。</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', 'browsers.html#dom-window-personalbar', 'Window.personalbar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-personalbar', 'Window.personalbar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("window.locationbar")}} 、{{domxref("window.menubar")}} 、{{domxref("window.scrollbars")}} 、{{domxref("window.statusbar")}} 、{{domxref("window.toolbar")}}</li> +</ul> diff --git a/files/ja/web/api/window/pkcs11/index.html b/files/ja/web/api/window/pkcs11/index.html new file mode 100644 index 0000000000..faa851a9d3 --- /dev/null +++ b/files/ja/web/api/window/pkcs11/index.html @@ -0,0 +1,29 @@ +--- +title: window.pkcs11 +slug: Web/API/Window/pkcs11 +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window + - 要更新 +translation_of: Web/API/Window/pkcs11 +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p><a href="ja/Pkcs11_protocol">pcks11 プロトコル</a> に関連するドライバや他のソフトウェアをインストールするために用いられる <b>pkcs11</b> オブジェクトを返します。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>objRef</i> = window.pkcs11 +</pre> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre> window.pkcs11.addModule(sMod, secPath, 0, 0); +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>pcks11 オブジェクトの扱い方についてのさらなる情報は、<a href="ja/NsIDOMPkcs11">nsIDOMPkcs11</a> を参照してください。</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/postmessage/index.html b/files/ja/web/api/window/postmessage/index.html new file mode 100644 index 0000000000..a20570a66f --- /dev/null +++ b/files/ja/web/api/window/postmessage/index.html @@ -0,0 +1,191 @@ +--- +title: window.postMessage +slug: Web/API/Window/postMessage +tags: + - API + - Cross-origin Communication + - DOM + - HTML DOM + - Method + - Reference + - Window + - postMessage + - メソッド +translation_of: Web/API/Window/postMessage +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>window.postMessage()</code></strong> は、 {{domxref("Window")}} オブジェクト間で安全にクロスドメイン通信を可能にするためのメソッドです。例えば、ポップアップとそれを表示したページの間や、iframe とそれが埋め込まれたページの間での通信に使うことができます。</p> + +<p>通常、異なった複数のページでのスクリプトはそれらが実行されたページが同じプロトコル、ポート番号、ホストである場合に限りお互いにアクセスすることが可能です ("<a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a>" とも呼ばれます)。正しく使用した <code>window.postMessage</code> はこの制限を安全に回避するための制御された仕組みを提供します。</p> + +<p>大まかには、ウィンドウが他のウィンドウへの参照を取得できる場合 ( <code>targetWindow = window.opener</code> など)、<code>targetWindow.postMessage()</code> を使って {{domxref("MessageEvent")}} をそのウィンドウ上で配信することができます。受け取ったウィンドウでは必要に応じて自由に<a href="/ja/docs/Web/Guide/Events">イベントを処理</a>することができます。<code>window.postMessage()</code> に渡された引数 (“message”) は<a href="#The_dispatched_event">イベントオブジェクトを通して対象のウィンドウに公開されます</a>。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>targetWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre> + +<dl> + <dt><code><em>targetWindow</em></code></dt> + <dd>メッセージを受信するウィンドウへの参照。参照を取得する方法には以下のようなものがあります: + <ul> + <li>{{domxref("window.open")}} (新しいウィンドウを開き、それを参照する場合)</li> + <li>{{domxref("window.opener")}} (現在のウィンドウを開いたウィンドウを参照する場合)</li> + <li>{{domxref("HTMLIFrameElement.contentWindow")}} (埋め込んだ {{HTMLElement("iframe")}} を親ウィンドウから参照する場合)</li> + <li>{{domxref("window.parent")}} (埋め込まれた {{HTMLElement("iframe")}} の中から親ウィンドウを参照する場合)</li> + <li>{{domxref("window.frames")}} + 添字 (名前または数値)</li> + </ul> + </dd> + <dt><code>message</code></dt> + <dd>他のウィンドウに送られるデータ。データは <a href="https://developer.mozilla.org/ja/docs/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> に従ってシリアル化されます。つまり、手動でシリアル化することなく様々なデータオブジェクトを渡すことができます。</dd> + <dt><code>targetOrigin</code></dt> + <dd>イベントを配信する <code>otherWindow</code> のオリジンを <code>"*"</code> というリテラル文字列（制限しないことを示します）か URI のいずれかで指定します。もしイベントの配信が予約される時点で、<code>targetWindow</code> のドキュメントのスキーマ、ホスト名、あるいはポートが <code>targetOrigin</code> で指定されたものにマッチしない場合、そのイベントは配信されません。3 つすべてがマッチした場合にだけイベントが配信されます。この仕組みはメッセージがどこに送られるかを制御できるようにしています。例えば <code>postMessage</code> をパスワードを送るために利用する場合、悪意のある第三者によるパスワードの傍受を防ぐため、そのメッセージを受け取るべき受信者のオリジンと一致する URI をこの引数に指定しておくことが非常に重要になります。 <strong>送信先ウィンドウのドキュメントがどこに配置されるのかを知っている場合、<code>*</code> ではなく具体的な <code>targetOrigin</code> を指定してください。具体的なターゲットを指定しない場合、相手が悪意を持ったサイトであっても、送信したデータが公開されることを意味します。</strong></dd> + <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt> + <dd>メッセージと一緒に転送される {{domxref("Transferable")}} オブジェクトのシーケンス。これらのオブジェクトの所有権は送信先に移動され、送信元では使えなくなります。</dd> +</dl> + +<h2 id="The_dispatched_event" name="The_dispatched_event">配信されるイベント</h2> + +<p><code>otherWindow</code> は以下の JavaScript を実行することで、配信されたメッセージを受け取ることができます。</p> + +<pre class="brush:js">window.addEventListener("message", receiveMessage, false); + +function receiveMessage(event) { + if (event.origin !== "http://example.org:8080") + return; + + // ... +} +</pre> + +<p>配信されたメッセージは以下のプロパティを持ちます。</p> + +<dl> + <dt><code>data</code></dt> + <dd>他のウィンドウから渡されたメッセージを保持しているオブジェクト。</dd> + <dt><code>origin</code></dt> + <dd><code>postMessage</code> が呼び出されたときにメッセージを送るウィンドウの<a href="/ja/docs/Glossary/Origin" title="Origin">オリジン</a>。この文字列は、プロトコルと "://"、ホスト名（存在する場合）、そして、":" の後に続くポート番号（デフォルトポートと指定するポートが異なる場合）が連結されたものです。典型的なオリジンの例は <code>https://example.org</code> (この場合のポートは <code>443</code>)、<code>http://example.net</code> (この場合のポートは <code>80</code>)、そして <code>http://example.com:8080</code>。このオリジン生成元はそのウィンドウの現在もしくは将来のオリジンであることを保証<em>していない</em>ことに注意してください。<code>postMessage</code> が呼び出された時とは異なる場所に移動しているかもしれません。</dd> + <dt><code>source</code></dt> + <dd>メッセージを送った <code><a href="/ja/docs/DOM/window" title="DOM/window">window</a></code> オブジェクトへの参照。これを使うことでオリジンの異なる二つのウィンドウ間で双方向の通信を確立することができます。</dd> +</dl> + +<h2 id="Security_concerns" name="Security_concerns">セキュリティの考慮事項</h2> + +<p><strong>他のサイトからメッセージを受け取りたくない場合、<code>message</code> イベントに対して一切イベントリスナーを追加しないでください。</strong>これはセキュリティ的な問題を避けるための完全にフールプルーフな方法です。</p> + +<p>他のサイトからメッセージを受け取りたい場合、<code>origin</code> あるいは <code>source</code> プロパティを用いて<strong>常に送信者の識別情報を確かめてください</strong>。任意のウィンドウ（例えば、<code>http://evil.example.com</code> も含む）は任意の他のウィンドウにメッセージを送ることができ、見知らぬ送信者が悪意あるメッセージを送らない保証はありません。識別情報を確かめても、<strong>常に受け取ったメッセージの構文を確かめる</strong>べきです。さもなければ、信頼されたメッセージだけを送るとして信頼されたサイトにセキュリティホールが存在した場合に、クロスサイトスクリプティングのセキュリティホールをあなたのサイトに開けることになり得ます。</p> + +<p><strong>他のウィンドウに <code>postMessage</code> でデータを送信する場合、 <code>*</code> ではなく、常に具体的なターゲットオリジンを指定してください。 </strong>悪意を持ったサイトはあなたの知らないうちに送信先ウィンドウの場所を変更することができ、そのまま <code>postMessage</code> で送信されたデータを傍受することができてしまいます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">/* + * <http://example.com:8080> にある、window A のスクリプト: + */ + +var popup = window.open(/* ポップアップの詳細 */); + +// ポップアップブロッカーでブロックされず、ポップアップが完全にロードされたとき + +// ウィンドウがその場所を変更していない場合、これは何もしません。 +popup.postMessage("ユーザー名は 'bob' 、パスワードは 'secret' です", + "https://secure.example.net"); + +// ウィンドウがその場所を変更していない場合、 +//これはポップアップに送るメッセージのキューに追加します。 +popup.postMessage("hello there!", "http://example.com"); + +function receiveMessage(event) +{ + // このメッセージの送信者は信頼している者か？（例えば、最初開いたものと違 + // うかもしれません）。 + if (event.origin !== "http://example.com") + return; + + // event.source は popup + // event.data は "hi there yourself! the secret response is: rheeeeet!" +} +window.addEventListener("message", receiveMessage, false); +</pre> + +<pre class="brush:js">/* + * <http://example.org> で実行される popup のスクリプト: + */ + +// postMessage が呼び出された後に呼び出されます。 +function receiveMessage(event) +{ + // このメッセージの送信者は信頼している者か？ + if (event.origin !== "http://example.com:8080") + return; + + // event.source は window.opener + // event.data は "hello there!" + + // 受け取ったメッセージのオリジンを確かめたい場合（どんな場合でもそうするべ + // きです）、メッセージに返答するための便利なイディオムは event.source 上 + // の postMessage を呼び出し、targetOrigin に event.origin を指定すること + // です。 + event.source.postMessage("hi there yourself! the secret response " + + "is: rheeeeet!", + event.origin); +} + +window.addEventListener("message", receiveMessage, false); +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>任意のウィンドウが、いつでも、ウィンドウの文書の場所にかかわらず、メッセージを送るために、任意の他のウィンドウ上でこのメソッドにアクセスするかもしれません。従って、任意のイベントリスナーはメッセージを受け取る際に、<code>origin</code> あるいは <code>source</code> プロパティを用いて、まず最初にメッセージの送信者の識別情報をチェック<strong>しなければなりません</strong>。これを軽視することはできません。なぜなら、<strong><code>origin</code> あるいは <code>source</code> プロパティのチェックの失敗はクロスサイトスクリプティング攻撃を可能にする</strong>からです。</p> + +<p>非同期に配信されるスクリプト（タイムアウト、ユーザーが生成したイベント）のために <code>postMessage</code> の呼び出し元の判別が不可能であるとき、<code>postMessage</code> によって送られるイベントを待ち受けているイベントハンドラは例外を投げます。</p> + +<p><code>postMessage()</code> は {{domxref("MessageEvent")}} を、<em>すべての待ち状態の実行コンテキストが終了した後のみ</em>配信するためにスケジューリングします。例えば、 <code>postMessage()</code> がイベントハンドラーから呼び出された場合、 {{domxref("MessageEvent")}} が配信される前に、そのイベントハンドラーが最後まで実行され、同じイベントの残りのハンドラーが実行されます。</p> + +<p>配信されるイベントの <code>origin</code> プロパティは呼び出すウィンドウの <code>document.domain</code> の現在の値に影響されません。</p> + +<p>IDN ホスト名に限った話ですが、<code>origin</code> プロパティの値が Unicode と Punycode のどちらなのかは一貫していません。ですから、IDN サイトからのメッセージを期待する場合にこのプロパティを用いるときは、互換性を高めるために、IDN と Punycode の両方でチェックしてください。この値は最終的には 一貫して IDN になるはずですが、現在は IDN と Punycode 両方の形式を扱うべきです。</p> + +<p>送信元ウィンドウが <code>javascript:</code> や <code>data:</code> のURLを持つ場合、<code>origin</code> プロパティの値はその URL を読み込んだスクリプトのオリジンになります。</p> + +<h3 id="Using_window.postMessage_in_extensions_Non-standard_inline" name="Using_window.postMessage_in_extensions_Non-standard_inline">window.postMessage を拡張機能で使う {{Non-standard_inline}}</h3> + +<p><code>window.postMessage</code> は chrome コードで実行される JavaScript で利用可能です（例：拡張内および特権コード）。しかし、配信されるイベントの <code>source</code> プロパティはセキュリティ上の制限から常に <code>null</code> です（他のプロパティは期待された値です）。</p> + +<p>コンテンツスクリプトやウェブコンテキストスクリプトは <code>targetOrigin</code> を拡張機能 (バックグラウンドスクリプトやコンテンツスクリプト) と直接通信するために指定することはできません。ウェブやコンテンツのスクリプトは、 <code>window.postMessage</code> を <code>targetOrigin</code> を <code>"*"</code> にして使用することで、すべてのリスナーにブロードキャストすることができますが、これは拡張機能がそのようなメッセージのオリジンを特定することができないこと、他のリスナー (制御するべきでないものも含む) が待ち受けしている可能性があるため推奨されません。</p> + +<p>コンテンツスクリプトでバックグラウンドスクリプトと通信したい場合は <a href="/ja/Add-ons/WebExtensions/API/runtime">runtime.sendMessage</a> を使うべきです。ウェブコンテキストスクリプトでバックグラウンドスクリプトと通信したい場合はカスタムイベント（ゲストページから覗かれなくない場合など、必要であればランダム生成したイベント名で）を使うことができます。</p> + +<p>最後に、 <code>file:</code> URL のページへのメッセージを送るには <code>targetOrigin</code> 引数を <code>"*"</code> にする必要があります。 <code>file://</code> はセキュリティ上の制限のために用いることはできません、この制限は将来修正されるかもしれません。</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', "web-messaging.html#dom-window-postmessage", "postMessage()")}}</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.Window.postMessage")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Document.domain")}}</li> + <li>{{domxref("CustomEvent")}}</li> +</ul> diff --git a/files/ja/web/api/window/print/index.html b/files/ja/web/api/window/print/index.html new file mode 100644 index 0000000000..691c4d3961 --- /dev/null +++ b/files/ja/web/api/window/print/index.html @@ -0,0 +1,24 @@ +--- +title: window.print +slug: Web/API/Window/print +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Window/print +--- +<div> + {{ApiRef()}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>現在の文書を印刷するための印刷ダイアログを開きます。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.print()</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0()}}</p> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li><a href="/ja/docs/Printing" title="Printing">Printing</a></li> + <li>{{domxref("window.onbeforeprint")}}</li> + <li>{{domxref("window.onafterprint")}}</li> +</ul> diff --git a/files/ja/web/api/window/prompt/index.html b/files/ja/web/api/window/prompt/index.html new file mode 100644 index 0000000000..d9b98d4394 --- /dev/null +++ b/files/ja/web/api/window/prompt/index.html @@ -0,0 +1,61 @@ +--- +title: window.prompt +slug: Web/API/Window/prompt +tags: + - DOM + - Gecko +translation_of: Web/API/Window/prompt +--- +<div>{{ApiRef()}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ユーザにテキストを入力することを促すメッセージを持つダイアログを表示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><code><var>result</var> = window.prompt( <em>text</em>, <em>value</em> );</code></pre> + +<ul> + <li><code>result</code> は、ユーザによって入力されたテキストを含む文字列、または、<code>null</code> 値です。</li> + <li><code>text</code> は、ユーザに表示するテキストの文字列です。</li> + <li><code>value</code> は、テキスト入力フィールド内に表示されるデフォルト値を含む文字列です。この引数は、オプションです。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">var sign = prompt("What's your sign?"); + +if (sign.toLowerCase() == "scorpio") alert("Wow! I'm a Scorpio too!"); + +// プロンプトの使い方には色々なものがあります。 +var sign = window.prompt(); // 空のプロンプトを表示 +var sign = prompt(); // 同上 +var sign = window.prompt("元気にしてる ?"); // 「元気にしてる ?」の文字列入りで表示 +var sign = window.prompt("元気にしてる ?", "元気だよ !"); // 「元気にしてる ?」 の文字列入りで、入力欄の初期値に「元気だよ !」を設定して表示</pre> + +<p>ユーザが OK ボタンをクリックすると、入力フィールドに入力されたテキストが返ります。ユーザがテキストを入力せずに OK をクリックする場合、空文字列が返ります。ユーザがキャンセルボタンをクリックする場合、この関数は、null を返します。</p> + +<p>上記例のプロンプトは次の様に表示されます(※ Chrome on Windows 7)</p> + +<p><img src="https://lh4.googleusercontent.com/-uDx7r8y4tV8/UKv_PjG163I/AAAAAAAAHd0/Arwk0l4cpq0/s362/Prompt_Chrome_Windows7.png" style="width: 362px;"></p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>プロンプトダイアログは、単一の行のテキストボックス、キャンセルボタン、OK ボタンを含み、ユーザがテキストボックスに入力した（空の可能性もある）テキストを返します。</p> + + +<p>Chrome のコード（拡張機能など）では、<a href="/ja/docs/NsIPromptService" title="NsIPromptService"><code>nsIPromptService</code></a> メソッドを代わりに使うべきです。</p> + +<p>Safari では、<code>window.prompt</code> をキャンセルした場合の戻り値が空文字であるため、テキストボックス内に何も入力されていない場合との差別化をはかることができませんので、注意して使うべきです。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>{{dom0()}}</p> + +<h2 id="See also" name="See also">関連情報</h2> + +<ul> + <li>{{domxref("window.alert")}}</li> + <li>{{domxref("window.confirm")}}</li> +</ul> diff --git a/files/ja/web/api/window/rejectionhandled_event/index.html b/files/ja/web/api/window/rejectionhandled_event/index.html new file mode 100644 index 0000000000..d671cbfeef --- /dev/null +++ b/files/ja/web/api/window/rejectionhandled_event/index.html @@ -0,0 +1,86 @@ +--- +title: 'Window: rejectionhandled イベント' +slug: Web/API/Window/rejectionhandled_event +tags: + - API + - Event + - HTML DOM + - JavaScript + - Promise + - Promises + - Reference + - Window + - Worker + - global + - onrejectionhandled + - rejectionhandled + - イベント +translation_of: Web/API/Window/rejectionhandled_event +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>rejectionhandled</code></strong> イベントは、 JavaScript の {{jsxref("Promise")}} が拒絶されたものの、その後で Promise の拒絶が処理された場合にスクリプトのグローバルスコープ (ふつうは {{domxref("window")}} だが {{domxref("Worker")}} の場合もある) に送られます。</span>これは、 Promise が拒絶されたが拒絶の手助けがないときに送信される {{domxref("Window.unhandledrejection_event", "unhandledrejection")}} イベントと並行して、デバッグや一般的なアプリケーションの回復に使用できます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル可能</th> + <td>いいえ</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PromiseRejectionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<p><code>rejectionhandled</code> イベントを使用して、拒絶された Promise を、拒絶された理由を添えてコンソールに出力することができます。</p> + +<pre class="brush: js">window.addEventListener("rejectionhandled", event => { + console.log("Promise rejected; reason: " + event.reason); +}, false); +</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('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</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.Window.rejectionhandled_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SectionOnPage("/ja/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li> + <li>{{domxref("PromiseRejectionEvent")}}</li> + <li>{{jsxref("Promise")}}</li> + <li>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</li> +</ul> diff --git a/files/ja/web/api/window/releaseevents/index.html b/files/ja/web/api/window/releaseevents/index.html new file mode 100644 index 0000000000..3aff175902 --- /dev/null +++ b/files/ja/web/api/window/releaseevents/index.html @@ -0,0 +1,42 @@ +--- +title: window.releaseEvents +slug: Web/API/Window/releaseEvents +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/releaseEvents +--- +<p> </p> +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>{{ Obsolete_header() }} 指定したタイプのイベントを補足することを解除します。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval">window.releaseEvents(<i>eventType</i>) +</pre> +<p><code>eventType</code> は、次の値の組み合わせを取ります。: <code>Event.ABORT</code>, <code>Event.BLUR</code>, <code>Event.CLICK</code>, <code>Event.CHANGE</code>, <code>Event.DBLCLICK</code>, <code>Event.DRAGDDROP</code>, <code>Event.ERROR</code>, <code>Event.FOCUS</code>, <code>Event.KEYDOWN</code>, <code>Event.KEYPRESS</code>, <code>Event.KEYUP</code>, <code>Event.LOAD</code>, <code>Event.MOUSEDOWN</code>, <code>Event.MOUSEMOVE</code>, <code>Event.MOUSEOUT</code>, <code>Event.MOUSEOVER</code>, <code>Event.MOUSEUP</code>, <code>Event.MOVE</code>, <code>Event.RESET</code>, <code>Event.RESIZE</code>, <code>Event.SELECT</code>, <code>Event.SUBMIT</code>, <code>Event.UNLOAD</code>.</p> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre class="eval">window.releaseEvents(Event.KEYPRESS) +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<div class="note"> + <p>W3C DOM Events メソッドを支持するにあたり、このメソッドは Gecko 1.9 では廃止されました（<a href="ja/DOM/element.addEventListener">addEventListener</a> を参照してください）。このメソッドのサポートは <a href="ja/Gecko">Gecko</a> 1.9 で <a href="ja/Gecko_1.9_Changes_affecting_websites">削除されました</a>。</p> +</div> +<p>注：次の構文を使用することでこのメソッドにイベントのリストを渡すことができます。</p> +<dl> + <dd> + window.releaseEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP).</dd> +</dl> +<p><a href="ja/DOM/window.captureEvents">window.captureEvents</a> も参照してください ({{ Obsolete_inline() }})。</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/window.releaseEvents", "pl": "pl/DOM/window.releaseEvents" } ) }}</p> diff --git a/files/ja/web/api/window/requestanimationframe/index.html b/files/ja/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..5bd58aea29 --- /dev/null +++ b/files/ja/web/api/window/requestanimationframe/index.html @@ -0,0 +1,112 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +tags: + - API + - Animations + - DOM + - DOM Reference + - Drawing + - Games + - Graphics + - Intermediate + - JavaScript timers + - Method + - Performance + - Reference + - Scheduling + - Window + - requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +<div>{{APIRef}}</div> + +<p><strong><code>window.requestAnimationFrame()</code></strong> メソッドは、ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。</p> + +<div class="note"><strong>メモ:</strong> 次の再描画時に別のフレームをアニメーションさせたいときは、コールバックルーチン自身で <code>requestAnimationFrame()</code> を呼ばなければなりません。</div> + +<p>このメソッドは、いつでも画面上でアニメーションの更新準備が整った時に呼び出してください。これにより、ブラウザの次の再描画が実行される前にアニメーション関数が呼び出されることを要求します。このコールバックの回数は、たいてい毎秒 60 回ですが、一般的に多くのブラウザーでは W3C の勧告に従って、ディスプレイのリフレッシュレートに合わせて行われます。ただし、コールバックの確率は、バックグラウンドのタブや隠れた {{ HTMLElement("iframe") }} では、パフォーマンス向上やバッテリー消費を減らすために低くなるでしょう。</p> + +<p>コールバックメソッドには、1 個の引数 {{domxref("DOMHighResTimeStamp")}} が渡されます。これは、<code>requestAnimationFrame</code> の発火開始によりコールバックがキューに追加された時点の現在時刻を示します。単一フレーム内で複数のコールバックがあり、前のコールバックで計算負荷が生じていいても、各コールバックは同じタイムスタンプを受け取ります。このタイムスタンプは、ミリ秒単位の十進数ですが、その最小精度は 1ms (1000 µs) です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.requestAnimationFrame(callback); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>次の再描画でアニメーションを更新する時に呼び出す関数を指定します。コールバック関数は 1 個の引数 {{domxref("DOMHighResTimeStamp")}} を受け取ります。この引数は、<code>requestAnimationFrame</code> がコールバックの呼び出しを開始した現在時刻 ( {{domxref('performance.now()')}} から返された時刻 ) を示します。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>コールバックリスト内のエントリーを一意に識別するための、倍精度整数値の <code>requestID</code> を返します。この値は非ゼロ値ですが、値そのものを推定することはできないでしょう。この値を {{domxref("window.cancelAnimationFrame()")}} に渡すことで、コールバック関数の更新を中止できます。</p> + +<h2 id="Notes" name="Notes">例</h2> + +<pre class="brush: js">var start = null; +var element = document.getElementById('SomeElementYouWantToAnimate'); + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)'; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step); +</pre> + +<h2 id="Notes_2" name="Notes_2">メモ</h2> + +<p>Edge のバージョン17以前と Internet Explorer は、描画サイクルの前に <code>requestAnimationFrame</code> を確実に発行するとは限りません。</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', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>変更なし、以前のものを置き換える</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>初回定義</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.Window.requestAnimationFrame")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Window.mozAnimationStartTime")}}</li> + <li>{{domxref("Window.cancelAnimationFrame()")}}</li> + <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - ブログ投稿</li> + <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - ブログ投稿</li> + <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - ブログ投稿</li> + <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - ブログ投稿</li> + <li><a href="http://www.testufo.com/#test=animation-time-graph" title="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li> + <li>Paul Irish: <a class="external external-icon" href="http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision">requestAnimationFrame API: now with sub-millisecond precision</a></li> +</ul> diff --git a/files/ja/web/api/window/requestidlecallback/index.html b/files/ja/web/api/window/requestidlecallback/index.html new file mode 100644 index 0000000000..9e45f49a13 --- /dev/null +++ b/files/ja/web/api/window/requestidlecallback/index.html @@ -0,0 +1,74 @@ +--- +title: requestIdleCallback +slug: Web/API/Window/requestIdleCallback +tags: + - API + - HTML DOM + - JavaScript timer + - Reference + - Window +translation_of: Web/API/Window/requestIdleCallback +--- +<p>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</p> + +<p><strong><code>window.requestIdleCallback()</code></strong> メソッドを利用すると、ブラウザーがアイドル状態の時に実行される関数をキューに登録できます。これにより、アニメーションや入力への応答など、遅延が問題となる処理に影響を与えることなく、優先度の低いバックグラウンド処理をメインスレッド内で実行させられます。キューに登録された関数は、関数登録時に設定したタイムアウト時間（<code>timeout</code>）に達していない限り、登録順に呼び出されます。</p> + +<p><code>requestIdleCallback()</code> をアイドルコールバック関数からコールし、次のイベントループ以降で実行されるようにスケジュールもできます。</p> + +<div class="note"><code>timeout</code> は必須のタスクにおいては設定することを強くおすすめします。設定しない場合、コールバックが実行するまでに数秒かかってしまう可能性もあるからです。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code>var <em>handle</em> = <em>window</em>.requestIdleCallback(<em>callback</em>[, <em>options</em>])</code></pre> + +<h3 id="Returns" name="Returns">返り値</h3> + +<p>{{domxref("Window.cancelIdleCallback()")}} メソッドで、実行をキャンセルする際に使用するIDを返します。</p> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>イベントループがアイドル状態のときに実行したい関数への参照。コールバック関数には {{domxref("IdleDeadline")}} オブジェクトが渡されます。これはアイドル状態の際に余っている時間と、コールバックが実行されたかされていないかを示します。コールバックの実行有無は、タイムアウト期間が終了してしまったかどうかに左右されます。</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>任意の設定パラメータです。現在はひとつのプロパティのみ定義されています。 + <ul> + <li><code>timeout</code>：<code>timeout</code> に正の値が指定され、かつコールバックがその値の期間（ミリ秒）内に実行されていない場合、コールバックは次のアイドル期間に実行されます。それがパフォーマンスに悪影響があったとしても、それを加味することはありません。</li> + </ul> + </dd> +</dl> + +<h2 id="Example" name="Example">Example</h2> + +<p><a href="/ja/docs/Web/API/Background_Tasks_API">Cooperative Scheduling of Background Tasks API</a>の記事で、<a href="/ja/docs/Web/API/Background_Tasks_API#Example">例を一式</a>紹介しています。</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様</th> + <th>状態</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName('Background Tasks')}}</td> + <td>{{Spec2('Background Tasks')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2> + +<p>{{Compat("api.Window.requestIdleCallback")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("window.cancelIdleCallback()")}}</li> + <li>{{domxref("IdleDeadline")}}</li> + <li>{{domxref("window.setTimeout()")}}</li> + <li>{{domxref("window.setInterval()")}}</li> + <li>{{domxref("window.requestAnimationFrame")}}</li> +</ul> diff --git a/files/ja/web/api/window/resizeby/index.html b/files/ja/web/api/window/resizeby/index.html new file mode 100644 index 0000000000..43e86c4422 --- /dev/null +++ b/files/ja/web/api/window/resizeby/index.html @@ -0,0 +1,38 @@ +--- +title: window.resizeBy +slug: Web/API/Window/resizeBy +tags: + - DOM + - DOM Reference + - DOM_0 + - Window +translation_of: Web/API/Window/resizeBy +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>現在のウィンドウを特定の量だけリサイズします。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.resizeBy(<em>xDelta</em>, <em>yDelta</em>) +</pre> +<h3 id="Parameters" name="Parameters">引数</h3> +<ul> + <li><code>xDelta</code> : ウィンドウの水平方向へのリサイズ量 (ピクセル値)</li> + <li><code>yDelta</code> : ウィンドウの垂直方向へのリサイズ量 (ピクセル値)</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">// ウィンドウを縮める +window.resizeBy(-200, -200); +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>Firefox 7 より、Web サイトは<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">以下の規則</a>に従う場合のみしかブラウザウィンドウの初期サイズを変更する事が出来なくなりました。</p> +<ol> + <li><code>window.open</code> で作成されたウィンドウ（またはタブ）しかリサイズ出来ません。</li> + <li>ウィンドウが複数のタブを持つ場合、ウィンドウ（またはタブ）のリサイズは出来ません。</li> +</ol> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{dom0}}</p> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("window.resizeTo")}}</li> +</ul> diff --git a/files/ja/web/api/window/resizeto/index.html b/files/ja/web/api/window/resizeto/index.html new file mode 100644 index 0000000000..b67f73b9d5 --- /dev/null +++ b/files/ja/web/api/window/resizeto/index.html @@ -0,0 +1,42 @@ +--- +title: window.resizeTo +slug: Web/API/Window/resizeTo +tags: + - DOM + - DOM Reference + - DOM_0 + - Window +translation_of: Web/API/Window/resizeTo +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ウィンドウサイズを動的に変更します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.resizeTo(<em>iWidth</em>, <em>iHeight</em>) +</pre> +<h3 id="Parameters" name="Parameters">引数</h3> +<ul> + <li><code>iWidth</code> : 新しい {{domxref("window.outerWidth","outerWidth")}} を表す整数値 (ピクセル値。スクロールバー、タイトルバー等を含む。)</li> + <li><code>iHeight</code> : 新しい {{domxref("window.outerHeight","outerHeight")}} を表す整数値 (ピクセル値。スクロールバー、タイトルバー等を含む。)</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">// ウィンドウサイズの縦尺および横尺を半分に (面積を 4 分の 1 に) する関数 +function quarter() { + window.resizeTo( + window.screen.availWidth / 2, + window.screen.availHeight / 2 + ); +}</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>Firefox 7 より、Web サイトは<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=565541#c24">以下の規則</a>に従う場合のみしかブラウザウィンドウの初期サイズを変更する事が出来なくなりました。</p> +<ol> + <li><code>window.open</code> で作成されたウィンドウ（またはタブ）しかリサイズ出来ません。</li> + <li>ウィンドウが複数のタブを持つ場合、ウィンドウ（またはタブ）のリサイズは出来ません。</li> +</ol> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{dom0}}</p> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("window.resizeBy")}}</li> +</ul> diff --git a/files/ja/web/api/window/restore/index.html b/files/ja/web/api/window/restore/index.html new file mode 100644 index 0000000000..3fbd8503f2 --- /dev/null +++ b/files/ja/web/api/window/restore/index.html @@ -0,0 +1,10 @@ +--- +title: Window.restore() +slug: Web/API/Window/restore +translation_of: Web/API/Window/moveTo +--- +<p>{{APIRef}}</p> + +<p>このメソッドは現在動作していませんが、代わりに次のメソッドを利用することができます:</p> + +<p>window.moveTo(window.screenX, window.screenY);</p> diff --git a/files/ja/web/api/window/screen/index.html b/files/ja/web/api/window/screen/index.html new file mode 100644 index 0000000000..a78bf0e563 --- /dev/null +++ b/files/ja/web/api/window/screen/index.html @@ -0,0 +1,52 @@ +--- +title: Window.screen +slug: Web/API/Window/screen +tags: + - API + - CSSOM View + - HTML DOM + - Property + - Window +translation_of: Web/API/Window/screen +--- +<p>{{APIRef("CSSOM")}}</p> + +<p>{{DOMxRef("Window")}} の <strong><code>screen</code></strong> プロパティは、ウィンドウに関連付けられた画面オブジェクトへの参照を返します。 <code>screen</code> オブジェクトは {{DOMxRef("Screen")}} インターフェースを実装しており、現在のウィンドウがレンダリングされている画面のプロパティを検査するための特別なオブジェクトです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let <var>screenObj</var> = <var>window</var>.screen;</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js; notranslate">if (screen.pixelDepth < 8) { + // use low-color version of page +} else { + // use regular, colorful page +} +</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('CSSOM View', '#dom-window-screen', 'window.screen')}}</td> + <td>{{Spec2('CSSOM View')}}</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.Window.screen")}}</p> diff --git a/files/ja/web/api/window/screenx/index.html b/files/ja/web/api/window/screenx/index.html new file mode 100644 index 0000000000..01ad72c62b --- /dev/null +++ b/files/ja/web/api/window/screenx/index.html @@ -0,0 +1,29 @@ +--- +title: window.screenX +slug: Web/API/Window/screenX +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/screenX +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>画面の左端からユーザのブラウザの左端までの水平距離を返します。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>lLoc</i> = window.screenX +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E6.88.BB.E3.82.8A.E5.80.A4" name=".E6.88.BB.E3.82.8A.E5.80.A4">戻り値</h3> +<ul> + <li><code>lLoc</code> は、画面の左端からのピクセル数です。</li> +</ul> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p><a href="ja/Window.screenY">window.screenY</a> も参照してください。</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/screeny/index.html b/files/ja/web/api/window/screeny/index.html new file mode 100644 index 0000000000..727b447443 --- /dev/null +++ b/files/ja/web/api/window/screeny/index.html @@ -0,0 +1,29 @@ +--- +title: window.screenY +slug: Web/API/Window/screenY +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/screenY +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>画面の上端からユーザのブラウザの上端までの垂直距離を返します。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>lLoc</i> = window.screenY +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E6.88.BB.E3.82.8A.E5.80.A4" name=".E6.88.BB.E3.82.8A.E5.80.A4">戻り値</h3> +<ul> + <li><code>lLoc</code> は、画面の上からのピクセル数です。</li> +</ul> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p><a href="ja/DOM/window.screenX">window.screenX</a> も参照してください。</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/scroll/index.html b/files/ja/web/api/window/scroll/index.html new file mode 100644 index 0000000000..6bc2c589e8 --- /dev/null +++ b/files/ja/web/api/window/scroll/index.html @@ -0,0 +1,82 @@ +--- +title: window.scroll +slug: Web/API/Window/scroll +tags: + - CSSOM View + - DOM +translation_of: Web/API/Window/scroll +--- +<p>{{ApiRef}}</p> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>ウィンドウを文書内の特定の位置までスクロールします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.scroll(<em>x-coord</em>,<em>y-coord)</em> +window.scroll(options) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>x-coord</code> : 左上を基準とした、表示させたい文書の水平軸上のピクセル</li> + <li><code>y-coord</code> : 左上を基準とした、表示させたい文書の垂直軸上のピクセル</li> +</ul> + +<p>または</p> + +<ul> + <li><code>options</code> : 三つのプロパティを持たせられるオブジェクト + + <ul> + <li><code>top</code> <code>y-coord</code> と同じです</li> + <li><code>left</code> <code>x-coord</code> と同じです<code> </code></li> + <li><code>behavior</code> <code>smooth</code>、 <code>instant</code>、 <code>auto</code> のうちどれか一つを含む文字列。初期値は <code>auto</code> です</li> + </ul> + </li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html"><!-- 100 個目の垂直ピクセル上にウィンドウの最上部を配置します。 --> + +<button onClick="scroll(0, 100);">click to scroll down 100 pixels</button> +</pre> + +<h4 id="スクロールの動作を変更する">スクロールの動作を変更する</h4> + +<p>スクロールの仕方を変えたいなら、options で指定してください</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">window<span class="punctuation token">.</span><span class="function token">scroll</span><span class="punctuation token">(</span><span class="punctuation token">{</span> + top<span class="punctuation token">:</span> <span class="number token">1000</span><span class="punctuation token">,</span> + behavior<span class="punctuation token">:</span> <span class="string token">"smooth"</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>効果としては、 {{domxref("window.scrollTo")}} もこのメソッドと同じです。 繰り返し特定の距離をスクロールさせるには {{domxref("window.scrollBy")}} を使用してください。</p> + +<p>次のページもご覧下さい : {{domxref("window.scrollByLines")}} 、 {{domxref("window.scrollByPages")}} 、 {{domxref("Element.scrollIntoView()")}}</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="standard-table" style="height: 129px; width: 1675px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td> + <td>{{ Spec2('CSSOM View') }}</td> + <td> + <p>Initial definition.</p> + </td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/api/window/scrollbars/index.html b/files/ja/web/api/window/scrollbars/index.html new file mode 100644 index 0000000000..3ad2ce63e5 --- /dev/null +++ b/files/ja/web/api/window/scrollbars/index.html @@ -0,0 +1,70 @@ +--- +title: window.scrollbars +slug: Web/API/Window/scrollbars +tags: + - Gecko + - HTML DOM + - Window +translation_of: Web/API/Window/scrollbars +--- +<div>{{ApiRef}}</div> + +<h2 id="概要">概要</h2> + +<p>scrollbars オブジェクトを返します。このバーの表示は、ウィンドウ内でトグル（表示/非表示の状態を切り替える）ことができます。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><em>objRef</em> = window.scrollbars +</pre> + +<h2 id="例">例</h2> + +<p>以下の完全な HTML の例は、様々な "bar" オブジェクトの visible プロパティで利用可能な方法を示しています。</p> + +<pre class="brush:html"><DOCTYPE html> +<html lang="ja"> +<head> +<meta charset="UTF-8" /> +<title>様々な DOM テスト</title> + +<script> +// 存在するウィンドウのバーの状態を変更します +netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite"); +window.scrollbars.visible = !window.scrollbars.visible; +</script> + +</head> +<body> + <p>様々な DOM テスト</p> +</body> +</html> +</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', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/DOM/window.locationbar">window.locationbar</a> 、 <a href="/ja/docs/DOM/window.menubar">window.menubar</a> 、 <a href="/ja/docs/DOM/window.personalbar">window.personalbar</a> 、 <a href="/ja/docs/DOM/window.statusbar">window.statusbar</a> 、 <a href="/ja/docs/DOM/window.toolbar">window.toolbar</a></li> +</ul> diff --git a/files/ja/web/api/window/scrollby/index.html b/files/ja/web/api/window/scrollby/index.html new file mode 100644 index 0000000000..28b8ea032a --- /dev/null +++ b/files/ja/web/api/window/scrollby/index.html @@ -0,0 +1,66 @@ +--- +title: window.scrollBy +slug: Web/API/Window/scrollBy +tags: + - API + - CSSOM View + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Method + - Reference + - Window +translation_of: Web/API/Window/scrollBy +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>指定された量だけウィンドウ内の文書をスクロールします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">window.scrollBy(<em>X</em>,<em>Y</em>); +window.scrollBy(<var>options</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>x-coord</var></code> は、左上に表示されたい文書の水平軸上のピクセルです。</li> + <li><code><var>y-coord</var></code> は、左上に表示されたい文書の垂直軸上のピクセルです。</li> +</ul> + +<p>- または -</p> + +<ul> + <li><code><var>options</var></code> は {{domxref("ScrollToOptions")}} 辞書です。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>1ページ下スクロールの例:</p> + +<pre class="eval notranslate">window.scrollBy(0, window.innerHeight); +</pre> + +<p>上スクロールの例:</p> + +<pre class="notranslate">window.scrollBy(0, -window.innerHeight);</pre> + +<p><code>options</code> の使用例:</p> + +<pre class="notranslate">window.scrollBy({ + top: 100, + left: 100, + behavior: 'smooth' +});</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>{{domxref("window.scrollBy")}} は、指定量のスクロール、 {{domxref("window.scroll")}} は、文書の絶対座標へのスクロールです。 {{domxref("window.scrollByLines")}} 、{{domxref("window.scrollByPages")}} も参照してください。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/scrollbylines/index.html b/files/ja/web/api/window/scrollbylines/index.html new file mode 100644 index 0000000000..c510a70844 --- /dev/null +++ b/files/ja/web/api/window/scrollbylines/index.html @@ -0,0 +1,38 @@ +--- +title: window.scrollByLines +slug: Web/API/Window/scrollByLines +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/scrollByLines +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>指定した行分文書をスクロールします。 {{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval">window.scrollByLines(<i>lines</i>) +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3> +<ul> + <li><code>lines</code> は、文書をスクロールする行数です。</li> +</ul> +<ul> + <li><code>lines</code> は、正、または、負の整数です。</li> +</ul> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre class="eval">// 5 行分文書をスクロールダウンします。 +<button onclick="scrollByLines(5);">down 5 lines</button> +</pre> +<pre class="eval">// 5 行分文書をスクロールアップします。 +<button onclick="scrollByLines(-5);">up 5 lines</button> +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>{{domxref("window.scrollBy")}}、{{domxref("window.scrollByPages")}} も参照してください。 {{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/scrollbypages/index.html b/files/ja/web/api/window/scrollbypages/index.html new file mode 100644 index 0000000000..3e76e6bed6 --- /dev/null +++ b/files/ja/web/api/window/scrollbypages/index.html @@ -0,0 +1,38 @@ +--- +title: window.scrollByPages +slug: Web/API/Window/scrollByPages +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window + - 要更新 +translation_of: Web/API/Window/scrollByPages +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>指定したページ分文書をスクロールします。 {{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval">window.scrollByPages(<i>pages</i>) +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3> +<ul> + <li><code>pages</code> は、スクロールするページ数です。</li> + <li><code>pages</code> は、正、あるいは、負の整数です。</li> +</ul> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre>// 1 ページ分文書をスクロールダウンします。 +window.scrollByPages(1); + +// 1 ページ分文書をスクロールアップします。 +window.scrollByPages(-1); +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>{{domxref("window.scrollBy")}}、{{domxref("window.scrollByLines")}}、{{domxref("window.scroll")}}、{{domxref("window.scrollTo")}}<br> + も参照してください。 {{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/scrollmaxx/index.html b/files/ja/web/api/window/scrollmaxx/index.html new file mode 100644 index 0000000000..243cd07ab8 --- /dev/null +++ b/files/ja/web/api/window/scrollmaxx/index.html @@ -0,0 +1,37 @@ +--- +title: window.scrollMaxX +slug: Web/API/Window/scrollMaxX +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Window/scrollMaxX +--- +<p>{{ ApiRef() }}</p> +<p>{{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>文書が水平スクロールされ得る最大ピクセル数を返します。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>xpix</i> = window.scrollMaxX +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3> +<ul> + <li><code>xpix</code> は、ピクセル数です。</li> +</ul> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre>// ページの右端までスクロールします。 + var maxX = window.scrollMaxX; + window.scrollTo(maxX, 0); +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>このプロパティは、文書の幅の合計を取得するために使用してください。文書の幅の合計は、<a href="ja/DOM/window.innerWidth">window.innerWidth</a> + window.scrollMaxX と同等です。</p> +<p><a href="ja/DOM/window.scrollMaxY">window.scrollMaxY</a> も参照してください。</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/scrollmaxy/index.html b/files/ja/web/api/window/scrollmaxy/index.html new file mode 100644 index 0000000000..5f8cf61308 --- /dev/null +++ b/files/ja/web/api/window/scrollmaxy/index.html @@ -0,0 +1,38 @@ +--- +title: window.scrollMaxY +slug: Web/API/Window/scrollMaxY +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window + - 要更新 +translation_of: Web/API/Window/scrollMaxY +--- +<p>{{ ApiRef() }}</p> +<p>{{ 英語版章題("Summary") }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>文書が垂直スクロールされ得る最大ピクセル数を返します。</p> +<p>{{ 英語版章題("Syntax") }}</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>ypix</i> = window.scrollMaxY +</pre> +<p>{{ 英語版章題("Parameters") }}</p> +<h3 id=".E6.88.BB.E3.82.8A.E5.80.A4" name=".E6.88.BB.E3.82.8A.E5.80.A4">戻り値</h3> +<ul> + <li><code>ypix</code> は、ピクセル数です。</li> +</ul> +<p>{{ 英語版章題("Example") }}</p> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<pre>// ページの最下部までスクロールします。 + var maxY = window.scrollMaxY; + window.scrollTo(0,maxY); +</pre> +<p>{{ 英語版章題("Notes") }}</p> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>このプロパティは、文書の高さの合計を取得するために使用してください。文書の高さの合計は、<a href="ja/DOM/window.innerHeight">window.innerHeight</a> + window.scrollMaxY と同等です。</p> +<p><a href="ja/DOM/window.scrollMaxX">window.scrollMaxX</a> と <a href="ja/DOM/window.scrollTo">window.scrollTo</a> も参照してください。</p> +<p>{{ 英語版章題("Specification") }}</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p>{{ DOM0() }}</p> diff --git a/files/ja/web/api/window/scrollto/index.html b/files/ja/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..fb80f7819e --- /dev/null +++ b/files/ja/web/api/window/scrollto/index.html @@ -0,0 +1,77 @@ +--- +title: window.scrollTo +slug: Web/API/Window/scrollTo +tags: + - API + - CSSOM View + - Method + - NeedsMarkupWork + - Reference +translation_of: Web/API/Window/scrollTo +--- +<p>{{APIRef}}</p> + +<p><strong><code>Window.scrollTo()</code></strong> は文書内の特定の組み合わせの座標までスクロールします。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">window.scrollTo(<var>x-coord</var>, <var>y-coord</var>) +window.scrollTo(<var>options</var>) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code><var>x-coord</var></code> は、左上に表示されたい文書の水平軸上のピクセルです。</li> + <li><code><var>y-coord</var></code> は、左上に表示されたい文書の垂直軸上のピクセルです。</li> +</ul> + +<p>- または -</p> + +<ul> + <li><code><var>options</var></code> は {{domxref("ScrollToOptions")}} 辞書です。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush:js notranslate">window.scrollTo(0, 1000); +</pre> + +<p><code><var>options</var></code> の使用例:</p> + +<pre class="brush: js notranslate">window.scrollTo({ + top: 100, + left: 100, + behavior: 'smooth' +});</pre> + +<h2 id="Notes" name="Notes">注</h2> + +<p>{{domxref("Window.scroll()")}} はこのメソッドとほぼ同じです。相対スクロールについては、 {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}}, {{domxref("Window.scrollByPages()")}} を参照してください。</p> + +<p>要素をスクロールするには、 {{domxref("Element.scrollTop")}} および {{domxref("Element.scrollLeft")}} を参照してください。</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('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}</td> + <td>{{ Spec2('CSSOM View') }}</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.Window.scrollTo")}}</p> diff --git a/files/ja/web/api/window/scrollx/index.html b/files/ja/web/api/window/scrollx/index.html new file mode 100644 index 0000000000..94852e3996 --- /dev/null +++ b/files/ja/web/api/window/scrollx/index.html @@ -0,0 +1,157 @@ +--- +title: window.scrollX +slug: Web/API/Window/scrollX +tags: + - API + - CSSOM View + - Property + - Reference +translation_of: Web/API/Window/scrollX +--- +<div>{{APIRef("CSSOM View")}}</div> + +<p>{{domxref("Window")}} インターフェイスの読み取り専用プロパティである <code><strong>scrollX</strong></code> は、文書が水平スクロールされているピクセル数を返します。現代のブラウザーではこの値がサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が垂直スクロールされているピクセル数は、{{domxref("Window.scrollY", "scrollY")}} プロパティで取得できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var x = window.scrollX;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>実際に返される値は、文書が原点から水平方向にスクロールされた量をピクセル数で表す倍精度浮動小数点数です。正の値は、内容物が左にスクロールされていることを表します。文書がサブピクセル精度のデバイスに表示されている場合は、戻り値も小数部を含むサブピクセル精度の値になります。文書が左にも右にもスクロールされていない場合の <code>scrollX</code> は 0 です。</p> + +<div class="note"> +<p>整数値が必要である場合は、{{jsxref("Math.round()")}} を使用して切り捨てできます。</p> +</div> + +<p>専門用語で説明すると <code>scrollX</code> は、現在の {{Glossary("viewport", "ビューポート")}} の左端の X 座標を返します。ビューポートがない場合の戻り値は 0 です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>これは、文書の現在の水平スクロール位置を確認する例です。400 ピクセルより大きい場合は、文書の左上にスクロール位置をリセットします。</p> + +<pre class="brush:js">if (window.scrollX > 400) { + window.scroll(0,0); +}</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p><code>pageXOffset</code> プロパティは、<code>scrollX</code> プロパティのエイリアスです。:</p> + +<pre class="brush:js">window.pageXOffset == window.scrollX; // 常に true</pre> + +<p>クロスブラウザー互換性のため、<code>window.scrollX</code> ではなく <code>window.pageXOffset</code> を使用します。<em>さらに</em>、古いバージョンの Internet Explorer (IE9 以前) はいずれもサポートしていないため、チェックの上、なければ他の非標準の方法で回避する必要があります。以下に互換性を確保した例を示します。</p> + +<pre class="brush:js">var x = (window.pageXOffset !== undefined) + ? window.pageXOffset + : (document.documentElement || document.body.parentNode || document.body).scrollLeft; + +var y = (window.pageYOffset !== undefined) + ? window.pageYOffset + : (document.documentElement || document.body.parentNode || document.body).scrollTop;</pre> + +<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('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}</td> + <td>{{ Spec2('CSSOM View') }}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>サブピクセル精度</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Android 版 Chrome</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>サブピクセル精度</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.scrollY")}}</li> +</ul> diff --git a/files/ja/web/api/window/scrolly/index.html b/files/ja/web/api/window/scrolly/index.html new file mode 100644 index 0000000000..85195fc8bd --- /dev/null +++ b/files/ja/web/api/window/scrolly/index.html @@ -0,0 +1,87 @@ +--- +title: window.scrollY +slug: Web/API/Window/scrollY +tags: + - API + - CSSOM View + - Property + - Reference + - Window + - scrollY + - プロパティ +translation_of: Web/API/Window/scrollY +--- +<div>{{APIRef("CSSOM View")}}</div> + +<p><span class="seoSummary">{{domxref("Window")}} インターフェイスの読み取り専用プロパティである <code><strong>scrollY</strong></code> は、文書が現在垂直方向にスクロールしているピクセル数を返します。</span>最近のブラウザーでは、この値はサブピクセル精度ですので、必ずしも整数であるとは限りません。文書が水平方向にスクロールしているピクセル数は {{domxref("Window.scrollX", "scrollX")}} プロパティで取得できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var y = window.scrollY</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>実際に返される値は、文書が原点から垂直方向にスクロールした量をピクセル数で表す倍精度浮動小数点値であり、正の値は、内容物が上にスクロールしていることを表します。文書がサブピクセル精度の端末に表示されている場合は、返値も小数部を含むサブピクセル精度の値になります。文書が上にも下にもスクロールしていない場合、 <code>scrollY</code> は 0 になります。</p> + +<div class="note"> +<p>整数値が必要である場合は、 {{jsxref("Math.round()")}} を使用して四捨五入してください。</p> +</div> + +<p>専門用語で説明すると <code>scrollY</code> は、現在の {{Glossary("viewport", "ビューポート")}} の上端の Y 座標を返します。ビューポートがない場合の戻り値は 0 です。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">// スクロールしている場合、戻してから次のページへスクロールダウン +if (window.scrollY) { + window.scroll(0, 0); //文書の左上にスクロール位置をリセット +} + +window.scrollByPages(1);</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>{{domxref("window.scrollBy", "scrollBy()")}}、{{domxref("window.scrollByLines", "scrollByLines()")}}、{{domxref("window.scrollByPages", "scrollByPages()")}} のような相対スクロールする関数を使用する際に、文書がすでにスクロールしていないかをチェックするためにこのプロパティを使用してください。</p> + +<p><code>pageYOffset</code> プロパティは、<code>scrollY</code> プロパティのエイリアスです。</p> + +<pre class="brush: js">window.pageYOffset === window.scrollY; // 常に true</pre> + +<p>クロスブラウザー互換性のため、<code>window.scrollY</code> ではなく <code>window.pageYOffset</code> を使用します。<em>さらに</em>、古いバージョンの Internet Explorer (IE9 以前) はいずれもサポートしていないため、チェックの上、なければ他の非標準の方法で回避する必要があります。以下に互換性を確保した例を示します。</p> + +<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined; +var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); + +var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft; +var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop; +</pre> + +<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('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td> + <td>{{ Spec2('CSSOM View') }}</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.Window.scrollY")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("window.scrollX")}}</li> +</ul> diff --git a/files/ja/web/api/window/self/index.html b/files/ja/web/api/window/self/index.html new file mode 100644 index 0000000000..8a884828f3 --- /dev/null +++ b/files/ja/web/api/window/self/index.html @@ -0,0 +1,123 @@ +--- +title: window.self +slug: Web/API/Window/self +tags: + - API + - Gecko + - HTML DOM + - Property + - Read-only + - Reference + - Window +translation_of: Web/API/Window/self +--- +<p>{{ APIRef() }}</p> + +<p><code><strong>Window.self</strong></code> 読み取り専用プロパティは、{{domxref("WindowProxy")}} のように、ウィンドウ自身を返します。<code>window</code> オブジェクトでドット表記法 (つまり、<code>window.self</code>) を使用して使うことも、単独 (<code>self</code>) で使うこともできます。単独表記法を使用する利点は、{{domxref("Worker", "Web Workers")}} のような非 window コンテクストにも同様の表記法が存在することです。<code>self</code> を使用することで、window コンテキスト (<code>self</code> は <code>window.self</code> として解決されます) だけでなく、worker コンテキスト (<code>self</code> は {{domxref("WorkerGlobalScope.self")}} として解決されます) でも機能するようにグローバルスコープを参照できます。</p> + +<h2 id="構文">構文</h2> + +<pre class="eval">var w = window.self; // w === window +</pre> + +<h2 id="例">例</h2> + +<p>次のような <code>window.self</code> の使い方は、<code>window</code> に置き換えることもできます。</p> + +<pre class="brush:js">if (window.parent.frames[0] != window.self) { + // このウィンドウは、一覧における一番最初のフレームではありません。 +}</pre> + +<p>さらに、ブラウジングコンテクストのアクティブなドキュメントで実行するとき、<code>window</code> は現在のグローバルオブジェクトを参照するため、以下のものはすべて等価です:</p> + +<pre class="brush:js">var w1 = window; +var w2 = self; +var w3 = window.window; +var w4 = window.self; +// w1, w2, w3, w4 は厳密に等価、しかし w2 だけは worker で動作します。 +</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', '#dom-self', 'Window.self')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショット {{SpecName("HTML5.1")}} からの変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName("HTML5 W3C")}} からの変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>Window.self</code> の定義を含む最初のスナップショット</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 class="noinclude" id="関連">関連</h2> + +<ul> + <li>この <code>Worker</code> は {{domxref("WorkerGlobalScope.self")}} と等しい。</li> +</ul> diff --git a/files/ja/web/api/window/sessionstorage/index.html b/files/ja/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..426a8e6f18 --- /dev/null +++ b/files/ja/web/api/window/sessionstorage/index.html @@ -0,0 +1,154 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Property + - Reference + - Storage + - WindowSessionStorage + - sessionStorage +translation_of: Web/API/Window/sessionStorage +--- +<p>{{APIRef}}</p> + +<p><code>sessionStorage</code> プロパティで、 session {{domxref("Storage")}} オブジェクトにアクセスできます。sessionStorage は {{domxref("Window.localStorage")}} に似ています。唯一の違いは、localStorage に保存されたデータに期限がないのに対して、sessionStorage に保存されたデータはページのセッションが終了するときに消去されます。ページのセッションはブラウザを開いている限り、ページの再読み込みや復元を越えて持続します。<strong>新しいタブやウィンドウにページを開くと、新しいセッションが開始します。</strong>これは、セッション Cookie の動作とは異なります。</p> + +<p>注意すべき点として、sessionStorage や localStorage <strong>はページのプロトコルに限定されます。</strong></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">// sessionStorage にデータを保存する +sessionStorage.setItem('key', 'value'); + +// sessionStorage に保存したデータを取得する +var data = sessionStorage.getItem('key'); + +// sessionStorage に保存したデータを削除する +sessionStorage.removeItem('key') +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("Storage")}} オブジェクト。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下のスニペットは、現在のドメインのセッション {{domxref("Storage")}} オブジェクトにアクセスして、{{domxref("Storage.setItem()")}} を使用してデータアイテムを追加します。</p> + +<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre> + +<p>以下の例はテキストフィールドの内容を自動的に保存して、ブラウザが意図せず再開されたときに、記入した内容を失わないようにテキストフィールドの内容を復元します。</p> + +<pre class="brush: js">// 追跡するテキストフィールドを取得する +var field = document.getElementById("field"); + +// 自動保存された値があるかを確認する +// (これはページが意図せず再開された場合にのみ存在する) +if (sessionStorage.getItem("autosave")) { + // テキストフィールドの内容を復元する + field.value = sessionStorage.getItem("autosave"); +} + +// テキストフィールドの変更をリッスンする +field.addEventListener("change", function() { + // セッションストレージオブジェクトに結果を保存する + sessionStorage.setItem("autosave", field.value); +});</pre> + +<div class="note"> +<p><strong>注記</strong>: 詳細な使用例は <a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API を使用する</a> の記事を参照してください。</p> +</div> + +<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('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}</td> + <td>{{Spec2('Web Storage')}}</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>localStorage</td> + <td>4</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>{{CompatVersionUnknown}}</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>すべてのブラウザで、localStorage および sessionStorage が受け入れる容量は異なります。<a href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">さまざまなブラウザのストレージ容量を報告しているページ</a>があります。</p> + +<div class="note"> +<p><strong>注記</strong>: iOS 5.1 より Safari Mobile は localStorage データを cache フォルダに保存しており、概して空き容量が少ない場合に OS の要求により、時々クリーンアップを受けます。</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Web Storage API を使用する</a></li> + <li>{{domxref("Window.localStorage")}}</li> +</ul> diff --git a/files/ja/web/api/window/setcursor/index.html b/files/ja/web/api/window/setcursor/index.html new file mode 100644 index 0000000000..ccc60e2ec5 --- /dev/null +++ b/files/ja/web/api/window/setcursor/index.html @@ -0,0 +1,23 @@ +--- +title: window.setCursor +slug: Web/API/Window/setCursor +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/setCursor +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>対象ウィンドウのカーソルを変更します。</p> +<h2 id="Example" name="Example">例</h2> +<pre class="syntaxbox">function setBusyCursor(enable) { + window.setCursor(enable ? "wait" : "auto"); +}</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>カーソルは <code>auto</code> に設定されるまでリセットされません。</p> +<p>これは <a href="/ja/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow">ChromeWindow interface</a> の一部です。 Web ページに於いては使用できません。 Web ページのカーソルを変更するには CSS の {{cssxref("cursor")}} プロパティを用います。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{dom0}}</p> diff --git a/files/ja/web/api/window/showmodaldialog/index.html b/files/ja/web/api/window/showmodaldialog/index.html new file mode 100644 index 0000000000..fc00fabadd --- /dev/null +++ b/files/ja/web/api/window/showmodaldialog/index.html @@ -0,0 +1,99 @@ +--- +title: window.showModalDialog +slug: Web/API/Window/showModalDialog +tags: + - API + - DOM + - Deprecated + - Window +translation_of: Web/API/Window/showModalDialog +--- +<div>{{Fx_minversion_header(3)}} {{obsolete_header}}{{APIRef}}</div> + +<div class="warning"> +<p><strong><em>この機能は削除されました。ウェブサイトやアプリケーションを修正してください</em></strong>。</p> + +<p>このメソッドは Chrome 43 および Firefox 56 で廃止されました。</p> +</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>指定された HTML 文書を含む モーダルダイアログボックスを生成し、表示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>returnVal</var> = window.showModalDialog(<em>uri</em>[,<em>arguments</em>][,<em>options</em>]); +</pre> + +<ul> + <li><code>returnVal</code> は、<code>uri</code> で指定される文書のウィンドウによって設定される returnValue プロパティを示す変数です。</li> + <li><code>uri</code> は、ダイアログボックス中で表示する文書の URI です。</li> + <li><code>arguments</code> は、ダイアログボックスに渡されるべき値を含むオプションの変数です。これらは、<a href="/ja/docs/Web/API/Window"><code>window</code></a> オブジェクトの <a href="/ja/docs/Web/API/window.dialogArguments"><code>window.dialogArguments</code></a> プロパティから取得できるようになります。</li> + <li><code>options</code> は、ダイアログボックスに対するウィンドウの装飾を指定するオプションの文字列です。次の表で示す値を、 1 つまたは複数セミコロンで区切って指定します。</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th>構文</th> + <th>説明</th> + </tr> + <tr> + <td><code>center: {on | off | yes | no | 1 | 0 }</code></td> + <td>この引数の値が <code>on</code>、<code>yes</code>、または、1 である場合、ダイアログウィンドウはデスクトップの中央に配置されます。それ以外の場合は、ダイアログボックスが隠れます。デフォルトの値は、<code>yes</code> です。</td> + </tr> + <tr> + <td><code>dialogheight:<em>height</em> </code></td> + <td>ダイアログボックスの高さを指定します。デフォルトでは、ピクセル値でサイズが指定されます。</td> + </tr> + <tr> + <td><code>dialogleft:<em>left</em> </code></td> + <td>ダイアログボックスの水平位置をデスクトップの左上を基準とした値で指定します。</td> + </tr> + <tr> + <td><code>dialogwidth:<em>width</em> </code></td> + <td>ダイアログボックスの幅を指定します。デフォルトでは、ピクセル値でサイズが指定されます。</td> + </tr> + <tr> + <td><code>dialogtop:<em>top</em> </code></td> + <td>ダイアログボックスの垂直位置をデスクトップの左上角を基準とした値で指定します。</td> + </tr> + <tr> + <td><code>resizable: {on | off | yes | no | 1 | 0 }</code></td> + <td>この引数の値が <code>on</code>、<code>yes</code>、または、1 である場合、ダイアログウィンドウは、ユーザによってリサイズ可能になります。それ以外の場合は、ウィンドウのサイズが自動で調整されます。デフォルトの値は、<code>no</code> です。</td> + </tr> + <tr> + <td><code>scroll: {on | off | yes | no | 1 | 0 }</code></td> + <td>この引数の値が <code>on</code>、<code>yes</code>、または、1 である場合、ダイアログボックスにスクロールバーが表示されます。それ以外の場合は、ボックスのサイズが自動で調整されます。デフォルトの値は、<code>no</code> です。</td> + </tr> + </tbody> +</table> + +<p>{{Note("Firefox は、<code>dialogHide</code>、<code>edge</code>、<code>status</code>、および、<code>unadorned</code> 引数を実装していません。")}}</p> + +<h2 id="Compatibility" name="Compatibility">互換性</h2> + +<p>Microsoft Internet Explorer 4 で実装され、Firefox では、Firefox 3 で (Fx 28 で非推奨)、Safari は Safari 5.1 でサポートが追加されました。</p> + +<p>このメソッドは Chrome 43 および Firefox 56 で完全に廃止されました。Safari から削除される可能性については、<a href="https://bugs.webkit.org/show_bug.cgi?id=151885">WebKit bug 151885</a> をご覧ください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a href="http://developer.mozilla.org/samples/domref/showModalDialog.html"><code>showModalDialog()</code></a></p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p><code>showModalDialog()</code> is currently being standardized as part of HTML5. The third argument (for additional options) is not present in the HTML5 version, and is (safely) ignored by both Safari and Chrome.</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li>Microsoft MSDN: <a href="http://msdn2.microsoft.com/ja-jp/library/ms536759.aspx">showModalDialog</a></li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code>window.showModalDialog()</code> を置き換える {{HTMLElement("dialog")}}</li> + <li>{{HTMLElement("dialog")}} および <a href="/ja/docs/Web/JavaScript/Reference/Statements/function*">generators</a> を使用した、<a href="https://github.com/niutech/showModalDialog">showModalDialog Polyfill</a></li> +</ul> diff --git a/files/ja/web/api/window/sidebar/index.html b/files/ja/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..3196222432 --- /dev/null +++ b/files/ja/web/api/window/sidebar/index.html @@ -0,0 +1,46 @@ +--- +title: window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/sidebar +--- +<div> + {{ApiRef}} {{Non-standard_header}} {{deprecated_header}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ブラウザにアドオンを追加するためのいくつかのメソッドを含む、sidebar オブジェクトを返します。</p> +<h2 id="Example" name="Example">例</h2> +<pre class="syntaxbox">window.sidebar.addPanel("Google", "http://www.google.com/", ""); +</pre> +<p>注記：三番目の空の引数は必須です！</p> +<h2 id="Notes" name="Notes">注記</h2> +<p>戻り値となる sidebar オブジェクトは、以下のメソッドを持ちます。</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <th>メソッド</th> + <th>説明</th> + </tr> + <tr> + <td><code>addPanel(<var>title</var>, <var>contentURL</var>, <var>customizeURL</var>)</code> {{Obsolete_inline(23)}}</td> + <td>サイドバーパネルを追加します。 Firefox 2 以降でのサイドバーの詳細については、『<a href="/ja/docs/Creating_a_Firefox_sidebar">Firefox のサイドバーの作成</a>』を参照してください。</td> + </tr> + <tr> + <td><code>addPersistentPanel(<var>title, <var>contentURL</var>, <var>customizeURL</var>)</var></code> {{Obsolete_inline(23)}}</td> + <td>バックグラウンドでの動作が可能なサイドバーパネルを追加します。これは SeaMonkey 及び Firefox 1.x でのみ動作します (Firefox 2 以降では <code>addPanel()</code> のみで可)</td> + </tr> + <tr> + <td><code>addSearchEngine(<var>engineURL</var>, <var>iconURL</var>, <var>suggestedTitle</var>, <var>suggestedCategory</var>)</code></td> + <td>Sherlock 検索エンジンをインストールします。詳細は、『<a href="/ja/docs/Adding_search_engines_from_web_pages">ウェブページからの検索エンジンの追加</a>』をご覧下さい。</td> + </tr> + <tr> + <td><code>addMicrosummaryGenerator(<var>generatorURL</var>)</code> {{gecko_minversion_inline("1.8.1")}} {{Obsolete_inline(6)}}</td> + <td>microsummary generator をインストールします。 <a href="/ja/docs/Mozilla/Firefox/Releases/2">Firefox 2</a> からの新機能です。</td> + </tr> + </tbody> +</table> +<h2 id="Specification" name="Specification">仕様</h2> +<p>Mozilla 固有のプロパティです。どの標準にも属しません。</p> diff --git a/files/ja/web/api/window/sizetocontent/index.html b/files/ja/web/api/window/sizetocontent/index.html new file mode 100644 index 0000000000..6d8afcc2d1 --- /dev/null +++ b/files/ja/web/api/window/sizetocontent/index.html @@ -0,0 +1,24 @@ +--- +title: window.sizeToContent +slug: Web/API/Window/sizeToContent +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/sizeToContent +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>コンテンツの大きさにウィンドウのサイズを変更します。</p> +<p>DOM コンテンツはこの関数が呼び出されたときに読み込まれるべきです。例えば、<a href="/ja/docs/Web/Reference/Events/DOMContentLoaded"><code>DOMContentLoaded</code></a> イベント後などです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.sizeToContent() +</pre> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">window.sizeToContent(); +</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/speechsynthesis/index.html b/files/ja/web/api/window/speechsynthesis/index.html new file mode 100644 index 0000000000..b15635f374 --- /dev/null +++ b/files/ja/web/api/window/speechsynthesis/index.html @@ -0,0 +1,102 @@ +--- +title: Window.speechSynthesis +slug: Web/API/Window/speechSynthesis +tags: + - API + - Experimental + - Property + - Reference + - SpeechSynthesis + - Window +translation_of: Web/API/Window/speechSynthesis +--- +<p>{{APIRef()}}{{SeeCompatTable}}</p> + +<p>Window オブジェクトの <code>speechSynthesis</code> 読み取り専用プロパティは、{{domxref("SpeechSynthesis")}} オブジェクトを返します。これは、<a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a> の音声合成機能を使用するためのエントリーポイントです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var synth = window.speechSynthesis; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("SpeechSynthesis")}} オブジェクト。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>私たちの基本的な <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">音声合成のデモ</a> では、最初に <code>window.speechSynthesis</code> を使用して SpeechSynthesis コントローラーへの参照を取得します。いくつかの必要な変数を定義した後、{{domxref("SpeechSynthesis.getVoices()")}} を使用して利用可能な音声のリストを取得し、それらの選択メニューを構成します。ユーザーは、そこから使用したい音声を選べます。</p> + +<p><code>inputForm.onsubmit</code> ハンドラー内部では、<a href="/ja/docs/Web/API/Event/preventDefault">preventDefault()</a> でフォーム送信を停止し、テキスト {{htmlelement("input")}} に入力されたテキストを含む新しい {{domxref("SpeechSynthesisUtterance")}} インスタンスを作成します。その発声 (utterance) にユーザーが {{htmlelement("select")}} 要素で選択した音声を設定し、{{domxref("SpeechSynthesis.speak()")}} メソッドを通して発声の発話を開始します。</p> + +<pre class="brush: js">var synth = window.speechSynthesis; + +var inputForm = document.querySelector('form'); +var inputTxt = document.querySelector('input'); +var voiceSelect = document.querySelector('select'); + + +function populateVoiceList() { + voices = synth.getVoices(); + + for(i = 0; i < voices.length ; i++) { + var option = document.createElement('option'); + option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; + + if(voices[i].default) { + option.textContent += ' -- DEFAULT'; + } + + option.setAttribute('data-lang', voices[i].lang); + option.setAttribute('data-name', voices[i].name); + voiceSelect.appendChild(option); + } +} + +populateVoiceList(); +if (speechSynthesis.onvoiceschanged !== undefined) { + speechSynthesis.onvoiceschanged = populateVoiceList; +} + +inputForm.onsubmit = function(event) { + event.preventDefault(); + + var utterThis = new SpeechSynthesisUtterance(inputTxt.value); + var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name'); + for(i = 0; i < voices.length ; i++) { + if(voices[i].name === selectedOption) { + utterThis.voice = voices[i]; + } + } + synth.speak(utterThis); + inputTxt.blur(); +}</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('Web Speech API', '#tts-section', 'SpeechSynthesis')}}</td> + <td>{{Spec2('Web Speech API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> + + + +<p>{{Compat("api.Window.speechSynthesis")}}</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Speech_API">Web Speech API</a></li> +</ul> diff --git a/files/ja/web/api/window/status/index.html b/files/ja/web/api/window/status/index.html new file mode 100644 index 0000000000..284e9f0f2c --- /dev/null +++ b/files/ja/web/api/window/status/index.html @@ -0,0 +1,23 @@ +--- +title: window.status +slug: Web/API/Window/status +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Window/status +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ブラウザの下部にあるステータスバー内にテキストを設定するか、もしくは、直前に設定されていたテキストを返します。</p> +<p>このプロパティは、Firefox、及び、いくつかの他のブラウザのデフォルト設定では動作しません。つまり、<code>window.status</code> を設定しても、ステータスバーに表示されているテキストには何の効果もないということです。ステータスバーのテキストを変更するスクリプトを許可するには、ユーザは、<code>about:config</code> 画面で、<code>dom.disable_window_status_change</code> の設定を <code>false</code> にしなければなりません。</p> +<div class="geckoVersionNote"> + <p>{{gecko_callout_heading("1.9.1")}}</p> + <p>Starting in Gecko 1.9.1 {{geckoRelease("1.9.1")}}, users can let websites change the status text by enabling the "Change status bar" preference in the Advanced options panel.</p> + </div> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>string</var> =<i>window</i>.status; //取得<i>window</i>.status = <var>string</var>; //設定</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/statusbar/index.html b/files/ja/web/api/window/statusbar/index.html new file mode 100644 index 0000000000..4ffa41cd90 --- /dev/null +++ b/files/ja/web/api/window/statusbar/index.html @@ -0,0 +1,80 @@ +--- +title: window.statusbar +slug: Web/API/Window/statusbar +tags: + - Gecko + - HTML DOM + - Window + - 要更新 +translation_of: Web/API/Window/statusbar +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> + +<h2 id="概要">概要</h2> + +<p>statusbar オブジェクトを返します。このバーの表示は、ウィンドウ内でトグル（表示/非表示の状態を切り替える）ことができます。</p> + +<p>{{ 英語版章題("Syntax") }}</p> + +<h3 id="構文">構文</h3> + +<pre class="syntaxbox"><var>objRef</var> = window.statusbar +</pre> + +<p>{{ 英語版章題("Example") }}</p> + +<h3 id="例">例</h3> + +<p>次の完全な HTML の例は、様々な "bar" オブジェクトの visible プロパティで利用可能な方法を示しています。存在するウィンドウのあらゆるバーの visible プロパティ を書き換えるには、特権が必要です。</p> + +<pre><html> +<head> + <title>様々な DOM テスト</title> + <script> + // 存在するウィンドウのバーの状態を変更します + netscape.security.PrivilegeManager. + enablePrivilege("UniversalBrowserWrite"); + window.statusbar.visible=!window.statusbar.visible; + </script> +</head> +<body> + <p>様々な DOM テスト</p> +</body> +</html> +</pre> + +<p>{{ 英語版章題("Notes") }}</p> + +<h3 id="注記">注記</h3> + +<p>あなたが上記の例のページを読み込んだとき、ブラウザは、以下のダイアログを表示するでしょう。: <img alt="Image:Modify_any_open_window_dialog.png"></p> + +<p>バーの表示状態をトグルするには、上記の例のように、スクリプトの実行と特権要求を許可しなければなりません。また、様々なツールバーの表示の動的な変更は、ウィンドウのサイズをかなり劇的に変化させることがあり、ページのレイアウトに影響する可能性があることに注意してください。</p> + +<p>{{ 英語版章題("Specification") }}</p> + +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="関連項目">関連項目</h2> + +<p><a href="ja/DOM/window.locationbar">window.locationbar</a>, <a href="ja/DOM/window.menubar">window.menubar</a>, <a href="ja/DOM/window.personalbar">window.personalbar</a>, <a href="ja/DOM/window.scrollbars">window.scrollbars</a>, <a href="ja/DOM/window.toolbar">window.toolbar</a></p> diff --git a/files/ja/web/api/window/storage_event/index.html b/files/ja/web/api/window/storage_event/index.html new file mode 100644 index 0000000000..a9d1e54cbb --- /dev/null +++ b/files/ja/web/api/window/storage_event/index.html @@ -0,0 +1,82 @@ +--- +title: storage +slug: Web/API/Window/storage_event +translation_of: Web/API/Window/storage_event +--- +<p><code>storage</code> イベントは、ストレージエリア (<code>localStorage</code> または <code>sessionStorage</code>) が変更されたときに発生します。詳しくは <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> をご覧ください。</p> + +<h2 id="General_info" name="General_info">一般情報</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">仕様</dt> + <dd style="margin: 0 0 0 120px;"><em><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></dd> + <dt style="float: left; text-align: right; width: 120px;">インターフェイス</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("StorageEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">バブリング</dt> + <dd style="margin: 0 0 0 120px;">不可</dd> + <dt style="float: left; text-align: right; width: 120px;">キャンセル可能か</dt> + <dd style="margin: 0 0 0 120px;">不可</dd> + <dt style="float: left; text-align: right; width: 120px;">ターゲット</dt> + <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> + <dt style="float: left; text-align: right; width: 120px;">既定のアクション</dt> + <dd style="margin: 0 0 0 120px;">なし</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>The key being changed.</td> + </tr> + <tr> + <td><code>oldValue</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>The old value of the key being changed.</td> + </tr> + <tr> + <td><code>newValue</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>The new value of the key being changed.</td> + </tr> + <tr> + <td><code>url</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>The address of the document whose key changed.</td> + </tr> + <tr> + <td><code>storageArea</code> {{readonlyInline}}</td> + <td>{{domxref("Storage")}}</td> + <td>The Storage object that was affected.</td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/api/window/toolbar/index.html b/files/ja/web/api/window/toolbar/index.html new file mode 100644 index 0000000000..dd40c4c522 --- /dev/null +++ b/files/ja/web/api/window/toolbar/index.html @@ -0,0 +1,74 @@ +--- +title: window.toolbar +slug: Web/API/Window/toolbar +tags: + - Gecko + - HTML DOM + - Window + - 要更新 +translation_of: Web/API/Window/toolbar +--- +<p>{{ ApiRef() }} {{ 英語版章題("Summary") }}</p> + +<h2 id="概要">概要</h2> + +<p>toolbar オブジェクトを返します。このバーの表示は、ウィンドウ内でトグル（表示/非表示の状態を切り替える）ことができます。 {{ 英語版章題("Syntax") }}</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox"><em>objRef</em> = window.toolbar</pre> + +<p>{{ 英語版章題("Example") }}</p> + +<h3 id="例">例</h3> + +<p>以下の完全な HTML の例は、様々な "bar" オブジェクトの visible プロパティで利用可能な方法を示しています。存在するウィンドウのあらゆるバーの visible プロパティ を書き換えるには、特権が必要です。</p> + +<pre> <html> + <head> + <title>様々な DOM テスト</title> + <script> + // 存在するウィンドウのバーの状態を変更します + netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite"); + window.toolbar.visible=!window.toolbar.visible; + </script> + </head> + <body> + <p>様々な DOM テスト</p> + </body> + </html> +</pre> + +<p>{{ 英語版章題("Notes") }}</p> + +<h3 id="注記">注記</h3> + +<p>あなたが上記の例のページを読み込んだとき、ブラウザは、以下のダイアログを表示するでしょう。: <img alt="Image:Modify_any_open_window_dialog.png"></p> + +<p>バーの表示を表示をトグルには、上記の例のように、スクリプトの実行と特権要求を許可しなければなりません。また、様々なツールバーの表示の動的な変更は、ウィンドウのサイズをかなり劇的に変化させることがあり、ページのレイアウトに影響する可能性があることに注意してください。</p> + +<p>参照: <a href="ja/DOM/window.locationbar">window.locationbar</a>, <a href="ja/DOM/window.menubar">window.menubar</a>, <a href="ja/DOM/window.personalbar">window.personalbar</a>, <a href="ja/DOM/window.scrollbars">window.scrollbars</a>, <a href="ja/DOM/window.statusbar">window.statusbar</a></p> + +<p>{{ 英語版章題("Specification") }}</p> + +<h3 id="仕様">仕様</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-toolbar', 'Window.toolbar')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-toolbar', 'Window.toolbar')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/ja/web/api/window/top/index.html b/files/ja/web/api/window/top/index.html new file mode 100644 index 0000000000..2972fa34ae --- /dev/null +++ b/files/ja/web/api/window/top/index.html @@ -0,0 +1,54 @@ +--- +title: window.top +slug: Web/API/Window/top +tags: + - API + - DOM + - HTML + - Window +translation_of: Web/API/Window/top +--- +<div>{{APIRef}}</div> + +<p>ウィンドウ階層における最上位のウィンドウへの参照を返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">var <var>topWindow</var> = window.top; +</pre> + +<h2 id="注記">注記</h2> + +<p>{{domxref("window.parent")}} プロパティは、現在のウィンドウの直近の親を返しますが、<code>window.top</code> は、ウィンドウオブジェクトの階層における最上位のウィンドウを返します。</p> + +<p>このプロパティは、親、あるいは、階層になっているウィンドウのサブフレーム内にあるウィンドウを扱っていて、最上位のフレームセットを取得したいときに特に役立ちます。</p> + +<h2 id="仕様">仕様</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', 'browsers.html#dom-top', 'window.top')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初期の定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("api.Window.top")}}</p> diff --git a/files/ja/web/api/window/transitioncancel_event/index.html b/files/ja/web/api/window/transitioncancel_event/index.html new file mode 100644 index 0000000000..2dfdf09c0a --- /dev/null +++ b/files/ja/web/api/window/transitioncancel_event/index.html @@ -0,0 +1,94 @@ +--- +title: 'Window: transitioncancel イベント' +slug: Web/API/Window/transitioncancel_event +tags: + - API + - Event + - Reference + - Web + - Window + - events + - transitioncancel + - イベント +translation_of: Web/API/Window/transitioncancel_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<p><strong><code>transitioncancel</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>がキャンセルされたときに発生します。</p> + +<p>詳しくは {{domxref("GlobalEventHandlers.ontransitioncancel")}} をご覧ください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitioncancel_event">HTMLElement: transitioncancel イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードは、リスナーに <code>transitioncancel</code> イベントを追加します。</p> + +<pre class="brush: js">document.addEventListener('transitioncancel', () => { + console.log('Transition canceled'); +});</pre> + +<p>同様に、 {{domxref("GlobalEventHandlers.ontransitioncancel", "ontransitioncancel")}} プロパティを <code>addEventListener()</code> の代わりに使用した例です。</p> + +<pre class="brush: js">document.ontransitioncancel = () => { + console.log('Transition canceled'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitioncancel_event#Live_example">このイベントのライブデモを参照してください。</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('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</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.Document.transitioncancel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitioncancel")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitionend_event", "transitionend")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitioncancel_event", "transitioncancel")}}</li> +</ul> diff --git a/files/ja/web/api/window/transitionend_event/index.html b/files/ja/web/api/window/transitionend_event/index.html new file mode 100644 index 0000000000..2323b99320 --- /dev/null +++ b/files/ja/web/api/window/transitionend_event/index.html @@ -0,0 +1,92 @@ +--- +title: 'Window: transitionend イベント' +slug: Web/API/Window/transitionend_event +tags: + - API + - Reference + - Web + - Window + - events + - transitionend +translation_of: Web/API/Window/transitionend_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>transitionend</code></strong> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>が完了したときに発生します。トランジションが完了前に削除された場合、例えば {{cssxref("transition-property")}} が削除されたり、 {{cssxref("display")}} が <code>none</code> に設定されたりした場合、イベントは生成されません。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td> + </tr> + </tbody> +</table> + +<p><code>transitionend</code> イベントは二つの方向で発生します。 - トランジション終了の状態まで遷移し終わったときと、既定またはトランジションがない状態まで完全に戻ったときです。トランジションに待ち時間や実行時間がない場合、両方が0秒またはどちらも宣言されていなかった場合、トランジションは発生せず、トランジションイベントは発生しません。 <code>transitioncancel</code> イベントが発生すると、 <code>transitionend</code> イベントは発生しません。</p> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Document")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitionend_event">HTMLElement: transitionend イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このコードはリスナーに <code>transitionend</code> イベントを追加します。</p> + +<pre class="brush: js">document.addEventListener('transitionend', () => { + console.log('Transition ended'); +});</pre> + +<p>同様に、 {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitionend")}} プロパティを <code>addEventListener()</code> の代わりに使用した例です。</p> + +<pre class="brush: js">document.ontransitionend = () => { + console.log('Transition ended'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitionend_event#Live_example">このイベントのライブデモを参照してください。</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("CSS3 Transitions", "#transitionend", "transitionend")}}</td> + <td>{{Spec2('CSS3 Transitions')}}</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.Document.transitionend_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitionend")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitionstart_event", "transitionstart")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionend_event", "transitionend")}}</li> + <li>{{domxref("Window")}} を対象としたこのイベント: {{domxref("Window/transitionend_event", "transitionend")}}</li> +</ul> diff --git a/files/ja/web/api/window/transitionrun_event/index.html b/files/ja/web/api/window/transitionrun_event/index.html new file mode 100644 index 0000000000..0ee17b852a --- /dev/null +++ b/files/ja/web/api/window/transitionrun_event/index.html @@ -0,0 +1,90 @@ +--- +title: 'Window: transitionrun イベント' +slug: Web/API/Window/transitionrun_event +tags: + - API + - Reference + - Web + - Window + - events + - transitionrun +translation_of: Web/API/Window/transitionrun_event +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><strong><code>transitionstart</code></strong> イベントは、 <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が実際に始まったとき、すなわち {{cssxref("transition-delay")}} が終了した後に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.ontransitionstart")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitionstart_event">HTMLElement: transitionstart イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードは <code>transitionstart</code> イベントにリスナーを追加します。</p> + +<pre class="brush: js">window.addEventListener('transitionstart', () => { + console.log('Started transitioning'); +});</pre> + +<p>同じですが、 {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} を <code>addEventListener()</code> の代わりに使用すると次のようになります。</p> + +<pre class="brush: js">window.ontransitionrun = () => { + console.log('Started transitioning'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitionstart_event#Live_example">このイベントのライブデモを参照してください。</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('CSS3 Transitions', '#transitionstart', 'transitionstart')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</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.Window.transitionstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitionstart")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionend_event", "transitionend")}}, {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/transitionstart_event", "transitionstart")}}</li> +</ul> diff --git a/files/ja/web/api/window/transitionstart_event/index.html b/files/ja/web/api/window/transitionstart_event/index.html new file mode 100644 index 0000000000..a8cbdcc782 --- /dev/null +++ b/files/ja/web/api/window/transitionstart_event/index.html @@ -0,0 +1,91 @@ +--- +title: 'Window: transitionstart イベント' +slug: Web/API/Window/transitionstart_event +tags: + - API + - Reference + - Web + - Window + - events + - transitionstart + - イベント +translation_of: Web/API/Window/transitionstart_event +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p><strong><code>transitionstart</code></strong> イベントは、 <a href="/ja/docs/CSS/Using_CSS_transitions">CSS トランジション</a>が実際に始まったとき、すなわち {{cssxref("transition-delay")}} が終了した後に発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>あり</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("TransitionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers.ontransitionstart")}}</td> + </tr> + </tbody> +</table> + +<p>このイベントの本来の対象は、トランジションが適用された {{domxref("Element")}} です。このイベントを {{domxref("Window")}} インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、 <a href="/ja/docs/Web/API/HTMLElement/transitionstart_event">HTMLElement: transitionstart イベント</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードは <code>transitionstart</code> イベントにリスナーを追加します。</p> + +<pre class="brush: js">window.addEventListener('transitionstart', () => { + console.log('Started transitioning'); +});</pre> + +<p>同じですが、 {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} を <code>addEventListener()</code> の代わりに使用すると次のようになります。</p> + +<pre class="brush: js">window.ontransitionrun = () => { + console.log('Started transitioning'); +};</pre> + +<p><a href="/ja/docs/Web/API/HTMLElement/transitionstart_event#Live_example">このイベントのライブデモを参照してください。</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('CSS3 Transitions', '#transitionstart', 'transitionstart')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</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.Window.transitionstart_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.ontransitionstart")}} イベントハンドラー</li> + <li>{{domxref("TransitionEvent")}} インターフェイス</li> + <li>CSS プロパティ: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li> + <li>関連イベント: {{domxref("Document/transitionend_event", "transitionend")}}, {{domxref("Document/transitionrun_event", "transitionrun")}}, {{domxref("Document/transitioncancel_event", "transitioncancel")}}</li> + <li>{{domxref("HTMLElement")}} を対象としたこのイベント: {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}</li> + <li>{{domxref("Document")}} を対象としたこのイベント: {{domxref("Document/transitionstart_event", "transitionstart")}}</li> +</ul> diff --git a/files/ja/web/api/window/unescape/index.html b/files/ja/web/api/window/unescape/index.html new file mode 100644 index 0000000000..501592c3d2 --- /dev/null +++ b/files/ja/web/api/window/unescape/index.html @@ -0,0 +1,33 @@ +--- +title: window.unescape +slug: Web/API/Window/unescape +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/JavaScript/Reference/Global_Objects/unescape +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>16 進でエンコードされた値（例えば、クッキー）をデコードします。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>regular</var> = window.unescape(<i>escaped</i>)</pre> +<ul> + <li><code>regular</code> : 通常の文字列</li> + <li><code>encoded</code> : エンコードされた文字列</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">alert( unescape("%5C") ); // 表示結果: "\" + +alert( unescape("https%3A//developer.mozilla.org") ); // 表示結果: "https://developer.mozilla.org" +</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。</p> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("window.escape")}}</li> + <li><a href="/ja/docs/JavaScript/Reference/Global_Functions/encodeURIComponent"><code>decodeURIComponent</code></a></li> +</ul> diff --git a/files/ja/web/api/window/unhandledrejection_event/index.html b/files/ja/web/api/window/unhandledrejection_event/index.html new file mode 100644 index 0000000000..87c06dccad --- /dev/null +++ b/files/ja/web/api/window/unhandledrejection_event/index.html @@ -0,0 +1,125 @@ +--- +title: 'Window: unhandledrejection イベント' +slug: Web/API/Window/unhandledrejection_event +tags: + - API + - Event + - HTML DOM + - JavaScript + - Promise + - Promises + - Reference + - Rejection + - Window + - Worker + - events + - global scope + - unhandledrejection + - イベント +translation_of: Web/API/Window/unhandledrejection_event +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>unhandledrejection</code></strong> イベントは、 JavaScript の拒否ハンドラーを持たない {{jsxref("Promise")}} が拒否されたときにスクリプトのグローバルスコープに送られます。 通常、これは {{domxref("window")}} ですが、 {{domxref("Worker")}} であることもあります。 </span>これはデバッグや、予期しない場面でのエラーハンドリングのエラーの代替手段を提供するために利用することができます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("PromiseRejectionEvent")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code>unhandledrejection</code> イベントにバブリングを許すと、結局はコンソールにエラーメッセージを出力することになります。 これは {{domxref("PromiseRejectionEvent")}} の {{domxref("Event.preventDefault", "preventDefault()")}} を呼び出すことで防ぐことができます。 例は以下の {{anch("Preventing default handling")}} を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ここで <code>unhandledrejection</code> イベントの使い方が分かる例をいくつか見てみましょう。 イベントには2つの有用な情報があります。</p> + +<dl> + <dt><code>promise</code></dt> + <dd>拒否を扱うために利用できるハンドラーがなく拒否された実際の {{jsxref("Promise")}} です。</dd> + <dt><code>reason</code></dt> + <dd>拒否ハンドラーに渡されるはずだった理由です。 詳しくは {{jsxref("Promise.catch", "catch()")}} を参照してください。</dd> +</dl> + +<h3 id="Basic_error_logging" name="Basic_error_logging">基本的なエラーのログ</h3> + +<p>この例では、処理されなかった Promise の拒否についての情報を単純にコンソールにログ出力します。</p> + +<pre class="brush:js;">window.addEventListener("unhandledrejection", event => { + console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`); +}); +</pre> + +<p>イベントハンドラープロパティを使用して、イベントリスナーを設定することもできます。</p> + +<pre class="brush: js">window.onunhandledrejection = event => { + console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`); +}; +</pre> + +<h3 id="Preventing_default_handling" name="Preventing_default_handling">既定のハンドリングの防止</h3> + +<p>({{Glossary("Node.js")}} など) 多くの環境では、既定では処理されなかった Promise の拒否はコンソールに報告されます。 <code>unhandledrejection</code> イベントのハンドラー — と、さらに実行したいその他のタスク — を追加して、 {{domxref("Event.preventDefault()", "preventDefault()")}} を呼び出すことでイベントをキャンセルし、実行時のログ出力コードが扱われるまでバブリングすることを防ぐことができます。 これは <code>unhandledrejection</code> がキャンセル可能であるためです。</p> + +<pre class="brush:js;">window.addEventListener('unhandledrejection', function (event) { + // ...your code here to handle the unhandled rejection... + + // Prevent the default handling (such as outputting the + // error to the console + + event.preventDefault(); +}); +</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('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}</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.Window.unhandledrejection_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SectionOnPage("/ja/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li> + <li>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}} イベントハンドラープロパティ<sup><a href="#seealso-footnote-1">1</a></sup></li> + <li>{{domxref("Window/rejectionhandled_event", "rejectionhandled")}} イベント</li> + <li>{{jsxref("Promise")}}</li> +</ul> + +<p><a id="seealso-footnote-1" name="seealso-footnote-1">[1]</a> 対応するイベントハンドラープロパティは、{{domxref("WindowEventHandlers")}} ミックスインで定義されています。 これは、{{domxref("Window")}} インターフェイスとすべての種類の {{domxref("Worker")}} インターフェイスの両方で使用できます。</p> diff --git a/files/ja/web/api/window/unload_event/index.html b/files/ja/web/api/window/unload_event/index.html new file mode 100644 index 0000000000..019894e002 --- /dev/null +++ b/files/ja/web/api/window/unload_event/index.html @@ -0,0 +1,121 @@ +--- +title: unload +slug: Web/API/Window/unload_event +translation_of: Web/API/Window/unload_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary"><code>unload</code> イベントは、文書または子リソースがアンロードされるときに発生します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("WindowEventHandlers/onunload", "onunload")}}</td> + </tr> + </tbody> +</table> + +<p>以下のイベントの後に発生します。</p> + +<ul> + <li>{{domxref("Window/beforeunload_event", "beforeunload")}} (キャンセル可能なイベント)</li> + <li>{{domxref("Window/pagehide_event", "pagehide")}}</li> +</ul> + +<p>文書は以下のような状態にあります。</p> + +<ul> + <li>すべてのリソースがまだ存在する (img、iframe など)</li> + <li>エンドユーザーから見えるものは何もない</li> + <li>UI でのやり取りは効果がない ({{domxref("window.open")}}, {{domxref("window.alert", "alert")}}, {{domxref("window.confirm", "confirm")}}, など)</li> + <li>エラーが発生しても、アンロードの処理の流れは停止しない</li> +</ul> + +<p>unload イベントは文書ツリーにも続くことに注意してください。親フレームのアンロードは、子フレームの <code>unload</code> の前に行われます (以下の例を参照)。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Parent Frame</title> + <script> + window.addEventListener('beforeunload', function(event) { + console.log('I am the 1st one.'); + }); + window.addEventListener('unload', function(event) { + console.log('I am the 3rd one.'); + }); + </script> + </head> + <body> + <iframe src="child-frame.html"></iframe> + </body> +</html></pre> + +<p><code>child-frame.html</code> の内容を以下に示します。</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Child Frame</title> + <script> + window.addEventListener('beforeunload', function(event) { + console.log('I am the 2nd one.'); + }); + window.addEventListener('unload', function(event) { + console.log('I am the 4th and last one…'); + }); + </script> + </head> + <body> + ☻ + </body> +</html></pre> + +<p>親フレームがアンロードされると、 <code>console.log()</code> のメッセージに記述された順序でイベントが発生します。</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('UI Events', '#event-type-unload', 'unload')}}</td> + <td>{{Spec2('UI Events')}}</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.Window.unload_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連イベント: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li> + <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li> +</ul> diff --git a/files/ja/web/api/window/updatecommands/index.html b/files/ja/web/api/window/updatecommands/index.html new file mode 100644 index 0000000000..16439aee12 --- /dev/null +++ b/files/ja/web/api/window/updatecommands/index.html @@ -0,0 +1,26 @@ +--- +title: window.updateCommands +slug: Web/API/Window/updateCommands +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/updateCommands +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>現在の chrome ウィンドウ（UI）のコマンドの状態を更新します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.updateCommands("sCommandName") +</pre> +<h3 id="Parameters" name="Parameters">引数</h3> +<ul> + <li><code>sCommandName</code> : 更新するイベントを記述する特別な文字列 ("bold" など)</li> +</ul> +<h2 id="Notes" name="Notes">注記</h2> +<p>これは（特定のコマンドノードの "無効な" 属性を設定したり解除する）アイテムを有効、または、無効に、あるいは、XUL コマンドノードの "state" 属性における現在の状態の情報を設定することにより選択される状態がコマンドの状態に反映されることを確実にします。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}}</p> diff --git a/files/ja/web/api/window/url/index.html b/files/ja/web/api/window/url/index.html new file mode 100644 index 0000000000..9d2c28cdf5 --- /dev/null +++ b/files/ja/web/api/window/url/index.html @@ -0,0 +1,100 @@ +--- +title: window.URL +slug: Web/API/Window/URL +tags: + - API + - DOM + - Property + - Reference + - Window +translation_of: Web/API/URL +--- +<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> + +<p><strong><code>Window.URL</code></strong> プロパティは、オブジェクト URL の作成や操作に用いる静的なメソッドを提供します。</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="構文">構文</h2> + +<p>静的なメソッドの呼び出し:</p> + +<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> + +<p>新しいオブジェクトの構築:</p> + +<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></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('URL', '#dom-url', 'URL')}}</td> + <td>{{Spec2('URL')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>8.0<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup><br> + 7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Gecko 2 (Firefox 4) から Gecko 18 まで、Gecko は非標準の <code>nsIDOMMozURLProperty</code> 内部型を返していました。 実際には、何の違いもありません。</p> + +<p>[2] 非標準の <code>webkitURL</code> という名前で実装されています。</p> diff --git a/files/ja/web/api/window/visualviewport/index.html b/files/ja/web/api/window/visualviewport/index.html new file mode 100644 index 0000000000..63ba34eab4 --- /dev/null +++ b/files/ja/web/api/window/visualviewport/index.html @@ -0,0 +1,39 @@ +--- +title: Window.visualViewport +slug: Web/API/Window/visualViewport +translation_of: Web/API/Window/visualViewport +--- +<p>{{SeeCompatTable}}{{APIRef("Visual Viewport")}}</p> + +<p>{{domxref("Window")}}インターフェイスの<strong><code>visualViewport</code></strong> は読み取り専用プロパティーです。 特定のウィンドウの視覚的ビューポートを表す{{domxref("VisualViewport")}}オブジェクトを返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">var <em>visualViewport</em> = Window.visualViewport</pre> + +<h3 id="値">値</h3> + +<p>{{domxref("VisualViewport")}} はオブジェクトです。</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Visual Viewport','#dom-window-visualviewport','visualViewport')}}</td> + <td>{{Spec2('Visual Viewport')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.Window.visualViewport")}}</p> diff --git a/files/ja/web/api/window/vrdisplayconnect_event/index.html b/files/ja/web/api/window/vrdisplayconnect_event/index.html new file mode 100644 index 0000000000..2330451d67 --- /dev/null +++ b/files/ja/web/api/window/vrdisplayconnect_event/index.html @@ -0,0 +1,69 @@ +--- +title: vrdisplayconnected +slug: Web/API/Window/vrdisplayconnect_event +translation_of: Web/API/Window/vrdisplayconnect_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<div> +<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplayconnected</code></strong> イベントは，コンピュータに互換性のあるVRデバイスが接続された時に発火します．</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>No</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Window")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<pre>TBD.</pre> + +<h2 id="継承">継承</h2> + +<p><code>vrdisplayconnected</code> イベントは， {{domxref("Event")}} インターフェイスを実装しています — このインターフェイスで定義されているプロパティとメソッドを利用可能です．</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebVR', '#dom-window-onvrdisplayconnected', 'vrdisplayconnected')}}</td> + <td>{{Spec2('WebVR')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Window.vrdisplayconnect_event")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="http://mozvr.com/">MozVr.com</a> —Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> +</ul> diff --git a/files/ja/web/api/window/vrdisplaydisconnect_event/index.html b/files/ja/web/api/window/vrdisplaydisconnect_event/index.html new file mode 100644 index 0000000000..71281e5c3d --- /dev/null +++ b/files/ja/web/api/window/vrdisplaydisconnect_event/index.html @@ -0,0 +1,77 @@ +--- +title: vrdisplaydisconnected +slug: Web/API/Window/vrdisplaydisconnect_event +translation_of: Web/API/Window/vrdisplaydisconnect_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<div> +<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplaydisconnected</code></strong> イベントは，互換性のあるVRデバイスがコンピュータから接続解除された時に発火します．</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>No</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Window")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<p>You can use the <code>vrdisplaydisconnect</code> event in an <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> method:</p> + +<pre class="brush: js">window.addEventListener('vrdisplaydisconnect', function() { + info.textContent = 'Display disconnected.'; + reportDisplays(); +});</pre> + +<p>Or use the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> event handler property:</p> + +<pre class="brush: js">window.onvrdisplaydisconnect = function() { + info.textContent = 'Display disconnected.'; + reportDisplays(); +);</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnected', 'vrdisplaydisconnected')}}</td> + <td>{{Spec2('WebVR 1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Window.vrdisplaydisconnect_event")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> +</ul> diff --git a/files/ja/web/api/window/vrdisplayfocus_event/index.html b/files/ja/web/api/window/vrdisplayfocus_event/index.html new file mode 100644 index 0000000000..61ab54e59a --- /dev/null +++ b/files/ja/web/api/window/vrdisplayfocus_event/index.html @@ -0,0 +1,83 @@ +--- +title: 'Window: vrdisplayfocus event' +slug: Web/API/Window/vrdisplayfocus_event +tags: + - Reference + - WebVR + - events + - onvrdisplayfocus + - vrdisplayfocus +translation_of: Web/API/Window/vrdisplayfocus_event +--- +<div>{{APIRef("Window")}}</div> + +<div> +<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplayfocus</code></strong> イベントは VR ディスプレイへのプレゼンテーションがぼやけた後に再開されたときに発生します。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("VRDisplayEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code></td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<p><code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> メソッドで <code>vrdisplayfocus</code> イベントを使用できます:</p> + +<pre class="brush: js notranslate">window.addEventListener('vrdisplayfocus', function() { + info.textContent = 'Display focused.'; + reportDisplays(); +});</pre> + +<p>または、 <code><a href="/en-US/docs/Web/API/Window/onvrdisplayfocus">onvrdisplayfocus</a></code> イベントハンドラープロパティを使用します:</p> + +<pre class="brush: js notranslate">window.onvrdisplayfocus = function() { + info.textContent = 'Display focused.'; + reportDisplays(); +};</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('WebVR 1.1', '#dom-window-onvrdisplayfocus', 'vrdisplayfocus')}}</td> + <td>{{Spec2('WebVR 1.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.Window.vrdisplayfocus_event")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li> + <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li> +</ul> diff --git a/files/ja/web/api/window/vrdisplaypresentchange_event/index.html b/files/ja/web/api/window/vrdisplaypresentchange_event/index.html new file mode 100644 index 0000000000..4b70220959 --- /dev/null +++ b/files/ja/web/api/window/vrdisplaypresentchange_event/index.html @@ -0,0 +1,69 @@ +--- +title: vrdisplaypresentchange +slug: Web/API/Window/vrdisplaypresentchange_event +translation_of: Web/API/Window/vrdisplaypresentchange_event +--- +<div>{{APIRef}}{{SeeCompatTable}}</div> + +<div> +<p><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> の <strong><code>vrdisplaypresentchange</code></strong> イベントは，VRデバイスの表示状態が変化したときに発火します — つまり，表示状態から非表示になったとき，あるいはその逆のケースです．</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>No</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Window")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<pre>TBD.</pre> + +<h2 id="継承">継承</h2> + +<p><code>vrdisplaypresentchange</code> イベントは {{domxref("Event")}} インターフェイスを実装しています — このインターフェイスで定義されているプロパティとメソッドを利用可能です．</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('WebVR', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}}</td> + <td>{{Spec2('WebVR')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.Window.vrdisplaypresentchange_event")}}</p> + +<h2 id="参照">参照</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a>.</li> + <li><a href="http://mozvr.com/">MozVr.com</a> — Mozilla VRチームのデモ，ダウンロード，その他のリソース．</li> +</ul> diff --git a/files/ja/web/api/window/window/index.html b/files/ja/web/api/window/window/index.html new file mode 100644 index 0000000000..9884945c39 --- /dev/null +++ b/files/ja/web/api/window/window/index.html @@ -0,0 +1,78 @@ +--- +title: window.window +slug: Web/API/Window/window +tags: + - API + - Gecko + - HTML DOM + - Property + - Reference + - Window + - 要更新 +translation_of: Web/API/Window/window +--- +<div>{{ApiRef}}</div> + +<h2 id="概要">概要</h2> + +<p><code>window</code> オブジェクトの <code>window</code> プロパティは、その <code>window</code> オブジェクト自身を指します。故に、以下の表現は同じ <code>window</code> オブジェクトを返します。</p> + +<pre class="syntaxbox">window.window +window.window.window +window.window.window.window + ... +</pre> + +<p>Web ページに於いては、<code>window</code> オブジェクトは<em>グローバルオブジェクト</em> でもあります。これは次の事を意味します。</p> + +<ol> + <li>スクリプト中の変数 "global" は、実際には <code>window</code> オブジェクトのプロパティです。 + + <pre class="brush:js">var global = {data: 0}; + +alert(global === window.global); // "true" を表示します。 +</pre> + </li> + <li>ブラウジングコンテキストに於いて <code>window</code> は最上位オブジェクトである為、 <code>window</code> オブジェクトのメンバへのアクセス時には "<code>window.</code>" 接頭辞を省略する事が可能となっています。 + <pre class="brush:js">// 次の 2 行は同じ動作となります。 +window.setTimeout( "window.alert('Hi!')", 50 ); + setTimeout( "alert('Hi!')", 50 ); + + +// window プロパティが自身を参照しているか確認してみましょう。 +alert( window === window.window === window.window.window.window ); // true +</pre> + </li> +</ol> + +<p>そのオブジェクト自身を参照する <code>window</code> プロパティが持っている理由は、おそらくグローバルオブジェクトの参照を容易にする為でしょう。もしこのようになっていない場合、 <code>var window = this;</code> という代入をスクリプトの一番最初に自分で書かなければならないでしょう。</p> + +<p>別の理由としては、このプロパティ無しには、例えば、 "{{domxref("window.open", "window.open('http://google.com/')")}}" と書くことができないということが挙げられます。そうでなければ、単に、"open('http://google.com/')" と書かなければならないでしょう。</p> + +<p>Yet another reason to use this property is for libraries which wish to offer OOP-versions and non-OOP versions (especially JavaScript modules). If, for example, we refer to "this.window.location.href", a <a href="/ja/docs/Mozilla/JavaScript_code_modules">JavaScript module</a> could define a property called "window" inside of a class it defined (since no global "window" variable exists for it by default) which, could be created, for example, after passing in a window object to the module class' constructor. Thus, "this.window" inside of its functions would refer to that window object. In the non-namespaced version, "this.window" would simply refer back to "window", and also be able to get the document location without trouble. Another advantage is that the objects of such a class (even if the class were defined outside of a module) could change their reference to the window at will, as they would not be able to do if they had hard-coded a reference to "window" (yet the default in the class could still be set as the current window object).</p> + +<h2 id="仕様">仕様</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショット {{SpecName("HTML5.1")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'browsers.html#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName("HTML5 W3C")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window', 'Window.window')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>Window.window</code> の定義を含む最初のスナップショット</td> + </tr> + </tbody> +</table> |