Youtube APIで動画情報を取得しサイトに表示しているがすぐに制限量を超過し表示できなくなる

Question

現在自分のサイト上に自分が投稿しているyoutubeの動画情報（サムネイルとタイトル）を表示したいと考えています。

方法を調べ、youtubeAPIを使ってデータを取得、表示できるということだったのでAPIを使って表示させました。

方法としては、『動画情報を取得するJSファイルを作成し、サイトのTOPページ用のhtmlの方でそのJSファイルを読み込み表示する』というものです。

この方法で表示自体はできたのですが、すぐAPIのクォータ制限となってしまいデータを取得できなくなってしまいます。
すぐ制限になってしまうのは、ローカル上でレイアウトの確認等で何回もhtmlファイルをリロードし、その度にAPI情報を使っているからとは思いますが、幾ら何でも制限にかかってしまうのが早すぎる印象です。

このままでは公開したとしても、複数人のアクセスによってすぐ制限がかかり、表示できなくなると思うのですが、複数人がアクセスしてもクォーターの上限に引っかからないための対策はあるのでしょうか？

制限の上限を引き上げる方法もあるようですが、課金は考えておらず可能であれば制限はそのままでサーバーに公開し複数人がアクセスしても問題なく動画情報を引っ張ってくることができる方法があればご教示いただきたいです。

①YoutubeAPIを使って複数人アクセスに耐えられる動画情報取得方法

こちらが現実的でなければ

②それ以外の方法で動画情報を表示する方法 （最悪ハードコーディングも検討しているのでそれ以外の方法でお願いいたします。）

下記、動画情報取得用のJSのコードになります。

//リクエストパラメーターのセット
const KEY = 'API KEY' ;// APIKEY
let url = 'https://www.googleapis.com/youtube/v3/search'; // APIURL
url += '?part=snippet';//検索結果にすべてのプロパティを含む
url += '&maxResults=4';//動画の最大取得件数
url += '&channelId=CHANNEL ID ';//チャンネルID指定
url += '&key=' + KEY;//APIKEY


//ここでconsole.log(url)をして、urlが作成されているか確認
//コンソールに出てきたurlをブラウザに貼り付け正常に動作するか確認する 
//APIからのレスポンスでJSONが返ってきていればOK

$(function(){
  if($('#videoList').length){
    console.log(url);
    function setData(data){
      let result = '';
      let thumbnail = '';
      //動画を表示するHTMLを作る
      for (let i = 0; i < data.items.length; i++){
        thumbnail = '<img src="';
        thumbnail += data.items[i].medium.url;
        thumbnail += '">';
        result += '<div class="other-card">' + thumbnail + '</div>'
      }
      $('#videoList').html(result);
    }
    //Ajax通信をする
    $(function(){
      $.ajax({
        url: url,
        dataType : 'jsonp'
      }).done(function(data){
        if(data.items){
          setData(data);
        } else{
          console.log(data);
          alert('該当するデーターが見つかりませんでした。')
        }
      }).fail(function(data){
        alert('通信に失敗しました。');
      });
    });
    function setData(data){
      let result = '';
      let thumbnail = '';
      let title = '';
      let link = '';
      //動画を表示するHTMLを作る
      for (let i = 0; i < data.items.length; i++){
        link = '<a class="youtube-link cover" href="https://www.youtube.com/watch?v=';
        link += data.items[i].id.videoId;
        link += '" target="_blank"></a>';
        thumbnail = '<div class="img_box"><img class="other-img" src="';
        thumbnail += data.items[i].snippet.thumbnails.medium.url;
        thumbnail += '">' + link + '</div>';
        title = '<div class="event-body"><h4>';
        title += data.items[i].snippet.title;
        title += '</h4>' + link + '</div>';
        
        result += '<div class="other-card">' + thumbnail + title + '</div>';
      }
      $('#videoList').html(result);
    }
  }
});

皆様のお力をお貸しいただけますと助かります。
よろしくお願いいたします。

Answer 1

都度 API を叩く設計になっているので、設計を見直すことが必要かと。
要件が不明なのでアドバイスは一般論となりますが、API での検索結果をキャッシュとしてサーバに置き、それを配信することで対応することになると思います。
キャッシュ更新は API の制限レートに併せて適度に行うことになります。

Comments

[GenkiSugiyama]

@te2ji 様
ご回答いただきありがとうございます。
現状はフロント側でページをロードする度にAPIを叩いてしまっているという認識で合っていますでしょうか？
対策としては、APIの取得結果をサーバーに置きそれを配信するということですが、そのためにはどのような処理が必要となるのでしょうか？（サイトはcakePHPで作られているのでサーバーサイドのPHPで取得処理を書いてそのファイルをどこかのディレクトリに配置するなどでしょうか？）
知識不足、勉強不足なため質問が曖昧になってしまい大変恐縮ですが、ご教示いただけると幸いです。