@Konboi memo

主に技術に関してつらつらと。

RailsでPCとSPでテンプレートを分ける

はじめに

最近のプロジェクトでは、twitter bootstrap などのようにPCとスマフォを1ソースで対応させる場合もある。 しかし、難易度も高く複雑なレイアウトの場合にはなかなか難しい。

そこで、よくある解決策としては、 PCとSPでテンプレートファイルを分けUserAgentで出し分けるのが一般的だと思う。 今回はRailsでのテンプレートの出し分けをメモしておく。

方法

今回は、スマフォのUAの識別に jpmobile を使用します。

gemのインストール

Gemfile に

gem 'jpmobile'

を追加してインストール

出し分けの設定

  before_filter :set_smartphone_format

  ...
  # application_controller.rb
  
  def set_smartphone_format
    request.format = :smartphone if request.smart_phone? && !request.mobile.tablet?
  end

設定が終わったら bunlde exec rails s で立ち上げてUAをスマフォにアクセスすると

f:id:Konboi:20130213153437p:plain

おそらくこのようなエラーが出ると思います。

エラーを修正

# config/initialize/mime_type.rb

-# Be sure to restart your server when you modify this file.

-# Add new mime types for use in respond_to blocks:
-# Mime::Type.register "text/richtext", :rtf
-# Mime::Type.register_alias "text/html", :iphone
+ Mime::Type.register_alias "text/html", :smartphone

上記の用にrequest.formart が smartphone の場合の mime-type を設定してあげて、 再起動すると問題無く表示されると思います。

まとめ

  • mime-type.rb のところで少しハマりましたがそれ以外は問題なくいけた。

  • PCとスマフォを別でコーディングできるのは結果的に楽な気がする。