YouTubeの再生リストを取得してjsで出力するサンプル


YouTubeAPIを使用して、YouTubeの再生リストを取得し、再生リストに登録されている動画を順番に出力します。

APIキーが必要になりますので、下記リンクを参考に、APIキーを取得してください。
[YouTube API APIキーの取得方法](http://qiita.com/chieeeeno/items/ba0d2fb0a45db786746f)

##サンプルファイル
[デモ](http://chieeeeno.github.io/youtube_playlist_sample/sample1)
[デモファイルDL](https://github.com/chieeeeno/youtube_playlist_sample)

- youtube_playlist
    + sample1
	    - css　：CSSファイル
	    - img　：画像ファイル
	    + js　：jsファイル
		    - lib　：jsライブラリ（jQueryなど）
		    - [index.js](https://github.com/chieeeeno/youtube_playlist_sample/blob/master/sample1/js/index.js)
		    - [youtube_api_info.json](https://github.com/chieeeeno/youtube_playlist_sample/blob/master/sample1/js/youtube_api_info.json)
	    + [index.html](https://github.com/chieeeeno/youtube_playlist_sample/blob/master/sample1/index.html)




##解説
###DOM構築後の処理
jsファイル内にAPIキー等の情報を持たせたくなかった（ソースで丸見えなのを防ぎたい）ので、それらの情報は「youtube_api_info.json」に持たせるようにしました。

```javascript:index.js
$(function(){
	//API関連のjsonデータを取得
    getJsonData(YT_API_JSON_INFO_URL)
      .then(function(_jsonData){
      ytApiKey = _jsonData.apiKey;
      ytApiUrl = _jsonData.reqUrl;
      ytPlaylistId = _jsonData.listId;
		
      //コンテンツをDOMに追加
      addContent();
    });
  });
  
  
   /**
   * jsonのデータを取得する
   * @param {String} JSONデータのURL
   * @return {$.Deferred}
   */
  function getJsonData(_url){
    //console.log('getJsonData()開始：'+_url);
    var $dfd = $.Deferred();
    $.ajax({
      url:_url,
      dataType:'json',
      cache:false,
      timeout:15000
    })
      .done(function(_data){
      //console.log('json取得成功：'+_url);
      $dfd.resolve(_data);
    })
      .fail(function(_data){
      console.log('json取得error：'+_url);
      $dfd.reject(_data);
    })
      .always(function(_data){
      //console.log('getJsonData()終了：'+_url);
    });
    return $dfd.promise();
  }
  
```

1. DOM構築後に`getJsonData(url)`呼び出し、API関連の情報が記載されたJSONファイルを読み込みます。
2. 読み込み完了後はそれぞれの値を変数に格納し、
3. `addContent()`関数を呼び出してHTMLのDOMに情報を追加しています。

###addContent()関数内の処理
```javascript:index.js
  
  /**
   * 再生リストを取得して、コンテンツを追加する
   */
  function addContent(){
    loadingFlg = true;
    getPlayList()
      .then(function(_resData){
      nextPageToken = _resData.nextPageToken != undefined ? _resData.nextPageToken : '';
      totalResults = _resData.pageInfo.totalResults;
      totalPage = Math.ceil(totalResults / REQ_QTY);
      
      insertVideo(_resData);
      loadingFlg = false;
    });
  }
  
  
  /**
   * YouTubeの再生リストを取得する
   * @return {$.Deferred}
   */
  function getPlayList(){
    //console.log('getPlayList()開始：'+ytApiUrl);
    var $dfd = $.Deferred();

    $.ajax({
      type: 'get',
      url: ytApiUrl,
      dataType:'json',
      data: {
        part: 'snippet',
        playlistId : ytPlaylistId,	//再生リストのID
        maxResults : REQ_QTY,	//取得件数
        pageToken : nextPageToken,	//総件数が取得件数以上の時に続きのデータを取得するためのパラメータ
        key: ytApiKey		//APIキー
      },
      dataType: 'json',
      cache: false,
      timeout: 15000
    })
      .done(function(_data) {
      //console.log('再生リスト取得成功：' + ytApiUrl);
      $dfd.resolve(_data);
    })
      .fail(function(_data) {
      console.log('再生リスト取得error：' + ytApiUrl);
      $dfd.reject(_data);
    })
      .always(function(_data) {
      //console.log('getPlayList()終了：' + ytApiUrl);
    });

    return $dfd.promise();
  }


```
1. `loadingFlg`で現在APIリクエストデータのローディング中かどうかのフラグを立てます。これは後ほど説明するスクロールイベントの処理で使います。
2. `getPlayList()`関数内でYouTubeAPIを使って再生リストの情報を取得します。
上記のような内容のリクエストで下記のようなjsonデータが返ってきます。
3. 取得したjsonの値から`nextPageToken`と`totalResults`を取得して変数へセット。
4. `insertVideo()`関数で取得したjsonを解析して、DOMに追加しています。

```取得したjsonの値
{
  "kind": "youtube#playlistItemListResponse",
  "etag": "\"oqbvhYxBE6fAbRk6m7aLlHf5s1I/nYqIbgUq7tWbu539fSVHZI9z7hI\"",
  "nextPageToken": "CAMQAA",
  "pageInfo": {
    "totalResults": 20,
    "resultsPerPage": 3
  },
  "items": [
    {
      "kind": "youtube#playlistItem",
      "etag": "\"oqbvhYxBE6fAbRk6m7aLlHf5s1I/3ArqdiAXaxdE2rkMYioNa8Blzlw\"",
      "id": "PLQn23NEIwkU3eLnew2igtf4HRoXtnPKbw",
      "snippet": {
        "publishedAt": "2012-04-25T13:49:04.000Z",
        "channelId": "UCiIhyfVWGSJLHMqnZMJX2hA",
        "title": "猫　洗顔中　ネコ",
        "description": "気持ちよさそうですね。\r\nいろんな猫再生リスト\r\nhttp://www.youtube.com/playlist?list=PL0701DD1EA18F89C6&feature=view_all",
        "thumbnails": {
          "default": {
            "url": "https://i.ytimg.com/vi/Z3r8V-S2B38/default.jpg",
            "width": 120,
            "height": 90
          },
          "medium": {
            "url": "https://i.ytimg.com/vi/Z3r8V-S2B38/mqdefault.jpg",
            "width": 320,
            "height": 180
          },
          "high": {
            "url": "https://i.ytimg.com/vi/Z3r8V-S2B38/hqdefault.jpg",
            "width": 480,
            "height": 360
          },
          "standard": {
            "url": "https://i.ytimg.com/vi/Z3r8V-S2B38/sddefault.jpg",
            "width": 640,
            "height": 480
          }
        },
        "channelTitle": "Urara1966 ASMR",
        "playlistId": "PL0701DD1EA18F89C6",
        "position": 0,
        "resourceId": {
          "kind": "youtube#video",
          "videoId": "Z3r8V-S2B38"
        }
      }
    }
  ]
}
```
###無限スクロール処理

```javascript:index.js
$(function(){

    $(window).bind('scroll', function(e) {
      if(currentPage == totalPage){
        $(window).unbind('scroll');
        return;
      }
      scrollHeight = $(document).height();
      scrollPosition = $(window).height() + $(window).scrollTop();
      if ((scrollHeight - scrollPosition) / scrollHeight <= 0.05){
        //スクロールの位置が下部5%の範囲に来た場合
        if(!loadingFlg){
          addContent();
        }
      }
    });

  });

```
1. スクロールをして、スクロール位置が下部5％の位置に来た時に、再び`addContent()`関数を実行し、DOMの追加処理を行います。
この時、`loadingFlg=true`の時はDOMへ追加する処理を行いません。
2. ページの読み込みを進めて、現在のページが最後のページになった時は、スクロール処理をunbindします。

###サンプルページ
[サンプルファイル](http://chieeeeno.github.io/youtube_playlist_sample/sample1)
[サンプルファイルDL](https://github.com/chieeeeno/youtube_playlist_sample)


###備考
「YouTube IFrame API」と「API Client Library for JavaScript (Beta)」を使用した別バージョンのサンプルも作成しました。

[YouTubeの再生リストを取得してjsで出力するサンプル(YouTube API活用編)](http://qiita.com/chieeeeno/items/da22301be96602662484)