質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

1711閲覧

[JS][API]youtubeAPIでplaylistItems リソースの形式を示したJSON の構造体がコンソール上で表示されません。

norun07

総合スコア8

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/02/01 05:59

編集2022/01/12 10:55

こちらが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が未定義だとエラーが出てしまいました。
このエラーと上記で質問した部分は関係があるように思われます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問