このサンプルを試すには、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>