酒と泪と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の切り替わりの部分の記述を書き直し

10秒でバイトが見つかるアプリ「Short.Works」作ってます!

iPhoneアプリ Short.Works 概要
短期のアルバイトを10秒で探して、応募ができるiPhone/Androidアプリ『Short.Works』を9月リリース目標に開発しています。

どんなアプリ?

* 「明日3時間暇だから、バイトしよう!」が簡単にやれるようになる
* 「近くで・時給の高い」、短期のアルバイトが2タップで見つかる
* 引っ越しやイベントのスタッフなど急に必要になったサポートをすぐに探せる
詳しくは『Short.Works Blog』にどんなアプリなのかを少しずつ紹介します。もし興味があればぜひ読んでみてください!

一緒にアプリを開発しませんか?

現在8人のチームで基本リモートで開発しながら、毎週日曜日に「Hackathon House」にあつまってアプリのアイデアを考えたり、モクモク開発したりしています。 もしアプリに興味を持って頂けるようなら、『メールアドレス contact@short.works』か『Twitter @shortworkus』にメッセージ下さい^^

1) iPhone / Android / Railsアプリ / インフラ構築の開発にご協力頂ける方
2) スマートフォンアプリやWebサイト、HTMLメールのデザインにご協力頂ける方
3) ブログ・ソーシャルメディアを活用したマーケティングにご協力頂ける方
半日〜1日だけとか週末プロジェクトとか、ガッツリやってみたいとか相談のります。 報酬もテンポラリー、レベニューシェア、その他もろもろ何でも相談に乗ります!何でも言ってください。

押さえておきたい書籍

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

Comments