Slash Dot Dash: iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2

iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2

ben@slashdotdash.net (Ben) — Tue, 04 Dec 2007 00:33:00 +0000

After upgrading trawlr.com to Rails 2 I thought I’d make use of some of the new features and attempt to create an iPhone version of the site. With Rails 2 you can create a mime type specifically for the iPhone and then use that format in a respond_to block (along with views such as index.iphone.erb).

Before you start – iPhoney

iPhoney is an indispensable Mac-only tool for aiding the development of an iPhone specific site.

Looking for a way to see how your web creations will look on iPhone? Look no further. iPhoney gives you a pixel-accurate web browsing environment—powered by Safari—that you can use when developing web sites for iPhone. It’s the perfect 320 by 480-pixel canvas for your iPhone development. And it’s free. iPhoney is not an iPhone simulator but instead is designed for web developers who want to create 320 by 480 (or 480 by 320) websites for use with iPhone. It gives you a canvas on which to test the visual quality of your designs.

Ensure iPhoney’s user agent is set to iPhone User Agent in the menu.

iPhone mime type

Create an iPhone mime type alias using Rails 2 initializers.

config/initializers/mime_types

Mime::Type.register_alias "text/html", :iphone

Detecting iPhone user agents

Apple recommends that rather than redirecting iPhone users to an iPhone-optimised version of your site you should instead show the original site with a link to the alternative.

This can be achieved via user agent sniffing; looking for Mobile Safari (as Apple suggests), rather that iPhone or iPod touch, to allow for future device support.

Adding a helper method to application_helper.rb allows a notification message to be shown for only iPhone users (try accessing www.trawlr.com from an iPhone).

app/helpers/application_helper.rb

# Request from an iPhone or iPod touch? (Mobile Safari user agent)
def iphone_user_agent?
  request.env["HTTP_USER_AGENT"] && request.env["HTTP_USER_AGENT"][/(Mobile\/.+Safari)/]
end

In your view, show a message for iPhone user agents directing them to the iPhone version.

<% if iphone_user_agent? # Show message for iPhone users -%>
<div class="message">
    <p>Using an iPhone? <a href="http://iphone.trawlr.com/">Use the optimised version</a>.</p>
</div>
<% end -%>

iPhone subdomain

Instead of forcing users straight to our iPhone version, we offer them the option by using a separate subdomain (iphone.trawlr.com) with a link back to the regular site if they wish. When developing locally I modified my /etc/hosts file as follows so that I could use http://iphone.localhost.com:3000/.

/etc/hosts

127.0.0.1 iphone.localhost.com

You may need to flush the DNS cache after making the changes.

sudo dscacheutil -flushcache

Adjust format for iPhone

I chose to require login for all requests to the iPhone version of the site.

class ApplicationController < ActionController::Base
    before_filter :adjust_format_for_iphone
    before_filter :iphone_login_required

private

  # Set iPhone format if request to iphone.trawlr.com
  def adjust_format_for_iphone    
    request.format = :iphone if iphone_request?
  end

  # Force all iPhone users to login
  def iphone_login_required
    if iphone_request?
      redirect_to login_path unless logged_in?
    end
  end

  # Return true for requests to iphone.trawlr.com
  def iphone_request?
    return (request.subdomains.first == "iphone" || params[:format] == "iphone")
  end
end

Note that sessions_controller.rb (handles login) requires skip_before_filter :iphone_login_required.

Using iUI and creating iPhone views

The iUI framework, based on Joe Hewitt’s iPhone navigation work, hugely simplifies iPhone web development. All you need to do is include the iUI JavaScript and CSS files along with included images and create your views in a particular structure to have native iPhone behaviour such as sliding menus and AJAX page loading.

Rails 2 makes it trivial to create different views depending upon the format, including layouts. Our iPhone layout includes a few specifics for iUI and a viewport meta tag for the device.

app/views/layouts/application.iphone.erb

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <title><%= @page_title -%></title>
  <%= stylesheet_link_tag 'iui' %>
  <%= javascript_include_tag 'iui' %>
</head>
<body>
    <div class="toolbar">
        <h1 id="pageTitle"></h1>
        <a id="backButton" class="button" href="#"></a>
    </div>

    <%= yield %>
</body>
</html>

When creating your iPhone views you should follow the iUI style guide, an example page is given below. Standard hyperlinks are loaded using AJAX and slide into view, navigating back is handled by iUI. Links may be prefixed with target="_self" to replace the entire page or target="_replace" to replace the element with the response (using AJAX).

index.iphone.erb

<ul title="Home" selected="true">
    <li><%= link_to 'Example action', example_path %></li>
    <li><%= link_to 'Logout', logout_path, :method => :delete, :target => '_self' %></li>
</ul>

show.iphone.erb

<div class="panel" title="Example" selected="true">
    <h2>Example Content</h2>
    <p>Here's some content</p>
</div>

It’s important to remember that iUI will load content using AJAX, thus you only need to render a layout (such as application.iphone.erb) for the first request or page of your iPhone site. All following requests should use render :layout => false (unless loaded into a new page with target="_replace"). If you experience any wierd rendering issues it’ll most likely be due to this irregularity.

respond_to do |format|
    format.iphone do  # action.iphone.erb
      render :layout => false
    end
end

Show, don’t tell

Why not try iphone.trawlr.com for yourself? It’ll work for your iPhone or any web browser. You’ll need to register via the normal site if you don’t already have an account (quick, no email registration required)!

References

The following resources on the new Rails 2 iPhone format ability and iUI library were extremely helpful; the documentation from Apple not so much!

http://developer.apple.com/iphone/
http://www.railspikes.com/2007/11/8/iphone-subdomains-with-rails
http://blog.nicksieger.com/articles/2007/09/18/railsconf-europe-david-heinemeier-hansson
http://www.joehewitt.com/blog/introducing_iui.php
http://code.google.com/p/iui/

Yes, I’m still loving the iPhone!

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by joost

Sun, 29 Jun 2008 20:00:28 +0100

Rather than request.env["HTTP_USER_AGENT"] && request.env["HTTP_USER_AGENT"][/(Mobile\/.+Safari)/] I would use / am using request.user_agent =~ /(Mobile\/.+Safari)/

Less is more :)

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by danbucks

Tue, 17 Jun 2008 21:06:45 +0100

On this example, and Apple’s example, the setting of the format is flawed: iphone_request? should check the current fundamental format, and, typically, only change the format if the incoming format is text/html. Alternatively, the programmer needs to really know what they are doing if they alias all incoming formats – no matter what they may be (javascript is a common case) – onto :iphone

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by nameth

Thu, 10 Apr 2008 16:46:52 +0100

very nice…

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by dave@thoughtbureau.com

Wed, 02 Apr 2008 21:13:46 +0100

does anyone know where to obtain iPhone UI specs?

Thank you

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Tiffani

Sun, 02 Mar 2008 01:02:29 +0000

Hey, Ben. This is awesome. But, did you encounter an funny business with Rails picking up application.iphone.erb? I’m on Rails 2.0.2 and for some reason, even though everything appears to be set up properly, my iPhone requests don’t at all flow through application.iphone.erb. Any ideas why this might be? TIA!

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Chris

Mon, 21 Jan 2008 21:29:24 +0000

Nice, Ben. Your approach is a bit different than mine in that I’m not using a separate subdomain (despite Apple’s wish that we all bow down to their creation). But a problem I am having I think you would have as well: how do you ensure that javascript requests, json requests, xml requests and CSS requests don’t get funnelled into the :iphone format? The only solution I have found is to change the format to :iphone only when the format is already html. So, something like this:

request.format = :iphone if (browser_is_iphone? && request.format.html?)

How do you ensure that iphone requests for javascript/json/etc. don’t get munged into iphone html?

-Chris

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by screwphone

Wed, 09 Jan 2008 01:02:39 +0000

many thanks! helped out a ton with our iphone-only site.

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Vendy

Thu, 27 Dec 2007 17:52:18 +0000

Wow thanks! I’m a regular reader and enjoy your work. Keep it up!

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by boyinapalli@hotmail.com

Thu, 20 Dec 2007 13:22:34 +0000

Thanks i worked out the problem. I had to change the javascript.

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Ben

Mon, 17 Dec 2007 13:31:31 +0000

I think you need to add target="_self" to any external links….

<a target="_self" href="http://info.aol.co.uk/email">AOL</a>

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by boyinapalli@hotmail.com

Mon, 17 Dec 2007 13:20:39 +0000

Dear Friend,

I am designing a wowlinks page for my iphone here is the link: http://www.wowlinks.co.uk/m

The problem is, i am unable to make the hyperlinks work. Can you help me?

Thanks Bhagavan

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by http://mobilezoo.biz

Fri, 14 Dec 2007 13:05:47 +0000

Hi,

I’m new to rails :)

Sorry for asking the question, but where to put the Code snippet respond_to ? I currently get a 406 http response code when pointing my iphone to my site.

Thank you in advance, iSdl

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Frédéric de Villamil

Thu, 13 Dec 2007 15:15:26 +0000

Hey, nice shoot. Shall be in Typo 5.0 if I have the time (hint : release soon).

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by bbebop

Mon, 10 Dec 2007 07:53:18 +0000

Thanks for these tips on using iUI! I’m creating an iPhone version of an existing app that uses ajax for sorting lists, drag and drop between lists, etc. I’d like to retain that functionality (it mostly seems to work), but not sure how to do in the context of iUI’s use of ajax. Any suggestions?

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Gustavo Barron

Fri, 07 Dec 2007 09:06:56 +0000

Nice tips actually now that I just buy a iPod touch I was wondering about making some nice apps to administer some tasks and your tips will boost my speed on doing them

Kudos!!!

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Ben

Thu, 06 Dec 2007 11:31:51 +0000

Matt: The adjust_format_for_iphone before filter does the routing; the main site (www.trawlr.com) and iPhone subdomain (iphone.trawlr.com) both point to the same Rails app.

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Matt K

Thu, 06 Dec 2007 04:30:25 +0000

Great tips! Would you mind posting the routing you used to separate the subdomain (iphone.trawlr.com) from the main domain, or did you build a separate webapp hosted at the subdomain?

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by topfunky

Tue, 04 Dec 2007 19:43:21 +0000

For sites that can’t be easily re-templated (or don’t need to be), I’ve had success with wrapping a global iPhone layout and custom CSS around my existing HTML templates.

layout :determine_layout

def determine_layout
  if mobile_safari_subdomain_or_relevant_header?
    return "iphone" 
  end

  return "application" 
end

You can make the entire site iPhone-friendly in a few minutes and you don’t have to rewrite every template to do it.

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Chris

Tue, 04 Dec 2007 19:19:21 +0000

Great article. Thanks for taking the time to school us on this one! :D

"iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2" by Luke Francl

Tue, 04 Dec 2007 02:41:32 +0000

Nice article on iPhone development and thanks for linking to my post about it.

I like the virtual iphone subdomain trick you’re using…I think I will switch to that rather than sniffing the user agent while testing. I’m also going to check out iUi, that looks very cool.