BLOG

ブログ

不まじめなことも書いています。

簡単実装!キーボードで特定のテキスト(コマンド)を打つとclassを付与する方法

2023.10.18

これを書いたのは下っ端です。

まずは、弊社「株式会社インターコード」の会社概要ページのスタッフ紹介欄に実装している仕様の説明をさせてください。
スマホサイトでは確認しずらいものですので、現在スマホで閲覧されている方は是非パソコンからご覧くださいね。

スタッフ紹介欄に記載している

「Ctrl + U もしくは Command + option + U でご確認ください。」

はソースコードをご確認ください、という意味ですがご確認頂いたでしょうか?
※環境によっては記載している方法ではソースコードが表示れない可能性もあります。

まだの方は是非ソースコードをご覧頂いて、スタッフ紹介欄までスクロールしてみてください。

※ぼかしを掛けています。

また、同じく

「キーボードで intercord と入力するといいことがあるかもしれません。」

と記載していますが、お試しいただけましたか?
※こちらも環境によっては動作しないかもしれません。ご了承ください。

「 intercord 」とキーボードで打っていただくと何かが表示されます。

※ぼかしを掛けています。

この実装自体はすごくシンプルで、キーボードで指定のテキスト(コマンド)を打つすると特定の箇所にclassが付与され一定時間後に剥奪される仕組みです。
前置きが長くなりましたが、今回紹介するのはその実装方法です。
一度理解できれば、簡単に実装出来てちょっとした遊び心をホームページに追加することが出来ます。

まずは、GitHubからプラグインをダウンロードください。
https://github.com/maechabin/jquery.cb-konami.js

jquery.cb-slideheader.jsの実装方法などの詳細は、GitHub内でも紹介されていますが、
今回はそこに「キーボードで指定のテキスト(コマンド)を入力すると指定の場所にclassが付与され一定時間後に剥奪する」仕組みを追加します。

 

 

①キーボードで入力させるテキスト(コマンド)を指定する方法
jquery.cbkonami.min.jsは、Konamiコマンドと呼ばれる「上上下下左右左右BA」をキーボードで打った際に何かを実行するものになっています。

この部分です。

this.command = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];

それぞれの数字がKonamiコマンドの
[↑] + [↑] + [↓] + [↓] + [←] + [→] + [←] + [→] + [B] + [A] に対応するキーコードと呼ばれるものになっています。

キーコードについては、以下参考サイトの対応表をご確認ください。
キーコード一覧 【JavaScript 動的サンプル】
https://web-designer.cman.jp/javascript_ref/keyboard/keycode/

intercord をキーコードの対応表通りに合わせていくと、
以下のような形になります。
73, 78, 84, 69, 82, 67, 79, 82, 68
これらの数字を this.command に指定されている数字に差し替えます。

こうなりますね。

this.command = [73, 78, 84, 69, 82, 67, 79, 82, 68];

これで、キーボードで入力させるテキスト(コマンド)を指定する方法は以上です。

次は、
②指定の場所にclassが付与され一定時間後に剥奪する方法

GitHub内で紹介されていますが、キーボードで指定のコマンドを打った際に実行する処理(関数)は以下になります。

$(window).cbKonami(function () {

});

この処理を使い、以下のように処理を追加していきます。

$(window).cbKonami(function () {
	body = $(document.body);	//bodyタグを指定
	function intercord(){
		setTimeout( function() {	//遅延処理
			body.removeClass("kao");	//bodyタグのkaoのclassを剥奪
		}, 5000);	//実行する時間を5秒(5000)に指定
	body.addClass("kao");	//bodyタグにkaoのclassを追加
	}
	intercord();
});

上記例では、
キーボードで指定のコマンドを打った際、
まずは、bodyタグに kao のclassが追加され
つぎに、5秒後にbodyタグの kao のclassが剥奪される処理になっています。

 

後は、CSSでbodyにkaoがある場合のレイアウトを指定するだけで
弊社「株式会社インターコード」の会社概要ページのスタッフ紹介欄のような仕組みのことが実装可能です。

//bodyにkaoがない場合
body:not(.kao) {
	
}
//bodyにkaoがある場合
body.kao {
	
}

のような形ですね。

5秒後にbodyタグの kao のclassが剥奪される処理が必要でない場合は、以下のようなシンプルな形になります。

$(window).cbKonami(function () {
	body = $(document.body);	//bodyタグを指定
	body.addClass("kao");	//bodyタグにkaoのclassを追加
});

これで以上になりますが、
一度理解すると簡単に流用は可能なので是非お試しください!

ご相談事などでもお気軽にお問い合わせください。

BLOGを見る