mobylette iPhone/iPad/Android/iOSを判定、Viewを切り替えるGem [Rails]


Webアプリケーションを作っていてPCとモバイル系(iPhone/iPad/Android/iOS)を判定してViewや処理を切り分けたい場面はあると思います。mobyletteはそういった場面で役立つシンプルなGemです。

このタイプのGemで有名なのは『jpmobile』です。がっつりと作りこむなら、jpmobileの方が断然オススメです。
mobyletteのメリットは、特定のUser-Agentを指定してmobileかPC表示かを切り替えるのを簡単に実装できる点だと思います!

(07/02 20:25) Rails 4.1 & Ruby 2.1.1で動作確認、viewの切り替わりの部分の記述を書き直し

tscolari/mobylette · GitHub


🤔 Gemのインストール

いつ戻おりGemfileに以下を追加して、bundle installを実行してください。

gem 'mobylette'

🐞 コントローラへの設定

Gemのインストール以外にApplicationController.rbか個別のインストーラに次の設定を追加します。

include Mobylette::RespondToMobileRequests

🐡 モバイルとPCでViewを切り替え

モバイル(iPhone/Android/iPad)とそれ以外(PC)を判定してViewを切り替える場合は、Controllerのメソッドで次のように記述します。

PC向け: index.html.erb
モバイル向け: index.mobile.erb

また、

index.erb

としておくとviewはPC/モバイルを共通にして、かつ部分テンプレートだけhtmlとmobileを振り分けることもできます。
必要な部分だけ部分テンプレートで切り替えればいいので、viewがかなりスッキリして見やすくなります!

🐮 Viewの切り替え設定

ちなみにデフォルトではモバイルにはiPhone/Android/iPadが設定されていますが、変更は簡単です。たとえば、iPadはPCと同じ画面を表示したい場合は、Controllerに次のように書きます。

mobylette_config do |config|
config[:skip_user_agents] = [:ipad] # iPadをスキップ
end

すると、次のように表示が切り分けられます。

PC/iPadなど: index.html.erb
モバイル(iPhone/Android): index.mobile.erb

また、Controllerに次のような設定を書くことでmobileのUser-Agentを個別に指定することも簡単にできます。

mobylette_config do |config|
config[:mobile_user_agents] = proc { %r{iphone|ipad}i }
end

また、次のようなヘルパーメソッドもあり、個別に処理を振り分けることも可能です。

is_mobile_request?
#=> モバイルのアクセスの場合のみtrueを返す
is_mobile_view?
#=> フォーマットの指定が:mobileの場合のみtrueを返す
request_device?
#=> パラメータでデバイスを指定されていればtrueを返す

tscolari/mobylette · GitHub

😎 処理を振り分けるメソッド

モバイルか、それ以外かで処理を切り替えるのに便利なメソッドを紹介します。

is_mobile_request?
# モバイルの場合はtrue、それ以外の場合はfalse
is_mobile_view?
# 現在のフォーマットがmobileか、否か
request_device?
# ディバイスが一致した場合のみ true
# 例
# request_device?(:iphone) #=> iPhoneの場合のみtrue
# request_device?(:android) #=> Androidの場合のみtrue

その他テストのやり方なども書かれています。良かったら試してみてください!

tscolari/mobylette · GitHub

🚌 変更来歴

(07/02 20:25) Rails 4.1 & Ruby 2.1.1で動作確認、viewの切り替わりの部分の記述を書き直し

📚 おすすめの書籍