はじめに： codepenで実行できないので注意
今回のコードは、なぜかcodepenでは実行できませんでした。
外部ファイル読み込みも設定してみたのですが、どうもうまくshortcuts.jsを読んでくれない様子。
おかげで、動作確認にえらく時間かけちゃいました。
やや手間ですが、ローカル環境に直接ファイルを作成して、ローカル環境で試すと詰まることなく動作確認できるかと思います。
ご注意ください。
今回のコード
<!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>
shortcut.add("a",function() {
alert("「a」を検知しました！");
});
// 省略 (一番下に詳細書いてます）
実行してみると…
無事、アラート画面が出ました。
もちろん、「F1」だけでなく、「Alt + a」や「Shift + Ctrl + z」、「meta(macなら⌘、windowsなら⊞に該当) + q」などにも対応している。
コード解説
<!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>←これでも問題なく実行できました。
shortcut.add("a",function() {
alert("「a」を検知しました！");
});
メインのJSです。
shortcut.addでショートカットを追加しています。
"a"この中を触ることで、ショートカットを割り当てるキーを変更できます。複数の場合は、"alt+a"という感じで設定してください。
function(){}この中で、行いたい処理を書きます。
解説がいらないほど、わかりやすい形ですね。
// 省略
ライブラリ本体です。
ここでは省略しましたが、200行ぐらいしかない小さいファイルです。
6KBってすごい。笑
この公式ページのソースを丸々コピペしただけなので、動作確認の際はことらからどうぞ。
以上です。
ありがとうございました。
参考サイト：http://www.openjs.com/scripts/events/keyboard_shortcuts/index.php