Chrome 콘솔에서 간편한 크롤링

PhantomJS 는 매우 편리합니다만, 조금 사용하고 싶을 때에 스크립트 파일을 준비하는 것은 약간 귀찮습니다. 대화 모드( REPL )도 준비되어 있습니다만, 대화적으로 사용하는 것만이라면 Chrome이 사용하기 쉬운 장면이 많습니다.

이번의 상정 씬은, 「GitHub로 Star 해 준 사람의 일람을 갖고 싶다」라고 하는 케이스. 가끔 Issue로 전원에게 연락하고 싶은 것이 있군요. ↓ 이런 녀석.

@user1, @user2, @user3, ...

GitHub라고 JSON을 반환하는 API가 제공됩니다. 그래서 그것을 사용합니다.

콘솔 열기

새 탭을 열고 about:blank로 이동합니다. 확실한 상태로 하는 것이 포인트입니다.

jQuery를 포함

PhantomJS를 사용하는 경우도 그렇습니다만, 원소의 JavaScript라면 귀찮기 때문에, jQuery를 넣습니다. 다음 두 줄을 실행하면 OK.

> (script = document.createElement('script')).src = 'http://code.jquery.com/jquery-latest.min.js'
> document.getElementsByTagName('head')[0].appendChild(script)

API에서 데이터 검색

키가 필요한 API의 경우는 궁리가 필요합니다만, 공개의 것이라면 다음의 3행으로 OK. JSON 데이터가 들어갑니다.

> result = {}
> url = 'https://api.github.com/repos/cognitom/symbols/stargazers'
> $.getJSON(url, function(data){ result = data })

데이터 처리

우선은 취득할 수 있었는지 확인.

> result

배열이나 객체가 표시되면 OK. 계속해서 필요한 문자열로 성형합니다. 정규 표현식을 사용할 때까지 없었습니다!

> result.map(function(x){ return '@' + x.login }).join(', ')

무사, 처음과 같은 @user1, @user2, @user3,... 라는 문자열을 얻을 수 있었습니다. 실행 결과의 스크린 샷은 다음과 같습니다.

마지막으로

위의 사례는 API가 준비되어 있기 때문에 "크롤링"이라고 할 정도의 것은 아니지만, HTML 페이지에서 취득하는 경우에도 콘솔을 사용할 수 있습니다. "about:blank"에 가는 대신 대상 페이지를 열고, jQuery가 도입이 끝나면 그것을, 없으면 이 페이지의 설명과 같이 추가해, 나머지는 DOM을 참조해 데이터를 취득하면 OK. 콘솔에서는 원 라이너가 사용하기 쉽기 때문에 map 함수가 활약하네요.