携帯サイトをStylesheetでカラフルに

• いろいろめんどくさいのでjpMobileプラグインを使う。
• DOCTYPEやらがキャリア毎に違うのでキャリア毎に用意して、切り替える。
• Content-typeは「application/xhtml+xml」にする。

携帯キャリア毎にlayout切り替え

class Mobile::Base < ApplicationController
  transit_sid
  mobile_filter :hankaku => true

  # キャリア毎にレイアウトファイルを切り替える
  def render_with_mobile(options = {})
    unless options[:layout]
      case request.mobile
      when Jpmobile::Mobile::Au
        options[:layout] = 'mobile/au'
      when Jpmobile::Mobile::Softbank
        options[:layout] = 'mobile/softbank'
      else
        options[:layout] = 'mobile/docomo'
      end
    end  
    render_without_mobile(options)
  end
  alias_method_chain :render, :mobile

end

これで、app/views/layouts/mobile/の下にそれぞれ、

• docomo.html.erb
• au.html.erb
• softbank.html.erb

を置いておけばキャリア毎に適切なものを使ってくれる。

XHTML対応機かどうか判別して、対応していればContent-typeを設定

これをやっとかないと、DocomoではStylesheetを反映してくれない。

class Mobile::Base < ApplicationController
  # 以下を追加
  before_filter :set_xhtml_header
  private
  # XHTML対応機かどうか判別する
  def xhtml_supported?
    case request.mobile
    when Jpmobile::Mobile::Docomo
      # DocomoはFOMA
      return true if request.env["HTTP_USER_AGENT"] =~ /^DoCoMo\/(\d)/ && $1.to_i >= 2
    when Jpmobile::Mobile::Au
      # AUはWIN
      return true if request.env["HTTP_USER_AGENT"] =~ /^KDDI-/
    when Jpmobile::Mobile::Softbank
      # SoftBankはW型か3GC型
      case request.env["HTTP_USER_AGENT"]
      when /^J-PHONE\/5/, /^Vodafone\/1/, /^SoftBank\/1/
        return true
      end
    end

    false
  end

  def set_xhtml_header
    headers['Content-type'] = 'application/xhtml+xml' if xhtml_supported?
  end
  
end