Webアプリにショートカットキーを導入してみる

In: JavaScript| technology

11 6月 2011

たとえば、Gmailやtwitterなどで「？」を押すと、サイト内独自のショートカットキーが出てきます。上級者向けの機能なのかもしれないとも思いつつも、マウスの操作をせずともサイト内を自由に動ける仕組みというのは、なかなか魅力的な気がします。今回は、自分が作ってるサービスなんかで簡単にショートカットキーを導入する方法はないものか、と興味本位で探してみました。

Javascriptでショートカットキー

いろいろ探してみた結果、大体以下の二つがよく紹介されている模様。

前者は、SafariではShift、Ctrl、Altが効かない＋Operaのブラウザ内蔵のショートカットと衝突することがあるらしいです。後者に関しては、Operaの検証まではしていませんが、Safariでもちゃんと動くようです。軽く動かしてみた感じと、コードの簡潔に見える度合いを考慮して、今回は、後者のshortcuts.jsを使って実装してみることにします。

shortcuts.jsの使い方

今回の検証環境

いずれもWindows。

  • Google Chrome 12.0.742.91
  • Firefox 4.0.1
shortcuts.jsの始め方

まずは、先ほど紹介したshortcuts.jsの本家サイトの「Code」とあるところからshortcuts.jsのソースをダウンロードしてきます。

jQueryとかは不要とのことで、これだけ読みこめばすぐに動かすことができます。簡単ですな。

コードを書いてみる

実際のコードは、こんな感じで書けば大丈夫みたい。

// ショートカットキーの追加
shortcut.add("<使いたいキー>",function() {
    <起こしたい挙動>
},{
    <オプション各種;>
});
// ショートカットキーの削除
shortcut.remove("<使いたいキー>");

例を挙げると、こういうふう。

shortcut.add("Shift+/",function() {
	alert("「？」が押されたよ。");
},{
   'disable_in_input':true,
   'keycode':191
});

あとは、ほしいキーに対して、それぞれ同じように書いていって、functionの中身と、オプションそれぞれ書き換えていけばよいです。

オプションには、なるべく例で書いた二つは入れたほうがよいですね。
ひとつめの「disable_in_input」は、テキストエリアなど、input要素の上でショートカットキーを押しても動作するか（true：動作しない、デフォルトはfalse）を制御していて、もうひとつの「keycode」は入力したキーをキーコードの数字でも指定できるようにするためのものです。
disable_in_inputを指定してないと、そのキーがテキストエリアで入力できない、なんてことが起こります。
また、keycodeを指定してないと、別のキーで動作したり、本来のキーで動作しないことがたまにあるみたいなので、きちんと指定しておいたほうが無難のようです。（※キーコードがどういう対応になってるかわからん、という人は、ここを参考にしておくとよいですよ。）

ちなみに、ここで指定できるオプションは以下のようになっています。和訳・解釈は一部間違っているかもしれませんが、ご参考までに。

・type（String）：
キーのイベントタイプを指定できます。
‘keydown’、’keyup’、’keypress’のいずれかで、デフォルトは’keydown’。

・disable_in_input（Boolean）：
テキストエリアみたいなinput要素の上でショートカットキーを押しても動作するかを指定できます。デフォルトはfalse（動作する）。

・target（DOM Node）：
キーボードのイベントを拾うときの要素を指定できます。特定の要素内でのみ動くショートカットとかを作りたいときにでも使うのかな。デフォルトはdocument。

・propagate（Boolean）：
もともと他で指定されているショートカットも動作させるかを指定できます。たとえば、Ctrl+Aを押したとき、ショートカットキーと、ブラウザの全選択を同時に実行する、みたいなことができます。デフォルトはfalse（動作させない）。

・keycode（Integer）：
キーコードを数字指定できます。指定したキーが動かないときなどがあるので、念のため設定しておいたほうが望ましいかと。

動かしてみて

個人的には、ブラウザのショートカットとかとかぶるものは極力避けたほうがいいかな、と思います（どんなマイナーなものでも使っている人はいると思いますし）。
あとは、ほかのサービスで実装されているようなショートカットキーは、極力同じ動作にしておくことも、たぶん大事なことかと。

本家サイトでは、Live Evaluationとして、試しに入れてみたコードがちゃんと動くかも確かめられるようになっているので、興味がある方は試してみるとよいと思います。

VIa：


Comment Form

About this blog

ゆるーく、ふわーっと、興味のままに。

自分のかたわらに置いておくメモ代わり。

Photostream

Categories

Archives

Copyright © 2007 - Katawara.* - is proudly powered by WordPress | ログイン

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com