Gmail スタイルのショートカ​ットを実装できる『M​ousetrap』

JavaScript

Web アプリにショートカットを実装したくて、ライブラリを探していたら、良いの見つけた。 『Mousetrap』。

JavaScript でショートカットを実装するライブラリでは shortcuts.js が有名だけど、後発の Mousetrap は shortcuts.js と同等のことができる。さらに Mousetrap が優れていて、個人的にツボだったのは、Gmail の

  • g, i で受信箱に移動
  • g, a ですべてのメールに移動
  • *, a ですべてのメールを選択

みたいな、キーを組み合わせるタイプのショートカットも実装できること。コイツがやりたかったんだ。

使い方は簡単で、Mousetrap.bind メソッドにショートカットキーの文字列と、実行したい関数を渡すだけ。Mousetrap を使ったサンプルは次の通り。余命宣告された Google リーダーを意識している。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mousetrap sample</title>
  </head>
  <body>
    <h1>Mousetrap sample</h1>
 
    <script type="text/javascript" src="mousetrap.js"></script>
    <script type="text/javascript">
      // キー１つだけ押すショートカット
      Mousetrap.bind("j", function(e) {
        alert("[j] 次の記事へ移動");
      });
      Mousetrap.bind("k", function(e) {
        alert("[k] 前の記事に移動");
      });
 
      // 2つ以上のキーを組み合わせたショートカット
      Mousetrap.bind("g a", function(e) {
        alert("[g a] すべての記事を表示");
      });
      Mousetrap.bind("g s", function(e) {
        alert("[g s] スターのついた記事を表示");
      });
 
      // shift を押す必要があるショートカット
      Mousetrap.bind("K", function(e) {
        alert("[K] 前のフィードを表示");
      });
      Mousetrap.bind("shift+j", function(e) {
        alert("[J] 次のフィードを表示");
      });
      Mousetrap.bind("?", function(e) {
        alert("[?] ヘルプを表示");
      });
 
      // ctrl を押す必要があるショートカット
      Mousetrap.bind("ctrl+s", function(e) {
        alert("[ctrl+s] フィードを購読");
      });
 
      // 複数の特殊キーを押す必要があるショートカット
      Mousetrap.bind("ctrl+shift+d", function(e) {
        alert("[ctrl+shift+d] 購読解除");
      });
 
      // コナミコマンド
      Mousetrap.bind("up up down down left right left right b a", function(e) {
        alert("[up up down down left right left right b a] コナミコマンド");
      });
    </script>
  </body>
</html>