aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/api/touch
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web/api/touch')
-rw-r--r--files/ja/web/api/touch/clientx/index.html81
-rw-r--r--files/ja/web/api/touch/clienty/index.html81
-rw-r--r--files/ja/web/api/touch/identifier/index.html64
-rw-r--r--files/ja/web/api/touch/index.html111
-rw-r--r--files/ja/web/api/touch/screeny/index.html60
5 files changed, 397 insertions, 0 deletions
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
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><strong><code>Touch.clientY</code></strong> は読み取り専用プロパティで、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>touchItem</var>.clientY;</pre>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code>long</code> 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除きます。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチポイントの垂直座標で、スクロールオフセットを除きます。</p>
+
+<p>この例では、 <code>source</code> という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 {{domxref("Element/touchend_event", "touchend")}} のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの {{domxref("Touch.clientX")}} 座標と {{domxref("Touch.clientY")}} 座標の変化が計算されます。</p>
+
+<pre class="brush: js notranslate">// 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);</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('Touch Events 2','#dom-touch-clienty')}}</td>
+ <td>{{Spec2('Touch Events 2')}}</td>
+ <td>前の版から変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('Touch Events', '#widl-Touch-clientY')}}</td>
+ <td>{{Spec2('Touch 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.Touch.clientY")}}</p>
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
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<p><strong><code>Touch.clientY</code></strong> は読み取り専用プロパティで、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>touchItem</var>.clientY;</pre>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code>long</code> 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除きます。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチポイントの垂直座標で、スクロールオフセットを除きます。</p>
+
+<p>この例では、 <code>source</code> という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 {{domxref("Element/touchend_event", "touchend")}} のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの {{domxref("Touch.clientX")}} 座標と {{domxref("Touch.clientY")}} 座標の変化が計算されます。</p>
+
+<pre class="brush: js notranslate">// 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);</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('Touch Events 2','#dom-touch-clienty')}}</td>
+ <td>{{Spec2('Touch Events 2')}}</td>
+ <td>前の版から変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('Touch Events', '#widl-Touch-clientY')}}</td>
+ <td>{{Spec2('Touch 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.Touch.clientY")}}</p>
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
+---
+<p>{{ APIRef("Touch Events") }}{{SeeCompatTable}}</p>
+
+<p><strong><code>Touch.identifier</code></strong> はタッチ面に接触した点を識別する固有の値を返します。この値は、タッチ面上でのこの指 (またはスタイラス) の動きに関わるすべてのイベントに対して、タッチ面から離れるまで一貫したものです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>touchItem</var>.identifier;</pre>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p><code>long</code> で、 {{ domxref("Touch") }} オブジェクトの固有の ID を表します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js notranslate">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 &lt; e.changedTouches.length; i++) {
+ console.log("changedTouches[" + i + "].identifier = " + e.changedTouches[i].identifier);
+ }
+}, 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('Touch Events 2','#dom-touch-identifier')}}</td>
+ <td>{{Spec2('Touch Events 2')}}</td>
+ <td>変更なし</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('Touch Events', '#widl-Touch-identifier')}}</td>
+ <td>{{Spec2('Touch 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.Touch.identifier")}}</p>
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
+---
+<p>{{APIRef("Touch Events")}}</p>
+
+<p><strong><code>Touch</code></strong> インターフェイスは、タッチ感応面へのひとつの接触点を表します。接触点とは一般的に指やスタイラスと、タッチ画面やトラックパッドのような機器が触れた位置です。</p>
+
+<p>{{domxref("Touch.radiusX")}}、{{domxref("Touch.radiusY")}}、{{domxref("Touch.rotationAngle")}} で、ユーザーと画面が接触した<em>タッチ領域 (touch area)</em> を表します。これは指を使うような、精度が低いポインティングデバイスを扱う場合に役立ちます。これらの値は、接触した領域全体 (ユーザの指先など) に可能な限り合う楕円を表すように設定されます。 {{experimental_inline}}</p>
+
+<div class="note">
+<p><strong>注:</strong> プロパティの値の多くは、ハードウェア依存です。例えば、表面を押さえる力を検出する手段を持たない機器では、<code>force</code> の値が常に 0 になるでしょう。これは <code>radiusX</code> や <code>radiusY</code> にもあてはまります。ハードウェアがひとつの点しか通知できない場合は、これらの値が 1 になるでしょう。</p>
+</div>
+
+<h2 id="Constructor" name="Constructor">コンストラクター</h2>
+
+<dl>
+ <dt>{{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}</dt>
+ <dd>Touch オブジェクトを作成します。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<p><em>このインターフェイスには親がなく、ほかのプロパティを継承または実装していません。</em></p>
+
+<h3 id="Basic_properties" name="Basic_properties">基本プロパティ</h3>
+
+<dl>
+ <dt>{{domxref("Touch.identifier")}} {{readonlyInline}}</dt>
+ <dd><code>Touch</code> オブジェクトの一意な識別子を返します。あるタッチ点 (指などによる) は表面を移動している間、同じ識別子を持ち続けます。これにより、同一のタッチを終始追跡することが確実になります。</dd>
+ <dt>{{domxref("Touch.screenX")}} {{readonlyInline}}</dt>
+ <dd>画面の左端に対する、タッチ点の X 座標を返します。</dd>
+ <dt>{{domxref("Touch.screenY")}} {{readonlyInline}}</dt>
+ <dd>画面の上端に対する、タッチ点の Y 座標を返します。</dd>
+ <dt>{{domxref("Touch.clientX")}} {{readonlyInline}}</dt>
+ <dd>スクロールによるオフセットを含まず、ブラウザのビューポートの左端に対する、タッチ点の X 座標を返します。</dd>
+ <dt>{{domxref("Touch.clientY")}} {{readonlyInline}}</dt>
+ <dd>スクロールによるオフセットを含まず、ブラウザのビューポートの上端に対する、タッチ点の Y 座標を返します。</dd>
+ <dt>{{domxref("Touch.pageX")}} {{readonlyInline}}</dt>
+ <dd>ドキュメントの左端に対する、タッチ点の X 座標を返します。水平スクロールによるオフセットがある場合は、それを含むことが <code>clientX</code> と異なります。</dd>
+ <dt>{{domxref("Touch.pageY")}} {{readonlyInline}}</dt>
+ <dd>ドキュメントの上端に対する、タッチ点の Y 座標を返します。垂直スクロールによるオフセットがある場合は、それを含むことが <code>clientY</code> と異なります。</dd>
+ <dt>{{domxref("Touch.target")}} {{readonlyInline}}</dt>
+ <dd>タッチ点がタッチ面で最初に触れた位置にある {{domxref("Element")}} を返します。タッチ点が要素の対話エリアの外に移動したり、ドキュメント上に存在しなくなっても同様です。</dd>
+</dl>
+
+<h3 id="Touch_area" name="Touch_area">タッチ領域</h3>
+
+<p>{{SeeCompatTable}}</p>
+
+<dl>
+ <dt>{{domxref("Touch.radiusX")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>画面に触れた領域にもっとも接近して囲むような、楕円の X 方向の半径を返します。この値は、<code>screenX</code> と同じ尺度のピクセル数で表します。</dd>
+ <dt>{{domxref("Touch.radiusY")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>画面に触れた領域にもっとも接近して囲むような、楕円の Y 方向の半径を返します。この値は、<code>screenY</code> と同じ尺度のピクセル数で表します。</dd>
+ <dt>{{domxref("Touch.rotationAngle")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>ユーザがタッチ面に触れた領域をもっとも正確に覆うために、radiusX および radiusY で表す楕円を時計回りに回転すべき角度 (単位は度 (degree)) を返します。</dd>
+ <dt>{{domxref("Touch.force")}}{{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>ユーザがタッチ面に与えた圧力を、<code>0.0</code> (最小圧力) から <code>1.0</code> (最大圧力) の間の <code>float</code> で返します。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p><em>このインターフェイスにはメソッドがなく、親もないのでメソッドを継承または実装していません。</em></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('Touch Events 2', '#touch-interface', 'Touch')}}</td>
+ <td>{{Spec2('Touch Events 2')}}</td>
+ <td><code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> の各プロパティと <code>Touch()</code> コンストラクターを追加。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
+ <td>{{Spec2('Touch Events')}}</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.Touch")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li>
+ <li>{{ domxref("Document.createTouch()") }}</li>
+</ul>
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
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>画面を基準としたタッチポイントの Y 座標を返します。スクロールオフセットは含まれません。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="eval notranslate">var <em>y</em> = <em>touchItem</em>.screenY;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">返り値</h3>
+
+<dl>
+ <dt><code>y</code></dt>
+ <dd>画面を基準としたタッチポイントの Y 座標。スクロールオフセットは含まれません。</dd>
+</dl>
+
+<h2 id="例">例</h2>
+
+<p><a href="/en-US/docs/Web/API/Touch/screenX#Example">Touch.screenX の例</a>には、このプロパティの使用例が含まれています。</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('Touch Events 2','#dom-touch-screeny')}}</td>
+ <td>{{Spec2('Touch Events 2')}}</td>
+ <td>前の版から変更なし。</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('Touch Events', '#widl-Touch-screenY')}}</td>
+ <td>{{Spec2('Touch Events')}}</td>
+ <td>初回定義。</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.Touch.screenY")}}</p>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-12-29 13:00:20 +0000