Ruby on Rails - Mobile対応サイトの作成とRSpecのテスト
Ruby on Railsにて、PC向けのページと、Mobile向けのページを切り替える方法と
RSpecによるテストについてです。
仕様としては、クライアントのブラウザを判定し、それぞれ向けのLayout、
Viewファイルを表示します。
■ブラウザと表示するファイル
・iPhoneのSafariの場合は、ファイル名が「~.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を取得してテストすることが
可能となっています。
後は見ての通り、iPhone・Android向けにuser_agentを設定し
それぞれのLayout、Viewが正しく設定されているかをテストしています。
4.Layoutファイル
Layoutファイルは、以下の4つを作成しました。・application.html.erb ・・・ iPhone、Android以外のLayout
・mobile.html.erb ・・・ iPhone、Androidの共通Layout
・mobile.android.erb ・・・ AndroidのLayout
・mobile.iphone.erb ・・・ iPhoneのLayout
ここでのポイントは、iPhone、AndroidでそれぞれLayoutを用意していることと
共通のLayoutとして「mobile.html.erb」を用意していることです。
iPhone、AndroidでそれぞれLayoutを用意したのは、上記のApplicationController内で
ファイルのフォーマットが「~.iphone.erb」「~.android.erb」となるよう
設定したためです。
iPhone、Androidでデザインが共通する部分については
「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対応サイトを作ることができます。