path: root/files/ja/web/guide/user_input_methods/index.html

---
title: ユーザ入力とコントロール
slug: Web/Guide/User_input_methods
tags:
  - Screen Orientation
  - contenteditable
  - drag and drop
  - fullscreen
  - keyboard
  - mouse
  - pointer lock
  - touch
  - user input
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">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>次の図式は、ユーザー入力の仕組みを実装するための典型的なワークフローを説明しています。</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>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリーによって提供されているツールを使い、制御することができます。</p>

<h2 id="Recommendations" name="Recommendations">推奨事項</h2>

<p>利用できる入力の仕組みはアプリを動かしているデバイスの性能に依存します。</p>

<ul>
 <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>以下は推奨事項一式であり、オープンなウェブアプリでそのようなツールを利用するためのベストプラクティスです。</p>

<h3 id="Decide_what_input_mechanism_you’re_using">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>

<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>

<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>
</div>

<h4 id="Mouse" name="Mouse">マウス</h4>

<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>

<p>When developing web applications meant to be installed on touchscreen devices, it’s a good practice to take into consideration the different capabilities in terms of screen resolution and user input. <a href="/ja/docs/Web/Guide/Events/Touch_events">Touch events</a> can help you implement interactive elements and common interaction gestures on touchscreen devices.</p>

<p>If you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired:</p>

<pre class="brush: js notranslate">element.addEventListener("touchstart", handleStart, false);
element.addEventListener("touchcancel", handleCancel, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchmove", handleMove, false);</pre>

<p>where <code>element</code> is the DOM element you want to register the touch events on.</p>

<div class="note">
<p><strong>注</strong>: For further information about what you can do with touch events, please read our <a href="/ja/docs/Web/Guide/Events/Touch_events">touch events guide</a>.</p>
</div>

<h4 id="Pointer_Events" name="Pointer_Events">ポインターイベント</h4>

<p>When dealing with devices that incorporate multiple forms of input, like mouse, finger touch and pen input, it might be hard to develop a solution that works for all these different control mechanisms. <a href="http://www.w3.org/TR/pointerevents/">Pointer Events</a> help developers more easily manage events across devices by normalizing the handling of each one. A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. The events for handling generic pointer input look a lot like those for mouse: <code>pointerdown</code>, <code>pointermove</code>, <code>pointerup</code>, <code>pointerover</code>, <code>pointerout</code>, etc.</p>

<div class="note">
<p><strong>注</strong>: Pointer Events are not widely supported yet, but a <a href="https://github.com/mozilla/pointer.js">pointer.js polyfill</a> is available on Mozilla Github.</p>
</div>

<h3 id="Implement_controls" name="Implement_controls">コントロールの実装</h3>

<h4 id="Pointer_lock" name="Pointer_lock">ポインターロック</h4>

<p>In some cases, typically game development, you might need to access mouse events even when the cursor goes past the boundary of the browser or screen: the {{domxref("Pointer_Lock_API")}} gives you full control of the pointing device.</p>

<p>This is the code to request pointer lock on an <code>element</code>:</p>

<pre class="brush: js notranslate">element.requestPointerLock();</pre>

<div class="note">
<p><strong>注</strong>: For a full tutorial and reference, read our {{domxref("Pointer_Lock_API")}} page.</p>
</div>

<h4 id="Screen_Orientation" name="Screen_Orientation">画面の回転</h4>

<p>When screen orientation matters for your application, you can read the screen orientation state, be informed when this state changes, and able to lock the screen orientation to a specific state (usually portrait or landscape) through the <a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>.</p>

<p>Orientation data can be retrieved through the {{domxref("screen.orientation")}} attribute or through the <a href="/ja/docs/Web/Guide/CSS/Media_queries#orientation"><code>orientation</code></a> media feature. When <code>screen.orientation</code> changes, the {{domxref("screen.orientationchange")}} event is fired on the screen object. Locking the screen orientation is made possible by invoking the {{domxref("screen.lockOrientation")}} method, while the {{domxref("screen.unlockOrientation")}} method removes all the previous screen locks that have been set.</p>

<div class="note">
<p><strong>注</strong>: More information about the Screen Orientation API can be found in <a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Managing screen orientation</a>.</p>
</div>

<h4 id="Fullscreen" name="Fullscreen">全画面</h4>

<p>You might need to present an element of your application (such as a {{ htmlelement("video") }}, for example) in fullscreen mode. You can achieve this by calling {{domxref("Element.requestFullscreen()")}} on that element. Bear in mind that many browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this:</p>

<pre class="brush: js notranslate">var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}</pre>

<div class="note">
<p><strong>注</strong>: To find more out about adding fullscreen functionality your application, read our documentation about <a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">using fullscreen mode</a>.</p>
</div>

<h4 id="Drag_Drop" name="Drag_Drop">ドラッグ＆ドロップ</h4>

<p><a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">Drag &amp; Drop</a> allows your application’s users to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.</p>

<p>Here is an example that allows a section of content to be dragged.</p>

<pre class="brush: html notranslate">&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')"&gt;
    This text &lt;strong&gt;may&lt;/strong&gt; be dragged.

&lt;/div&gt;</pre>

<p>in which we:</p>

<ul>
 <li>Set the <a href="/ja/docs/Web/HTML/Global_attributes#draggable"><code>draggable</code></a> attribute to true on the element that you wish to make draggable</li>
 <li>Add a listener for the <a href="/ja/docs/Web/Events/dragstart"><code>dragstart</code></a> event and set the drag data within this listener</li>
</ul>

<div class="note">
<p><strong>注</strong>: You can find more information in the <a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">MDN Drag &amp; Drop documentation</a>.</p>
</div>

<h4 id="contentEditable" name="contentEditable">コンテンツを編集可能にする</h4>

<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/Editable_content">コンテンツを編集可能にするガイド</a>で確認することができます。</p>
</div>

<h2 id="Examples" name="Examples">例</h2>

<dl>
 <dt><strong><a href="/ja/DOM/Touch_events#Example">Tracking multiple touch points at a time</a></strong></dt>
 <dd>This example tracks multiple touch points at a time, allowing the user to draw in a <code>{{htmlelement("canvas")}}</code> with more than one finger at a time. It will only work on a browser that supports touch events.</dd>
 <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/API/Web_Storage_API">ローカルストレージ</a>を使い保存されます。</dd>
</dl>

<h2 id="Tutorials" name="Tutorials">チュートリアル</h2>

<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/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>

<ul>
 <li>{{domxref("MouseEvent")}}</li>
 <li>{{domxref("KeyboardEvent")}}</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>