생활코딩 'Youtube의 영상 목록을 스프레드쉬트에 넣기' 따라하기 2편

Friday. February 03, 2017

Summary:

업로드된 유투브 동영상 목록을 엑셀로 자동으로 옮기는 작업입니다.

Youtube의 영상 목록을 스프레드쉬트에 넣기

(강의 링크는 여기에!)

지난 시간 요약

STEP 1 : API에서 얻고자 하는 정보 지정하기
STEP 2 : YOUTUBE API 얻기

STEP 3 : 정보 스크래핑이 되는지 실험해보기

1. 다시 YouTube Data API로 접속한다.

2. 참조 > PlaylistItems > list > 직접 사용해 보세요! 를 찾는다.

part에는 ‘snippet’을 입력한다.
playlistId에 넣을 playlist id값은 PLuQtmaviIuYqxtcFGjtECU_vHQSDRStIj라는 것을 직감적으로 알 수 있다. (정보를 가져올 유투브 재생목록의 주소가 아래와 같기 때문.)

https://www.youtube.com/playlist?list=PLuQtmaviIuYqxtcFGjtECU_vHQSDRStIj

part, playlistId를 입력하고 Execute without OAuth를 클릭한다.

3. Execute 결과 확인

Execute without OAuth을 클릭하면 하단에 Request 코드가 생기고 그 코드로 요청했을 때(Request) 어떤 정보를 얻을 수 있는지(Response)를 보여준다.

GET https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=PLuQtmaviIuYqxtcFGjtECU_vHQSDRStIj&key={YOUR_API_KEY}

STEP 4 : 받아둔 API 키 연동시키기

STEP 2에서 api를 발급받았다. 구글 개발자 콘솔에서 자신의 api를 복사하고 STEP 3의 GET ~ {YOUR_API_KEY} 부분에 붙여넣는다. 그 다음 전체 주소를 주소창이 입력하여 엔터를 누른다.

아까 Response에서 미리 봤던 결과와 같은 코드가 로드됐다. 이로써 원하는 정보를 가져올 수 있다는 것이 확인됐다. 이제 해야할 일은 축 늘어져있는 코드를 엑셀로 깔끔하게 불러들이기 위해 코드를 가공하는 것이다.

STEP 5: 코드 짜기

STEP 4의 창에서 마우스 우클릭 > 검사 > Console 로 이동한다. 여기에서 코드를 짤 거다.

콘솔 창이기 때문에 엔터를 누를 때마다 명령이 실행되는데 이를 원하지 않으면 ‘shift+enter‘를 누르면 된다.
XMLHttpRequest에서 비동기 사용 의 데이터 요청 코드를 복붙한다. 이 객체를 이용하면 페이지를 전환하지 않고 브라우저한테 몰래 이 주소로 접속해서 정보를 가져오라고 시키게 된다.

코드는 아래와 같다.

// 주소를 변수로 지정
var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=PLuQtmaviIuYqxtcFGjtECU_vHQSDRStIj&key=AIzaSyBJ0MaYkFDktW9Hbr-vVvtptbhgZlSXKTw'
// (XMLHttpRequest 객체 이용) 페이지를 전환하지 않고 브라우저한테 몰래 이 주소로 접속해서 정보를 가져오라고 시킴
var req = new XMLHttpRequest();
// 변수로 지정한 url 주소로 접속하라고 요청
req.open('GET', url, true);
// 접속이 끝나고 뭘 해야되는지 정의
req.onreadystatechange = function (aEvt) {
// 접속이 끝나면
  if (req.readyState == 4) {
// 접속이 성공했다면
     if(req.status == 200) {
// 이 코드 실행
      alert(req.responseText);
// 접속이 실패하면 이 코드 실행
     } else {
      alert("Error loading page\n");
     }
  }
};
// 접속 시작
req.send(null);

코드를 모두 입력하고 엔터를 치면 STEP 4에서 봤던 것과 같은 코드가 경고창으로 뜬다. 즉 페이지 전환 없이 웹브라우저가 url에 해당하는 주소로 접속하고 데이터(req.responseText)를 가져와서 경고창으로 보여주고 있다.

STEP 6 : 내가 필요한 정보만 뽑아보기

이제 영상제목과 링크를 긁어오는 제대로 된 코드를 짜보자. 코드에 대한 자세한 내용은 여기에 주석으로 정리했다.

var apiKey = 'AIzaSyBJ0MaYkFDktW9Hbr-vVvtptbhgZlSXKTw';
var playlistId = 'PLuQtmaviIuYqxtcFGjtECU_vHQSDRStIj';
var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId='+playlistId+'&key='+apiKey+'&maxResults=50';

function call(nextToken) {
var req = new XMLHttpRequest();
var pageToken = '';
if(nextToken) {
  pageToken = '&pageToken='+nextToken;
}
req.open('GET', url+pageToken, true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
    if(req.status == 200) {
		  var result = JSON.parse(req.responseText);
		  var items = result.items;
      for (var i=0; i<items.length; i++){
        var vid = items[i].snippet.resourceId.videoId;
        var vurl = 'https://www.youtube.com/watch?v='+vid+'&t=2s&index=1&list=PLuQtmaviIuYqxtcFGjtECU_vHQSDRStIj';
        console.log(items[i].snippet.title+'\t'+vurl);
      }
      if (result.nextPageToken) {
        call(result.nextPageToken);
      }
    } else {
      alert("Error loading page\n");
    }
  }
};
req.send(null);
}
call();

개발자도구 콘솔에서 코드를 모두 입력하고 엔터를 치면 영상제목과 링크가 출력된다. 이를 모두 복사해서 엑셀에 붙여넣기하면 깔끔하게 제목과 링크가 정리되는 것을 확인할 수 있다. 여기에 더 추가하고 싶은 속성이 있다면 코드에 변수를 추가하면 된다.

개발자도구 콘솔에서 코드를 입력했을 때 결과 시행 결과를 엑셀로 옮김

Hyeyeon

A Blog about E-Commerce and Product Management