AngularHotkeys.jsの使い方

JavaScript

AngularJSを使ったWebアプリに対して、キーボード・ショートカットを簡単に組み込む事ができるAngularHotkeys.jsの使い方をメモしておく。


【事前準備】

  1. GitHub - chieffancypants/angular-hotkeys: Configuration-centric keyboard shortcuts for your Angular apps.から必要なライブラリ（hotkeys.jsとhotkeys.css）を取得し、所定のフォルダに配置する
  2. mousetrapが前提ライブラリとして必要なので、GitHub - ccampbell/mousetrap: Simple library for handling keyboard shortcuts in Javascriptからmousetrap.js、もしくはmousetrap.min.jsを取得し、所定のフォルダに配置する

　以上で準備は完了。


【使い方】
まず、ライブラリを読み込むために、htmlファイルに以下のように記述する。

<link rel='stylesheet' href='/stylesheets/hotkeys.css' />
<script src="/javascripts/mousetrap.min.js"></script>
<script src="/javascripts/hotkeys.js"></script>

次にAngularのコントローラのコードにショートカットの定義を記載する。
具体的には以下のような形になる。

var testApp = angular.module('testApp', ['cfp.hotkeys']);

testApp.controller('mainCtrl', function($scope, hotkeys) {
    $scope.score = 0;

    hotkeys.add({
        combo: 'ctrl+up',
        description: 'This is a test shortcut.',
        callback: function() {
            $scope.score += 1;
        }
    });
});

これで、完了。Webアプリの画面上でcontrolキーとupを押すと、スコアを1増やす事が出来るようになる。
なお、AngularHotkeys.jsはショートカットのチートシートを自動的に生成してくれて便利。「？」キーを押すと以下のようなチートシートが表示される。

【おまけ】
チートシートが不要な場合には以下のようにすれば良い。

var testApp = angular.module('testApp', ['cfp.hotkeys']).config(function(hotkeysProvider) {
    hotkeysProvider.includeCheatSheet = false;
});

より詳細はGitHub - chieffancypants/angular-hotkeys: Configuration-centric keyboard shortcuts for your Angular apps.を参考に。