進捗は捗々しくないながらも maps.gpx はまだまだ改修しておる最中ですが、そんな中、いろいろなクラスを設計したり実装したり、している部分のうちには、その部分単独でも独立したライブラリとして仕上げられるものは、仕上げているつもりで、そうしたものは別のリポジトリにして管理しているものもあります。今回はそのひとつ DrawerCSS と名付けてしまったそれについて、紹介します。
これはひとことで云えば、 HTML ページ（任意のブロック要素）に Drawer （ドロワー、引き出し）を簡単につけるための JavaScript のクラスです。名前に CSS と付けているのは、 CSS3 の機能を用いた実装だからです。
しかしながら、これを使おうとする際には CSS を記述する必要はありません。このクラスのインスタンスが自律的に CSS を操作して、しかるべき動作をするようになっています。（尤も、 CSS を記述する際の制約はあります。）
百聞は一見に如かず、今回はデモを用意したので、そちらを参照してみてください。「コンテンツ」部分をクリックすると開閉します。また HTML ソースを覗いてみてください。
経緯
かつて、といってもつい最近までのことですが、ドロワーを実装しようとした時には jQuery Mobile (jqm) を利用していました。ドロワーの動きに初めて触れたのがそれだったがためですが、ほかにライブラリがないかなと探した時にも、──いくつか試してみたのですが、どうも動きがいただけないものばかりで、結局 jqm を利用することになってました。
しかしながら jqm は、なんというか、誤解を恐れず言って仕舞えば、じぶんにとって “オワコン” なものであり、またドロワー以外の部分は必要がないにもかかわらず、 jqm をロードするがためにほかのライブラリと影響し合ってしまったりするので、できれば使いたくありませんでした。
それからしばらく時を経て。いま maps.gpx を拡張していくにあたり、再び、使いやすくて動きがクールなドロワーはないものかと探してみたところ、じぶんはようやく CSS だけでドロワーを実装できるということを知ったのでした。
で、話がまた長くなるのでこれ以上は省きますが、 Web 検索の上位に出てくる幾つかは試してみたものの、結局は納得のいくものが得られなかったため、では自作にチャレンジしてみようと相成ったのでした。
特徴
コンセプトとしては、やはり「シンプル」ということに尽きます。そのためにも、この DrawerCSS の JavaScript ソースファイル drawer-css.js 以外に必要なものはありません。
そのソースの特徴のほうなのですが、まあこれは、見よう見まね、 CSS についての確たる知識も無い中トライ＆エラーでやっているので、エレガンスとは程遠いかもしれませんが、おかげで見通しがよく理解がしやすいかとも思います。これはだいじなことなのですが、数ヶ月先のじぶんが、ソースだけを見て思い出せるものでなければなりません。
そして機能の特徴のほうですが、──正直なところ世にあるドロワーのライブラリよりは少ないです。たとえば開いたドロワーのエッジに影をつけたりとかいうのは、今後頑張ってみるかもしれませんが、いまはありません。
ただ一点だけ、ほかに無い？特徴があり、それは、任意のブロック要素についてドロワーを付けられるという点です。一般的にドロワーというと、ヴューポートのサイズでそれを動かしますが、 DrawerCSS は、ベースとなるブロック要素を指定して、そのブロック要素の枠組み（タテ・ヨコ）の中で、ドロワーを開閉することができます。
デモンストレーション
もちろん、任意のブロック要素ならば、ビューポートのタテ・ヨコの幅全体サイズでのドロワーもできます。これは次のデモを参照してください：
このデモでは別の意味もあって、 Google Maps API は、その要素のスタイルを、なんらかの状態に変化さているかもしれませんが、それとは衝突することなく、この DrawerCSS が使えることを示しています。
そもそも DrawerCSS は maps.gpx の制作中から派生しているものなので、 Google Maps API に影響を及ぼすようでは使い物にはなりません。そのことから、地図付きのデモ、というかテスト・ページになっています。
また地図はフルスクリーンではないかもしれないので、その場合でも意図したとおりに動作するかをチェックするためのデモが次です：
いずれのデモも地図をクリックすることで開閉します。
そして、現在のバージョンでサポートしているオプションの値を、さまざまに変更しながらその効果を試すことができるようにしたページが次です。 API ドキュメントと併せて見てみてください：
使い方
クラス DrawerCSS の API はプロジェクトのページにある README を参照してください。
尤もそこの英語文はちょっと怪しいので、ここに解説を述べることにして、 DrawerCSS の紹介を終えることにしたいと思います。
HTML とスタイル
DrawerCSS が操作対象とする要素には、主体となる要素と、ドロワーとなる要素とがあります。前者を base 、後者を drawer と呼ぶことにしています。
drawer 要素はページのどこに記述しても構いません。クラス DrawerCSS のインスタンスを作成すると、暗黙のうちにしかるべき位置へ移動させられます。（実は、要素を書かなくても構わないのですが、そのことについては割愛します。）
そして、それらを包むべくブロック要素（コンテナ）があるはずです。もし、無いと思っても、 BODY 要素があります。そのコンテナのサイズを決めてください。そのサイズに base 要素と drawer 要素は影響されます。もし、 BODY 要素がコンテナならば、そのサイズはタテ・ヨコ共に 100% とします（注意：その際は HTML 要素についても 100% を記述することが必要かもしれません）。
具体例は、これまでに示した各デモ・ページのソースを見てみてください。
スクリプト
クラス DrawerCSS のコンストラクタに、 base 要素と drawer 要素それぞれの ID を渡して、インスタンスを作成します。
1
| |
オプション
三番目の引数にハッシュ型のオプションを渡すと、効果をカスタマイズできます。
すべてのオプションのデフォルト値を明示的に指定すると次のようになります：
1 2 3 4 5 6 7 8 | |
side
ドロワーの位置はオプション side に、 TOP 、 RIGHT 、 BOTTOM 、 LEFT のうちいずれかを指定します。
1
| |
span
開き具合（ drawer 要素の幅）はオプション span です。値はピクセル px やパーセンテージ % などといった、 CSS のサイズを表現するときの単位で指定します。
1
| |
effect
開き方のオプション effect には、現在は２種類あります。
デフォルトの値 slide は、ドロワーが開いた時に、 base 要素を押し出すような形でアニメーションします。このとき、 base 要素のサイズは変化せず、コンテナからはみ出す形になります。
そして値 compress は、 base 要素がコンテナからはみ出すことはなく、かわりにサイズが縮められます。
1
| |
なお、はみ出すぶぶんについては、 base 要素の CSS プロパティ overflow にセットする値で振る舞い（見え方）を変えることができます。具体的には scroll や hidden などを、ページのデザインに応じてセットしておきます。
アニメーションに関係するオプション
ドロワーの開閉時のアニメーションのパラメータについては、 delay、duration および timingFunction があります。これらについては、 CSS の transition のことなので、 CSS のドキュメントを参照してください。
インスタンス・メソッド
ドロワーの開閉は、インスタンスを作成したのち、インスタンス・メソッド open() 、 close() および toggle() で行います。いずれも受け取る引数はありません：
1
| |
メソッド toggle() を使った場合、その結果、ドロワーが開いた状態になった場合は true を、そうでなければ false を返します。
その他いくつかのメソッドがありますが、主なものはこれで十分かと思います。詳しくは API ドキュメントを参照してください。