スマートフォン用のドロワーメニューを設置できるライブラリ「Highendrawer」をJavascriptで作ってみた

作ったもの

Highendrawer

https://github.com/ym-aozora/highendrawer

DEMO

https://ym-aozora.github.io/highendrawer/

スマートフォンで見ていただき、右端から左に向かってスワイプすると開きます。
また、左上のボタンをタップしても開きます。
閉じるときもスワイプで閉じることが出来ます。
また、Androidの場合はバックボタンを押しても閉じることが出来ます。

使い方

distディレクトリの中のhighendrawer.min.jsを読み込んで下記のようにインスタンスを生成してあげたら出来ます。

<script src="https://npmcdn.com/highendrawer/dist/highendrawer.min.js"></script>
<script>
var drawer = new Highendrawer({
  element: document.getElementById('drawer')
});
</script>

elementというオプションにドロワー化したい対象のDOMを指定してあげる形です。
指定可能なオプションはここに載っています。
必須なのはelementのみです。
direction(このオプション名は今後変える可能性あり)がデフォルトで'right'となっているのでそのままだと右側に設置されますが、左側に置きたい場合は'left'としてあげると左側に設置できます。
アニメーション速度もdurationの値をミリ秒で設定してあげると変更できます。

経緯

発端はWeb用のナビゲーションメニューをどうするか悩み、ドロワー型にしようと決めたんですが今度はどう実装しようか悩み…っていうところからでした。

ものすごい単純に考えたら、開閉トリガーとなるボタンを置いて、タップされたら開閉出来るようにすれば良いだけなんですが、スマートフォン用のアプリケーションに慣れていると例えばAndroidだったらバックボタンで閉じたり、スワイプで開閉出来たりするので、どうせならその辺もサポートされてたら良いな〜って思いました。
こういうのは大抵ライブラリが先人によって出来ている可能性が高いので探してみたんですが、どうもその時必要だったものにマッチするものが無かったので作りました。

まとめ

まだbeta版なので今後色々な改良が加わるかもしれません。
npmにも公開しているので、そのあたりに詳しい方はきっとリポジトリのREADMEを見たらそれ用のインストール方法やCommonJS方式の使い方も分かるかと思います。

以上、作ったライブラリの紹介でした。

Aozora, LLC