キーボードショートカットを実装するjQueryプラグイン「hotkeys」 【feedpost tips】
昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。
2回目はキーボードショートカットを実装するjQueryプラグイン「hotkeys」。
導入はとっても簡単で、jQueryと一緒に読み込み、
イベントをキーに合わせて設定してやればOK。
フォーカスがdocumentにあるときの設定は例えばこう。
このサンプルでは「J」キーを押すと「pressed J key」というポップアップが表示されます。input欄やtextarea欄にカーソルがあるときには反応しないので、神経質になりすぎることなく設定出来ます。
特定の要素に対して設定することも可能です。
例えばidが「sample」と言う要素に対して設定する場合にはこんな感じ。
普通キーボードショートカットというと、それぞれのキー配列に応じた数値(例えば「J」なら74)を指定しなければいけないところ、直感に沿った指定が出来るが便利です。アルファベット以外でも、こんな設定も出来ます。
わかりやすい。
もちろん、bindではなくonを使うことも出来ます。
便利だなあ……
「キーボードショートカット」なんて実際問題、かなりPC操作に慣れた人にしか需要はないわけですけど、でも知ってる人にとってはこれがあるのと無いのとでは大違い。多くのRSSリーダーで実装されている「jで次の記事、kで前の記事、nで次のサイト、pで前のサイト」というショートカットキーは、日々の更新チェックにかなり影響を与えると思います。
サービスの「裏設定」的な存在として、キーボードショートカットはもっと普及して良いと思うんですよね。
ぜひこれを使って実装を。