
생활코딩 'Youtube의 영상 목록을 스프레드쉬트에 넣기' 따라하기 2편
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();
개발자도구 콘솔에서 코드를 모두 입력하고 엔터를 치면 영상제목과 링크가 출력된다. 이를 모두 복사해서 엑셀에 붙여넣기하면 깔끔하게 제목과 링크가 정리되는 것을 확인할 수 있다. 여기에 더 추가하고 싶은 속성이 있다면 코드에 변수를 추가하면 된다.