Rails

【Rails】アクセス端末でテンプレートを切り替えることができるrequest.variantを使ってみた

Rails

 

今回は接続(アクセス)してきた端末によってテンプレートを切り替えることができるrequest.variantを使ってみたので備忘録としてまとめたいと思います。

アクセス端末の判定にはGemのbrowserを使用しています。

request.variantとは

request.variantとは、接続(アクセス)してきた端末によって表示するテンプレートを切り替えることができる機能です。

例えば、request.variantに:tabletや:mobileといった値を指定すると、呼び出されるテンプレートはindex.html+tablet.erbindex.html+mobile.erbのようになります。

“+”とrequest.variantに指定した値のテンプレートが呼び出されます。

request.variantを使ってみる

初期設定

% rails new sample_app -d mysql
% rails db:create
% rails generate controller home index
トップページ
  • アプリケーション名: sample_app
  • Ruby: 2.6.5
  • Rails: 6.0.4.8
  • DB: MySQL

Gem browserの導入

browserはアクセス端末を簡単に調べることができるGemです。

# Gemfile(以下の1行を追加)

gem 'browser'
% bundle install

コントローラの編集

# app/controllers/home_controller.rb

class HomeController < ApplicationController
  before_action :detect_variant

  def index; end

  private

  def detect_variant
    request.variant = :mobile if browser.device.mobile?
    request.variant = :tablet if browser.device.tablet?
  end
end

Gem browserを導入することで、アクセス端末を判定するメソッドbrowser.device.mobile?browser.device.tablet?が使えるようになります。

ビューの作成&編集

% touch app/views/home/index.html+tablet.erb
% touch app/views/home/index.html+mobile.erb
<%# index.html.erb %>

<h1>PCからのアクセス</h1>
<%# index.html+tablet.erb %>

<h1>mobileからのアクセス</h1>
<%# index.html+mobile.erb %>

<h1>mobileからのアクセス</h1>

テンプレートの確認

サーバーを起動し、アクセス毎のテンプレートを確認してみます。

PCからアクセスした場合

PCからのアクセス

tabletからアクセスした場合

tabletからのアクセス

mobileからアクセスした場合

mobileからのアクセス
Chromeのデベロッパーツールを用いて、アクセス元を変えています。

 

このようにrequest.variantを用いることで、アクセス元によって簡単にテンプレートを切り替えられることが確認できました。

まとめ

  • request.variantとは、接続(アクセス)してきた端末によって表示するテンプレートを切り替えることができる機能
  • browserはアクセス端末を簡単に調べることができるGem
  • Chromeのデベロッパーツールを用いることで、アクセス元を変えることができる

参考

 

今回は接続(アクセス)してきた端末によってテンプレートを切り替えることができるrequest.variantを使ってみたので紹介しました。実際に使ったことはありませんが、どこかで使えそうな機能だなと思いました。

COMMENT

メールアドレスが公開されることはありません。