Using jpmobile, the rails plugin for Japanese phones

Rails スマホ インターン生

Hi everyone! It's Mahdi, the intern from Tunisia, again!

Today, I'm going to introduce the rails gem jpmobile and show some tips for easy configuration.

Before starting, jpmobile is a gem that allows you to adapt your rails app to the different kinds of used phones in Japan. Whether you're trying to target a specific cell operator or a specific kind of phones, jpmobile should be able to handle it all!

First, let's start by installing the gem: add gem 'jpmobile' to your Gemfile and run bundle install.

This immediately lets you use jpmobile's helpers request.mobile? and request.smart_phone? anywhere! A good example for using these is

if request.mobile?

    # regular phone

elsif request.smart_phone?

    # smart phone

else

    # other (computer, tablet)

end

Separating layouts

By adding

include Jpmobile::ViewSelector

to the top of your controller, you allow jpmobile to show device-specific templates. The different templates would need to be named accordingly so that they could be automatically shown depending on the kind of device trying to load the page:

  • index.html.erb (computer, tablet)
  • index_mobile.html.erb (regular phone)
  • index_smart_phone.html.erb (smart phone)


Note that this could also be applied to layouts. e.g. application_smart_phone.html.erb

Separating assets

You can also load custom assets, or in this case CSS, by changing some parameters inside your main layout file application.html.erb.

For example, for the case of application_smart_phone.html.erb we change

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

into

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

changing the loaded CSS from assets/articles.css to assets/smart_phone/articles.css !

Unfortunately, unlike the templates method, this one doesn't have a fallback: When a file doesn't exist, it won't be loaded and jpmobile won't look for similarly named files in the original stylesheets folder.


I hope this have been a helpful small introduction, do try to use it!
jpmobile is really powerful and flexible making it a really good choice for incorporating device-specific content.

Until next time!