railsでiphone対応をする基礎知識的な

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

上の記事が参考になった。参考にしつつ、やり方を変えてみたりしたところをメモ。

レイアウトの切り替えはrailsに任せる

iphone用のMIME TYPEを定義して、*.iphone.erbが使えるようになったのだから、レイアウトを"iphone"と"application"を振り分けることなどせずに、

app/views/layouts/
|-- application.html.erb
`-- application.iphone.erb

とすればよさそう。なので application_controller.rb でlayoutを設定している部分は削除した。

class ApplicationController < ActionController::Base
  protect_from_forgery
  before_filter :set_iphone_format

  private

  def set_iphone_format
    request.format = :iphone if iphone_request?
  end 

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

iphoneで利用するjsやcssはiphone用のディレクトリに保存する

参考にした記事では通常用ファイルとiphone用のファイルを同じ場所に置き、通常時にiphone用ファイルの読み込みを防ぐためにrequire_treeを削除していた。require_treeはサブディレクトリを含めた全てのファイルを読み込んでしまうが、require_directoryを使用すればサブディレクトリは読み込まれないので、iphone用のファイルはサブディレクトリに保存することにしてみる。

css

assets/stylesheets/
|-- application.css
`-- iphone
    |-- application.css
    |-- images
    |   |-- ajax-loader.png
    |   (略)
    `-- jquery.mobile-1.0.1.css

app/assets/stylesheets/application.css

/*
 *= require_self
 *= require_directory .
*/

app/assets/stylesheets/iphone/application.css

/*
 *= require_self
 *= require_tree .
*/

js

assets/javascripts/
|-- application.js
`-- iphone
    |-- application.js
    `-- jquery.mobile-1.0.1.js

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require_directory .

app/assets/javascripts/iphone/application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

レイアウトでiphone用ファイルを指定

app/views/layouts/iphone.iphone.erb

(略)
<%= stylesheet_link_tag "iphone/application" %>
<%= javascript_include_tag "iphone/application" %>
(略)

これで通常用のファイルとiphone用のファイルの置き場所が分離された。ところで jQueryMobileは本当は vender/assets/javascript に置くべきなのかも。

jQueryMobileが動かない

jquery-railsの現時点の最新バージョンは2.0.2だが、これに入ってるjqueryのバージョンは1.7.2で、こいつだとjQueryMobileの1.0.1が動作しなかった。Gemfileで

gem 'jquery-rails','2.0.1'

2.0.1を指定してやったら、jqueryのバージョンが1.7.1になってこいつだと動いた。