Tomute’s Notes Twitter

2014-07-25

[] AngularHotkeys.jsの使い方

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


【事前準備】

  1. no titleから必要なライブラリ(hotkeys.jsとhotkeys.css)を取得し、所定のフォルダに配置する
  2. mousetrapが前提ライブラリとして必要なので、no titleから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ショートカットチートシートを自動的に生成してくれて便利。「?」キーを押すと以下のようなチートシートが表示される。

f:id:tomute:20140725234439p:image

【おまけ】

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

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

より詳細はno titleを参考に。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tomute/20140725/1406299551