彼女からは、おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

Rails 3.2 + jpmobile でスマートフォン対応したみた

以前のエントリーで予告しておりましたとおり、

h300 をスマートフォン対応させました。

今回「jpmobile」という Rails ブラグインを使ったのですが、これを使うと結構簡単にスマートフォン対応できて、オススメなプラグインだったので、ご紹介します。

f:id:inouetakuya:20120416230147j:plain:w300

jpmobile のインストールや基本的な使い方などは、jpmobile の README に丁寧に書かれてあるので、そこは詳しく触れませんが、代わりに、そもそも jpmobile を導入すべきか否かについて考えたことや、jpmobile 導入前後のパフォーマンスの変化等について書いてみようと思います。

Rails 3.2 + jpmobileスマートフォン対応したみた

  1. jpmobile とは?
  2. バージョン情報
  3. そもそも jpmobile を使うべきか否かについて考えたこと
  4. jpmobile 導入前後のパフォーマンス
  5. jpmobile のインストール
  6. ビューの自動切替
  7. レイアウトビューの切替
  8. スタイルシートの切替
  9. JavaScript の切替
  10. コントローラの中で一部を切替
  11. ビューの中で一部を切替
  12. サイト横幅をスマートフォンの画面サイズに合わせる(viewpoint

1. jpmobile とは?

jpmobile とは、本来は「携帯電話特有の機能を Rails 3.2 や Rack middleware で利用するためのプラグイン」です(GitHub から引用)。ですが、今回、そのうちの

スマートフォンからのアクセスかどうか判別して、ビューを切り替える

機能のみを使わせていただきました。

jpmobile の詳細については、GitHub の README を見るのが一番よいと思います。結構丁寧に書いてくださっているので、基本的な使用であれば、おそらくそれで事足ります。

また、さらに突っ込んだことをやるのであれば、jpmobile の作者自らが本を書いているので、そちらを参照すると良いかもしれません。

-Ruby on Rails 3で作る-jpmobileによるモバイルサイト構築

-Ruby on Rails 3で作る-jpmobileによるモバイルサイト構築

2. バージョン情報

Rails のバージョンによって、対応する jpmobile のバージョンが異なるので注意してください。対応一覧が下記に掲載されています。

なお、僕の環境は下記のとおりです。

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行を足して、

gem 'jpmobile'
$ bundle install

しました。

6. ビューの自動切替

ほとんど GitHub から丸写しですが、スマートフォンからのアクセスかどうか判別して、ビューの自動切替を行うには、下記の設定が必要です。

(app/controllers/application_controller.rb)

class ApplicationController < ActionController::Base
  include Jpmobile::ViewSelector
end

この設定をすると、iPhone からのアクセスがあった場合に(例えば index アクションであれば)

  1. index_smart_phone_iphone.html.erb
  2. index_smart_phone.html.erb
  3. index.html.erb

の順でテンプレートが検索されて、見つかったテンプレートが利用されます。Android の場合は、

  1. index_smart_phone_android.html.erb
  2. index_smart_phone.html.erb
  3. index.html.erb

が検索されますが、今回 iPhoneAndroid を分ける必要がなかったので、

  • index_smart_phone.html.erb

をつくりました。

7. レイアウトビューの切替

アクションに対応したビューだけでなく、レイアウトビューも自動切替できます。例えば iPhone からのアクセスであれば

  1. application_smart_phone_iphone.html.erb
  2. application_smart_phone.html.erb
  3. application.html.erb

の順で検索されます。例によって iPhoneAndroid を分ける必要がなかったので、

  • 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 用)を読み込む

<%= stylesheet_link_tag "application", :media => "all" %>

app/assets/stylesheets/application.css がさらに他の CSS ファイルを読み込む

(ファイル上部のコメントアウト部分)
 *= require_self
 *= require common
 *= require layouts
 *= require videos

(2) スマートフォン

app/views/layouts/application_smart_phone.html.erb

>> app/assets/stylesheets/smart_phone/application.cssスマホ用)を読み込む

<%= stylesheet_link_tag "smart_phone/application", :media => "all" %>

app/assets/stylesheets/smart_phone/application.css がさらに他の CSS ファイルを読み込む

(ファイル上部のコメントアウト部分)
 *= 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 用)を読み込む

<%= javascript_include_tag "application" %>

app/assets/javascript/application.js がさらに他の JavaScript ファイルを読み込む

(ファイル上部のコメントアウト部分)
//= require jquery.vgrid
//= require videos

(2) スマートフォン

app/views/layouts/application_smart_phone.html.erb

>> app/assets/javascripts/smart_phone/application.js(スマホ用)を読み込む

<%= javascript_include_tag "smart_phone/application" %>

app/assets/javascript/smart_phone/application.js がさらに他の JavaScript ファイルを読み込む

(ファイル上部のコメントアウト部分)
//= require jquery.vgrid
//= require smart_phone/videos

10. コントローラの中で一部を切替

コントローラの中で処理を切り替えるには、下記のようにします。

if request.smart_phone?
  # スマートフォン特有の処理
else
  # PC 特有の処理
end

11. ビューの中で一部を切替

ビューの中で処理を切り替えるには、下記のようにします。

<% if request.smart_phone? %>
  <!-- スマートフォン特有の表示 -->
<% else %>
  <!-- PC 特有の表示 -->
<% end %>

12. サイト横幅をスマートフォンの画面サイズに合わせる(viewpoint

あと、これは Rails に限ったことではないですが、viewport を設定して、サイト横幅をスマートフォンの画面サイズに合わせるようにすると、いい感じにスマートフォン対応できると思います。

(app/views/layouts/application_smart_phone.html.erb)

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  ...

スマートフォン対応の基本的なことは、下記の本が分かりやすいです。

HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応

HTML5+CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応

以上です。またエロサイトの話かよw と言わずに最後まで読んでいただきありがとうございました。