PhantomJS로 Blogger댓글 조회 프로그램 작성하기

blogger에 대한 이미지 검색결과

Jpub의 <자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉>이란 책의 소스코드를 참고했습니다.

책을 읽던 중 티스토리 관리 페이지에 로그인해서 새 댓글을 확인하는 프로그램을 만드는 부분을 보게 되었습니다.
그러나 저는 티스토리 초대장이 없는 관계로 책의 소스를 응용해서 Blogger의 새 댓글을 확인하는 프로그램을 만들어 보았습니다.

우선 PhantomJS와 CasperJs를 컴퓨터에 설치해줍니다.
npm install -g phantomjs
npm install -g casperjs

 이 프로그램을 만들 때 가장 먼저 해야하는 작업이 Blogger에 로그인하는 것입니다.
구글 계정으로 로그인되어있지 않은 상태로 다음 URL로 들어가게 되면 로그인 창이 뜨게 됩니다.
https://accounts.google.com/ServiceLogin/identifier?hl=ko&passive=true&service=blogger&ltmpl=blogger&continue=https%3A%2F%2Fwww.blogger.com%2Fhome&flowName=GlifWebSignIn&flowEntry=AddSession





일단 우리의 목표는 저 입력창에 이메일을 입력하는 것입니다.
크롬 창에서 F12를 눌러 개발자 모드를 켠 후, Ctrl+Shift+C를 누르고 입력창을 가리키면 입력창의 CSS 선택자 속성이 뜨게 됩니다.
조사해 보니 이메일 input 태그의 name 속성은 identifierId 이고 form 태그의 선택자 속성은 form.RFjuSb.bxPAYd.k6Zj8d 입니다.






지금까지의 코드를 정리해 보겠습니다.
var casper = require('casper').create({ verbose: true, loglevel: 'debug'});
var urlLogin = "구글 로그인 주소";
var id="Your Email";
casper.start();
casper.userAgent('User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Whale/0.9.34.10 Safari/537.36');
casper.open(urlLogin);
casper.then(function () {
    casper.fill(".RFjuSb.bxPAYd.k6Zj8d",{
        identifier: id   //name 속성이 identifier인 input태그에 id변수 값 채우기
    }, false);
});

 이제 할 일은 '다음' 버튼을 누르는 일입니다. CaseperJs는 마우스 클릭 이벤트를 발생시키는 기능을 지원합니다.
'다음' 버튼의 선택자 속성은 div.ZFr60d.CeoRYc 이므로 다음과 같은 코드를 짤 수 있습니다.
casper.then(function () {
    var path = "div.ZFr60d.CeoRYc";
    if (casper.exists(path)) {  //객체가 존재한다면
        casper.mouseEvent('click', path);  //누르기
    }
    casper.wait(3600); //페이지가 로딩될 때까지 기다리기
}); 

 여기서 3600의 딜레이를 주는 이유는 페이지가 정상적으로 로딩될때까지의 시간을 주는 것입니다.
같은 방식으로 패스워드 input 태그의 name 속성을 찾은 후 지금까지의 과정을 반복하면 다음과 같은 코드를 짤 수 있습니다.
var password = "Your_password";
casper.then(function () {
    casper.fill(".RFjuSb.bxPAYd.k6Zj8d", {
        password: password
    }, false);
});

 casper.then(function () {
    var path = "div.ZFr60d.CeoRYc";
    if (casper.exists(path)) {
        casper.mouseEvent('click', path);
    }
    casper.wait(3600);
});

이제 구글 계정으로 로그인이 끝났습니다. 남은 일은 Blogger 관리 페이지의 댓글 세션으로 접속한 후 가장 최근에 달린 댓글을 읽는 일입니다.
다음과 같은 코드로 댓글 목록 페이지를 엽니다.
casper.then(function () {
    casper.open('https://www.blogger.com/blogger.g?blogID=' + Your_Blog_Id + '#publishedcomments');
    casper.wait(3600);
});

이전과 동일한 방법으로 댓글 목록의 CSS선택자를 분석한 후, 댓글을 콘솔창에 출력합니다.
casper.then(function () {
    var getLatestComment = function () {
        var a = document.querySelector("div.OYKEW4D-Q-d").innerText;
        var b = document.querySelector('div.OYKEW4D-Q-d > a').innerText;
        return a.split(b)[0].replace(/\s*$/, "");
    }
    console.log("새 코멘트: " + this.evaluate(getLatestComment));
});
자바스크립트의 evaluate()메소드는 웹 페이지 내에서 임의의 자바스크립트 코드를 수행하는 메소드입니다.

실행을 하면 결과는 다음과 같습니다.




댓글

댓글 쓰기

이 블로그의 인기 게시물

PhantomJs와 CasperJs

이미지
웹사이트를 돌아다니며 정보를 긁어오는 프로그램을 작성할 때는 여러 가지 고려할 요소가많습니다. 로그인을 한 후의 데이터를 얻거나 봇이 접근하기 어렵게 짜여져 있거나 웹페이지가 렌더링된 다음의 데이터를 얻어야 하는 경우들이 그 예이죠. 그런 상황들을 쉽게 컨트롤 할 수 있게 하는 몇 가지 도구들이 있는데 그것들이 바로 PhantomJs와 CasperJs입니다. PhantomJs는 화면이 없는 상태에서 커멘드 라인드로 사용하는 브라우저이고, CasperJs는 PhantomJs를 쉽게 쓸 수 있게 하는 라이브러리입니다. PhantomJs는 렌더링 엔진으로 WebKit엔진을 사용하는데, 이 말은 애플의 사파리 브라우저와 거의 동일한 환경이라는 뜻입니다. PhantomJs에서 할 수 있는 일에는 여러 가지가 있는데, 특정 URL로 접속했을 때의 스크린샷을 찍을 수도 있고 화면의 특정 엘리먼트를 마우스 클릭하는 이벤트를 실행할 수도 있습니다. PhantomJs의 공식 웹사이트는 다음과 같습니다. http://phantomjs.org/ CasperJs는 PhantomJs를 사용할 때 보다 쉽게 사용할 수 있도록 하는 라이브러리입니다. CasperJs의 공식 웹사이트는 다음과 같습니다. http://casperjs.org/ Node.js가 컴퓨터에 설치되어 있다고 가정하고 cmd를 켜서 다음의 명령을 입력합니다. npm install -g phantomjs npm install -g casperjs 이제 casperJs를 이용해서 간단한 화면 캡쳐 프로그램을 작성해 보겠습니다. var casper = require('casper').create();  //casper 객체를 생성합니다. casper.start(); casper.open('https://sidea510.blogspot.kr/');  //페이지를 엽니다. casper.then(function(){     casper.capture('sc...
자세한 내용 보기

CasperJs로 Pixabay 크롤러 만들기

이미지
  Pixabay, UnSplash.com, Flicker... 여러분들 모두 발표자료를 준비하면서 고퀄리티의 이미지를 구하기 위해 한 번쯤은 저 사이트에 들어가보셨을 겁니다. 여러분들은 저 사이트에서 다운받은 이미지들을 어떻게 관리하시나요? 혹시 한번 사용한 후 나중에 다시 그 이미지를 구하러 컴퓨터 이곳저곳을 헤집거나, 다시 다운받지 않으신가요? 혹은 여러 이미지들을 일일이 손으로 누르면서 다운받고는, 발표자료랑 어울리지 않는다는 느낌이 들어서 다시 다른 이미지를 다운받지 않으신가요?  저 같은 경우에는 그러한 일을 많이 겪었습니다. 그러던 어느 날, 재밌는 생각이 들었습니다.  '고양이'라는 검색어를 치면 나오는 이미지들을 컴퓨터에 체계적으로 다운받아서 정리해주는 프로그램을 만들면 어떨까? 그러면 처음 한 번 다운받아놓고 나중에는 골라서 쓰면 될텐데   라는 생각이죠. 생각이 떠오른 순간 Node.js로 크롤러를 만들어서 시험을 해봤습니다. 일이 거기서 끝났으면 정말 편했었을텐데요. 아쉽게도 Pixabay는 일반적인 방식으로 크롤링이 되는 사이트는 아니더군요. 그러나 여기서 포기하기에는 아직 멀었습니다. 우리에게는 웹 크롤링을 편리하게 해주는 CasperJs 라는 강력한 툴이 있기 때문이죠. *여기서 잠깐! CasperJs나 CSS 선택자 속성에 대해서 잘 모르시는 분들은 이전 포스팅인 PhantomJs로 Blogger 댓글 조회 프로그램 작성하기 나 PhantomJS와 CasperJS 를 읽고 와주세요.  먼저 크롤링이 가능한지 확인하기 위해서 저번 시간에 짰던 스크린샷을 찍는 코드를 이용해서 테스트를 해봤습니다.   네, 결과는 완벽했습니다. 크롤링이 가능했죠. 그럼 이제부터 본격적으로 코드를 짜기 시작했습니다. 가장 처음에 해야 할 일은 바로 이미지 하나하나의 CSS 선택자 속성을 찾는 것 입니다. 지난 시간에 썼던 방식을 그대로 사용하겠습니다. ...
자세한 내용 보기