JS: Webサイトにオリジナルのコマンドやショートカットキーを設定できる『Mousetrap』の紹介!コナミコマンドもできちゃう!



  • shortcutkeywebsite



shortcutkeywebsite
Webサイトにオリジナルのコマンドやショートカットキーを設定できるというJavaScriptのライブラリMousetrapの紹介です。ブラウザに無いショートカットキーやコマンドをWebサイトに設定できちゃいます。

  • 対応ブラウザ

    ■ Internet Explorer 6 以上に対応。
    ■ Safari
    ■ Firefox
    ■ Google Chrome

    使い方 – 入門

    MousetrapはGithubからダウンロードできます。上記リンクからダウンロードしファイルを解凍。

    解凍後、スクリプトを読み込ませる為にmousetrap.jsをサーバーにアップロードしショートカットキーを動かしたいページのbody内に上記コードを設定します。後は、オリジナルのショートカットキーと機能を設定するだけです。

    使い方 – アラートが表示されるサンプル

    ✔ シングル

    こちらはシングルショートカットキーです。キーボードの”G”を押してみてください。

    ✔ ダブル

    こちらはダブルショートカットキーです。キーボードの”Shift”と”G”を同時に押してみてください。

    ✔ コマンド

    こちらはコマンドショートカットキーです。キーボードの”上・上・下・下・左・右・左・右・B・A・Enter”を左から順に押してみてください。

    対応しているキー

    backspace・tab・enter・shift・ctrl・alt・capslock・esc・space・pageup・pagedown・end・home・left・up・right・down・ins・del・metaや数字・記号に対応しているとのこと。

    最後に

    今回はアラートで機能を紹介しましたが使い方は色々です。IDを持ってる要素を上手く使うと面白いショートカットキーやコマンドが作れると思います。jQueryとMousetrapでヌルッと回転とかやってみたい気がします。一時期ツイッターでコナミコマンドを入力するとラリー・バードが回転するという面白いギミックがあったりもしましたが、今は出来なくなっちゃったようですね。記事は以上。


    コメントしてね!