Hatena::Grouphatena

はてな技術発表会日記 このページをアンテナに追加 RSSフィード

株式会社はてなでは日々、開発者が持ち回りでひとつの技術トピックについて発表を行っており、公開可能なものについては、その内容を音声と動画で公開しています。

 | 

2007-01-19

1月19日の技術勉強会

19:49 | 1月19日の技術勉強会 - はてな技術発表会日記 を含むブックマーク はてなブックマーク - 1月19日の技術勉強会 - はてな技術発表会日記

1月19日に行われました技術発表会の内容を撮影した動画ファイルを公開いたしました。内容は以下のとおりです。

テーマKeyTypeListener.js 勉強
発表d:id:secondlife

動画・音声ファイル

以下の再生画面より、勉強会の動画・音声をご覧いただけます。

動画

filelist

また以下のリンクから、高画質版のファイルダウンロードの後にご覧いただくことも可能です。(ビデオiPodでもご覧いただけます。)

070119keytipelistner.mp4 filelist

音声

Download filelist

KeyTypeListener.js

http://hatelabo.jp/js/KeyTypeListener.js

タイプされたキーに対するアクションを行う Observer 的なライブラリ

どんなときに便利なの?

じゃあいらなくない?でも

  • 削除したい
  • 特定の要素のみにキーマッピングりたい
  • 特定の要素は無視したい
    • input type='text' な要素とか…
  • チェインで繋げたい/チェインを解除したい
  • ctrl とか alt とかを楽に扱いたい

デモ

http://rails2u.com/misc/key_event_listener.html

addKeybind('a', function(ev) { log('a')});
addKeybind('a', function(ev) { log('a!!');}, $('loglog'));
addKeybind('B', function(ev) { log('B')});
addKeybind('B', function(ev) { log('B!!');  return false;}, $('loglog'));
addKeybind('ctrl-x', function(ev) { log('!!!!!!!!!')});
addKeybind('ctrl-alt-o', function() { log('????????') });

cancelKeybind($('cancel'));

var cfunc = addKeybind('c', function(ev) { log('c')});
var cfunc2 = addKeybind('c', function(ev) { log('c2')});
removeKeybind('c', cfunc);

関数一覧

addKeybind(key, func[, element = document])

指定したキーが押されたときの関数を追加します。element を指定しなかった場合は document に connect されます。追加した関数が返ります。

追加した関数は、false を返す、もしくは例外 KeyTypeListener.StopKeyChain を発生させない限り連鎖します。

addKeybind('a', function(ev) {}); // 実行される
addKeybind('a', function(ev) { return false;}); // 実行される
addKeybind('a', function(ev) {}); // 前回 false が返ったので、実行されない
removeKeybind(key, func[, element = document])

指定したキー、関数削除します。

var cfunc = addKeybind('c', function(ev) { alert('c')});
var cfunc2 = addKeybind('c', function(ev) { alert('c2')});
removeKeybind('c', cfunc);
// c を押すと alert('c2') だけ実行される
removeKeybindAll(key[, element = document])

指定したキーに指定してある関数すべてを削除します

cancelKeybind(element)

指定した要素でキーが叩かれても無視します

getBoundKeybindFunctions(key[, element = document])

指定したキーにひも付いている関数全部を取得します

その他

  • opera では ctrl/alt を組み合わせることができません。だれか patch ><

作った人

はてなスタッフ

  • id:motemen (基本部分の実装)
  • id:secondlife (その他)
 |