「上上下下左右左右BA」。言わずもがな、グラディウスなどでお馴染みのコナミ（Konami）コマンドですね。このコマンドは「もっともよく知られている隠しコマンド」としてギネスブックにも載っているとのことです。今年の6月頃に、Twitterに実装されているということで話題にもなりました。その頃自分でも書いてみたコナミコマンドを実装するコードを今回jQueryプラグインにしてみたので、ここで紹介させていただきます。
「jquery.cb-konami.js」概要
まずは以下のサンプルを試していただくと一番わかりやすいと思いますが、当プラグインでWebサイトに「コナミコマンドを取得し、任意のアクションを実行させる機能」を実装することができます。コナミコマンドによって発動させるアクションに関しては、各自お任せということになります。
サンプル
以下のサンプルページが表示されましたら、そのままお使いのパソコンのキーボードにてコナミコマンド（上上下下左右左右BA）を打ってみてください。何かが起こります（笑）
また、このページにも実装しています。よろしければこちらでもお試しください。
実装方法
まずは、「jQuery」と「ダウンロードしたプラグインのjsファイル」を機能を実装したページに読み込みます。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.cbkonami.min.js"></script>
実装の基本スタイルとしては以下のようになります。jQueryオブジェクトに対して、.cbkonami()メソッドを指定します。.cbkonami()メソッドの引数には、コマンド入力後に実行させたい処理（関数）を指定します。コードを記述する位置は、<body>の閉じタグの直前がよいでしょう。
<script>
$(window).cbKonami(コマンド入力後に実行させたい処理（関数）);
</script>
実装例
実装例1 .cbkonami()メソッドの引数に直接に関数を入力<script>
$(window).cbKonami(function () {
console.log("bar"); // コナミコマンド入力後 => bar
});
</script>
実装例2 前もって関数を定義して、.cbkonami()メソッドの引数に関数を指定<script>
var foo = function () {
console.log("bar"):
};
$(window).cbKonami(foo); // コナミコマンド入力後 => bar
</script>
当ブログでの実装例
<script>
$(window).cbKonami(function () {
console.log("bar"); // コナミコマンド入力後 => bar
});
</script>
<script>
var foo = function () {
console.log("bar"):
};
$(window).cbKonami(foo); // コナミコマンド入力後 => bar
</script>
当ブログでの実装例
お試しいただくとわかる通り、当ブログでは「meltdown3.js」というライブラリを使って、コナミコマンドを入力すると画面が崩壊する機能を仕込んでいます。実装方法を紹介しておきます。
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.cbkonami.min.js"></script>
<script>
$(window).cbKonami(function () {
var d = window.document;
var s = d.createElement("script");
s.src = "http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown3.js?" + (new Date).getTime();
s.charset = "UTF-8";
s.id = "KM3";
d.body.appendChild(s);
});
</script>
ダウンロード
興味を持っていただけたら、ぜひ当jQueryプラグインを使って、コナミコマンドを実装してみてください。何かご意見、ご要望などありましたら、こちらのコメント欄でもよいのでお知らせいただけますと幸いです。
最後にコナミコマンドの機能を実装しているサイトをまとめているサイトを紹介しておきます。こちらのサイト自体もコナミコマンドの機能が実装してあり、コナミコマンドを入力すると一覧が表示されるようになっています。
コメント