キーボード操作への反応 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ユーザーがハードウェア キーボード、スクリーン キーボード、またはタッチ キーボードを通じて操作できるアプリを設計し、構築します。
ヒント このトピックの情報は、JavaScript を使ったアプリにのみ適用されます。
C++、C#、Visual Basic を使ったアプリについては、「キーボード操作への反応 (XAML)」をご覧ください。
DirectX と C++ を使ったアプリについては、「マウス コントロールの開発 (DirectX と C++)」をご覧ください。
前提条件: JavaScript を使ってアプリを開発するのが初めての場合は、以下のトピックに目を通して、ここで説明されているテクノロジをよく理解できるようにしてください。
JavaScript を使った初めての Windows ストア アプリの作成
JavaScript を使った Windows ストア アプリのためのロードマップ
イベントについては、「クイック スタート: HTML コントロールの追加とイベントの処理」をご覧ください。
アプリの機能の概要:
この機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。
ユーザー エクスペリエンス ガイドライン:
プラットフォーム コントロール ライブラリ (HTML と XAML) は、標準的な対話式操作、アニメーション化された物理的効果、視覚的フィードバックなど、Windows の完全なユーザー操作エクスペリエンスを提供しています。 操作のサポートをカスタマイズする必要がない場合は、これらのビルトイン コントロールを使います。
プラットフォーム コントロールでは十分に対応できない場合は、以下のユーザー操作ガイドラインに従うと、どの入力モードでも一貫性のある、魅力的でイマーシブな対話式操作エクスペリエンスを実現できます。これらのガイドラインは、主にタッチ入力を対象として説明していますが、タッチパッド、マウス、キーボード、スタイラスでの入力にも当てはまります。
サンプル: アプリのサンプルで、この機能の動作を実際に確かめることができます。
スクリーン キーボードを表示したときの対応のサンプルのページ
概要
キーボード入力は、アプリのユーザー操作エクスペリエンスの中でも重要な部分です。キーボードは、特定の障碍のあるユーザーや、キーボードを使った方がアプリを効率よく操作できると考えるユーザーにとって欠かせません。たとえば、Tab キーと方向キーを使ってアプリ内を移動し、Space キーと Enter キーを使って UI 要素をアクティブ化し、キーボード ショートカットを使ってコマンドにアクセスできるようにする必要があります。
適切に設計されたキーボード UI はソフトウェアのアクセシビリティの重要な要素であり、視覚に障碍のあるユーザーや、特定の運動障碍のあるユーザーがアプリ内を移動したり、その機能を操作したりするのに使います。このようなユーザーはマウスを操作できないため、代わりにさまざまな支援技術 (キーボード強化ツール、スクリーン キーボード、スクリーン拡大機能、スクリーン リーダー、音声入力ユーティリティなど) が不可欠である可能性があります。
最も一般的な種類のキーボードは、デバイスに物理的に接続されている外付けのハードウェア キーボードです。ハードウェア キーボードに加えて、Windows 8 には 2 種類のソフトウェア キーボードが用意されています。
スクリーン キーボードは、Windows で物理的なキーボードの代わりに使うことができるソフトウェア キーボードです。タッチ、マウス、ペン/スタイラス、またはその他のポインティング デバイスを通じてデータを入力します (タッチ スクリーンは必須ではありません)。スクリーン キーボードは、物理的なキーボードが存在しないシステムや、運動障碍により一般的な物理入力デバイスを使うことができないユーザーのために用意されています。スクリーン キーボードは、ハードウェア キーボードの機能のすべて、または少なくともほとんどをエミュレートします。
.png "スクリーン キーボード")
タッチ キーボードは、タッチ入力でのテキスト入力に使われる、視覚的なソフトウェア キーボードです。タッチ キーボードはテキスト入力専用であり (ハードウェア キーボードをエミュレートしません)、テキスト フィールドや編集可能なテキスト コントロールにフォーカスがあるときにだけ表示されるので、Windows のスクリーン キーボードの代わりになるものではありません。
注 スクリーン キーボードの方がタッチ キーボードより優先され、スクリーン キーボードが表示されている場合はタッチ キーボードは表示されません。
次に、タッチ キーボードの例を示します。
Windows - 既定のレイアウト:
.png "既定のレイアウトのタッチ キーボード")
Windows - 親指レイアウト (言語によっては使用できません):
.png "親指レイアウトのタッチ キーボード")
Windows Phone - 既定のレイアウト:
.png "Windows Phone のタッチ キーボード")
キーボード イベント
次のキーボード イベントは、ハードウェア キーボードとタッチ キーボードの両方で発生します。
| イベント | 説明 |
|---|---|
| keydown | 任意のキーが押されると発生します。 |
| keyup | 任意のキーが離されると発生します。 |
| keypress | 英数字キーが押されると発生します。 |
キーボード イベントとフォーカス
UI のコントロールに入力フォーカスがあるときにだけ、キーボード イベントが生成されます。個々のコントロールは、ユーザーがレイアウト上でコントロールを直接クリックまたはタップするか、Tab キーを使ってコンテンツ領域内のタブ順に入ると、フォーカスを取得します。
focus メソッドを呼び出して、フォーカスを強制的に設定することもできます。これは、UI が読み込まれたときに既定ではキーボード フォーカスが設定されないため、ショートカット キーを実装する場合に必要です。詳しくは、このトピックの「ショートカット キーの例」をご覧ください。
コントロールが入力フォーカスを受け取るには、そのコントロールが有効になっていて、かつ表示されている必要があります。これは、ほとんどのコントロールの既定の状態です。コントロールに入力フォーカスがあると、このトピックで後ほど説明するように、キーボード入力イベントを発生させ、応答することもできます。また、focus、focusin、blur、focusout の各イベントを処理して、フォーカスを受け取るコントロールやフォーカスを失うコントロールに応答することもできます。
既定では、コントロールのタブ順は、HTML 内での出現順になっています。ただし、tabIndex プロパティを使って、この順序を変更できます。詳しくは、「キーボード アクセシビリティの実装 (HTML)」をご覧ください。
キーボード イベント ハンドラー
イベント ハンドラーを追加するときは、HTML 内で宣言を使うのではなく、プログラムを通じて追加することをお勧めします (「マークアップでのイベント ハンドラーの設定をお勧めしない理由」をご覧ください)。
キーボード操作に直接関連付けられているイベントには、keydown、keyup、keypress の 3 つがあります。
ほとんどのイベント ハンドラーは 1 つの引数 (イベントに関する情報が含まれている Event object) しか受け取りません。キーボード イベントのプロパティで特に役立つものとして、target と keyCode があります。イベントのバブルが許される場合は、currentTarget もこれに含まれます。
キー
通常、特定のキー値を処理するにはキーボード イベントをリッスンします。押されたキーまたは離されたキーを特定するには、イベント データの keyCode 値を調べます。keyCode は Key 値を返します。Key 列挙体には、サポートされているすべてのキーが含まれています。
キーボード ショートカット
キーボードのナビゲーションのアクティブ化をアプリに実装するだけでなく、ショートカットをアプリの機能に実装することをお勧めします。ショートカットは、ユーザーが効率的にアプリの機能にアクセスできるようにして、生産性を向上させるためのキーの組み合わせ (通常は修飾キーと文字キーの組み合わせ) です。
アクセス キーは、アプリ内の個別の UI 要素へのショートカットです。アクセス キーは、Alt キーと文字キーで構成されます。
ショートカット キーは、アプリ コマンドへのショートカットです。アプリにはコマンドに正確に対応する UI がある場合とない場合があります。アクセラレータ キーは、Ctrl キーや Shift キーと文字キーで構成されます。
x-ms-acceleratorKey 属性を使うと、アクセラレータ キーが存在することをスクリーン リーダーなどの支援技術に通知できます。この属性では、アクセラレータ キーの動作は指定されません。アプリでアクセラレータ キーを処理するには、keydown、keyup、keypress などのキーボード イベント ハンドラーを実装する必要があります。
キーボード イベントのリッスンと処理
ここでは、keydown イベントのハンドラーを指定して定義する方法を示します。
注 これらの例は、「ユーザー操作のカスタマイズの概要 (HTML)」に対応するカスタム ユーザー操作のサンプルから引用したものです。
このイベント ハンドラーでは、すべてのキーボード操作をフィルター処理し、左方向キーと右方向キーだけを処理します。
// Key down handler.
// Take input from only the left and right arrow keys.
// Left: counter-clockwise rotation.
// Right: clockwise rotation.
this._element.addEventListener("keydown", function onKeyDownE(eventInfo) {
// Process keystroke only if color selected.
if (!that.selectedColor) {
return;
}
if (eventInfo.target === msGesture_ColorMixer.target) {
if (that._focus === false) {
return;
}
// Set increment or decrement value based on key pressed.
var increment;
if (eventInfo.keyCode === WinJS.Utilities.Key.leftArrow) {
increment = -1;
}
else if (eventInfo.keyCode === WinJS.Utilities.Key.rightArrow) {
increment = 1;
}
else return;
// Attach first contact and track input device type.
if (!that._pointerType) {
that._pointerType = "keyboard";
}
// Rotate the color mixer.
_Rotate(increment);
// Event tracking.
//document.getElementById("status").innerHTML += "keydown :: " + eventInfo.keyCode;
}
}, false);
HTML マークアップで accesskey 属性と x-ms-acceleratorkey 属性を使って、ショートカット キーを宣言します。
<div class="ColorSelector" id="colorSelector">
<!--
The aria-label attribute can be used when:
- the name of an element cannot be determined
programmatically from the content of the element.
- providing a visible label and/or tooltip is not
the desired user experience.
However, if the label text is visible on screen, you should
use aria-labelledby instead of aria-label.
-->
<div class="Color"
id="red"
aria-labelledby="redLabel redValue"
tabindex="0"
accesskey="R">
<span class="ColorLabel"
id="redLabel"
data-win-res="{textContent: 'colorpicker_red'}" />
<span class="ColorValue" id="redValue" />
</div>
<div class="Color"
id="green"
aria-labelledby="greenLabel greenValue"
tabindex="0"
accesskey="G">
<span class="ColorLabel"
id="greenLabel"
data-win-res="{textContent: 'colorpicker_green'}" />
<span class="ColorValue" id="greenValue" />
</div>
<div class="Color"
id="blue"
aria-labelledby="blueLabel blueValue"
tabindex="0"
accesskey="B">
<span class="ColorLabel"
id="blueLabel"
data-win-res="{textContent: 'colorpicker_blue'}" />
<span class="ColorValue" id="blueValue" />
</div>
<!--
Ctrl+S invokes the Save button and is exposed by a tooltip.
-->
<button
id="sendButton"
value="Send"
title="Send (Ctrl+S)"
x-ms-acceleratorkey="S">Send</button>
フォーカスの設定や要素の呼び出しを行うためのキーボード機能はフレームワークでサポートされますが、アプリでアクセラレータ キーを処理するためには、keydown、keyup、keypress などのキーボード イベント ハンドラーを実装する必要があります。
var sendButton = document.getElementById('sendButton');
sendButton.addEventListener('keyup', function(e) {
var itm = e.srcElement;
if (e.ctrlKey && e.keyCode === WinJS.Utilities.Key.s ) {
// Invoke send functionality.
}
});
イベントの変更
preventDefault は、ドキュメント オブジェクト モデル (DOM) を通じたイベントの伝達を妨げることなく、イベントの既定の動作を取り消します。イベントを取り消すことができるかどうかをチェックするには、cancelable を使います。取り消し可能でないイベントに対して preventDefault を呼び出しても効果はありません。
stopPropagation は、イベントのキャプチャまたはバブルの段階でイベントの伝達を取り消します。ただし、そのイベントは、イベント フローが停止する前に、現在のターゲットに設定されているすべてのイベント リスナーに (キャプチャの場合でもバブルの場合でも) ディスパッチされます。残りのハンドラーがまったく実行されないようにするには、代わりに stopImmediatePropagation メソッドを使います。
タッチ キーボード
テキスト入力コントロールでは、タッチ キーボードが自動的にサポートされます。ユーザーがタッチ入力を使って、テキスト コントロールに入力フォーカスを設定すると、タッチ キーボードが自動的に表示されます。入力フォーカスがテキスト コントロールにないときには、タッチ キーボードが表示されません。
タッチ キーボードが表示されると、フォーカスがある要素をユーザーが見ることができるように、UI が自動的に再配置されます。この場合、他の重要な UI 領域が画面の表示領域外に移動することがあります。ただし、タッチ キーボードが表示されたときの既定の動作を無効にして、独自に UI を調整することができます。詳しくは、スクリーン キーボードを表示したときの対応のサンプルのページをご覧ください。
テキスト入力を必要とするカスタム コントロールを、標準のテキスト入力コントロールからの派生コントロールとして作成しない場合は、適切な UI オートメーション コントロール パターンを実装してタッチ キーボードを追加し、サポートできます。詳しくは、タッチ キーボードのサンプルのページをご覧ください。
タッチ キーボードのキーが押されると、ハードウェア キーボードのキーが押されたときとまったく同じように、keydown イベントと onkeyup イベントが発生します。ただし、タッチ キーボードでは、Ctrl + A、Ctrl + Z、Ctrl + X、Ctrl + C、Ctrl + V に対応する入力イベントは発生しません。これらは、入力コントロールでテキストを操作するために予約されています。
キーボード操作のサポートのユーザー エクスペリエンス ガイドラインに関するページ
ここでは、キーボード操作をサポートするためのガイドラインを示します。
全般
ユーザーが、アプリでサポートされているすべてのタスクをハードウェア キーボードまたはスクリーン キーボードだけで実行できるようにしてください。注 タッチ キーボードはテキスト入力にのみ使い、アプリ コマンドやシステム コマンドの入力には使いません。
アプリの起動時に、ユーザーが最初に直感的に操作する (または、その可能性が最も高い) 要素に、最初のキーボード フォーカスを設定します。通常は、アプリのメイン コンテンツ ビューが最適な場所です。ユーザーはすぐに方向キーを使ってコンテンツをスクロールできます。特定のコントロールへのフォーカスの設定について詳しくは、「focus」をご覧ください。
Tab キーと方向キーを押したときに、論理的な順序でコンテンツ内を移動するようにします。
既定でタブ オーダーに含まれていないすべての対話型 UI 要素の tabIndex 属性を 0 以上の値に設定します。スクリーン リーダー ユーザーは Tab キーを使って対話型の UI 要素間を移動するので、tabIndex 属性の設定は重要です。
コンポジット要素の子要素間で正しい内部ナビゲーションを実行するために、キーボード ショートカットとして方向キーを使います。ツリー ビュー ノードに、展開折りたたみとノードのアクティブ化を処理するための別の子要素がある場合は、左右の方向キーを使って、キーボードの展開折りたたみ機能を提供します。
クリックできる各 UI 要素をキーボードでも呼び出すことができるようにします。
アプリの主な機能にキーボード ショートカットを実装します (ショートカットは、ユーザーが効率的にアプリの機能にアクセスできるようにして、生産性を向上させるためのキーの組み合わせです)。
アクセス キーは、アプリ内の UI 要素へのショートカットです。アクセス キーは、Alt キーと文字キーで構成されます。
ショートカット キーは、アプリ コマンドへのショートカットです。アプリには、コマンドに正確に対応する UI を実装できます。ショートカット キーは、Ctrl キーと文字キーで構成されます。
スクリーン リーダーやその他の支援技術を使うユーザーがアプリのショートカット キーを簡単に見つけられるようにする必要があります。accessKey 属性と -ms-AcceleratorKey 属性を使ってアプリの HTML マークアップでショートカット キーを宣言するだけでなく、ヒント、アクセシビリティ対応の名前、アクセシビリティ対応の説明など、画面上の伝達形式を使ってショートカット キーを伝えます。ショートカット キーについてアプリのヘルプ コンテンツで十分に説明する必要があります。
ショートカット キーの実装について詳しくは、Windows ユーザー エクスペリエンス ガイドラインのショートカット キーに関する説明をご覧ください。
ユーザーが Windows ストア アプリで使い慣れている既定のキーボード ショートカットを定義し直さないください。完全な一覧については、「キーボード ショートカット」をご覧ください。
ハードウェア
キーボードが接続されているかどうかを判断し、アプリ UI のどの部分にキーボード ハードウェアが直接アクセスできるかを特定するために、キーボード デバイス機能 (KeyboardCapabilities) を照会します。デバイス機能の照会について詳しくは、「クイック スタート: ポインター デバイスの識別」をご覧ください。
キーボード ボタンを、アプリの適切な UI ("戻る" ボタンと "進む" ボタン) に関連付けてください。
視覚的なフィードバック
- キーボード操作でのみフォーカス用の四角形を使います。ユーザーがタッチ操作を始めたら、キーボードの UI を徐々にフェード アウトします。 これにより、UI の簡潔さが保たれます。
- 静的テキストなど、要素で対話式操作がサポートされていない場合は、視覚的なフィードバックを返さないでください。
- 同じ入力対象を表すすべての要素に対して視覚的なフィードバックを同時に表示します。
- パン、回転、ズームなど、タッチ ベースの操作をエミュレートするためのヒントとして画面ボタンを提供します (+、- など)。
視覚的なフィードバックに関する一般的なガイダンスについては、「視覚的なフィードバックのガイドライン」をご覧ください。
関連トピック
概念