2012/06/14

[rails] jpmobileでスマートフォンページ振り分け

jpmobileを使うと、簡単に携帯向けページを作れる、 とのことで、スマートフォン向けのページをRails3で作った。

以下のサイトを参考にした。
今最もモテる組み合わせのRails3.1 + jp_mobile でサイトを作った際のメモ

要件としては、

  • PC向けページとスマートフォン向けを同じURLで
  • キャリアなどは細かく判定せず
  • Railsだけで振り分ける
というもの。
HTTPサーバによるUserAgentの判定などはしない。

手順は簡単。

  1. 普通に(PC向けに)MVCを実装する。
  2. Gemfileにjpmobileを追加。
    ※ Railsのバージョンとjpmobileのバージョンの対応に注意。 僕はRails3.1系を使っているので、jpmobileは2.0.8を使用。
    gem 'jpmobile', '2.0.8'
    
  3. スマートフォン用のリソースを作成(view,css,js)。
    スマートフォン用のリソースを、それぞれ、
    • {Rails.root}/app/views/layouts/application_smart_phone.html.erb
    • {Rails.root}/app/views/xxxxxxx/xxxxx_smart_phone.html.erb
    • {Rails.root}/app/views/xxxxxxx/smart_phone/xxxxx.html.erb
    • {Rails.root}/app/assets/stylesheets/smart_phone/application.css.scss
    • {Rails.root}/app/assets/stylesheets/smart_phone/xxxxx.css
    • {Rails.root}/app/assets/javascripts/smart_phone/application.js
    • {Rails.root}/app/assets/javascripts/smart_phone/xxxxx.js.coffee
    のように作成し、配置した。cssのインクルードや、jsのインクルードは、きちんと整理して実装する。
    jpmobileには、ViewSelectorという機能があり、内部でUserAgentを判定し、 しかるべきビューに振り分けてくれる。
    コレを使うには、コントローラに、
      include Jpmobile::ViewSelector
    
    を書く。
    僕は、ApplicationControllerに実装した。
    としておいて、例えばiPhoneからアクセスした場合、jpmobileがビューを、
    • xxxxx_smart_phone_iphone.html.erb
    • xxxxx_smart_phone.html.erb
    • xxxxx.html.erb
    の順で、範囲の狭い順に検索し、見つけたものをレンダリングしてくれる。
    ※ xxxxxは、action名。
    iPhoneかAndroidか、みたいな判定をしなくていい場合は、xxxxx_smart_phone.html.erbを用意すればいい。
  4. 最後に、asset:compileの対象に、stylesheets/smart_phoneとjavascripts/smart_phoneを追加する。
    {Rails.root}/config/environments/production.rbに、
    initializer :after_append_asset_paths,
    :group => :all,
    :after => :append_assets_path do
      config.assets.paths << Rails.root.join('app', 'assets', 'stylesheets', 'smart_phone')
      config.assets.paths << Rails.root.join('app', 'assets', 'javascripts', 'smart_phone')
    end
    
    を追記して、smart_phone配下のリソースをコンパイル対象に含める。

上記で、一応ビューの切り替えが実現できた。
Androidでアクセスしたらば、スマートフォン用ページが表示されました。

0 件のコメント: