GitHub風のキーボードショートカットをお手軽に追加する
はじめに
個人開発しているWEBサービスにキーボードショートカットを追加しました。その時に使ったnpmパッケージがお手軽で素晴らしかったので記事にすることにしました。
hotkey by GitHub
キーボードショートカットを実現するJSライブラリなどを探して、何を使うか検討していたところ、GitHub社が開発するnpmパッケージを見つけました。
GitHubのサイトのHTMLソースを見ると、data-hotkey というhotkey由来の記述が発見できたので、GitHubのサービス内で実際に使っているようです。
仕組みとしては、HTMLの各要素(a,button,input,textareaなど)に data-hotkey="a" のようにdata要素を追加すると、「a」がキーボードショートカットとなります。ショートカット実行後に、その要素のonclick()関数実行や、inputフィールドにフォーカスが当たるという動作が発動します。
デモのHTMLソースを見ながら操作すると、仕組みが分かりやすいです。
いいところ
導入が超簡単
リポジトリ内のReadMeを読んでいただければと思うのですが、たった数行の追加でキーボードショートカットが実現できてしまいます。とても簡単です。
Vue.jsにも簡単に追加できる
コード例は不要なレベルだと思いますが、一応Vue.js版のコード例を載せておきます。
<template>
<div>
<router-link :to="/" data-hotkey="g h">home</router-link>
<router-link :to="/stats" data-hotkey="g s">stats</router-link>
<a @click="openDialogShortcuts" data-hotkey="Shift+?">help</a>
</div>
</template>
<script>
import { install, uninstall } from "@github/hotkey";
export default {
mounted() {
for (const el of document.querySelectorAll("[data-hotkey]")) {
install(el);
}
},
beforeDestroy: function() {
for (const el of document.querySelectorAll("[data-hotkey]")) {
uninstall(el);
}
},
};
</script>
シーケンスショートカットが使える
GitHubには、gから始まるショートカットがあります。
「g」から始まる組み合わせのショートカットは、「g」を押して一旦離してから、もう1つのキーを押すことで動作します。例えば、「g」を押して離してから、「n」を押すと通知画面に遷移します。もちろん同時押しでも動作可能です。
こういう動作ができるショートカットを追加可能です。
この動作をサポートしていないライブラリもあるので、これがサポートされていることは長所の一つです。
万能ではない
spaceキーのショートカットが使えない
どうしてもspaceキーのショートカットが欲しかったので、色々試してみましたが、使えませんでした。
GitHubでも、全てのキーボードショートカットをhotkeyを使って実装しているわけではない
詳細はこちらで。
ちょっとした使い方のTips
- 大文字のショートカットキーの場合は、「Shift+a」ではなく、「A」とする
- 「?」をショートカットキーにしたい場合は、「Shift+?」で動作する
その他のキーボードショートカットのJSライブラリ
Hotkeys
どうしてもSpaceキーのショートカットを実装したかったので、このライブラリも合わせて使うことにしました。
シーケンスショートカットに対応していない
Vue.jsでの使用方法
Mousetrap
シーケンスショートカットに対応しているが、メンテが滞っている。採用は見送った。
Vue.js用のライブラリ
Vue2専用で、Vue3に上げるときに困りそうなので採用しなかった。
参考記事
最後に宣伝
今回の実装内容は、僕が個人開発している「オンライン・コワーキングスペース Sushi Work」に追加しています。
ポモドーロテクニックをしながら開発している方は、ぜひキーボードショートカットに対応したSushi Workをプロダクティビティ向上のお供にしていただければ幸いです🍣
Discussion