このサンプルを試すには、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 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認証チェック */ /* 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', function(){ $.getYouTubeResults({ "maxResults":10, "channelId":CHANNEL_ID /* チャンネルID指定 */ }); }); } (function($){ $.getYouTubeResults=function(options){ dbg("★getYouTubeResults"); var opt=$.extend({ "type":"video", "maxResults":5, /* 1ページ当たりの結果数最大値 */ "limit":0, "channelId":"", "part":"id, snippet, status", "fields":"" },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, /*//再生リストID(複数指定可) */ //"id":"PL385A95130B11185F,UUvHgCaboF8WCwZzWG7ILDNA,FLK8sQmJBp8GCxrOtXWBpyEA", "part":opt.part }; if(opt.fields!="") requestOptions.fields=opt.fields; 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==""){ if(resp.pageInfo){ var pageInfo=resp.pageInfo; resultsPerPage=resp.pageInfo.resultsPerPage; /*1レスポンスに含まれる結果数 */ 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("<h2>Results</h2>"+s); s=""; } } itemOutput(resp.items); allcnt++; if(allcnt<total){ makeRequest(); }else{ $("#results").append("<h2>Playlists</h2>"+s); } } function itemOutput(items){ dbg("★itemOutput"); dbg(items); //dbg("allcnt:"+allcnt+"/j:"+j); $.each(items, function(i, item){ if(opt.limit>0 && 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): "+channelTitle+"(<a href='http://www.youtube.com/channel/"+channelId+"'>"+channelId+"</a>)</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 & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <h1>認証ユーザー自身のチャンネルの再生リスト情報取得(認証あり)</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>