スマートフォン向けページでサイドメニューを実装する方法比較

どうも、shibuso です。スマホ用のGoogle やFacebook のページにあるような、サイドメニュー（スライドメニューやスライドパネル等、呼び方は色々あるみたいです）をスマホ用ページで実装しようとして色々プラグインを試してみたのでまとめてみました。

今回比較したのは

• Sidr
• jPanelMenu
• jQuery Mobile

の3つです。

導入するにあたり実現したいこととして、左側と右側それぞれにメニューを設置できる、本文とメニューそれぞれテキスト量が可変なのでどれだけ長くても対応できる、というものがありました。

結論から先に書くと、jQuery Mobile が一番どの端末でもしっかり動いてくれました。以下、デモも交えてそれぞれの状況をまとめました。デモページを実機で確認されるとより把握しやすいかと思います。なお、今回確認に用いたのは主にiPhone(iOS5) と、Galaxy S2(Android2.3.3) です。

Sidr

jQuery のプラグインで検索していて最初に見かけたのがこのSidr でした。最近はあまり更新が無いみたいですがCSS も用意してあり結構使い勝手が良いように感じました。

PC 向けに作られたものかと思いますがスマホでも基本的には動いてくれているように見えました。iOS では問題なく動いたものの、しかしAndroid で問題が発生しました。Android 2.3 では元々表示している本文よりもサイドメニューの方が縦に長かった場合スクロール出来ないという現象が起こりました。Android 4.0 では左側のメニューに関しては解決したものの、依然右側のメニューで同現象が発生していました。

デモはこちら(GitHub Pages)

jPanelMenu

次に試してみたのがjPanelMenu です。

こちらは説明文で「スマホ版のFacebook やGoogle や、あるいはiOS のネイティブアプリのようなメニューが作れる」と書かれていたので期待しましたが、残念ながらこちらでもSidr と同じく縦スクロールの問題が発生してしまいました。また、どうも左メニューと右メニューを同時に実装できない模様です。ここは私の実装ミスの可能性も捨て切れませんが。

デモはこちら(GitHub Pages)

jQuery Mobile

最後にたどり着いたのがjQuery Mobile でした。Panel 機能が割と最近の1.3 から追加されたようで、こちらの解説ページに使い方がまとめられています。

さすがスマホ用に作られているだけのことはあり、Android 2.3 でもiOS でもきちんと対応されています。jQuery Mobile ならではの各種書き換え等の副作用はありますが、それも慣れたり無効化することで十分使えるかと思います。

デモはこちら(GitHub Pages)

まとめ

対応表にまとめると下図のようになりました。

今回比較したものの他にも色々プラグインはあるかと思います。スマホを考えた上での実装ですと、jQuery Mobile と比較して決めるのが良いように感じました。