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

現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術について、より詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、タッチイベントPointer Lock APIScreen Orientation APIFullscreen APIドラッグ&ドロップ API などがあります。

ユーザー入力とコントロールのワークフロー

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

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

推奨事項

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

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

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

使用する入力の仕組みを決める

キーボード

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

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

handleKeyDownhandleKeyUp は、keydownkeyup イベントについての制御を実装する関数です。

メモ: キーボードイベントについて、より知りたい人はイベントリファレンスKeyboardEvent ガイドをご確認ください。

マウス

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

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

指でのタッチ

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

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

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

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

メモ: タッチイベントでできることについての更なる情報は、タッチイベントガイドを読んでください。

ポインターイベント

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

メモ: Pointer Events はまだ広くサポートされていませんが、pointer.js polyfill は Mozilla Github で利用可能です。

コントロールの実装

ポインターロック

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

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

js
element.requestPointerLock();

メモ: 全てのチュートリアルとリファレンスは、Pointer Lock API のページを読んでください。

画面の向き

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

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

メモ: Screen Orientation API についてのより多くの情報は画面の向きの管理で確認することができます。

全画面

あなたのアプリケーションの要素を全画面モードで表示する必要があるかもしれません(例えば <video> のような)。その要素で Element.requestFullscreen() を呼び出すことによって全画面モードを実現することができます。多くのブラウザーが、これをまだベンダー接頭辞とともに実装していることを覚えておいてください。ですので、あなたのコードを以下のようにフォークする必要があるかもしれません:

js
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 によりあなたのアプリケーションのユーザーは、クリックして要素を超えてマウスボタンを押し続け、他の場所にドラッグし、そしてその要素を移動先にドロップするためにマウスボタンを離すことができます。

以下は、コンテンツのセクションにドラッグできるようにする例です。

html
<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 イベントのためのリスナーを追加し、このリスナーの中にドラッグデータをセットします。

メモ: MDN のドラッグ&ドロップドキュメントでもっと多くの情報を確認することができます。

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

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

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

メモ: 互換性や例、その他リソースに関する情報は コンテンツを編集可能にするガイドで確認することができます。

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

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

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

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

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

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

チュートリアル

関連情報