最速インターフェース研究会

キー割り当て用ライブラリを作った

依頼を受けて作ってみた。

http://la.ma.la/roll.html
http://la.ma.la/js/hotkey.js

j,kでスクロールできる。

使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。

全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。

追加したコードはこんな感じ。

var kb = new HotKey;
kb.add(["j","2","down"], function(){rollto(c_pos + 1)});
kb.add(["k","8","up"]  , function(){rollto(c_pos - 1)});
kb.add(["H","home"],     function(){rollto(0)});
kb.add("pageup",         function(){rollto(c_pos-3)});
kb.add("pagedown",       function(){rollto(c_pos+3)});

kb.add("キー入力" , 実行する関数)という感じで、キー割り当てを追加。
複数のキーに対して同じ処理を割り当てたい場合は配列を渡せます。「shift + a」の場合は「A」を指定。
Ctrlを押して二秒以内にEnterとか、そういう細かい挙動は指定できない。
そこらへんはおいおい考える。

kb.sendKey("down")

みたいにやると、カーソルの下を押したときの動作をエミュレートできます。この辺はテストの自動化なんかにも応用できそう。

----

普通、クリックイベントなんかを割り当てる場合

buttonA.onclick = function(){...}
buttonB.onclick = function(){...}
buttonC.onclick = function(){...}

というような具合になるのだけれども、

document.body.onclick = function(e){
    switch(e.target.id){
     buttonA : ...
     buttonB : ...
     buttonC : ...
    }
}

というような記述のほうが効率が良い気がする。（実際はこういうコードじゃないけど、考え方として）

とりあえずdocument.body全体にリスナーイベントを設定してしまって、クリックされたHTMLElementのタグ名、ID、CSSのClassなんかに応じて内部で処理を振り分ける方式。

ウェブアプリケーションフレームワークでいうところのDispatchとかそこら辺のノウハウ応用すればもっと上手くやれそうな気がする。

A quick preview will be rendered here when you click "Preview" button.