mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

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

[ プログラミング ] [ Rails, Ruby ]

こんばんは。

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

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

以下、導入記録です。

0. 前提条件

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

1. Gemfile 編集

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

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

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

jpmobileRails
4.0.X4.0.X
3.0.X3.2.X
2.0.X3.1.X
1.0.X3.0.X
0.0.82.3.X

2. jbmobile インストール

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

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

3. application_cotroller.rb 編集

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

RAILS_ROOT/app/controllers/application_controller.rb
1
2
3
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 も作成する。
ただ、読み込み方法をどうするかだけ意識しておけばよいでしょう。
全端末用のファイルを1つのレイアウトビューで一括で読み込むのか、対応するレイアウトビューを作成して読み込むファイルを指定するか。

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

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

hoge_controller.rb
1
2
3
4
5
6
7
if request.mobile?
  # 携帯電話用処理
elsif request.smart_phone
  # スマートフォン用処理
else
  # その他
end

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

hoge_controller.rb
1
2
3
4
5
if request.mobile.is_a?(Jpmobile::Mobile::Docomo)
  # docomo 携帯電話用処理
else
  # その他
end

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

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

index.html.erb
1
2
3
4
5
6
7
<% if request.mobile? %>
  <!-- 携帯電話用処理 -->
<% elsif request.smart_phone %>
  <!-- スマートフォン用処理 -->
<% else %>
  <!-- その他 -->
<% end %>

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

index.html.erb
1
2
3
4
5
<% if request.mobile.is_a?(Jpmobile::Mobile::Docomo) %>
  <!-- docomo 携帯電話用処理 -->
<% else %>
  <!-- その他 -->
<% end %>

8. 完成画面

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

RAILS_JPMOBILE

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

9. その他

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

参考サイト


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

以上。

Comments