酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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を実行してください。

1
gem 'mobylette'

コントローラへの設定

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

1
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に次のように書きます。

1
2
3
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を個別に指定することも簡単にできます。

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

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

1
2
3
4
5
6
7
8
is_mobile_request?
#=> モバイルのアクセスの場合のみtrueを返す

is_mobile_view?
#=> フォーマットの指定が:mobileの場合のみtrueを返す

request_device?
#=> パラメータでデバイスを指定されていればtrueを返す

tscolari/mobylette · GitHub

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

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

1
2
3
4
5
6
7
8
9
10
11
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の切り替わりの部分の記述を書き直し

ハッカソンハウス遊びに来ませんか?

ハッカソンハウス
クリエーターが無料で、自由に開発に集中できるスペース「Hackathon House」を作りました。 『ハッカソンハウス - カレンダー』にOPENしている日時を書いていますので、是非遊びに来てください! (場所はHPのお問い合わせからご連絡ください)

なぜ始めたのか?

僕はアメリカの有名なインキュベーション・オフィスを少しだけ訪問させて頂いたことがあります。あそこはプロダクトの可能性を目一杯引き出してくれる夢のような空間でした。僕はあんな場所を日本にも作りたいとずっと想い続けてきました。この企画を一緒にやっているくりしーさんは、『サウス・バイ・サウスウエスト』を通して、「あのワクワクする空間、熱気溢れるカオスな空間を日本でも創りたい。」というビジョンで一緒にやっています!



押さえておきたい書籍

いかがだったでしょうか?
もし説明がわかりにくかったり、間違っている場所があればぜひ一言!

Comments