拡張可能なコントロールのためのキーボード ショートカット

キーボード ショートカットは、拡張可能コントロールを作成するときの重要な考慮事項です。 この記事では、拡張可能なコントロールのキーボード ショートカットを選択するのに役立つ情報を提供します。 また、拡張可能なコントロールのキーボード ショートカットを実装するための推奨される方法について説明します。

概要

アクセシビリティに関しては、キーボード専用ユーザーがコントロールを使用できることが重要です。 したがって、キーボード ショートカットは、拡張可能コントロールを作成するときの重要な考慮事項です。 この記事では、キーボード ショートカットとして使用するキーの組み合わせを選択するのに役立つ情報を提供します。 ここでは、財務と運用アプリおよびサポートされているブラウザーで使用されているショートカット、実装を計画しているショートカット、1 つ以上のブラウザーがオーバーライドを許可しないショートカットを取り上げます。 この記事は、拡張可能なコントロールのキーボード ショートカットを実装するための推奨の方法についても説明します。

キーの組み合わせの選択

キーボード ショートカットとして使用するキーの組み合わせを選択するときは、その他の既存のショートカットを把握していることが重要です。 この方法で、ショートカットが既存のショートカットと重複しないことを保証できます。 既存のショートカットと衝突しようとすると、次のいずれかの結果が発生する可能性があります。

• この新しいキーボード ショートカットは、ブラウザーがそのキーの組み合わせを上書きすることを許可していないか、フレームワーク提供のショートカットが新しいショートカットよりも優先されるため動作しない可能性があります。
• 新しいキーボード ショートカットを使用すると、想定されているキーボード機能が削除されることがあります。これは、ユーザーが特定のキーの組み合わせによってブラウザー内の特定の機能を実行するためです。 または、フレームワークによって指定されたショートカットまたはその他のコントロール ショートカットを上書きすることによって、キーボード専用のユーザーは使用いようにすることもできます。

これらの潜在的な問題のため、キーの組み合わせを選択する際はこのガイダンスに従うことをお勧めします。

• 現在、財務と運用アプリで使用されている、または今後の実装で計画されているキーの組み合わせは、選択しないでください。
• サポートされているすべてのブラウザーで機能するためのキーの組み合わせを選択します。
• サポートされているブラウザで使用されているショートカットを上書きするときはよく注意してください。 重要な、または頻繁に使用されるブラウザー機能のショートカットを無効にしないでください。
• コントロール固有の動作のために、より長いキーの組み合わせ (3 つのキー) を使用します。 ユーザー定義のキーボード ショートカット用に、短い組み合わせを予約する必要があります。
• この組み合わせはいくつかの東ヨーロッパ言語の Alt+Gr にマップされ、他のショートカットと競合するため、Ctrl+Alt を含むキーの組み合わせを選択しないでください。

キーボード ショートカットのリンク

財務と運用アプリおよびサポートされているブラウザーに記載されているキーボード ショートカットへのリンクを次に示します。

• キーボード ショートカット
• Microsoft Edge
• Google Chrome
• Internet Explorer 11
• Apple Safari

計画されているキーボード ショートカット

使用されているキーボード ショートカットに加えて、今後の実装が計画されているいくつかのショートカットがあります。 フレームワークによって指定されたショートカットと競合を避けるために、拡張可能なコントロールには以下のキーの組み合わせを選択しないでください。

ブラウザーおよびオペレーティング システムのキーボード ショートカットを回避

重要な機能に対応するキーボード ショートカット

以下のテーブルは、ブラウザーまたはオペレーティング システムの重要な機能に対応するキーボード ショートカットの包括的ではない、簡潔なリストです。 この表では、キーの組み合わせを選択しないでください。

ブラウザーによってオーバーライドできないキーボード ショートカット

ブラウザーによっては、以下のキーボード ショートカットを上書きできません。 したがって、ショートカットは一部のブラウザーで機能しないため、次のキーの組み合わせは選択しないでください。

キーボード ショートカットの実装

このセクションに記載されている登録メカニズムを使用して、キーボード ショートカットを実装することをお勧めします。 この方法でコントロールのショートカットを登録すると、いくつかの利点があります。

• 必要な修飾子キーのみを指定します。 その他のモディファイアーを押すと、ショートカットは実行されません。 したがって、Ctrl + Shift +下向き矢印を押しても、Ctrl +下向き矢印に定義されたキーボード ショートカットはトリガーされません。
• コードは再利用することができます。
• false をハンドラー関数で返す場合、伝達はイベントで停止しません。 true を返す場合、(または戻り値を指定しない場合)、伝達は停止されます。
• Ctrl およびメタの変更要因は同じように処理されます。 したがって、iOS と Microsoft Windows の両方で動作するキーボード ショートカットを指定できます。 たとえば、Windows でのショートカット Ctrl+G は、iOS で Meta+G に翻訳されます。
• キーボード ショートカット用の組み込みテレメトリが使用されます。

キーボード ショートカットを定義する

1. コントロールのプロトタイプにショートカット オブジェクトを定義します。 次に、ショートカット オブジェクト内のキーボード ショートカットを定義します。 これらのショートカットは、次の構造が必要です。 使用しようとしているキー コードが、$dyn.ui.KeyCodes オブジェクトで定義されていることを確認します。

   Shortcuts: {
       Name: {
           Keys: { modifier1: true, modifier2:true, 
               keyCode: $dyn.ui.KeyCodes.* }, 
           // Only specify the modifiers you need 
           // (between alt, ctrl/meta, shift)
           Handler: function (evt) {
               // Code to handle shortcut.
           },
           // Additional code.
   }
   

   キーボード ショートカットに 1 つ以上のキー コードを適用する必要がある場合は、次のように、コードの配列で渡します。

   Keys: {modifier1:true, 
       keyCode:[$dyn.ui.KeyCodes.*, $dyn.ui.KeyCodes.*, ... ] } 
   // Note: If any of these keyCodes match then the handler is called. I.E. 
   // The keyCodes in the array are OR'd not AND'd
   

2. 次のコードを使用して keyDown ハンドラーを追加します。

   keydown: function (event) {
       $dyn.util.handleShortcuts(this, event);
   },
   

3. keyDown ハンドラーをバインドします。 keyDown ハンドラーは自動的にフォーム オブジェクトにバインドされます。 その他のコントロールは、通常のバインドに関してだけ、keyDown ハンドラーに手動でバインドしてください。

   重要

   「keyDown」では、大文字と小文字が区別されます。

   <div data-dyn-bind="keyDown: $data.keydown"></div>;
   

例

次にフォーム例を示します。

Shortcuts: {
    Save: {
        Keys: { ctrl: true, keyCode: $dyn.ui.KeyCodes.letterS },
        Handler: function (evt) {
            var control = evt ? $dyn.context(evt.target) : undefined;
            this.executeShortcuts(true, "SaveRecord", control);
        },
    },
    New: {
        Keys: { alt: true, keyCode: $dyn.ui.KeyCodes.letterN },
        Handler: function (evt) {
            var control = evt ? $dyn.context(evt.target) : undefined;
            this.executeShortcuts(true, "NewRecord", control);
        },
    },
    Delete: {
        Keys: { alt: true, keyCode: $dyn.ui.KeyCodes.deleteKey },
        Handler: function (evt) {
            this.executeShortcuts(false, "DeleteRecord");
        },
    },
    // Additional code
}

フォーム コントロールを拡張するダイアログの例を次に示します。

Shortcuts: $dyn.extendPrototype($dyn.controls.Form.prototype.Shortcuts, {
    InvokeDefaultButton: {
        Keys: { keyCode: $dyn.ui.KeyCodes.enter },
        Handler: function (evt) {
            this.executeShortcuts(false, "InvokeDefaultButton");
        }
    },
})