From 083ccd1f168cc00b25d77a26f229589cc99da891 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 9 Jun 2021 02:07:33 +0900 Subject: Web/API/Window/screenX/Y を更新 (#1027) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 英語版章題マクロを除去 - 2021/02/20 時点の英語版に同期 --- files/ja/web/api/window/screenx/index.html | 110 ++++++++++++++++++++++------ files/ja/web/api/window/screeny/index.html | 111 +++++++++++++++++++++++------ 2 files changed, 178 insertions(+), 43 deletions(-) diff --git a/files/ja/web/api/window/screenx/index.html b/files/ja/web/api/window/screenx/index.html index 45bfb13f65..bfbfec9e92 100644 --- a/files/ja/web/api/window/screenx/index.html +++ b/files/ja/web/api/window/screenx/index.html @@ -1,29 +1,97 @@ --- -title: window.screenX +title: Window.screenX slug: Web/API/Window/screenX tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference - - 要更新 +- API +- CSSOM View +- Property +- Read-only +- Reference +- Window +- screenX translation_of: Web/API/Window/screenX --- -

{{ ApiRef() }} {{ 英語版章題("Summary") }}

-

概要

-

画面の左端からユーザのブラウザの左端までの水平距離を返します。

-

{{ 英語版章題("Syntax") }}

-

構文

-
lLoc = window.screenX
+
{{APIRef}}

+
+
Window.screenX は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートから画面の左端までの水平距離を CSS ピクセル数で返します。

+
+

+  
注: screenX の別名である {{domxref("Window.screenLeft")}} が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。

+

+
+
構文

+
+
leftWindowPos = window.screenX
 

-
{{ 英語版章題("Parameters") }}

-
戻り値

+
+
返値

+
+
ブラウザーのビューポートの左端から画面の左端までの CSS ピクセル数に等しい数値です。

+
+
例

+
+
screenleft-screentop (ソースコード) の例では、円が描かれたキャンバスを見ることができます。この例では、 {{domxref("Window.screenLeft")}}/{{domxref("Window.screenTop")}} に加えて {{domxref("Window.requestAnimationFrame()")}} を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。

+
+
initialLeft = window.screenLeft + canvasElem.offsetLeft;
+initialTop = window.screenTop + canvasElem.offsetTop;
+
+function positionElem() {
+  let newLeft = window.screenLeft + canvasElem.offsetLeft;
+  let newTop = window.screenTop + canvasElem.offsetTop;
+
+  let leftUpdate = initialLeft - newLeft;
+  let topUpdate = initialTop - newTop;
+
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgb(0, 0, 255)';
+  ctx.beginPath();
+  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
+  ctx.fill();
+
+  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;
+
+  window.requestAnimationFrame(positionElem);
+}
+
+window.requestAnimationFrame(positionElem);

+
+
これは screenX/screenY でもまったく同じように動作します。

+
+
また、このコードでは screenLeft に対応しているかどうかを検出するスニペットが入っており、対応していない場合は screenLeft/screenTop を
+  screenX/screenY で代替するようになっています。

+
+
if(!window.screenLeft) {
+  window.screenLeft = window.screenX;
+  window.screenTop = window.screenY;
+}

+
+
仕様書

+
+
+  
+    
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+    
+  
+
仕様書状態備考
{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}{{ Spec2('CSSOM View') }}初回定義

+
+
ブラウザーの互換性

+
+
{{Compat("api.Window.screenX")}}

+
+
関連情報

+
 
-
{{ 英語版章題("Notes") }}

-
注

-
window.screenY も参照してください。

-
{{ 英語版章題("Specification") }}

-
仕様

-
{{ DOM0() }}

diff --git a/files/ja/web/api/window/screeny/index.html b/files/ja/web/api/window/screeny/index.html
index 3b10d2b446..1675e654f1 100644
--- a/files/ja/web/api/window/screeny/index.html
+++ b/files/ja/web/api/window/screeny/index.html
@@ -1,29 +1,96 @@
 ---
-title: window.screenY
+title: Window.screenY
 slug: Web/API/Window/screenY
 tags:
-  - DOM
-  - DOM_0
-  - Gecko
-  - Gecko DOM Reference
-  - 要更新
+  - API
+  - CSSOM View
+  - Property
+  - Read-only
+  - Reference
+  - Window
 translation_of: Web/API/Window/screenY
 ---
-
{{ ApiRef() }} {{ 英語版章題("Summary") }}

-
概要

-
画面の上端からユーザのブラウザの上端までの垂直距離を返します。

-
{{ 英語版章題("Syntax") }}

-
構文

-
lLoc = window.screenY
-

-
{{ 英語版章題("Parameters") }}

-
戻り値

+
{{APIRef}}

+
+
Window.screenY は読み取り専用のプロパティで、ユーザーのブラウザーのビューポートの上端から画面の上端までの垂直距離を CSS ピクセル数で返します。

+
+

+  
注: screenY の別名である {{domxref("Window.screenTop")}} が、最近は新しいブラウザー間で実装されていました。これはもともと IE のみが対応していましたが、有名であるためあらゆる場所で導入されています。

+

+
+
構文

+
+
topWindowPos = window.screenY
+

+
+
返値

+
+
ブラウザーのビューポートの上端から画面の上端までの CSS ピクセル数に等しい数値です。

+
+
例

+
+
screenleft-screentop の例では、円が描かれたキャンバスを見ることができます。この例では、 {{domxref("Window.screenLeft")}}/{{domxref("Window.screenTop")}} に加えて {{domxref("Window.requestAnimationFrame()")}} を使用することで、ウィンドウの位置を移動しても画面上の一定の物理的な位置に円を描き続けます。

+
+
initialLeft = window.screenLeft + canvasElem.offsetLeft;
+initialTop = window.screenTop + canvasElem.offsetTop;
+
+function positionElem() {
+  let newLeft = window.screenLeft + canvasElem.offsetLeft;
+  let newTop = window.screenTop + canvasElem.offsetTop;
+
+  let leftUpdate = initialLeft - newLeft;
+  let topUpdate = initialTop - newTop;
+
+  ctx.fillStyle = 'rgb(0, 0, 0)';
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = 'rgb(0, 0, 255)';
+  ctx.beginPath();
+  ctx.arc(leftUpdate + (width/2), topUpdate + (height/2) + 35, 50, degToRad(0), degToRad(360), false);
+  ctx.fill();
+
+  pElem.textContent = 'Window.screenLeft: ' + window.screenLeft + ', Window.screenTop: ' + window.screenTop;
+
+  window.requestAnimationFrame(positionElem);
+}
+
+window.requestAnimationFrame(positionElem);

+
+
これは screenX/screenY でもまったく同じように動作します。

+
+
また、このコードでは screenLeft に対応しているかどうかを検出するスニペットが入っており、対応していない場合は screenLeft/screenTop を
+  screenX/screenY で代替するようになっています。

+
+
if(!window.screenLeft) {
+  window.screenLeft = window.screenX;
+  window.screenTop = window.screenY;
+}

+
+
仕様書

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
仕様書状態備考
{{ SpecName('CSSOM View', '#dom-window-screeny', 'Window.screenY') }}{{ Spec2('CSSOM View') }}初回定義

+
+
ブラウザーの互換性

+
+
{{Compat("api.Window.screenY")}}

+
+
関連情報

+
 
-
{{ 英語版章題("Notes") }}

-
注

-
window.screenX も参照してください。

-
{{ 英語版章題("Specification") }}

-
仕様

-
{{ DOM0() }}

-- 
cgit v1.2.3-54-g00ecf