読者です 読者をやめる 読者になる 読者になる

Webサービスを作って潰すのが趣味な人のブログ

とりあえず作ってから怒られよう

JPMobileを使って開発している時にありがちな「スマートフォンデザインに一瞬切り替えたい」をコードで実現する方法

みなさんはJPMobileを使ってスマートフォンデザインを組むときにどのようにスマートフォンと認識させていますか?

GoolgeChromeの「要素を検証(F12)」から「デバイス設定」を行う人もいればプラグイン等で「UserAgentを偽装」する人もいると思います




どちらにしろ……めんどくさい




Railsのソースコードの方で適当に切り替えられたらとっても素敵だと思いませんか?


というわけで偽装してみる

JPMobileはrackにデータを突っ込んでそれを読み込んで振り分けを行うのでここに偽装データを入れることでスマートフォンと誤認させることが出来ます

env["rack.jpmobile"] = Jpmobile::Mobile::SmartPhone.new(env, request)

 

これの逆にrackの中身を空にしてやればデフォルトデバイスであるPCのデザインを表示させることができます。(スマートフォンでPCデザインを表示させる時とかに使える)

env["rack.jpmobile"] = Jpmobile::Mobile::SmartPhone.new(env, request)

 

実際に使うとこんな感じ

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_filter :check_device
  include Jpmobile::ViewSelector # 実際の振り分けを行うここの呼び出しより前でrackをいじる
 
  private
  def check_device
    if !true
      # ここをtrueにすれば強制でスマートフォンデザイン
      env["rack.jpmobile"] = Jpmobile::Mobile::SmartPhone.new(env, request)
    elsif cookies[:use_pc_design].present?
      # cookieがある場合は強制でPCデザイン 
      env["rack.jpmobile"] = nil
    end
  end
end

rackを上書きする前の情報を変数に保存しておけば「本当はスマートフォンだけどPC表示してます」なんてデータも取れます(よく一番上にでっかく「スマートフォン表示にする」とか表示されるアレ)