Мобильная версия просмотров для Ruby on Rails

Я после некоторой проверки, что я поступаю правильно. У меня есть приложение Ruby on Rails в следующей структуре:

/дома
    about.rhtml
    index.rhtml
/Дисплей
    index.rhtml
/data < - Это вызвано jQuery с страницы отображения \index, чтобы предоставить данные для рендеринга
    push.js.erb
    pull.js.erb
/Макет
    home.rhtml
    display.rhtml

Все работает нормально, но теперь я хочу добавить сайт, предназначенный для мобильных устройств. Хотя iPhone правильно отображает веб-сайт, было бы неплохо обеспечить более целенаправленный опыт. В идеале, я думаю о том, что iPhone.domain.com будет перенаправлен через .htaccess.

Для этого я думал о добавлении другого представления для каждого устройства
/IPhone
    home.rhtml
    about.rhtml
    display.rhtml

Однако, похоже, что многие данные будут дублированы, например, о странице будет в двух местах. Наверное, я мог бы частично и сделать что-то вроде render: partial = > 'home/about', но это кажется немного взломанным.

Как я могу разработать свой сайт для поддержки этого?

Я думал о такой структуре, как, но опять же не уверен, как структурировать код - как я могу сказать, что он отображает представление в каталоге iPhone... пока не используется макет макета
/Дисплей
   /iphone
      index.rhtml

Мне бы очень хотелось, чтобы некоторые советы касались наилучшего подхода к этому и структурирования приложения. Хотя приложения следуют структуре в настоящий момент, они могут уходить в разных направлениях.

Спасибо

Бен

Ответы

Ответ 1

Я бы настоятельно рекомендовал оставить структуру контроллера одинаковой для всех типов устройств. В частности, если вы используете маршруты RESTful Rails, ваши контроллеры должны быть точно сопоставлены с моделью данных вашего домена. Независимо от того, представлены ли эти данные настольному браузеру, iPhone на другой тип мобильного устройства, клиенту JSON/XML REST API и т.д., В основном это вопрос уровня представления, а не уровня контроллера/маршрутизации.

Таким образом, элегантным решением будет:

  • Определить тип устройства на основе User Agent (вы можете обратиться к базе данных пользователя WURFL User Agent);
  • использовать Rails 'respond_to для отображения другого формата представления для каждого типа устройства;
  • определите макет для каждого типа устройства (например, с помощью типа XHTML Mobile Profile для мобильных устройств);
  • включают различные файлы CSS в зависимости от типа устройства.

Есть несколько плагинов, которые пытаются сделать это проще: взгляните на brendanlim Mobile Fu и noelrappin Rails iUI (оба на GitHub). Также Презентация Брендана Лима в Rails Underground содержит несколько идей.

То, к чему вы должны стремиться, это что-то вроде:

def show
  @foo = Foo.find(params[:id])
  respond_to do |format|
    format.html       # => show.html.erb
    format.iphone     # => show.iphone.erb
    format.blackberry # => show.blackberry.erb
  end
end

Вы также должны разрешить пользователям на мобильных устройствах переопределять обнаружение агента пользователя, если они действительно хотят видеть версию рабочего стола на рабочем столе. Вероятно, это самый лучший способ сделать это, так что сайт запоминает выбор в следующий раз, когда пользователь вернется. На некоторых мобильных устройствах есть поддержка мусорных файлов, но тогда они, вероятно, не захотят использовать настольную версию сайта, потому что это, вероятно, не сработает.

Ответ 2

Rails 4.1 включает в себя Варианты, отличную новую функцию, которая:

Позволяет иметь разные шаблоны и ответы на действия для одного и того же типа mime (скажем, HTML). Это волшебная пуля для любого приложения Rails, обслуживающего мобильных клиентов. Теперь вы можете иметь отдельные шаблоны для настольных компьютеров, планшетов и телефонов при совместном использовании одной и той же логики контроллера.

В вашем случае вам нужно только установить вариант для iphone в before_action, например:

class HomeController < ApplicationController
  before_action :detect_iphone
  def index

    respond_to do |format|
      format.html               # /app/views/home/index.html.erb
      format.html.phone         # /app/views/home/index.html+phone.erb
    end
  end

  private
    def detect_iphone
      request.variant = :iphone if request.user_agent =~ /iPhone/
    end
end

Что нового в Rails 4.1

Ответ 3

Iphone действительно неплохо выполняет рендеринг веб-страниц без специального форматирования.

Однако на моем Android-телефоне плавающее содержимое, похоже, отключается, поэтому требуется нестандартное представление для этого телефона. Для этого вам нужно создать другой макет (например, mobile_application.html.erb), а в приложении application_controller добавьте следующее:

layout :select_layout

  def select_layout
    session.inspect # force session load
    if session.has_key? "layout"
      return (session["layout"] == "mobile") ? "mobile_application" : "application"
    end
    return detect_browser
  end

  def detect_browser
    agent = request.headers["HTTP_USER_AGENT"].downcase
    MOBILE_BROWSERS.each do |m|
      return "mobile_application" if agent.match(m)
    end
    return "application"
  end

где MOBILE_BROWSERS - это массив строк пользовательского агента, который вы хотите сопоставить в качестве мобильного устройства.

Я написал блог об этом здесь:

http://www.arctickiwi.com/blog/2-mobile-enable-your-ruby-on-rails-site-for-small-screens

Приветствия

Ответ 4

во-первых, вы должны использовать .html.erb в качестве расширения шаблона

во-вторых, вы можете использовать логику для определения типа макета для использования на основе пользовательского агента (request.user_agent).

layout :site_layout

def site_layout
  some_way_to_detect_the_layout_to_use
end

Обратите внимание, что user_agent может быть фальсифицирован, но большинство людей не беспокоят его, поэтому решение должно быть "достаточно хорошим" для 99,9% случаев.