クリック、ドラッグに対応したスライド式メニューライブラリ「Snap.js」
Snap.jsは左右に対応したスライドメニューを表示するライブラリです。
iOSアプリでよく使われているスライド式のメニュー。意外と便利な機能なので、Webアプリでも活かしてみたいと思っている人は多いのではないでしょうか。そこで使ってみたいのがSnap.jsです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-16 12.17.47.1366179446.png)
トップ画面です。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-16 12.17.51.1366179449.png)
ドラッグのところを右にドラッグすると、メニューが出ます。または右上のメニューボタンをクリックしても良いです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-16 12.17.56.1366179453.png)
左も出ます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-16 12.18.27.1366179455.png)
半分で止めることもできます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-16 12.18.46.1366179458.png)
ドラッグできない部分を指定することもできます。
Snap.jsはドラッグできる部分をスライドさせることで左右からメニューを表示させることができます。片方のメニューを無効にすることもできます。ドラッグ以外でもボタンによる呼び出しもできますので、ユーザビリティは高いライブラリと言えそうです。
Snap.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
スライド式メニューは最近よく見かけるようになっていますが、安直に使うことはあまりお勧めしません。特にアプリにおいてはそうです。Webの場合サイドメニューがあるUIは多いので慣れていますが、アプリの場合メニューを開く操作すら行われないケースが多々あります。
また、機能を追加した際にメニューの一項目に追加されますので、どんどんメニューが長くなって新機能が気付かれづらくなる可能性があります。メニューが押されるような工夫（バッジを付けるなど）をしないといけないでしょう。