サイトをスマホ対応にする

こんにちは、マリンです。

今回作ったサイト、最初からレスポンシブ対応にしていたつもりだったのですが、

いざ本番で動かしてみたらスマホ対応にはなっていなかったようです。

そこで今回、Railsでサイトをスマホ対応にする方法を勉強したので書き綴っておきます。

Action Pack variants

まず、今回はgemは使わずに実装しました。違いがいまいちわからなかったので（笑）

Rails4.1から実装されましたAction Pack Variantsを使用します。

Action Pack Variantsとは、スマホ、タブレット、PCなどのブラウザごとに異なるテンプレートを使用したい場合に、

その振り分けを簡単に実現できるようにするためのRailsの機能です。

手順

Controller

class ApplicationController < ActionController::Base
  before_action :set_request_variant

  private
    def set_request_variant
      case request.user_agent
      when /iPad/
        request.variant = :phone
      when /iPhone/
        request.variant = :phone
      when /Android/
        request.variant = :phone
      end
  end
end

application_controller.erbに上記を記述します。

Private内で振り分けるデバイスを指定します。

メソッド名はなんでも大丈夫ですが、「なんの時にはどのvariant」

ということは明示してあげてください。

後述しますが、私はここで一度失敗しました。

Views

variantごとに個別のテンプレートを用意します。

テンプレートのファイル名には、variantで指定した:~を記述します。

app/views/index.html.erb  #指定外のデバイス
app/views/index.html+phone.erb  #指定のデバイス

このようにすることで、Railsが自動的にデバイスごとにテンプレートを振り分けて表示してくれます。

失敗編

前述しましたが、指定の仕方が甘くて一度失敗しました。

最初のコード

class ApplicationController < ActionController::Base
  before_action :set_request_variant

private
    def set_request_variant
        request.variant = :phone
    end
end

最初はこれしか書いてませんでした。

これだとPCの場合でもスマホのテンプレートが使用されてしまっていました。

そこでこちらの記事を参考にさせていただき、

きちんとcase~whenを使用してそれぞれ指定し、

PCを入れないように記述するとうまくいきました。

satolabo.0t0.jp

まとめ

Bootstrapのレスポンシブ対応=スマホ対応と勘違いしていたことがそもそもの間違いでした。

でもこのVariantの導入でかなり楽にできるようになったようですね。

言語の発展で自動的にやってくれることがたくさんあるため、ついつい忘れてしまいますが、

本来ならコンピュータには1~10まで全て指示しなければいけないんですよね。

どこまでやってくれて、どこから自分でやらなければならないのか、

それもきちんと把握する必要がありそうです。