設置サンプル:[YouTube API(v3) - 動画情報取得(認証あり)

このサンプルを試すには、YouTubeアカウントへのアクセスが必要です。
許可する場合はこちらから認証を行ってください。

設置サンプルのソース

<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>
      /* 開発キー
         https://code.google.com/apis/console
      var APIKEY="AIzaSyBWqa3wGl7b8DKxpepR6acqdvgn54_H-DA";
      */
      var APIKEY="AIzaSyC3VBRnfUU9_qO1Gr1ARBO8BZLT-Sp6vFc";

      /* 取得する動画のID、カンマ区切りで複数指定可 */
      var VIDEO_IDs="9hUPqWkgapM,KHs6NqnYozk,9YEEl52u8XE,GILIk8W00s4,8e_wXc0m97w"; /* 非公開, 限定公開, 公開 */

      var limit=0;
      var pageToken="",s="",ss="";
      var allcnt=0,j=0,totalResults=0,resultsPerPage=0,total=0;
      var topicIds_ary=[],topicIds_length=0,topicIds_cnt=0;

      /* クライアントID
         https://code.google.com/apis/console
      */
      var OAUTH2_CLIENT_ID="1090976309145-ach3n4qqmm02js32g7sbe10k66mo0g9q.apps.googleusercontent.com";
      var OAUTH2_SCOPES = [
         'https://www.googleapis.com/auth/yt-analytics.readonly',
         'https://www.googleapis.com/auth/youtube.readonly'
      ];

      /* GoogleAPIロード後に呼び出される */
      window.onJSClientLoad = function() {
         dbg("★onJSClientLoad");
         gapi.auth.init(function() {
            window.setTimeout(checkAuth,1);
         });
      };
      /* OAuth認証チェック */
      function checkAuth() {
         dbg("★checkAuth");
         gapi.auth.authorize({
            client_id: OAUTH2_CLIENT_ID,
            scope: OAUTH2_SCOPES,
            immediate: true
         },handleAuthResult);
      }
      /* gapi.auth.authorize()の呼び出し結果を処理 */
      function handleAuthResult(authResult) {
         if (authResult) {
            /* 認証に成功したら認証リンクを隠し、認証したら見れるものを表示 */
            $('.pre-auth').hide();
            $('.post-auth').show();
            /* 処理実行 */
            loadAPIClientInterfaces();
         }else{
            /* 認証に失敗したら認証リンクを表示し、認証しないと見れないものは非表示 */
            $('.post-auth').hide();
            $('.pre-auth').show();
            displayMessage("認証に失敗しました");
            /* ログインリンクを有効化 */
            $( '#login-link' ).click(function() {
               gapi.auth.authorize({
                  client_id: OAUTH2_CLIENT_ID,
                  scope: OAUTH2_SCOPES,
                  immediate: false
               }, handleAuthResult);
            });
         }
      }
      /* ページにメッセージを表示する */
      function displayMessage(message) {
         $("#message").text(message).show();
      }
      /* 上記で表示されたメッセージを隠す */
      function hideMessage() {
         $("#message").hide();
      }
      /* APIロード */
      function loadAPIClientInterfaces() {
         dbg("loadAPIClientInterfaces");
         gapi.client.setApiKey(APIKEY);
         gapi.client.load('youtube', 'v3', makeRequest);
      }
      var requestOptions = {
         id:VIDEO_IDs,//YouTube動画IDをカンマ区切りで複数指定可
         part:"id, snippet, contentDetails, fileDetails, player, processingDetails, recordingDetails, statistics, status, suggestions, topicDetails"
      };
      /* APIリクエスト */
      function makeRequest(){
         dbg("★makeRequest:"+pageToken);
         if(pageToken){
             requestOptions.pageToken=pageToken;
         }
         var request=gapi.client.request({
            mine:true,
            path:"/youtube/v3/videos",
            params:requestOptions
         });
          request.execute(function(resp) {
            dbg(resp);
            if(resp.error){
               displayMessage(resp.error.message);
            }else{
               output(resp,pageToken);
            }
          });
      }
      /* HTML出力 */
      function output(resp,pageTokenFLG){
         dbg("★output");
         pageToken=resp.nextPageToken;
         if(pageTokenFLG=="" && resp.pageInfo){
            var pageInfo=resp.pageInfo;
            s+="<li><b>pageInfo</b>:<ul>";
               s+="<li>1ページに含まれる結果数:"+pageInfo.resultsPerPage+"</li>";
               s+="<li>結果の合計数:"+pageInfo.totalResults+"</li>";
            s+="</ul></li>";
            resultsPerPage=resp.pageInfo.resultsPerPage;//APIレスポンスに含まれる結果の数。
            totalResults=resp.pageInfo.totalResults;//結果セット内の結果の合計数。
            
            if(limit>0){
               totalResults=limit;
            }
            total=Math.floor(totalResults/resultsPerPage);
            
            if(totalResults<=resultsPerPage){
               total=1;
            }else if(totalResults%resultsPerPage!=0){
               total++;
            }
            dbg("total:"+total+"/resultsPerPage:"+resultsPerPage+"/totalResults:"+totalResults);
            $("#results").append("<h2>Results</h2><ul>"+s+"</ul>");
            s="";
         }
         itemOutput(resp.items);
         allcnt++;
         if(allcnt<total){
            makeRequest();
         }else{
            $("#results").append("<h2>Items</h2><ul>"+s+"</ul>");
         }
      }
      function itemOutput(items){
         $.each(items, function(i, item){
            if(limit!=0 && j>=limit) return;
            j=(allcnt*resultsPerPage)+i+1
            /* id */
            s+="<li><b>id:"+((item.id)?item.id:"no id")+"</b><ul>";
            /* snippet */
            if(item.snippet){
               s+="<li><b>snippet</b>:<ul>";
               var snippet=item.snippet;
               s+=(snippet.title)?"<li>動画タイトル(title):"+snippet.title+"</li>":"";
               s+=(snippet.channelId)?"<li>チャンネルID(channelId):"+snippet.channelId+"</li>":"";
               s+=(snippet.channelTitle)?"<li>チャンネルタイトル(channelTitle):"+snippet.channelTitle+"</li>":"";
               s+=(snippet.categoryId)?"<li>カテゴリID(categoryId):"+snippet.categoryId+"</li>":"";
               s+=(snippet.publishedAt)?"<li>公開日(publishedAt):"+snippet.publishedAt+"</li>":"";
               s+=(snippet.description)?"<li>説明文(description):"+snippet.description+"</li>":"";
               if(snippet.thumbnails && snippet.thumbnails.default){
                  s+="<li>サムネイル(thumbnails):<br><img src='"+snippet.thumbnails.default.url+"' /></li>";
               }
               if(snippet.tags){
                  s+="<li>タグ(tags):"+snippet.tags.join(", ")+"</li>";
               }
               s+="</ul></li>";
            }
            /* contentDetails */
            if(item.contentDetails){
               s+="<li><b>contentDetails</b>:<ul>";
               var contentDetails=item.contentDetails;
               s+=(contentDetails.caption)?"<li>字幕の有無(caption):"+contentDetails.caption+"</li>":"";
               s+=(contentDetails.definition)?"<li>画質(definition):"+contentDetails.definition+"</li>":"";
               s+=(contentDetails.dimension)?"<li>次元(dimension):"+contentDetails.dimension+"</li>":"";
               s+=(contentDetails.duration)?"<li>動画の長さ(duration):"+contentDetails.duration+"</li>":"";
               s+=(contentDetails.licensedContent)?"<li>licensedContent:"+contentDetails.licensedContent+"</li>":"";
               s+="</ul></li>";
            }
            /* fileDetails */
            if(item.fileDetails){
               dbg(item.fileDetails);
            }
            /* player */
            if(item.player){
               s+="<li><b>player</b>:<ul>";
               var player=item.player;
               s+=(player.embedHtml)?"<li>埋め込みタグ(player.embedHtml):<textarea style='width:100%;height:3em;'>"+player.embedHtml+"</textarea></li>":"";
               s+="</ul></li>";
            }
            /* processingDetails */
            if(item.processingDetails){
               s+="<li><b>processingDetails</b>:<ul>";
               var processingDetails=item.processingDetails;
               s+=(processingDetails.processingStatus)?"<li>processingStatus:"+processingDetails.processingStatus+"</li>":"";
               s+="</ul></li>";
            }
            /* recordingDetails */
            if(item.recordingDetails){
               dbg(item.recordingDetails);
            }
            /* statistics */
            if(item.statistics){
               s+="<li><b>statistics</b>:<ul>";
               var statistics=item.statistics;
               s+=(statistics.commentCount)?"<li>コメント数(commentCount):"+statistics.commentCount+"</li>":"";
               s+=(statistics.subscriberCount)?"<li>登録者数(subscriberCount):"+statistics.subscriberCount+"</li>":"";
               s+=(statistics.videoCount)?"<li>動画数(videoCount):"+statistics.videoCount+"</li>":"";
               s+=(statistics.viewCount)?"<li>再生回数(viewCount):"+statistics.viewCount+"</li>":"";
               s+="</ul></li>";
            }
            /* status */
            if(item.status){
               s+="<li><b>status</b>:<ul>";
               var status=item.status;
               s+=(status.embeddable)?"<li>埋め込みを許可(embeddable):"+status.embeddable+"</li>":"";
               s+=(status.license)?"<li>ライセンス(license):"+status.license+"</li>":"";
               s+=(status.privacyStatus)?"<li>公開ステイタス(privacyStatus):"+status.privacyStatus+"</li>":"";
               s+=(status.publicStatsViewable)?"<li>publicStatsViewable:"+status.publicStatsViewable+"</li>":"";
               s+=(status.uploadStatus)?"<li>アップロードステイタス(uploadStatus):"+status.uploadStatus+"</li>":"";
               s+="</ul></li>";
            }
            /* suggestions */
            if(item.suggestions){
               dbg(item.suggestions);
            }
            /* topicDetails */
            if(item.topicDetails && item.topicDetails.topicIds){
               // Freebase topic IDs一覧
               s+="<li><b>topicIds.opicIds</b>:"+item.topicDetails.topicIds.join(" ")+"</li>";
               for(var y in item.topicDetails.topicIds){
                  topicIds_ary.push(item.topicDetails.topicIds[y]);
               }
            }
            s+="</ul></li>";
         });
      }
      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="oauth">
   <h1>設置サンプル:[YouTube API(v3) - 動画情報取得(認証あり)</h1>
   <div id="login-container" class="pre-auth">
      <p>このサンプルを試すには、YouTubeアカウントへのアクセスが必要です。<br>許可する場合は<a href="#" id="login-link">こちらから認証</a>を行ってください。</p>
   </div>
   <div class="post-auth">
      <div id="message"></div>
      <div id="results"></div>
   </div>
</body>
</html>