現在自分のサイト上に自分が投稿しているyoutubeの動画情報(サムネイルとタイトル)を表示したいと考えています。
方法を調べ、youtubeAPIを使ってデータを取得、表示できるということだったのでAPIを使って表示させました。
方法としては、『動画情報を取得するJSファイルを作成し、サイトのTOPページ用のhtmlの方でそのJSファイルを読み込み表示する』というものです。
この方法で表示自体はできたのですが、すぐAPIのクォータ制限となってしまいデータを取得できなくなってしまいます。
すぐ制限になってしまうのは、ローカル上でレイアウトの確認等で何回もhtmlファイルをリロードし、その度にAPI情報を使っているからとは思いますが、幾ら何でも制限にかかってしまうのが早すぎる印象です。
このままでは公開したとしても、複数人のアクセスによってすぐ制限がかかり、表示できなくなると思うのですが、複数人がアクセスしてもクォーターの上限に引っかからないための対策はあるのでしょうか?
制限の上限を引き上げる方法もあるようですが、課金は考えておらず可能であれば制限はそのままでサーバーに公開し複数人がアクセスしても問題なく動画情報を引っ張ってくることができる方法があればご教示いただきたいです。
①YoutubeAPIを使って複数人アクセスに耐えられる動画情報取得方法
こちらが現実的でなければ
②それ以外の方法で動画情報を表示する方法 (最悪ハードコーディングも検討しているのでそれ以外の方法でお願いいたします。)
下記、動画情報取得用のJSのコードになります。
JavaScript
1//リクエストパラメーターのセット 2const KEY = 'API KEY' ;// APIKEY 3let url = 'https://www.googleapis.com/youtube/v3/search'; // APIURL 4url += '?part=snippet';//検索結果にすべてのプロパティを含む 5url += '&maxResults=4';//動画の最大取得件数 6url += '&channelId=CHANNEL ID ';//チャンネルID指定 7url += '&key=' + KEY;//APIKEY 8 9 10//ここでconsole.log(url)をして、urlが作成されているか確認 11//コンソールに出てきたurlをブラウザに貼り付け正常に動作するか確認する 12//APIからのレスポンスでJSONが返ってきていればOK 13 14$(function(){ 15 if($('#videoList').length){ 16 console.log(url); 17 function setData(data){ 18 let result = ''; 19 let thumbnail = ''; 20 //動画を表示するHTMLを作る 21 for (let i = 0; i < data.items.length; i++){ 22 thumbnail = '<img src="'; 23 thumbnail += data.items[i].medium.url; 24 thumbnail += '">'; 25 result += '<div class="other-card">' + thumbnail + '</div>' 26 } 27 $('#videoList').html(result); 28 } 29 //Ajax通信をする 30 $(function(){ 31 $.ajax({ 32 url: url, 33 dataType : 'jsonp' 34 }).done(function(data){ 35 if(data.items){ 36 setData(data); 37 } else{ 38 console.log(data); 39 alert('該当するデーターが見つかりませんでした。') 40 } 41 }).fail(function(data){ 42 alert('通信に失敗しました。'); 43 }); 44 }); 45 function setData(data){ 46 let result = ''; 47 let thumbnail = ''; 48 let title = ''; 49 let link = ''; 50 //動画を表示するHTMLを作る 51 for (let i = 0; i < data.items.length; i++){ 52 link = '<a class="youtube-link cover" href="https://www.youtube.com/watch?v='; 53 link += data.items[i].id.videoId; 54 link += '" target="_blank"></a>'; 55 thumbnail = '<div class="img_box"><img class="other-img" src="'; 56 thumbnail += data.items[i].snippet.thumbnails.medium.url; 57 thumbnail += '">' + link + '</div>'; 58 title = '<div class="event-body"><h4>'; 59 title += data.items[i].snippet.title; 60 title += '</h4>' + link + '</div>'; 61 62 result += '<div class="other-card">' + thumbnail + title + '</div>'; 63 } 64 $('#videoList').html(result); 65 } 66 } 67});
皆様のお力をお貸しいただけますと助かります。
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/02 10:33