Edit

Page

Page title:

Page body:

[1] [DFN[[RUBY[窓][ウィンドウ]@en[window]]]]は、 [[Webブラウザー]]において[[利用者]]に[[レンダリング]]を提示するための基本的な単位です。

* 仕様書

[REFS[
- [17] [CITE@en[CSSOM View Module]] ([TIME[2016-08-09 18:15:49 +09:00]]) <https://drafts.csswg.org/cssom-view/#extensions-to-the-window-interface>
- [15] [CITE@en[WebDriver]] ([TIME[2016-07-22 07:24:31 +09:00]]) <https://w3c.github.io/webdriver/webdriver-spec.html#h-resizing-and-positioning-windows>
]REFS]

* 構成要素

[3] [[窓][窓 (Web)]]は、次の構成要素を持ちます。

[FIG(list members)[
: [[アドレスバー]] : [F[最上位閲覧文脈]]の[F[文書]]の[F[番地][文書の番地]]や[F[HTTPS状態]]などを表示します。また、[[利用者]]の操作により[F[最上位閲覧文脈]]の [[navigate]] の指示をします。
: [[タイトルバー]] : [F[題名]]を[[表示]]します。
: [[メニューバー]] :
: [F[機能[[ツールバー]]]] :
: [F[リンク[[ツールバー]]]] : [[栞]]や[[ブックマーク]]の一部または全部を表示し、
[[利用者]]の指示により[F[最上位閲覧文脈]]の [[navigate]] の指示をします。
: [[状態バー]] : [F[最上位閲覧文脈]]における [[navigate]] の進捗を表示したり、
[CODE(CSS)@en[:hover]] や [CODE(CSS)@en[:focus]] の状態にある[[ハイパーリンク]]の
[[URL]] を表示したりします。
: [[busy indicator]] : [F[最上位閲覧文脈]]における [[navigate]] の進捗を表示します。
: [[サイドバー]] :
: [F[viewport]] : [F[最上位閲覧文脈]]を[[レンダリング]]します。
: [F[[[音声]]の[[再生]]中か否か]] :
[[Chrome]] は[[タブ]]に[[音声]]を[[再生]]しているかどうかを表示します。
]FIG]

[5] 実装によっては、相当するものが存在しないかもしれません。例えば、
[F[サイドバー]]に相当するものが無いかもしれません。

[6] 実装によっては、複数の[[窓][窓 (Web)]]でこれら構成要素の一部を共有しているかもしれません。
例えば[[タブブラウザー]]では、ここでいう[[窓][窓 (Web)]]は[[タブ]]に当たり、
[[アドレスバー]]はその[[タブ]]を含む[[窓]]全体で共有しているかもしれません。
[[Mac OS]] では、[[メニューバー]]は[[プラットフォーム]]全体で共有しているかもしれません。

[8] 一般的な[[Webブラウザー]]では、[F[最上位閲覧文脈]]が[[補助閲覧文脈]]かどうかで、
構成要素の表示の有無や機能が変化します。例えば[F[アドレスバー]]は、
[[補助閲覧文脈]]なら[[利用者]]が書き換えできなくなります。

[29] 他に、[[窓][窓 (Web)]]は次の状態を持ちます。
[FIG(list members)[
: [F[最上位閲覧文脈]] :
[[最上位閲覧文脈]]への[[強い参照]]を保持します ([[最上位閲覧文脈]]参照)。
: [F[X]] : [[画面]]上の[[左辺]]の位置。
: [F[Y]] : [[画面]]上の[[上辺]]の位置。
: [F[幅]] : [[画面]]上の[[幅]]。
: [F[高さ]] : [[画面]]上の[[高さ]]。
: [F[題名]] : [F[最上位閲覧文脈]]の[F[文書]]の [CODE(DOMa)@en[title][document.title]]。
本[[窓][窓 (Web)]]が[[プラットフォーム]]の[[窓]]として[[レンダリング]]されるなら、
[[プラットフォーム]]の[[窓システム]]に対して、 (必要があれば)
本[[窓]]の名前として提示するものです。
例えば [[Windows]] では、[[タスクバー]]や[[タスクマネージャー]]の表示に使われます。
本[[窓][窓 (Web)]]が[[タブ]]として[[レンダリング]]されるなら、
[[タブ]]の名前として表示されるかもしれません。
: [F[色]] : [F[最上位閲覧文脈]]の[F[文書]]の [CODE(HTML)@en[<meta name=theme-color>]]
で指定された値 (あれば)。
本[[窓][窓 (Web)]]が[[プラットフォーム]]の[[窓]]として[[レンダリング]]されるなら、
[[プラットフォーム]]の[[窓システム]]に対して、 (必要があれば)
本[[窓]]の[[色]]として提示するものです。
本[[窓][窓 (Web)]]が[[タブ]]として[[レンダリング]]されるなら、
[[タブ]]の[[色]]として使われるかもしれません。
その他、[F[タイトルバー]]などの[[レンダリング]]にも使うかもしれません。
: [F[favicon]] : [F[最上位閲覧文脈]]の[F[文書]]の [F[favicon]] (あれば)。
なければ[[Webブラウザー]]依存の[[アイコン]]。
現在の一般的な [[Webブラウザー]]では、[[タブ]]に表示されます。
[[アドレスバー]]や[[プラットフォーム]]の[[窓]]一覧などに表示されることもあります。
: [F[最小化]] : [[窓]]が[[最小化]]状態かどうかを表します。
[[文書]]の[F[可視性状態]]に影響します。
値が変化した時 [CODE[visibilitychange]] が[[発火]]されるかもしれません。
: [F[前景]] : 同じ[[窓]]の他の[[タブ]]によって隠れた状態でないかどうかを表します。
[[文書]]の[F[可視性状態]]に影響します。
値が変化した時 [CODE[visibilitychange]] が[[発火]]されるかもしれません。
: [DFN[[F[プラットフォームの焦点を持つ]]]] :
本[[窓]]が[[ウィンドウマネージャー]]の[[フォーカス]]を持った状態かどうかを表します。
[[Pointer Lock]] 状態への移行時に参照されます。
[[窓]]が[[フォーカス]]を持っていても他の[[タブ]]が前景にあれば、
[[偽]]とするべきと思われます。
同じ[[窓]]内に複数の[[最上位閲覧文脈]]が同時に表示された状態で本[[閲覧文脈]]に[[フォーカス]]がない時も、
[[偽]]とするべきと思われます。
]FIG]

* レンダリング

[2] そのまま[[窓]]として実装するのが初期の方法でしたが、
現在では[[タブ]]として実装するのが一般的になっています。
あるいは [[MDI]] における[[サブウィンドウ]]として表現されることもあります。
その他の表現方法も可能でしょう。
いずれにせよ、 [[CSSOM]] の定義上は一括して[[窓][窓 (Web)]]と呼ばれています。

[HISTORY[
[7] かつては、[[モーダルダイアログ]]として表示される[[窓][窓 (Web)]]もありました
([CODE(DOMm)@en[showModalDialog]])。

[9] かつては、[[二次的閲覧文脈]]として、1つの[[窓][窓 (Web)]]に複数の[[最上位閲覧文脈]]が存在する形態も想定されていました。
これは本体の画面の他に[[サイドバー]]にも別の画面が埋め込まれた状態を表していました。

;; [10] この[[仕様]]は削除されましたが、1つの[[窓]]に複数の[[最上位閲覧文脈]]を埋め込むこと自体が禁止されたわけではありません
(どのような[[窓]]の構成にし、どのように[[利用者]]に提供するかは、
[[Webブラウザー]]の裁量の範囲内です)。ただ、それは何らかの関係を持った[[閲覧文脈]]同士ではなく、
たまたま画面表示上並んでいるだけの別個の[[閲覧文脈]]でしかないものとしなければならない、ということです。
]HISTORY]

** 窓と画面

[16] [[窓]]は、[[画面]]上に表示されます。

[18] [[画面]]における[[窓]]の位置に関する次の操作が定義されています [SRC[>>17]]。
[FIG(short list)[
- [CODE(DOMm)@en[moveTo]]
- [CODE(DOMm)@en[moveBy]]
- [CODE(DOMa)@en[screenX]]
- [CODE(DOMa)@en[screenY]]
- [CODE(JS)@en[window.open]] [CODE(DOM)@en[left]]
- [CODE(JS)@en[window.open]] [CODE(DOM)@en[top]]
]FIG]

[19] [[窓]]自体の大きさに関する次の操作が定義されています [SRC[>>17]]。
[FIG(short list)[
- [CODE(DOMm)@en[resizeTo]]
- [CODE(DOMm)@en[resizeBy]]
- [CODE(DOMa)@en[outerWidth]]
- [CODE(DOMa)@en[outerHeight]]
- [CODE(JS)@en[window.open]] [CODE(DOM)@en[width]]
- [CODE(JS)@en[window.open]] [CODE(DOM)@en[height]]
]FIG]

[25] [CODE(DOMm)@en[resizeTo]] は [[viewport]] の大きさを指定することで、
[[窓][窓 (Web)]]の大きさを変更します [SRC[>>17]]。 [CODE(DOMm)@en[resizeBy]]
は[[窓][窓 (Web)]]の大きさの差分を指定して変更します [SRC[>>17]]。

[26] [CODE(JS)@en[window.open]] において、[CODE(DOM)@en[left]] と [CODE(DOM)@en[top]]
は[[窓][窓 (Web)]]の[[左辺]]と[[上辺]]の位置を指定するものとされています。
一方 [CODE(DOM)@en[width]] と [CODE(DOM)@en[height]] は、
[[viewport]] の幅と高さを指定するものとされています。 [SRC[>>17]]

[27] これらの有用性や整合性を考慮すると、
[[viewport]] の大きさと[[窓][窓 (Web)]]の大きさが連動することが期待されているようです。

[28] [CODE(DOMa)@en[outerWidth]] と [CODE(DOMa)@en[outerHeight]]
は、[[窓][窓 (Web)]]の[[幅]]と[[高さ]]を返します [SRC[>>17]]。

[24] 位置の表現については、[[座標系]]を参照。
[[マルチディスプレイ]]環境については、[[画面]]を参照。

[37] [[画面]]の表示範囲外に[[窓]]を配置できるかどうか、
できるとして[[画面]]からどれだけ離れられるかは、
[[プラットフォーム]]に依存します。[[プラットフォーム]]による制約がない場合であっても、
[[利用者]]の不便を防ぐため、また悪意ある[[著者]]による濫用を防ぐため、
[[窓][窓 (Web)]]は[[利用者]]の閲覧可能な範囲に入るように配置するべきです。

[EG[
[38] [CODE[window.open]] で[[画面]]よりも大きな [CODE[width]]
が指定された場合には、[[利用者]]の不便を防ぐため、[[プラットフォーム]]または
[[Webブラウザー]]は[[画面]]の幅 (正確には左端位置を考慮した残りの幅)
に収まるように調整するべきです。実際[[利用者]]の[[画面]]サイズを考慮せず大画面想定の
[CODE[width]] や [CODE[height]] を指定して操作困難な [[Webサイト]]が存在しています。
]EG]

[EG[
[39] [[画面]]から完全に隠れた[[窓][窓 (Web)]]を開けると、[[利用者]]はそれに気づかないかもしれません。
[[回線]]利用料や[[電力]]消費量を[[利用者]]の気づかないうちに増大させたり、
意図しない[[音声]]の[[再生]]が開始されて操作困難になったりする危険性があります。
]EG]

[EG[
[40] [[タスクバー]]や[[メニューバー]]などの[[画面]]上に[[最前面]]で表示される[[プラットフォーム]]の機能が存在しているときは、
それに隠れて操作不能となることも避ける必要があります。
]EG]

** 最小化

[30] [[プラットフォーム]]によっては、[[窓]]を非表示状態にすることができ、
「[[最小化]]」、「[[アイコン化]]」などと呼ばれています。

@@ [31]

* 変化への反応

[44] 
[[プラットフォーム]]によっては、
[[利用者]]の操作によって、あるいは他の[[アプリケーション]]の指示により、
[[窓]]の[[寸法]]が変化することがあります。
細かな変化のほか、
[[最大化]]と通常サイズ化の状態も多くの[[プラットフォーム]]にあります。

@@ プラットフォームからの変化の通知に対して・・・

[43] 
[[窓]]の[[寸法]]が変化すると、普通、[[viewport]] もそれに応じた適切な[[寸法]]に変更されます。
それによって[[レンダリングの更新]]があり [CODE[resize][onresize]]
[[イベント]]が[[発火]]されたりします。

-*-*-

[45] 
[[プラットフォーム]]によっては、他の[[アプリケーション]]に切り替えたり、
[[最小化]]したりできます。
[[Webブラウザー]]によっては[[タブ]]などの形で同様の機能を
[[Webブラウザー]]の[[アプリケーション]]内部で実装していることが多いです。

[46] 完全に非表示となる場合以外に、
他の[[窓]]に一部または全部が隠されながら裏側で表示されていることもあります。

@@
[[focus]],
[[Page Visibility]]

* フォーカス

[33] [[固定状態]]では、[[窓][窓 (Web)]]の外側も含め、[[マウス]]の操作によって[[プラットフォーム]]の[[フォーカス]]が移動しないことが期待されています。

;; [[固定状態]]参照。

[34] その実現のためには[[プラットフォーム]]にそのような機能が必要です。
[[Webブラウザー]]は、 [[Pointer Lock]] の状態の変化にあわせて[[窓][窓 (Web)]]外の[[フォーカス]]の扱いを変更するよう、
適宜[[プラットフォーム]]の [[API]] を通じて指示する必要があります。

[35] しかし他の操作や、[[利用者]]の操作以外の理由で[[フォーカス]]が失われることがあります。
その場合[[利用者エージェント]]は[[固定状態]]を解除する必要があります。

* 閉じる

[11] [[窓][窓 (Web)]]には、「閉じる」操作が必要です。

[12] [[窓][窓 (Web)]]を閉じることを選択すると、[F[最上位閲覧文脈]]について[[閲覧文脈を捨てる]]操作を実行することが期待されています。

[4] 実際上、これは[[タブブラウザー]]なら[[タブ]]を閉じる操作かもしれませんし、
[[窓]]を閉じる操作によりその[[窓]]のすべての[[タブ]]を同時に閉じるのかもしれません。

[13] [[閲覧文脈を捨てる]]際に、[[スクリプトを無効]]にしても構わないとされています
([[閲覧文脈を捨てる]]参照)。つまり[[スクリプト]]実行中など[[閲覧文脈]]が通常の[[利用者]]の操作を直ちに受け付けない状態であっても、
[[閲覧文脈を捨てる]]機能を提供できます。実際、[[スクリプト]]の暴走や、
[[モーダルダイアログ]]の乱用、 [CODE[onbeforeunload]] や [CODE[onunload]]
の処理が長い場合などを想定すると、通常の「閉じる」操作と、
それにより閉じられない場合に強制的に「閉じる」操作の両方を[[利用者]]に提供する方が良さそうです。

* 閲覧文脈の窓

[20] [[閲覧文脈]]は、[F[窓][窓 (Web)]]を持ちます。
[[最上位閲覧文脈]]では、[[窓][窓 (Web)]]が値となります。
[[入れ子閲覧文脈]]では、 [CODE[null]] です。

[23] [[閲覧文脈]]の[F[窓][窓 (Web)]]は、作成時に決まり、以後変化しません。

[21] [[CSSOM View]] [[仕様書]]は、「[VAR[閲覧文脈]]'s window」
のような表現を使っています [SRC[>>17]] が、その定義は与えていません。

[22] [[CSSOM View]] の [CODE(DOMa)@en[outerWidth]] と [CODE(DOMa)@en[outerHeight]]
は、「client window」という語を使っています [SRC[>>17]] が、
その定義は与えていません。

* DnD

[36] [[DnD]] 参照。

* 関連

[14] [CODE(DOMi)@en[Window]] は、[[窓]]に対応する機能として作られたものですが、
現在では[[閲覧文脈]]に近いものとして規定されています。

* 歴史

[32] [CITE@en[security: suggest ux element to identify automation windows]]
([[andreastt]]著, [TIME[2016-09-22 01:03:44 +09:00]])
<https://github.com/w3c/webdriver/commit/a8ac274c1124ff24568d3579614dc65ff0c0d1c9>

[41] [CITE@en[Add FullscreenOptions dictionary to requestFullscreen by dtapuska · Pull Request #129 · whatwg/fullscreen]]
([TIME[2018-10-17 16:09:51 +09:00]])
<https://github.com/whatwg/fullscreen/pull/129>

[42] [CITE@en[Request Fullscreen take additional options · Issue #123 · whatwg/fullscreen]]
([TIME[2018-10-17 16:10:41 +09:00]])
<https://github.com/whatwg/fullscreen/issues/123>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)