Version mobile des vues pour Ruby on Rails

Je suis après la validation de certains que je suis en train de faire la bonne chose. J'ai mon Ruby on Rails application dans la structure suivante:

/home
sur.rhtml
index.rhtml
/affichage
index.rhtml
de données /<--Ceci est appelé par jQuery à partir de l'écran\index page pour fournir les données pour rendre
pousser.js.erb
retirez-le.js.erb
/mise en page
la maison.rhtml
affichage.rhtml

Tout fonctionne bien, mais maintenant, je veux ajouter un site ciblé pour les appareils mobiles. Alors que l'iPhone rend le site correctement, il serait bon de fournir une approche plus ciblée de l'expérience. Idéalement, je pense avoir une iPhone.domain.com ce qui serait redirigé vers via .htaccess.

Pour cela, je pensais à propos de l'ajout d'un autre point de vue pour chaque appareil
/iPhone
la maison.rhtml
sur.rhtml
affichage.rhtml

Cependant, il se sent comme un lot de données serait en double, par exemple, la page serait à deux endroits. Je suppose que je pourrais avoir une partielle et faire quelque chose comme render :partial => 'accueil/à propos de" mais qui semble un peu hacky.

Comment puis-je développer mon site à l'appui de cette?

Je pensais à une structure telle que, mais là encore pas sûr de la façon de structurer le code - comment puis-je te rendre la vue dans l'iPhone annuaire... tout en n'ayant pas le maître de mise en page appliquée
/affichage
/iphone
index.rhtml

Je voudrais vraiment des conseils sur la meilleure façon d'aborder cette question et de la structure de l'application. Alors que les applications suivent une structure à l'heure actuelle, ils peuvent aller dans des directions différentes..

Merci

Ben

source d'informationauteur Ben Hall

33

Je vous recommande fortement de laisser le contrôleur de la structure de la même manière sur tous les types de périphériques. En particulier si vous êtes à l'aide de Rails Reposant itinéraires vos contrôleurs doivent être étroitement adaptée pour le modèle de domaine de vos données. Si les données sont ensuite présentées à un navigateur de bureau, d'un iPhone, d'un autre type d'appareil mobile, un JSON/XML API REST client etc. est surtout une question de la couche de présentation, pas le contrôleur ou la couche de routage.

Donc une solution élégante serait:
1. Détecter type de périphérique basé sur l'Agent Utilisateur (vous pouvez vous référer à la WURFL de l'Agent Utilisateur de la base de données);
2. utilisation de Rails respond_to mécanisme de rendre un autre format d'affichage pour chaque type d'appareil;
3. définir un modèle pour chaque type d'appareil (par ex. à l'aide de l'XHTML Mobile Profile doctype pour les appareils mobiles);
4. inclure différents fichiers CSS selon le type d'appareil.
Il existe des plugins qui tentent de rendre cela plus facile: avoir un regard sur brendanlim Mobile Fu et noelrappin Rails du iiu (sur GitHub). Aussi Brendan Lim présentation à Rails de Métro a quelques idées.

Ce que vous devriez viser pour est quelque chose comme:
```
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
```
Vous devrait également permettre aux utilisateurs de dispositifs mobiles pour remplacer l'agent de détection utilisateur si ils ont vraiment envie de voir la version de bureau du site. Un cookie avec un long temps d'expiration est probablement la meilleure façon de le faire, de sorte que le site se souvient le choix la prochaine fois que l'utilisateur retourne. Certains appareils mobiles ont des ordures support de cookie, mais ensuite, ils ont probablement ne voulez pas que la version de bureau du site car de toute façon il ne sera probablement pas travailler.
9

Rails 4.1 comprend Variantesune nouvelle fonctionnalité:

Vous permet d'avoir des modèles différents et des réponses du plan d'action pour le même type mime (par exemple, HTML). C'est une formule magique pour toute application Rails qui est au service de clients mobiles. Vous pouvez désormais avoir des modèles individuels pour le bureau, tablette, téléphone et opinions tout en partageant tous la même logique du contrôleur.

Dans votre cas, vous avez seulement besoin de définir la variante pour l'iphone dans un before_actione.g:
```
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
```
Ce qui est nouveau dans les Rails 4.1
1

L'Iphone est en fait un assez bon travail de rendu des pages web sans aucune mise en forme particulière.

Cependant sur mon téléphone Android flottait contenu semble coupé et donc un affichage personnalisé pour que le téléphone est requis.
Pour ce faire, vous devez créer une mise en page différente (par exemple, mobile_application.html.erb) et dans votre application_controller ajouter les éléments suivants:
```
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
```
où MOBILE_BROWSERS est un tableau de chaînes d'agent utilisateur que vous souhaitez adapter un appareil mobile.

J'ai écrit un blog à ce sujet ici:

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

Acclamations
0

tout d'abord, vous devriez être en utilisant .html.erb que votre modèle d'extension

deuxièmement, vous pouvez utiliser la logique pour détecter le type de modèle à utiliser en fonction de l'agent utilisateur (request.user_agent).
```
layout :site_layout

def site_layout
  some_way_to_detect_the_layout_to_use
end
```
Note, le user_agent peut être faux, mais une majorité de gens ne dérange pas semblant de sorte que la solution devrait être "assez bon" pour 99,9% des cas.

Vous devez vous connecter pour publier un commentaire.