[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でアクセスしたらば、スマートフォン用ページが表示されました。