1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

キーボード入力をやりやすくするライブラリを作った件について

Posted at

LibKeyというライブラリです。
言語はJavascriptです。
Githubに公開しています。

libkey.jsが開発用ファイルで、libkey.min.jsが圧縮(?)したファイルです。
サンプルプログラム(index.html)にVue2を使っているのでNoticeに記述しています。
ライセンスはApache License 2.0です。

仕組み

形式はクラスです。場所はwindow.libkeyです。
クラスなのでこのように使います。

let KeyInput = new libkey();

クラスのコンストラクタではまず、addEventListenerでキーボードイベントを追加してキーボードの入力を監視(?)します。

実際のコードの一部(一部インデントを修正)
constructor(){
    document.addEventListener("keydown",e=>{
        if(e.key && !this.isPress(e.key)
        && e.key.length === 1) this.pressKeyArray.push(e.key)
            this.#setmeta(e,true)
        })
        document.addEventListener("keyup",e=>{
            if(e.key) this.pressKeyArray.splice(
                this.pressKeyArray.indexOf(e.key) )
            this.#setmeta(e,false)
        })
    }

このコードは、isPressメゾッドで既に入力の変数に設定されているかを確認してから、入力の変数に追加しています。
そのあとにエンターキーなどの少し特殊なキーの設定を#setmeta関数に丸投げします。

使い方

変数

クラスのインスタンスを作ると、中身の変数はこのようなものがあります

  • pressKeyArray
  • isPressEtcKey
  • ondown
  • onup

キー入力状態変数

pressKeyArrayは、今入力されている英数字・記号(正確にはKeyboardEvent.keyの値が一文字になる入力)の配列です。
KeyboardEvent.keyに関してはこちらをご参照ください。

pressKeyArrayの中身のサンプル
["a", "@", "1"] //これはA、@、1が同時押しされている状態です。

isPressEtcKeyは、その他Ctrlキー、Altキーなどの少し特殊なキーが押されているかをBooleanで保存しています。
中身はこのようになっています。

isPressEtcKeyの中身(コメントなど訂正あり)
isPressEtcKey = {
    upArrow:false,   //上矢印キー
    downArrow:false, //下矢印キー
    leftArrow:false, //左矢印キー
    rightArrow:false,//右矢印キー
    enter:false,     //エンターキー
    space:false,     //スペースキー
    alt:false,       //Altキー
    ctrl:false,      //Ctrlキー
    shift:false      //Shiftキー
}

もちろんtrueが押されている状態で、falseが押されていない状態です。

イベント変数

ondown変数は、キーボードが押されたときに実行するイベント関数です。
初期値はe=>eです(エラー防止のため)
代入はこのようにします。

代入例
let KeyInput = new libkey();
KeyInput.ondown = e => {
    console.log(e);
}

渡される引数のeは、KeyboardEvent.keyの値です。

onup変数は、キーボードから指が離された(?)ときに発生します。
引数はondown変数と同じです。代入方法もondownと同じです。

サンプルプログラム(手抜き)

index.html
<p>Ctrlキーを押すと直前に押したキーをアラートするよ!</p>
<script src="libkey.js"></script> <!--libkeyライブラリ本体-->
<script src="script.js"></script>
script.js
let keyinput = new libkey(); //ライブラリの初期化
let lastInput = "";
keyinput.ondown = e => {
    if(keyinput.isPressEtcKey.ctrl){
        alert(lastInput);
    }else{
        lastInput = e;
    }
}

修正案がありましたらGithubやコメントで教えてほしいです。
最後まで見てくれてありがとうございました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?