わずかなコードで、ショートカットキーを自由に設定可能なJSライブラリ「Mousetrap」

公開日：2015/03/08

今回ご紹介するJavaScriptライブラリ「Mousetrap」を使うと、ブログやサイト・Webアプリなどへ自分だけの「ショートカットキー」を作って設定することができます。

わずか「4Kバイト」未満の軽量ライブラリですが、とても簡単に扱えるように丁寧な作り込みがされているのが分かります。

使い方！

利用方法はとてもシンプルです。

まずは、HTMLファイルの「head要素」に、「jQuery」と「Mousetrap」のソースを読み込みます。

<head>
  <meta charset="UTF-8">
  <title>Mousetrap練習</title>
  <script src="jquery.min.js"></script>
  <script src="mousetrap.min.js"></script>
</head>

（もちろん、「CDN経由」で読み込ませてもOK…）

たったこれだけで準備は完了です！

あとは、自分の好きなように「ショートカットキー」を作成することが出来るようになっています。

　
例えば、キーボードから「Shift + a」で、アラート表示させたければ、以下のようなコードを書きます。

<script>
  Mousetrap.bind('shift+a', function(){
    alert("Hello World !");
  });
</script>

　
すごくシンプルですね。

もう少し詳しく…

基本的な構文としては、以下の通り！

Mousetrap.bind('任意のショートカットキー', 実行したい処理);

ショートカットキーは、そのまま書けるようになっており「command」「alt」「ctrl」や、「up」「down」といった方向キーも利用可能。

　
また、vimのように「キー」を順番に押していくタイプのショートカットキーも作れます。

<script>
  Mousetrap.bind('a b c', function(){
    alert("Hello World !");
  });
</script>

この場合は、順番に「a」「b」「c」キーを押すことで、アラート表示ができるようになります。

　
他にも、キーを離した瞬間に処理を実行させたりなど、細かいオプションも用意されているのが特徴です。

以下に、簡単なサンプルを作ってみましたので、ご興味ある方は触ってみてください。
（最初に、以下の画面内をクリックしてから試してみてください…）

See the Pen OPoxOK by webStudy (@webstudy) on CodePen.

（「?」キーを押すと、ショートカットキーのヘルプがアラート表示されます）

（参考）
「Mousetrap」公式サイト

うえぶまなぶ