Cómo extraer una imagen con iMacros (Scraping paso a paso)

Para los que no estén familiarizados con la palabra, se le llama scraping a la extracción automática de datos de un sitio web (como podemos hacerlo con iMacros, por ejemplo).

Esta vez, voy a extraer una imagen de Makise Kurisu, personaje de la serie animada Stein Gate. Lo voy a hacer en la galería de imágenes llamada Konachan.

Lo bueno es que te voy a explicar paso a paso.

Todo lo que se vea en esta clase, lo repasaremos uno por uno en las clases que siguen, así que si no entienden algo, no se preocupen porque veremos cada cosa por separado después.


1) Visita el link siguiente (aclaro que el sitio contiene también imágenes no aptas para menores, por lo tanto, considere esto antes de entrar).

http://konachan.net/post?tags=makise_kurisu


Así se ve la página:

La extracción voy a hacerla con las herramientas que da iMacros, sin usar otros lenguajes, aunque aclaro que sería muy cómodo hacerlo con JavaScript (que lo voy a enseñar después, de todas formas). Esto es para que vea lo sencillo que puede ser incluso para el que no tiene conocimiento de un lenguaje de programación.

2) Hacer click sobre la primera imagen en miniatura. Esto te llevará a otra página con la imagen en tamaño completo.

3) Esperar a que cargue la página lo suficiente como para hacerle click a la imagen en tamaño completo.

4) Hacer click en el botón del navegador Retroceder página.

5) Repetir los pasos 2, 3 y 4 con dos imágenes más (la segunda y la tercera).

6) El resultado va a ser un código como éste:

Este es el código completo (no te asustes, sigue leyendo más abajo):

VERSION BUILD=XXXXXXX RECORDER=FX
TAB T=1
URL GOTO=http://konachan.net/post?tags=makise_kurisu
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&HEIGHT:84&&TITLE:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc&&CLASS:preview&&ALT:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc&&SRC:http://konachan.net/data/preview/24/07/24072ef67b188f0aca26ea61f8bdaf7d.jpg
TAG POS=1 TYPE=IMG ATTR=WIDTH:1500&&HEIGHT:844&&SRC:http://konachan.net/sample/24072ef67b188f0aca26ea61f8bdaf7d/Konachan.com%20-%20204166%20sample.jpg&&LARGE_WIDTH:1920&&LARGE_HEIGHT:1080&&ID:image&&CLASS:image&&ALT:brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white
BACK
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&HEIGHT:100&&TITLE:Rating:<SP>Safe<SP>Score:<SP>98<SP>Tags:<SP>brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train<SP>User:<SP>humanpinka&&CLASS:preview&&ALT:Rating:<SP>Safe<SP>Score:<SP>98<SP>Tags:<SP>brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train<SP>User:<SP>humanpinka&&SRC:http://konachan.net/data/preview/61/9a/619ab14b8b74cb9df43f6a7603e643b4.jpg
TAG POS=1 TYPE=IMG ATTR=WIDTH:1500&&HEIGHT:1000&&SRC:http://konachan.net/sample/619ab14b8b74cb9df43f6a7603e643b4/Konachan.com%20-%20202180%20sample.jpg&&LARGE_WIDTH:2000&&LARGE_HEIGHT:1333&&ID:image&&CLASS:image&&ALT:brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train
BACK
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&HEIGHT:84&&TITLE:Rating:<SP>Safe<SP>Score:<SP>95<SP>Tags:<SP>black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate<SP>User:<SP>Rackie&&CLASS:preview&&ALT:Rating:<SP>Safe<SP>Score:<SP>95<SP>Tags:<SP>black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate<SP>User:<SP>Rackie&&SRC:http://konachan.net/data/preview/a6/43/a643ff49a2f31a1de43877090e178259.jpg
TAG POS=1 TYPE=IMG ATTR=WIDTH:1500&&HEIGHT:844&&SRC:http://konachan.net/sample/a643ff49a2f31a1de43877090e178259/Konachan.com%20-%20195724%20sample.jpg&&LARGE_WIDTH:1920&&LARGE_HEIGHT:1080&&ID:image&&CLASS:image&&ALT:black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate
BACK


7) Vamos a concentrarnos en las lineas que hacen click sobre las miniaturas (4, 7 y 10). Voy a separar en pedacitos la primera, para que la veas con más claridad. Recuerda que los <SP> son espacios y los && son para agregar más condiciones de selección, las cuales se tienen que cumplir todas.

TAG

POS=1

TYPE=IMG


ATTR=

WIDTH:150

&&HEIGHT:84

&&TITLE:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc&&CLASS:preview

&&ALT:Rating:<SP>Safe<SP>Score:<SP>97<SP>Tags:<SP>brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white<SP>User:<SP>Wiresetc

&&SRC:http://konachan.net/data/preview/24/07/24072ef67b188f0aca26ea61f8bdaf7d.jpg


Como verás, la imagen en miniatura contiene entre sus atributos TITLE (título, en el cual vemos que se cita todas las etiquetas/tags asociadas a la imagen) y ALT (el mensaje de error en caso de que la imagen no se visualice, que también contiene dichas etiquetas). Pero lo más destacable son WIDTH (ancho de la imagen) y HEIGHT (altura de la imagen). Lamentablemente, HEIGHT varía, siendo 84 en dos casos y 100 en uno. Queda claro que HEIGHT no puede usarse para referirnos a todas las miniaturas pero WIDTH sí.


8) Por otra parte, vemos un atributo llamado SRC, que nos indica una ruta de la imagen en miniatura. ¿Será que esa ruta se parece a la de las otras imágenes en miniatura? Comparemos.

&&SRC:http://konachan.net/data/preview/24/07/24072ef67b188f0aca26ea61f8bdaf7d.jpg

&&SRC:http://konachan.net/data/preview/61/9a/619ab14b8b74cb9df43f6a7603e643b4.jpg

&&SRC:http://konachan.net/data/preview/a6/43/a643ff49a2f31a1de43877090e178259.jpg


Veo que sí, noto que hay un patrón en la ruta de las imágenes, además de que todas son JPG. Como el sitio es el que crea las miniaturas, puedo pensar que todas las miniaturas están en ese formato. ¿O se lo quito, mejor? Lo voy a dejar sin la parte final, para más facilidad, usando el comodín: * (asterisco), que significa cualquier conjunto de caracteres.

&&SRC:http://konachan.net/data/preview/*


9) Entonces, me quedo con el atributo WIDTH y con el atributo SRC alterado (como vimos en el punto anterior). Y esto lo uso para todas las miniaturas. La idea es que este código pueda servir para usarse en otras partes de la galeria.

Me quedan así las lineas 4, 7 y 10:

TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*


10) Por otro lado, las líneas que siguen, las de las imagenes ampliadas, noto que presentan más dificultades. En la linea 5, se puede leer lo siguiente:

TAG
POS=1
TYPE=IMG
ATTR=
WIDTH:1500
&&HEIGHT:844
&&SRC:http://konachan.net/sample/24072ef67b188f0aca26ea61f8bdaf7d/Konachan.com%20-%20204166%20sample.jpg
&&LARGE_WIDTH:1920
&&LARGE_HEIGHT:1080
&&ID:image
&&CLASS:image
&&ALT:brown_hair<SP>huke<SP>long_hair<SP>makise_kurisu<SP>steins;gate<SP>tie<SP>white


Vamos a ver las otras imágenes ampliadas, línea 8:

TAG
POS=1 
TYPE=IMG 
ATTR=
WIDTH:1500
&&HEIGHT:1000
&&SRC:http://konachan.net/sample/619ab14b8b74cb9df43f6a7603e643b4/Konachan.com%20-%20202180%20sample.jpg
&&LARGE_WIDTH:2000
&&LARGE_HEIGHT:1333
&&ID:image
&&CLASS:image
&&ALT:brown_hair<SP>junp<SP>long_hair<SP>makise_kurisu<SP>pantyhose<SP>phone<SP>purple_eyes<SP>shorts<SP>steins;gate<SP>tie<SP>train


Línea 11:

TAG
POS=1
TYPE=IMG
ATTR=
WIDTH:1500
&&HEIGHT:844
&&SRC:http://konachan.net/sample/a643ff49a2f31a1de43877090e178259/Konachan.com%20-%20195724%20sample.jpg
&&LARGE_WIDTH:1920
&&LARGE_HEIGHT:1080
&&ID:image
&&CLASS:image
&&ALT:black_hair<SP>blue_eyes<SP>hat<SP>makise_kurisu<SP>okabe_rintarou<SP>shiina_mayuri<SP>steins;gate


En principio, podríamos seleccionar por clase y por identificador (CLASS, ID), que son iguales. El tamaño de las imágenes puede variar, así que no lo tenemos en cuenta. Y el atributo SRC nuevamente se parece, aunque en este caso sé que es así porque la imagen es demasiado grande y nos da una versión grande pero más pequeña que la original. Ahora SRC coincide en las tres, pero eso puede no pasar si alguna imagen no llega a ser tan grande para hacerle un sample (así llaman a la versión grande pero más pequeña que la original).

Me la voy a jugar con la clase y la id, y veamos qué pasa:

TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image


Puede fallar o ser correcto, pero vamos a probarlo de esa forma.

11) Le agrego el comando para extraer el link de la imagen:

TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF

12) Y copiamos y pegamos esa linea para todas las imagenes ampliadas: 5, 8 y 11. Quiero decir que las reemplacemos por el código final, que está arriba.

13) Lo que va a pasar con esto es que me va a salir una ventana, con el link de la imagen. Solamente hay que copiar cada enlace a un archivo de texto y luego le damos a aceptar. Cuando termine la macro, vamos a comprobar adónde nos llevan esos enlaces.

14) Me olvidaba: a las imágenes en miniatura, no se olviden de cambiarles el número de posición (POS), de manera que queden la segunda con el número 2 y la tercera con el número 3. Para que no se pierdan, ahí va otra copia de cómo va quedando la macro:

VERSION BUILD=XXXXXXX RECORDER=FX
TAB T=1
URL GOTO=http://konachan.net/post?tags=makise_kurisu
TAG POS=1 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*
TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF
BACK
TAG POS=2 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*
TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF
BACK
TAG POS=3 TYPE=IMG ATTR=WIDTH:150&&SRC:http://konachan.net/data/preview/*
TAG POS=1 TYPE=IMG ATTR=ID:image&&CLASS:image EXTRACT=HREF
BACK


15) Lo vamos a ejecutar en una pestaña aparte. Ya aviso que falta algo todavía, pero comprobemos antes que nada que las imágenes que se extraen son las correctas, de la forma que se explica en el punto 13.

16) Comprobé que las imagenes de los enlaces coinciden con las tres primeras miniaturas:

http://konachan.net/sample/24072ef67b188f0aca26ea61f8bdaf7d/Konachan.com%20-%20204166%20sample.jpg

http://konachan.net/sample/619ab14b8b74cb9df43f6a7603e643b4/Konachan.com%20-%20202180%20sample.jpg

http://konachan.net/sample/a643ff49a2f31a1de43877090e178259/Konachan.com%20-%20195724%20sample.jpg


17) Bien, llegó el momento de ponernos serios. Te darás cuenta de que no podemos estar cerrando ventanitas si queremos que sea automático. Es por eso que vamos a indicarle al programa que no nos muestre el dato extraido con la ventana. Vamos a encontrar otra forma de conseguirlo. Por ahora, lo que interesa es guardar cada dato en una variable distinta.

18) Antes de continuar, haz una copia de la macro y trabajaremos sobre esa copia. Esto es necesario hacerlo sí o sí. Guardala con el nombre que te guste, por ejemplo, extraer_imagen.iim.

19) Agregamos esto:

SET !EXTRACT_TEST_POPUP NO


Esa línea hace que la ventana no se abra, pero tiene que estar antes de las extracciones. Yo la ubiqué en la línea tres, pasando la línea tres hacia abajo, pulsando la tecla ENTER. A continuación, guardamos.

Si no entendiste cómo, lo verás en la siguiente captura de pantalla.

20) Entonces, ¿cómo se declara una variable? Hay que explicar que iMacros ya trae algunas variables especiales, de !VAR0 a !VAR9.

Con el comando SET, se asigna un valor a la variable:

SET !VAR0 "algo"


Con el comando ADD, se añade un valor al que ya tenía antes:

ADD !VAR0 " y algo más"


El valor final es "algo y algo más", porque usamos ADD. Pero si hubiésemos usado SET en el segundo caso, el valor final sería " y algo más". O sea que SET reemplaza todo lo que contenga por el valor indicado, mientras que ADD lo añade después. Para asignar un valor inicial, usamos SET.

Además de esas variables, nosotros podemos declarar las propias:

SET MIVARIABLE "algo"


Note que el nombre de la variable no lleva el signo de exclamación al principio. Eso es porque no es una variable especial.

21) Ahora, la pregunta sería cómo obtener el dato extraído. La variable en la cual se guardan los datos extraidos se llama !EXTRACT (es otra variable especial).

Lo siguiente está mal:

SET MIVARIABLE !EXTRACT


La forma correcta es ésta:

SET MIVARIABLE {{!EXTRACT}}


Ése es el sistema que usa iMacros para referirse al contenido de una variable, encierra el nombre de la variable entre llaves dobles. Y así pasaría a tener el contenido extraído.

22) Vamos a guardar cada imagen en una variable diferente, llamadas IMG1, IMG2, IMG3. Esto se ubicaría después de las líneas que extraen la dirección de la imagen grande (antes de BACK).

23) ¿Recuerdas que dije que guardemos todo en una macro aparte? Ahora, tenemos que grabar otra cosa. Para ver el resultado de nuestros esfuerzos, vamos a lograr que deje el resultado final en este sitio:

http://freetexthost.com/


24) Abrimos ese sitio en una pestaña nueva, le damos a Grabar (una nueva macro, que se grabará en #Current, como siempre). Y escribimos sobre el área de texto una letra al azar varias veces (eso lo borraremos, así que lo mejor es que escribas algo que puedas distinguir después en el código).

Si observas la imagen, verás que lo que escribí está al final, donde dice CONTENT=fffff.

25) Vamos a copiar las líneas 3 y 4 de la última macro grabada, #Current.iim, y las vamos a pegar al final de la macro que teníamos antes, llamada extraer_imagen.iim, dejando unas líneas.

26) Ahora, justo antes de esas líneas, vamos poner lo siguiente:

SET IMAGENES "{{IMG1}}<BR>{{IMG2}}<BR>{{IMG3}}"


Note las comillas y los <BR> (saltos de linea). Lo que estamos haciendo con esto es guardar el contenido de las tres variables, IMG1, IMG2 y IMG3 (o sea, los enlaces de las imagenes), en otra variable nueva, llamada IMAGENES, separando esos enlaces con saltos de línea.

Y esta variable la vamos a mostrar al final, como contenido del cuadro de texto (remplazando la letra repetida, en mi caso fffff).

27) Las líneas finales de nuestra macro quedarían así:

SET IMAGENES "{{IMG1}}<BR>{{IMG2}}<BR>{{IMG3}}"
URL GOTO=http://freetexthost.com/
TAG POS=1 TYPE=TEXTAREA FORM=ID:form1 ATTR=ROWS:7&&COLS:50&&ID:text&&NAME:text CONTENT={{IMAGENES}}

Vuelvo a repetir que para referirse al contenido de las variables debe encerrarse el nombre de la variable entre llaves dobles.

28) Aviso que falta una cosa todavía, pero quiero que lo vean, por eso lo dejé así. Ejecuten la macro en una pestaña aparte para que vean lo que pasa. Va a ocurrir un error.

29) ¿Cómo puede ser? ¡Tres veces la misma imagen!

No te preocupes, Ahora te muestro cómo solucionarlo y te lo explico.

Cada vez que extraemos algo, el dato se almacena en la variable !EXTRACT. Cuando iMacros encuentra que la variable !EXTRACT está llena, no guarda el dato (aunque sí lo podemos ver en la ventana, no lo almacena). Esto nos lleva a tener que vaciar !EXTRACT después de cada extracción o antes de cada una, si queremos usarla nuevamente.

Justo después de guardar el contenido de la variable !EXTRACT en cada variable (IMG1, IMG2, IMG3), se debe "vaciar" la variable !EXTRACT con las siguientes líneas.

SET !EXTRACT NULL

30) Y ya está. ¡Guardemos los cambios y veamos lo que sale!

31) Bien, funciona perfectamente. Si quieren que quede perfecto, pueden modificar la linea 21, agregando dos saltos de línea <BR><BR> en vez de uno <BR>. Y con eso, ya terminamos.


Si fui demasiado rápido, no se preocupen porque voy a explicar cada cosa por separado en las siguientes clases. Pueden volver a leer esta clase, después de estudiar aquellas.