2016年1月15日（金）に宮崎駿のジブリ映画「天空の城ラピュタ」が日本テレビの金曜ロードショーで放送されることが決定しました。「天空の城ラピュタ」と言えば、もうおなじみの「バルス祭り」ですね。前回の放映時には、その「バルス祭り」に便乗して、Yahoo!Japanなどさまざまなネットサービスが自分たちのサイトに仕掛けを施したりしました。今回もまたさまざまなネットサービスで、いろいろな仕掛けが見られることでしょう。放映まであとわずかですが、簡単にbalsを入力したら、画面を崩壊させる仕掛けを実装する方法を紹介したいと思います。
バルスで画面を崩壊させるDemo
すでにこの記事内にはbalsで画面が崩壊する機能を組み込んでいます。以下のフォームに「bals」と入力すると、画面が崩壊するようになっています。元に戻せるようになっているので、まずはお試しください！！（バルスの正式な綴りが不明ですが…）
=== Say “B A L S” !!! ===
実装に必要な物
機能を実装するために、以下のJavaScriptプラグインを使います。
これはページにKonamiコマンドを実装するプラグインとなりますが、オプションで処理のトリガーとなるオリジナルコマンドを設定することができるようになっています。
プラグインは以下よりダウンロードしてください。
npm経由で入手することも可能です。
$ npm install --save cb-konami-js機能の実装に使用するファイルはdistフォルダ内の以下のjsファイルとなります。
dist/konami.min.js実装方法
1. プラグインをページに読み込む
ダウロードしたプラグインのdistディレクトリ内の「konami.min.js」をページに読み込みます。（<body>の閉じタグの直前に）
<script src="../dist/konami.min.js"></script>CDN版もあるので、手っ取り早く使いたい場合は、こちらを読み込んでください。
<script src="https://cdn.rawgit.com/maechabin/cb-konami-js/master/dist/konami.min.js"></script>2. プラグインの実装（基本スタイル）
読み込んだプラグインに続いて以下を記載します。これが基本スタイルとなっています。bals.init()メソッドの引数に、コマンド（bals）を入力後に実行したい処理をコールバック関数としてセットします。
<script>
(function () {
var bals = new Konami([66, 65, 76, 83]);
bals.init(function () {
// ここに「BALS」を入力後に実行させたい処理を書く
});
} ());
</script>newする際にKonamiオブジェクトの引数に「b, a, l, s」のキーの配列[66, 65, 76, 83]をセットしています。引数に何もセットしない場合は、Konamiコマンド（上上下下左右左右BA）がトリガーのコマンドとなります。
3. meltdown3.jsを使って画面を崩壊させる処理を実装する
コマンド（bals）を入力後に実行したい処理は自分で書いても良いですが、今回のDemoでは、「meltdown3.js」というプラグインを使わせてもらっています。meltdown3.jsについての詳細は以下をご参照ください。
実装すると以下のようになります。<script>
(function () {
var bals = new Konami([66, 65, 76, 83]);
bals.init(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>
これで実装は完了です。「bals」と入力すると画面が崩壊します。ただ入力することを直感的に分かりやすくするために、フォームなどを用意してあげると良いでしょう。
まとめ
実装するのは難しくないので、『天空の城ラピュタ』の放映まであとわずかですが、興味がありましたら是非お試しいただけたらと思います。また今回紹介したプラグインは別の用途でも使えますので、サイトにトリックをしかけたい場合などにお使いいただければと思います（Konamiコマンドの実装など）。ちなみにjQueryプラグイン版もありますので、お好みで使い分けることも可能です。是非「バルス祭り」に向けて面白いことをやってみましょう！
コメント