Webブラウザで
* ショートカットキーを
* キーボードショートカット - GitHub ヘルプ
* 【
どのように
調べた
そもそも キーボードショートカットの 意義
最近、
パフォーマンスメトリクスには、
1. タスク成功率
タスクが
2. タスク時間
タスク完了に
3. エラー
タスク実行中に
4. 効率
タスクを
5. 学習可能性
時間とともに
キーボードショートカットは、
キーボードショートカット設定時の 留意点
keyboard shortcuts - Are there any guidelines concerning the use of Alt, Ctrl and Shift keys? - User Experience Stack Exchange に、
以下に、
Guidelines for Keyboard User Interface Design | Microsoft Docs
Microsoft の
Assign simple and consistent key combinations.
単純で一貫性の ある キーの 組み合わせを 割り当てる。 Make shortcut keys customizable.
ショートカットキーをカスタマイズ可能に する。 Use a shortcut with the CTRL key for actions that represent a large-scale effect, such as CTRL+S for save current document.
現在のドキュメントを 保存する ための CTRL + Sなど、 大規模な 効果を 表す アクションには、 Ctrlキーを 押しながら ショートカットを 使用する。 Use the SHIFT+ key combination for actions that extend or complement the actions of the standard shortcut key. For example, the ALT+TAB shortcut key displays the primary window of a running application. Alternatively, the SHIFT+ALT+TAB key combination allows you to navigate backward through currently running applications that have been previously accessed.
標準のショートカットキーの 動作を 拡張または 補足する 動作には、 Shift +キーの 組み合わせを 使用する。たとえば、 Alt + Tabショートカットキーは、 実行中の アプリケーションの プライマリウィンドウを 表示するが、 Shift + Alt + Tabキーを 押すと、 以前に アクセスした 現在実行中の アプリケーションを 逆方向に 移動する ことができる。 Use the SPACEBAR key as the default action of a control, such as for pressing a button control or toggling the status of a check box control. This is similar to clicking the left or primary mouse button.
ボタンコントロールを押す、 または チェックボックスコントロールの 状態を 切り替えるなど、 コントロールの デフォルトの アクションと してSpaceキーを 使用する。 これは、 マウスの 左ボタンまたは 主ボタンを クリックするのと 似ている。 Use the ENTER key for the default action of a dialog box, if available.
可能であれば、ダイアログボックスの デフォルトの 動作には ENTERキーを 使用する。 Use the ESC key to stop or cancel an operation.
操作を停止または キャンセルするには、 ESCキーを 使用する。 Avoid modified or case-sensitive letters for shortcuts.
アクセント記号付き文字や 大文字、 小文字で ショートカットの 動作を 変更するのは 避ける。 Avoid using the following characters for shortcut keys:
@ {} [] \ ~ | ^ ' < >
ショートカットキーに次の 文字を 使用しない。 @ {} [] \ ~ | ^ ' < >
Avoid ALT+ letter combinations because they may conflict with access keys. In addition, the system uses many specific key combinations for specialized input; for example, ALT+~ invokes an input editor for the Japanese language.
アクセスキーと競合する 可能性が あるため、 ALT +の 文字の 組み合わせは 避ける。 システムは 特殊な 入力の ために 多くの 特定の キーの 組み合わせを 使用する。たとえば、 ALT +〜は 日本語用の 入力エディタを 呼び出す。 Avoid CTRL+ALT combinations because the system interprets this combination in some language versions as an ALTGR key, which generates alphanumeric characters.*
一部の言語バージョンでは、 この 組み合わせは 英数字を 生成する ALTGRキーと して 解釈される ため、 Ctrl + Altの 組み合わせは 避ける。 Avoid assigning combinations that are reserved or defined by the system or are commonly used by other applications.
システムによって 予約または 定義されている 組み合わせ、 または 他の アプリケーションで 一般的に 使用されている 組み合わせを 割り当てない。 Do not use the Windows logo key as a modifier key for non-system-level functions.
Windowsロゴキーをシステムレベル以外の 機能の 修飾キーと して 使用しない。
Keyboard - User Interaction - macOS - Human Interface Guidelines - Apple Developer
macOS の
Avoid creating a shortcut by adding a modifier key to an existing shortcut, unless the shortcuts are related.
ショートカットが関連付けられていない 限り、 既存の ショートカットに 修飾キーを 追加して ショートカットを 作成しない。 As much as possible, use the Command key as the main modifier key in a keyboard shortcut.
可能な限り、 キーボードショートカットで Commandキーを メイン修飾キーと して 使用する。 Use the Option key sparingly.
Optionキーは控えめに 使用する。 As much as possible, avoid using the Control key.
できるだけ、Controlキーを 使用しない。 List multiple modifier keys in the correct order.
複数の修飾キーを 正しい 順序で、 列挙する。 Identify a key with two characters by the lower character, unless Shift is part of the shortcut.
Shiftがショートカットの 一部でない 限り、 2文字の キーを 小文字で 識別する。
Shiftキーがキーボードショートカットの 一部である 場合は、 2文字の うちの 上の 方の 文字を 使用して キーを 識別する。
たとえば、ヘルプの キーボードショートカットは、 Shift + Command + Slashではなく Command +疑問符 ? となる。
WAI-ARIA Authoring Practices 1.1
Webコンテンツの<wbr>推奨実装方法集
と
Making the shortcut easy to learn and remember by using a mnemonic (e.g., Control + S for “Save”) or following a logical or spacial pattern. ニモニック(
「保存」の 場合は Control + S)を 使用するか、 論理パターン、 または 空間パターンを 使用する ことで、 ショートカットを 習得しやすく 覚えやすくする。 Localizing the interface, including for differences in which keys are available and how they behave and for language considerations that could impact mnemonics.
利用可能なキーと その 動作の 違い、 および ニモニックに 影響を 与える 可能性の ある 言語の 考慮事項など、 インターフェイスの ローカライズを する。 Avoiding and managing conflicts with key assignments used by an assistive technology, the browser, or the operating system.
支援技術、ブラウザ、 または オペレーティングシステムで 使用される 重要な ショートカットキーとの 競合を、 回避 および 管理する。
IBM Common User Access - Wikipedia
これは、
Common User Access - Wikipedia
今の
個人的な 留意点
各ガイドライン、
一般的な
キーボードショートカットと 動作を 合わせる。 Windowキー等は
OSの ショートカットが 割り当てられているので、 使わない。 ショートカットに
英語的な 意味を 持たせる。 Github の
g を 押して 発動する ショートカットは 分かりやすく 思った。
キーボードショートカットライブラリを 試しに 使ってみた
hotkeys
、mousetrap
の
ほぼ、README.md
の
jaywcjlove/hotkeys: ➷ A robust Javascript library for capturing keyboard input. It has no dependencies.
サンプル
Hotkey Example補足
オーソドックスな
キー割り 当て キーのhotkeys('ctrl+a, ctrl+b', function(event,handler) { switch(handler.key){ case "ctrl+a":document.getElementById("left-form").fullName.value = "ctrl+a"; break; case "ctrl+b": alert('ctrl+b click!'); break; } });
組み合わせを、 カンマ区切りで 指定し、 switch文で ハンドリングします。
引数 event は、KeboardEvent で、 handler は、 hotkeys の 独自オブジェクトです。
型定義は以下に あります。 どんな 情報を 保持しているのか 参考に なるかと 思います。
hotkeys/index.d.ts at master · jaywcjlove/hotkeys全ての
キーを 割り当て、 制御キーの 判定
*
で全ての キーを 割り当てられます。 以下の コードだと、 制御キー自体も ハンドリングされ、 制御キーを 押した タイミングで コンソール出力が 行われます。 hotkeys('*', function(e){ if(hotkeys.shift) console.log('shift is pressed!'); if(hotkeys.ctrl) console.log('ctrl is pressed!'); if(hotkeys.alt) console.log('alt is pressed!'); if(hotkeys.option) console.log('option is pressed!'); if(hotkeys.control) console.log('control is pressed!'); if(hotkeys.cmd) console.log('cmd is pressed!'); if(hotkeys.command) console.log('command is pressed!'); });
キーの
同時押し 制御
+
記号が同時押しを 表します。 hotkeys('x+s', function(event,handler) { if(handler.key === 'x+s') { alert('you pressed x+s!'); } });
押した
キーの 判定
isPressed
で押した キーを 判定できます。 大文字、 小文字は 同じ キーと 見なされます。 hotkeys('a', function(){ console.log(hotkeys.isPressed("a")); //=> true console.log(hotkeys.isPressed("A")); //=> true console.log(hotkeys.isPressed(65)); //=> true });
Filterの
変更、 タグの 判定
hotkeys はデフォルトで INPUT SELECT TEXTAREA
制御対象外にしていて、 左記の タグに フォーカスが ある 場合は ハンドリングされません。
以下のコードで Filterを 解除できます。 Filterをhotkeys.filter = function(event){ return true; }
解除後に m
キーを押すと、 INPUT タグに フォーカスが ある 場合は、 メッセージが 変わります。 Filter ですが、hotkeys('m', function(event,handler){ if(event.target.tagName === "INPUT"){ alert('you pressed m!') } else { alert('you pressed mmmmmmmmmmmmmmmmmmmmmm!'); } });
一部だけ 適用する ことが 難しそうなので、 hotkeysの オブジェクトを 複製して 使うか、 Filter を 解除して 個別に ハンドリングする 必要が あります。
ccampbell/mousetrap: Simple library for handling keyboard shortcuts in Javascript
サンプル
Mousetrap example補足
オーソドックスな
キー割り 当て
以下は、ctrl+s
、meta+s
を押した 際に、 alertが 表示されます。
e.preventDefault();
、e.returnValue = false;
でデフォルトの ブラウザイベントを 無効に しています。 以下は、Mousetrap.bind(['ctrl+s', 'meta+s'], function(e) { if (e.preventDefault) { e.preventDefault(); } else { // internet explorer e.returnValue = false; } alert('ctrl+s meta+s pressed!'); });
ctrl+a
と、meta+a
を押した 際に、 コンソールに ログが 出力されます。
return false
で、デフォルトブラウザイベントを 無効に しています。 Mousetrap.bind(['ctrl+a','meta+a'], function(e) { console.log('ctrl+a meta+a pressed!'); return false; });
シーケンシャルな
キーイベント
以下はa b c
を順に 押した 際に、 alert
が表示されます。
これで、github 風の キーボードショートカットは 作成できそうです。 Mousetrap.bind('a b c', function(){ alert('abcがシーケンシャル押下されました。'); });
イベントFilter
mousetrap にはstopCallback と いう イベントFilter関数が あり、 デフォルトは 以下の 実装に なります。 INPUT、/** * should we stop this event before firing off callbacks * * @param {Event} e * @param {Element} element * @return {boolean} */ Mousetrap.prototype.stopCallback = function(e, element) { var self = this; // if the element has the class "mousetrap" then no need to stop if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) { return false; } if (_belongsTo(element, self.target)) { return false; } // Events originating from a shadow DOM are re-targetted and `e.target` is the shadow host, // not the initial event target in the shadow tree. Note that not all events cross the // shadow boundary. // For shadow trees with `mode: 'open'`, the initial event target is the first element in // the event’s composed path. For shadow trees with `mode: 'closed'`, the initial event // target cannot be obtained. if ('composedPath' in e && typeof e.composedPath === 'function') { // For open shadow trees, update `element` so that the following check works. var initialEventTarget = e.composedPath()[0]; if (initialEventTarget !== e.target) { element = initialEventTarget; } } // stop for input, select, and textarea return element.tagName == 'INPUT' || element.tagName == 'SELECT' || element.tagName == 'TEXTAREA' || element.isContentEditable; };
SELECT、 TEXTAREAタグ、 contenteditable の 属性が 付与された タグの 場合、 基本的に イベントは 発動しませんが、 class 属性 に mousetrap
を付与した 場合は、 例外的に 発動するようになっています。 グローバルな Mousetrap の stopCallback を 上書き 設定すると、 全ての 処理に 影響しますが、 以下のように インスタンス化して 使うと、 個別に フィルタを 上書きする ことができ、 m
キーを押すと、 画面上の 全ての 要素で イベントが 発動します。 以下のように、var mousetrapEx = new Mousetrap(); mousetrapEx.stopCallback = function(e, element) { return false; }; mousetrapEx.bind(['m'], function(e) { alert('m pressed!'); });
class属性に mousetrap
を追加すると、 対象の テキストボックスのみ 例外的に イベントが 発動します。 <input id="addressLine1" name="addressLine1" placeholder="Address Line 1" class="form-control mousetrap" required="true" value="" type="text"><
使用してみた 感想
個人的には、
参考
以下、
- stepanvr/js-shortcuts: JavaScript Shortcuts Library
- Creating Keyboard Shortcuts in JavaScript - Melwin D’Almeida - Medium
- ccampbell/mousetrap: Simple library for handling keyboard shortcuts in Javascript
- ショートカットキーの
イベントを 簡単に 取得、 設定できる ライブラリ! 「Mousetrap」 | ProgramMemo - shortcuts-js/README.md at master · joshfarrant/shortcuts-js
- which is the best Javascript Keyboard event library.(Hotkeys,Shortcuts ) - Stack Overflow
- Awesome JavaScript : 素晴らしい JavaScript の
ライブラリ・リソースの 数々 - Qiita - contenteditable - HTML: HyperText Markup Language | MDN
以上です。
コメント