GoogleやFacebookのスマホサイトなどでおなじみの横スライドメニュー。（横からガッコんって出てくるやつ。
一見どのサイトも同じ動作かと思いきや、それぞれ仕様はかなり異なっています。
今回は、GoogleとFacebookの横スライドメニューの仕様の違いを比較してみます。
この観察によって、自分で横スライドメニューを実装する時に検討すべき仕様が見えてくるはずです。
スライドメニューを開く動作
・イージングあり
・横スライドメニューの幅は240px
・開閉ボタンのサイズは48×48
・イージングなし
・横スライドメニューの幅は260px
・開閉ボタンのサイズは44×44
タッチした瞬間がtouchstart、タッチした指を離した瞬間がtouchendです。
ちなみにclickイベントで指定した場合はtouchend扱いになります。
ちなみに…
公式ガイドラインによると、ボタンのサイズはiOSでは44×44pt、Androidでは48×48dp以上が望ましいとされています（pt、dpは共に画面密度によらない抽象単位）。
Webの場合、CSS単位のpxがデバイスピクセルの差を吸収してくれるため、44×44px、48x48pxと考えてもいいでしょう。
ということで、GoogleのサイトがAndroidのガイドラインに準拠しているのは当然として、FacebookのサイトはiOSのガイドラインに従っている、というのもまた興味深いですね。
スライドメニューを閉じる動作
・イージングあり
・イージングなし
スライドメニューのスクロール領域
スライドメニューが開いている時の動作
共通
アドレスバーの扱いとスクロール
・開閉時にオートスクロールもされないので、スライドメニューのスクロール位置が保持される
ということは…
まず、アドレスバーの高さがある時にスライドメニューを開き、最下部までスクロールする。その状態でスライドメニューを閉じる。その後、アドレスバーの高さを変えて再度スライドメニューを開くと、アドレスバーの高さが減少、つまりページの高さが増加した分だけ、スライドメニューの下の領域を空けて相殺している。
これは、あくまでもスクロール位置を保持するためだと想像される。
この空白領域は、スライドメニューのtouchstartイベントで即座に解消される。
総評
ユーザビリティと実装の難易度を考慮すると、Googleサイトの方が細部へのこだわりが感じられます。
Facebookサイトの方は、実装の面でけっこう妥協している印象。
とは言え、スマホサイトにおける”完璧な実装“のポイントをどこに置くかは、かなり深い問題なので、一概がどちらが優れているとは言えません。
FacebookとGoogleのサイトトップを見比べてみると、それぞれのコンテンツ量の違いは明らかです。Googleのスライドメニューはコンテンツ量が少ないから最適と言え、仮にFacebookのサイトにそのまま実装した場合、スマホ実機の性能（JavaScriptの実行速度など）に依存してスライドメニューのスクロールがカクカクしてしまう恐れもあります。古い実機でもストレスなく閲覧できるこを重視して、OS依存、機種依存のない実装を選ぶのもまた正解であるとも言えます。
とは言え（2回目）、自分で横スライドメニューを実装するならば、Googleサイトくらい細部に拘った実装をしたいところですね。
で、実装方法はまた次の機会にッ