Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja

1 files changed, 27 insertions, 26 deletions

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 04d36acba9..30989d253f 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -14,50 +14,51 @@ tags:
 translation_of: Web/Guide/User_input_methods
 ---
 <div class="summary">
-<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術についてより詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">ポインターロック API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ</a>などがあります。</span></p>
+<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術について、より詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a> などがあります。</span></p>
 </div>
 
 <h2 id="User_input_and_controls_workflow" name="User_input_and_controls_workflow">ユーザー入力とコントロールのワークフロー</h2>
 
-<p>The following diagram illustrates the typical workflow for implementing user input mechanisms:</p>
+<p>次の図式は、ユーザー入力の仕組みを実装するための典型的なワークフローを説明しています。</p>
 
 <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p>
 
-<p>First of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. Once you decided the input mechanisms, you can control them using tools offered by the web platform or JavaScript libraries.</p>
+<p>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリーによって提供されているツールを使い、制御することができます。</p>
 
 <h2 id="Recommendations" name="Recommendations">推奨事項</h2>
 
-<p>Available input mechanisms depend on the capabilities of the device running the application:</p>
+<p>利用できる入力の仕組みはアプリを動かしているデバイスの性能に依存します。</p>
 
 <ul>
- <li>Some devices provide touchscreen displays: the Web Platform offers <a href="/ja/docs/Web/Guide/Events/Touch_events">touch events</a> to interpret finger activity on touch-based user interfaces.</li>
- <li>For devices providing a mouse/touchpad as a pointing method, the <a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> helps you in implementing a first person 3D game or other applications requiring full control of the pointing device. And the <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> helps you in displaying your app in fullscreen mode.</li>
- <li>Using features such as <a href="/ja/docs/Web/Guide/HTML/Content_Editable">contentEditable</a> elements you can implement fast rich-text editors and with <a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">Drag&amp;Drop</a> let users moving elements inside your app. When screen orientation matters for your application, through the <a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a> you can read the screen orientation state and perform other actions.</li>
- <li>You should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.</li>
+ <li>デバイスの中にはタッチスクリーンディスプレイを提供するものがあります。そのウェブプラットフォームは、タッチを基にしたユーザーインターフェースで指の動きを解釈するための<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>を提供します。</li>
+ <li>ポインターを操作する方法としてマウスやタッチパッドを提供しているデバイスの場合、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> が一人称視点の 3D ゲームの実装や、他のアプリがポイントを合わせているデバイスの全ての制御を要求するのに役立ちます。そして <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> は、あなたのアプリをフルスクリーンモードで表示するのに役立ちます。</li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツが編集可能な要素（contentEditable など）</a>のような機能を使うことで、速いリッチテキストエディターを実装することができ、そして<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a> はユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API </a>を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
+ <li>キーボードのアクセシビリティが適切か常に気に掛ける必要があります。多くのユーザーはキーボードのみを使いウェブサイトやアプリを操作します。ですので、あなたのシステムの機能性からそれを除外することは良くない考えです。</li>
 </ul>
 
-<p>The following is a set of recommendations and best practices for using such tools in Open Web Apps.</p>
+<p>以下は推奨事項一式であり、オープンなウェブアプリでそのようなツールを利用するためのベストプラクティスです。</p>
 
-<h3 id="Decide_what_input_mechanism_you’re_using">Decide what input mechanism you’re using</h3>
+<h3 id="Decide_what_input_mechanism_you’re_using">使用する入力の仕組みを決める</h3>
 
 <h4 id="Keyboard" name="Keyboard">キーボード</h4>
 
-<p>Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:</p>
+<p>キーボード入力はあなたのアプリによって制御できます。例えば、何らかのキーが押された時に制御を追加したい場合、ウィンドウオブジェクトにイベントリスナーを追加する必要があります。</p>
 
 <pre class="brush: js notranslate">window.addEventListener("keydown", handleKeyDown, true);
 window.addEventListener("keyup", handleKeyUp, true);</pre>
 
-<p>where <code>handleKeyDown</code> and <code>handleKeyUp</code> are the functions implementing the controls about the <code>keydown</code> and <code>keyup</code> events.</p>
+<p><code>handleKeyDown</code> と <code>handleKeyUp</code> は、<code>keydown</code> と <code>keyup</code> イベントについての制御を実装する関数です。</p>
 
 <div class="note">
-<p><strong>注</strong>: Have a look at the <a href="/ja/docs/Web/Reference/Events">Events reference</a> and {{domxref("KeyboardEvent")}} guide to find out more about keyboard events.</p>
+<p><strong>注</strong>: キーボードイベントについて、より知りたい人は<a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a> と {{domxref("KeyboardEvent")}} ガイドをご確認ください。</p>
 </div>
 
 <h4 id="Mouse" name="Mouse">マウス</h4>
 
-<p>The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include <a href="/ja/docs/Web/Reference/Events/click"><code>click</code></a>, <a href="/ja/docs/Web/Reference/Events/dblclick"><code>dblclick</code></a>, <a href="/ja/docs/Web/Reference/Events/mouseup"><code>mouseup</code></a>, and <a href="/ja/docs/Web/Reference/Events/mousedown"><code>mousedown</code></a>. The list of all events using the Mouse Event Interface is provided in the <a href="/ja/docs/Web/Reference/Events">Events reference</a>.</p>
+<p>ユーザーがマウスのようなポインティングデバイスと関わっている時に発生するイベントは {{domxref("MouseEvent")}} DOM インターフェースによって表されます。一般的なマウスイベントは、<a href="/ja/docs/Web/Reference/Events/click"><code>click イベント</code></a>、<a href="/ja/docs/Web/API/Element/dblclick_event"><code>dblclick イベント</code></a>、<a href="/ja/docs/Web/API/Element/mouseup_event"><code>mouseup イベント</code></a>、そして <a href="/ja/docs/Web/Reference/Events/mousedown"><code>mousedown イベント</code></a>を含みます。マウスイベントインターフェースが使用している全てのイベントの一覧は、<a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a>に記載されています。</p>
 
 <p>When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag &amp; Drop (see below).</p>
+<p>入力デバイスがマウスの場合、ユーザー入力を Pointer Lock API やドラッグ＆ドロップ API の実装でも制御できます (下記を参照してください)。</p>
 
 <h4 id="Finger_touch" name="Finger_touch">指でのタッチ</h4>
 
@@ -150,14 +151,14 @@ if (elem.requestFullscreen) {
 
 <h4 id="contentEditable" name="contentEditable">コンテンツを編集可能にする</h4>
 
-<p><a href="/ja/docs/Web/HTML/Global_attributes#contenteditable"><code>contenteditable</code></a> 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。</p>
+<p><a href="/ja/docs/Web/HTML/Global_attributes#attr-contenteditable"><code>contenteditable</code></a> 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。</p>
 
 <pre class="brush: html notranslate">&lt;div contenteditable="true"&gt;
     このテキストは閲覧者が編集することができます。
 &lt;/div&gt;</pre>
 
 <div class="note">
-<p><strong>注</strong>: 互換性や例、その他リソースに関する情報は <a href="/ja/docs/Web/Guide/HTML/Content_Editable">コンテンツを編集可能にするガイド</a>で確認することができます。</p>
+<p><strong>注</strong>: 互換性や例、その他リソースに関する情報は <a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にするガイド</a>で確認することができます。</p>
 </div>
 
 <h2 id="Examples" name="Examples">例</h2>
@@ -168,7 +169,7 @@ if (elem.requestFullscreen) {
  <dt><strong><a href="/ja/docs/Web/API/Pointer_Lock_API#example">Simple pointer lock demo</a></strong></dt>
  <dd>We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a <code>{{htmlelement("canvas")}}</code> element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.</dd>
  <dt><strong><a href="http://html5demos.com/contenteditable">コンテンツを編集可能にするデモ</a></strong></dt>
- <dd>このデモは、編集可能なドキュメントセクションを作成することに利用できる contenteditable がどのように動くか表示しており、その状態はその後 <a href="/ja/docs/Web/Guide/API/DOM/Storage">ローカルストレージ</a>を使い保存されます。</dd>
+ <dd>このデモは、編集可能なドキュメントセクションを作成することに利用できる contenteditable がどのように動くか表示しており、その状態はその後 <a href="/ja/docs/Web/API/Web_Storage_API">ローカルストレージ</a>を使い保存されます。</dd>
 </dl>
 
 <h2 id="Tutorials" name="Tutorials">チュートリアル</h2>
@@ -176,9 +177,9 @@ if (elem.requestFullscreen) {
 <ul>
  <li><a href="/ja/docs/Web/Guide/DOM/Events/Touch_events">タッチイベントガイド</a></li>
  <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面の回転の管理</a></li>
- <li><a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">全画面モードの使用</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">複数のアイテムのドラッグ＆ドロップ</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Drag_operations">ドラッグ操作ガイド</a></li>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面モードの使用</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">複数のアイテムのドラッグ＆ドロップ</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">ドラッグ操作ガイド</a></li>
 </ul>
 
 <h2 id="Reference" name="Reference">関連情報</h2>
@@ -186,12 +187,12 @@ if (elem.requestFullscreen) {
 <ul>
  <li>{{domxref("MouseEvent")}}</li>
  <li>{{domxref("KeyboardEvent")}}</li>
- <li><a href="/ja/docs/Web/Guide/Events/Touch_events">タッチイベント</a></li>
- <li>{{domxref("Pointer_Lock_API")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面回転 API</a></li>
- <li><a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">全画面 API</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">ドラッグ＆ドロップ</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Content_Editable">コンテンツを編集可能にする</a></li>
+ <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li>
+ <li><a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a></li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a></li>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a></li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にする</a></li>
  <li><a href="/ja/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li>
  <li><a href="/ja/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li>
 </ul>