고양이짤 수집하기160717

스크래핑이란 ?• 웹 사이트에서 정보를 추출하는 행위• 검색엔진이 이를 이용해서 사용자에게 정보를 보여줌

웹 동작 방식

Server

Client

Request- url- header- data

Response- HTML- Resource(img, css, js)

HTML 렌더링

목표

수집

수집

방법

• Python 으로 scraper 프로그램 작성• 동작 순서

1. Google 검색창에 검색어 입력2. Image Result 페이지의 HTML 문서를 Download3. DOM 구조 분석4. Scrapy 로 img 의 href 를 가져오고 , file system 을 이용해서

다운로드

손으로 해보기

• 검색

손으로 해보기

• 결과 url 분석

손으로 해보기

• https://www.google.co.kr/?gws_rd=ssl#q=cat• 위에서 q 값만 바꿔서 request 해주면 그에 맞는 response

를 받음

손으로 해보기

• 이제 cat 검색 결과에 따른 이미지 페이지의 url 을 보자

손으로 해보기

• https://www.google.co.kr/search?q=cat&biw=1920&bih=947&source=lnms&tbm=isch&sa=X&ved=0ahUKEwip_KeozerNAhWKnpQKHaIpAU4Q_AUIBigB• 이미지 페이지에서도 똑같이 q 값에 따라 결과물이 나온다 .

손으로 해보기

• 이제 이미지 페이지의 DOM 구조를 파악해보자• 많은 브라우저가 개발자 도구를 지원한다 .• 나는 여기서 Chrome 의 개발자 도구를 이용해서 파악하였다 .

손으로 해보기1.

클릭

2. 클릭

3. <img> 태그의 src 확인

손으로 해보기

• DOM 구조<div class=“rg_di rg_el ivg-I”>

<a class=“rg_l” href=“…”><img class=“rg_i” src=“…” name=“…”><div class=“_aOd rg_ilm>

<div class=“rg_ilmbg><span class=“rg_ilmn>

손으로 해보기

• <a>• <a

jsaction="fire.ivg_o;mouseover:str.hmov;mouseout:str.hmou" class="rg_l" style="width: 222px; height: 179px; left: 0px;" href="/imgres?imgurl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FtntOCGkgt98%2Fmaxresdefau…biw=1920&amp;ved=0ahUKEwjCzN-ezurNAhVBp5QKHRyE-CrkQMwgfKAMwAw&amp;iact=mrc&amp;uact=8" wrc_done="true">

• A 태그의 class 는 rg_l 이고 href 값을 가지고 있다 .

손으로 해보기

• <img>• <img data-sz="f" name="sKYUQsX9cMoQ0M:" class="rg_i"

alt="cat 에 대한 이미지 검색결과 " jsaction="load:str.tbn" on-load="google.aft&amp;&amp;google.aft(this)" src="data:image/jpeg;base64,/9j…rF1JEAempDF1JEAZJJJYB//2Q==" style="width: 239px; height: 179px; margin-left: -17px; margin-right: 0px; margin-top: 0px;">

• img 엘리먼트의 class 는 rg_i 이고 src 값을 가지고 있다 .

• 여기까지 문제점• A 태그의 href 를 주소창에 입력하면 아무것도 나오지 않음• Img 태그의 src 를 주소창에 입력하면 상당히 작은 이미지만 보임

• 이렇게

• 고화질 이미지 저장을 위해서는 다른 방법이 필요

손으로 해보기

손으로 해보기

• 이미지 썸네일 (?) 을 클릭하면 더 큰 이미지를 볼 수 있음1.

클릭

손으로 해보기

• 큰 이미지의 url 를 분석하자 .• https://www.google.co.kr/search?

q=cat&biw=1920&bih=947&source=lnms&tbm=isch&sa=X&ved=0ahUKEwip_KeozerNAhWKnpQKHaIpAU4Q_AUIBigB#imgrc=sKYUQsX9cMoQ0M%3A

• 진한 부분까지는 구글의 이미지 페이지 url 과 동일하다 .• 청록색 부분이 새로운 부분이다 .• #imgrc : ID 이름인것 같다 .• sKYUQsX9cMoQ0M : <img> 태그의 name 값과 동일하다 .• %3A : 모르겠다 . 빼고 url 에 입력하면 다시 생김• 결론 :: #imgrc=“ 여기에 name 값 넣어주면 됨＂

손으로 해보기

• 동작 순서 재정리1. 검색어 입력 (ex: cat)2. 구글로 검색3. 결과 중에서 img 파일이 있는 페이지의 url 저장4. url#imgrc=name 으로 request5. 큰 이미지 페이지 response6. DOM 구조 분석7. Scrapy 로 img 의 src 를 가져오고 , file system 을 이용해서

다운로드

손으로 해보기1.

클릭

2. 클릭

3. <img> 태그의 src 값 확인

손으로 해보기

• DOM 구조<div class="irc_c">

<div class="irc_t"><div class="irc_pgb">

<div class="progress-bar-thumb"><div class="irc_mic">

<div class="irc_pb"><a class="irc_pbl">

<span class="irc_pbi"><div class="irc_mimg irc_hic">

<a class="irc_mil"><img class="irc_mi" src=" 여기에 img url 있음 ">

Path :: .irc_c .irc_t .irc_mic .irc_mimg .irc_mil .irc_mi

실전

• DOM 구조 파악을 했으니 python 으로 프로그램을 작성해보자 .• 귀찮으니 c9.io 에서 Django workspace 를 생성해서 여기다

작업• 사용 패키지 ( 없으면 설치할 것 )• Scrapy• BeautifulSoup• Requests• Random• Urllib

BeautifulSoup• HTML 이나 XML 파일에서 데이터를 추출하는 Python 언어용

라이브러리• HTML 이나 XML 파일을 개발자가 원하는 파서로 파싱해서 개발자가

언하는 결과를 뽑아낼 수 있도록 도와준다 .• 얘는 데이터에 특화• Scrapy 는 크롤링에 특화

HTML 문서 다운로드

• 일단 url 로 검색이 제대로 되는지 확인을 위해 HTML 문서를 저장해봄

이미지 name 추출

• img_name = sel.css(‘.rg_di rg_l rg_i::attr(name)’).extract()• Name 을 가져오지 못함

• Requests 로 긁어온 문서에는 name 값이 존재하지 않음

다시 확인다운받은 HTML

목표

아까와는 다른 DOM 구조

삽질 원인

• TED 는 DOM 구조를 숨기지 않음• 당연히 구글도 그럴거라 생각• 의심하지 않았기 때문에 시간 낭비를 하게됨

저장

• HTML 문서가 가지고 있는 DOM 구조• #ires > table > tbody > tr:nth-child(1) > td:nth-child(1) > a >

img <img src=“ 여기 값 추출” >

폴더에 저장

• 웹에서 파일을 다운로드 하는데 urllib 라는 모듈을 쓴다 .• urllib 가지고 2 가지 방법으로 다운로드 할 수 있다 .

1. urllib.urlretrieve(fileUrl, fileName)2. urllib.urlopen(fileUrl) 이걸 읽어다가 write 하면됨

• 여기서 1 번을 이용하기로 함

코드

결과

img폴더

*.py

열어본 이미지

결과

결과

결과

ㅜㅜ 야옹아 표정이 왜그러니

문제

• 구글에서는 원래 Search API 를 제공해 왔었으나 11 년도 부터는 지원 X• FYI "The Google Image Search API has been officially

deprecated as of May 26, 2011. It will continue to work as per our deprecation policy, but the number of re-quests you may make per day may be limited. We en-courage you to use the Custom Search API, which now supports image search." so don't use it for anything im-portant as it probably won't be around much longer. • Custom Search API 사용을 권함

???

Custom Search API

Custom Search API

Custom Search API

Bing 에 검색

• Search• “http://www.bing.com/images/search?q=“ + input + “&FORM=HDRSC2”

• 위 url 을 이용해서 HTML 긁어온 후 DOM 구조 분석• Script 에 따라서 DOM 구조가 바뀌기 때문에 크롤링하는 입장에서 긁은 후 분석

해야함

Bing.html다운받은 HTML

목표 고양이들

Bing.html1.

클릭

2. 클릭

3. <img> 태그의 href 값 확인

4. 엘리먼트 DOM 구조

Bing.html

row 당 4 개

row 7 개

Bing.html• DOM 구조

<div class=“content"><div class=“row">

<div class=“item"><a class=“thumb“ href=“ 이미지” >

<div class=“item"><div class=“item”><div class=“item”>

Path :: .content .row .item .thumb

…

코드

동작은 되는데 많이 느리다

• sudo pip install gevent• gevent.pool.map 을 이용해서 동시성 작업으로 시간 단축 !• 근데 안됨• gevent 문서봐도 잘 모르겠음

결과

img폴더

*.py

큰 이미지

결론

• 구글이나 네이버에서는 웹 페이지를 다운 받으면 DOM 구조가 바뀜• 내부적으로 script 코드가 원인인거 같음• 내가 웹 프로그래밍에 대해 아는게 1 도 없다는걸 느낌

웹 크롤링 이슈

• 웹 데이터 저작권• 사이트의 크롤링 정책

저작권

• 저작권법 허용 단순 링크 – 사이트 대표 주소를 링크 직접 링크 – 특정 게시물을 링크

• 저작권법 위반 프레임 링크 – 저작물의 일부를 홈페이지에 표시 임베드 링크 – 저작물 전체를 홈페이지에 표시

로봇 배제 표준

• url/robots.txt• 웹 사이트에 로봇이 접근하는 것을

방지하기 위한 규약

끝