使用 Ruby on Rails 與 Eclipse 開發 iPhone 應用程式（第一部分）：偵測 Mobile Safari 與客製化佈局

前言：為何需要針對 iPhone 客製化內容？

自 iPhone 與 iPod touch 問世以來，Mobile Safari 迅速成為美國市佔率最高的行動瀏覽器。雖然 Mobile Safari 能完整呈現一般網頁，但其獨特的觸控介面與螢幕尺寸，促使許多開發者決定開發專屬的 iPhone 版網站。這介於「完全不修改」與「開發原生 App」之間的折衷方案：成本低於原生開發，又能提供優質的觸控體驗。

開發環境建置：Eclipse + Aptana + iPhone 外掛

本文採用 Eclipse 搭配 Aptana RadRails 外掛進行 Ruby on Rails 開發，並安裝 Aptana iPhone Preview 外掛，在 Eclipse 內即可預覽 iPhone 版面。安裝方式：在 Eclipse 中選擇 Help > Software Updates > Find and Install，加入 Aptana 與 iPhone 外掛的更新網址。安裝完成後，新增一個 iPhone 專案，並在屬性中將預覽網址指向本地 Rails 伺服器（如 https://localhost:3000/recipes.iphone），即可在模擬器中即時檢視開發成果。

圖 1：Aptana iPhone 外掛預覽畫面

偵測 Mobile Safari 使用者代理字串

iPhone 與 iPod touch 的 User-Agent 字串皆包含 Mobile/... Safari 關鍵字。在 Rails ApplicationController 中定義偵測方法：

def is_iphone_request?
  request.user_agent =~ /(Mobile\/.+Safari)/
end

接著註冊自訂 MIME 類型 :iphone（於 config/initializers/mime_types.rb 加入 Mime::Type.register_alias "text/html", :iphone），並透過 before_filter 自動切換回應格式：

before_filter :set_iphone_format

def set_iphone_format
  if is_iphone_request? || request.format.to_sym == :iphone
    request.format = (cookies["browser"] == "desktop") ? :html : :iphone
  end
end

如此一來，所有來自 Mobile Safari 的請求將自動使用 .iphone.erb 視圖與 layout.iphone.erb 版面。

建立 iPhone 專用版面與樣式

iPhone 可視區寬度為 320px，需在版面中加入 viewport meta 標籤，禁用雙擊縮放：

<meta name="viewport" content="width=device-width, user-scalable=no" />

並載入專用 CSS（如 iphone.css），調整標題大小、背景圖尺寸等，使版面緊貼螢幕邊緣。範例版面程式碼：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Recipes: <%= controller.action_name %></title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <%= stylesheet_link_tag 'iphone' %>
</head>
<body>
  <h1 id="header"><%= "Soups OnLine" %></h1>
  <%= yield %>
</body>
</html>

圖 2：iPhone 版頁首示意圖

讓使用者自由切換桌面版與行動版

在 iPhone 版面底部提供「切換至桌面版」連結，透過 BrowsersController 寫入 Cookie：

class BrowsersController < ApplicationController
  def desktop
    cookies["browser"] = "desktop"
    redirect_to recipes_path
  end
  def mobile
    cookies["browser"] = "mobile"
    redirect_to recipes_path
  end
end

桌面版版面同樣加入「切換至行動版」連結，但僅對 iPhone 使用者顯示（使用 helper_method :is_iphone_request?）。

開發期的四種預覽方式

• Aptana iPhone 外掛：跨平台、整合 Eclipse、可同時檢視雙版本。
• iPhoney (Mac 專用)：輕量級、可壓縮寬版面、需手動設定 User-Agent。
• iPhone SDK 模擬器 (Mac 專用)：最真實模擬雙擊縮放、書籤、主畫面圖示，但無法檢視原始碼。
• 真機測試：需同區域網路或部署至公開 Staging 伺服器。

小結

本文建立了自動偵測 iPhone、切換版面、客製化版面與樣式的完整伺服器端架構。下一部分將深入探討 iPhone 介面設計原則與實作細節。