Rails 3.2 + jpmobile でスマートフォン対応したみた
以前のエントリーで予告しておりましたとおり、
-Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300
h300 をスマートフォン対応させました。
今回「jpmobile
jpmobile のインストールや基本的な使い方などは、jpmobile の README に丁寧に書かれてあるので、そこは詳しく触れませんが、代わりに、そもそも jpmobile を導入すべきか否かについて考えたことや、jpmobile 導入前後のパフォーマンスの変化等について書いてみようと思います。
+jpmobile とは？ +バージョン情報 +そもそも jpmobile を使うべきか否かについて考えたこと +jpmobile 導入前後のパフォーマンス +jpmobile のインストール +ビューの自動切替 +レイアウトビューの切替 +スタイルシートの切替 +JavaScript の切替 +コントローラの中で一部を切替 +ビューの中で一部を切替 +サイト横幅をスマートフォンの画面サイズに合わせる（viewpoint） <<
*1. jpmobile とは？
jpmobile とは、本来は「携帯電話特有の機能を Rails 3.2 や Rack middleware で利用するためのプラグイン」です（GitHub から引用）。ですが、今回、そのうちの
スマートフォンからのアクセスかどうか判別して、ビューを切り替える <<
機能のみを使わせていただきました。
jpmobile の詳細については、GitHub の README を見るのが一番よいと思います。結構丁寧に書いてくださっているので、基本的な使用であれば、おそらくそれで事足ります。
また、さらに突っ込んだことをやるのであれば、jpmobile の作者自らが本を書いているので、そちらを参照すると良いかもしれません。
-Ruby on Rails 3で作る-jpmobileによるモバイルサイト構築
- 作者: 小川伸一郎
- 出版社/メーカー: ワークスコーポレーション
- 発売日: 2012/02/21
- メディア: 単行本（ソフトカバー）
- 購入: 2人 クリック: 234回
- この商品を含むブログ (4件) を見る
*2. バージョン情報
Rails のバージョンによって、対応する jpmobile のバージョンが異なるので注意してください。対応一覧が下記に掲載されています。
-Version : Jpmobile vs Rails · jpmobile/jpmobile Wiki · GitHub
なお、僕の環境は下記のとおりです。
*3. そもそも jpmobile を使うべきか否かについて考えたこと
さて、そもそも jpmobile を使うべきか否か？今回どうして jpmobile を導入したかについて触れておきます。
つまり、今回やりたかったことは、
スマートフォンかどうか判別して、ビューを切り替える <<
ということであり、
それであれば、べつに jpmobile を使わなくても、それほど手間をかけずに実装できることであり、jpmobile はオーバースペックなんじゃないかと思ったり、
あるいは、jpmobile はスマートフォンだけではなく携帯電話にも対応していて（というかそれがメイン）高機能ですが、高機能ゆえにパフォーマンスが落ちるのでは？と心配になったりしました。
しかし、自前でコード書くよりも、広く使われている jpmobile を使う方が多くの人とノウハウを共有できると考えたのと、パフォーマンスについては、使って計測してみないと分からないのでとりあえず使ってみようということで導入に至りました。
（なので、パフォーマンスが著しく落ちるのであれば自前でコードを書こうと考えていましたが、後述のとおり、パフォーマンスはほとんど落ちなかったのでその必要はありませんでした）
*4. jpmobile 導入前後のパフォーマンス
jpmobile 導入前後でパフォーマンスを計測してみましたが、下記のとおり、ほとんどパフォーマンス落ちませんでした。
パフォーマンスは、例によって ab（Apache Bench）で計測。
|| $ ab -c 10 -n 100 http://example.com/ ||<
（導入前）Requests per second: 18.12 [#/sec] (mean) （導入後）Requests per second: 16.28 [#/sec] (mean) <<
ほとんど誤差の範囲ですね（何回も計測していたら、1、2 くらいの数字はコロコロ変わります）
*5. jpmobile のインストール
jpmobile は、
-Rails plugin としてインストールする方法と、 -gem でインストールする方法（Bundler 含む）
の 2つの方法がありますが、恥ずかしながら Rails plugin としてインストールした場合のバージョン管理方法が分からなかったので、gem を使う方法（Bundler）を選びました。
Gemfile に下記1行を足して、
|| $ bundle install ||<
しました。
*6. ビューの自動切替
ほとんど GitHub から丸写しですが、スマートフォンからのアクセスかどうか判別して、ビューの自動切替を行うには、下記の設定が必要です。
（app/controllers/application_controller.rb）
|ruby| class ApplicationController < ActionController::Base include Jpmobile::ViewSelector end ||<
この設定をすると、iPhone からのアクセスがあった場合に（例えば index アクションであれば）
+index_smart_phone_iphone.html.erb +index_smart_phone.html.erb +index.html.erb
の順でテンプレートが検索されて、見つかったテンプレートが利用されます。Android の場合は、
+index_smart_phone_android.html.erb +index_smart_phone.html.erb +index.html.erb
が検索されますが、今回 iPhone と Android を分ける必要がなかったので、
-index_smart_phone.html.erb
をつくりました。
*7. レイアウトビューの切替
アクションに対応したビューだけでなく、レイアウトビューも自動切替できます。例えば iPhone からのアクセスであれば
+application_smart_phone_iphone.html.erb +application_smart_phone.html.erb +application.html.erb
の順で検索されます。例によって iPhone と Android を分ける必要がなかったので、
-application_smart_phone.html.erb
をつくりました。
*8. スタイルシートの切替
例えば、下記のように 7つのスタイルシートを用意したとすると、
-app/assets/stylesheets/application.css（PC 用） -app/assets/stylesheets/layouts.css.scss（PC 用） -app/assets/stylesheets/videos.css.scss（PC 用） -app/assets/stylesheets/common.css.scss（PC・スマホ共通） -app/assets/stylesheets/smart_phone/application.css（スマホ用） -app/assets/stylesheets/smart_phone/layouts.css.scss（スマホ用） -app/assets/stylesheets/smart_phone/videos.css.scss（スマホ用）
application.html.erb や application.css などに読み込むスタイルシートを記述する必要があります。
**(1) PC
app/views/layouts/application.html.erb
app/assets/stylesheets/application.css（PC 用）を読み込む
|ruby| <%= stylesheet_link_tag "application", :media => "all" %> ||<
app/assets/stylesheets/application.css がさらに他の CSS ファイルを読み込む
|ruby| （ファイル上部のコメントアウト部分） = require_self = require common = require layouts = require videos ||<
**(2) スマートフォン
app/views/layouts/application_smart_phone.html.erb
app/assets/stylesheets/smart_phone/application.css（スマホ用）を読み込む
|ruby| <%= stylesheet_link_tag "smart_phone/application", :media => "all" %> ||<
app/assets/stylesheets/smart_phone/application.css がさらに他の CSS ファイルを読み込む
|ruby| （ファイル上部のコメントアウト部分） = require_self = require common = require smart_phone/layouts = require smart_phone/videos ||<
*9. JavaScript の切替
JavaScript の切替も、スタイルシートの切替とほぼ同様です。下記の 5つの JavaScript ファイルを用意したとします。
-app/assets/javascripts/application.js（PC 用） -app/assets/javascripts/videos.js（PC 用） -app/assets/javascripts/jquery.vgrid.js（PC・スマホ共通） -app/assets/javascripts/smart_phone/application.js（スマホ用） -app/assets/javascripts/smart_phone/videos.js（スマホ用）
**(1) PC
app/views/layouts/application.html.erb
app/assets/javascripts/application.js（PC 用）を読み込む
|ruby| <%= javascript_include_tag "application" %> ||<
app/assets/javascript/application.js がさらに他の JavaScript ファイルを読み込む
|ruby| （ファイル上部のコメントアウト部分） //= require jquery.vgrid //= require videos ||<
**(2) スマートフォン
app/views/layouts/application_smart_phone.html.erb
app/assets/javascripts/smart_phone/application.js（スマホ用）を読み込む
|ruby| <%= javascript_include_tag "smart_phone/application" %> ||<
app/assets/javascript/smart_phone/application.js がさらに他の JavaScript ファイルを読み込む
|ruby| （ファイル上部のコメントアウト部分） //= require jquery.vgrid //= require smart_phone/videos ||<
*10. コントローラの中で一部を切替
コントローラの中で処理を切り替えるには、下記のようにします。
|ruby| if request.smart_phone? # スマートフォン特有の処理 else # PC 特有の処理 end ||<
*11. ビューの中で一部を切替
ビューの中で処理を切り替えるには、下記のようにします。
|ruby| <% if request.smart_phone? %> <% else %> <% end %> ||<
*12. サイト横幅をスマートフォンの画面サイズに合わせる（viewpoint）
あと、これは Rails に限ったことではないですが、viewport を設定して、サイト横幅をスマートフォンの画面サイズに合わせるようにすると、いい感じにスマートフォン対応できると思います。
（app/views/layouts/application_smart_phone.html.erb）
|html| <!DOCTYPE html>
... ||<
スマートフォン対応の基本的なことは、下記の本が分かりやすいです。
HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
- 作者: 谷拓樹
- 出版社/メーカー: ラトルズ
- 発売日: 2010/11/24
- メディア: 単行本（ソフトカバー）
- 購入: 30人 クリック: 1,023回
- この商品を含むブログ (27件) を見る
以上です。またエロサイトの話かよw と言わずに最後まで読んでいただきありがとうございました。
*参考サイト
-jpmobile - A Rails plugin for Japanese mobile-phones
-Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300
