Web-scraping with Chrome extension

Crawling, Scraping 비슷한 뜻이며 내가 원하는 데이터를 웹에서 수집함을 의미한다.

Design Seeds 라는 웹사이트를 연구의 목적으로 크롤링을 했다.

이 웹사이트는 색감에서 영감을 받아, 아름다운 이미지에서 주요 색상을 color palette로 나타내준다.

실제 해결한 방법은 해결 이란 아래 헤더를 참고

이 웹사이트를 크롤링하기 위해 가장 먼저 생각한 방법은 이 웹사이트의 Instagram 계정 크롤링이다.

허나 이 방법은 Instagram API를 사용하여야했다. 그래서 Instagram Developer에 앱을 등록하고 client-id, client-secret 등을 통해서 access-token 까지 얻었지만, 방법이 복잡하고 사용했던 python code가 유지보수가 안되어있다. 이 blog post를 통해서 access-token을 얻었다.
무엇보다도 내가 직접 웹사이트를 크롤링하는 것이 아니어서 포기했다.

그 다음은 웹사이트의 pinterest를 크롤링하는 것인데, 이 방법은 Chrome의 Extention에서 PinDown이라는 앱을 사용했다. 그리고 design seeds, palette 검색의로 나오는 핀들을 다운받아봤는데 속도도 빠르고 좋은데 무료버전은 갯수 제한이 있다. 유료 버전 결제를 하려했는데 리뷰를 보니 버그가 있는 것 같아서 접었다.

해결

다음으로는 크롬 extention에서 Web scraper를 사용해서 웹사이트를 직접 크롤링해 보았다. 생각보다 사용법을 자세히 설명해놓았고 이해가 쉽다. Youtube : Web Scraper Intro. pagination 두개만 참고해서 웹사이트 크롤링에 성공하였다.^[1]
생각보다 웹사이트 크롤링이 매우 쉬워서 놀랐다. 나는 Python script로 일일이 요소검사해서 crawling해야 할줄 알았는데 편리한 chrome extention으로 수고를 아주 쉽게 덜었다.

또한 Chrome을 사용하므로 어떤 OS를 사용하던 상관없다.

{"startUrl":"https://www.design-seeds.com/blog/","selectors":[{"parentSelectors":["_root","nextpage"],"type":"SelectorLink","multiple":true,"id":"nextpage","selector":"div.nav-previous a","delay":""},{"parentSelectors":["_root","nextpage"],"type":"SelectorElement","multiple":true,"id":"element","selector":"article.parker-posts","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"collection_name","selector":"h4.entry-meta a","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorImage","multiple":false,"id":"img_url","selector":"img.attachment-full","downloadImage":false,"delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"title","selector":"h1.entry-title a","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"date","selector":"time.entry-date","regex":"","delay":""},{"parentSelectors":["element"],"type":"SelectorText","multiple":false,"id":"owner","selector":"p a","regex":"","delay":""}],"_id":"designseeds"}

위 스크립트를 직접 코딩하는 방식이 아니고 graph를 만들어서 필요한 요소를 클릭하고 node끼리 연결만 해주면 되니까 매우 쉽다. 생각보다 크롤링이 쉬워지면서 연구에 필요한 user data를 쉽게 취득할 방법을 알아내서 계속 도움이 많이 될 것 같다.

결과를 csv로 다운링크를 걸어주므로 다운받으면 끝.
그리고 간단한 python, shell script로 image들을 다 받을 수 있었다.