PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル:[YouTube API(v3) - 特定の再生リスト情報を取得する(認証なし)

設置サンプルのソース

<html>
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="/module/include/strm/youtubedataapi_v3_list/style.css">
   <title>YouTubeAPIv3サンプル | 特定の再生リスト情報を取得する(認証なし)</title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script>
      /* チャンネルID
         http://www.youtube.com/channel/UCWuGWqlTp0_To1eJuSBvLMg
         http://www.youtube.com/user/cocoism
      */
      var CHANNEL_ID="UCWuGWqlTp0_To1eJuSBvLMg";

      /* 開発キー
         https://developers.google.com/youtube/registering_an_application
      */
      var APIKEY="AIzaSyC3VBRnfUU9_qO1Gr1ARBO8BZLT-Sp6vFc";
      
      /* GoogleAPIロード後に呼び出される */
      window.onJSClientLoad = function() {
         dbg("★onJSClientLoad");
         gapi.client.setApiKey(APIKEY);
         gapi.client.load('youtube', 'v3', function(){
            $.getYouTubeResults({
               "limit":50,
               "maxResults":25,
            });
         });
      };
      (function($){
         $.getYouTubeResults=function(options){
            dbg("★getYouTubeResults");
            var opt=$.extend({
               "type":"video",
               "maxResults":10,
               "limit":0,
               "channelId":CHANNEL_ID
            },options);

            var pageToken="", s="";
            var allcnt=0, j=0, totalResults=0, resultsPerPage=0, total=0;

            var requestOptions = {
               /*  1ページ当たりの結果数最大値(0-50) デフォルト10 */
               maxResults:opt.maxResults,
               /* 固有チャンネルID(ユーザー名ではない)*/
               channelId:opt.channelId,
               "part":"id, snippet, status"
            };
            makeRequest();

            /* APIリクエスト */
            function makeRequest(){
               dbg("★makeRequest:"+pageToken);
               if(pageToken){
                   requestOptions.pageToken=pageToken;
               }
               var request=gapi.client.request({
                  "mine":false,
                  "path":"/youtube/v3/playlists",
                  "params":requestOptions
               });
                request.execute(function(resp) {
                  dbg(resp);
                  output(resp,pageToken);
                });
            }
            /* HTML出力 */
            function output(resp,pageTokenFLG){
               dbg("★output");
               pageToken=resp.nextPageToken;
               if(pageTokenFLG==""){
                  var pageInfo=resp.pageInfo;
                  s+="<ul>";
                     s+="<li>1ページに含まれる結果数:"+pageInfo.resultsPerPage+"</li>";
                     s+="<li>結果の合計数:"+pageInfo.totalResults+"</li>";
                  s+="</ul>";
                  resultsPerPage=resp.pageInfo.resultsPerPage; /* APIレスポンスに含まれる結果の数 */
                  totalResults=resp.pageInfo.totalResults; /* 結果セット内の結果の合計数 */
                  total=Math.floor(totalResults/resultsPerPage);
                  if(totalResults<=resultsPerPage){
                     total=1;
                  }else if(totalResults%resultsPerPage!=0){
                     total++;
                  }
                  dbg("total:"+total+"/resultsPerPage:"+resultsPerPage+"/totalResults:"+totalResults);
                  s+="<ul>";
                     s+="<li>結果数最大値の指定:"+opt.maxResults+"</li>";
                     s+="<li>結果セット内の結果合計数:"+pageInfo.totalResults+"</li>";
                     s+="<li>1レスポンスに含まれる結果数:"+pageInfo.resultsPerPage+"</li>";
                     s+="<li>取得数上限:"+((opt.limit==0)?"∞":"")+"</li>";
                     s+="<li>リクエスト回数:"+total+"</li>";
                  s+="</ul>";
                  $("#results").append(s);
                  s="";
               }
               itemOutput(resp.items);
               allcnt++;
               if(allcnt<total){
                  makeRequest();
               }else{
                  $("#results").append("<h2>Results</h2>"+s);
               }
            }
            function itemOutput(items){
               dbg("★itemOutput");
               //dbg("allcnt:"+allcnt+"/j:"+j);
               $.each(items, function(i, item){
                  if(j>=opt.limit) return;
                  j=(allcnt*resultsPerPage)+i+1;
                  /* 動画IDが取得できない場合がある */
                  if(item.id && item.snippet){
                     s+="<dl>";
                     var id=(item.id)?item.id:"no id";
                     var thumbnails_default="no thumbnails";
                     var snippet=item.snippet;
                     var title=(snippet.title)?snippet.title:"no title";
                     var channelId=(snippet.channelId)?snippet.channelId:"no channelId";
                     var channelTitle =(snippet.channelTitle )?snippet.channelTitle :"no channelTitle ";
                     var pubdatedAt=(snippet.publishedAt)?formatDate(snippet.publishedAt):"no publishedAt";
                     var description=(snippet.description)?snippet.description:"no description";
                     if(snippet.thumbnails){
                        thumbnails_default=snippet.thumbnails.medium.url;
                        /* default, medium, height
                        $.each(snippet.thumbnails, function(y, ytem){
                           thumbnails:[default]: https://i.ytimg.com/vi/NH5aAfMKFzQ/default.jpg
                           thumbnails:[medium]: https://i.ytimg.com/vi/NH5aAfMKFzQ/mqdefault.jpg
                           thumbnails:[high]: https://i.ytimg.com/vi/NH5aAfMKFzQ/hqdefault.jpg
                        });
                        */
                     }
                     s+="<dt><a href='http://www.youtube.com/playlist?list="+id+"'><img src='"+thumbnails_default+"'></a></dt><dd>";
                     s+="<b>【"+j+"】再生リストのタイトル(ID): "+title+"("+id+")</b>";
                     s+="<p>アップロード日: "+pubdatedAt+"</p>";
                     s+="<p>再生リストの説明文:"+description+"</p>";
                     if(item.status){
                        var status=item.status;
                        s+="<p>再生リストのステイタス:"+status.privacyStatus+"</p>";
                     }
                     s+="<p>再生リストが属するチャンネルID: "+channelId+"/再生リストが属するチャンネルタイトル: "+channelTitle+"</p>";
                     s+="</dd></dl>";
                  }
               });
            }
             return this;
         }
      })(jQuery);
      var formatDate=function(str){
         var tmp=str.split("T");
         var ymd=tmp[0].split("-");
         var hms=tmp[1].split(":");
         var sec=hms[2].split(".")[0];
         var d=new Date(new Date(ymd[0], ymd[1]-1, ymd[2], hms[0], hms[1], sec).getTime()+(1000*60*60*9)); //+9h
         var year=d.getFullYear();
         var month=d.getMonth()+1;
         var day=d.getDate();
         var hour=(d.getHours()   < 10 ) ? '0'+d.getHours()   : d.getHours();
         var min =(d.getMinutes() < 10 ) ? '0'+d.getMinutes() : d.getMinutes();
         var sec =(d.getSeconds() < 10 ) ? '0'+d.getSeconds() : d.getSeconds();
         return year+"/"+month+"/"+day+" "+hour+":"+min;//+":"+sec;
      }
      var dbg=function(str){
         try{
            if(window.console && console.log){
               console.log(str);
            }
         }catch(err){
            //alert("error:"+err);
         }
      }
   </script>
   <script src="https://apis.google.com/js/client.js?onload=onJSClientLoad"></script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <h1>設置サンプル:[YouTube API(v3) - 特定の再生リスト情報を取得する(認証なし)</h1>
   <div id="results"></div>
 </body>
</html>