設置サンプル:[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="AIzaSyC3VBRnfUU9_qO1Gr1ARBO8BZLT-Sp6vFc";

      /* クライアントID
         https://code.google.com/apis/console
      var OAUTH2_CLIENT_ID = "693654264922.apps.googleusercontent.com";
      */
      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) {
         dbg("★handleAuthResult");
         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', getUserChannel);
      }
      /* チャンネル情報取得 */
      function getUserChannel(){
         dbg("★getUserChannel");
         dbg("getUserChannel");
         var request=gapi.client.request({
            mine:"",
            path:"/youtube/v3/channels",
            params :{
               /* チャンネルIDをカンマ区切りで指定 */
               id:"UCWuGWqlTp0_To1eJuSBvLMg,UC5q0PIKGr2lGOsiT14AlEYg,UCclHSnngVTZK7LEOQAzcg1w,UC6xD-jKli-_qIYXDTsNv4dw",
               part:"id, snippet, brandingSettings, contentDetails, invideoPromotion, statistics, topicDetails"
            }
         });
          request.execute(function(resp) {
             dbg(resp)
            if(resp.error){
               displayMessage("ERROR: "+resp.message);
            }else{
               output(resp);
            }
          });
      }
      /* HTML出力 */
      function output(data){
         dbg("★output");
         var s="";
         var pageInfo=data.pageInfo;
         s+="<li><b>pageInfo</b>:<ul>";
            s+="<li>resultsPerPage:"+pageInfo.resultsPerPage+"</li>";
            s+="<li>totalResults:"+pageInfo.totalResults+"</li>";
         s+="</ul></li>";
         var totalResults=data.pageInfo.totalResults; /* 結果セット内の結果の合計数 */
         var resultsPerPage=data.pageInfo.resultsPerPage; /* APIレスポンスに含まれる結果の数 */
         var total=Math.floor(totalResults/resultsPerPage);
         dbg("total:"+total+"/resultsPerPage:"+resultsPerPage+"/totalResults:"+totalResults);
         $.each(data.items, function(i, item){
            /* id */
            s+="<li>★<b>"+((item.id)?"チャンネルID(id):"+item.id:"")+"</b><ul>";
            /* snippet */
            if(item.snippet){
               var snippet=item.snippet;
               s+="<li><b>snippet</b>:<ul>";
               s+=(snippet.title)?"<li>チャンネル名称(title):"+snippet.title+"</li>":"";
               s+=(snippet.description)?"<li>チャンネル説明文(description):"+snippet.description+"</li>":"";
               s+=(snippet.publishedAt)?"<li>登録日(publishedAt):"+snippet.publishedAt+"</li>":"";
               if(snippet.thumbnails && snippet.thumbnails.default){
                  /* サムネイル(default, medium, height) */
                  s+="<li>thumbnails:<ul>";
                  $.each(snippet.thumbnails, function(y, ytem){
                     s+="<li>"+y+":"+ytem.url+"<br><img src='"+ytem.url+"' /></li>";
                  });
                  s+="</ul></li>";
               }
               s+="</ul></li>";
            }
            /* brandingSettings */
            if(item.brandingSettings){
               s+="<li><b>brandingSettings</b><ul>";
               var brandingSettings=item.brandingSettings;
               for(var o in brandingSettings){
                  s+="<li>"+o+"<ul>";
                  for(var oo in brandingSettings[o]){
                     if(o=="hints"){
                        s+="<li>"+oo+"<ul>";
                        for(var ooo in brandingSettings[o][oo]){
                           s+="<li>"+ooo+": "+brandingSettings[o][oo][ooo]+"</li>";
                        }
                        s+="</ul>";
                     }else{
                        s+="<li>"+oo+": "+brandingSettings[o][oo]+"</li>";
                     }
                  }
                  s+="</ul></li>";
               }
               s+="</ul></li>";
            }
            /* contentDetails */
            if(item.contentDetails){
               s+="<li><b>contentDetails</b>:<ul>";
               var contentDetails=item.contentDetails;
               var googlePlusUserId=contentDetails.googlePlusUserId;
               var relatedPlaylists=contentDetails.relatedPlaylists;
               s+=(googlePlusUserId)?"<li>Google+のID(googlePlusUserId):<a href='https://plus.google.com/'>"+googlePlusUserId+"</a></li>":"";
               if(relatedPlaylists){
                  s+="<li>関連プレイリスト(relatedPlaylists):<ul>";
                     s+=(relatedPlaylists.favorites)?"<li>お気に入りの動画(favorites):<a href='http://www.youtube.com/playlist?list="+relatedPlaylists.favorites+"'>"+relatedPlaylists.favorites+"</a></li>":"";
                     s+=(relatedPlaylists.likes)?"<li>評価の高い動画(likes):<a href='http://www.youtube.com/playlist?list="+relatedPlaylists.likes+"'>"+relatedPlaylists.likes+"</a></li>":"";
                     s+=(relatedPlaylists.uploads)?"<li>アップロード動画 (uploads):<a href='http://www.youtube.com/playlist?list="+relatedPlaylists.uploads+"'>"+relatedPlaylists.uploads+"</a></li>":"";
                     s+=(relatedPlaylists.watchHistory)?"<li>閲覧履歴(watchHistory):<a href='http://www.youtube.com/playlist?list="+relatedPlaylists.watchHistory+"'>"+relatedPlaylists.watchHistory+"</a></li>":"";
                     s+=(relatedPlaylists.watchLater)?"<li>後で見る(watchLater):<a href='http://www.youtube.com/playlist?list="+relatedPlaylists.watchLater+"'>"+relatedPlaylists.watchLater+"</a></li>":"";
                  s+="</ul></li>";
               }
               s+="</ul></li>";
            }
            /* invideoPromotion 入ってない */
            if(item.invideoPromotion){
               dbg(item.invideoPromotion);
            }
            /* statistics */
            if(item.statistics){
               var statistics=item.statistics;
               s+="<li><b>statistics</b>:<ul>";
                  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>";
            }
            /* topicDetails 入ってない */
            if(item.topicDetails){
               dbg(item.topicDetails);
            }
            s+="</ul></li>";
         });
         $("#results").append("<h2>channels</h2><ul>"+s+"</ul>");
      }
      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="results"></div>
   </div>
</body>
</html>