Catturare lo shake dell'iPhone con Javascript: Dice Roller.
Dalla versione di iOS 4.2 è disponibile il supporto alle api Javascript dell'accelerometro, tramite l'evento devicemotion dotato di alcune proprietà come accelerationIncludingGravity. Per provare queste nuove features del browser Safari Mobile di iPhone, iPod Touch e iPad ho simulato il lancio di un dado che avviene semplicemente scuotendo il device o con il "tap" sull'apposito bottone. Il tutto costruito puramente in HTML5, CSS3 e Javascript.
Per quanto riguarda il codice Javascript, ho scelto di includere jQuery, ma allo scopo si sarebbe potuto utilizzare anche il leggerissimo Zepto.js, o ancora meglio con poco sforzo operare in modalità standalone senza utilizzare un framework. Per la cattura dello "shake" il plugin JQuery iOS Shake mi è sembrato dai test la soluzione ideale, con la lettura più precisa e veloce del movimento del device.
Il disegno del dado è ottenuto in html con l'utilizzo di 6 tag div ognuno per ogni faccia del cubo. L'animazione tridimensionale è invece una magia resa possibile dalle nuove proprietà CSS3: transitions, animations e 3D transform. Il codice che ho utilizzato deriva in gran parte da una demo del WebKit Open Source Project.
Riguardo la gestione del sonoro (tramite un piccolo file mp3 da 11 kb), ho sfruttato la tecnica con un iframe (demo) proposta da @pupunzi, principalmente per ottenere l'autoplay dell'audio al primo caricamento della pagina. in iOS infatti per scelta della Apple, il play del tag audio può avvenire solo in seguito a un evento dell'utente, come la pressione del pulsante.
Ho utilizzato un file cache.manifest, così aggiungendo il collegamento all'Home Screen e sfruttando lo storage locale dell'iPhone è possibile utilizzare il Dice Roller come una vera app, e anche senza connettività 3G o wireless.
Dice Roller demo
Ricordo che questa demo è funzionante solo su Safari Mobile in dispositivi touch dotati di iOS 4.2 o versioni superiori (in Android non è stata ancora implementata la proprietà CSS3 3D Transform.
N.B. Purtroppo l'audio non viene riprodotto in mancanza di connessione internet, un problema imputabile alla cache o alla riproduzione tramite iframe, dovrei provare...
Altre soluzioni per la cattura dello "shake"
Come già detto ho giustificato l'adozione del plugin JQuery iOS Shake per il riscontro di una reazione più veloce e precisa al movimento del device.
Comunque, esistono molti script alternativi ed ugualmente funzionanti, molto simili tra loro:
- sempre ricorrendo all'utilizzo di JQuery, il plugin gShake.
- due soluzioni standalone, WKShake e JS iPhone Shake Event.
- un semplice script (dipendente da JQuery o Zepto.js) proposto in una demo (codice sorgente disponibile liberamente quì) del consigliatissimo libro pubblicato da Sitepoint Build Mobile Websites and Apps for Smart Devices
- Social:
L'html nel testo del commento è abilitato: i tag consentiti sono: a, em, strong, p, code, pre, quote e br.
Gli attributi dei tag utilizzabili sono title e href.