pregos blog /me… prego!

Howto: Mobile Webinterface

Ich schrieb ja vor kurzem darueber, dass ich eine kleine Werder Bremen Newsuebersicht erstellt habe. Als ich nun fuer ein paar Tage im Kurzurlaub war und die Seite ueber mein Handy aufrief, fiel mir auf, dass sie ein mobiles Interface gebrauchen koennte. Das Bild war zu gross, und generell haette man wohl auch was bei den Ladezeiten optimieren koennen. Wieder zurueck habe ich mich dann gleich an die Arbeit gemacht. Schnell bin ich auf zwei sehr nette Loesungen gestossen und habe kurzerhand beide miteinander Kombiniert. Die Loesungen findet Ihr auf den beiden Seiten:

• Make Your Site Mobile-Friendly in Two Minutes
• Apache Mobile Filter 2.x

Der erste Blogeintrag beschreibt, worauf man achten muss wenn man ein mobile Webseite erstellt, und beinhaltet eine Anleitung um seine eigene Seite mobil-Freundlich mit einer Subdomain zu erstellen. Der Weg ist recht simpel: Man erstellt eine Subdomain, z.B. von www.pregos.info dann mobile.pregos.info und weist der Subdomain den gleichen DocumentRoot zu. Anschliessend erstellt man zwei PHP Dateien und legt diese in den DocumentRoot. Beide PHP-Dateien werden ueber eine .htaccess vor und nach jeder HTML-Seite aufgerufen. Dabei wird ueberprueft ob die mobile.pregos.info Subdomain aufgerufen wurde, und wenn ja der HTML-Quelltext durch verschiedene Filter gejagt, die dann die Seite entsprechend anpassen.

Dieser Weg ist sehr schnell eingerichtet und funktioniert wunderbar. Ich finde ihn aber nicht schoen, denn das Szenario was mir vorschwebt ist eine mobile Seite von http://werder.pregos.info unter der gleichen Domain, da  jetzt noch ne Subdomain ranzuhaengen http://m.werder.pregos.info, nee, zuviel. Ich moechte, dass die Seite je nachdem von welchem Geraet sie aufgerufen wird, entweder als mobile Version oder als normale zu sehen ist.

Ein simpler Weg dieses zu erreichen waere z.B. mittels JavaScript festzustellen wie gross die Bildschirmaufloesung des anzeigenden Browsers ist und dementsprechend die Seite mittels CSS zu layouten. Das bedeutet aber gleichzeitig, dass ich mit JavaScript arbeiten muss und alle Browser das unterstuetzen muessen und Rechenleistung auf dem mobilen Geraet und und und... Ich will EINE Domain, EINE URL und SELBSTERKENNUNG des Servers.

Ueber WURFL (Wireless Universal Ressource File) bin ich dann irgendwie zu dem Projekt Apache Mobile Filter gestossen. Apache Mobile Filter ist eine Apache-Plugin, dass die Funktionen von WURFL direkt in Apache zur Verfuegung stellt. WURFL kennt z.B. alle UserAgents (z.Zt. 8661 verschiedene) und kann auf dieser Basis sagen, ob das gerade aufrufende Geraet ein mobiles Geraet ist oder nicht. Ueberpruefen und sehen was AMF alles so an Variablen zur Verfuegung stellt koennt Ihr unter der Adresse: http://apachemobilefilter.nogoogle.it/php_test.php

Das schoene ist, dass AMF diese Variablen in PHP unter Apache als dessen Server Enviroment Variablen zur Verfuegung stellt. Ich kann also in PHP z.B. mit der Variable $_SERVER['AMF_IS_WIRELESS_DEVICE'] arbeiten. Mit dieser Loesung kann ich nun serverseitig ueberpruefen ob es sich um ein mobiles Endgeraet handelt oder nicht, und dementsprechend die mobile Version der Seite anzeigen lassen oder nicht.

Nur der Weg dahin brauchte noch etwas, der Support von Apache Mobile Filter war aber allererste Sahne, echt super, kann man nicht anders sagen, und fuer die Nachwelt hier nochmal ein Auszug aus meiner .bash_history:

mkdir foo
cd foo
wget http://downloads.sourceforge.net/project/mobilefilter/ApacheMobileFilter/2.21/Apache2-WURFLFilter-2.21.tar.gz?use_mirror=dfn
tar -xzvf Apache2-WURFLFilter-2.21.tar.gz
cd Apache2-WURFLFilter-2.21/
perl Makefile.PL
make install
aptitude install libapache2-mod-perl2 libgd-gd2-perl libgd-tools
a2enmod perl
cpan Apache2::WURFLFilter Apache2::Filter Apache2::RequestRec Apache2::RequestUtil Apache2::Connection Apache2::SubRequest Apache2::Log CGI::Cookie APR::Table CGI::Cookie LWP::Simple Image::Resize IO::Uncompress::Unzip Cache::FileBackend
mkdir /var/www/MobileFilter
chown www-data:www-data /var/www/MobileFilter

Dazu habe ich noch in die /etc/apache2/httpd.conf die folgenden Eintraege hineingeschrieben:

PerlSetEnv MOBILE_HOME /var/www/MobileFilter
PerlSetEnv CacheDirectoryStore /tmp
PerlSetEnv WurflNetDownload true
PerlSetEnv DownloadWurflURL  http://downloads.sourceforge.net/wurfl/wurfl-latest.zip
PerlSetEnv LoadWebPatch true
PerlSetEnv PatchWurflNetDownload true
PerlSetEnv PatchWurflUrl http://wurfl.sourceforge.net/web_browsers_patch.xml
PerlSetEnv CookieCacheSystem true
PerlSetEnv CapabilityList all
PerlModule Apache2::WURFLFilter
PerlTransHandler +Apache2::WURFLFilter
#PerlOutputFilterHandler Apache2::AMFDeviceMonitor

Anschliessend muss der Apache Webserver mit einem /etc/init.d/apache2 restart neu gestartet werden.

Welche Variablen euch dann zur Verfuegung stehen und ob alles funktioniert kann man mit der Test-PHP Seite ueberpruefen die ich oben bereits einmal verlinkt habe. Diese koennt Ihr euch ganz einfach auf euren eigenen Server schmeissen, gibts hier zum Download.

Wenn irgendwelche Fehler auftauchen oder (wie bei mir zu Anfang) die Variablen nicht zur Verfuegung stehen, einfach nochmal ein rm -rf /tmp/wurfl* machen und Apache neustarten.

Ach so... um die mobile Seite jetzt zu implementieren habe ich die bereits beschriebene Loesung mit den PHP-Files und der .htaccess genommen und einfach in der global_prepend.php und die Zeile:

if ($_SERVER['SERVER_NAME'] == 'mobile.myawesomeblog.com') {

ersetzt durch

 if ($_SERVER['AMF_IS_WIRELESS_DEVICE'] == 'true') {

sowie die nachfolgende Zeile mit der URL-Ersetzung von normaler zu mobile-URL einfach weggelassen.