読者です 読者をやめる 読者になる 読者になる

押下されたキーの種類を判定するやつ

最近Twitterクライアントやエディタ、その他WebアプリなどでいわゆるSingle Page Applicationを書く機会が何度かあって、押下されたキーの種類を判定するロジックが頻出するようになったので雑にライブラリ化して r7kamura/key-string というのを書いた。

使い方

KeyStringDetectorクラスのインスタンスを作成して、KeyStringDetector#detect(event) を実行すると文字列が得られる。

const keyStringDetector = new KeyStringDetector();
keyStringDetector.detect(event1) // => 'F'
keyStringDetector.detect(event2) // => 'Ctrl+Return'
keyStringDetector.detect(event3) // => 'Alt+Shift+Down'

アプリケーション上での使われ方

例えば、JキーとKキーで記事リスト内の要素を選択するというUIをつくりたいときは、雑にやるならまずキーが押下されたときに発火するようなEventEmitterをつくって、そのイベントを購読したりすることが多い。

// keyboard-event-publisher.js
import EventEmitter from 'events'
import KeyStringDetector from 'key-string'

const eventEmitter = new EventEmitter();
const keyStringDetector = new KeyStringDetector();

document.addEventListener('keydown', (event) => {
  if (event.target === document.body) {
    eventEmitter.emit(keyStringDetector(event), event);
  }
});

export default eventEmitter;

例えばこういう風に使う。

import keyboardEventPublisher from './keyboard-event-publisher'

keyboardEventPublisher.on('J', (event) => {
  // select next element...
}).on('K', (event) => {
  // select previous element...
}).on('Esc', (event) => {
  // clear selection...
});

キー名などの仕様

ソースコード上では ここ に定義されている。ElectronのAcceleratorという仕様を参考にしていて、出来る限りこの仕様に則るようにしようとしている。元々の背景として、Electronでショートカットキーを設定するのにAcceleratorの仕様を使っているのに、mousetrapなどのライブラリではまた別の仕様を使う、みたいな状況が気に入らなかったのでつくったという背景がある。Acceleratorの仕様は ここ に書かれている。

keyString.js

原体験として cho45/keyString.js で昔よく遊んでいたので、似たようなものをつくる結果になった。

あとがき

いまつくっているエディタの試し書きとして記事を書いた。

image