酒と泪とRubyとRailsと

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

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

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

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のメソッドで以下のように記述します。 (respond_to(with)を使わない場合は、自動で振り分けてくれます)

1
2
3
4
5
6
7
8
def index
    何らかの処理

    respond_to do |format|
        format.html   { ... } # PCなど
        format.mobile { ... } # モバイル側
    end
end

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

PCなど: index.html.erb
モバイル: index.mobile.erb

ちなみにデフォルトではモバイルには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

更に細かくViewを振り返ることも設定を変更すれば可能なようです。 詳しくは以下の公式ページを御覧ください。

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

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

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

なぜ始めたのか?

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

書籍や開発ガジェット拡充へのご協力をお願いします!

新しい技術を学ぶきっかけづくりのために、利用者から要望のあった3Dプリンターやリープモーション、書籍などを購入しています。Oculus VRも予約中っす。 この先もガジェットや書籍を取り揃えていきたいので、『Amazon ほしい物リスト』 へのご協力よろしくお願いします!

Campfireありがとうございました!

Campfire』無事にサクセスしました。ご協力ありがとうございました!



押さえておきたい書籍

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

Comments