Youtube APIとajaxを使用し、チャンネルの最新動画を所得するjsを作るも失敗してしまう

▽参考URL
https://qiita.com/norizou4/items/04142dec0cf088887366

掲題の通り、Youtubeにて特定のチャンネルの最新動画を表示するようなサイトを作りたく、
参考URLに載っているコードを使用させていただくも、思うようにいかず困っています。
解決法があれば是非お教え願いたく質問させていただきます。ご教授よろしくお願い致します。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>index</title>
6<link rel="stylesheet" href="css/reset.css">
7<link rel="stylesheet" href="css/style.css">
8<script src="js/jquery-3.4.1.min.js"></script>
9<script src="js/script.js"></script>
10</head>
11<body>
12  <div id="yt-list"></div>
13</body>
14</html>

js
1    function ajaxDataYoutube(){
2      return $.ajax({
3                type: 'GET',
4                url: 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=3&playlistId=[チャンネルID]&key=[アクセスキー]',
5                dataType: 'json',
6                error: function() {
7                    //error func
8                    $('#yt-list').append('<li>Youtubeのデータが取得できませんでした。</li>');
9                }
10        })
11    }
12      ajaxDataYoutube().done(function(jsondataYt){
13        var ytID = jsondataYt.items[0].snippet.resourceId.videoId
14        var ytTitle = jsondataYt.items[0].snippet.title
15        var YtHtml = '<iframe width="369" height="207" src="https://www.youtube.com/embed/'+ ytID +'?controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><h4>'+ ytTitle +'</h4>'
16        $('#yt-list').append(YtHtml);
17      });

アクセスキーについては[https://qiita.com/chieeeeno/items/ba0d2fb0a45db786746f]を
参考に所得しています。
またエラーには以下表記されていました。

jquery-3.4.1.min.js:2
GET https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=3&playlistId=[チャンネルID]&key=[アクセスキー] 404

申し訳ございませんが、よろしくお願い致します。

tabuu

2020/01/08 23:12

>https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=3&playlistId=[チャンネルID]&key=[アクセスキー] ブラウザのアドレス欄にこのURLを入力した際に表示されるエラー内容はどのようになっていますか？

GoMaSio

2020/01/09 15:07

{ "error": { "errors": [ { "domain": "youtube.playlistItem", "reason": "playlistNotFound", "message": "The playlist identified with the requests \u003ccode\u003eplaylistId\u003c/code\u003e parameter cannot be found.", "locationType": "parameter", "location": "playlistId" } ], "code": 404, "message": "The playlist identified with the requests \u003ccode\u003eplaylistId\u003c/code\u003e parameter cannot be found." } } との記載がありました。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

元の記事の通り私も作ってみましたが動きませんでした。
使用されているAPIであるplaylistItemsはあくまでプレイリストIDを元に動画一覧を取得するものであってチャンネルIDでは指定できないのではないかと思います。

提案

使用するAPIをsearchに変更してみたらどうでしょうか
こちらであればチャンネルIDの指定と最新順にとってくる指定が可能です
API DOCS

function ajaxDataYoutube() {
    return $.ajax({
        type: 'GET',
        url: 'https://www.googleapis.com/youtube/v3/search',
        data: {
            part: "snippet",
            maxResults: "3",
            channelId: "[CHANNELID]",
            key: "[APIKEY]",
            //最新順に取得する
            order: "date",
            //ビデオのみ
            type: "video"
        },
        dataType: 'json',
        error: function() {
            //error func
            $('#yt-list').append('<li>Youtubeのデータが取得できませんでした。</li>');
        }
    })
}
ajaxDataYoutube().done(function(jsondataYt) {
    var ytID = jsondataYt.items[0].id.videoId
    var ytTitle = jsondataYt.items[0].snippet.title
    var YtHtml = '<iframe width="369" height="207" src="https://www.youtube.com/embed/' + ytID + '?controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><h4>' + ytTitle + '</h4>'
    $('#yt-list').append(YtHtml);
});

投稿2020/01/09 11:42

編集2020/01/09 11:47