Setup Menus in Admin Panel

School.Dataninja.it

Raccogliere dati sul web con Google Drive: la funzione IMPORTXML

XPath, un linguaggio per navigare in un documento HTML.

Il foglio elettronico è forse lo strumento più utile, ricco di funzioni, trasversale e diffuso tra chi deve lavorare con i dati. Si usa infatti per leggerli, manipolarli, “pulirli”, rappresentarli, raccoglierli e aggregarli, con applicazioni disponibili gratuitamente per tutti i sistemi operativi. Esistono anche sotto forma di applicazioni web, e per utilizzarle è quindi necessario soltanto avere una connessione internet e un browser aggiornato: una di queste, forse la più nota è “Fogli“, una delle app di Google Drive.

Google Drive Fogli (da qui in poi “Fogli”) è un’applicazione gratuita e di semplice utilizzo, che mette a disposizione diverse funzioni per la raccolta di dati a partire da una pagina web: a seguire verrà mostrato, con alcuni esempi, come utilizzare quella denominata IMPORTXML.

Premessa

IMPORTXML importa dati da sorgenti strutturate di dati – XML, CSV, TSV, feed XML RSS e ATOM e HTML – e quindi anche da pagine web. Come tutte le altre funzioni di “Fogli”, si attiva seguendo questi passi:

  • si fa click sulla cella in cui si vuole inserire la funzione;
  • si scrive “=”;
  • si inserisce la funzione secondo la sua sintassi, che nel caso in questione è IMPORTXML(url; query_xpath).

Ha due argomenti principali separati da ;:

  • url per impostare la sorgente (l’indirizzo di una pagina web);
  • query_xpath per definire cosa esattamente vogliamo estrarre (ad esempio soltanto tutti i titoli della prima pagina di un quotidiano).

Il primo parametro non richiede spiegazioni di dettaglio, ma soltanto una nota: l’URL va inserito tra una coppia di virgolette ("), e quindi ad esempio “http://www.miosito.it“.

Il secondo richiede almeno la conoscenza di nozioni di base di XPath e (per gli esempi di sotto) di HTML.

XPath

È un linguaggio che consente di individuare delle sezioni specifiche (chiamate “nodi”) di un documento strutturato – così come una pagina HTML – a partire dalla definizioni di espressioni.

Una pagina HTML ha una struttura gerarchica a Tag. Nell’immagine di sotto il codice di una pagina di esempio:

html.png

Per il primo dei due paragrafi (tag <p>) la gerarchia è evidente e la potremmo esprimere in questo modo html>body>p, ovvero <p> è figlio di <body>, che è figlio del tag. Le espressioni XPath si scrivono sfruttando proprio questa gerarchia: quella per definire il primo dei paragrafi di sopra è /html/body/p[1].

È quasi identica a come scritto in precedenza (html>body>p), ma con due differenze principali:

  • il carattere “/” serve a separare i tag in relazione tra loro;
  • allo stesso livello gerarchico corrispondono 2 tag <p>, ed è quindi necessario inserire un indice numerico (“[1]”) per individuare il primo.

Se si vuole quindi ad esempio individuare tramite XPATH il secondo elemento dell’elenco puntato della pagina HTML di sopra, si potrà scrivere l’espressione: /html/body/ul/li[2]

Non è però necessario partire dal livello gerarchico più alto, da html. Per selezionare un determinato tipo di nodo, in qualunque posizione esso sia, si usa “//”. Quindi per selezionare il secondo tag <li> del codice di sopra, potrò semplicemente scrivere //li[2].

Tramite un’espressione XPath posso selezionare un tag, anche a partire da una sua specifica proprietà, come ad esempio class. Tra i due tag <p> di sopra, soltanto uno è associato alla class “esempio”. Posso usare questa proprietà distintiva per individuarlo in modo univoco, senza usare alcun indice numerico, perché soltanto uno dei nodi è associato alla suddetta class. L’espressione per selezionarlo è: /html/body/p[@class='esempio']

O ancora più semplicemente – senza partire dalla radice – //p[@class='esempio'].

XPath è un argomento molto ampio, su cui si trova moltissimo materiale online. Un buon punto di partenza è questo.

A seguire adesso alcuni esempi di estrazione di dati da pagine HTML, usando “Fogli” e la funzione IMPORTXML.

Esempi

Tre note in premessa:

  • il browser che verrà utilizzato per costruire questi esempi è Google Chrome;
  • la versione più recente di Google Fogli contiene un baco correlato alla funzione IMPORTXML, non presente nella versione precedente. Per creare e usare foglio con la vecchia versione basta aprire l’URL http://g.co/oldsheets;
  • la funzione IMPORTXML, con questa versione di Fogli, funziona se si usano nelle espressioni i tag dell’HTML 4.

Importare tutti i titoli e gli URL della sezione ZOOM di ANSA.it

L’homepage di ANSA contiene (al gennaio 2015) sulla sinistra una fascia denominata ZOOM. Da questa voglio estrarre tutti i titoli e gli URL relativi.

ansa_zoom.png

Come scritto sopra, la funzione IMPORTXML richiede due argomenti. Il primo è l’URL della homepage di ANSA, quindi “http://www.ansa.it“.

Il secondo è l’espressione XPath che mi consente di estrarre tutti i nodi HTML che individuano i titoli di questa sezione. Per definirla devo leggere il codice HTML della pagina, ed il modo più semplice per farlo è utilizzare il proprio browser, fare click con il destro sulla pagina e selezionare “Visualizza sorgente pagina”.

La prima notizia di questa sezione del sito (oggi) contiene la parola “Bello”, che posso usare nel codice per individuare visivamente la parte di HTML relativa.

ansa_1.png

Il titolo corrisponde a un tag <h3> a cui è applicata la class news-title. L’espressione XPath per individuare tutti i nodi con queste 2 caratteristiche è: //h3[@class='news-title'].

Creiamo un nuovo file in “Foglio” e proviamo a estrarre questi valori. Si parte dal fare click con il sinistro su una cella (per semplicità la prima), per poi inserire questa formula:

=IMPORTXML(“http://www.ansa.it/”;”//h3[@class=’news-title’]”)

Il risultato però contiene anche altri titoli //h3[@class='news-title'] di altre sezioni della pagina, e non soltanto quelli di questa fascia denominata “ZOOM”.

foglio_01.png

Per trovare rapidamente un’espressione con cui provare a estrarre i nodi soltanto di questa parte dell’homepage utilizzerò i “Chrome Developer Tools” di Google Chrome, che mi consentono di estrarre l’espressione XPath di qualsiasi elemento di una pagina web.

Si inizierà dal fare 1) click con il destro su uno degli elementi che si vogliono estrarre, per poi 2) selezionare “Ispeziona elemento”.

chrome_01.png

Si aprirà, un pannello con il codice HTML, e con evidenziata la parte corrispondente all’elemento che si è scelto di ispezionare.

chrome_02.png

Per copiare l’espressione XPath relativa a quel nodo 1) fare click con il destro del mouse sulla porzione di codice selezionata e 2) scegliere “Copy XPath”. Il risultato sarà in questo caso questa espressione complessa, definita a partire dalla radice della pagina:

/html/body/div[4]/div[1]/div[2]/div[1]/div/div[3]/section[2]/div/article[1]/header/h3/a

Nell’espressione si vede una “section[2]” che è il contenitore di questa parte dell’homepage. Se scrivo allora //section[2]/div/article/header/h3 otterrò tutti i titoli presenti in questa sezione.

Adesso resta da estrarre anche gli URL a cui puntano questi titoli. Il tag HTML relativo è <a> e la proprietà in cui sono definiti gli URL è “href”. L’espressione XPath per estrarre gli URL sarebbe:

//section[2][email protected]

Purtroppo però il tag article è relativo all’HTML5 e quindi non può essere usato.

html4.png

Esaminando il codice però si vede che 1) questo elemento è all’interno di un div a cui sono applicati più classi CSS. E nel punto 2) della figura di sopra si vede la gerarchia che porta al “nostro” tag <a>.

L’espressione XPATH sarà allora //div[@class='span3 other-news hidden-tablet hidden-phone']//h3[@class='news-title'][email protected]

Se la volessimo tradurre in linguaggio naturale sarebbe: estrai la proprietà href da tutti i tag <a> associati ai titoli <h3> a cui è applicata la classe CSS news-title, che ricadono all’interno dei <div> a cui sono associate le classi CSS span3 other-news hidden-tablet hidden-phone.

Estrarre tutti i tag dall’homepage di internazionale.it

Nell’homepage di internazionale.it ad ogni post è (normalmente) associato uno (o più) tag. Estrarli da subito uno “spaccato” dei temi del giorno. Con XPATH e IMPORTXML è molto semplice.

internazionale.png

Dalla figura di sopra si vede che a ogni tag è in HTML un tag <a>, all’interno di un elemento <li> di un <ul> a cui è associata la classe CSS tags. In XPATH si scriverà semplicemente: //ul[@class='tags']/li/a. E in Google Fogli quindi:

=ImportXML("http://www.internazionale.it/";"//ul[@class='tags']/li/a")

Estrarre da VeryBello.it l’elenco degli eventi di una data città

In questo sito sono raccolti gli eventi culturali organizzati nel contesto di EXPO 2015.

L’URL per aprire gli eventi di un città è “http://www.verybello.it/?place=nomecitta“, quindi ad esempio per Palermo sarà http://www.verybello.it/?place=Palermo.

Aprendo la pagina, e esplorando il codice HTML, sarà possibile risalire alle espressioni XPATH per estrarre ad esempio titolo dell’evento e luogo di svolgimento dello stesso.

Le 2 espressioni saranno:

  • //div[contains(@class,'evento-titolo')]
  • //div/div[1]/div[3]/div/div[@class='evento-sede']

Note finali

Le pagine di questo esempio potrebbero cambiare a livello di codice HTML in qualsiasi momento, e le espressioni XPATH di sopra potrebbero non essere più valide. Per questa ragione è stata fatta una copia locale statica dei tre siti di sopra, in modo da cristallizzare il valore di quanto scritto.

Questi gli URL:

Qui un Foglio gdrive con tutti gli esempi applicati: https://docs.google.com/spreadsheet/ccc?key=0AqILXbOb66_kdDZGSjdRaTdIYV9GMmhzVWtQUml3TVE&usp=sharing.

Letture: 1690