現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術について、より詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、タッチイベント、Pointer Lock API、Screen Orientation API、Fullscreen API、ドラッグ＆ドロップ API などがあります。
次の図式は、ユーザー入力の仕組みを実装するための典型的なワークフローを説明しています。
最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリーによって提供されているツールを使い、制御することができます。
利用できる入力の仕組みはアプリを動かしているデバイスの性能に依存します。
以下は推奨事項一式であり、オープンなウェブアプリでそのようなツールを利用するためのベストプラクティスです。
キーボード入力はあなたのアプリによって制御できます。例えば、何らかのキーが押された時に制御を追加したい場合、ウィンドウオブジェクトにイベントリスナーを追加する必要があります。
window.addEventListener("keydown", handleKeyDown, true);
window.addEventListener("keyup", handleKeyUp, true);
handleKeyDown と handleKeyUp は、keydown と keyup イベントについての制御を実装する関数です。
注: キーボードイベントについて、より知りたい人はイベントリファレンス と {{domxref("KeyboardEvent")}} ガイドをご確認ください。
ユーザーがマウスのようなポインティングデバイスと関わっている時に発生するイベントは {{domxref("MouseEvent")}} DOM インターフェースによって表されます。一般的なマウスイベントは、click イベント、dblclick イベント、mouseup イベント、そして mousedown イベントを含みます。マウスイベントインターフェースが使用している全てのイベントの一覧は、イベントリファレンスに記載されています。
入力デバイスがマウスの場合、ユーザー入力を Pointer Lock API やドラッグ＆ドロップ API の実装でも制御できます (下記を参照してください)。
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. Touch events can help you implement interactive elements and common interaction gestures on touchscreen devices.
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:
element.addEventListener("touchstart", handleStart, false);
element.addEventListener("touchcancel", handleCancel, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchmove", handleMove, false);
where element is the DOM element you want to register the touch events on.
注: For further information about what you can do with touch events, please read our touch events guide.
マウス、指でのタッチ、ペン入力など複数の入力形式が内蔵されているデバイスを扱う時、これら全ての異なる制御の仕組みを機能させるソリューションを開発することは難しいかもしれません。Pointer Events は、デバイス毎の扱いを標準化することにより、開発者がデバイスを横断してイベントを管理することをより簡単にするのに役立ちます。マウスカーソル、ペン、タッチ（マルチタッチを含む）、またはその他のポインティング入力デバイスによって、ポインターはスクリーン上のあらゆる接点となることができます。汎用的なポインター入力を扱うためのイベントは、pointerdown、pointermove、pointerup、pointerover、pointerout などのマウス用のイベントとよく似ています。
注: Pointer Events はまだ広くサポートされていませんが、pointer.js polyfill は Mozilla Github で利用可能です。
典型的なゲーム開発では、ブラウザやスクリーンの境界を超えた時でさえもマウスイベントにアクセスすることが必要なケースがあるかもしれません。Pointer Lock API はポインティングデバイスの全ての制御を可能にします。
以下は element にポインターロックをリクエストしているコードです。
element.requestPointerLock();
注: 全てのチュートリアルとリファレンスは、Pointer Lock API のページを読んでください。
画面の向きがあなたのアプリケーションの問題である時、Screen Orientation API を通して画面の向きの状態を参照し、状態が変化した時に通知し、そして画面の向きを特定の状態（大抵はポートレートもしくはランドスケープ）に固定することができます。
画面の向きのデータは {{domxref("screen.orientation")}} 属性、または orientation メディア特性を通して取得することができます。screen.orientation が変化した時、{{domxref("screen.orientationchange")}} イベントがスクリーンオブジェクトで発火されます。{{domxref("screen.lockOrientation")}} メソッドを呼ぶことで画面の向きを固定することができます。また、{{domxref("screen.unlockOrientation")}} メソッドはそれまで設定されていた画面のロックを全て解除します。
注: Screen Orientation API についてのより多くの情報は画面の向きの管理で確認することができます。
あなたのアプリケーションの要素を全画面モードで表示する必要があるかもしれません(例えば {{ htmlelement("video") }} のような)。その要素で {{domxref("Element.requestFullscreen()")}} を呼び出すことによって全画面モードを実現することができます。多くのブラウザーが、これをまだベンダー接頭辞とともに実装していることを覚えておいてください。ですので、あなたのコードを以下のようにフォークする必要があるかもしれません:
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();
}
注: 全画面の機能性をあなたのアプリケーションに追加することについてもっと知るには、私たちの全画面モードの使用についてのドキュメントを読んでください。
ドラッグ＆ドロップ API によりあなたのアプリケーションのユーザーは、クリックして要素を超えてマウスボタンを押し続け、他の場所にドラッグし、そしてその要素を移動先にドロップするためにマウスボタンを離すことができます。
以下は、コンテンツのセクションにドラッグできるようにする例です。
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
This text <strong>may</strong> be dragged.
</div>
私たちが実装する点は以下です:
注: MDN のドラッグ＆ドロップドキュメントでもっと多くの情報を確認することができます。
contenteditable 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。
<div contenteditable="true">
このテキストは閲覧者が編集することができます。
</div>
注: 互換性や例、その他リソースに関する情報は コンテンツを編集可能にするガイドで確認することができます。
{{htmlelement("canvas")}} with more than one finger at a time. It will only work on a browser that supports touch events.{{htmlelement("canvas")}} 要素の中にボールを描くために JavaScript を使っています。canvas をクリックすると、ポインターロックはその後、マウスポインターの除去と直接マウスを使ってボールを移動させるために利用されます。