こちらがjavascript全体の構造です。
js
1// Option 2 var CLIENT_ID = 'xxxxxxxxxxxx'; 3 var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"]; 4 5 var SCOPES = "https://www.googleapis.com/auth/youtube.readonly"; 6 7 var authorizeButton = document.getElementById('authorize-button'); 8 var signoutButton = document.getElementById('signout-button'); 9 var content = document.getElementById('content'); 10 var channelForm = document.getElementById('channel-form'); 11 var channelInput = document.getElementById('channel-input'); 12 var videoContainer = document.getElementById('video-container'); 13 // var submitButton = document.getElementById('submits__btn'); 14 var defaultChannel = 'techguyweb'; 15 16 // Form submit and change channel 17document.addEventListener("DOMContentLoaded", function(){ 18 channelForm.addEventListener('submit', function(e){ 19 e.preventDefault(); 20 21 var channel = channelInput.value; 22 23 getChannel(channel); 24 }); 25}, false); 26 27 // Load auth2 libraly 28 function handleClientLoad(){ 29 gapi.load('client:auth2' , initClient); 30 } 31 32 33 // Init API client library and set up sign in listeners 34 function initClient(){ 35 gapi.client.init({ 36 discoveryDocs: DISCOVERY_DOCS, 37 clientId: CLIENT_ID, 38 scope: SCOPES 39 }).then(() => { 40 //Listen for sign in state changes 41 gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); 42 // Handle initial sign in state 43 updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); 44 authorizeButton.onclick = handleAuthClick; 45 signoutButton.onclick = handleSignoutClick; 46 }); 47 } 48 49 // Update UI sign in state changes 50 function updateSigninStatus(isSignedIn) { 51 if(isSignedIn){ 52 authorizeButton.style.display = 'none'; 53 signoutButton.style.display = 'block'; 54 content.style.display = 'block'; 55 videoContainer.style.display = 'block'; 56 getChannel(defaultChannel); 57 } else { 58 authorizeButton.style.display = 'block'; 59 signoutButton.style.display = 'none'; 60 content.style.display = 'nonek'; 61 videoContainer.style.display = 'none'; 62 } 63 } 64 65 // handle login 66 function handleAuthClick(){ 67 gapi.auth2.getAuthInstance().signIn(); 68 } 69 70 // handle logout 71 function handleSignoutClick(){ 72 gapi.auth2.getAuthInstance().signOut(); 73 } 74 75 // Display channel data 76 function showChannelData(data){ 77 var channelData = document.getElementById('channel-data'); 78 channelData.innerHTML = data; 79 } 80 81 // Add commas to number 82 function numberWithCommas(x) { 83 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 84 } 85 86 87 88 // Get channel from API 89 function getChannel(channel){ 90 gapi.client.youtube.channels 91 .list({ 92 part: 'snippet,contentDetails,statistics', 93 forUsername: channel 94 }) 95 .then(response => { 96 console.log(response); 97 var channel = response.result.items[0]; 98 99 var output = ` 100 <ul class='collection'> 101 <li class='collection-item'>Title: ${channel.snippet.title}</li> 102 <li class='collection-item'>ID: ${channel.id}</li> 103 <li class='collection-item'> Subscribers: ${ 104 numberWithCommas(channel.statistics.subscriberCount) 105 }</li> 106 <li class='collection-item'>Views: ${ 107 numberWithCommas(channel.statistics.viewCount) 108 }</li> 109 <li class='collection-item'>Videos: ${ 110 numberWithCommas(channel.statistics.videoCount) 111 }</li> 112 </ul> 113 <p>${channel.snippet.description}</p> 114 <hr> 115 <a class='btn grey darken-2' target='_blank' href="https://youtube.com/${channel.snippet.customUrl}"> 116 Visit Channel</a> 117 `; 118 showChannelData(output); 119 120 var playlistId = channel.contentDetails.relatedPlaylists.uploads; 121 requestVideoPlaylist(playlistId); 122 }) 123 .catch(error => alert('No Channel By That Name')); 124 } 125 126 function requestVideoPlaylist(playlistId) { 127 var requestOptions = { 128 playlistId: playlistId, 129 part: 'snippet', 130 maxResults: 10 131 }; 132 133 var request = gapi.client.youtube.playlistItem.list(requestOptions); 134 135 request.execute(response => { 136 console.log(response); 137 var playListItems = response.result.items; 138 if(playListItems){ 139 var output = '<h4 class="align-center">Latest Videos</h4>'; 140 141 // Loop through videos and append output 142 playListItems.forEach(item => { 143 var videoId = item.snippet.resourceId.videoId; 144 145 output += ` 146 <div class="col s3"> 147 <iframe width="100%" height="auto" src="https://www.youtube.com/embed/ 148 ${videoId}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 149 </div> 150 `; 151 }); 152 153 // Output videos 154 videoContainer.innerHTML = output; 155 156 } else { 157 videoContainer.innerHTML = 'No Uploaded Videos'; 158 } 159 }); 160 }
ここからの記述がhtmlとして表示されません。↓
特に var videoId = item.snippet.resourceId.videoId;
のresourceIdとvideoIdは現在私のjson構造のsnippet以下には無く、resourceIdとvideoIdが
あるjson構造はplaylistItem リソースにあるのですが、それを取得できていません。
js
1function requestVideoPlaylist(playlistId) { 2 var requestOptions = { 3 playlistId: playlistId, 4 part: 'snippet', 5 maxResults: 10 6 }; 7 8 var request = gapi.client.youtube.playlistItem.list(requestOptions); 9 10 request.execute(response => { 11 console.log(response); 12 var playListItems = response.result.items; 13 if(playListItems){ 14 var output = '<h4 class="align-center">Latest Videos</h4>'; 15 16 // Loop through videos and append output 17 playListItems.forEach(item => { 18 var videoId = item.snippet.resourceId.videoId; 19 20 output += ` 21 <div class="col s3"> 22 <iframe width="100%" height="auto" src="https://www.youtube.com/embed/ 23 ${videoId}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 24 </div> 25 `; 26 }); 27 28 // Output videos 29 videoContainer.innerHTML = output; 30 31 } else { 32 videoContainer.innerHTML = 'No Uploaded Videos'; 33 } 34 }); 35 }
js
1function requestVideoPlaylist(playlistId) { 2 var requestOptions = { 3 playlistId: playlistId, 4 part: 'snippet', 5 maxResults: 10 6 }; 7 8 var request = gapi.client.youtube.playlistItem.list(requestOptions); 9 10 request.execute(response => { 11 console.log(response); });
特に上記requestVideoPlaylist(playlistId)内
の記述で本来ならばコンソール上のjson構造にmaxResults: 10とした通り
itemがArray(10)になりjson構造はこのようになります。↓
以下playlistItem リソースのurlです。
https://developers.google.com/youtube/v3/docs/playlistItems?hl=ja
{ "kind": "youtube#playlistItem", "etag": etag, "id": string, "snippet": { "publishedAt": datetime, "channelId": string, "title": string, "description": string, "thumbnails": { (key): { "url": string, "width": unsigned integer, "height": unsigned integer } }, "channelTitle": string, "playlistId": string, "position": unsigned integer, "resourceId": { "kind": string, "videoId": string, } }, "contentDetails": { "videoId": string, "startAt": string, "endAt": string, "note": string }, "status": { "privacyStatus": string } }
このようになっているはずなのですが、
現在、item数は1つしか表示されず、json構造もchannelリソースの構造のようです。
下記が現在の私のjson構造です。(resourceIdもvideoIdも表示されません。)
見難くて申し訳ございません。
以下channelリソースのurlです。
https://developers.google.com/youtube/v3/docs/channels
contentDetails: {relatedPlaylists: {…}} etag: ""Fznwjl6JEQdo1MGvHOGaz_YanRU/jkC-LQs_u5bdCf6QYwGpGNpxSP0"" id: "UC29ju8bIPH5as8OGnQzwJyA" kind: "youtube#channel" snippet: country: "US" customUrl: "traversymedia" description: "Traversy Media features the best online web development and programming tutorials for all of the latest web technologies including Node.js, Angular 2, React.js, PHP, Rails, HTML, CSS and much more" localized: {title: "Traversy Media", description: "Traversy Media features the best online web develo… 2, React.js, PHP, Rails, HTML, CSS and much more"} publishedAt: "2009-10-30T21:33:14.000Z" thumbnails: {default: {…}, medium: {…}, high: {…}} title: "Traversy Media" __proto__: Object statistics: {viewCount: "83941695", commentCount: "0", subscriberCount: "982000", hiddenSubscriberCount: false, v
懸念している点は
js
1var requestOptions = { 2 playlistId: playlistId, 3 part: 'snippet', 4 maxResults: 10 5 };
part:'snippet'ここの記述がjson構造に影響しているのでは?と考えていますがAPI初心者ですので解決の糸口がここ数日全くつかめません。
どなたかお力添えよろしくお願い致します。
追記:
申し訳ございません。
requestVideoPlaylist関数内でエラーが起きたので追記致します。
エラー文(Uncaught TypeError: Cannot read property 'list' of undefined)
var request = gapi.client.youtube.playlistItem.list(requestOptions);
この行のlistが未定義だとエラーが出てしまいました。
このエラーと上記で質問した部分は関係があるように思われます。
あなたの回答
tips
プレビュー