MaedaJavaScriptUI/UXプラグイン自作2016年1月15日(金)に宮崎駿のジブリ映画「天空の城ラピュタ」が日本テレビの金曜ロードショーで放送されることが決定しました。「天空の城ラピュタ」と言えば、もうおなじみの「バルス祭り」ですね。前回の放映時には、その「バルス祭り」に便乗して、Yahoo!Japanなどさまざまなネットサービスが自分たちのサイトに仕掛けを施したりしました。今回もまたさまざまなネットサービスで、いろいろな仕掛けが見られることでしょう。放映まであとわずかですが、簡単にbalsを入力したら、画面を崩壊させる仕掛けを実装する方法を紹介したいと思います。バルスで画面を崩壊させるDemoすでにこの記事内にはbalsで画面が崩壊する機能を組み込んでいます。以下のフォームに「bals」と入力すると、画面が崩壊するようになっています。機能を実装するために、以下のJavaScriptプラグインを使います。GitHubこれはページにKonamiコマンドを実装するプラグインとなりますが、オプションで処理のトリガーとなるオリジナルコマンドを設定することができるようになっています。プラグインは以下よりダウンロードしてください。cb-konami-jsをダウンロードするnpm経由で入手することも可能です。cb-konami-js機能の実装に使用するファイルはdistフォルダ内の以下のjsファイルとなります。プラグインをページに読み込むダウロードしたプラグインのdistディレクトリ内の「konami.min.js」をページに読み込みます。src="../dist/konami.min.js"></script>CDN版もあるので、手っ取り早く使いたい場合は、こちらを読み込んでください。プラグインの実装(基本スタイル)読み込んだプラグインに続いて以下を記載します。これが基本スタイルとなっています。bals.init()メソッドの引数に、コマンド(bals)を入力後に実行したい処理をコールバック関数としてセットします。83]をセットしています。引数に何もセットしない場合は、Konamiコマンド(上上下下左右左右BA)がトリガーのコマンドとなります。meltdown3.jsを使って画面を崩壊させる処理を実装するコマンド(bals)を入力後に実行したい処理は自分で書いても良いですが、今回のDemoでは、「meltdown3.js」というプラグインを使わせてもらっています。meltdown3.jsについての詳細は以下をご参照ください。memo実装すると以下のようになります。());</script>これで実装は完了です。「bals」と入力すると画面が崩壊します。入力することを直感的に分かりやすくするために、フォームなどを用意してあげると良いでしょう。まとめ実装するのは難しくないので、『天空の城ラピュタ』の放映まであとわずかですが、興味がありましたら是非お試しいただけたらと思います。今回紹介したプラグインは別の用途でも使えますので、サイトにトリックをしかけたい場合などにお使いいただければと思います(Konamiコマンドの実装など)。ちなみにjQueryプラグイン版もありますので、お好みで使い分けることも可能です。maechabinホーム目次トップ。