Category: Programming

jQTouch och WordPress

Eftersom mobila webbplatser är “the shizzle” numera så vill inte jag vara sämre än att haka på tåget. Då jag bygger mycket webbplatser i WordPress så vill jag ha ett “enkelt” sätt att ha ett separat tema för den mobila sidan och låta den rulla med hjälp av jQTouch.

Tillägget

Så, vad är det jag vill göra, jag vill identifiera besökarens webbläsare och om det är en mobil så ska den “on-the-fly” byta till mitt mobila tema. Jag vill sedan ha ett sätt att kunna hoppa mellan den mobila och vanliga webbplatsen.

All kod finns i en Gist på GitHub (mycket anpassad för mina behov) för hur jag löst detta. Jag skapade ett plugin som tog hand om det hela. Om mitt vanliga tema heter ‘xc1-test’, så kommer jag att kolla ifall temat ‘xc1-test-mobile’ existerar.

WordPress ger oss möjligheten att ladda in ett separat tema med hjälp av filtret ‘stylesheet’, så vi gör en kontroll ifall temat finns (och efterfrågas) och i sådana fall hoppar vi över till det.

Temat

Temat xc1-test-mobile innehåller inte så mycket annat än exempelkod från jQTouchs lösning, så det är inte mycket nytt under solen där.

Det som inte är så vackert just nu är hur sidor och inlägg hämtas ifrån WordPress, jQTouch hämtar enbart statiska filer, därför har jag fått lov att lägga till .html i slutet på mina sidor. Poster däremot får man lov att ändra manuellt permalänk-inställningen i administrationen så den har .html på slutet. Detta kommer jag nog ändra och skriva om AJAX-hämtningen manuellt, men detta var mest för att få allting att fungera i ett inledande skede.

Temats filer single.php och page.php ska inte innehålla get_header() och get_footer().

Jag kan sedan hoppa mellan de två olika versionerna genom querystringen ?xc1-layout=mobile och ?xc1-layout=default.

Menyer

Något som är riktigt fint i WordPress 3 är att jag kan skapa en separat meny (i menyhanteraren) för den mobila versionen och använda den i detta mobila tema, då kan jag skapa separata mobilversioner av de sidor som jag vill ha tillgängliga ifrån mobilen.

Slutord

Jag har tittat mycket på hur andra har löst detta, jag kommer skriva mer om detta när jag känner mig nöjd med lösningen, ge gärna kommentarer på hur ni löst detta.

Tags PHP, WordPress

Programming

Riding the Rails: Amazon S3 & Flowplayer

Post author By Anders Hassis
Post date 1 August, 2010

Vi har börjat använda Amazon S3 för att lagra filmer som vi sedan ska spela upp (med hjälp av Flowplayer) i en inloggningsskyddad applikation.

För att sätta upp kopplingen mot S3 så använder vi oss av Paperclip och AWS::S3. Att få igång uppladdningen mot S3 tillsammans med Paperclip var absolut inga problem, det fungerade i princip så fort vi hade lagt in något liknande detta i vår modell:

has_attached_file :media_file,
    :storage => :s3,
    :s3_credentials => Rails.root.join('config', 's3.yml'),
    :path => ":attachment/:id/:style/:basename.:extension",
    :bucket => 'our_bucket',
    :s3_permissions => 'authenticated-read',
    :url => ":s3_protected_url"
    
  # Video Validations
  validates_attachment_presence :media_file
  validates_attachment_content_type :media_file, :content_type => ['application/x-shockwave-flash', 'application/x-shockwave-flash', 'application/flv', 'video/x-flv', 'video/H264']

(Det är authenticated-read som sätter rättigheterna på anslutningen och gör att vi kan använda oss av Paperclips expiring_url-metod.)

Problemet uppstod när vi skulle använda Flowplayer för att streama direkt ifrån S3, vi vill bara ha verifierade användare som ser våra filmer. Det blev strul med tecknen i de meckiga länkarna som S3 genererar och Flowplayer kunde inte läsa de rakt av.

Vi använde oss då av en “Alternate embedding method” aka. flashembed.js. Så här beskrivs “Flashembed and Flowplayer”:

Flowplayer is a regular Flash component just like any other Flash component. It can be placed on your page with this tool or by using HTML-based object tags or you can use our “competitor”, SWFObject.

Sedan när vi skickade den “säkra” länken från controllern till viewn så fick vi manuellt ersätta lite tecken:

@media[:flash_url] = @media.media_file.expiring_url.gsub("&", "%26").gsub("?", "%3F").gsub("=", "%3D")

För att embedda den i viewn så får du även se till att säga åt Rails att det är en säker länk (med hjälp av html_safe):

Tags Rails, Ruby

Programming

Riding the Rails: Aktiva menyobjekt

Post author By Anders Hassis
Post date 31 July, 2010

Fredrik W visade mig en riktigt stilig sak häromdagen på ett Rails-projekt vi håller på med. Att göra layouter och framför allt visa vilket menyobjekt som är “aktivt”, dvs vilken sida du är på just nu.

Lägg in denna helpern, i exempelvis application_helper.rb:

  
def menu_item(text, link, options = {:use_span => false, :only_controller => false})
   active = Rails.application.routes.recognize_path link
   text = content_tag("span", text) if options[:use_span]
     
   link_is_currently_active = options[:only_controller] ? params[:controller] == active[:controller] : params[:controller] == active[:controller] && params[:action] == active[:action]
    
   klass = link_is_currently_active ? "active" : ""
   return content_tag("li", link_to(text, link), :class => klass)
end
  
def menu(options = {}, &block)
  return content_tag("ul", options, &block)
end

Vi läser alltså av existerande routen och jämför den med menyobjektets. Så nu istället för att länk runt dig i applikationen med link_to så kan du nu använda blocket menu:

<% menu do %>
  <%= menu_item "Link 1", project_path(@project) %>
  <%= menu_item "Link 2", project_medias_path(@project) %>
<% end %>

Vips, så har vi nu fått en lista med det aktiva objektets klass som “active“.

Nu är det klart att detta är en väldigt begränsad lösning och kanske inte lämpar sig i större projekt med stora menystrukturer, men för enklare projekt fungerar detta alldeles utmärkt.

Tags Rails, Ruby