BT

KeyboardJS 0.4.1 リリース

| 作者: Callum Macrae フォローする 0 人のフォロワー , 翻訳者 吉田 英人 フォローする 0 人のフォロワー 投稿日 2013年1月21日. 推定読書時間: 3 分 |

原文(投稿日:2013/01/15)へのリンク

 

KeyboardJS は,JavaScriptによるキーボード処理を容易にするために開発されたライブラリだ。先月リリースされた0.4.1では,多くのバグフィックスと新たな機能が提供されている。KeyboardJS ライブラリは,例えばWebサイトやゲームでのキーボードショートカットの実装のような,キーボード操作関連の機能を担当するフロントエンド開発者を支援することが目標だ。もしライブラリを使わなければ,J キーと K キーが押されたことを検出するために,以下のようなことをする必要がある。

var jPressed = false,
	kPressed = false;

document.addEventListener('keydown', function (e) {
	if (e.keyCode === 74) {
		jPressed = true;
	} else if (e.keyCode === 75) {
		kPressed = true;
	}
	
	if (jPressed && kPressed) {
		// Both keys are pressed; log to console
		console.log('Both J and K are pressed');
	}
});

document.addEventListener('keyup', function (e) {
	if (e.keyCode === 74) {
		jPressed = false;
	} else if (e.keyCode === 75) {
		kPressed = false;
	}
});

KeyboardJSを使えば次のように,多少なりとも読みやすいコードで書くことができる。

KeyboardJS.on('j + k', function () {
	console.log('Both J and K are pressed');
});

キーの押された順番を(>オペレータを使って)指定したり,上記の例のように "and" や,あるいは空白やカンマで "or" を指定することも可能だ。

KeyboardJSは先月,バージョン0.4.1をリリースした。全面的な書き直しを行った0.4.0はリリースされなかったが,今回はそれに加えて多数のバグがフィックスされ,多くのAPIが変更されている。現在押されているキー名を配列で返す KeyboardJS.getActiveKeys() 関数の追加 (GitHubのKeyboardJSウェブサイトで名称の表示に使用されている)や,キーボードコンビネーションで使用するコンビネーション関数群がKeyboardJS.combo オブジェクトに移動されたことなどはその一部だ。

KeyboardJSを GitHubから ("ここから入手"セクションまでスクロールするとリンクがある) ダウンロードした上で,独自のアプリケーションに追加することも可能だ。ページ内でKeyboardJSが必要な部分より前に,次のHTMLを追加すればよい。

<script src="keyboard.js"></script>

今でもXHTMLを使っているのなら,type="text/javascript" をスクリプトタグに追加する必要がある。

RequireJS を使って,AMDモジュールとしてロードすることも可能だ。

キーボードのレイアウトは,ロケールによって異なる (例えばshift+6はUSキーボードではキャレット(^)だが,ドイツ語キーボードではアンパサンド(&))。KeyboardJSでも各ロケールをサポートする予定だが,現時点でサポートされているのはUSキーボードレイアウトのみだ。ただし,ライブラリにロケールを追加するのは極めて簡単だ — もし自分自身でロケールを追加したのなら,pullリクエストを送信してライブラリに加えてほしい。

 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT