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

どうも、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)

まとめ

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

  Sidr jPanelMenu jQuery Mobile
左右メニュー △(どちらか片方のみ)
iOS 対応
Android 対応

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

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

shibuso

明治大学大学院理工学研究科を修了後ウェブ企業に就職。その後ソーシャルゲーム企業に転職し、後に登録会員数400万人を超えたタイトルのローンチを担当。2012年にBPSに入社。 Java, PHP, Perl, Rubyと渡り歩いて来ました。BPSに入社後RubyとRailsを使い始めましたが、今では一番好きな言語になっています。 休日の趣味はゲームと愛車のCBR250Rでのツーリングです。 たまにblog書いてます。http://www.shibuso.net

shibusoの書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ