Rails - jpmobile で携帯・スマホ対応！

現在、当方の Ruby on Rails 製ホームページは PC 用となっています。
携帯電話やスマートフォン等の携帯端末では、画面表示が崩れてしまいます。

そこで、当方のホームページを携帯・スマホにも対応すべく、 “jpmoblie” という RubyGem をインストールしてみました。
“jpmobile” とは、アクセスが携帯からなのか、スマホからなのかを判別して、レイアウトビューを振り分ける機能もある RubyGem パッケージです。
（他にも、携帯端末用の様々な機能があります）

以下、導入記録です。

0. 前提条件

• 使用する Rails は 4.0.0 を想定。
• 作業する OS は Linux Mint 14 を、ユーザは一般ユーザを想定。
• jbmobile は gem でインストーする。（プラグインとしての導入はしない）

1. Gemfile 編集

RAILS_ROOT にある Gemfile に以下のように記述を追加する。

File: Gemfile

# Rails 4.0.x
gem 'jpmobile', '~> 4.0.0'

Rails のバージョンにより異なるので注意。
ちなみに、こちら（Version : Jpmobile vs Rails · jpmobile/jpmobile Wiki）によると次のような対応のようだ。

jpmobile	Rails
4.0.X	4.0.X
3.0.X	3.2.X
2.0.X	3.1.X
1.0.X	3.0.X
0.0.8	2.3.X

2. jbmobile インストール

Gemfile に追記したので、いつものようにインストールを実行する。

$ sudo bundle install
$ bundle list | grep jpmobile
  * jpmobile (4.0.0)

3. application_cotroller.rb 編集

ビューの自動切り替えを行うために、 “apllication_controller.rb” を以下のように編集（１行追記）する。

File: RAILS_ROOT/app/controllers/application_controller.rb

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

これにより、携帯電話からのアクセスなら

1. index_mobile_docomo.html.erb (docomo の場合)
   index_mobile_au.html.erb (au の場合)
   index_mobile_softbank.html.erb (Softbank の場合)
2. index_mobile.html.erb
3. index.html.erb

スマートフォンからのアクセスなら、

1. index_smart_phone_iphone.html.erb (iPhone の場合)
   index_smart_phone_android.html.erb (Android の場合)
   index_smart_phone_windows_phone.html.erb (Windows Phone の場合)
2. index_smart_phone.html.erb
3. index.html.erb

の順でビューテンプレートを検索し、存在するビューテンプレートが利用されるようになる。（アクションが index の場合）

ちなみに、レイアウトビュー “application.html.erb” も対応する端末のビューを作成しておけば、同様に利用できるようになる。
実際に携帯・スマホ用のサイトを作成する際には、CSS や JavaScript をデバイスごとに切り替えることになる。なので、必然的にそれぞれに対応するレイアウトビューを作成することになるでしょう。
iPhone の場合は以下のように。

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

4. ビューテンプレート作成

実際に、対応したい端末用のビューテンプレートや、携帯電話用・スマートフォン用のビューテンプレートを作成する。
iPhone 用 index アクションなら “index_smart_phone_iphone.html.erb”、携帯電話用 hoge アクションなら “hoge_mobile.html.erb” というように。

5. CSS, JavaScript 作成

説明するまでもないが、対応したい端末用の CSS, JavaScript や、携帯電話用・スマートフォン用の CSS, JavaScript も作成する。
ただ、読み込み方法をどうするかだけ意識しておけばよいでしょう。
全端末用のファイルを１つのレイアウトビューで一括で読み込むのか、対応するレイアウトビューを作成して読み込むファイルを指定するか。

6. コントローラ内での処理の振り分け

コントローラ内で処理を振り分けたい場合は、以下のようにする。（一例）

File: hoge_controller.rb

if request.mobile?
  # 携帯電話用処理
elsif request.smart_phone
  # スマートフォン用処理
else
  # その他
end

また、キャリアも指定したいのなら以下のようにする。（一例）

File: hoge_controller.rb

if request.mobile.is_a?(Jpmobile::Mobile::Docomo)
  # docomo 携帯電話用処理
else
  # その他
end

7. ビューテンプレート内での処理の振り分け

ビューテンプレート内で処理を振り分けたい場合は、以下のようにする。（一例）

File: index.html.erb

<% if request.mobile? %>
  <!-- 携帯電話用処理 -->
<% elsif request.smart_phone %>
  <!-- スマートフォン用処理 -->
<% else %>
  <!-- その他 -->
<% end %>

また、キャリアも指定したいのなら以下のようにする。（一例）

File: index.html.erb

<% if request.mobile.is_a?(Jpmobile::Mobile::Docomo) %>
  <!-- docomo 携帯電話用処理 -->
<% else %>
  <!-- その他 -->
<% end %>

8. 完成画面

既存のビューテンプレートを流用、jQuery Mobile のデフォルトのテーマの１つを使用してデザインしたので、単純な（あまり派手ではない）ものになっているが、一応完成したページを紹介する。（以下は、「カレンダー」ページ）

PCからアクセスした場合は、PC用のページが開くのでご注意を！

9. その他

これらの他に、携帯端末の位置情報を取得したり、IP アドレスを検証したり等々、様々なことができるようだ。
“README.rdoc” に詳しく記述されているので参照するとよい。

参考サイト

• jpmobile/jpmobile
• jpmobile - RubyGems.org - your community gem host
• Version : Jpmobile vs Rails · jpmobile/jpmobile Wiki

---

今回は、携帯端末用に処理やテンプレートを振り分ける作業についてでした。
あとは、実際に携帯端末用にデザインしていくのみです。
ちなみに、当方は jQuery Mobile を使って作成していくつもりです。

以上。