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

수업소개

듣는 것에 어려움이 있는 분들을 위해서 유튜브 동영상에 자막을 입히는 작업을 시작했습니다. 하지만 영상의 수가 많기 때문에 혼자서 하기에는 어려움이 많았습니다. 그래서 참여자를 모집했습니다. 참여자들이 질서정연하게 작업을 수행하기 위해서 구글 스프레드쉬트에 작업 진행목록을 만들어야 했는데 쉽지 않은 작업이었습니다. 그래서 목록을 프로그래밍적으로 생성하는 간단한 프로그램을 만들어봤습니다. 

수업효과

• Youtube API의 사용법을 이용하는 방법을 파악할 수 있습니다.
• 자바스크립트를 이용해서 문제를 해결하는 방법을 체험할 수 있습니다. 
• 구글 스프레드쉬트와 같은 이미 존재하는 도구를 효율적으로 사용하기 위해서 코딩을 하는 모습을 볼 수 있습니다. 

참고

• 생활코딩 한국어 자막에 참여하는 방법
• 생활코딩 한국어 자막 작업 진행 상황판

수업

 

 

 

예제

var apiKey ='API KEY를 입력해주세요';
var playlistId = 'PLuHgQVnccGMBttjsCipjhWgf6urfjTn14';
var url = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=' + playlistId + '&key=' + apiKey + '&maxResults=50';

function call(nextToken) {
  // 지금부터 XMLHttpRequest와 관련된 기능을 사용하겠습니다.
  var req = new XMLHttpRequest();
  // url에 해당되는 주소로 접속하고 싶어요. 
  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 = 'http://www.youtube.com/timedtext_video?ref=share&v=' + vid;
          console.log(items[i].snippet.title + '\t' + vurl);
        }
        if (result.nextPageToken) {
          call(result.nextPageToken);
        }
      } else {
        alert("Error loading page\n");
      }
    }
  };
  // 접속을 시작합니다.
  req.send(null);
}
call();