Per molti ancora è sconosciuto ma l’approccio di Ubiquity, l’estensione sperimentale di firefox, promette di cambiare la filosofia con cui utiliziamo il browser.

A detta dei suoi sviluppatori, infatti, ubiquity ha il compito di “connettere il web con il linguaggio” e ciò si traduce nella possibilità di utilizzare un linguaggio naturale per eseguire una serie di azioni sul web.
Immaginiamo ad esempio di visitare una pagina web in cui viene citato il nome di un film, o di un luogo di cui non conosciamo niente. In condizioni normali dovremmo aprire un altro tab del browser, collegarci a google, yahoo, imdb o quant’altro, incollare il testo da ricercare ed effettuare la ricerca. Con ubiquity possiamo selezionare il testo, premere CTRL+spazio (o la combinazione di tasti configurata) e selezionare uno dei comandi suggeriti, che agiranno in questo caso direttamente sulla selezione, consentendoci velocemente di effettuare una traduzione, una ricerca, una conversione di formato ecc…

E’un esempio piuttosto banale, in realtà ubiquity è molto di più, ma questo non vuol essere un articolo introduttivo sull’utilizzo di ubiquity, è una semplice guida su come costruire un comando di ricerca.
Per l’esattezza l’obiettivo è quello di costruire un comando di ricerca, con preview, per l’ottimo sito di q&a stackoverflow.com.

Come prima cosa dobbiamo accedere alla sezione di configurazione di ubiquity, eseguendo il comando help.
Da quì possiamo accedere alla pagina “Command editor”, che ci consentirà di digitare il codice dei nuovi comandi, che diventeranno immediatamente funzionanti:

Ovviamente avremo bisogno di dare uno sguardo alle command APIs e più precisamente alla libreria CmdUtils.
Fortunatamente, come possiamo constatare, esiste un helper per la creazione di un comando di ricerca standard, il metodo makeSearchCommand, una specializzazione del più generico CreateCommand.

Come possiamo vedere makeSearchCommand accetta 3 parametri: name, urle parser.

Banalmente il name sarà ciò che si dovrà digitare per eseguire il comando una volta che questo sia stato completato; possiamo utilizzare “stackoverflow” per esteso, o il più rapido “so”, che non corrisponde a nessun comando di default.
Per capire invece cosa passare ai parametri “name” e “parser” dobbiamo innanzitutto fare un po di reverse engineering su www.stackoverflow.com.

Proviamo come prima cosa ad eseguire una ricerca direttamente dal sito, ricercando i termini “asp.net”. Notiamo subito che il parametro di ricerca viene passato in querystring componendo il seguente url: “http://stackoverflow.com/search?q=asp.net”.

Possiamo quindi immaginare che il template dell’url, in conformità a quanto indicato nelle API, sarà una cosa del tipo: “http://stackoverflow.com/search?q={QUERY}”, dove il placeholder {QUERY} verrà di volta in volta sostituito dal parametro del nostro comando.

Il parametro parser è un po più complesso. E’ costituito da alcune proprietà attraverso cui possiamo indicare, al parser che si occupa della preview del comando, come interpretare il risultato della ricerca. Vediamo in dettaglio quelle che ci interessano:

• container: indica il contenitore che incapsula i singoli risultati
• title: il titolo del risultato
• preview: cosa mostrare come anteprima
• baseurl: nel caso in cui i link ai risultati siano espressi in indirizzi relativi, rappresenta la parte da rimontare a sinistra dell’indirizzo.

Le proprietà container, title e preview verranno utilizzate dal parser come selettori per generare oggetti jQuery. Quello che ci serve di sapere quindi è la struttura della pagina dei risultati di stackoverflow, e per questo ci basta una sbirciatina all’html con firebug:

Ora sappiamo che il selettore per il container sarà “.question-summary“, quello per il title “h3 a” e quello per la preview “.excerpt“.
Dal codice si nota anche che l’href del link del titolo è un indirizzo relativo, avremo quindi bisogno impostare baseurl a “http://stackoverflow.com”.

Abbiamo tutto ciò che ci serve a questo punto per costruire il comando di ricerca, che risulterà vergognosamente semplice:

CmdUtils.makeSearchCommand({
  name: "stackoverflow",
  url: "http://stackoverflow.com/search?q={QUERY}",
  parser: {container: ".question-summary",
           title: "h3 a",
           preview: ".excerpt",
           baseurl: "http://stackoverflow.com" }
});

Nel momento stesso in cui scriviamo il comando nella finestra Command Editor, se è sintatticamente corretto, diventa immediatamente disponibile in ubiquity. Premiamo quindi CTRL+spazio e scriviamo “stackoverflow” seguito dai termini che ci interessa ricercare.
Come previsto l’area di preview si popolerà con i primi 4 risultati disponibili, numerati per uno shortcut. A questo punto premendo invio eseguiremo la ricerca su un altro tab di firefox, mentre premendo CTRL+ALT+[numero] apriremo un tab direttamente al “baseurl+link” del risultato indicato dal numero del preview.

Ovviamente quest’esempio di comando risulta notevolmente semplificato dalla presenza del metodo makeSearchCommand, ma potrebbero presentarsi necessità più complesse di una semplice ricerca, basta dare un’occhiata ai comandi predefiniti per rendersi conto che abbiamo visto appena la punta dell’iceberg nell’analizzare il lato “developer” di questo interessantissimo componente.

Per ora è tutto. Liberi di commentare.