キーボードショートカットを実装するjQueryプラグイン「hotkeys」 【feedpost tips】

jQuery.jpg

昨日リリースした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で前のサイト」というショートカットキーは、日々の更新チェックにかなり影響を与えると思います。

サービスの「裏設定」的な存在として、キーボードショートカットはもっと普及して良いと思うんですよね。
ぜひこれを使って実装を。