From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/touch/clientx/index.html | 81 +++++++++++++++++++ files/ja/web/api/touch/clienty/index.html | 81 +++++++++++++++++++ files/ja/web/api/touch/identifier/index.html | 64 +++++++++++++++ files/ja/web/api/touch/index.html | 111 +++++++++++++++++++++++++++ files/ja/web/api/touch/screeny/index.html | 60 +++++++++++++++ 5 files changed, 397 insertions(+) create mode 100644 files/ja/web/api/touch/clientx/index.html create mode 100644 files/ja/web/api/touch/clienty/index.html create mode 100644 files/ja/web/api/touch/identifier/index.html create mode 100644 files/ja/web/api/touch/index.html create mode 100644 files/ja/web/api/touch/screeny/index.html (limited to 'files/ja/web/api/touch') diff --git a/files/ja/web/api/touch/clientx/index.html b/files/ja/web/api/touch/clientx/index.html new file mode 100644 index 0000000000..13faf6fea0 --- /dev/null +++ b/files/ja/web/api/touch/clientx/index.html @@ -0,0 +1,81 @@ +--- +title: Touch.clientX +slug: Web/API/Touch/clientX +tags: + - API + - DOM + - Property + - Read-only + - Reference + - touch +translation_of: Web/API/Touch/clientX +--- +

{{ APIRef("Touch Events") }}

+ +

Touch.clientY は読み取り専用プロパティで、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を返します。

+ +

構文

+ +
touchItem.clientY;
+ +

返値

+ +

long 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。

+ +

例

+ +

この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除きます。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチポイントの垂直座標で、スクロールオフセットを除きます。

+ +

この例では、 source という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 {{domxref("Element/touchend_event", "touchend")}} のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの {{domxref("Touch.clientX")}} 座標と {{domxref("Touch.clientY")}} 座標の変化が計算されます。

+ +
// Register touchstart and touchend listeners for element 'source'
+var src = document.getElementById("source");
+var clientX, clientY;
+
+src.addEventListener('touchstart', function(e) {
+  // Cache the client X/Y coordinates
+  clientX = e.touches[0].clientX;
+  clientY = e.touches[0].clientY;
+}, false);
+
+src.addEventListener('touchend', function(e) {
+  var deltaX, deltaY;
+
+  // Compute the change in X and Y coordinates.
+  // The first touch point in the changedTouches
+  // list is the touch point that was just removed from the surface.
+  deltaX = e.changedTouches[0].clientX - clientX;
+  deltaY = e.changedTouches[0].clientY - clientY;
+
+  // Process the data ...
+}, false);
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Touch Events 2','#dom-touch-clienty')}}{{Spec2('Touch Events 2')}}前の版から変更なし。
{{SpecName('Touch Events', '#widl-Touch-clientY')}}{{Spec2('Touch Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Touch.clientY")}}

diff --git a/files/ja/web/api/touch/clienty/index.html b/files/ja/web/api/touch/clienty/index.html new file mode 100644 index 0000000000..1bdf089a7f --- /dev/null +++ b/files/ja/web/api/touch/clienty/index.html @@ -0,0 +1,81 @@ +--- +title: Touch.clientY +slug: Web/API/Touch/clientY +tags: + - API + - DOM + - Property + - Read-only + - Reference + - touch +translation_of: Web/API/Touch/clientY +--- +

{{ APIRef("Touch Events") }}

+ +

Touch.clientY は読み取り専用プロパティで、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を返します。

+ +

構文

+ +
touchItem.clientY;
+ +

返値

+ +

long 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。

+ +

例

+ +

この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除きます。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチポイントの垂直座標で、スクロールオフセットを除きます。

+ +

この例では、 source という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 {{domxref("Element/touchend_event", "touchend")}} のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの {{domxref("Touch.clientX")}} 座標と {{domxref("Touch.clientY")}} 座標の変化が計算されます。

+ +
// Register touchstart and touchend listeners for element 'source'
+var src = document.getElementById("source");
+var clientX, clientY;
+
+src.addEventListener('touchstart', function(e) {
+  // Cache the client X/Y coordinates
+  clientX = e.touches[0].clientX;
+  clientY = e.touches[0].clientY;
+}, false);
+
+src.addEventListener('touchend', function(e) {
+  var deltaX, deltaY;
+
+  // Compute the change in X and Y coordinates.
+  // The first touch point in the changedTouches
+  // list is the touch point that was just removed from the surface.
+  deltaX = e.changedTouches[0].clientX - clientX;
+  deltaY = e.changedTouches[0].clientY - clientY;
+
+  // Process the data ...
+}, false);
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Touch Events 2','#dom-touch-clienty')}}{{Spec2('Touch Events 2')}}前の版から変更なし。
{{SpecName('Touch Events', '#widl-Touch-clientY')}}{{Spec2('Touch Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Touch.clientY")}}

diff --git a/files/ja/web/api/touch/identifier/index.html b/files/ja/web/api/touch/identifier/index.html new file mode 100644 index 0000000000..f8940137b5 --- /dev/null +++ b/files/ja/web/api/touch/identifier/index.html @@ -0,0 +1,64 @@ +--- +title: Touch.identifier +slug: Web/API/Touch/identifier +tags: + - API + - DOM + - Identifier + - Property + - Read-only + - Reference + - touch +translation_of: Web/API/Touch/identifier +--- +

{{ APIRef("Touch Events") }}{{SeeCompatTable}}

+ +

Touch.identifier はタッチ面に接触した点を識別する固有の値を返します。この値は、タッチ面上でのこの指 (またはスタイラス) の動きに関わるすべてのイベントに対して、タッチ面から離れるまで一貫したものです。

+ +

構文

+ +
touchItem.identifier;
+ +

返値

+ +

long で、 {{ domxref("Touch") }} オブジェクトの固有の ID を表します。

+ +

例

+ +
someElement.addEventListener('touchmove', function(e) {
+// Iterate through the list of touch points that changed
+// since the last event and print each touch point's identifier.
+  for (var i=0; i < e.changedTouches.length; i++) {
+    console.log("changedTouches[" + i + "].identifier = " + e.changedTouches[i].identifier);
+  }
+}, false);
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Touch Events 2','#dom-touch-identifier')}}{{Spec2('Touch Events 2')}}変更なし
{{SpecName('Touch Events', '#widl-Touch-identifier')}}{{Spec2('Touch Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Touch.identifier")}}

diff --git a/files/ja/web/api/touch/index.html b/files/ja/web/api/touch/index.html new file mode 100644 index 0000000000..39428223ad --- /dev/null +++ b/files/ja/web/api/touch/index.html @@ -0,0 +1,111 @@ +--- +title: Touch +slug: Web/API/Touch +tags: + - API + - DOM + - Interface + - Reference + - TouchEvent + - touch +translation_of: Web/API/Touch +--- +

{{APIRef("Touch Events")}}

+ +

Touch インターフェイスは、タッチ感応面へのひとつの接触点を表します。接触点とは一般的に指やスタイラスと、タッチ画面やトラックパッドのような機器が触れた位置です。

+ +

{{domxref("Touch.radiusX")}}、{{domxref("Touch.radiusY")}}、{{domxref("Touch.rotationAngle")}} で、ユーザーと画面が接触したタッチ領域 (touch area) を表します。これは指を使うような、精度が低いポインティングデバイスを扱う場合に役立ちます。これらの値は、接触した領域全体 (ユーザの指先など) に可能な限り合う楕円を表すように設定されます。 {{experimental_inline}}

+ +
+

注: プロパティの値の多くは、ハードウェア依存です。例えば、表面を押さえる力を検出する手段を持たない機器では、force の値が常に 0 になるでしょう。これは radiusX や radiusY にもあてはまります。ハードウェアがひとつの点しか通知できない場合は、これらの値が 1 になるでしょう。

+
+ +

コンストラクター

+ +
+
{{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}
+
Touch オブジェクトを作成します。
+
+ +

プロパティ

+ +

このインターフェイスには親がなく、ほかのプロパティを継承または実装していません。

+ +

基本プロパティ

+ +
+
{{domxref("Touch.identifier")}} {{readonlyInline}}
+
Touch オブジェクトの一意な識別子を返します。あるタッチ点 (指などによる) は表面を移動している間、同じ識別子を持ち続けます。これにより、同一のタッチを終始追跡することが確実になります。
+
{{domxref("Touch.screenX")}} {{readonlyInline}}
+
画面の左端に対する、タッチ点の X 座標を返します。
+
{{domxref("Touch.screenY")}} {{readonlyInline}}
+
画面の上端に対する、タッチ点の Y 座標を返します。
+
{{domxref("Touch.clientX")}} {{readonlyInline}}
+
スクロールによるオフセットを含まず、ブラウザのビューポートの左端に対する、タッチ点の X 座標を返します。
+
{{domxref("Touch.clientY")}} {{readonlyInline}}
+
スクロールによるオフセットを含まず、ブラウザのビューポートの上端に対する、タッチ点の Y 座標を返します。
+
{{domxref("Touch.pageX")}} {{readonlyInline}}
+
ドキュメントの左端に対する、タッチ点の X 座標を返します。水平スクロールによるオフセットがある場合は、それを含むことが clientX と異なります。
+
{{domxref("Touch.pageY")}} {{readonlyInline}}
+
ドキュメントの上端に対する、タッチ点の Y 座標を返します。垂直スクロールによるオフセットがある場合は、それを含むことが clientY と異なります。
+
{{domxref("Touch.target")}} {{readonlyInline}}
+
タッチ点がタッチ面で最初に触れた位置にある {{domxref("Element")}} を返します。タッチ点が要素の対話エリアの外に移動したり、ドキュメント上に存在しなくなっても同様です。
+
+ +

タッチ領域

+ +

{{SeeCompatTable}}

+ +
+
{{domxref("Touch.radiusX")}} {{readonlyInline}} {{experimental_inline}}
+
画面に触れた領域にもっとも接近して囲むような、楕円の X 方向の半径を返します。この値は、screenX と同じ尺度のピクセル数で表します。
+
{{domxref("Touch.radiusY")}} {{readonlyInline}} {{experimental_inline}}
+
画面に触れた領域にもっとも接近して囲むような、楕円の Y 方向の半径を返します。この値は、screenY と同じ尺度のピクセル数で表します。
+
{{domxref("Touch.rotationAngle")}} {{readonlyInline}} {{experimental_inline}}
+
ユーザがタッチ面に触れた領域をもっとも正確に覆うために、radiusX および radiusY で表す楕円を時計回りに回転すべき角度 (単位は度 (degree)) を返します。
+
{{domxref("Touch.force")}}{{readonlyInline}} {{experimental_inline}}
+
ユーザがタッチ面に与えた圧力を、0.0 (最小圧力) から 1.0 (最大圧力) の間の float で返します。
+
+ +

メソッド

+ +

このインターフェイスにはメソッドがなく、親もないのでメソッドを継承または実装していません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Touch Events 2', '#touch-interface', 'Touch')}}{{Spec2('Touch Events 2')}}radiusX, radiusY, rotationAngle, force の各プロパティと Touch() コンストラクターを追加。
{{SpecName('Touch Events', '#touch-interface', 'Touch')}}{{Spec2('Touch Events')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.Touch")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/touch/screeny/index.html b/files/ja/web/api/touch/screeny/index.html new file mode 100644 index 0000000000..e521136ad8 --- /dev/null +++ b/files/ja/web/api/touch/screeny/index.html @@ -0,0 +1,60 @@ +--- +title: Touch.screenY +slug: Web/API/Touch/screenY +tags: + - API + - DOM + - Mobile + - Property + - touch +translation_of: Web/API/Touch/screenY +--- +

{{ APIRef("Touch Events") }}

+ +

概要

+ +

画面を基準としたタッチポイントの Y 座標を返します。スクロールオフセットは含まれません。

+ +

構文

+ +
var y = touchItem.screenY;
+
+ +

返り値

+ +
+
y
+
画面を基準としたタッチポイントの Y 座標。スクロールオフセットは含まれません。
+
+ +

例

+ +

Touch.screenX の例には、このプロパティの使用例が含まれています。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様ステータス備考
{{SpecName('Touch Events 2','#dom-touch-screeny')}}{{Spec2('Touch Events 2')}}前の版から変更なし。
{{SpecName('Touch Events', '#widl-Touch-screenY')}}{{Spec2('Touch Events')}}初回定義。
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.Touch.screenY")}}

-- cgit v1.2.3-54-g00ecf