Ruby on Railsにおけるパソコン/スマートフォンのテンプレート出し分け

やりたいこと

Railsにおいてアクセスしているデバイス(パソコン/スマートフォン)に応じてテンプレート(ビュー)を出し分けたいことがあります。やり方は様々ありますが、Railsの仕組み(ActionPack Variants)とwootheeというgemを利用することにより簡単に出し分けすることができます。

ActionPack Variantsとは

ActionPack Variantsとはテンプレートを出し分けることができる仕組みです。コントローラーでrequest.variantの値をセットすることにより、読み込まれるテンプレートを切り替えることができます。つまり、User-Agentにもとづいてアクセスしているデバイスを判断し、テンプレート出し分けることができます。

wootheeとは

wootheeとはUser-Agentをパースし、アクセスしているデバイスやOS、ブラウザなどを出力してくれるgemです。例えば、下記のような使い方ができます。

Woothee.parse("Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)")
 # => {:name=>"Internet Explorer", :category=>:pc, :os=>"Windows 7", :version=>"8.0", :vendor=>"Microsoft", :os_version=>"NT 6.1"}

これを使ってデバイスを判定します。

本題の実装

Gemfileにwoothee追加

まずはGemfileにwootheeを追加します。

gem 'woothee'

ApplicationControllerにコードを追加

class ApplicationController > ActionController::Base
  before_action :set_request_variant

  private
    def request_from_smartphone?
      Woothee.parse(request.user_agent)[:category] == :smartphone
    end

    def set_request_variant
      request.variant = (request_from_smartphone? ? :sp : :pc)
    end
end

テンプレートのファイル名

例えば下記のようなコントローラーがある場合

class ProductsController < ApplicationController
  def index
  end
end

下記のようなファイルを作成します。

# PC用テンプレート
app/views/products/index.html+pc.erb

# スマホ用テンプレート
app/views/products/index.html+sp.erb

上記の作業をし、パソコン/スマートフォンそれぞれでアクセスするとテンプレートを出しわけられていることがわかるかと思います。

まとめ

かなり簡単に出し分け処理を実装できることがわかるかと思います。User-Agentだけでなくドメイン名や他の条件でも出し分けすることができますので、様々なシチュエーションで応用できるのではないでしょうか。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする