Mobilize Your Rails Application with Mobile Fu

Posted by on July 21st, 2008.

Let's face it, iPhone interfaces are awesome, but they can only cater to a fraction of the mobile market. What are you to do if you want to satisfy the rest of the mobile world? Mobile Fu helps to make this job much easier by automatically detecting mobile devices that access your Rails application. People can access your site from a Palm, Blackberry, iPhone, Nokia, etc. and it will automatically adjust the format of the request from :html to :mobile.

Learn Mobile Fu

First off, just install the Mobile Fu plugin into your Rails application. 

script/plugin install git://github.com/brendanlim/mobile-fu.git

Start by adding this one line to your ApplicationController.

class ApplicationController < ActionController::Base
  has_mobile_fu
end

Once this is in place, any request that comes from a mobile device will be be set as :mobile format. It is up to you to determine how you want to handle these requests by creating the .mobile.erb versions of your views that are to be requested. Also, I recommend that you setup a before_filter that will redirect to a specific page depending on whether or not it is a mobile request. How can you check this? 

is_mobile_device? # => Returns true or false depending on the device

You can also determine which format is currently set in by calling the method below. 

in_mobile_view? # => Returns true or false depending on current req. format

If you want the ability to allow a user to switch between ‘mobile’ and ‘standard’ format (:html), you can just adjust the mobile_view session variable in a custom controller action. 

session[:mobile_view] # => Set to true if request format is :mobile and false
                           if set to :html

What About Custom Mobile Styling?

Different devices need different styling. Don’t worry though, we’ve got this baked in to Mobile Fu (thanks to Intridea's own Michael Bleigh, who created Browserized Styles for letting me modify his code). If you are including a css or sass file via stylesheet_link_tag, all you have to do is add _device to the name of one of your files to override your styling for a certain device. The stylesheet that is loaded is dependant on which device is making the request.

Supported stylesheet override device extensions at the moment are: blackberry, iphone, mobileexplorer, nokia, palm 

e.g., Accessing a page from a Blackberry.

<%= stylesheet_link_tag 'mobile.css' %>  

Ends up loading mobile.css, and mobile_blackberry.css if the file exists.

Feature Requests

You can check out Mobile Fu's very own project page at Acts As Community. If you have any problems or would like me to add a certain feature, please create a ticket at http://blim.lighthouseapp.com/projects/14490-mobile-fu/. Also, feel free to fork Mobile Fu and make any enhancements you please from its GitHub location at: http://github.com/brendanlim/mobile-fu/tree/master

Share:

14 Responses to “Mobilize Your Rails Application with Mobile Fu”

  1. Robb Shecter July 25th, 2008 at 05:52 AM

    Interesting article. I'm confused, though, by some of the details: "It is up to you to determine how you want to handle these requests by creating the .mobile.erb versions of your views that are to be requested." Are you saying that .mobile.erb files will automatically be found and used if the user has a mobile device? Or, are you saying that .mobile.erb is a suggested file ending we should use as a convention, but that we must still write the switching logic in the controller actions? Thanks, Robb
  2. Brendan G. Lim July 25th, 2008 at 10:01 AM

    Robb, sorry about the confusion. What I meant was that if the request comes from a mobile device, it will automatically do the logic to set the request format to :mobile. It is because of this that it is then up to you to have a .mobile.erb version of the page that is being requested. For example, if normally, a user gets sent to home.html.erb when they visit my site on a standard browser, I will need to create a home.mobile.erb file for users using mobile clients since the request format will be set to :mobile, rather than :html.
  3. Sho July 26th, 2008 at 06:30 AM

    Hm, this looks nice, but after a quick glance at the user-agent regex I don't see any of the japanese phone manufacturers there. You'd need docomo, kddi, softbank and a few others... Looks good though, very small, clean and lightweight - great stuff and thanks for the release.
  4. Brendan G. Lim July 26th, 2008 at 02:02 PM

    Thanks Sho! I'll be adding in those Japanese phone manufacturers really soon. I suggest you watch Mobile Fu (if you aren't already) on GitHub so you can know when this happens.
  5. Fred July 28th, 2008 at 08:47 PM

    This is an awesome plugin! Thanks! If you don't have the phone to test you can install a Firefox Plugin called "User Agent Switcher" then you can change the user agent on Firefox to the emulate mobile phone. url of plugin: https://addons.mozilla.org/en-US/firefox/addon/59 Fred.
  6. Tom August 2nd, 2008 at 06:42 PM

    This plugin is awesome! Thank you very much.
  7. Todd August 16th, 2008 at 09:40 AM

    Any plans to integrate this with the WURFL to get exact phone capabiliites?
  8. Robb Shecter August 22nd, 2008 at 09:02 PM

    Excellent --- thanks for the detailed reply. I like the high level that the plugin works at. I think this will definitely help Rails get big in the mobile world.
  9. Evan Cooney August 24th, 2008 at 11:50 AM

    Great plugin! Quick suggestion: To support ipod touch as well as iphone, add 'ipod' to MOBILE_USER_AGENTS in mobile_fu.rb Then in mobilized_styles.rb, add: elsif ua.index('ipod') 'iphone'
  10. Garalo August 28th, 2008 at 01:05 PM

    I hope you can add Japanese phone manufacturers as soon as possible. Because I am making an Japanese mobile application. I have got soo big problem because some of them don`t have cookies, like lynx browser. How can I solve it?
  11. Brendan G. Lim September 10th, 2008 at 12:45 PM

    Thanks again for all the comments! Evan, I've went and added in ipod to mobile_fu. Garalo, I've added in some Japanese phone manufacturers. If there's anymore you'd like me to add just submit a ticket and I'll take care of it. As for addressing browsers with no cookies enabled -- you could possibly pass a parameter with the URL and check against that.
  12. doug sparling September 19th, 2008 at 05:11 PM

    Need something like this, so checking out the plugin. From looking at mobile_fu.rb, looks like the following example on this page should be "in_mobile_view?" is_mobile_view? # => Returns true or false depending on current req. format
  13. Brendan G. Lim September 21st, 2008 at 04:17 PM

    Doug, thank you for catching this! I've went and made the change to the article.
  14. ror developer October 11th, 2008 at 08:59 AM

    Thank you for describe this plugin. Where I can find others mobile plugin for rails?

Sorry, comments are closed for this article.