LoginSignup
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-06-19

はじめに: 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(ライブラリのコードそのもの)
// 省略 (一番下に詳細書いてます)

実行してみると…

スクリーンショット 2019-06-19 13.49.56.png
無事、アラート画面が出ました。
もちろん、「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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3