jpmobileでPCとスマホのビューを振り分ける
こんにちは、@ij_spitzです。
今回は、jpmobileというgemを使って、PCとスマホとのビューを振り分ける方法をご紹介したいと思います。
こちらがGitHubのソースコードです。
ビューの振り分け以外にも、携帯メール用の絵文字や漢字の文字コード変換や位置情報の取得も可能とかなり高機能なgemになっています。
https://github.com/jpmobile/jpmobile
gemのインストール
# Gemfile gem 'jpmobile' $ bundle install
ビューの振り分け
# app/controller/application_controller.rb class ApplicationController < ActionController::Base include Jpmobile::ViewSelector end
各controllerに継承させる大元のapplication_controller.rbにこのように書きます。
そうするとiPhoneからアクセスがあった場合、ビューの優先度は、
1. index_smart_phone_iphone.html.erb
2. index_smart_phone.html.erb
3. index.html.erb
という順に自動的に振り分けられます。
レイアウトビューの作成
上記の設定でレイアウトビューもapplication_smart_phone.html.erbとapplication.html.erbの2つに分けることが出来ます。PC用とスマホ用でCSSを切り分けたかったので、以下のようにデフォルトCSSを設定しました。
# application.html.erb <%= stylesheet_link_tag "application", :media => "all" %> # application_smart_phone.html.erb <%= stylesheet_link_tag "smart_phone", :media => "all" %>
CSSとディレクトリ構成でPC用とスマホ用のCSSを切り分ける
- stylesheets/smartphone.css
application.css
smart_phone/*.css.scss
pc/*.css.scss
bootstrap_and_overrides.css.less* application.css *= require bootstrap_and_overrides *= require_tree ./pc *= require_self
このようにCSSを配置し、PCとスマホで読み込むディレクトリを変えることで、PCとスマホのCSSを完全に分離することができます。
以上で簡単にPCとスマホのビューを振り分けることができました！
今回は使っていませんが、コントローラーでスマホ用の処理を書き加えたい、等の場合に便利な request.smart_phone? というメソッドもあるので、ぜひスマホ用のサイトを作るときは使ってみてください。
