[JS]WEBアプリ等のショートカット機能実装に、「shortcuts.js」がめっちゃ軽快で使いやすい件

5736 ワード
ライブラリ shortcut JavaScript JavaScript テキストリンク

はじめに：　codepenで実行できないので注意

今回のコードは、なぜかcodepenでは実行できませんでした。
外部ファイル読み込みも設定してみたのですが、どうもうまくshortcuts.jsを読んでくれない様子。
おかげで、動作確認にえらく時間かけちゃいました。

やや手間ですが、ローカル環境に直接ファイルを作成して、ローカル環境で試すと詰まることなく動作確認できるかと思います。
ご注意ください。

今回のコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>shortcuts.jsのサンプル</title>
</head>
<body>
    <script src="js/shortcuts.js"></script>
     <!-- ライブラリについては一番下を参照してください -->
    <script src="js/main.js"></script>
</body>
</html>
js/main.js
shortcut.add("a",function() {
    alert("「a」を検知しました！");
});
js/shortcuts.js(ライブラリのコードそのもの)
// 省略 (一番下に詳細書いてます）

実行してみると…


無事、アラート画面が出ました。
もちろん、「F1」だけでなく、「Alt + a」や「Shift + Ctrl + z」、「meta(macなら⌘、windowsなら⊞に該当) + q」などにも対応している。

コード解説

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>shortcuts.jsのサンプル</title>
</head>
<body>
    <script src="js/shortcut.js"></script> <!-- ライブラリ -->
    <script src="js/main.js"></script>
</body>
</html>

いつも通りのHTMLです。
bodyタグ内に、外部ファイルとしてJSファイルを読み込んでいます。
ちなみに、
<script src="js/shortcut.js"></script>←ここは、
<script src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js"></script>←これでも問題なく実行できました。

js/main.js
shortcut.add("a",function() {
    alert("「a」を検知しました！");
});

メインのJSです。
shortcut.addでショートカットを追加しています。
"a"この中を触ることで、ショートカットを割り当てるキーを変更できます。複数の場合は、"alt+a"という感じで設定してください。
function(){}この中で、行いたい処理を書きます。
解説がいらないほど、わかりやすい形ですね。

js/shortcuts.js(ライブラリのコードそのもの)
// 省略

ライブラリ本体です。
ここでは省略しましたが、200行ぐらいしかない小さいファイルです。
6KBってすごい。笑
この公式ページのソースを丸々コピペしただけなので、動作確認の際はことらからどうぞ。

以上です。
ありがとうございました。

参考サイト：http://www.openjs.com/scripts/events/keyboard_shortcuts/index.php