YouTubeソムリエAI の作成のため、YouTube公式の「JavaScript コードサンプル」を試してみます。この記事ではうまくいっていません。。。お分かりになる方、お知恵を拝借したく。。。

（背景）「SPARKS」という「アイデアのプロトタイピング支援に特化したクラウドファンディング」にプロトアウトスタジオの卒業制作を掲載しています。2021年7月21日まで。よろしければご覧ください。拡散いただけるとうれしいです。

さて、このサンプルには「API キー」とは別に「OAuth 2.0 クライアント ID」が必要なようです。

auth.js スクリプトでは、Google APIs Client Library for JavaScript を使用し、API にアクセスしてユーザーリクエストを承認する方法を示します。このページの以降のサンプルはすべて、このスクリプトを使ってリクエストを承認しています。

完成形ではAPIキーだけでいいとは思うのですが、せっかくなのでOAuthも作ってみます。

OAuthの認証情報を入力。。。しましたが、IDが発行されません。はて？

画面の上部、「＋認証情報を作成」をクリックする必要がありました！（わかりにくい！）

無事、クライアントIDをサンプルコードに入力して、serve。

あれ、「Search」ボタンがグレイアウトしてて押せない。。。

うーん。OAuthの認証情報のところで、テストユーザーを入力させる欄があったのでそれかな、と予想。

説明ページの最下段のSearchからやろうとしてたので、上から順番にサンプルコードを試してみます。

こちらは注意書きが出てくれてますね。やっぱりログインしてねーよ、という話の模様。でもクリックしても無反応。なのでコードを見てみます。

href="#"かー。そっかー。

うーん、このブラウザでYouTubeにはログイン済なんですけどねー。手元でserveしてるからかしら、と思って「http://localhost:5000 」でアクセスしてたのを「http://192.168.1.37:5000 」に変更してみましたが特に変わらず、うーん。

あとは思いつくのはOAuthが「テスト」だから「本番」にする、とか？

やってみましたが、変わらず。

うーん。あれ、そういえば他の人のサンプルコードをぐぐってたときにはYouTube用のライブラリを落としてた気がするが、今回何もやってないぞ？
と思ってサンプルコードのページの一番上を見ると、

次のコードサンプルは JavaScript用のGoogle APIのクライアントライブラリを使用しており、YouTube Data API で利用できます。

あ。このライブラリが必要なんじゃね？　リンク先は以下のGitHub。

いまいちnpmのインストール方法がわからない。（探せない）

以下の記事を参考にインストールしてみる。


npm install googleapis --save

変わらず。本日はここで時間切れ。。。

（7:34 追記）
・ブラウザをChromeからEdgeに変更しても変わらず。

・「This application requires access to your YouTube account.Please authorize to continue.」が怪しいかと思いましたが、認証されてない条件で表示される文章というわけではないので関係ないのかもしれません。

my_uploads.html


<!doctype html>
<html>
  <head>
    <title>My Uploads</title>
    <link rel="stylesheet" type="text/css" href="my_uploads.css">
  </head>
  <body>
    <div id="login-container" class="pre-auth">
      This application requires access to your YouTube account.
      Please <a href="#" id="login-link">authorize</a> to continue.
    </div>
    <div id="video-container"></div>
    <div class="button-container">
      <button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
      <button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
    </div>
    <script src="https://www.gstatic.com/external_hosted/jquery2.min.js"></script>
    <script type="text/javascript" src="auth.js"></script>
    <script type="text/javascript" src="my_uploads.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
  </body>
</html>