Rails 4.1.0 の ActionPack Variants でデバイスごとのViewを表示する

こんにちは、鈴木です。

Rails 4.1.0 で追加される ActionPack Variants を使ってみます。

ActionPack Variants とは

ActionPack Variants とは、デバイスごとに View を切り替えるために導入された仕組みで、コントローラで request.variants に適当な値（例えば :tablet）を設定しておくと、それに応じた View ファイル（例えば index.html+tablet.erb）が使用される、というものです。

これを利用することで、デバイスごとに使用する View ファイルを切り替えることが簡単に実現できます。

ActionPack Variants を使う

それでは ActionPack Variants を使ってみます。

やることは簡単で、コントローラで request.variants に適当な値を設定し、それに対応する View ファイルを準備するだけです。

Controller

まずはコントローラを作成します。（app/controllers/index_controller.rb）

class IndexController < ApplicationController

  before_action do
    # 動作確認しやすくするために params[:device] の値で分岐する.
    # 通常は request.user_agent など値で判定する.
    case params[:device]
      when 'tablet'
        request.variant = :tablet
      when 'mobile'
        request.variant = :mobile
    end
  end

  def index
  end

end

class IndexController < ApplicationController

before_action do

# 動作確認しやすくするために params[:device] の値で分岐する.

# 通常は request.user_agent など値で判定する.

case params[:device]

when 'tablet'

request.variant = :tablet

when 'mobile'

request.variant = :mobile

end

def index

end

request.variant の設定は before_action の中で行っています。

コメントで書いていますが、動作確認しやすくするために params[:device] の値で分岐するようにしていますが、通常は User-Agent などの値（request.user_agent）で分岐すると良いでしょう。

View

次に View ファイルを作成します。

IndexController で request.variant に設定する値に対応する分だけファイルが必要ですので、以下の 3 つのファイルを作成します。

app/views/index/index.html.erb (デフォルト)

index.html.erb です。

1

index.html.erb です。
app/views/index/index.html+tablet.erb (request.variant が :tablet の場合)

index.html+tablet.erb です。

1

index.html+tablet.erb です。
app/views/index/index.html+mobile.erb (request.variant が :mobile の場合)

index.html+mobile.erb です。

1

index.html+mobile.erb です。

ルーティング

最後に config/routes.rb でルーティングを設定します。

Rails.application.routes.draw do

  root 'index#index'

end

Rails.application.routes.draw do

root 'index#index'

end

動作確認

サーバを起動し、以下の URL にアクセスすると View ファイルが切り替えられることを確認できます。

http://localhost:3000/
http://localhost:3000/?device=tablet
http://localhost:3000/?device=mobile

まとめ

日本の場合は携帯キャリアによって返す文字コードを変えるなどの対応が必要になります。そのため現状では jpmobile を使うほうが良いと感じましたが、Rails 本体にマルチデバイス対応の機能が追加されたことは喜ばしいことだと思います。

Comments are closed, but you can leave a trackback: Trackback URL.