ソースコードから理解する技術-UnderSourceCode

手を動かす(プログラムを組む)ことで技術を理解するブログ

Ruby on Rails - Mobile対応サイトの作成とRSpecのテスト

Ruby on Railsにて、PC向けのページと、Mobile向けのページを切り替える方法と
RSpecによるテストについてです。

仕様としては、クライアントのブラウザを判定し、それぞれ向けのLayout、
Viewファイルを表示します。

■ブラウザと表示するファイル
iPhoneSafariの場合は、ファイル名が「~.iphone.erb」のLayout、View
Androidの場合は、「~.android.erb」のLayout、View
・それ以外の場合は、「~.html.erb」のLayout、View

尚、クライアントからのアクセスを判定し、PC向け、Mobile向けと
ページを切り替える方法については下記サイトを参考にしました。

参考サイト
jQueryMobileを使って 簡単にRuby on RailsサイトをクールなiPhone対応サイトにしてみた - @yuumi3のお仕事日記

以下、ソースの解説です。

1.mine typeの登録

iPhone向け、Android向けのLayout、Viewファイルを定義します。

/config/initializers/mime_types.rb

Mime::Type.register_alias "text/html", :iphone
Mime::Type.register_alias "text/html", :android

2.ブラウザの判定と、表示するLayout・Viewの設定

全てのページに共通することなので、ApplicationControllerに記述します。

/app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception

  layout :set_layout
  before_filter :set_format

  def set_format
    request.format = :iphone if iphone_request?
    request.format = :android if android_request?
  end

  def set_layout
    return "mobile" if (iphone_request? || android_request?)
    return "application"
  end

  private
  def iphone_request?
    request.user_agent =~ /(Mobile.+Safari)/
  end

  private
  def android_request?
    request.user_agent =~ /(Android)/
  end
end

先ずはブラウザを判定する、iphone_request?()、android_request?()メソッドについてです。
user_agentを参照し、iPhone Safariを表す文字列があるか、Androidを表す文字列があるかで
ブラウザを判定しています。

次にLayoutファイルを設定する、set_layout()メソッドについてです。
上記のiphone_request?()、android_request?()メソッドを呼び出し
iPhoneもしくはAndroidの場合は、Layoutファイル名が「mobile.~」となり
それ以外は「application.~」となるように値を返却しています。

最後にViewのファイルフォーマットを設定する、set_format()メソッドについてです。
上記のiphone_request?()、android_request?()メソッドを呼び出し
iPhoneの場合は、Viewのファイル名が「~.iphone.erb」となり
Androidの場合は、「~.android.erb」となるように値を返却しています。

ここで使用している「:iphone」「:android」は、上記「mine typeの登録」で定義した値です。

3.RSpecによるテスト

ApplicationControllerについて、ユニットテストを記述すると以下のようになります。

/spec/controllers/application_controller_spec.rb

require 'spec_helper'

describe ApplicationController do
  controller do
    def index
      render :template => 'public/index'
    end
  end

  describe "iphone format, layout" do
    before(:each) do
      request.user_agent = "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_6 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B651 Safari/9537.53"
      get :index
    end

    it "should correct format" do
      request.format.symbol.should eq(:iphone)
    end

    it "should correct layout" do
      response.should render_template(layout: "mobile")
    end
  end

  describe "android format, layout" do
    before(:each) do
      request.user_agent = "Mozilla/5.0 (Linux; U; Android 4.0.3; ja-jp; AT570 Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30"
      get :index
    end

    it "should correct format" do
      request.format.symbol.should eq(:android)
    end

    it "should correct layout" do
      response.should render_template(layout: "mobile")
    end
  end

  describe "non mobile format, layout" do
    before(:each) do
      get :index
    end

    it "should correct format" do
      request.format.symbol.should eq(:html)
    end

    it "should correct layout" do
      response.should render_template(layout: "application")
    end
  end
end

ここでのポイントは、「controller do・・・」ブロックでAnonymous controller
定義していることです。
この、いわばダミーのコントローラを定義することにより、下のテストコード内で
「get :index」という形式でGet要求を投げ、Responseを取得してテストすることが
可能となっています。

後は見ての通り、iPhoneAndroid向けにuser_agentを設定し
それぞれのLayout、Viewが正しく設定されているかをテストしています。

4.Layoutファイル

Layoutファイルは、以下の4つを作成しました。

・application.html.erb ・・・ iPhoneAndroid以外のLayout
・mobile.html.erb ・・・ iPhoneAndroidの共通Layout
・mobile.android.erb ・・・ AndroidのLayout
・mobile.iphone.erb ・・・ iPhoneのLayout

ここでのポイントは、iPhoneAndroidでそれぞれLayoutを用意していることと
共通のLayoutとして「mobile.html.erb」を用意していることです。

iPhoneAndroidでそれぞれLayoutを用意したのは、上記のApplicationController内で
ファイルのフォーマットが「~.iphone.erb」「~.android.erb」となるよう
設定したためです。

iPhoneAndroidでデザインが共通する部分については
「mobile.html.erb」内に記述し、「~.iphone.erb」「~.android.erb」から
参照する形としました。

5.Viewファイル

Viewファイルは、今回はpublicフォルダ内に以下の3つを作成しました。

・index.html.erb
・index.android.erb
・index.iphone.erb

ファイルのフォーマットが、ApplicationControllerのset_layout()メソッドで指定した
形式となっています。

【まとめ】
以上です。
user_agentを判定し、ブラウザ毎に表示するViewのフォーマットを
指定することで、Mobile対応サイトを作ることができます。