ユーザー入力とコントロール

次の図式は、ユーザー入力の仕組みを実装するための典型的なワークフローを説明しています。

最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリーによって提供されているツールを使い、制御することができます。

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

• デバイスの中にはタッチスクリーンディスプレイを提供するものがあります。そのウェブプラットフォームは、タッチを基にしたユーザーインターフェイスで指の動きを解釈するためのタッチイベントを提供します。
• ポインターを操作する方法としてマウスやタッチパッドを提供しているデバイスの場合、Pointer Lock API が一人称視点の 3D ゲームの実装や、他のアプリがポイントを合わせているデバイスの全ての制御を要求するのに役立ちます。そして Fullscreen API は、あなたのアプリを全画面モードで表示するのに役立ちます。
• コンテンツが編集可能な要素（contentEditable など）のような機能を使うことで、速いリッチテキストエディターを実装することができ、そしてドラッグ＆ドロップ APIはユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、Screen Orientation API を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
• キーボードのアクセシビリティが適切か常に気に掛ける必要があります。多くのユーザーはキーボードのみを使いウェブサイトやアプリを操作します。ですので、あなたのシステムの機能性からそれを除外することは良くない考えです。

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

キーボード

キーボード入力はあなたのアプリによって制御できます。例えば、何らかのキーが押された時に制御を追加したい場合、ウィンドウオブジェクトにイベントリスナーを追加する必要があります。

window.addEventListener("keydown", handleKeyDown, true);
window.addEventListener("keyup", handleKeyUp, true);

handleKeyDown と handleKeyUp は、keydown と keyup イベントについての制御を実装する関数です。

マウス

ユーザーがマウスのようなポインティングデバイスと関わっている時に発生するイベントは MouseEvent DOM インターフェイスによって表されます。一般的なマウスイベントは、click イベント、dblclick イベント、mouseup イベント、そして mousedown イベントを含みます。マウスイベントインターフェイスが使用している全てのイベントの一覧は、イベントリファレンスに記載されています。

入力デバイスがマウスの場合、ユーザー入力を Pointer Lock API やドラッグ＆ドロップ API の実装でも制御できます (下記を参照してください)。

指でのタッチ

タッチスクリーンデバイスにインストールされることを目的としている ウェブアプリを開発している時、ディスプレイ解像度とユーザー入力に関して異なる性能を考慮することは良いプラクティスです。タッチイベントは、タッチスクリーンデバイス上のインタラクションな要素と一般的なインタラクションジェスチャーを実装するのに役立ちます。

タッチイベントを使いたいのであれば、イベントリスナーを追加して、イベントが発火された時に呼び出されるハンドラー関数を指定する必要があります。

element.addEventListener("touchstart", handleStart, false);
element.addEventListener("touchcancel", handleCancel, false);
element.addEventListener("touchend", handleEnd, false);
element.addEventListener("touchmove", handleMove, false);

ここでの element は、あなたがタッチイベントを登録したい DOM 要素です。

ポインターイベント

マウス、指でのタッチ、ペン入力など複数の入力形式が内蔵されているデバイスを扱う時、これら全ての異なる制御の仕組みを機能させるソリューションを開発することは難しいかもしれません。Pointer Events は、デバイス毎の扱いを標準化することにより、開発者がデバイスを横断してイベントを管理することをより簡単にするのに役立ちます。マウスカーソル、ペン、タッチ（マルチタッチを含む）、またはその他のポインティング入力デバイスによって、ポインターはスクリーン上のあらゆる接点となることができます。汎用的なポインター入力を扱うためのイベントは、pointerdown、pointermove、pointerup、pointerover、pointerout などのマウス用のイベントとよく似ています。

ポインターロック

典型的なゲーム開発では、ブラウザーやスクリーンの境界を超えた時でさえもマウスイベントにアクセスすることが必要なケースがあるかもしれません。Pointer Lock API はポインティングデバイスの全ての制御を可能にします。

以下は element にポインターロックをリクエストしているコードです。

element.requestPointerLock();

画面の向き

画面の向きがあなたのアプリケーションの問題である時、Screen Orientation API を通して画面の向きの状態を参照し、状態が変化した時に通知し、そして画面の向きを特定の状態（大抵はポートレートもしくはランドスケープ）に固定することができます。

画面の向きのデータは screen.orientation 属性、または orientation メディア特性を通して取得することができます。screen.orientation が変化した時、screen.orientationchange イベントがスクリーンオブジェクトで発火されます。screen.lockOrientation メソッドを呼ぶことで画面の向きを固定することができます。また、screen.unlockOrientation メソッドはそれまで設定されていた画面のロックを全て解除します。

全画面

あなたのアプリケーションの要素を全画面モードで表示する必要があるかもしれません(例えば <video> のような)。その要素で 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>

私たちが実装する点は以下です:

• ドラッグ可能にしたい要素の draggable 属性を true にセットします。
• dragstart イベントのためのリスナーを追加し、このリスナーの中にドラッグデータをセットします。

コンテンツを編集可能にする

contenteditable 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。

<div contenteditable="true">このテキストは閲覧者が編集することができます。</div>

複数のタッチポイントを同時に追跡する

この例は一度に複数のタッチ箇所を追跡しており、ユーザーは <canvas> の中で一本以上の指で同時に描くことができます。タッチイベントをサポートしているブラウザーでのみ動きます。

シンプルなポインターロックデモ

シンプルなコントロールシステムをセットアップするためのポインターロックの使い方を紹介するために、シンプルなポインターロックデモを記載しています。このデモでは <canvas> 要素の中にボールを描くために JavaScript を使っています。canvas をクリックすると、ポインターロックはその後、マウスポインターの除去と直接マウスを使ってボールを移動させるために利用されます。

コンテンツを編集可能にするデモ

このデモは、編集可能なドキュメントセクションを作成することに利用できる contenteditable がどのように動くか表示しており、その状態はその後 ローカルストレージを使い保存されます。

• タッチイベントガイド
• 画面の向きの管理
• 全画面モードの使用
• 複数のアイテムのドラッグ＆ドロップ
• ドラッグ操作ガイド

• MouseEvent
• KeyboardEvent
• タッチイベント
• Pointer Lock API
• Screen Orientation API
• Fullscreen API
• ドラッグ＆ドロップ API
• コンテンツを編集可能にする
• Keyboard events in Firefox OS TV
• Implementing TV remote control navigation